@kopexa/tiptap 17.0.17 → 17.2.0

package/dist/chunk-UVHVCION.mjs

@@ -0,0 +1,168 @@
+"use client";
+import {
+  messages
+} from "./chunk-FRJX2F4T.mjs";
+
+// src/extensions/math/math-block-view.tsx
+import { Button, IconButton } from "@kopexa/button";
+import { Dialog } from "@kopexa/dialog";
+import { EditIcon } from "@kopexa/icons";
+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 MathBlockView({ 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: true,
+        output: "html"
+      });
+    } catch {
+      return null;
+    }
+  }, [latex]);
+  const previewHtml = useMemo(() => {
+    if (!localLatex) return null;
+    try {
+      setError(null);
+      return katex.renderToString(localLatex, {
+        throwOnError: true,
+        displayMode: true,
+        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 handleOpenEditor = useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (isEditable) {
+        setIsOpen(true);
+      }
+    },
+    [isEditable]
+  );
+  const isEmpty = !latex;
+  return /* @__PURE__ */ jsxs(
+    NodeViewWrapper,
+    {
+      className: "my-4 relative group",
+      "data-type": "math-block",
+      "data-latex": latex,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "w-full flex items-center justify-center min-h-16 p-4 rounded-md border border-border bg-muted/30 cursor-pointer hover:bg-muted/50 transition-colors",
+            onClick: handleOpenEditor,
+            children: isEmpty ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-lg font-serif", children: "\u2211" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: intl.formatMessage(messages.empty_formula) })
+            ] }) : renderedHtml ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "katex-display",
+                dangerouslySetInnerHTML: { __html: renderedHtml }
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "text-destructive text-sm", children: intl.formatMessage(messages.invalid_latex) })
+          }
+        ),
+        isEditable && !isEmpty && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            variant: "ghost",
+            className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
+            "aria-label": intl.formatMessage(messages.edit),
+            onClick: handleOpenEditor,
+            children: /* @__PURE__ */ jsx(EditIcon, { className: "size-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "md", 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(
+                "textarea",
+                {
+                  className: "w-full min-h-24 p-3 rounded-md border border-input bg-background font-mono text-sm resize-y 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-16 p-4 rounded-md border border-border bg-muted/30 flex items-center justify-center", children: previewHtml ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "katex-display",
+                  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: intl.formatMessage(messages.latex_placeholder) }) })
+            ] })
+          ] }) }),
+          /* @__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 math_block_view_default = MathBlockView;
+
+export {
+  MathBlockView,
+  math_block_view_default
+};

package/dist/chunk-VF3G2URZ.mjs

@@ -0,0 +1,83 @@
+"use client";
+import {
+  CalloutSettings
+} from "./chunk-N4CT5RNC.mjs";
+
+// src/extensions/callout/callout-view.tsx
+import {
+  AlertCircleIcon,
+  AlertIcon,
+  CheckCirleIcon,
+  InfoIcon,
+  ShellIcon
+} from "@kopexa/icons";
+import { callout } from "@kopexa/theme";
+import {
+  NodeViewContent,
+  NodeViewWrapper,
+  useEditorState
+} from "@tiptap/react";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getVariantIcon(variant, iconClass) {
+  switch (variant) {
+    case "info":
+      return /* @__PURE__ */ jsx(InfoIcon, { className: iconClass });
+    case "success":
+      return /* @__PURE__ */ jsx(CheckCirleIcon, { className: iconClass });
+    case "warning":
+      return /* @__PURE__ */ jsx(AlertIcon, { className: iconClass });
+    case "destructive":
+      return /* @__PURE__ */ jsx(AlertCircleIcon, { className: iconClass });
+    default:
+      return /* @__PURE__ */ jsx(ShellIcon, { className: iconClass });
+  }
+}
+function CalloutNodeView({ editor, node, getPos }) {
+  const attrs = node.attrs;
+  const { variant = "info", title } = attrs;
+  const isEditable = useEditorState({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a;
+      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
+    }
+  });
+  const styles = useMemo(
+    () => callout({
+      variant,
+      radius: "md",
+      size: "md"
+    }),
+    [variant]
+  );
+  return /* @__PURE__ */ jsxs(
+    NodeViewWrapper,
+    {
+      className: styles.root(),
+      "data-type": "callout",
+      "data-variant": variant,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.iconContainer(), children: getVariantIcon(variant, styles.icon()) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.content(), children: [
+          title && /* @__PURE__ */ jsx("div", { className: styles.title(), children: title }),
+          /* @__PURE__ */ jsx(NodeViewContent, { className: "callout-content" })
+        ] }),
+        isEditable && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ jsx(
+          CalloutSettings,
+          {
+            editor,
+            attrs,
+            getPos
+          }
+        ) })
+      ]
+    }
+  );
+}
+var callout_view_default = CalloutNodeView;
+
+export {
+  CalloutNodeView,
+  callout_view_default
+};

