@haklex/rich-editor 0.0.81 → 0.0.83

package/dist/theme-Cg8JUW_j.js

@@ -0,0 +1,1034 @@
+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 { DecoratorNode, createCommand, $insertNodes, $getSelection, $isRangeSelection, $getNodeByKey, ElementNode, TextNode } from "lexical";
+import { createContext, use, createElement, useState, useCallback, useEffect, useMemo } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { a as RendererWrapper, c as createRendererDecoration, h as FootnoteStaticRenderer, j as decodeThumbHash, K as KaTeXRenderer } from "./KaTeXRenderer-BFryJSIS.js";
+import { OctagonAlert, TriangleAlert, MessageSquareWarning, Lightbulb, Info, ImageIcon, Sigma, Workflow, Tag } from "lucide-react";
+import { s as semanticClassNames, b as sharedStyles } from "./utils-gy2c_HWc.js";
+const NestedContentRendererContext = createContext(null);
+const NestedContentRendererProvider = NestedContentRendererContext.Provider;
+function useOptionalNestedContentRenderer() {
+  return use(NestedContentRendererContext);
+}
+function useNestedContentRenderer() {
+  const fn = use(NestedContentRendererContext);
+  if (!fn) {
+    throw new Error("useNestedContentRenderer must be used within a NestedContentRendererProvider");
+  }
+  return fn;
+}
+const InfoIcon = () => /* @__PURE__ */ jsx(Info, { size: 16 });
+const LightbulbIcon = () => /* @__PURE__ */ jsx(Lightbulb, { size: 16 });
+const MessageWarningIcon = () => /* @__PURE__ */ jsx(MessageSquareWarning, { size: 16 });
+const TriangleAlertIcon = () => /* @__PURE__ */ jsx(TriangleAlert, { size: 16 });
+const OctagonAlertIcon = () => /* @__PURE__ */ jsx(OctagonAlert, { size: 16 });
+const ALERT_ICONS = {
+  note: InfoIcon,
+  tip: LightbulbIcon,
+  important: MessageWarningIcon,
+  warning: TriangleAlertIcon,
+  caution: OctagonAlertIcon
+};
+const AlertRenderer = ({ type }) => {
+  const Icon = ALERT_ICONS[type];
+  return /* @__PURE__ */ jsxs("div", { className: `rich-alert-header rich-alert-header-${type}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "rich-alert-icon", children: /* @__PURE__ */ jsx(Icon, {}) }),
+    /* @__PURE__ */ jsx("span", { className: "rich-alert-label", children: ALERT_LABELS[type] })
+  ] });
+};
+function AlertStaticDecorator({ alertType, contentState }) {
+  const renderContent = useNestedContentRenderer();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RendererWrapper,
+      {
+        defaultRenderer: AlertRenderer,
+        props: { type: alertType },
+        rendererKey: "Alert"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "rich-alert-content", children: renderContent(contentState) })
+  ] });
+}
+function extractTextContent(state) {
+  function walk(node) {
+    if (node.text) return node.text;
+    if (node.children) return node.children.map(walk).join("");
+    if (node.root) return walk(node.root);
+    return "";
+  }
+  return walk(state);
+}
+const ALERT_TYPES = ["note", "tip", "important", "warning", "caution"];
+const ALERT_LABELS = {
+  note: "Note",
+  tip: "Tip",
+  important: "Important",
+  warning: "Warning",
+  caution: "Caution"
+};
+class AlertQuoteNode extends DecoratorNode {
+  constructor(alertType, contentState, key) {
+    super(key);
+    __publicField(this, "__alertType");
+    __publicField(this, "__contentState");
+    this.__alertType = alertType;
+    this.__contentState = contentState || {
+      root: {
+        children: [
+          {
+            type: "paragraph",
+            children: [],
+            direction: null,
+            format: "",
+            indent: 0,
+            textFormat: 0,
+            textStyle: "",
+            version: 1
+          }
+        ],
+        direction: null,
+        format: "",
+        indent: 0,
+        type: "root",
+        version: 1
+      }
+    };
+  }
+  static getType() {
+    return "alert-quote";
+  }
+  static clone(node) {
+    return new AlertQuoteNode(node.__alertType, node.__contentState, node.__key);
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = `${semanticClassNames.alert} ${sharedStyles.alert} rich-alert-${this.__alertType}`;
+    return div;
+  }
+  updateDOM(prevNode, dom) {
+    if (prevNode.__alertType !== this.__alertType) {
+      dom.className = `${semanticClassNames.alert} ${sharedStyles.alert} rich-alert-${this.__alertType}`;
+    }
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  getAlertType() {
+    return this.__alertType;
+  }
+  setAlertType(alertType) {
+    const writable = this.getWritable();
+    writable.__alertType = alertType;
+  }
+  getContentState() {
+    return this.getLatest().__contentState;
+  }
+  setContentState(state) {
+    const writable = this.getWritable();
+    writable.__contentState = state;
+  }
+  getTextContent() {
+    return extractTextContent(this.__contentState);
+  }
+  static importJSON(serializedNode) {
+    return new AlertQuoteNode(serializedNode.alertType, serializedNode.content);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "alert-quote",
+      alertType: this.__alertType,
+      content: this.__contentState,
+      version: 1
+    };
+  }
+  decorate(_editor, _config) {
+    return createElement(AlertStaticDecorator, {
+      alertType: this.__alertType,
+      contentState: this.__contentState
+    });
+  }
+}
+function $isAlertQuoteNode(node) {
+  return node instanceof AlertQuoteNode;
+}
+class FootnoteNode extends DecoratorNode {
+  constructor(identifier, key) {
+    super(key);
+    __publicField(this, "__identifier");
+    this.__identifier = identifier;
+  }
+  static getType() {
+    return "footnote";
+  }
+  static clone(node) {
+    return new FootnoteNode(node.__identifier, node.__key);
+  }
+  createDOM(_config) {
+    const sup = document.createElement("sup");
+    sup.className = `${semanticClassNames.footnote} ${sharedStyles.footnote}`;
+    return sup;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return true;
+  }
+  static importJSON(serializedNode) {
+    return $createFootnoteNode(serializedNode.identifier);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "footnote",
+      identifier: this.__identifier,
+      version: 1
+    };
+  }
+  getIdentifier() {
+    return this.getLatest().__identifier;
+  }
+  setIdentifier(identifier) {
+    const writable = this.getWritable();
+    writable.__identifier = identifier;
+  }
+  decorate(_editor, _config) {
+    return createRendererDecoration("Footnote", FootnoteStaticRenderer, {
+      identifier: this.__identifier
+    });
+  }
+}
+function $createFootnoteNode(identifier) {
+  return new FootnoteNode(identifier);
+}
+function ImageRenderer({
+  src,
+  altText,
+  width,
+  height,
+  caption,
+  thumbhash,
+  accent
+}) {
+  const [loaded, setLoaded] = useState(false);
+  const [zoomed, setZoomed] = useState(false);
+  const handleLoad = useCallback(() => setLoaded(true), []);
+  const handleZoomOpen = useCallback(() => {
+    if (!loaded) return;
+    setZoomed(true);
+  }, [loaded]);
+  const handleZoomClose = useCallback(() => setZoomed(false), []);
+  useEffect(() => {
+    if (!zoomed) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") setZoomed(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [zoomed]);
+  useEffect(() => {
+    if (!zoomed) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [zoomed]);
+  const handleContainerKeyDown = useCallback(
+    (e) => {
+      if ((e.key === "Enter" || e.key === " ") && loaded) {
+        e.preventDefault();
+        setZoomed(true);
+      }
+    },
+    [loaded]
+  );
+  const placeholderUrl = useMemo(
+    () => thumbhash ? decodeThumbHash(thumbhash) : void 0,
+    [thumbhash]
+  );
+  const aspectStyle = width && height ? { aspectRatio: `${width} / ${height}`, maxWidth: "100%", width } : { maxWidth: "100%" };
+  return /* @__PURE__ */ jsxs("figure", { className: "rich-image", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": loaded ? `Zoom image: ${altText}` : void 0,
+        className: `rich-image-container${loaded ? " rich-image-loaded" : ""}`,
+        role: "button",
+        tabIndex: loaded ? 0 : -1,
+        style: {
+          ...aspectStyle,
+          backgroundColor: !loaded && !placeholderUrl ? accent : void 0,
+          backgroundImage: !loaded && placeholderUrl ? `url(${placeholderUrl})` : void 0,
+          backgroundSize: "cover",
+          cursor: loaded ? "zoom-in" : void 0
+        },
+        onClick: handleZoomOpen,
+        onKeyDown: handleContainerKeyDown,
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: altText,
+            className: loaded ? "rich-image-visible" : "rich-image-hidden",
+            height,
+            loading: "lazy",
+            src,
+            style: { maxWidth: "100%", height: "auto" },
+            width,
+            onLoad: handleLoad
+          }
+        )
+      }
+    ),
+    caption && /* @__PURE__ */ jsx("figcaption", { children: caption }),
+    zoomed && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": `Zoomed image: ${altText}`,
+        "aria-modal": "true",
+        className: "rich-image-zoom-overlay",
+        role: "dialog",
+        tabIndex: 0,
+        onClick: handleZoomClose,
+        children: /* @__PURE__ */ jsx("img", { alt: altText, className: "rich-image-zoom-img", src })
+      }
+    )
+  ] });
+}
+const OPEN_IMAGE_UPLOAD_DIALOG_COMMAND = createCommand(
+  "OPEN_IMAGE_UPLOAD_DIALOG_COMMAND"
+);
+function sanitizeImageSrc(src) {
+  const trimmed = src.trim();
+  if (/^(?:javascript\s*:|vbscript\s*:|data\s*:(?!image\/))/i.test(trimmed)) {
+    return "";
+  }
+  return trimmed;
+}
+function sanitizeColor(value) {
+  if (!value) return void 0;
+  const trimmed = value.trim();
+  if (/^#[\da-f]{3,8}$/i.test(trimmed)) return trimmed;
+  if (/^(?:rgb|hsl)a?\([^)]+\)$/i.test(trimmed)) return trimmed;
+  if (/^[a-z]{3,20}$/i.test(trimmed)) return trimmed;
+  return void 0;
+}
+const _ImageNode = class _ImageNode extends DecoratorNode {
+  constructor(payload, key) {
+    super(key);
+    __publicField(this, "__src");
+    __publicField(this, "__altText");
+    __publicField(this, "__width");
+    __publicField(this, "__height");
+    __publicField(this, "__caption");
+    __publicField(this, "__thumbhash");
+    __publicField(this, "__accent");
+    this.__src = sanitizeImageSrc(payload.src);
+    this.__altText = payload.altText;
+    this.__width = payload.width;
+    this.__height = payload.height;
+    this.__caption = payload.caption;
+    this.__thumbhash = payload.thumbhash;
+    this.__accent = sanitizeColor(payload.accent);
+  }
+  static getType() {
+    return "image";
+  }
+  static clone(node) {
+    return new _ImageNode(
+      {
+        src: node.__src,
+        altText: node.__altText,
+        width: node.__width,
+        height: node.__height,
+        caption: node.__caption,
+        thumbhash: node.__thumbhash,
+        accent: node.__accent
+      },
+      node.__key
+    );
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = "rich-image-wrapper";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  static importJSON(serializedNode) {
+    return $createImageNode({
+      src: serializedNode.src,
+      altText: serializedNode.altText,
+      width: serializedNode.width,
+      height: serializedNode.height,
+      caption: serializedNode.caption,
+      thumbhash: serializedNode.thumbhash,
+      accent: serializedNode.accent
+    });
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "image",
+      src: this.__src,
+      altText: this.__altText,
+      width: this.__width,
+      height: this.__height,
+      caption: this.__caption,
+      thumbhash: this.__thumbhash,
+      accent: this.__accent,
+      version: 1
+    };
+  }
+  setSrc(src) {
+    const writable = this.getWritable();
+    writable.__src = sanitizeImageSrc(src);
+  }
+  setAltText(altText) {
+    const writable = this.getWritable();
+    writable.__altText = altText;
+  }
+  setCaption(caption) {
+    const writable = this.getWritable();
+    writable.__caption = caption;
+  }
+  setDimensions(width, height) {
+    const writable = this.getWritable();
+    writable.__width = width;
+    writable.__height = height;
+  }
+  setThumbhash(thumbhash) {
+    const writable = this.getWritable();
+    writable.__thumbhash = thumbhash;
+  }
+  setAccent(accent) {
+    const writable = this.getWritable();
+    writable.__accent = sanitizeColor(accent);
+  }
+  getSrc() {
+    return this.__src;
+  }
+  getAltText() {
+    return this.__altText;
+  }
+  getCaption() {
+    return this.__caption;
+  }
+  getWidth() {
+    return this.__width;
+  }
+  getHeight() {
+    return this.__height;
+  }
+  getThumbhash() {
+    return this.__thumbhash;
+  }
+  getAccent() {
+    return this.__accent;
+  }
+  decorate(_editor, _config) {
+    return createRendererDecoration("Image", ImageRenderer, {
+      src: this.__src,
+      altText: this.__altText,
+      width: this.__width,
+      height: this.__height,
+      caption: this.__caption,
+      thumbhash: this.__thumbhash,
+      accent: this.__accent
+    });
+  }
+};
+__publicField(_ImageNode, "commandItems", [
+  {
+    title: "Image",
+    icon: createElement(ImageIcon, { size: 20 }),
+    description: "Upload or embed an image",
+    keywords: ["image", "picture", "photo"],
+    section: "MEDIA",
+    placement: ["slash", "toolbar"],
+    group: "insert",
+    onSelect: (editor) => {
+      const opened = editor.dispatchCommand(OPEN_IMAGE_UPLOAD_DIALOG_COMMAND, void 0);
+      if (opened) return;
+      editor.update(() => {
+        $insertNodes([$createImageNode({ src: "", altText: "" })]);
+      });
+    }
+  }
+]);
+let ImageNode = _ImageNode;
+function $createImageNode(payload) {
+  return new ImageNode(payload);
+}
+function $isImageNode(node) {
+  return node instanceof ImageNode;
+}
+const _KaTeXBlockNode = class _KaTeXBlockNode extends DecoratorNode {
+  constructor(equation, key) {
+    super(key);
+    __publicField(this, "__equation");
+    this.__equation = equation;
+  }
+  static getType() {
+    return "katex-block";
+  }
+  static clone(node) {
+    return new _KaTeXBlockNode(node.__equation, node.__key);
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = "rich-katex-block-wrapper";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  static importJSON(serializedNode) {
+    return $createKaTeXBlockNode(serializedNode.equation);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "katex-block",
+      equation: this.__equation,
+      version: 1
+    };
+  }
+  getEquation() {
+    return this.__equation;
+  }
+  setEquation(equation) {
+    const writable = this.getWritable();
+    writable.__equation = equation;
+  }
+  decorate(_editor, _config) {
+    return createRendererDecoration("KaTeX", KaTeXRenderer, {
+      equation: this.__equation,
+      displayMode: true
+    });
+  }
+};
+__publicField(_KaTeXBlockNode, "slashMenuItems", [
+  {
+    title: "Math Equation",
+    icon: createElement(Sigma, { size: 20 }),
+    description: "KaTeX block formula",
+    keywords: ["math", "equation", "latex", "katex"],
+    section: "ADVANCED",
+    onSelect: (editor) => {
+      editor.update(() => {
+        $insertNodes([$createKaTeXBlockNode("")]);
+      });
+    }
+  }
+]);
+let KaTeXBlockNode = _KaTeXBlockNode;
+function $createKaTeXBlockNode(equation) {
+  return new KaTeXBlockNode(equation);
+}
+function $isKaTeXBlockNode(node) {
+  return node instanceof KaTeXBlockNode;
+}
+class KaTeXInlineNode extends DecoratorNode {
+  constructor(equation, key) {
+    super(key);
+    __publicField(this, "__equation");
+    this.__equation = equation;
+  }
+  static getType() {
+    return "katex-inline";
+  }
+  static clone(node) {
+    return new KaTeXInlineNode(node.__equation, node.__key);
+  }
+  createDOM(_config) {
+    return document.createElement("span");
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return true;
+  }
+  static importJSON(serializedNode) {
+    return $createKaTeXInlineNode(serializedNode.equation);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "katex-inline",
+      equation: this.__equation,
+      version: 1
+    };
+  }
+  getEquation() {
+    return this.__equation;
+  }
+  setEquation(equation) {
+    const writable = this.getWritable();
+    writable.__equation = equation;
+  }
+  decorate(_editor, _config) {
+    return createRendererDecoration("KaTeX", KaTeXRenderer, {
+      equation: this.__equation,
+      displayMode: false
+    });
+  }
+}
+function $createKaTeXInlineNode(equation) {
+  return new KaTeXInlineNode(equation);
+}
+function $isKaTeXInlineNode(node) {
+  return node instanceof KaTeXInlineNode;
+}
+function MentionRenderer({ handle, displayName }) {
+  const normalizedHandle = handle.replace(/^@+/, "");
+  const label = displayName || normalizedHandle;
+  return /* @__PURE__ */ jsx("span", { className: "rich-mention rich-mention-plain", children: /* @__PURE__ */ jsxs("span", { className: "rich-mention-handle", children: [
+    "@",
+    label
+  ] }) });
+}
+const _MentionNode = class _MentionNode extends DecoratorNode {
+  constructor(platform, handle, displayName, key) {
+    super(key);
+    __publicField(this, "__platform");
+    __publicField(this, "__handle");
+    __publicField(this, "__displayName");
+    this.__platform = platform;
+    this.__handle = handle;
+    this.__displayName = displayName;
+  }
+  static getType() {
+    return "mention";
+  }
+  static clone(node) {
+    return new _MentionNode(
+      node.__platform,
+      node.__handle,
+      node.__displayName,
+      node.__key
+    );
+  }
+  createDOM(_config) {
+    const el = document.createElement("span");
+    el.style.display = "inline-flex";
+    el.style.alignItems = "center";
+    el.style.height = "1lh";
+    return el;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return true;
+  }
+  getPlatform() {
+    return this.getLatest().__platform;
+  }
+  getHandle() {
+    return this.getLatest().__handle;
+  }
+  getDisplayName() {
+    return this.getLatest().__displayName;
+  }
+  static importJSON(serializedNode) {
+    return $createMentionNode(
+      serializedNode.platform,
+      serializedNode.handle,
+      serializedNode.displayName
+    );
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "mention",
+      platform: this.__platform,
+      handle: this.__handle,
+      ...this.__displayName ? { displayName: this.__displayName } : {},
+      version: 1
+    };
+  }
+  decorate(_editor, _config) {
+    return createRendererDecoration("Mention", MentionRenderer, {
+      platform: this.__platform,
+      handle: this.__handle,
+      displayName: this.__displayName
+    });
+  }
+};
+__publicField(_MentionNode, "slashMenuItems", [
+  {
+    title: "Mention",
+    icon: createElement(
+      "span",
+      { style: { fontSize: 16, fontWeight: 700 } },
+      "@"
+    ),
+    description: "Mention a social account",
+    keywords: ["mention", "at", "@", "github", "twitter"],
+    section: "INLINE",
+    onSelect: (editor) => {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          selection.insertText("@");
+        }
+      });
+    }
+  }
+]);
+let MentionNode = _MentionNode;
+function $createMentionNode(platform, handle, displayName) {
+  return new MentionNode(platform, handle, displayName);
+}
+function $isMentionNode(node) {
+  return node instanceof MentionNode;
+}
+function MermaidRenderer({ content }) {
+  return /* @__PURE__ */ jsx("div", { className: "rich-mermaid-block", children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: content }) }) });
+}
+const _MermaidNode = class _MermaidNode extends DecoratorNode {
+  constructor(diagram, key) {
+    super(key);
+    __publicField(this, "__diagram");
+    this.__diagram = diagram;
+  }
+  static getType() {
+    return "mermaid";
+  }
+  static clone(node) {
+    return new _MermaidNode(node.__diagram, node.__key);
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = "rich-mermaid-wrapper";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  static importJSON(serializedNode) {
+    return $createMermaidNode(serializedNode.diagram);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "mermaid",
+      diagram: this.__diagram,
+      version: 1
+    };
+  }
+  getDiagram() {
+    return this.__diagram;
+  }
+  setDiagram(diagram) {
+    const writable = this.getWritable();
+    writable.__diagram = diagram;
+  }
+  decorate(editor, _config) {
+    const nodeKey = this.__key;
+    return createRendererDecoration("Mermaid", MermaidRenderer, {
+      content: this.__diagram,
+      onContentChange: (newDiagram) => {
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if (node) {
+            node.setDiagram(newDiagram);
+          }
+        });
+      }
+    });
+  }
+};
+__publicField(_MermaidNode, "commandItems", [
+  {
+    title: "Mermaid Diagram",
+    icon: createElement(Workflow, { size: 20 }),
+    description: "Flowchart, sequence diagram",
+    keywords: ["mermaid", "diagram", "chart", "flowchart"],
+    section: "MEDIA",
+    placement: ["slash", "toolbar"],
+    group: "insert",
+    onSelect: (editor) => {
+      editor.update(() => {
+        $insertNodes([
+          $createMermaidNode("graph TD\n    A[Start] --> B[End]")
+        ]);
+      });
+    }
+  }
+]);
+let MermaidNode = _MermaidNode;
+function $createMermaidNode(diagram) {
+  return new MermaidNode(diagram);
+}
+function $isMermaidNode(node) {
+  return node instanceof MermaidNode;
+}
+class SpoilerNode extends ElementNode {
+  static getType() {
+    return "spoiler";
+  }
+  static clone(node) {
+    return new SpoilerNode(node.__key);
+  }
+  constructor(key) {
+    super(key);
+  }
+  createDOM(_config) {
+    const span = document.createElement("span");
+    span.className = `${semanticClassNames.spoiler} ${sharedStyles.spoiler}`;
+    span.setAttribute("role", "button");
+    span.setAttribute("tabindex", "0");
+    span.setAttribute("aria-label", "Spoiler (click to reveal)");
+    const toggle = () => {
+      if (span.isContentEditable) return;
+      span.classList.toggle(semanticClassNames.spoilerRevealed);
+      const revealed = span.classList.toggle(sharedStyles.spoilerRevealed);
+      span.setAttribute(
+        "aria-label",
+        revealed ? "Spoiler (revealed)" : "Spoiler (click to reveal)"
+      );
+    };
+    span.addEventListener("click", toggle);
+    span.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    });
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  static importJSON(_serializedNode) {
+    return $createSpoilerNode();
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "spoiler",
+      version: 1
+    };
+  }
+  canInsertTextBefore() {
+    return true;
+  }
+  canInsertTextAfter() {
+    return true;
+  }
+  isInline() {
+    return true;
+  }
+}
+function $createSpoilerNode() {
+  return new SpoilerNode();
+}
+function stringToHue(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const hue = hash % 360;
+  return hue < 0 ? hue + 360 : hue;
+}
+function getTagBgColor(text) {
+  const hue = stringToHue(text);
+  const sat = 70 + hue % 21;
+  const light = 40 + hue % 31;
+  const bgSat = sat > 30 ? sat - 30 : 0;
+  const bgLight = light < 80 ? light + 20 : 100;
+  return `hsla(${hue}, ${bgSat}%, ${bgLight}%, 0.7)`;
+}
+const tagClassName = `${semanticClassNames.tag} ${sharedStyles.tag}`;
+const _TagNode = class _TagNode extends TextNode {
+  static getType() {
+    return "tag";
+  }
+  static clone(node) {
+    return new _TagNode(node.__text, node.__key);
+  }
+  static importDOM() {
+    return {
+      span: () => ({
+        conversion: (domNode) => {
+          if (!(domNode instanceof HTMLElement)) return null;
+          if (!domNode.classList.contains(semanticClassNames.tag)) return null;
+          return {
+            node: $createTagNode(domNode.textContent ?? "")
+          };
+        },
+        priority: 2
+      })
+    };
+  }
+  constructor(text, key) {
+    super(text, key);
+  }
+  createDOM(config) {
+    const element = super.createDOM(config);
+    element.classList.add(semanticClassNames.tag, sharedStyles.tag);
+    element.style.backgroundColor = getTagBgColor(this.getTextContent());
+    return element;
+  }
+  updateDOM(prevNode, dom, config) {
+    const updated = super.updateDOM(prevNode, dom, config);
+    dom.classList.add(semanticClassNames.tag, sharedStyles.tag);
+    if (prevNode.__text !== this.__text) {
+      dom.style.backgroundColor = getTagBgColor(this.__text);
+    }
+    return updated;
+  }
+  exportDOM(_editor) {
+    const element = document.createElement("span");
+    element.className = tagClassName;
+    element.style.backgroundColor = getTagBgColor(this.getTextContent());
+    element.textContent = this.getTextContent();
+    return { element };
+  }
+  getText() {
+    return this.getTextContent();
+  }
+  canInsertTextBefore() {
+    return false;
+  }
+  canInsertTextAfter() {
+    return false;
+  }
+  isTextEntity() {
+    return true;
+  }
+  static importJSON(serializedNode) {
+    const node = $createTagNode(serializedNode.text ?? "");
+    node.setFormat(serializedNode.format ?? 0);
+    node.setDetail(serializedNode.detail ?? 0);
+    node.setMode(serializedNode.mode ?? "normal");
+    node.setStyle(serializedNode.style ?? "");
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "tag",
+      version: 1
+    };
+  }
+};
+__publicField(_TagNode, "commandItems", [
+  {
+    title: "Tag",
+    icon: createElement(Tag, { size: 20 }),
+    description: "Insert a tag",
+    keywords: ["tag", "label", "badge"],
+    section: "INLINE",
+    placement: ["slash", "toolbar"],
+    group: "insert",
+    onSelect: (editor, queryString) => {
+      editor.update(() => {
+        $insertNodes([$createTagNode(queryString || "tag")]);
+      });
+    }
+  }
+]);
+let TagNode = _TagNode;
+function $createTagNode(text) {
+  return new TagNode(text);
+}
+function $isTagNode(node) {
+  return node instanceof TagNode;
+}
+const shared = (key) => `${semanticClassNames[key]} ${sharedStyles[key]}`;
+const editorTheme = {
+  text: {
+    bold: shared("textBold"),
+    italic: shared("textItalic"),
+    underline: shared("textUnderline"),
+    strikethrough: shared("textStrikethrough"),
+    superscript: shared("textSuperscript"),
+    subscript: shared("textSubscript"),
+    code: shared("textCode"),
+    highlight: shared("textHighlight")
+  },
+  heading: {
+    h1: shared("headingH1"),
+    h2: shared("headingH2"),
+    h3: shared("headingH3"),
+    h4: shared("headingH4"),
+    h5: shared("headingH5"),
+    h6: shared("headingH6")
+  },
+  list: {
+    ol: shared("listOl"),
+    ul: shared("listUl"),
+    listitem: shared("listItem"),
+    listitemChecked: shared("listItemChecked"),
+    listitemUnchecked: shared("listItemUnchecked"),
+    checklist: shared("checklist"),
+    nested: {
+      listitem: shared("listNestedItem")
+    }
+  },
+  quote: shared("quote"),
+  link: shared("link"),
+  paragraph: shared("paragraph"),
+  code: "rich-code-block",
+  table: shared("table"),
+  tableCell: shared("tableCell"),
+  tableCellHeader: shared("tableCellHeader"),
+  tableScrollableWrapper: shared("tableScrollableWrapper"),
+  /** Used by @lexical/extension HorizontalRuleNode */
+  hr: shared("hr")
+};
+export {
+  $createImageNode as $,
+  ALERT_LABELS as A,
+  FootnoteNode as F,
+  ImageNode as I,
+  KaTeXBlockNode as K,
+  MentionNode as M,
+  NestedContentRendererProvider as N,
+  OPEN_IMAGE_UPLOAD_DIALOG_COMMAND as O,
+  SpoilerNode as S,
+  TagNode as T,
+  $createMentionNode as a,
+  $createMermaidNode as b,
+  $createTagNode as c,
+  $isImageNode as d,
+  $isKaTeXBlockNode as e,
+  $isKaTeXInlineNode as f,
+  $isMentionNode as g,
+  $isMermaidNode as h,
+  $isTagNode as i,
+  ALERT_TYPES as j,
+  KaTeXInlineNode as k,
+  MermaidNode as l,
+  getTagBgColor as m,
+  editorTheme as n,
+  extractTextContent as o,
+  useOptionalNestedContentRenderer as p,
+  $isAlertQuoteNode as q,
+  AlertRenderer as r,
+  AlertQuoteNode as s,
+  $createKaTeXInlineNode as t,
+  useNestedContentRenderer as u,
+  $createKaTeXBlockNode as v,
+  $createFootnoteNode as w,
+  $createSpoilerNode as x
+};