@kopexa/tiptap 17.0.17 → 17.2.0

package/dist/chunk-5GFFTVMZ.mjs

@@ -0,0 +1,62 @@
+"use client";
+
+// src/extensions/image/messages.ts
+import { defineMessages } from "react-intl";
+var messages = defineMessages({
+  loading: {
+    id: "editor.image.loading",
+    defaultMessage: "Loading image..."
+  },
+  error: {
+    id: "editor.image.error",
+    defaultMessage: "Failed to load image"
+  },
+  upload_error: {
+    id: "editor.image.upload_error",
+    defaultMessage: "Failed to upload image"
+  },
+  uploading: {
+    id: "editor.image.uploading",
+    defaultMessage: "Uploading..."
+  },
+  upload_placeholder: {
+    id: "editor.image.upload_placeholder",
+    defaultMessage: "Click to upload or drag & drop"
+  },
+  upload_hint: {
+    id: "editor.image.upload_hint",
+    defaultMessage: "PNG, JPG, GIF, WebP, SVG"
+  },
+  alt_text: {
+    id: "editor.image.alt_text",
+    defaultMessage: "Alt text"
+  },
+  alt_placeholder: {
+    id: "editor.image.alt_placeholder",
+    defaultMessage: "Describe the image..."
+  },
+  files_not_supported: {
+    id: "editor.image.files_not_supported",
+    defaultMessage: "File upload is not configured"
+  },
+  file_too_large: {
+    id: "editor.image.file_too_large",
+    defaultMessage: "File is too large (max {maxSize})"
+  },
+  invalid_type: {
+    id: "editor.image.invalid_type",
+    defaultMessage: "Invalid file type"
+  },
+  retry: {
+    id: "editor.image.retry",
+    defaultMessage: "Retry"
+  },
+  remove: {
+    id: "editor.image.remove",
+    defaultMessage: "Remove"
+  }
+});
+
+export {
+  messages
+};

package/dist/{chunk-FJAGUXEO.mjs → chunk-7SRL3P4B.mjs}

@@ -1,13 +1,19 @@
 "use client";
 import {
   SlashDropdownMenu
-} from "./chunk-QF3YHPWM.mjs";
+} from "./chunk-E5NW3MJZ.mjs";
+import {
+  LinkBubble
+} from "./chunk-XNDXYI2N.mjs";
 import {
   useScrollToHash
-} from "./chunk-JNL4KY45.mjs";
+} from "./chunk-DZLGLP7R.mjs";
 import {
   EditorHeader
-} from "./chunk-3IKIIRV3.mjs";
+} from "./chunk-QAE2D4KV.mjs";
+import {
+  BubbleMenu
+} from "./chunk-NSYSECKW.mjs";
 import {
   useUiEditorState
 } from "./chunk-BXJYNSWQ.mjs";
@@ -16,7 +22,7 @@ import {
 } from "./chunk-REJEJXOZ.mjs";
 import {
   useCreateEditor
-} from "./chunk-LXOLVGLW.mjs";
+} from "./chunk-UU6JK5HX.mjs";
 
 // src/presets/basic/index.tsx
 import {
@@ -31,17 +37,20 @@ import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var BasicEditor = ({
   variant,
+  bordered,
   content,
   ...options
 }) => {
   const editor = useCreateEditor({ content, ...options });
-  const styles = editorBasic({ variant });
+  const styles = editorBasic({ variant, bordered });
   if (!editor) {
     return /* @__PURE__ */ jsx(LoadingSpinner, {});
   }
+  const isBottomToolbar = variant === "field";
   return /* @__PURE__ */ jsx(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ jsx("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ jsxs(EditorContext.Provider, { value: { editor }, children: [
-    /* @__PURE__ */ jsx(EditorHeader, { editor }),
-    /* @__PURE__ */ jsx(EditorContentArea, { variant })
+    !isBottomToolbar && /* @__PURE__ */ jsx(EditorHeader, { editor, variant }),
+    /* @__PURE__ */ jsx(EditorContentArea, { variant }),
+    isBottomToolbar && /* @__PURE__ */ jsx(EditorHeader, { editor, variant })
   ] }) }) });
 };
 var EditorContentArea = ({ variant }) => {
@@ -52,18 +61,22 @@ var EditorContentArea = ({ variant }) => {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: styles.wrapper(), children: /* @__PURE__ */ jsx(
-    EditorContent,
-    {
-      editor,
-      role: "presentation",
-      className: styles.content(),
-      style: {
-        cursor: isDragging ? "grabbing" : "auto"
-      },
-      children: /* @__PURE__ */ jsx(SlashDropdownMenu, {})
-    }
-  ) });
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper(), children: [
+    /* @__PURE__ */ jsx(
+      EditorContent,
+      {
+        editor,
+        role: "presentation",
+        className: styles.content(),
+        style: {
+          cursor: isDragging ? "grabbing" : "auto"
+        },
+        children: /* @__PURE__ */ jsx(SlashDropdownMenu, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(BubbleMenu, { editor }),
+    /* @__PURE__ */ jsx(LinkBubble, { editor })
+  ] });
 };
 function LoadingSpinner({ text = "Connecting..." }) {
   const styles = editorSpinner();

package/dist/{chunk-WHJ4B43N.mjs → chunk-7VGROP26.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useLinkPopover
-} from "./chunk-LHXRE26G.mjs";
+} from "./chunk-VTKJPVNM.mjs";
 import {
   useTiptapEditor
 } from "./chunk-P55PLOHR.mjs";
