@tohuhono/puck-rich-text/dist/rich-text-editor/lexical/rich-text-editor.js

A puck component for rich text editing made for OberonCMS

import { jsxs, jsx } from "react/jsx-runtime";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
import { AutoLinkNode, LinkNode } from "@lexical/link";
import { ListItemNode, ListNode } from "@lexical/list";
import { CodeHighlightNode, CodeNode } from "@lexical/code";
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
import { useState } from "react";
import { FocusPlugin } from "./plugins/focus-plugin.js";
import { ToolbarPlugin } from "./plugins/toolbar-plugin/index.js";
const InlineRichTextEditor = ({
  id,
  state,
  enabled,
  onChange = () => {
  }
}) => {
  const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
  return /* @__PURE__ */ jsxs(
    LexicalComposer,
    {
      initialConfig: {
        namespace: id,
        editable: false,
        editorState: JSON.stringify(state),
        nodes: [
          HeadingNode,
          QuoteNode,
          AutoLinkNode,
          LinkNode,
          ListItemNode,
          ListNode,
          CodeHighlightNode,
          CodeNode
        ],
        onError(error) {
          throw error;
        }
      },
      children: [
        /* @__PURE__ */ jsx(
          RichTextPlugin,
          {
            contentEditable: /* @__PURE__ */ jsx(
              ContentEditable,
              {
                style: {
                  cursor: enabled ? "auto" : "grab",
                  outline: "none",
                  pointerEvents: "auto"
                }
              }
            ),
            placeholder: null,
            ErrorBoundary: LexicalErrorBoundary
          }
        ),
        /* @__PURE__ */ jsx(
          OnChangePlugin,
          {
            ignoreSelectionChange: true,
            onChange: (state2) => onChange({ state: state2.toJSON() })
          }
        ),
        /* @__PURE__ */ jsx(FocusPlugin, { enabled }),
        /* @__PURE__ */ jsx(HistoryPlugin, {}),
        /* @__PURE__ */ jsx(
          ToolbarPlugin,
          {
            id,
            showToolbar: enabled,
            setIsLinkEditMode
          }
        )
      ]
    }
  );
};
export {
  InlineRichTextEditor
};