@pixerate/editor 0.5.1 → 0.6.1

package/dist/extensions/index.d.cts

@@ -8,6 +8,8 @@ import { MentionOptions as MentionOptions$1 } from '@tiptap/extension-mention';
 import { SuggestionOptions } from '@tiptap/suggestion';
 import { MarkdownOptions } from 'tiptap-markdown';
 export { MarkdownOptions } from 'tiptap-markdown';
+import { ImageOptions as ImageOptions$1 } from '@tiptap/extension-image';
+import { PluginKey } from '@tiptap/pm/state';
 
 interface GradientTextOptions {
     templateColorMap: Map<string, ColorGradient>;
@@ -100,6 +102,52 @@ declare function createMentionExtension(options?: Partial<MentionOptions>): _tip
  */
 declare const Markdown: any;
 
+interface ImageOptions extends Partial<ImageOptions$1> {
+    /**
+     * Custom upload handler called when an image is pasted or dropped.
+     * Resolves to the uploaded image URL string.
+     */
+    upload?: (file: File) => Promise<string> | string;
+    /**
+     * Callback invoked if the upload handler throws or rejects, or if an image
+     * exceeds maxBase64Size when no upload handler is configured.
+     */
+    onUploadError?: (error: Error, file: File) => void;
+    /**
+     * Maximum allowed file size (in bytes) when embedding images as base64 data URLs
+     * without an upload handler. Defaults to 65536 (64 KB).
+     * Files larger than this will be rejected to avoid memory bloat and prompt/stream saturation.
+     */
+    maxBase64Size?: number;
+    /**
+     * Whether to enable automatic image pasting from clipboard. Defaults to true.
+     */
+    enablePaste?: boolean;
+    /**
+     * Whether to enable automatic image drop. Defaults to true.
+     */
+    enableDrop?: boolean;
+}
+declare const imagePastePluginKey: PluginKey<any>;
+/**
+ * Inserts an image node into the editor view at the current selection.
+ */
+declare function insertImageNode(view: any, src: string, alt?: string): void;
+/**
+ * Updates an existing image node's src attribute across document positions.
+ */
+declare function updateImageSrc(view: any, oldSrc: string, newSrc: string): void;
+/**
+ * Removes an existing image node matching src attribute across document positions.
+ */
+declare function removeImageNode(view: any, src: string): void;
+/**
+ * Handles inserting a pasted or dropped image file, supporting both async upload
+ * handlers and direct base64/object-URL fallbacks.
+ */
+declare function handleImageInsertion(view: any, file: File, options: ImageOptions): void;
+declare const Image: any;
+
 interface RichTextPresetOptions {
     placeholder?: string | ((props: {
         node: any;
@@ -111,10 +159,11 @@ interface RichTextPresetOptions {
     headingLevels?: (1 | 2 | 3 | 4 | 5 | 6)[];
     mention?: MentionOptions | boolean;
     markdown?: MarkdownOptions | boolean;
+    image?: ImageOptions | boolean;
 }
 /**
  * Creates a standard rich-text extensions bundle with full formatting support.
  */
 declare function createRichTextPreset(options?: RichTextPresetOptions): Extensions;
 
-export { ColorHighlighter, FontSize, GradientText, type GradientTextOptions, LoadingNode, Markdown, Mention, type MentionEntity, type MentionOptions, type RichTextPresetOptions, type SlashCommandMatchData, SlashCommands, type SlashCommandsOptions, SmilieReplacer, TemplateSuggestions, type TemplateSuggestionsOptions, createMentionExtension, createRichTextPreset, findHexColors };
+export { ColorHighlighter, FontSize, GradientText, type GradientTextOptions, Image, type ImageOptions, LoadingNode, Markdown, Mention, type MentionEntity, type MentionOptions, type RichTextPresetOptions, type SlashCommandMatchData, SlashCommands, type SlashCommandsOptions, SmilieReplacer, TemplateSuggestions, type TemplateSuggestionsOptions, createMentionExtension, createRichTextPreset, findHexColors, handleImageInsertion, imagePastePluginKey, insertImageNode, removeImageNode, updateImageSrc };

package/dist/extensions/index.d.ts

@@ -8,6 +8,8 @@ import { MentionOptions as MentionOptions$1 } from '@tiptap/extension-mention';
 import { SuggestionOptions } from '@tiptap/suggestion';
 import { MarkdownOptions } from 'tiptap-markdown';
 export { MarkdownOptions } from 'tiptap-markdown';
+import { ImageOptions as ImageOptions$1 } from '@tiptap/extension-image';
+import { PluginKey } from '@tiptap/pm/state';
 
 interface GradientTextOptions {
     templateColorMap: Map<string, ColorGradient>;
@@ -100,6 +102,52 @@ declare function createMentionExtension(options?: Partial<MentionOptions>): _tip
  */
 declare const Markdown: any;
 
+interface ImageOptions extends Partial<ImageOptions$1> {
+    /**
+     * Custom upload handler called when an image is pasted or dropped.
+     * Resolves to the uploaded image URL string.
+     */
+    upload?: (file: File) => Promise<string> | string;
+    /**
+     * Callback invoked if the upload handler throws or rejects, or if an image
+     * exceeds maxBase64Size when no upload handler is configured.
+     */
+    onUploadError?: (error: Error, file: File) => void;
+    /**
+     * Maximum allowed file size (in bytes) when embedding images as base64 data URLs
+     * without an upload handler. Defaults to 65536 (64 KB).
+     * Files larger than this will be rejected to avoid memory bloat and prompt/stream saturation.
+     */
+    maxBase64Size?: number;
+    /**
+     * Whether to enable automatic image pasting from clipboard. Defaults to true.
+     */
+    enablePaste?: boolean;
+    /**
+     * Whether to enable automatic image drop. Defaults to true.
+     */
+    enableDrop?: boolean;
+}
+declare const imagePastePluginKey: PluginKey<any>;
+/**
+ * Inserts an image node into the editor view at the current selection.
+ */
+declare function insertImageNode(view: any, src: string, alt?: string): void;
+/**
+ * Updates an existing image node's src attribute across document positions.
+ */
+declare function updateImageSrc(view: any, oldSrc: string, newSrc: string): void;
+/**
+ * Removes an existing image node matching src attribute across document positions.
+ */
+declare function removeImageNode(view: any, src: string): void;
+/**
+ * Handles inserting a pasted or dropped image file, supporting both async upload
+ * handlers and direct base64/object-URL fallbacks.
+ */
+declare function handleImageInsertion(view: any, file: File, options: ImageOptions): void;
+declare const Image: any;
+
 interface RichTextPresetOptions {
     placeholder?: string | ((props: {
         node: any;
@@ -111,10 +159,11 @@ interface RichTextPresetOptions {
     headingLevels?: (1 | 2 | 3 | 4 | 5 | 6)[];
     mention?: MentionOptions | boolean;
     markdown?: MarkdownOptions | boolean;
+    image?: ImageOptions | boolean;
 }
 /**
  * Creates a standard rich-text extensions bundle with full formatting support.
  */
 declare function createRichTextPreset(options?: RichTextPresetOptions): Extensions;
 
-export { ColorHighlighter, FontSize, GradientText, type GradientTextOptions, LoadingNode, Markdown, Mention, type MentionEntity, type MentionOptions, type RichTextPresetOptions, type SlashCommandMatchData, SlashCommands, type SlashCommandsOptions, SmilieReplacer, TemplateSuggestions, type TemplateSuggestionsOptions, createMentionExtension, createRichTextPreset, findHexColors };
+export { ColorHighlighter, FontSize, GradientText, type GradientTextOptions, Image, type ImageOptions, LoadingNode, Markdown, Mention, type MentionEntity, type MentionOptions, type RichTextPresetOptions, type SlashCommandMatchData, SlashCommands, type SlashCommandsOptions, SmilieReplacer, TemplateSuggestions, type TemplateSuggestionsOptions, createMentionExtension, createRichTextPreset, findHexColors, handleImageInsertion, imagePastePluginKey, insertImageNode, removeImageNode, updateImageSrc };

package/dist/extensions/index.js

@@ -1552,20 +1552,183 @@ var Markdown = Extension6.create({
 var resolveExt = (mod, name) => mod?.[name] || mod?.default?.[name] || mod?.default?.default || mod?.default || mod;
 var Markdown2 = resolveExt(Markdown, "Markdown");
 
-// src/extensions/rich-text-preset.ts
+// src/extensions/image.ts
+import * as _Image from "@tiptap/extension-image";
+import { Plugin as Plugin5, PluginKey as PluginKey2 } from "@tiptap/pm/state";
 var resolveExt2 = (mod, name) => mod?.[name] || mod?.default?.[name] || mod?.default?.default || mod?.default || mod;
-var StarterKit = resolveExt2(_StarterKit, "StarterKit");
-var Color = resolveExt2(_Color, "Color");
-var Highlight = resolveExt2(_Highlight, "Highlight");
-var Link2 = resolveExt2(_Link, "Link");
-var TaskList2 = resolveExt2(_TaskList, "TaskList");
-var TaskItem2 = resolveExt2(_TaskItem, "TaskItem");
-var TextAlign = resolveExt2(_TextAlign, "TextAlign");
-var TextStyle = resolveExt2(_TextStyle, "TextStyle");
-var Typography = resolveExt2(_Typography, "Typography");
-var Underline = resolveExt2(_Underline, "Underline");
-var Placeholder = resolveExt2(_Placeholder, "Placeholder");
-var CharacterCount = resolveExt2(_CharacterCount, "CharacterCount");
+var BaseImage = resolveExt2(_Image, "Image");
+var imagePastePluginKey = new PluginKey2("imagePasteHandler");
+function insertImageNode(view, src, alt) {
+  const { schema } = view.state;
+  const imageType = schema.nodes.image;
+  if (!imageType) return;
+  const node = imageType.create({ src, alt: alt || "" });
+  const tr = view.state.tr.replaceSelectionWith(node);
+  view.dispatch(tr);
+}
+function updateImageSrc(view, oldSrc, newSrc) {
+  const { doc } = view.state;
+  let foundPos = null;
+  let foundAttrs = null;
+  doc.descendants((node, pos) => {
+    if (node.type.name === "image" && node.attrs.src === oldSrc) {
+      foundPos = pos;
+      foundAttrs = node.attrs;
+      return false;
+    }
+  });
+  if (foundPos !== null && foundAttrs) {
+    const tr = view.state.tr.setNodeMarkup(foundPos, void 0, {
+      ...foundAttrs,
+      src: newSrc
+    });
+    view.dispatch(tr);
+  }
+}
+function removeImageNode(view, src) {
+  const { doc } = view.state;
+  let foundPos = null;
+  let nodeSize = 0;
+  doc.descendants((node, pos) => {
+    if (node.type.name === "image" && node.attrs.src === src) {
+      foundPos = pos;
+      nodeSize = node.nodeSize;
+      return false;
+    }
+  });
+  if (foundPos !== null) {
+    const tr = view.state.tr.delete(foundPos, foundPos + nodeSize);
+    view.dispatch(tr);
+  }
+}
+function handleImageInsertion(view, file, options) {
+  if (typeof options.upload === "function") {
+    const hasObjectUrl = typeof URL !== "undefined" && typeof URL.createObjectURL === "function";
+    const tempUrl = hasObjectUrl ? URL.createObjectURL(file) : null;
+    if (tempUrl) {
+      insertImageNode(view, tempUrl, file.name);
+    }
+    Promise.resolve(options.upload(file)).then((uploadedUrl) => {
+      if (!uploadedUrl) {
+        throw new Error("Upload handler returned empty URL");
+      }
+      if (tempUrl) {
+        updateImageSrc(view, tempUrl, uploadedUrl);
+        if (typeof URL.revokeObjectURL === "function") {
+          URL.revokeObjectURL(tempUrl);
+        }
+      } else {
+        insertImageNode(view, uploadedUrl, file.name);
+      }
+    }).catch((err) => {
+      const error = err instanceof Error ? err : new Error(String(err));
+      console.error("Failed to upload pasted image:", error);
+      if (tempUrl) {
+        removeImageNode(view, tempUrl);
+        if (typeof URL.revokeObjectURL === "function") {
+          URL.revokeObjectURL(tempUrl);
+        }
+      }
+      if (typeof options.onUploadError === "function") {
+        options.onUploadError(error, file);
+      }
+    });
+  } else if (options.allowBase64 !== false) {
+    const maxBase64Size = options.maxBase64Size ?? 65536;
+    if (file.size > maxBase64Size) {
+      const err = new Error(
+        `Image size (${Math.round(file.size / 1024)}KB) exceeds maxBase64Size (${Math.round(
+          maxBase64Size / 1024
+        )}KB). Provide an upload handler to support large images.`
+      );
+      console.warn(`[Editor] ${err.message}`);
+      if (typeof options.onUploadError === "function") {
+        options.onUploadError(err, file);
+      }
+      return;
+    }
+    if (typeof FileReader !== "undefined") {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const src = reader.result;
+        if (src) {
+          insertImageNode(view, src, file.name);
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+}
+var Image2 = BaseImage.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      allowBase64: true,
+      maxBase64Size: 65536,
+      enablePaste: true,
+      enableDrop: true,
+      upload: void 0,
+      onUploadError: void 0,
+      HTMLAttributes: {
+        class: "rounded-md max-w-full h-auto my-2"
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const parentPlugins = this.parent?.() || [];
+    const options = this.options;
+    if (!options.enablePaste && !options.enableDrop) {
+      return parentPlugins;
+    }
+    const pastePlugin = new Plugin5({
+      key: imagePastePluginKey,
+      props: {
+        handlePaste(view, event) {
+          if (!options.enablePaste) return false;
+          const items = Array.from(event.clipboardData?.items || []);
+          const imageItems = items.filter(
+            (item) => item.kind === "file" && item.type.startsWith("image/")
+          );
+          if (imageItems.length === 0) return false;
+          event.preventDefault();
+          for (const item of imageItems) {
+            const file = item.getAsFile();
+            if (!file) continue;
+            handleImageInsertion(view, file, options);
+          }
+          return true;
+        },
+        handleDrop(view, event) {
+          if (!options.enableDrop) return false;
+          const files = Array.from(event.dataTransfer?.files || []);
+          const imageFiles = files.filter((f) => f.type.startsWith("image/"));
+          if (imageFiles.length === 0) return false;
+          event.preventDefault();
+          for (const file of imageFiles) {
+            handleImageInsertion(view, file, options);
+          }
+          return true;
+        }
+      }
+    });
+    return [...parentPlugins, pastePlugin];
+  }
+});
+
+// src/extensions/rich-text-preset.ts
+var resolveExt3 = (mod, name) => mod?.[name] || mod?.default?.[name] || mod?.default?.default || mod?.default || mod;
+var StarterKit = resolveExt3(_StarterKit, "StarterKit");
+var Color = resolveExt3(_Color, "Color");
+var Highlight = resolveExt3(_Highlight, "Highlight");
+var Link2 = resolveExt3(_Link, "Link");
+var TaskList2 = resolveExt3(_TaskList, "TaskList");
+var TaskItem2 = resolveExt3(_TaskItem, "TaskItem");
+var TextAlign = resolveExt3(_TextAlign, "TextAlign");
+var TextStyle = resolveExt3(_TextStyle, "TextStyle");
+var Typography = resolveExt3(_Typography, "Typography");
+var Underline = resolveExt3(_Underline, "Underline");
+var Placeholder = resolveExt3(_Placeholder, "Placeholder");
+var CharacterCount = resolveExt3(_CharacterCount, "CharacterCount");
 function createRichTextPreset(options = {}) {
   const {
     placeholder = "Start typing...",
@@ -1687,12 +1850,25 @@ function createRichTextPreset(options = {}) {
       })
     );
   }
+  if (options.image !== false) {
+    const imageConfig = typeof options.image === "object" ? options.image : {};
+    extensions2.push(
+      Image2.configure({
+        HTMLAttributes: {
+          class: "rounded-md max-w-full h-auto my-2",
+          ...imageConfig.HTMLAttributes || {}
+        },
+        ...imageConfig
+      })
+    );
+  }
   return extensions2;
 }
 export {
   ColorHighlighter,
   FontSize,
   GradientText,
+  Image2 as Image,
   LoadingNode,
   Markdown2 as Markdown,
   Mention,
@@ -1701,6 +1877,11 @@ export {
   TemplateSuggestions,
   createMentionExtension,
   createRichTextPreset,
-  findHexColors
+  findHexColors,
+  handleImageInsertion,
+  imagePastePluginKey,
+  insertImageNode,
+  removeImageNode,
+  updateImageSrc
 };
 //# sourceMappingURL=index.js.map