package/dist/chunk-VRQ6OSAZ.mjs

@@ -0,0 +1,76 @@
+"use client";
+
+// src/context/editor-file-context.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var EditorFileContext = createContext(null);
+var DEFAULT_CACHE_BUFFER = 2 * 60 * 1e3;
+var DEFAULT_CACHE_TTL = 10 * 60 * 1e3;
+var defaultIsReference = (src) => {
+  if (!src) return false;
+  if (src.startsWith("http://") || src.startsWith("https://")) return false;
+  if (src.startsWith("data:")) return false;
+  if (src.startsWith("blob:")) return false;
+  return true;
+};
+function EditorFileProvider({
+  children,
+  onUpload,
+  onResolve,
+  isReference = defaultIsReference,
+  cacheBuffer = DEFAULT_CACHE_BUFFER,
+  defaultCacheTtl = DEFAULT_CACHE_TTL
+}) {
+  const cacheRef = useRef(/* @__PURE__ */ new Map());
+  const resolve = useCallback(
+    async (ref) => {
+      const cache = cacheRef.current;
+      const now = Date.now();
+      const cached = cache.get(ref);
+      if (cached && cached.expiresAt > now + cacheBuffer) {
+        return cached.url;
+      }
+      const url = await onResolve(ref);
+      cache.set(ref, {
+        url,
+        expiresAt: now + defaultCacheTtl
+      });
+      return url;
+    },
+    [onResolve, cacheBuffer, defaultCacheTtl]
+  );
+  const value = useMemo(
+    () => ({
+      isAvailable: true,
+      upload: onUpload,
+      resolve,
+      isReference
+    }),
+    [onUpload, resolve, isReference]
+  );
+  return /* @__PURE__ */ jsx(EditorFileContext.Provider, { value, children });
+}
+function useEditorFile() {
+  return useContext(EditorFileContext);
+}
+function useEditorFileRequired() {
+  const context = useContext(EditorFileContext);
+  if (!context) {
+    throw new Error(
+      "useEditorFileRequired must be used within an EditorFileProvider"
+    );
+  }
+  return context;
+}
+
+export {
+  EditorFileProvider,
+  useEditorFile,
+  useEditorFileRequired
+};

package/dist/chunk-WAAH3NLG.mjs

@@ -0,0 +1,77 @@
+"use client";
+import {
+  ImageNodeView
+} from "./chunk-LMCQMSW2.mjs";
+
+// src/extensions/image/index.ts
+import { mergeAttributes, Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+var ImageNode = Node.create({
+  name: "image",
+  group: "block",
+  atom: true,
+  draggable: true,
+  addOptions() {
+    return {
+      allowBase64: true,
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    return {
+      src: {
+        default: null
+      },
+      alt: {
+        default: null
+      },
+      title: {
+        default: null
+      },
+      width: {
+        default: null
+      },
+      height: {
+        default: null
+      },
+      uploadState: {
+        default: null,
+        rendered: false
+      },
+      uploadProgress: {
+        default: null,
+        rendered: false
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "img[src]"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "img",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)
+    ];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageNodeView);
+  },
+  addCommands() {
+    return {
+      setImage: (options) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options
+        });
+      }
+    };
+  }
+});
+
+export {
+  ImageNode
+};

package/dist/chunk-XNDXYI2N.mjs

