npm - @kerebron/extension-basic-editor - Versions diffs - 0.4.27 → 0.4.29 - Mend

@kerebron/extension-basic-editor 0.4.27 → 0.4.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (242) hide show

package/esm/ExtensionBaseKeymap.d.ts +7 -0
package/esm/ExtensionBaseKeymap.d.ts.map +1 -0
package/esm/ExtensionBaseKeymap.js +56 -0
package/esm/ExtensionBaseKeymap.js.map +1 -0
package/esm/ExtensionBasicCodeEditor.d.ts +11 -0
package/esm/ExtensionBasicCodeEditor.d.ts.map +1 -0
package/esm/ExtensionBasicCodeEditor.js +62 -0
package/esm/ExtensionBasicCodeEditor.js.map +1 -0
package/esm/ExtensionBasicEditor.d.ts +49 -0
package/esm/ExtensionBasicEditor.d.ts.map +1 -0
package/esm/ExtensionBasicEditor.js +95 -0
package/esm/ExtensionBasicEditor.js.map +1 -0
package/esm/ExtensionDropcursor.d.ts +19 -0
package/esm/ExtensionDropcursor.d.ts.map +1 -0
package/esm/ExtensionDropcursor.js +187 -0
package/esm/ExtensionDropcursor.js.map +1 -0
package/esm/ExtensionGapcursor.d.ts +32 -0
package/esm/ExtensionGapcursor.d.ts.map +1 -0
package/esm/ExtensionGapcursor.js +250 -0
package/esm/ExtensionGapcursor.js.map +1 -0
package/esm/ExtensionHistory.d.ts +14 -0
package/esm/ExtensionHistory.d.ts.map +1 -0
package/esm/ExtensionHistory.js +35 -0
package/esm/ExtensionHistory.js.map +1 -0
package/esm/ExtensionHtml.d.ts +15 -0
package/esm/ExtensionHtml.d.ts.map +1 -0
package/esm/ExtensionHtml.js +100 -0
package/esm/ExtensionHtml.js.map +1 -0
package/esm/ExtensionMediaUpload.d.ts +24 -0
package/esm/ExtensionMediaUpload.d.ts.map +1 -0
package/esm/ExtensionMediaUpload.js +168 -0
package/esm/ExtensionMediaUpload.js.map +1 -0
package/esm/ExtensionSelection.d.ts +11 -0
package/esm/ExtensionSelection.d.ts.map +1 -0
package/esm/ExtensionSelection.js +230 -0
package/esm/ExtensionSelection.js.map +1 -0
package/esm/ExtensionTextAlign.d.ts +11 -0
package/esm/ExtensionTextAlign.d.ts.map +1 -0
package/esm/ExtensionTextAlign.js +40 -0
package/esm/ExtensionTextAlign.js.map +1 -0
package/esm/MarkBookmark.d.ts +8 -0
package/esm/MarkBookmark.d.ts.map +1 -0
package/esm/MarkBookmark.js +17 -0
package/esm/MarkBookmark.js.map +1 -0
package/esm/MarkChange.d.ts +8 -0
package/esm/MarkChange.d.ts.map +1 -0
package/esm/MarkChange.js +14 -0
package/esm/MarkChange.js.map +1 -0
package/esm/MarkCode.d.ts +11 -0
package/esm/MarkCode.d.ts.map +1 -0
package/esm/MarkCode.js +24 -0
package/esm/MarkCode.js.map +1 -0
package/esm/MarkHighlight.d.ts +8 -0
package/esm/MarkHighlight.d.ts.map +1 -0
package/esm/MarkHighlight.js +36 -0
package/esm/MarkHighlight.js.map +1 -0
package/esm/MarkItalic.d.ts +11 -0
package/esm/MarkItalic.d.ts.map +1 -0
package/esm/MarkItalic.js +30 -0
package/esm/MarkItalic.js.map +1 -0
package/esm/MarkLink.d.ts +8 -0
package/esm/MarkLink.d.ts.map +1 -0
package/esm/MarkLink.js +30 -0
package/esm/MarkLink.js.map +1 -0
package/esm/MarkStrike.d.ts +11 -0
package/esm/MarkStrike.d.ts.map +1 -0
package/esm/MarkStrike.js +27 -0
package/esm/MarkStrike.js.map +1 -0
package/esm/MarkStrong.d.ts +11 -0
package/esm/MarkStrong.d.ts.map +1 -0
package/esm/MarkStrong.js +39 -0
package/esm/MarkStrong.js.map +1 -0
package/esm/MarkSubscript.d.ts +11 -0
package/esm/MarkSubscript.d.ts.map +1 -0
package/esm/MarkSubscript.js +31 -0
package/esm/MarkSubscript.js.map +1 -0
package/esm/MarkSuperscript.d.ts +11 -0
package/esm/MarkSuperscript.d.ts.map +1 -0
package/esm/MarkSuperscript.js +31 -0
package/esm/MarkSuperscript.js.map +1 -0
package/esm/MarkTextColor.d.ts +8 -0
package/esm/MarkTextColor.d.ts.map +1 -0
package/esm/MarkTextColor.js +28 -0
package/esm/MarkTextColor.js.map +1 -0
package/esm/MarkUnderline.d.ts +11 -0
package/esm/MarkUnderline.d.ts.map +1 -0
package/esm/MarkUnderline.js +34 -0
package/esm/MarkUnderline.js.map +1 -0
package/esm/NodeAside.d.ts +8 -0
package/esm/NodeAside.d.ts.map +1 -0
package/esm/NodeAside.js +17 -0
package/esm/NodeAside.js.map +1 -0
package/esm/NodeBlockquote.d.ts +13 -0
package/esm/NodeBlockquote.d.ts.map +1 -0
package/esm/NodeBlockquote.js +35 -0
package/esm/NodeBlockquote.js.map +1 -0
package/esm/NodeBookmark.d.ts +8 -0
package/esm/NodeBookmark.d.ts.map +1 -0
package/esm/NodeBookmark.js +20 -0
package/esm/NodeBookmark.js.map +1 -0
package/esm/NodeBulletList.d.ts +13 -0
package/esm/NodeBulletList.d.ts.map +1 -0
package/esm/NodeBulletList.js +35 -0
package/esm/NodeBulletList.js.map +1 -0
package/esm/NodeCodeBlock.d.ts +9 -0
package/esm/NodeCodeBlock.d.ts.map +1 -0
package/esm/NodeCodeBlock.js +51 -0
package/esm/NodeCodeBlock.js.map +1 -0
package/esm/NodeDefinitionDesc.d.ts +8 -0
package/esm/NodeDefinitionDesc.d.ts.map +1 -0
package/esm/NodeDefinitionDesc.js +17 -0
package/esm/NodeDefinitionDesc.js.map +1 -0
package/esm/NodeDefinitionList.d.ts +13 -0
package/esm/NodeDefinitionList.d.ts.map +1 -0
package/esm/NodeDefinitionList.js +29 -0
package/esm/NodeDefinitionList.js.map +1 -0
package/esm/NodeDefinitionTerm.d.ts +8 -0
package/esm/NodeDefinitionTerm.d.ts.map +1 -0
package/esm/NodeDefinitionTerm.js +17 -0
package/esm/NodeDefinitionTerm.js.map +1 -0
package/esm/NodeDocument.d.ts +7 -0
package/esm/NodeDocument.d.ts.map +1 -0
package/esm/NodeDocument.js +20 -0
package/esm/NodeDocument.js.map +1 -0
package/esm/NodeDocumentCode.d.ts +7 -0
package/esm/NodeDocumentCode.d.ts.map +1 -0
package/esm/NodeDocumentCode.js +30 -0
package/esm/NodeDocumentCode.js.map +1 -0
package/esm/NodeFrontmatter.d.ts +8 -0
package/esm/NodeFrontmatter.d.ts.map +1 -0
package/esm/NodeFrontmatter.js +17 -0
package/esm/NodeFrontmatter.js.map +1 -0
package/esm/NodeHardBreak.d.ts +14 -0
package/esm/NodeHardBreak.d.ts.map +1 -0
package/esm/NodeHardBreak.js +68 -0
package/esm/NodeHardBreak.js.map +1 -0
package/esm/NodeHeading.d.ts +13 -0
package/esm/NodeHeading.d.ts.map +1 -0
package/esm/NodeHeading.js +50 -0
package/esm/NodeHeading.js.map +1 -0
package/esm/NodeHorizontalRule.d.ts +11 -0
package/esm/NodeHorizontalRule.d.ts.map +1 -0
package/esm/NodeHorizontalRule.js +30 -0
package/esm/NodeHorizontalRule.js.map +1 -0
package/esm/NodeImage.d.ts +8 -0
package/esm/NodeImage.d.ts.map +1 -0
package/esm/NodeImage.js +34 -0
package/esm/NodeImage.js.map +1 -0
package/esm/NodeInlineShortCode.d.ts +11 -0
package/esm/NodeInlineShortCode.d.ts.map +1 -0
package/esm/NodeInlineShortCode.js +40 -0
package/esm/NodeInlineShortCode.js.map +1 -0
package/esm/NodeListItem.d.ts +14 -0
package/esm/NodeListItem.d.ts.map +1 -0
package/esm/NodeListItem.js +202 -0
package/esm/NodeListItem.js.map +1 -0
package/esm/NodeMath.d.ts +8 -0
package/esm/NodeMath.d.ts.map +1 -0
package/esm/NodeMath.js +100 -0
package/esm/NodeMath.js.map +1 -0
package/esm/NodeOrderedList.d.ts +23 -0
package/esm/NodeOrderedList.d.ts.map +1 -0
package/esm/NodeOrderedList.js +53 -0
package/esm/NodeOrderedList.js.map +1 -0
package/esm/NodeParagraph.d.ts +11 -0
package/esm/NodeParagraph.d.ts.map +1 -0
package/esm/NodeParagraph.js +45 -0
package/esm/NodeParagraph.js.map +1 -0
package/esm/NodeTaskItem.d.ts +24 -0
package/esm/NodeTaskItem.d.ts.map +1 -0
package/esm/NodeTaskItem.js +147 -0
package/esm/NodeTaskItem.js.map +1 -0
package/esm/NodeTaskList.d.ts +11 -0
package/esm/NodeTaskList.d.ts.map +1 -0
package/esm/NodeTaskList.js +26 -0
package/esm/NodeTaskList.js.map +1 -0
package/esm/NodeText.d.ts +7 -0
package/esm/NodeText.d.ts.map +1 -0
package/esm/NodeText.js +10 -0
package/esm/NodeText.js.map +1 -0
package/esm/NodeVideo.d.ts +8 -0
package/esm/NodeVideo.d.ts.map +1 -0
package/esm/NodeVideo.js +46 -0
package/esm/NodeVideo.js.map +1 -0
package/esm/package.json +3 -0
package/esm/remote-selection/ExtensionRemoteSelection.d.ts +24 -0
package/esm/remote-selection/ExtensionRemoteSelection.d.ts.map +1 -0
package/esm/remote-selection/ExtensionRemoteSelection.js +23 -0
package/esm/remote-selection/ExtensionRemoteSelection.js.map +1 -0
package/esm/remote-selection/remoteSelectionPlugin.d.ts +25 -0
package/esm/remote-selection/remoteSelectionPlugin.d.ts.map +1 -0
package/esm/remote-selection/remoteSelectionPlugin.js +97 -0
package/esm/remote-selection/remoteSelectionPlugin.js.map +1 -0
package/package.json +6 -3
package/src/ExtensionBaseKeymap.ts +64 -0
package/src/ExtensionBasicCodeEditor.ts +82 -0
package/src/ExtensionBasicEditor.ts +97 -0
package/src/ExtensionDropcursor.ts +221 -0
package/src/ExtensionGapcursor.ts +278 -0
package/src/ExtensionHistory.ts +48 -0
package/src/ExtensionHtml.ts +158 -0
package/src/ExtensionMediaUpload.ts +258 -0
package/src/ExtensionSelection.ts +379 -0
package/src/ExtensionTextAlign.ts +50 -0
package/src/MarkBookmark.ts +20 -0
package/src/MarkChange.ts +17 -0
package/src/MarkCode.ts +35 -0
package/src/MarkHighlight.ts +38 -0
package/src/MarkItalic.ts +41 -0
package/src/MarkLink.ts +32 -0
package/src/MarkStrike.ts +38 -0
package/src/MarkStrong.ts +52 -0
package/src/MarkSubscript.ts +42 -0
package/src/MarkSuperscript.ts +42 -0
package/src/MarkTextColor.ts +29 -0
package/src/MarkUnderline.ts +47 -0
package/src/NodeAside.ts +19 -0
package/src/NodeBlockquote.ts +51 -0
package/src/NodeBookmark.ts +23 -0
package/src/NodeBulletList.ts +51 -0
package/src/NodeCodeBlock.ts +60 -0
package/src/NodeDefinitionDesc.ts +19 -0
package/src/NodeDefinitionList.ts +46 -0
package/src/NodeDefinitionTerm.ts +19 -0
package/src/NodeDocument.ts +22 -0
package/src/NodeDocumentCode.ts +33 -0
package/src/NodeFrontmatter.ts +19 -0
package/src/NodeHardBreak.ts +92 -0
package/src/NodeHeading.ts +76 -0
package/src/NodeHorizontalRule.ts +43 -0
package/src/NodeImage.ts +36 -0
package/src/NodeInlineShortCode.ts +55 -0
package/src/NodeListItem.ts +320 -0
package/src/NodeMath.ts +109 -0
package/src/NodeOrderedList.ts +79 -0
package/src/NodeParagraph.ts +60 -0
package/src/NodeTaskItem.ts +190 -0
package/src/NodeTaskList.ts +38 -0
package/src/NodeText.ts +12 -0
package/src/NodeVideo.ts +44 -0
package/src/remote-selection/ExtensionRemoteSelection.ts +45 -0
package/src/remote-selection/remoteSelectionPlugin.ts +157 -0

