@etrepum/lexical-builder 0.0.4 → 0.0.5

package/dist/index.js

@@ -0,0 +1,696 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { registerDragonSupport } from "@lexical/dragon";
+import { createEmptyHistoryState, registerHistory } from "@lexical/history";
+import { $getRoot, $createParagraphNode, createEditor, createCommand, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_EDITOR } from "lexical";
+import { mergeRegister, CAN_USE_DOM } from "@lexical/utils";
+import { registerPlainText } from "@lexical/plain-text";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { LexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { useLayoutEffect, useEffect, useState, useMemo, Suspense, useCallback, useRef } from "react";
+import { $canShowPlaceholderCurry } from "@lexical/text";
+import { flushSync, createPortal } from "react-dom";
+import useLexicalSubscription from "@lexical/react/useLexicalSubscription";
+import { createRoot } from "react-dom/client";
+import { HeadingNode, QuoteNode, registerRichText } from "@lexical/rich-text";
+function definePlan(plan) {
+  return plan;
+}
+function defineRootPlan(plan) {
+  return { ...plan, name: "[root]", config: {} };
+}
+function configPlan(plan, config) {
+  return [plan, config];
+}
+function safeCast(value) {
+  return value;
+}
+const AutoFocusPlan = definePlan({
+  config: safeCast({}),
+  name: "@etrepum/lexical-builder/AutoFocusPlan",
+  register(editor, { defaultSelection }) {
+    return editor.registerRootListener((rootElement) => {
+      editor.focus(
+        () => {
+          const activeElement = document.activeElement;
+          if (rootElement !== null && (activeElement === null || !rootElement.contains(activeElement))) {
+            rootElement.focus({ preventScroll: true });
+          }
+        },
+        { defaultSelection }
+      );
+    });
+  }
+});
+const DragonPlan = definePlan({
+  config: {},
+  name: "@lexical/dragon",
+  register: registerDragonSupport
+});
+const HistoryPlan = definePlan({
+  config: safeCast({
+    createInitialHistoryState: createEmptyHistoryState,
+    delay: 300
+  }),
+  name: "@etrepum/lexical-builder/HistoryPlan",
+  register(editor, { delay, createInitialHistoryState }) {
+    return registerHistory(editor, createInitialHistoryState(), delay);
+  }
+});
+function invariant(cond, message, ...args) {
+  if (cond) {
+    return;
+  }
+  throw new Error(
+    args.reduce((msg, arg) => msg.replace("%s", String(arg)), message || "")
+  );
+}
+function deepThemeMergeInPlace(a, b) {
+  if (a && b && !Array.isArray(b) && typeof a === "object" && typeof b === "object") {
+    const aObj = a;
+    const bObj = b;
+    for (const k in bObj) {
+      aObj[k] = deepThemeMergeInPlace(aObj[k], bObj[k]);
+    }
+    return a;
+  }
+  return b;
+}
+const HISTORY_MERGE_OPTIONS = { tag: "history-merge" };
+function $defaultInitializer() {
+  const root = $getRoot();
+  if (root.isEmpty()) {
+    root.append($createParagraphNode());
+  }
+}
+function initializeEditor(editor, $initialEditorState = $defaultInitializer) {
+  switch (typeof $initialEditorState) {
+    case "function": {
+      editor.update(() => $initialEditorState(editor), HISTORY_MERGE_OPTIONS);
+      break;
+    }
+    case "string": {
+      const parsedEditorState = editor.parseEditorState($initialEditorState);
+      editor.setEditorState(parsedEditorState, HISTORY_MERGE_OPTIONS);
+      break;
+    }
+    case "object": {
+      if ($initialEditorState) {
+        editor.setEditorState($initialEditorState, HISTORY_MERGE_OPTIONS);
+      }
+      break;
+    }
+  }
+}
+function shallowMergeConfig(a, b) {
+  if (!b || a === b) {
+    return a;
+  }
+  for (const k in b) {
+    if (b[k] !== a[k]) {
+      return { ...a, ...b };
+    }
+  }
+  return a;
+}
+class PlanRep {
+  constructor(builder, plan) {
+    __publicField(this, "builder");
+    __publicField(this, "configs");
+    __publicField(this, "_config");
+    __publicField(this, "plan");
+    this.builder = builder;
+    this.plan = plan;
+    this.configs = /* @__PURE__ */ new Set();
+  }
+  getPeerConfig(name) {
+    const rep = this.builder.planNameMap.get(name);
+    return rep && rep.getConfig();
+  }
+  getDependencyConfig(dep) {
+    const pair = this.builder.planMap.get(dep);
+    invariant(
+      pair !== void 0,
+      "LexicalPlanBuilder: Plan %s missing dependency plan %s to be in registry",
+      this.plan.name,
+      dep.name
+    );
+    return pair[1].getConfig();
+  }
+  getConfig() {
+    if (this._config) {
+      return this._config;
+    }
+    let config = this.plan.config;
+    const mergeConfig = this.plan.mergeConfig ? this.plan.mergeConfig.bind(this.plan) : shallowMergeConfig;
+    for (const cfg of this.configs) {
+      config = mergeConfig(config, cfg);
+    }
+    this._config = config;
+    return config;
+  }
+}
+const buildersForEditors = /* @__PURE__ */ new WeakMap();
+function buildEditorFromPlans(plan, ...plans) {
+  const builder = new LexicalBuilder();
+  builder.addPlan(plan);
+  for (const otherPlan of plans) {
+    builder.addPlan(otherPlan);
+  }
+  return builder.buildEditor();
+}
+class LexicalBuilder {
+  constructor() {
+    __publicField(this, "phases");
+    __publicField(this, "planMap");
+    __publicField(this, "planNameMap");
+    __publicField(this, "conflicts");
+    this.phases = [/* @__PURE__ */ new Map()];
+    this.planMap = /* @__PURE__ */ new Map();
+    this.planNameMap = /* @__PURE__ */ new Map();
+    this.conflicts = /* @__PURE__ */ new Map();
+  }
+  static fromEditor(editor) {
+    const builder = buildersForEditors.get(editor);
+    invariant(
+      builder !== void 0,
+      "LexicalBuilder.fromEditor: editor was not created with this version of LexicalBuilder"
+    );
+    return builder;
+  }
+  buildEditor() {
+    const { $initialEditorState, onError, ...editorConfig } = this.buildCreateEditorArgs();
+    const editor = createEditor({
+      ...editorConfig,
+      ...onError ? { onError: (err) => onError(err, editor) } : {}
+    });
+    initializeEditor(editor, $initialEditorState);
+    buildersForEditors.set(editor, this);
+    const dispose = mergeRegister(
+      () => buildersForEditors.delete(editor),
+      this.registerEditor(editor)
+    );
+    return { dispose, editor };
+  }
+  addPlan(arg) {
+    let plan;
+    let configs;
+    if (Array.isArray(arg)) {
+      [plan, ...configs] = arg;
+    } else {
+      plan = arg;
+      configs = [];
+    }
+    let [phase, planRep] = this.planMap.get(plan) || [0, void 0];
+    if (!planRep) {
+      const hasConflict = this.conflicts.get(plan.name);
+      if (typeof hasConflict === "string") {
+        invariant(
+          false,
+          "LexicalBuilder: plan %s conflicts with %s",
+          plan.name,
+          hasConflict
+        );
+      }
+      for (const name of plan.conflictsWith || []) {
+        invariant(
+          !this.planNameMap.has(name),
+          "LexicalBuilder: plan %s conflicts with %s",
+          plan.name,
+          name
+        );
+        this.conflicts.set(name, plan.name);
+      }
+      for (const dep of plan.dependencies || []) {
+        phase = Math.max(phase, 1 + this.addPlan(dep));
+      }
+      for (const [depName, cfg] of Object.entries(
+        plan.peerDependencies || {}
+      )) {
+        const dep = this.planNameMap.get(depName);
+        if (dep) {
+          phase = Math.max(phase, 1 + this.addPlan([dep.plan, cfg]));
+        }
+      }
+      invariant(
+        this.phases.length >= phase,
+        "LexicalBuilder: Expected phase to be no greater than phases.length"
+      );
+      if (this.phases.length === phase) {
+        this.phases.push(/* @__PURE__ */ new Map());
+      }
+      planRep = new PlanRep(this, plan);
+      invariant(
+        !this.planNameMap.has(plan.name),
+        "LexicalBuilder: Multiple plans registered with name %s, names must be unique",
+        plan.name
+      );
+      this.planMap.set(plan, [phase, planRep]);
+      this.planNameMap.set(plan.name, planRep);
+      const currentPhaseMap = this.phases[phase];
+      invariant(
+        currentPhaseMap !== void 0,
+        "LexicalBuilder: Expecting phase map for phase %s",
+        String(phase)
+      );
+      currentPhaseMap.set(plan, planRep);
+    }
+    for (const config of configs) {
+      planRep.configs.add(config);
+    }
+    return phase;
+  }
+  *sortedPlanReps() {
+    for (const phase of this.phases) {
+      yield* phase.values();
+    }
+  }
+  registerEditor(editor) {
+    const cleanups = [];
+    const controller = new AbortController();
+    for (const planRep of this.sortedPlanReps()) {
+      if (planRep.plan.register) {
+        cleanups.push(
+          planRep.plan.register(editor, planRep.getConfig(), {
+            getDependencyConfig: planRep.getDependencyConfig.bind(planRep),
+            getPeerConfig: planRep.getPeerConfig.bind(planRep),
+            signal: controller.signal
+          })
+        );
+      }
+    }
+    return () => {
+      for (let i = cleanups.length - 1; i >= 0; i--) {
+        const cleanupFun = cleanups[i];
+        invariant(
+          cleanupFun !== void 0,
+          "LexicalBuilder: Expecting cleanups[%s] to be defined",
+          String(i)
+        );
+        cleanupFun();
+      }
+      cleanups.length = 0;
+      controller.abort();
+    };
+  }
+  buildCreateEditorArgs() {
+    const config = {};
+    const nodes = /* @__PURE__ */ new Set();
+    const replacedNodes = /* @__PURE__ */ new Map();
+    const htmlExport = /* @__PURE__ */ new Map();
+    const htmlImport = {};
+    const theme = {};
+    for (const planRep of this.sortedPlanReps()) {
+      const { plan } = planRep;
+      if (plan.onError !== void 0) {
+        config.onError = plan.onError;
+      }
+      if (plan.disableEvents !== void 0) {
+        config.disableEvents = plan.disableEvents;
+      }
+      if (plan.editable !== void 0) {
+        config.editable = plan.editable;
+      }
+      if (plan.namespace !== void 0) {
+        config.namespace = plan.namespace;
+      }
+      if (plan.$initialEditorState !== void 0) {
+        config.$initialEditorState = plan.$initialEditorState;
+      }
+      if (plan.nodes) {
+        for (const node of plan.nodes) {
+          if (typeof node !== "function") {
+            const conflictPlan = replacedNodes.get(node.replace);
+            if (conflictPlan) {
+              invariant(
+                false,
+                "LexicalBuilder: Plan %s can not register replacement for node %s because %s already did",
+                plan.name,
+                node.replace.name,
+                conflictPlan.plan.name
+              );
+            }
+            replacedNodes.set(node.replace, planRep);
+          }
+          nodes.add(node);
+        }
+      }
+      if (plan.html) {
+        if (plan.html.export) {
+          for (const [k, v] of plan.html.export.entries()) {
+            htmlExport.set(k, v);
+          }
+        }
+        if (plan.html.import) {
+          Object.assign(htmlImport, plan.html.import);
+        }
+      }
+      if (plan.theme) {
+        deepThemeMergeInPlace(theme, plan.theme);
+      }
+    }
+    if (Object.keys(theme).length > 0) {
+      config.theme = theme;
+    }
+    if (nodes.size) {
+      config.nodes = [...nodes];
+    }
+    const hasImport = Object.keys(htmlImport).length > 0;
+    const hasExport = htmlExport.size > 0;
+    if (hasImport || hasExport) {
+      config.html = {};
+      if (hasImport) {
+        config.html.import = htmlImport;
+      }
+      if (hasExport) {
+        config.html.export = htmlExport;
+      }
+    }
+    return config;
+  }
+}
+const PlainTextPlan = definePlan({
+  config: {},
+  conflictsWith: ["@lexical/rich-text"],
+  name: "@lexical/plain-text",
+  register: registerPlainText
+});
+function canShowPlaceholderFromCurrentEditorState(editor) {
+  const currentCanShowPlaceholder = editor.getEditorState().read($canShowPlaceholderCurry(editor.isComposing()));
+  return currentCanShowPlaceholder;
+}
+function subscribe(editor, onChange) {
+  const resetCanShowPlaceholder = () => onChange(canShowPlaceholderFromCurrentEditorState(editor));
+  return mergeRegister(
+    editor.registerUpdateListener(resetCanShowPlaceholder),
+    editor.registerEditableListener(resetCanShowPlaceholder)
+  );
+}
+const canShowPlaceholder = {
+  initialValueFn: canShowPlaceholderFromCurrentEditorState,
+  subscribe
+};
+const useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect : useEffect;
+function useReactDecorators(editor, ErrorBoundary) {
+  const [decorators, setDecorators] = useState(
+    () => editor.getDecorators()
+  );
+  useLayoutEffectImpl(() => {
+    return editor.registerDecoratorListener((nextDecorators) => {
+      flushSync(() => {
+        setDecorators(nextDecorators);
+      });
+    });
+  }, [editor]);
+  useEffect(() => {
+    setDecorators(editor.getDecorators());
+  }, [editor]);
+  return useMemo(() => {
+    const decoratedPortals = [];
+    const decoratorKeys = Object.keys(decorators);
+    for (let i = 0; i < decoratorKeys.length; i++) {
+      const nodeKey = decoratorKeys[i];
+      invariant(
+        nodeKey !== void 0,
+        "useReactDecorators: decoratorKeys[%s] must be defined",
+        String(i)
+      );
+      const element = editor.getElementByKey(nodeKey);
+      if (element !== null) {
+        const reactDecorator = /* @__PURE__ */ jsx(ErrorBoundary, { onError: (e) => editor._onError(e), children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: decorators[nodeKey] }) });
+        decoratedPortals.push(createPortal(reactDecorator, element, nodeKey));
+      }
+    }
+    return decoratedPortals;
+  }, [ErrorBoundary, decorators, editor]);
+}
+function useRegisterSubscription(subscription) {
+  const sub = useCallback(
+    (editor) => {
+      return {
+        initialValueFn: subscription.initialValueFn.bind(subscription, editor),
+        subscribe: subscription.subscribe.bind(subscription, editor)
+      };
+    },
+    [subscription]
+  );
+  return useLexicalSubscription(sub);
+}
+const scheduleMicrotask = "queueMicrotask" in globalThis ? queueMicrotask : (fn) => Promise.resolve().then(fn);
+function LexicalPlanComposer({
+  plan,
+  children
+}) {
+  const componentRef = useRef(void 0);
+  const handle = useMemo(() => {
+    return buildEditorFromPlans(
+      definePlan({
+        name: "@lexical/builder/LexicalPlanComposer",
+        config: {},
+        dependencies: [ReactPlan],
+        register(_editor, _config, state) {
+          componentRef.current = state.getDependencyConfig(ReactPlan).Component;
+          return () => {
+            componentRef.current = void 0;
+          };
+        }
+      }),
+      plan
+    );
+  }, [plan]);
+  useEffect(() => {
+    let didMount = false;
+    scheduleMicrotask(() => {
+      didMount = true;
+    });
+    return () => {
+      if (didMount) {
+        handle.dispose();
+      }
+    };
+  }, [handle]);
+  const EditorComponent = componentRef.current;
+  return EditorComponent ? /* @__PURE__ */ jsx(EditorComponent, { children }) : null;
+}
+function DefaultEditorChildrenComponent({
+  contentEditable,
+  placeholder,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    contentEditable,
+    placeholder && /* @__PURE__ */ jsx(Placeholder, { content: placeholder }),
+    children
+  ] });
+}
+function buildEditorComponent(config) {
+  const context = config.getContext();
+  const [editor] = context;
+  const rawConfigDecorators = config.decorators.map(
+    (El) => typeof El === "function" ? /* @__PURE__ */ jsx(El, { context }) : El
+  );
+  return function EditorComponent(props) {
+    const {
+      EditorChildrenComponent = config.EditorChildrenComponent,
+      ErrorBoundary = config.ErrorBoundary,
+      contentEditable = config.contentEditable,
+      placeholder = config.placeholder,
+      children
+    } = props;
+    const decorators = useReactDecorators(editor, ErrorBoundary);
+    const configDecorators = useMemo(
+      () => rawConfigDecorators.map((decorator, i) => /* @__PURE__ */ jsx(ErrorBoundary, { onError: (e) => editor._onError(e), children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: decorator }) }, i)),
+      [ErrorBoundary]
+    );
+    return /* @__PURE__ */ jsx(LexicalComposerContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+      EditorChildrenComponent,
+      {
+        context,
+        contentEditable,
+        placeholder: placeholder && /* @__PURE__ */ jsx(Placeholder, { content: placeholder }),
+        children: [
+          children,
+          configDecorators,
+          decorators
+        ]
+      }
+    ) });
+  };
+}
+function WithEditable({
+  content
+}) {
+  return content(useLexicalEditable());
+}
+function Placeholder({
+  content
+}) {
+  const showPlaceholder = useRegisterSubscription(canShowPlaceholder);
+  if (!showPlaceholder) {
+    return null;
+  } else if (typeof content === "function") {
+    return /* @__PURE__ */ jsx(WithEditable, { content });
+  } else {
+    return content;
+  }
+}
+const initialConfig = {
+  EditorChildrenComponent: DefaultEditorChildrenComponent,
+  ErrorBoundary: LexicalErrorBoundary,
+  contentEditable: /* @__PURE__ */ jsx(ContentEditable, {}),
+  decorators: [],
+  placeholder: null,
+  // Initialized on registration
+  Component() {
+    invariant(false, "ReactPlan used before register");
+  },
+  // Initialized on registration
+  getContext() {
+    invariant(false, "ReactPlan used before register");
+  }
+};
+const ReactPlan = definePlan({
+  config: initialConfig,
+  mergeConfig(a, b) {
+    const config = shallowMergeConfig(a, b);
+    if (b && b.decorators && b.decorators.length > 0) {
+      config.decorators = [...a.decorators, ...b.decorators];
+    }
+    return config;
+  },
+  name: "@etrepum/lexical-builder/ReactPlan",
+  register(editor, config) {
+    const context = [
+      editor,
+      { getTheme: () => editor._config.theme }
+    ];
+    config.getContext = () => context;
+    config.Component = buildEditorComponent(config);
+    return () => {
+      config.getContext = initialConfig.getContext;
+      config.Component = initialConfig.Component;
+    };
+  }
+});
+function mountReactPluginComponent(editor, opts) {
+  const { Component, props, ...rest } = opts;
+  return mountReactPluginElement(editor, {
+    ...rest,
+    element: Component && props ? /* @__PURE__ */ jsx(Component, { ...props }) : null
+  });
+}
+function mountReactPluginElement(editor, opts) {
+  editor.dispatchCommand(REACT_MOUNT_PLUGIN_COMMAND, opts);
+}
+function mountReactPluginHost(editor, container) {
+  editor.dispatchCommand(REACT_PLUGIN_HOST_MOUNT_COMMAND, {
+    root: createRoot(container)
+  });
+}
+const REACT_PLUGIN_HOST_MOUNT_COMMAND = createCommand("REACT_PLUGIN_HOST_MOUNT_COMMAND");
+const REACT_MOUNT_PLUGIN_COMMAND = createCommand(
+  "REACT_MOUNT_PLUGIN_COMMAND"
+);
+const ReactPluginHostPlan = definePlan({
+  config: {},
+  dependencies: [
+    configPlan(ReactPlan, {
+      contentEditable: null
+    })
+  ],
+  name: "@etrepum/lexical-builder/ReactPluginHostPlan",
+  register(editor, _config, state) {
+    let root;
+    const mountedPlugins = /* @__PURE__ */ new Map();
+    const { ErrorBoundary, Component } = state.getDependencyConfig(ReactPlan);
+    function renderMountedPlugins() {
+      const children = [];
+      for (const { key, element, domNode } of mountedPlugins.values()) {
+        if (!element) {
+          continue;
+        }
+        const wrapped = /* @__PURE__ */ jsx(ErrorBoundary, { onError: (e) => editor._onError(e), children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: element }) }, key);
+        children.push(domNode ? createPortal(wrapped, domNode, key) : wrapped);
+      }
+      return children.length > 0 ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+    }
+    function PluginHost() {
+      const [children, setChildren] = useState(renderMountedPlugins);
+      useEffect(() => {
+        return editor.registerCommand(
+          REACT_MOUNT_PLUGIN_COMMAND,
+          () => {
+            setChildren(renderMountedPlugins);
+            return true;
+          },
+          COMMAND_PRIORITY_EDITOR
+        );
+      }, []);
+      return children;
+    }
+    return mergeRegister(
+      () => {
+        if (root) {
+          root.unmount();
+        }
+      },
+      editor.registerCommand(
+        REACT_MOUNT_PLUGIN_COMMAND,
+        (arg) => {
+          mountedPlugins.set(arg.key, arg);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      ),
+      editor.registerCommand(
+        REACT_PLUGIN_HOST_MOUNT_COMMAND,
+        (arg) => {
+          root = arg.root;
+          root.render(
+            /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(PluginHost, {}) })
+          );
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      )
+    );
+  }
+});
+const RichTextPlan = definePlan({
+  config: {},
+  conflictsWith: ["@lexical/plain-text"],
+  name: "@lexical/rich-text",
+  nodes: [HeadingNode, QuoteNode],
+  register: registerRichText
+});
+const PACKAGE_VERSION = "0.0.5";
+export {
+  AutoFocusPlan,
+  DragonPlan,
+  HistoryPlan,
+  LexicalBuilder,
+  LexicalPlanComposer,
+  PACKAGE_VERSION,
+  PlainTextPlan,
+  REACT_MOUNT_PLUGIN_COMMAND,
+  REACT_PLUGIN_HOST_MOUNT_COMMAND,
+  ReactPlan,
+  ReactPluginHostPlan,
+  RichTextPlan,
+  buildEditorFromPlans,
+  configPlan,
+  definePlan,
+  defineRootPlan,
+  mountReactPluginComponent,
+  mountReactPluginElement,
+  mountReactPluginHost,
+  safeCast
+};
+//# sourceMappingURL=index.js.map