@@ -0,0 +1,158 @@
+"use client";
+
+// src/ui/link-bubble/index.tsx
+import { IconButton } from "@kopexa/button";
+import { EditIcon, ExternalLinkIcon, TrashIcon } from "@kopexa/icons";
+import { Input } from "@kopexa/input";
+import { BubbleMenu as TiptapBubbleMenu } from "@tiptap/react/menus";
+import { useCallback, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function LinkBubble({ editor }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [url, setUrl] = useState("");
+  const getCurrentUrl = useCallback(() => {
+    if (!editor) return "";
+    const attrs = editor.getAttributes("link");
+    return attrs.href || "";
+  }, [editor]);
+  useEffect(() => {
+    const isLinkActive = editor == null ? void 0 : editor.isActive("link");
+    if (isLinkActive) {
+      setUrl(getCurrentUrl());
+      setIsEditing(false);
+    }
+  }, [editor, getCurrentUrl]);
+  const handleOpenLink = useCallback(() => {
+    const href = getCurrentUrl();
+    if (href) {
+      window.open(href, "_blank", "noopener,noreferrer");
+    }
+  }, [getCurrentUrl]);
+  const handleRemoveLink = useCallback(() => {
+    editor == null ? void 0 : editor.chain().focus().unsetLink().run();
+  }, [editor]);
+  const handleEdit = useCallback(() => {
+    setUrl(getCurrentUrl());
+    setIsEditing(true);
+  }, [getCurrentUrl]);
+  const handleSave = useCallback(() => {
+    if (url) {
+      editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+    } else {
+      editor == null ? void 0 : editor.chain().focus().unsetLink().run();
+    }
+    setIsEditing(false);
+  }, [editor, url]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSave();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsEditing(false);
+        setUrl(getCurrentUrl());
+      }
+    },
+    [handleSave, getCurrentUrl]
+  );
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    TiptapBubbleMenu,
+    {
+      editor,
+      pluginKey: "linkBubbleMenu",
+      shouldShow: ({ editor: e }) => {
+        return e.isActive("link") && e.isEditable;
+      },
+      options: {
+        placement: "bottom-start",
+        offset: 8
+      },
+      className: "rounded-lg border bg-background shadow-md",
+      children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "url",
+            value: url,
+            onChange: (e) => setUrl(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder: "Enter URL...",
+            className: "flex-1 h-8 text-sm",
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            onClick: handleSave,
+            "aria-label": "Save link",
+            children: /* @__PURE__ */ jsx(EditIcon, { className: "size-4" })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: getCurrentUrl(),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
+            onClick: (e) => {
+              e.preventDefault();
+              handleOpenLink();
+            },
+            children: getCurrentUrl()
+          }
+        ),
+        /* @__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: handleOpenLink,
+              "aria-label": "Open link in new tab",
+              children: /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: handleEdit,
+              "aria-label": "Edit link",
+              children: /* @__PURE__ */ jsx(EditIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: handleRemoveLink,
+              "aria-label": "Remove link",
+              children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-4" })
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+}
+var link_bubble_default = LinkBubble;
+
+export {
+  LinkBubble,
+  link_bubble_default
+};

package/dist/context/editor-file-context.d.mts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface EditorFileHandler {
+    /**
+     * Upload a file and return a reference string.
+     * The reference format is determined by the backend (e.g., UUID, custom scheme).
+     * @param file The file to upload
+     * @param onProgress Optional progress callback (0-100)
+     * @returns Promise resolving to a reference string
+     */
+    upload: (file: File, onProgress?: (percent: number) => void) => Promise<string>;
+    /**
+     * Resolve a reference to a displayable URL.
+     * Typically returns a signed URL from your storage backend.
+     * @param ref The reference string from upload
+     * @returns Promise resolving to a displayable URL
+     */
+    resolve: (ref: string) => Promise<string>;
+    /**
+     * Check if a src string is a reference that needs resolving.
+     * Returns false for already-valid URLs (https://, data:, etc.)
+     * @param src The src attribute value
+     * @returns true if this needs to be resolved
+     */
+    isReference: (src: string) => boolean;
+}
+interface EditorFileContextValue extends EditorFileHandler {
+    /**
+     * Whether file handling is available
+     */
+    isAvailable: true;
+}
+interface EditorFileProviderProps {
+    children: ReactNode;
+    /**
+     * Upload handler - called when user pastes/drops a file
+     */
+    onUpload: EditorFileHandler["upload"];
+    /**
+     * Resolve handler - called to get displayable URL from reference
+     */
+    onResolve: EditorFileHandler["resolve"];
+    /**
+     * Check if src needs resolving (default: not starting with http/https/data)
+     */
+    isReference?: EditorFileHandler["isReference"];
+    /**
+     * Cache TTL buffer in ms (default: 2 minutes)
+     * URLs are refreshed this much before actual expiry
+     */
+    cacheBuffer?: number;
+    /**
+     * Default cache TTL in ms if not determined from response (default: 10 minutes)
+     */
+    defaultCacheTtl?: number;
+}
+declare function EditorFileProvider({ children, onUpload, onResolve, isReference, cacheBuffer, defaultCacheTtl, }: EditorFileProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access file handling capabilities.
+ * Returns null if no EditorFileProvider is present (files not supported).
+ */
+declare function useEditorFile(): EditorFileContextValue | null;
+/**
+ * Hook that throws if file handling is not available.
+ * Use this in components that require file support.
+ */
+declare function useEditorFileRequired(): EditorFileContextValue;
+
+export { type EditorFileHandler, EditorFileProvider, type EditorFileProviderProps, useEditorFile, useEditorFileRequired };