package/src/ExtensionHistory.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import { history, redo, undo } from 'prosemirror-history';
+import { Plugin } from 'prosemirror-state';
+import { type CoreEditor, Extension } from '@kerebron/editor';
+import {
+  type Command,
+  type CommandFactories,
+  type CommandShortcuts,
+} from '@kerebron/editor/commands';
+export class ExtensionHistory extends Extension {
+  name = 'history';
+  options = {
+    depth: 100,
+    newGroupDelay: 500,
+  };
+  override getCommandFactories(editor: CoreEditor): Partial<CommandFactories> {
+    return {
+      'undo': () => undo,
+      'redo': () => redo,
+    };
+  }
+  override getKeyboardShortcuts(): Partial<CommandShortcuts> {
+    // https://stackoverflow.com/a/73619128
+    const mac = typeof navigator != 'undefined'
+      ? /Mac|iP(hone|[oa]d)/.test(navigator?.platform)
+      : false;
+    const shortcuts = {
+      'Mod-z': 'undo',
+      'Mod-y': 'redo',
+    };
+    if (!mac) {
+      shortcuts['Mod-y'] = 'redo';
+    }
+    return shortcuts;
+  }
+  override getProseMirrorPlugins(): Plugin[] {
+    return [
+      history(this.options),
+    ];
+  }
+}

