md-editor-rt/lib/es/MdPreview.mjs

Markdown editor for react, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...

import { jsx as i } from "react/jsx-runtime";
import { useImperativeHandle as V, forwardRef as z, useState as K, useRef as O, useEffect as S, useMemo as k, memo as G } from "react";
import { d as e, p as d } from "./chunks/config.mjs";
import { E as Z } from "./chunks/context.mjs";
import { u as $, i as j, a as D } from "./chunks/hooks.mjs";
import { c as L } from "./chunks/index2.mjs";
import { b as w, f as U } from "./chunks/event-bus.mjs";
const W = (o, n) => {
  const { editorId: a } = o;
  V(n, () => ({
    rerender() {
      w.emit(a, U);
    }
  }), [a]);
}, q = z((o, n) => {
  const {
    value: a = o.modelValue || e.modelValue,
    onChange: l = e.onChange,
    theme: s = e.theme,
    className: I = e.className,
    showCodeRowNumber: m = e.showCodeRowNumber,
    previewTheme: u = e.previewTheme,
    noMermaid: x = e.noMermaid,
    noKatex: C = e.noKatex,
    onHtmlChanged: b = e.onHtmlChanged,
    onGetCatalog: p = e.onGetCatalog,
    sanitize: T = e.sanitize,
    mdHeadingId: E = e.mdHeadingId,
    noHighlight: P = e.noHighlight,
    noImgZoomIn: R = e.noImgZoomIn,
    language: c = e.language,
    sanitizeMermaid: H = e.sanitizeMermaid,
    codeFoldable: M = e.codeFoldable,
    autoFoldThreshold: N = e.autoFoldThreshold,
    codeTheme: h = e.codeTheme,
    previewComponent: y
  } = o, r = $(o), [t] = K(() => ({
    editorId: r,
    noKatex: C,
    noMermaid: x,
    noHighlight: P
  })), g = O(null), [f, v] = j(o);
  W(t, n), S(() => () => {
    w.clear(r);
  }, [r]);
  const F = k(() => ({
    editorId: t.editorId,
    tabWidth: 2,
    theme: s,
    language: c,
    highlight: f,
    showCodeRowNumber: m,
    usedLanguageText: v,
    previewTheme: u,
    customIcon: o.customIcon || {},
    rootRef: g,
    disabled: !1,
    showToolbarName: !1,
    setting: {
      preview: !0,
      htmlPreview: !1,
      previewOnly: !1,
      pageFullscreen: !1,
      fullscreen: !1
    },
    updateSetting: () => {
    },
    tableShape: [6, 4],
    catalogVisible: !1,
    noUploadImg: !0,
    noPrettier: !0,
    codeTheme: h,
    defToolbars: [],
    floatingToolbars: []
  }), [
    h,
    f,
    c,
    u,
    o.customIcon,
    m,
    t.editorId,
    s,
    v
  ]);
  return /* @__PURE__ */ i(Z.Provider, { value: F, children: /* @__PURE__ */ i(
    "div",
    {
      id: t.editorId,
      className: L([
        d,
        I,
        o.theme === "dark" && `${d}-dark`,
        `${d}-previewOnly`
      ]),
      style: o.style,
      ref: g,
      children: /* @__PURE__ */ i(
        D,
        {
          modelValue: a,
          onChange: l,
          mdHeadingId: E,
          onHtmlChanged: b,
          onGetCatalog: p,
          sanitize: T,
          noMermaid: t.noMermaid,
          noHighlight: t.noHighlight,
          noKatex: t.noKatex,
          formatCopiedText: o.formatCopiedText,
          noImgZoomIn: R,
          previewOnly: !0,
          sanitizeMermaid: H,
          codeFoldable: M,
          autoFoldThreshold: N,
          onRemount: o.onRemount,
          noEcharts: o.noEcharts,
          previewComponent: y
        },
        "preview-only"
      )
    }
  ) });
}), ee = G(q);
export {
  ee as default
};