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 F, forwardRef as V, useState as z, useRef as K, useEffect as O, useMemo as S } from "react";
import { d as e, p as d } from "./chunks/config.mjs";
import { E as k } from "./chunks/context.mjs";
import { u as G, i as Z, a as $ } from "./chunks/hooks.mjs";
import { c as j } from "./chunks/index2.mjs";
import { b as v, f as D } from "./chunks/event-bus.mjs";
const L = (o, r) => {
  const { editorId: a } = o;
  F(r, () => ({
    rerender() {
      v.emit(a, D);
    }
  }), [a]);
}, X = V((o, r) => {
  const {
    value: a = o.modelValue || e.modelValue,
    onChange: l = e.onChange,
    theme: s = e.theme,
    className: w = e.className,
    showCodeRowNumber: m = e.showCodeRowNumber,
    previewTheme: u = e.previewTheme,
    noMermaid: x = e.noMermaid,
    noKatex: b = e.noKatex,
    onHtmlChanged: C = e.onHtmlChanged,
    onGetCatalog: T = e.onGetCatalog,
    sanitize: p = e.sanitize,
    mdHeadingId: E = e.mdHeadingId,
    noHighlight: P = e.noHighlight,
    noImgZoomIn: R = e.noImgZoomIn,
    language: h = e.language,
    sanitizeMermaid: H = e.sanitizeMermaid,
    codeFoldable: M = e.codeFoldable,
    autoFoldThreshold: N = e.autoFoldThreshold,
    codeTheme: c = e.codeTheme
  } = o, n = G(o), [t] = z(() => ({
    editorId: n,
    noKatex: b,
    noMermaid: x,
    noHighlight: P
  })), g = K(null), [f, I] = Z(o);
  L(t, r), O(() => () => {
    v.clear(n);
  }, [n]);
  const y = S(() => ({
    editorId: t.editorId,
    tabWidth: 2,
    theme: s,
    language: h,
    highlight: f,
    showCodeRowNumber: m,
    usedLanguageText: I,
    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: c,
    defToolbars: [],
    floatingToolbars: []
  }), [
    c,
    f,
    h,
    u,
    o.customIcon,
    m,
    t.editorId,
    s,
    I
  ]);
  return /* @__PURE__ */ i(k.Provider, { value: y, children: /* @__PURE__ */ i(
    "div",
    {
      id: t.editorId,
      className: j([
        d,
        w,
        o.theme === "dark" && `${d}-dark`,
        `${d}-previewOnly`
      ]),
      style: o.style,
      ref: g,
      children: /* @__PURE__ */ i(
        $,
        {
          modelValue: a,
          onChange: l,
          mdHeadingId: E,
          onHtmlChanged: C,
          onGetCatalog: T,
          sanitize: p,
          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
        },
        "preview-only"
      )
    }
  ) });
});
export {
  X as default
};