@kopexa/tiptap 17.1.0 → 17.2.0

package/dist/{chunk-IY4SCXZN.mjs → chunk-UU6JK5HX.mjs}

@@ -1,22 +1,25 @@
 "use client";
+import {
+  Selection
+} from "./chunk-U5XAL46P.mjs";
+import {
+  TocNode
+} from "./chunk-IFXRPGIJ.mjs";
 import {
   TrailingNode
 } from "./chunk-H6LC4LDQ.mjs";
+import {
+  ImageNode
+} from "./chunk-WAAH3NLG.mjs";
 import {
   Link
 } from "./chunk-YLDL3VYY.mjs";
 import {
   MathBlock
-} from "./chunk-SFG45HEU.mjs";
+} from "./chunk-2U5CQUZH.mjs";
 import {
   InlineMath
-} from "./chunk-6YGMTHOY.mjs";
-import {
-  Selection
-} from "./chunk-U5XAL46P.mjs";
-import {
-  TocNode
-} from "./chunk-IFXRPGIJ.mjs";
+} from "./chunk-7VW67NVL.mjs";
 import {
   UiState
 } from "./chunk-KR42JAVB.mjs";
@@ -25,12 +28,16 @@ import {
 } from "./chunk-3VRQUYYW.mjs";
 import {
   CalloutNode
-} from "./chunk-QCRK7XVV.mjs";
+} from "./chunk-32SUXCAQ.mjs";
+import {
+  useEditorFile
+} from "./chunk-VRQ6OSAZ.mjs";
 
 // src/hooks/use-create-editor.ts
 import { CodeKit } from "@kopexa/extension-code";
 import { ControlKit } from "@kopexa/extension-controlref";
 import { TableKit } from "@kopexa/extension-table";
+import { FileHandler } from "@tiptap/extension-file-handler";
 import { Highlight } from "@tiptap/extension-highlight";
 import InvisibleCharacters from "@tiptap/extension-invisible-characters";
 import { TaskItem, TaskList } from "@tiptap/extension-list";