package/src/ExtensionHtml.ts ADDED Viewed

@@ -0,0 +1,158 @@
+import {
+  DOMParser,
+  DOMSerializer,
+  Fragment,
+  Node,
+  type ParseOptions,
+  Schema,
+} from 'prosemirror-model';
+import { type Converter, type CoreEditor, Extension } from '@kerebron/editor';
+export type CreateNodeFromContentOptions = {
+  parseOptions?: ParseOptions;
+  errorOnInvalidContent?: boolean;
+};
+export function getHTMLFromFragment(
+  fragment: Fragment,
+  schema: Schema,
+): string {
+  const document = globalThis.document;
+  const documentFragment = DOMSerializer.fromSchema(schema).serializeFragment(
+    fragment,
+    { document },
+  );
+  const temporaryDocument = document.implementation.createHTMLDocument();
+  const container = temporaryDocument.createElement('div');
+  container.appendChild(documentFragment);
+  return container.innerHTML;
+}
+const removeWhitespaces = (node: HTMLElement) => {
+  const children = node.childNodes;
+  for (let i = children.length - 1; i >= 0; i -= 1) {
+    const child = children[i];
+    if (
+      child.nodeType === 3 && child.nodeValue &&
+      /^(\n\s\s|\n)$/.test(child.nodeValue)
+    ) {
+      node.removeChild(child);
+    } else if (child.nodeType === 1) {
+      removeWhitespaces(child as HTMLElement);
+    }
+  }
+  return node;
+};
+export function elementFromString(value: string): HTMLElement {
+  // add a wrapper to preserve leading and trailing whitespace
+  const wrappedValue = `<html lang="en"><body>${value}</body></html>`;
+  const body =
+    new globalThis.DOMParser().parseFromString(wrappedValue, 'text/html').body;
+  return removeWhitespaces(body);
+}
+function prepareContentCheckSchema(schema: Schema): Schema {
+  const contentCheckSchema = new Schema({
+    topNode: schema.spec.topNode,
+    marks: schema.spec.marks,
+    // Prosemirror's schemas are executed such that: the last to execute, matches last
+    // This means that we can add a catch-all node at the end of the schema to catch any content that we don't know how to handle
+    nodes: schema.spec.nodes.append({
+      __unknown__catch__all__node: {
+        content: 'inline*',
+        group: 'block',
+        parseDOM: [
+          {
+            tag: '*',
+            getAttrs: (e) => {
+              // Try to stringify the element for a more helpful error message
+              const invalidContent = typeof e === 'string' ? e : e.outerHTML;
+              throw new Error('Invalid HTML content', {
+                cause: new Error(`Invalid element found: ${invalidContent}`),
+              });
+            },
+          },
+        ],
+      },
+    }),
+  });
+  return contentCheckSchema;
+}
+export function createNodeFromHTML(
+  content: string,
+  schema: Schema,
+  options?: CreateNodeFromContentOptions,
+): Node {
+  options = {
+    parseOptions: {},
+    ...options,
+  };
+  if (options.errorOnInvalidContent) {
+    const contentCheckSchema = prepareContentCheckSchema(schema);
+    DOMParser.fromSchema(contentCheckSchema).parse(
+      elementFromString(content),
+      options.parseOptions,
+    );
+  }
+  const parser = DOMParser.fromSchema(schema);
+  return parser.parse(elementFromString(content), options.parseOptions);
+}
+export function createFragmentFromHTML(
+  content: string,
+  schema: Schema,
+  options?: CreateNodeFromContentOptions,
+): Fragment {
+  options = {
+    parseOptions: {},
+    ...options,
+  };
+  if (options.errorOnInvalidContent) {
+    const contentCheckSchema = prepareContentCheckSchema(schema);
+    DOMParser.fromSchema(contentCheckSchema).parseSlice(
+      elementFromString(content),
+      options.parseOptions,
+    );
+  }
+  const parser = DOMParser.fromSchema(schema);
+  return parser.parseSlice(elementFromString(content), options.parseOptions)
+    .content;
+}
+export class ExtensionHtml extends Extension {
+  name = 'html';
+  override getConverters(
+    editor: CoreEditor,
+    schema: Schema,
+  ): Record<string, Converter> {
+    return {
+      'text/html': {
+        fromDoc: async (document: Node): Promise<Uint8Array> => {
+          const html = getHTMLFromFragment(document.content, editor.schema);
+          return new TextEncoder().encode(html);
+        },
+        toDoc: async (buffer: Uint8Array): Promise<Node> => {
+          const html = new TextDecoder().decode(buffer);
+          return createNodeFromHTML(html, editor.schema);
+        },
+      },
+    };
+  }
+}

