@haklex/rich-renderer-katex 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2024 Innei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+Additional Terms and Conditions
+
+----------------
+
+Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.

package/README.md

@@ -0,0 +1,41 @@
+# @haklex/rich-renderer-katex
+
+KaTeX 数学公式编辑节点。
+
+## 安装
+
+```bash
+pnpm add @haklex/rich-renderer-katex @haklex/rich-editor katex
+```
+
+## 导出
+
+```ts
+export { KaTeXBlockEditNode } from './KaTeXBlockEditNode'
+export { KaTeXInlineEditNode } from './KaTeXInlineEditNode'
+export { KaTeXEditDecorator } from './KaTeXEditDecorator'
+
+export const katexEditNodes: Array<Klass<LexicalNode>>
+```
+
+## 使用
+
+```tsx
+import { katexEditNodes } from '@haklex/rich-renderer-katex'
+import { RichEditor } from '@haklex/rich-editor'
+
+<RichEditor extraNodes={[...katexEditNodes]} />
+```
+
+## 依赖
+
+```json
+{
+  "@haklex/rich-editor": "workspace:*",
+  "katex": ">=0.16.0"
+}
+```
+
+## License
+
+MIT

package/dist/KaTeXBlockEditNode.d.ts

@@ -0,0 +1,9 @@
+import { KaTeXBlockNode, SerializedKaTeXBlockNode } from '@haklex/rich-editor';
+import { EditorConfig, LexicalEditor } from 'lexical';
+import { ReactElement } from 'react';
+export declare class KaTeXBlockEditNode extends KaTeXBlockNode {
+    static clone(node: KaTeXBlockEditNode): KaTeXBlockEditNode;
+    static importJSON(serializedNode: SerializedKaTeXBlockNode): KaTeXBlockEditNode;
+    decorate(_editor: LexicalEditor, _config: EditorConfig): ReactElement;
+}
+//# sourceMappingURL=KaTeXBlockEditNode.d.ts.map

package/dist/KaTeXBlockEditNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KaTeXBlockEditNode.d.ts","sourceRoot":"","sources":["../src/KaTeXBlockEditNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAEd,KAAK,wBAAwB,EAC9B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKzC,qBAAa,kBAAmB,SAAQ,cAAc;IACpD,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,kBAAkB,GAAG,kBAAkB;IAI1D,MAAM,CAAC,UAAU,CACf,cAAc,EAAE,wBAAwB,GACvC,kBAAkB;IAIrB,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAYtE"}