@@ -9,14 +9,14 @@ import {
 // src/ui/link-popover/link-popover.tsx
 import { IconButton } from "@kopexa/button";
 import {
-  CornerDownLeftIcon,
+  CheckIcon,
+  EditIcon,
   ExternalLinkIcon,
   LinkIcon,
   TrashIcon
 } from "@kopexa/icons";
 import { Input } from "@kopexa/input";
 import { Popover } from "@kopexa/popover";
-import { Separator } from "@kopexa/separator";
 import { ToolbarButton } from "@kopexa/toolbar";
 import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -43,67 +43,110 @@ var LinkMain = ({
   setLink,
   removeLink,
   openLink,
-  isActive
+  isActive,
+  onSave
 }) => {
+  const [isEditing, setIsEditing] = useState(!isActive || !url);
+  useEffect(() => {
+    setIsEditing(!isActive || !url);
+  }, [isActive, url]);
   const handleKeyDown = (event) => {
     if (event.key === "Enter") {
       event.preventDefault();
       setLink();
+      setIsEditing(false);
+      onSave == null ? void 0 : onSave();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setIsEditing(false);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-2", children: [
+  const handleSave = () => {
+    setLink();
+    setIsEditing(false);
+    onSave == null ? void 0 : onSave();
+  };
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+  if (isEditing) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
       /* @__PURE__ */ jsx(
         Input,
         {
           type: "url",
-          placeholder: "Paste a link...",
+          placeholder: "Enter URL...",
           value: url,
           onChange: (e) => setUrl(e.target.value),
           onKeyDown: handleKeyDown,
           autoComplete: "off",
           autoCorrect: "off",
           autoCapitalize: "off",
-          className: "w-full"
+          className: "flex-1 h-8 text-sm",
+          autoFocus: true
         }
       ),
       /* @__PURE__ */ jsx(
         IconButton,
         {
           type: "button",
-          onClick: setLink,
-          "aria-label": "Apply link",
-          disabled: !url && !isActive,
+          size: "sm",
           variant: "ghost",
-          color: "default",
-          children: /* @__PURE__ */ jsx(CornerDownLeftIcon, {})
+          onClick: handleSave,
+          "aria-label": "Save link",
+          disabled: !url,
+          children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
-    /* @__PURE__ */ jsxs("div", { className: "tiptap-button-group", "data-orientation": "horizontal", children: [
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
+        onClick: (e) => {
+          e.preventDefault();
+          openLink();
+        },
+        children: url
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
       /* @__PURE__ */ jsx(
         IconButton,
         {
           type: "button",
+          size: "sm",
+          variant: "ghost",
           onClick: openLink,
-          "aria-label": "Open in new window",
-          disabled: !url && !isActive,
+          "aria-label": "Open link in new tab",
+          children: /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          type: "button",
+          size: "sm",
           variant: "ghost",
-          color: "default",
-          children: /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+          onClick: handleEdit,
+          "aria-label": "Edit link",
+          children: /* @__PURE__ */ jsx(EditIcon, { className: "size-4" })
         }
       ),
       /* @__PURE__ */ jsx(
         IconButton,
         {
           type: "button",
+          size: "sm",
+          variant: "ghost",
           onClick: removeLink,
           "aria-label": "Remove link",
-          disabled: !url && !isActive,
-          variant: "ghost",
-          color: "default",
-          children: /* @__PURE__ */ jsx(TrashIcon, {})
+          children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-4" })
         }
       )
     ] })
@@ -201,7 +244,8 @@ function LinkPopover({
             setLink: handleSetLink,
             removeLink,
             openLink,
-            isActive
+            isActive,
+            onSave: () => setIsOpen(false)
           }
         ) })
       ]

package/dist/chunk-7VW67NVL.mjs

@@ -0,0 +1,80 @@
+"use client";
+import {
+  InlineMathView
+} from "./chunk-BXHPO3T7.mjs";
+
+// src/extensions/math/inline-math.ts
+import { InputRule, mergeAttributes, Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+var InlineMath = Node.create({
+  name: "inlineMath",
+  group: "inline",
+  inline: true,
+  atom: true,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    return {
+      latex: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-latex") || "",
+        renderHTML: (attributes) => ({
+          "data-latex": attributes.latex
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'span[data-type="inline-math"]'
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": "inline-math"
+      })
+    ];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(InlineMathView, {
+      as: "span"
+    });
+  },
+  addCommands() {
+    return {
+      insertInlineMath: (latex = "") => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: { latex }
+        });
+      }
+    };
+  },
+  addInputRules() {
+    return [
+      // Inline math with $...$
+      new InputRule({
+        // Match $...$ but not $$...$$
+        find: /(?<!\$)\$([^$]+)\$(?!\$)/,
+        handler: ({ state, range, match }) => {
+          const latex = match[1];
+          const { tr } = state;
+          tr.replaceWith(range.from, range.to, this.type.create({ latex }));
+        }
+      })
+    ];
+  }
+});
+var inline_math_default = InlineMath;
+
+export {
+  InlineMath,
+  inline_math_default
+};

