reactjs-tiptap-editor/lib/CodeView.js

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

import { E as l } from "./clsx-DaPvp9ji.js";
import { jsx as c, Fragment as g } from "react/jsx-runtime";
import { u, d as v, A as w } from "./index-RcSPeQHn.js";
import "react";
import "./theme.js";
function h() {
  const t = u(C.name), {
    icon: e = void 0,
    tooltip: o = void 0,
    shortcutKeys: i = void 0,
    tooltipOptions: a = {},
    action: n = void 0,
    isActive: r = void 0
  } = (t == null ? void 0 : t.componentProps) ?? {}, { dataState: d, disabled: s, update: p } = v(r), m = () => {
    s || n && (n(), p());
  };
  return t ? /* @__PURE__ */ c(
    w,
    {
      action: m,
      dataState: d,
      disabled: s,
      icon: e,
      shortcutKeys: i,
      tooltip: o,
      tooltipOptions: a
    }
  ) : /* @__PURE__ */ c(g, {});
}
const C = /* @__PURE__ */ l.create({
  name: "codeView",
  //@ts-expect-error
  addOptions() {
    var t;
    return {
      ...(t = this.parent) == null ? void 0 : t.call(this),
      button({ editor: e, t: o }) {
        return {
          componentProps: {
            action: () => {
              e.commands.toggleCodeView();
            },
            isActive: () => e.storage.codeView.isActive,
            disabled: !1,
            icon: "Html",
            tooltip: o("editor.codeView.tooltip") || "View HTML Code",
            customClass: "tiptap-code-view-button"
          }
        };
      }
    };
  },
  addStorage() {
    return {
      isActive: !1,
      originalContent: ""
    };
  },
  addCommands() {
    return {
      toggleCodeView: () => ({ editor: t }) => {
        const e = t.storage.codeView.isActive;
        if (e)
          t.commands.setContent(t.getText());
        else {
          const o = t.getHTML();
          t.storage.codeView.originalContent = o;
          const i = o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
          t.commands.setContent(
            `<div class="tiptap-code-view-wrapper">${i}</div>`
          );
        }
        return t.storage.codeView.isActive = !e, !0;
      }
    };
  }
});
export {
  C as CodeView,
  h as RichTextCodeView
};