package/dist/KaTeXEditDecorator.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+interface KaTeXEditDecoratorProps {
+    nodeKey: string;
+    equation: string;
+    displayMode: boolean;
+    children: ReactElement;
+}
+export declare function KaTeXEditDecorator({ nodeKey, equation, displayMode, children, }: KaTeXEditDecoratorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=KaTeXEditDecorator.d.ts.map

package/dist/KaTeXEditDecorator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KaTeXEditDecorator.d.ts","sourceRoot":"","sources":["../src/KaTeXEditDecorator.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAGzC,UAAU,uBAAuB;IAC/B,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,YAAY,CAAA;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,GACT,EAAE,uBAAuB,2CAqOzB"}

package/dist/KaTeXInlineEditNode.d.ts

@@ -0,0 +1,9 @@
+import { KaTeXInlineNode, SerializedKaTeXInlineNode } from '@haklex/rich-editor';
+import { EditorConfig, LexicalEditor } from 'lexical';
+import { ReactElement } from 'react';
+export declare class KaTeXInlineEditNode extends KaTeXInlineNode {
+    static clone(node: KaTeXInlineEditNode): KaTeXInlineEditNode;
+    static importJSON(serializedNode: SerializedKaTeXInlineNode): KaTeXInlineEditNode;
+    decorate(_editor: LexicalEditor, _config: EditorConfig): ReactElement;
+}
+//# sourceMappingURL=KaTeXInlineEditNode.d.ts.map

package/dist/KaTeXInlineEditNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KaTeXInlineEditNode.d.ts","sourceRoot":"","sources":["../src/KaTeXInlineEditNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,eAAe,EAEf,KAAK,yBAAyB,EAC/B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKzC,qBAAa,mBAAoB,SAAQ,eAAe;IACtD,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,mBAAmB,GAAG,mBAAmB;IAI5D,MAAM,CAAC,UAAU,CACf,cAAc,EAAE,yBAAyB,GACxC,mBAAmB;IAItB,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAYtE"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { Klass, LexicalNode } from 'lexical';
+export { KaTeXBlockEditNode } from './KaTeXBlockEditNode';
+export { KaTeXEditDecorator } from './KaTeXEditDecorator';
+export { KaTeXInlineEditNode } from './KaTeXInlineEditNode';
+export declare const katexEditNodes: Array<Klass<LexicalNode>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAKjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAGpD,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,264 @@
+import { $isKaTeXInlineNode, $isKaTeXBlockNode, KaTeXRenderer, KaTeXBlockNode, createRendererDecoration, KaTeXInlineNode } from "@haklex/rich-editor";
+import { useState, useRef, useEffect, useCallback, createElement } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Popover, PopoverTrigger, PopoverPanel } from "@haklex/rich-editor-ui";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getNodeByKey } from "lexical";
+import { Terminal, Trash2, Check, Copy, RotateCcw } from "lucide-react";
+function KaTeXEditDecorator({
+  nodeKey,
+  equation,
+  displayMode,
+  children
+}) {
+  const [editor] = useLexicalComposerContext();
+  const editable = editor.isEditable();
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState(equation);
+  const [copied, setCopied] = useState(false);
+  const [activeTab, setActiveTab] = useState("editor");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    setValue(equation);
+  }, [equation]);
+  useEffect(() => {
+    if (open && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [open]);
+  const commit = useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isKaTeXInlineNode(node) && node.getEquation() !== trimmed) {
+        node.setEquation(trimmed);
+      } else if ($isKaTeXBlockNode(node) && node.getEquation() !== trimmed) {
+        node.setEquation(trimmed);
+      }
+    });
+    setOpen(false);
+  }, [editor, nodeKey, value]);
+  const cancel = useCallback(() => {
+    setValue(equation);
+    setOpen(false);
+  }, [equation]);
+  const handleDelete = useCallback(() => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if (node) node.remove();
+    });
+  }, [editor, nodeKey]);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, [value]);
+  const handleReset = useCallback(() => {
+    setValue(equation);
+    inputRef.current?.focus();
+  }, [equation]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+      } else if (displayMode && e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        commit();
+      } else if (!displayMode && e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        commit();
+      }
+    },
+    [commit, cancel, displayMode]
+  );
+  if (!editable) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: /* @__PURE__ */ jsx("span", { className: "rich-katex-edit-wrapper", title: "Click to edit" }),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      PopoverPanel,
+      {
+        side: "bottom",
+        sideOffset: 8,
+        className: "rich-katex-editor-panel",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-header", children: [
+            /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-header-left", children: [
+              /* @__PURE__ */ jsx("div", { className: "rich-katex-editor-icon-wrap", children: /* @__PURE__ */ jsx(Terminal, { size: 12 }) }),
+              /* @__PURE__ */ jsx("span", { className: "rich-katex-editor-title", children: "Math Editor" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-header-right", children: [
+              /* @__PURE__ */ jsx("span", { className: "rich-katex-editor-mode", children: displayMode ? "Block" : "Inline" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "rich-katex-editor-delete",
+                  type: "button",
+                  onClick: handleDelete,
+                  title: "Delete node",
+                  children: /* @__PURE__ */ jsx(Trash2, { size: 14 })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-tabs", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `rich-katex-editor-tab ${activeTab === "editor" ? "rich-katex-editor-tab-active" : ""}`,
+                onClick: () => setActiveTab("editor"),
+                children: "Editor"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `rich-katex-editor-tab ${activeTab === "snippets" ? "rich-katex-editor-tab-active" : ""}`,
+                onClick: () => setActiveTab("snippets"),
+                children: "Snippets"
+              }
+            )
+          ] }),
+          activeTab === "editor" && /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-body", children: [
+            /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-field", children: [
+              /* @__PURE__ */ jsx("label", { className: "rich-katex-editor-label", children: "LaTeX Input" }),
+              /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-input-wrap", children: [
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    ref: inputRef,
+                    className: "rich-katex-editor-textarea",
+                    value,
+                    onChange: (e) => setValue(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    rows: displayMode ? 4 : 3,
+                    spellCheck: false,
+                    autoComplete: "off",
+                    autoCorrect: "off",
+                    autoCapitalize: "off",
+                    placeholder: "e.g. \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-input-actions", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "rich-katex-editor-action-btn",
+                      type: "button",
+                      onClick: handleCopy,
+                      title: "Copy LaTeX",
+                      disabled: !value.trim(),
+                      children: copied ? /* @__PURE__ */ jsx(Check, { size: 12, style: { color: "#22c55e" } }) : /* @__PURE__ */ jsx(Copy, { size: 12 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "rich-katex-editor-action-btn",
+                      type: "button",
+                      onClick: handleReset,
+                      title: "Reset",
+                      disabled: value === equation,
+                      children: /* @__PURE__ */ jsx(RotateCcw, { size: 12 })
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-field", children: [
+              /* @__PURE__ */ jsx("label", { className: "rich-katex-editor-label", children: "Preview" }),
+              /* @__PURE__ */ jsx("div", { className: "rich-katex-editor-preview", children: value.trim() ? /* @__PURE__ */ jsx(KaTeXRenderer, { equation: value, displayMode }) : /* @__PURE__ */ jsx("span", { className: "rich-katex-editor-preview-empty", children: "Enter a formula" }) })
+            ] })
+          ] }),
+          activeTab === "snippets" && /* @__PURE__ */ jsx("div", { className: "rich-katex-editor-body", children: /* @__PURE__ */ jsx("div", { className: "rich-katex-editor-snippets-placeholder", children: "Snippets coming soon" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-footer", children: [
+            /* @__PURE__ */ jsx("span", { className: "rich-katex-editor-charcount", children: value.trim() ? `${value.length} chars` : "Enter a formula" }),
+            /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-footer-actions", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "rich-katex-editor-btn",
+                  type: "button",
+                  onClick: cancel,
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "rich-katex-editor-btn rich-katex-editor-btn-primary",
+                  type: "button",
+                  onClick: commit,
+                  disabled: !value.trim(),
+                  children: "Save"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+class KaTeXBlockEditNode extends KaTeXBlockNode {
+  static clone(node) {
+    return new KaTeXBlockEditNode(node.__equation, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new KaTeXBlockEditNode(serializedNode.equation);
+  }
+  decorate(_editor, _config) {
+    const rendererEl = createRendererDecoration("KaTeX", KaTeXRenderer, {
+      equation: this.__equation,
+      displayMode: true
+    });
+    return createElement(KaTeXEditDecorator, {
+      nodeKey: this.__key,
+      equation: this.__equation,
+      displayMode: true,
+      children: rendererEl
+    });
+  }
+}
+class KaTeXInlineEditNode extends KaTeXInlineNode {
+  static clone(node) {
+    return new KaTeXInlineEditNode(node.__equation, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new KaTeXInlineEditNode(serializedNode.equation);
+  }
+  decorate(_editor, _config) {
+    const rendererEl = createRendererDecoration("KaTeX", KaTeXRenderer, {
+      equation: this.__equation,
+      displayMode: false
+    });
+    return createElement(KaTeXEditDecorator, {
+      nodeKey: this.__key,
+      equation: this.__equation,
+      displayMode: false,
+      children: rendererEl
+    });
+  }
+}
+const katexEditNodes = [
+  KaTeXBlockEditNode,
+  KaTeXInlineEditNode
+];
+export {
+  KaTeXBlockEditNode,
+  KaTeXEditDecorator,
+  KaTeXInlineEditNode,
+  katexEditNodes
+};

package/dist/rich-renderer-katex.css

@@ -0,0 +1,256 @@
+.rich-katex-edit-wrapper {
+  cursor: pointer;
+  border-radius: var(--rc-radius-sm);
+  transition: background-color 0.15s ease;
+}
+.rich-katex-edit-wrapper:hover {
+  background-color: var(--rc-accent-light);
+}
+.rich-katex-editor-panel {
+  width: min(420px, 90vw);
+  padding: 0;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+.rich-katex-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid color-mix(in srgb, var(--rc-border) 60%, transparent);
+}
+.rich-katex-editor-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.rich-katex-editor-icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--rc-radius-sm);
+  background-color: var(--rc-accent-light);
+  color: var(--rc-accent);
+}
+.rich-katex-editor-title {
+  font-weight: 600;
+  font-size: var(--rc-font-size-small);
+  color: var(--rc-text);
+}
+.rich-katex-editor-header-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.rich-katex-editor-mode {
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--rc-text-secondary);
+  padding: 1px 6px;
+  border-radius: var(--rc-radius-sm);
+  background-color: var(--rc-bg-secondary);
+}
+.rich-katex-editor-delete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  appearance: none;
+  border: none;
+  background: none;
+  color: var(--rc-text-secondary);
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--rc-radius-sm);
+  transition: color 0.15s ease, background-color 0.15s ease;
+  flex-shrink: 0;
+}
+.rich-katex-editor-delete:hover {
+  color: var(--rc-alert-caution);
+  background-color: color-mix(in srgb, var(--rc-alert-caution) 10%, transparent);
+}
+.rich-katex-editor-tabs {
+  display: flex;
+  padding: 0 16px;
+  border-bottom: 1px solid color-mix(in srgb, var(--rc-border) 60%, transparent);
+  gap: 0;
+}
+.rich-katex-editor-tab {
+  position: relative;
+  appearance: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--rc-text-secondary);
+  cursor: pointer;
+  padding: 0 12px;
+  height: 36px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: color 0.15s ease;
+}
+.rich-katex-editor-tab:hover {
+  color: var(--rc-text);
+}
+.rich-katex-editor-tab-active {
+  color: var(--rc-accent);
+  border-bottom-color: var(--rc-accent);
+}
+.rich-katex-editor-body {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.rich-katex-editor-field {
+  display: flex;
+  flex-direction: column;
+}
+.rich-katex-editor-label {
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--rc-text-secondary);
+  margin-bottom: 6px;
+  padding-left: 2px;
+}
+.rich-katex-editor-input-wrap {
+  position: relative;
+}
+.rich-katex-editor-textarea {
+  display: block;
+  width: 100%;
+  padding: 10px 12px;
+  padding-right: 56px;
+  font-family: var(--rc-font-mono);
+  font-size: var(--rc-font-size-small);
+  line-height: 1.5;
+  background-color: color-mix(in srgb, var(--rc-bg-secondary) 30%, transparent);
+  color: var(--rc-text);
+  border: 1px solid color-mix(in srgb, var(--rc-border) 60%, transparent);
+  border-radius: var(--rc-radius-md);
+  outline: none;
+  resize: none;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.rich-katex-editor-textarea::placeholder {
+  color: color-mix(in srgb, var(--rc-text-secondary) 50%, transparent);
+}
+.rich-katex-editor-textarea:focus {
+  border-color: color-mix(in srgb, var(--rc-accent) 50%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc-accent) 25%, transparent);
+}
+.rich-katex-editor-input-actions {
+  position: absolute;
+  right: 6px;
+  top: 6px;
+  display: flex;
+  gap: 2px;
+}
+.rich-katex-editor-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  appearance: none;
+  border: none;
+  background: none;
+  color: color-mix(in srgb, var(--rc-text-secondary) 60%, transparent);
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--rc-radius-sm);
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.rich-katex-editor-action-btn:hover {
+  color: var(--rc-text);
+  background-color: var(--rc-bg-secondary);
+}
+.rich-katex-editor-action-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+  pointer-events: none;
+}
+.rich-katex-editor-preview {
+  border: 1px solid color-mix(in srgb, var(--rc-border) 60%, transparent);
+  border-radius: var(--rc-radius-md);
+  padding: var(--rc-space-md);
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-x: auto;
+  background-color: var(--rc-bg);
+}
+.rich-katex-editor-preview-empty {
+  color: color-mix(in srgb, var(--rc-text-secondary) 50%, transparent);
+  font-size: var(--rc-font-size-small);
+}
+.rich-katex-editor-snippets-placeholder {
+  color: var(--rc-text-secondary);
+  font-size: var(--rc-font-size-small);
+  text-align: center;
+  padding: var(--rc-space-lg) 0;
+}
+.rich-katex-editor-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-top: 1px solid color-mix(in srgb, var(--rc-border) 60%, transparent);
+  background-color: color-mix(in srgb, var(--rc-bg-secondary) 20%, transparent);
+}
+.rich-katex-editor-charcount {
+  color: var(--rc-text-secondary);
+  font-size: 10px;
+  font-family: var(--rc-font-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+}
+.rich-katex-editor-footer-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.rich-katex-editor-btn {
+  appearance: none;
+  border: none;
+  background: none;
+  color: var(--rc-text-secondary);
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: var(--rc-radius-sm);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.rich-katex-editor-btn:hover {
+  color: var(--rc-text);
+  background-color: var(--rc-bg-secondary);
+}
+.rich-katex-editor-btn-primary {
+  background-color: var(--rc-accent);
+  color: #fff;
+}
+.rich-katex-editor-btn-primary:hover {
+  background-color: var(--rc-accent);
+  filter: brightness(0.9);
+  color: #fff;
+}
+.rich-katex-editor-btn-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}

package/dist/styles.css.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@haklex/rich-renderer-katex",
+  "version": "0.0.1",
+  "description": "KaTeX math renderer for haklex rich editor",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-renderer-katex.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "lucide-react": "^0.574.0"
+  },
+  "devDependencies": {
+    "@lexical/react": "^0.39.0",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/vite-plugin": "^4.0.20",
+    "katex": ">=0.16.0",
+    "lexical": "^0.39.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-editor-ui": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "peerDependencies": {
+    "@lexical/react": "^0.39.0",
+    "katex": ">=0.16.0",
+    "lexical": "^0.39.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-editor-ui": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "peerDependenciesMeta": {
+    "katex": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}