package/dist/chunk-BXHPO3T7.mjs

@@ -0,0 +1,152 @@
+"use client";
+import {
+  messages
+} from "./chunk-FRJX2F4T.mjs";
+
+// src/extensions/math/inline-math-view.tsx
+import { Button } from "@kopexa/button";
+import { Dialog } from "@kopexa/dialog";
+import { Label } from "@kopexa/label";
+import {
+  NodeViewWrapper,
+  useEditorState
+} from "@tiptap/react";
+import katex from "katex";
+import "katex/dist/katex.min.css";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useIntl } from "react-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+function InlineMathView({ editor, node, getPos }) {
+  const intl = useIntl();
+  const attrs = node.attrs;
+  const { latex = "" } = attrs;
+  const isEditable = useEditorState({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a;
+      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
+    }
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  const [localLatex, setLocalLatex] = useState(latex);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (isOpen) {
+      setLocalLatex(latex);
+      setError(null);
+    }
+  }, [isOpen, latex]);
+  const renderedHtml = useMemo(() => {
+    if (!latex) return null;
+    try {
+      return katex.renderToString(latex, {
+        throwOnError: false,
+        displayMode: false,
+        output: "html"
+      });
+    } catch {
+      return null;
+    }
+  }, [latex]);
+  const previewHtml = useMemo(() => {
+    if (!localLatex) return null;
+    try {
+      setError(null);
+      return katex.renderToString(localLatex, {
+        throwOnError: true,
+        displayMode: false,
+        output: "html"
+      });
+    } catch (_e) {
+      setError(intl.formatMessage(messages.invalid_latex));
+      return null;
+    }
+  }, [localLatex, intl]);
+  const handleSave = useCallback(() => {
+    const pos = getPos();
+    if (pos === void 0) return;
+    editor.view.dispatch(
+      editor.state.tr.setNodeMarkup(pos, void 0, { latex: localLatex })
+    );
+    setIsOpen(false);
+  }, [editor, localLatex, getPos]);
+  const handleCancel = useCallback(() => {
+    setLocalLatex(latex);
+    setError(null);
+    setIsOpen(false);
+  }, [latex]);
+  const handleClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (isEditable) {
+        setIsOpen(true);
+      }
+    },
+    [isEditable]
+  );
+  const isEmpty = !latex;
+  return /* @__PURE__ */ jsxs(
+    NodeViewWrapper,
+    {
+      as: "span",
+      className: "inline-math-wrapper",
+      "data-type": "inline-math",
+      "data-latex": latex,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `inline-math cursor-pointer rounded px-0.5 transition-colors ${isEditable ? "hover:bg-primary/10 hover:ring-1 hover:ring-primary/20" : ""} ${isEmpty ? "text-muted-foreground italic" : ""}`,
+            onClick: handleClick,
+            children: isEmpty ? /* @__PURE__ */ jsx("span", { className: "text-xs", children: "$?$" }) : renderedHtml ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                dangerouslySetInnerHTML: { __html: renderedHtml }
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "text-destructive text-xs", children: latex })
+          }
+        ),
+        /* @__PURE__ */ jsx(Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+          /* @__PURE__ */ jsx(Dialog.Header, { children: /* @__PURE__ */ jsx(Dialog.Title, { children: intl.formatMessage(messages.title) }) }),
+          /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { className: "text-sm", children: intl.formatMessage(messages.latex_input) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  className: "w-full p-2 rounded-md border border-input bg-background font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                  value: localLatex,
+                  onChange: (e) => setLocalLatex(e.target.value),
+                  placeholder: intl.formatMessage(messages.latex_placeholder),
+                  spellCheck: false
+                }
+              ),
+              error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { className: "text-sm", children: intl.formatMessage(messages.preview) }),
+              /* @__PURE__ */ jsx("div", { className: "min-h-10 p-3 rounded-md border border-border bg-muted/30 flex items-center justify-center", children: previewHtml ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  dangerouslySetInnerHTML: { __html: previewHtml }
+                }
+              ) : localLatex ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages.invalid_latex) }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "$...$" }) })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages.cancel) }),
+            /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: !!error && !!localLatex, children: intl.formatMessage(messages.save) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+var inline_math_view_default = InlineMathView;
+
+export {
+  InlineMathView,
+  inline_math_view_default
+};