@@ -57,8 +64,11 @@ var useCreateEditor = ({
   onChange,
   enableControls = false,
   controlResolver,
+  fileHandler: fileHandlerProp,
   ...options
 }) => {
+  const fileHandlerFromContext = useEditorFile();
+  const fileHandler = fileHandlerProp != null ? fileHandlerProp : fileHandlerFromContext;
   const editor = useEditor({
     editorProps: {
       attributes: {
@@ -74,7 +84,8 @@ var useCreateEditor = ({
       editable,
       placeholder,
       enableControls,
-      controlResolver
+      controlResolver,
+      fileHandler
     }),
     editable,
     onUpdate: ({ editor: editor2 }) => {
@@ -94,7 +105,8 @@ function getExtensions({
   editable,
   placeholder,
   enableControls = false,
-  controlResolver
+  controlResolver,
+  fileHandler
 }) {
   const extensions = [
     StarterKit.configure({
@@ -146,6 +158,8 @@ function getExtensions({
     CalloutNode,
     MathBlock,
     InlineMath,
+    // Image support - always include for display
+    ImageNode,
     Placeholder.configure({
       placeholder,
       emptyNodeClass: "is-empty with-slash"
@@ -154,8 +168,88 @@ function getExtensions({
   if (enableControls) {
     extensions.push(ControlKit.configure({ resolver: controlResolver }));
   }
+  if (fileHandler) {
+    extensions.push(
+      FileHandler.configure({
+        allowedMimeTypes: [
+          "image/jpeg",
+          "image/png",
+          "image/gif",
+          "image/webp",
+          "image/svg+xml"
+        ],
+        onDrop: (editor, files, pos) => {
+          for (const file of files) {
+            handleFileUpload(editor, file, fileHandler, pos);
+          }
+        },
+        onPaste: (editor, files) => {
+          for (const file of files) {
+            handleFileUpload(editor, file, fileHandler);
+          }
+        }
+      })
+    );
+  }
   return extensions;
 }
+async function handleFileUpload(editor, file, fileHandler, pos) {
+  if (!editor) return;
+  const tempId = `uploading-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+  const insertPos = pos != null ? pos : editor.state.selection.anchor;
+  editor.chain().focus().insertContentAt(insertPos, {
+    type: "image",
+    attrs: {
+      src: tempId,
+      uploadState: "uploading",
+      uploadProgress: 0
+    }
+  }).run();
+  try {
+    const ref = await fileHandler.upload(file, (percent) => {
+      editor.state.doc.descendants((node, nodePos) => {
+        if (node.type.name === "image" && node.attrs.src === tempId) {
+          editor.view.dispatch(
+            editor.state.tr.setNodeMarkup(nodePos, void 0, {
+              ...node.attrs,
+              uploadProgress: percent
+            })
+          );
+          return false;
+        }
+        return true;
+      });
+    });
+    editor.state.doc.descendants((node, nodePos) => {
+      if (node.type.name === "image" && node.attrs.src === tempId) {
+        editor.view.dispatch(
+          editor.state.tr.setNodeMarkup(nodePos, void 0, {
+            src: ref,
+            uploadState: null,
+            uploadProgress: null
+          })
+        );
+        return false;
+      }
+      return true;
+    });
+  } catch (error) {
+    editor.state.doc.descendants((node, nodePos) => {
+      if (node.type.name === "image" && node.attrs.src === tempId) {
+        editor.view.dispatch(
+          editor.state.tr.setNodeMarkup(nodePos, void 0, {
+            ...node.attrs,
+            uploadState: "error",
+            uploadProgress: null
+          })
+        );
+        return false;
+      }
+      return true;
+    });
+    console.error("[FileHandler] Upload failed:", error);
+  }
+}
 
 export {
   useCreateEditor,

package/dist/{chunk-DSK3HK5D.mjs → chunk-UVHVCION.mjs}

@@ -8,7 +8,10 @@ import { Button, IconButton } from "@kopexa/button";
 import { Dialog } from "@kopexa/dialog";
 import { EditIcon } from "@kopexa/icons";
 import { Label } from "@kopexa/label";
-import { NodeViewWrapper } from "@tiptap/react";
+import {
+  NodeViewWrapper,
+  useEditorState
+} from "@tiptap/react";
 import katex from "katex";
 import "katex/dist/katex.min.css";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -18,6 +21,13 @@ 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);
@@ -70,11 +80,11 @@ function MathBlockView({ editor, node, getPos }) {
     (e) => {
       e.stopPropagation();
       e.preventDefault();
-      if (editor.isEditable) {
+      if (isEditable) {
         setIsOpen(true);
       }
     },
-    [editor.isEditable]
+    [isEditable]
   );
   const isEmpty = !latex;
   return /* @__PURE__ */ jsxs(
@@ -102,7 +112,7 @@ function MathBlockView({ editor, node, getPos }) {
             ) : /* @__PURE__ */ jsx("div", { className: "text-destructive text-sm", children: intl.formatMessage(messages.invalid_latex) })
           }
         ),
-        editor.isEditable && !isEmpty && /* @__PURE__ */ jsx(
+        isEditable && !isEmpty && /* @__PURE__ */ jsx(
           IconButton,
           {
             size: "sm",

package/dist/{chunk-MYO2CUDR.mjs → chunk-VF3G2URZ.mjs}

@@ -14,7 +14,8 @@ import {
 import { callout } from "@kopexa/theme";
 import {
   NodeViewContent,
-  NodeViewWrapper
+  NodeViewWrapper,
+  useEditorState
 } from "@tiptap/react";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -35,6 +36,13 @@ function getVariantIcon(variant, 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,
@@ -55,7 +63,7 @@ function CalloutNodeView({ editor, node, getPos }) {
           title && /* @__PURE__ */ jsx("div", { className: styles.title(), children: title }),
           /* @__PURE__ */ jsx(NodeViewContent, { className: "callout-content" })
         ] }),
-        editor.isEditable && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ jsx(
+        isEditable && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ jsx(
           CalloutSettings,
           {
             editor,

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/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 };

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

@@ -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 };

package/dist/context/editor-file-context.js

@@ -0,0 +1,96 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/context/editor-file-context.tsx
+var editor_file_context_exports = {};
+__export(editor_file_context_exports, {
+  EditorFileProvider: () => EditorFileProvider,
+  useEditorFile: () => useEditorFile,
+  useEditorFileRequired: () => useEditorFileRequired
+});
+module.exports = __toCommonJS(editor_file_context_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EditorFileContext = (0, import_react.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 = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const resolve = (0, import_react.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 = (0, import_react.useMemo)(
+    () => ({
+      isAvailable: true,
+      upload: onUpload,
+      resolve,
+      isReference
+    }),
+    [onUpload, resolve, isReference]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorFileContext.Provider, { value, children });
+}
+function useEditorFile() {
+  return (0, import_react.useContext)(EditorFileContext);
+}
+function useEditorFileRequired() {
+  const context = (0, import_react.useContext)(EditorFileContext);
+  if (!context) {
+    throw new Error(
+      "useEditorFileRequired must be used within an EditorFileProvider"
+    );
+  }
+  return context;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EditorFileProvider,
+  useEditorFile,
+  useEditorFileRequired
+});

package/dist/context/editor-file-context.mjs

@@ -0,0 +1,12 @@
+"use client";
+"use client";
+import {
+  EditorFileProvider,
+  useEditorFile,
+  useEditorFileRequired
+} from "../chunk-VRQ6OSAZ.mjs";
+export {
+  EditorFileProvider,
+  useEditorFile,
+  useEditorFileRequired
+};

package/dist/extensions/callout/callout-view.js

@@ -227,6 +227,13 @@ function getVariantIcon(variant, iconClass) {
 function CalloutNodeView({ editor, node, getPos }) {
   const attrs = node.attrs;
   const { variant = "info", title } = attrs;
+  const isEditable = (0, import_react2.useEditorState)({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a;
+      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
+    }
+  });
   const styles = (0, import_react3.useMemo)(
     () => (0, import_theme.callout)({
       variant,
@@ -247,7 +254,7 @@ function CalloutNodeView({ editor, node, getPos }) {
           title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.title(), children: title }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewContent, { className: "callout-content" })
         ] }),
-        editor.isEditable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        isEditable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           CalloutSettings,
           {
             editor,

package/dist/extensions/callout/callout-view.mjs

@@ -3,7 +3,7 @@
 import {
   CalloutNodeView,
   callout_view_default
-} from "../../chunk-MYO2CUDR.mjs";
+} from "../../chunk-VF3G2URZ.mjs";
 import "../../chunk-N4CT5RNC.mjs";
 import "../../chunk-JCV5SEKN.mjs";
 export {