package/src/ExtensionMediaUpload.ts ADDED Viewed

@@ -0,0 +1,258 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { Extension } from '@kerebron/editor';
+export interface MediaUploadOptions {
+  /** Maximum file size in bytes (default: 10MB for images) */
+  maxFileSize?: number;
+  /** Maximum file size for videos (default: 50MB) */
+  maxVideoFileSize?: number;
+  /** Allowed image MIME types */
+  allowedImageTypes?: string[];
+  /** Allowed video MIME types */
+  allowedVideoTypes?: string[];
+  /** Use object URLs for videos instead of base64 (default: true) */
+  useObjectURLForVideos?: boolean;
+  /** Custom upload handler. Returns the URL of uploaded media. */
+  uploadHandler?: (file: File) => Promise<string>;
+}
+const mediaUploadKey = new PluginKey('mediaUpload');
+/** Convert a File to a base64 data URL */
+function fileToDataURL(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+/** Convert a File to an object URL (better for videos) */
+function fileToObjectURL(file: File): string {
+  return URL.createObjectURL(file);
+}
+/** Check if a file is an image */
+function isImage(file: File, allowedTypes: string[]): boolean {
+  return allowedTypes.some((type) => file.type.match(type));
+}
+/** Check if a file is a video */
+function isVideo(file: File, allowedTypes: string[]): boolean {
+  return allowedTypes.some((type) => file.type.match(type));
+}
+/** Insert an image into the editor at the given position */
+function insertImage(
+  view: EditorView,
+  pos: number,
+  src: string,
+  alt?: string,
+  title?: string,
+) {
+  const { schema } = view.state;
+  const imageType = schema.nodes.image;
+  if (!imageType) {
+    console.warn('Image node type not found in schema');
+    return;
+  }
+  const node = imageType.create({ src, alt, title });
+  const transaction = view.state.tr.insert(pos, node);
+  view.dispatch(transaction);
+}
+/** Insert a video into the editor at the given position */
+function insertVideo(
+  view: EditorView,
+  pos: number,
+  src: string,
+  title?: string,
+  width?: string,
+  height?: string,
+) {
+  const { schema } = view.state;
+  const videoType = schema.nodes.video;
+  if (!videoType) {
+    console.warn('Video node type not found in schema');
+    return;
+  }
+  const node = videoType.create({ src, title, width, height, controls: true });
+  const transaction = view.state.tr.insert(pos, node);
+  view.dispatch(transaction);
+}
+/** Handle media files (images and videos) from drop or paste events */
+async function handleMediaFiles(
+  view: EditorView,
+  files: File[],
+  pos: number,
+  options: MediaUploadOptions,
+): Promise<void> {
+  const {
+    maxFileSize = 10 * 1024 * 1024, // 10MB for images
+    maxVideoFileSize = 50 * 1024 * 1024, // 50MB for videos
+    allowedImageTypes = ['^image/'],
+    allowedVideoTypes = ['^video/'],
+    uploadHandler,
+  } = options;
+  for (const file of files) {
+    const isImageFile = isImage(file, allowedImageTypes);
+    const isVideoFile = isVideo(file, allowedVideoTypes);
+    // Skip if not an image or video
+    if (!isImageFile && !isVideoFile) {
+      continue;
+    }
+    // Check file size
+    const sizeLimit = isVideoFile ? maxVideoFileSize : maxFileSize;
+    if (file.size > sizeLimit) {
+      console.warn(
+        `${isVideoFile ? 'Video' : 'Image'} file "${file.name}" is too large (${
+          (file.size / 1024 / 1024).toFixed(2)
+        }MB). Maximum size is ${(sizeLimit / 1024 / 1024).toFixed(2)}MB.`,
+      );
+      continue;
+    }
+    try {
+      // Upload or convert to data URL
+      console.log(
+        `Processing ${isVideoFile ? 'video' : 'image'}: ${file.name} (${
+          (file.size / 1024 / 1024).toFixed(2)
+        }MB, ${file.type})`,
+      );
+      let src: string;
+      if (uploadHandler) {
+        src = await uploadHandler(file);
+      } else if (isVideoFile && options.useObjectURLForVideos !== false) {
+        // Use object URL for videos (better performance, doesn't bloat the document)
+        src = fileToObjectURL(file);
+        console.log('Using object URL for video:', src);
+      } else {
+        // Use base64 data URL
+        src = await fileToDataURL(file);
+        console.log(
+          `${
+            isVideoFile ? 'Video' : 'Image'
+          } converted to data URL, length: ${src.length} characters`,
+        );
+      }
+      // Insert the media
+      if (isVideoFile) {
+        insertVideo(view, pos, src, file.name);
+        console.log('Video inserted into editor');
+      } else {
+        insertImage(view, pos, src, file.name);
+        console.log('Image inserted into editor');
+      }
+      // Increment position for next media
+      pos += 1;
+    } catch (error) {
+      console.error(
+        `Failed to process ${isVideoFile ? 'video' : 'image'} "${file.name}":`,
+        error,
+      );
+    }
+  }
+}
+/** Create the media upload plugin */
+function createMediaUploadPlugin(options: MediaUploadOptions = {}): Plugin {
+  return new Plugin({
+    key: mediaUploadKey,
+    props: {
+      /** Handle file drops */
+      handleDrop(view, event, slice, moved) {
+        // If content was moved from within the editor, let the default handler deal with it
+        if (moved) return false;
+        const files = Array.from(event.dataTransfer?.files || []);
+        if (files.length === 0) return false;
+        // Check if any files are images or videos
+        const {
+          allowedImageTypes = ['^image/'],
+          allowedVideoTypes = ['^video/'],
+        } = options;
+        const hasMedia = files.some((file) =>
+          isImage(file, allowedImageTypes) || isVideo(file, allowedVideoTypes)
+        );
+        if (!hasMedia) return false;
+        // Prevent default drop behavior
+        event.preventDefault();
+        // Get drop position
+        const coords = { left: event.clientX, top: event.clientY };
+        const pos = view.posAtCoords(coords);
+        if (!pos) return false;
+        // Handle the media files
+        handleMediaFiles(view, files, pos.pos, options);
+        return true;
+      },
+      /** Handle paste events with images (videos typically don't paste) */
+      handlePaste(view, event, slice) {
+        const items = Array.from(event.clipboardData?.items || []);
+        const imageItems = items.filter((item) =>
+          item.type.startsWith('image/')
+        );
+        if (imageItems.length === 0) return false;
+        // Prevent default paste behavior
+        event.preventDefault();
+        // Convert clipboard items to files
+        const files: File[] = [];
+        for (const item of imageItems) {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+        if (files.length === 0) return false;
+        // Get current cursor position
+        const { from } = view.state.selection;
+        // Handle the image files
+        handleMediaFiles(view, files, from, options);
+        return true;
+      },
+    },
+  });
+}
+/** Extension that adds media upload support via drag & drop and paste */
+export class ExtensionMediaUpload extends Extension {
+  name = 'mediaUpload';
+  constructor(protected override config: Partial<MediaUploadOptions> = {}) {
+    super(config);
+  }
+  override getProseMirrorPlugins(): Plugin[] {
+    return [createMediaUploadPlugin(this.config)];
+  }
+}