package/dist/{chunk-QF3YHPWM.mjs → chunk-E5NW3MJZ.mjs}

@@ -1,13 +1,13 @@
 "use client";
-import {
-  useSlashDropdownMenu
-} from "./chunk-B2DHYFSH.mjs";
 import {
   SuggestionMenu
-} from "./chunk-XLSZK3WJ.mjs";
+} from "./chunk-ZYFCSR3E.mjs";
 import {
   filterSuggestionItems
 } from "./chunk-CNVACBGT.mjs";
+import {
+  useSlashDropdownMenu
+} from "./chunk-NEHW62L7.mjs";
 
 // src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
 import { Button } from "@kopexa/button";

package/dist/chunk-FRJX2F4T.mjs

@@ -0,0 +1,55 @@
+"use client";
+
+// src/extensions/math/messages.ts
+import { defineMessages } from "react-intl";
+var messages = defineMessages({
+  title: {
+    id: "editor.math.title",
+    defaultMessage: "Formula",
+    description: "Math block title"
+  },
+  edit: {
+    id: "editor.math.edit",
+    defaultMessage: "Edit",
+    description: "Edit button label"
+  },
+  preview: {
+    id: "editor.math.preview",
+    defaultMessage: "Preview",
+    description: "Preview section label"
+  },
+  latex_input: {
+    id: "editor.math.latex_input",
+    defaultMessage: "LaTeX",
+    description: "LaTeX input label"
+  },
+  latex_placeholder: {
+    id: "editor.math.latex_placeholder",
+    defaultMessage: "Enter LaTeX formula...",
+    description: "LaTeX input placeholder"
+  },
+  invalid_latex: {
+    id: "editor.math.invalid_latex",
+    defaultMessage: "Invalid LaTeX syntax",
+    description: "Error message for invalid LaTeX"
+  },
+  empty_formula: {
+    id: "editor.math.empty_formula",
+    defaultMessage: "Click to add formula",
+    description: "Placeholder for empty formula"
+  },
+  save: {
+    id: "editor.math.save",
+    defaultMessage: "Save",
+    description: "Save button label"
+  },
+  cancel: {
+    id: "editor.math.cancel",
+    defaultMessage: "Cancel",
+    description: "Cancel button label"
+  }
+});
+
+export {
+  messages
+};