@pixerate/editor 0.5.1 → 0.6.1

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import { T as Token } from './tokens-7kRTEtPb.cjs';
 export { C as ColorGradient, I as INSTRUCTION_REGEX, a as TEMPLATE_REGEX, b as Template, c as TemplateVersion, d as TokenType, V as VARIABLE_REGEX, i as instructionRegex, t as templateRegex, v as variableRegex } from './tokens-7kRTEtPb.cjs';
 export { ResolveTemplatesOptions, SourceMapSegment, extractInstructionNames, extractTemplateNames, extractVariableNames, getLatestVersion, mapRawOffsetToResolved, mapResolvedOffsetToRaw, resolveTemplates, resolveTemplatesWithMapping, resolveVariables, tokenizePrompt } from './grammar/index.cjs';
-export { ColorHighlighter, FontSize, GradientText, GradientTextOptions, LoadingNode, Markdown, Mention, MentionEntity, MentionOptions, RichTextPresetOptions, SlashCommandMatchData, SlashCommands, SlashCommandsOptions, SmilieReplacer, TemplateSuggestions, TemplateSuggestionsOptions, createMentionExtension, createRichTextPreset, findHexColors } from './extensions/index.cjs';
+export { ColorHighlighter, FontSize, GradientText, GradientTextOptions, Image, ImageOptions, LoadingNode, Markdown, Mention, MentionEntity, MentionOptions, RichTextPresetOptions, SlashCommandMatchData, SlashCommands, SlashCommandsOptions, SmilieReplacer, TemplateSuggestions, TemplateSuggestionsOptions, createMentionExtension, createRichTextPreset, findHexColors, handleImageInsertion, imagePastePluginKey, insertImageNode, removeImageNode, updateImageSrc } from './extensions/index.cjs';
 export { ExtractedMention, escapeHtml, extractMentionsFromDoc, getEditorMarkdown, getEditorText, htmlToPlainText, markdownToTipTapHtml, plainTextToTipTapHtml } from './serializers/index.cjs';
 import { Editor, EditorOptions, Content, Extensions } from '@tiptap/core';
 export { Content, Editor, EditorOptions, Extensions } from '@tiptap/core';
@@ -11,6 +11,8 @@ import '@tiptap/pm/view';
 import '@tiptap/pm/model';
 import '@tiptap/extension-mention';
 import '@tiptap/suggestion';
+import '@tiptap/extension-image';
+import '@tiptap/pm/state';
 
 interface EditorControllerOptions extends Partial<Omit<EditorOptions, "element" | "content">> {
     element?: Element | HTMLElement | null;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { T as Token } from './tokens-7kRTEtPb.js';
 export { C as ColorGradient, I as INSTRUCTION_REGEX, a as TEMPLATE_REGEX, b as Template, c as TemplateVersion, d as TokenType, V as VARIABLE_REGEX, i as instructionRegex, t as templateRegex, v as variableRegex } from './tokens-7kRTEtPb.js';
 export { ResolveTemplatesOptions, SourceMapSegment, extractInstructionNames, extractTemplateNames, extractVariableNames, getLatestVersion, mapRawOffsetToResolved, mapResolvedOffsetToRaw, resolveTemplates, resolveTemplatesWithMapping, resolveVariables, tokenizePrompt } from './grammar/index.js';
-export { ColorHighlighter, FontSize, GradientText, GradientTextOptions, LoadingNode, Markdown, Mention, MentionEntity, MentionOptions, RichTextPresetOptions, SlashCommandMatchData, SlashCommands, SlashCommandsOptions, SmilieReplacer, TemplateSuggestions, TemplateSuggestionsOptions, createMentionExtension, createRichTextPreset, findHexColors } from './extensions/index.js';
+export { ColorHighlighter, FontSize, GradientText, GradientTextOptions, Image, ImageOptions, LoadingNode, Markdown, Mention, MentionEntity, MentionOptions, RichTextPresetOptions, SlashCommandMatchData, SlashCommands, SlashCommandsOptions, SmilieReplacer, TemplateSuggestions, TemplateSuggestionsOptions, createMentionExtension, createRichTextPreset, findHexColors, handleImageInsertion, imagePastePluginKey, insertImageNode, removeImageNode, updateImageSrc } from './extensions/index.js';
 export { ExtractedMention, escapeHtml, extractMentionsFromDoc, getEditorMarkdown, getEditorText, htmlToPlainText, markdownToTipTapHtml, plainTextToTipTapHtml } from './serializers/index.js';
 import { Editor, EditorOptions, Content, Extensions } from '@tiptap/core';
 export { Content, Editor, EditorOptions, Extensions } from '@tiptap/core';
@@ -11,6 +11,8 @@ import '@tiptap/pm/view';
 import '@tiptap/pm/model';
 import '@tiptap/extension-mention';
 import '@tiptap/suggestion';
+import '@tiptap/extension-image';
+import '@tiptap/pm/state';
 
 interface EditorControllerOptions extends Partial<Omit<EditorOptions, "element" | "content">> {
     element?: Element | HTMLElement | null;

package/dist/index.js

@@ -1886,20 +1886,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...",
@@ -2021,6 +2184,18 @@ 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;
 }
 
@@ -3585,6 +3760,7 @@ export {
   FormulaParser,
   GradientText,
   INSTRUCTION_REGEX,
+  Image2 as Image,
   LoadingNode,
   Markdown2 as Markdown,
   Mention,
@@ -3608,8 +3784,11 @@ export {
   getEditorMarkdown,
   getEditorText,
   getLatestVersion,
+  handleImageInsertion,
   htmlToPlainText,
+  imagePastePluginKey,
   indexToColName,
+  insertImageNode,
   instructionRegex,
   mapRawOffsetToResolved,
   mapResolvedOffsetToRaw,
@@ -3618,12 +3797,14 @@ export {
   parseFormula,
   parseRange,
   plainTextToTipTapHtml,
+  removeImageNode,
   resolveTemplates,
   resolveTemplatesWithMapping,
   resolveVariables,
   templateRegex,
   tokenizeFormula,
   tokenizePrompt,
+  updateImageSrc,
   variableRegex
 };
 //# sourceMappingURL=index.js.map