@haklex/rich-editor 0.0.80 → 0.0.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-editor",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "description": "Core rich text editor based on Lexical",
   "repository": {
     "type": "git",
@@ -49,9 +49,9 @@
     "@lexical/code": "npm:lexical-code-no-prism@0.41.0",
     "nanoid": "^5.1.6",
     "thumbhash": "^0.1.1",
-    "@haklex/rich-editor-ui": "0.0.80",
-    "@haklex/rich-headless": "0.0.80",
-    "@haklex/rich-style-token": "0.0.80"
+    "@haklex/rich-editor-ui": "0.0.82",
+    "@haklex/rich-style-token": "0.0.82",
+    "@haklex/rich-headless": "0.0.82"
   },
   "devDependencies": {
     "@lexical/extension": "^0.41.0",

package/dist/AlertQuoteEditNode-CHdvQnOr.js

@@ -1,293 +0,0 @@
-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);
-import { $getNodeByKey, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, COMMAND_PRIORITY_HIGH, $getRoot, $createParagraphNode, $isParagraphNode, $getSelection, $isRangeSelection, $insertNodes, createEditor } from "lexical";
-import { Info, Lightbulb, TriangleAlert } from "lucide-react";
-import { useCallback, useEffect, createElement } from "react";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { ListPlugin } from "@lexical/react/LexicalListPlugin";
-import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { q as $isAlertQuoteNode, r as AlertRenderer, S as SpoilerNode, M as MentionNode, F as FootnoteNode, k as KaTeXInlineNode, T as TagNode, s as AlertQuoteNode, n as editorTheme } from "./theme-CYsyGmCL.js";
-import { a as RendererWrapper } from "./KaTeXRenderer-C8jv_5xr.js";
-import { CodeNode } from "@lexical/code";
-import { HorizontalRuleNode } from "@lexical/extension";
-import { LinkNode, AutoLinkNode } from "@lexical/link";
-import { ListNode, ListItemNode } from "@lexical/list";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { TableNode, TableCellNode, TableRowNode } from "@lexical/table";
-function ExitBlockPlugin({
-  parentEditor,
-  nodeKey
-}) {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    const focusParent = () => {
-      parentEditor.focus(() => {
-        parentEditor.update(() => {
-          const alertNode = $getNodeByKey(nodeKey);
-          if (alertNode) {
-            const next = alertNode.getNextSibling();
-            if (next) {
-              next.selectStart();
-            }
-          }
-        });
-      });
-    };
-    const exitAlert = (removeEmpty) => {
-      const root = $getRoot();
-      const lastChild = root.getLastChild();
-      const shouldRemoveAlert = removeEmpty && root.getChildrenSize() <= 1;
-      if (removeEmpty && lastChild) {
-        lastChild.remove();
-      }
-      if (shouldRemoveAlert) {
-        parentEditor.update(
-          () => {
-            const alertNode = $getNodeByKey(nodeKey);
-            if (alertNode) {
-              const paragraph = $createParagraphNode();
-              alertNode.insertAfter(paragraph);
-              alertNode.remove();
-              paragraph.selectStart();
-            }
-          },
-          { onUpdate: focusParent }
-        );
-      } else {
-        parentEditor.update(
-          () => {
-            const alertNode = $getNodeByKey(nodeKey);
-            if (alertNode) {
-              let next = alertNode.getNextSibling();
-              if (!next || !$isParagraphNode(next)) {
-                next = $createParagraphNode();
-                alertNode.insertAfter(next);
-              }
-              next.selectStart();
-            }
-          },
-          { onUpdate: focusParent }
-        );
-      }
-    };
-    const isAtLastEmptyParagraph = () => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false;
-      const anchorNode = selection.anchor.getNode();
-      const topLevelElement = anchorNode.getTopLevelElement();
-      return topLevelElement && $isParagraphNode(topLevelElement) && topLevelElement.getTextContent() === "" && topLevelElement.getNextSibling() === null;
-    };
-    const unregisterEnter = editor.registerCommand(
-      KEY_ENTER_COMMAND,
-      (event) => {
-        if (event?.metaKey || event?.ctrlKey) {
-          event.preventDefault();
-          exitAlert(false);
-          return true;
-        }
-        if (!isAtLastEmptyParagraph()) return false;
-        event?.preventDefault();
-        exitAlert(true);
-        return true;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-    const unregisterArrowDown = editor.registerCommand(
-      KEY_ARROW_DOWN_COMMAND,
-      (event) => {
-        if (!isAtLastEmptyParagraph()) return false;
-        event?.preventDefault();
-        exitAlert(false);
-        return true;
-      },
-      COMMAND_PRIORITY_HIGH
-    );
-    return () => {
-      unregisterEnter();
-      unregisterArrowDown();
-    };
-  }, [editor, parentEditor, nodeKey]);
-  return null;
-}
-function AlertEditDecorator({ nodeKey, alertType, contentEditor }) {
-  const [editor] = useLexicalComposerContext();
-  const editable = editor.isEditable();
-  const handleTypeChange = useCallback(
-    (newType) => {
-      editor.update(() => {
-        const node = $getNodeByKey(nodeKey);
-        if ($isAlertQuoteNode(node)) {
-          node.setAlertType(newType);
-        }
-      });
-    },
-    [editor, nodeKey]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      RendererWrapper,
-      {
-        defaultRenderer: AlertRenderer,
-        rendererKey: "Alert",
-        props: {
-          type: alertType,
-          editable,
-          onTypeChange: editable ? handleTypeChange : void 0
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "rich-alert-content", children: /* @__PURE__ */ jsxs(LexicalNestedComposer, { initialEditor: contentEditor, children: [
-      /* @__PURE__ */ jsx(
-        RichTextPlugin,
-        {
-          ErrorBoundary: LexicalErrorBoundary,
-          contentEditable: /* @__PURE__ */ jsx(
-            ContentEditable,
-            {
-              "aria-placeholder": "",
-              className: "rich-alert-content-editable",
-              placeholder: /* @__PURE__ */ jsx("span", { style: { display: "none" } }),
-              style: { outline: "none" }
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(ListPlugin, {}),
-      /* @__PURE__ */ jsx(LinkPlugin, {}),
-      /* @__PURE__ */ jsx(ExitBlockPlugin, { nodeKey, parentEditor: editor })
-    ] }) })
-  ] });
-}
-const NESTED_EDITOR_NODES = [
-  HeadingNode,
-  QuoteNode,
-  ListNode,
-  ListItemNode,
-  LinkNode,
-  AutoLinkNode,
-  HorizontalRuleNode,
-  CodeNode,
-  TableNode,
-  TableCellNode,
-  TableRowNode,
-  SpoilerNode,
-  MentionNode,
-  FootnoteNode,
-  KaTeXInlineNode,
-  TagNode
-];
-function createContentEditor() {
-  return createEditor({
-    namespace: "AlertContent",
-    nodes: NESTED_EDITOR_NODES,
-    theme: editorTheme,
-    onError: (error) => {
-      console.error("[AlertContent]", error);
-    }
-  });
-}
-const _AlertQuoteEditNode = class _AlertQuoteEditNode extends AlertQuoteNode {
-  constructor(alertType, contentState, key) {
-    super(alertType, contentState, key);
-    __publicField(this, "__contentEditor");
-    this.__contentEditor = createContentEditor();
-    if (contentState) {
-      const editorState = this.__contentEditor.parseEditorState(contentState);
-      this.__contentEditor.setEditorState(editorState);
-    }
-  }
-  static clone(node) {
-    const cloned = new _AlertQuoteEditNode(
-      node.__alertType,
-      node.__contentState,
-      node.__key
-    );
-    cloned.__contentEditor = node.__contentEditor;
-    return cloned;
-  }
-  getContentEditor() {
-    return this.__contentEditor;
-  }
-  static importJSON(serializedNode) {
-    const node = new _AlertQuoteEditNode(
-      serializedNode.alertType,
-      serializedNode.content
-    );
-    return node;
-  }
-  exportJSON() {
-    return {
-      ...super.exportJSON(),
-      type: "alert-quote",
-      alertType: this.__alertType,
-      content: this.__contentEditor.getEditorState().toJSON(),
-      version: 1
-    };
-  }
-  decorate(_editor, _config) {
-    return createElement(AlertEditDecorator, {
-      nodeKey: this.__key,
-      alertType: this.__alertType,
-      contentEditor: this.__contentEditor
-    });
-  }
-};
-__publicField(_AlertQuoteEditNode, "commandItems", [
-  {
-    title: "Callout",
-    icon: createElement(Info, { size: 20 }),
-    description: "Info callout block",
-    keywords: ["alert", "note", "info", "callout"],
-    section: "ADVANCED",
-    placement: ["slash", "toolbar"],
-    group: "insert",
-    onSelect: (editor) => {
-      editor.update(() => {
-        $insertNodes([$createAlertQuoteEditNode("note")]);
-      });
-    }
-  },
-  {
-    title: "Tip",
-    icon: createElement(Lightbulb, { size: 20 }),
-    description: "Highlight a useful tip",
-    keywords: ["alert", "tip", "hint"],
-    section: "ADVANCED",
-    placement: ["slash", "toolbar"],
-    group: "insert",
-    onSelect: (editor) => {
-      editor.update(() => {
-        $insertNodes([$createAlertQuoteEditNode("tip")]);
-      });
-    }
-  },
-  {
-    title: "Warning",
-    icon: createElement(TriangleAlert, { size: 20 }),
-    description: "Warn about something",
-    keywords: ["alert", "warning", "caution"],
-    section: "ADVANCED",
-    placement: ["slash", "toolbar"],
-    group: "insert",
-    onSelect: (editor) => {
-      editor.update(() => {
-        $insertNodes([$createAlertQuoteEditNode("warning")]);
-      });
-    }
-  }
-]);
-let AlertQuoteEditNode = _AlertQuoteEditNode;
-function $createAlertQuoteEditNode(alertType, contentState) {
-  return new AlertQuoteEditNode(alertType, contentState);
-}
-export {
-  $createAlertQuoteEditNode as $,
-  AlertQuoteEditNode as A,
-  NESTED_EDITOR_NODES as N
-};

package/dist/KaTeXRenderer-C8jv_5xr.js

@@ -1,214 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext, use, useMemo, createElement, useCallback, useState, useEffect } from "react";
-import { thumbHashToDataURL, rgbaToThumbHash } from "thumbhash";
-const RendererConfigContext = createContext({
-  config: void 0,
-  mode: "renderer",
-  variant: "article"
-});
-function RendererConfigProvider({
-  config,
-  mode,
-  variant,
-  children
-}) {
-  const value = useMemo(() => ({ config, mode, variant }), [config, mode, variant]);
-  return /* @__PURE__ */ jsx(RendererConfigContext.Provider, { value, children });
-}
-function useRendererConfig() {
-  return use(RendererConfigContext).config;
-}
-function useRendererMode() {
-  return use(RendererConfigContext).mode;
-}
-function useVariant() {
-  return use(RendererConfigContext).variant;
-}
-function RendererWrapper({
-  rendererKey,
-  defaultRenderer: DefaultRenderer,
-  props
-}) {
-  const config = useRendererConfig();
-  const Renderer = config?.[rendererKey] ?? DefaultRenderer;
-  return /* @__PURE__ */ jsx(Renderer, { ...props });
-}
-function createRendererDecoration(rendererKey, defaultRenderer, props) {
-  return createElement(RendererWrapper, {
-    rendererKey,
-    defaultRenderer,
-    props
-  });
-}
-const FootnoteDefinitionsContext = createContext({
-  definitions: {},
-  displayNumberMap: {}
-});
-function FootnoteDefinitionsProvider({
-  definitions,
-  displayNumberMap,
-  children
-}) {
-  const value = useMemo(
-    () => ({ definitions, displayNumberMap }),
-    [definitions, displayNumberMap]
-  );
-  return /* @__PURE__ */ jsx(FootnoteDefinitionsContext, { value, children });
-}
-function useFootnoteDefinitions() {
-  return use(FootnoteDefinitionsContext);
-}
-function useFootnoteContent(identifier) {
-  const { definitions } = use(FootnoteDefinitionsContext);
-  return definitions[identifier];
-}
-function useFootnoteDisplayNumber(identifier) {
-  const { displayNumberMap } = use(FootnoteDefinitionsContext);
-  return displayNumberMap[identifier];
-}
-function FootnoteStaticRenderer({ identifier }) {
-  const content = useFootnoteContent(identifier);
-  const displayNumber = useFootnoteDisplayNumber(identifier);
-  const referenceId = `footnote-ref-${identifier}`;
-  const targetId = `footnote-${identifier}`;
-  const handleClick = useCallback(
-    (e) => {
-      const target = document.getElementById(targetId) || document.getElementById(`fn-${identifier}`);
-      if (!target) return;
-      e.preventDefault();
-      target.scrollIntoView({ behavior: "smooth", block: "center" });
-      target.classList.add("rich-footnote-highlight");
-      window.setTimeout(() => {
-        target.classList.remove("rich-footnote-highlight");
-      }, 1200);
-    },
-    [identifier, targetId]
-  );
-  const label = displayNumber ?? identifier;
-  return /* @__PURE__ */ jsx("span", { className: "rich-footnote-ref-wrapper", children: /* @__PURE__ */ jsx(
-    "a",
-    {
-      "aria-label": content ? `Footnote ${label}: ${content}` : `Footnote ${label}`,
-      className: "rich-footnote-ref",
-      "data-footnote-ref": identifier,
-      href: `#${targetId}`,
-      id: referenceId,
-      role: "doc-noteref",
-      onClick: handleClick,
-      children: label
-    }
-  ) });
-}
-const MAX_DIM = 100;
-async function computeImageMeta(file) {
-  const url = URL.createObjectURL(file);
-  try {
-    const img = await loadImage(url);
-    const { naturalWidth: w, naturalHeight: h } = img;
-    const scale = Math.min(MAX_DIM / w, MAX_DIM / h, 1);
-    const sw = Math.round(w * scale);
-    const sh = Math.round(h * scale);
-    const canvas = document.createElement("canvas");
-    canvas.width = sw;
-    canvas.height = sh;
-    const ctx = canvas.getContext("2d");
-    ctx.drawImage(img, 0, 0, sw, sh);
-    const { data } = ctx.getImageData(0, 0, sw, sh);
-    const hash = rgbaToThumbHash(sw, sh, data);
-    const thumbhash = uint8ToBase64(hash);
-    return { width: w, height: h, thumbhash };
-  } finally {
-    URL.revokeObjectURL(url);
-  }
-}
-function decodeThumbHash(hash) {
-  try {
-    const bytes = base64ToUint8(hash);
-    return thumbHashToDataURL(bytes);
-  } catch {
-    return void 0;
-  }
-}
-function loadImage(src) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => resolve(img);
-    img.onerror = reject;
-    img.src = src;
-  });
-}
-function uint8ToBase64(bytes) {
-  let bin = "";
-  for (const b of bytes) bin += String.fromCodePoint(b);
-  return btoa(bin);
-}
-function base64ToUint8(str) {
-  const bin = atob(str);
-  const bytes = new Uint8Array(bin.length);
-  for (let i = 0; i < bin.length; i++) bytes[i] = bin.codePointAt(i);
-  return bytes;
-}
-let katexModule = null;
-let katexLoadPromise = null;
-function loadKaTeX() {
-  if (katexModule) return Promise.resolve(katexModule);
-  if (!katexLoadPromise) {
-    katexLoadPromise = import("katex").then((mod) => {
-      katexModule = mod;
-      return katexModule;
-    });
-  }
-  return katexLoadPromise;
-}
-function KaTeXRenderer({ equation, displayMode }) {
-  const [html, setHtml] = useState(null);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    let cancelled = false;
-    loadKaTeX().then((katex) => {
-      if (cancelled) return;
-      const rendered = katex.default.renderToString(equation, {
-        displayMode,
-        throwOnError: false
-      });
-      setHtml(rendered);
-      setError(null);
-    }).catch(() => {
-      if (cancelled) return;
-      setHtml(null);
-      setError("KaTeX is not available");
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [equation, displayMode]);
-  if (error) {
-    return /* @__PURE__ */ jsx("code", { className: "rich-katex-fallback", children: equation });
-  }
-  if (html) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: displayMode ? "rich-katex-block" : "rich-katex-inline",
-        dangerouslySetInnerHTML: { __html: html }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("code", { className: "rich-katex-fallback", children: equation });
-}
-export {
-  FootnoteDefinitionsProvider as F,
-  KaTeXRenderer as K,
-  RendererConfigProvider as R,
-  RendererWrapper as a,
-  useFootnoteDefinitions as b,
-  createRendererDecoration as c,
-  useFootnoteDisplayNumber as d,
-  useRendererConfig as e,
-  useRendererMode as f,
-  useVariant as g,
-  FootnoteStaticRenderer as h,
-  computeImageMeta as i,
-  decodeThumbHash as j,
-  useFootnoteContent as u
-};

package/dist/LinkCardRenderer-QmkOlyXb.js

@@ -1,36 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-function LinkCardRenderer({
-  url,
-  title,
-  description,
-  favicon,
-  image
-}) {
-  const displayTitle = title || url;
-  return /* @__PURE__ */ jsxs("a", { className: "rich-link-card", href: url, rel: "noopener noreferrer", target: "_blank", children: [
-    image && /* @__PURE__ */ jsx("span", { className: "rich-link-card-image", children: /* @__PURE__ */ jsx("img", { alt: "", loading: "lazy", src: image }) }),
-    /* @__PURE__ */ jsxs("span", { className: "rich-link-card-content", children: [
-      /* @__PURE__ */ jsxs("span", { className: "rich-link-card-title", children: [
-        favicon && /* @__PURE__ */ jsx(
-          "img",
-          {
-            alt: "",
-            className: "rich-link-card-favicon",
-            height: 16,
-            src: favicon,
-            width: 16,
-            onError: (e) => {
-              e.target.style.display = "none";
-            }
-          }
-        ),
-        displayTitle
-      ] }),
-      description && /* @__PURE__ */ jsx("span", { className: "rich-link-card-description", children: description }),
-      /* @__PURE__ */ jsx("span", { className: "rich-link-card-url", children: url })
-    ] })
-  ] });
-}
-export {
-  LinkCardRenderer as L
-};

package/dist/MermaidPlugin-DjLUVZvB.js

@@ -1,97 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { createCommand, $insertNodes, COMMAND_PRIORITY_EDITOR } from "lexical";
-import { useEffect } from "react";
-import { $ as $createAlertQuoteEditNode } from "./AlertQuoteEditNode-CHdvQnOr.js";
-import { $ as $createImageNode, t as $createKaTeXInlineNode, v as $createKaTeXBlockNode, b as $createMermaidNode } from "./theme-CYsyGmCL.js";
-const INSERT_ALERT_COMMAND = createCommand("INSERT_ALERT");
-function AlertPlugin() {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    return editor.registerCommand(
-      INSERT_ALERT_COMMAND,
-      (alertType) => {
-        $insertNodes([$createAlertQuoteEditNode(alertType)]);
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR
-    );
-  }, [editor]);
-  return null;
-}
-const INSERT_IMAGE_COMMAND = createCommand(
-  "INSERT_IMAGE_COMMAND"
-);
-function ImagePlugin() {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    return editor.registerCommand(
-      INSERT_IMAGE_COMMAND,
-      (payload) => {
-        const imageNode = $createImageNode(payload);
-        $insertNodes([imageNode]);
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR
-    );
-  }, [editor]);
-  return null;
-}
-const INSERT_KATEX_INLINE_COMMAND = createCommand(
-  "INSERT_KATEX_INLINE"
-);
-const INSERT_KATEX_BLOCK_COMMAND = createCommand("INSERT_KATEX_BLOCK");
-function KaTeXPlugin() {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    const unregisterInline = editor.registerCommand(
-      INSERT_KATEX_INLINE_COMMAND,
-      (equation) => {
-        const node = $createKaTeXInlineNode(equation);
-        $insertNodes([node]);
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR
-    );
-    const unregisterBlock = editor.registerCommand(
-      INSERT_KATEX_BLOCK_COMMAND,
-      (equation) => {
-        const node = $createKaTeXBlockNode(equation);
-        $insertNodes([node]);
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR
-    );
-    return () => {
-      unregisterInline();
-      unregisterBlock();
-    };
-  }, [editor]);
-  return null;
-}
-const INSERT_MERMAID_COMMAND = createCommand("INSERT_MERMAID");
-function MermaidPlugin() {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    return editor.registerCommand(
-      INSERT_MERMAID_COMMAND,
-      (diagram) => {
-        const node = $createMermaidNode(diagram);
-        $insertNodes([node]);
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR
-    );
-  }, [editor]);
-  return null;
-}
-export {
-  AlertPlugin as A,
-  ImagePlugin as I,
-  KaTeXPlugin as K,
-  MermaidPlugin as M,
-  INSERT_ALERT_COMMAND as a,
-  INSERT_IMAGE_COMMAND as b,
-  INSERT_KATEX_BLOCK_COMMAND as c,
-  INSERT_KATEX_INLINE_COMMAND as d,
-  INSERT_MERMAID_COMMAND as e
-};