@kerebron/extension-basic-editor 0.2.0 → 0.4.1

package/esm/extension-basic-editor/src/ExtensionGapcursor.js

@@ -1,5 +1,243 @@
-import { gapCursor } from 'prosemirror-gapcursor';
+import { NodeSelection, Plugin, Selection, TextSelection, } from 'prosemirror-state';
+import { Fragment, Slice } from 'prosemirror-model';
+import { Decoration, DecorationSet } from 'prosemirror-view';
 import { Extension } from '../../editor/src/mod.js';
+import { keydownHandler } from '../../editor/src/plugins/keymap/mod.js';
+/// Gap cursor selections are represented using this class. Its
+/// `$anchor` and `$head` properties both point at the cursor position.
+export class GapCursor extends Selection {
+    /// Create a gap cursor.
+    constructor($pos) {
+        super($pos, $pos);
+        this.visible = false;
+    }
+    map(doc, mapping) {
+        let $pos = doc.resolve(mapping.map(this.head));
+        return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos);
+    }
+    content() {
+        return Slice.empty;
+    }
+    eq(other) {
+        return other instanceof GapCursor && other.head == this.head;
+    }
+    toJSON() {
+        return { type: 'gapcursor', pos: this.head };
+    }
+    /// @internal
+    static fromJSONToGapCursor(doc, json) {
+        if (typeof json.pos != 'number') {
+            throw new RangeError('Invalid input for GapCursor.fromJSON');
+        }
+        return new GapCursor(doc.resolve(json.pos));
+    }
+    /// @internal
+    getBookmark() {
+        return new GapBookmark(this.anchor);
+    }
+    /// @internal
+    static valid($pos) {
+        let parent = $pos.parent;
+        if (parent.isTextblock || !closedBefore($pos) || !closedAfter($pos)) {
+            return false;
+        }
+        let override = parent.type.spec.allowGapCursor;
+        if (override != null)
+            return override;
+        let deflt = parent.contentMatchAt($pos.index()).defaultType;
+        return deflt && deflt.isTextblock;
+    }
+    /// @internal
+    static findGapCursorFrom($pos, dir, mustMove = false) {
+        search: for (;;) {
+            if (!mustMove && GapCursor.valid($pos))
+                return $pos;
+            let pos = $pos.pos, next = null;
+            // Scan up from this position
+            for (let d = $pos.depth;; d--) {
+                let parent = $pos.node(d);
+                if (dir > 0 ? $pos.indexAfter(d) < parent.childCount : $pos.index(d) > 0) {
+                    next = parent.child(dir > 0 ? $pos.indexAfter(d) : $pos.index(d) - 1);
+                    break;
+                }
+                else if (d == 0) {
+                    return null;
+                }
+                pos += dir;
+                let $cur = $pos.doc.resolve(pos);
+                if (GapCursor.valid($cur))
+                    return $cur;
+            }
+            // And then down into the next node
+            for (;;) {
+                let inside = dir > 0 ? next.firstChild : next.lastChild;
+                if (!inside) {
+                    if (next.isAtom && !next.isText && !NodeSelection.isSelectable(next)) {
+                        $pos = $pos.doc.resolve(pos + next.nodeSize * dir);
+                        mustMove = false;
+                        continue search;
+                    }
+                    break;
+                }
+                next = inside;
+                pos += dir;
+                let $cur = $pos.doc.resolve(pos);
+                if (GapCursor.valid($cur))
+                    return $cur;
+            }
+            return null;
+        }
+    }
+}
+Selection.jsonID('gapcursor', GapCursor);
+class GapBookmark {
+    constructor(pos) {
+        Object.defineProperty(this, "pos", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: pos
+        });
+    }
+    map(mapping) {
+        return new GapBookmark(mapping.map(this.pos));
+    }
+    resolve(doc) {
+        let $pos = doc.resolve(this.pos);
+        return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos);
+    }
+}
+function closedBefore($pos) {
+    for (let d = $pos.depth; d >= 0; d--) {
+        let index = $pos.index(d), parent = $pos.node(d);
+        // At the start of this parent, look at next one
+        if (index == 0) {
+            if (parent.type.spec.isolating)
+                return true;
+            continue;
+        }
+        // See if the node before (or its first ancestor) is closed
+        for (let before = parent.child(index - 1);; before = before.lastChild) {
+            if ((before.childCount == 0 && !before.inlineContent) || before.isAtom ||
+                before.type.spec.isolating)
+                return true;
+            if (before.inlineContent)
+                return false;
+        }
+    }
+    // Hit start of document
+    return true;
+}
+function closedAfter($pos) {
+    for (let d = $pos.depth; d >= 0; d--) {
+        let index = $pos.indexAfter(d), parent = $pos.node(d);
+        if (index == parent.childCount) {
+            if (parent.type.spec.isolating)
+                return true;
+            continue;
+        }
+        for (let after = parent.child(index);; after = after.firstChild) {
+            if ((after.childCount == 0 && !after.inlineContent) || after.isAtom ||
+                after.type.spec.isolating)
+                return true;
+            if (after.inlineContent)
+                return false;
+        }
+    }
+    return true;
+}
+/// Create a gap cursor plugin. When enabled, this will capture clicks
+/// near and arrow-key-motion past places that don't have a normally
+/// selectable position nearby, and create a gap cursor selection for
+/// them. The cursor is drawn as an element with class
+/// `kb-gapcursor`. You can either include
+/// `style/gapcursor.css` from the package's directory or add your own
+/// styles to make it visible.
+function gapCursor() {
+    return new Plugin({
+        props: {
+            decorations: drawGapCursor,
+            createSelectionBetween(_view, $anchor, $head) {
+                return $anchor.pos == $head.pos && GapCursor.valid($head)
+                    ? new GapCursor($head)
+                    : null;
+            },
+            handleClick,
+            handleKeyDown,
+            handleDOMEvents: { beforeinput: beforeinput },
+        },
+    });
+}
+const handleKeyDown = keydownHandler({
+    'ArrowLeft': arrow('horiz', -1),
+    'ArrowRight': arrow('horiz', 1),
+    'ArrowUp': arrow('vert', -1),
+    'ArrowDown': arrow('vert', 1),
+});
+function arrow(axis, dir) {
+    const dirStr = axis == 'vert'
+        ? (dir > 0 ? 'down' : 'up')
+        : (dir > 0 ? 'right' : 'left');
+    return function (state, dispatch, view) {
+        let sel = state.selection;
+        let $start = dir > 0 ? sel.$to : sel.$from, mustMove = sel.empty;
+        if (sel instanceof TextSelection) {
+            if (!view.endOfTextblock(dirStr) || $start.depth == 0)
+                return false;
+            mustMove = false;
+            $start = state.doc.resolve(dir > 0 ? $start.after() : $start.before());
+        }
+        let $found = GapCursor.findGapCursorFrom($start, dir, mustMove);
+        if (!$found)
+            return false;
+        if (dispatch)
+            dispatch(state.tr.setSelection(new GapCursor($found)));
+        return true;
+    };
+}
+function handleClick(view, pos, event) {
+    if (!view || !view.editable)
+        return false;
+    let $pos = view.state.doc.resolve(pos);
+    if (!GapCursor.valid($pos))
+        return false;
+    let clickPos = view.posAtCoords({ left: event.clientX, top: event.clientY });
+    if (clickPos && clickPos.inside > -1 &&
+        NodeSelection.isSelectable(view.state.doc.nodeAt(clickPos.inside)))
+        return false;
+    view.dispatch(view.state.tr.setSelection(new GapCursor($pos)));
+    return true;
+}
+// This is a hack that, when a composition starts while a gap cursor
+// is active, quickly creates an inline context for the composition to
+// happen in, to avoid it being aborted by the DOM selection being
+// moved into a valid position.
+function beforeinput(view, event) {
+    if (event.inputType != 'insertCompositionText' ||
+        !(view.state.selection instanceof GapCursor))
+        return false;
+    let { $from } = view.state.selection;
+    let insert = $from.parent.contentMatchAt($from.index()).findWrapping(view.state.schema.nodes.text);
+    if (!insert)
+        return false;
+    let frag = Fragment.empty;
+    for (let i = insert.length - 1; i >= 0; i--) {
+        frag = Fragment.from(insert[i].createAndFill(null, frag));
+    }
+    let tr = view.state.tr.replace($from.pos, $from.pos, new Slice(frag, 0, 0));
+    tr.setSelection(TextSelection.near(tr.doc.resolve($from.pos + 1)));
+    view.dispatch(tr);
+    return false;
+}
+function drawGapCursor(state) {
+    if (!(state.selection instanceof GapCursor))
+        return null;
+    let node = document.createElement('div');
+    node.className = 'kb-gapcursor';
+    return DecorationSet.create(state.doc, [
+        Decoration.widget(state.selection.head, node, { key: 'gapcursor' }),
+    ]);
+}
 export class ExtensionGapcursor extends Extension {
     constructor() {
         super(...arguments);

package/esm/extension-basic-editor/src/ExtensionHistory.d.ts

@@ -1,13 +1,14 @@
-import { Plugin } from 'prosemirror-state';
+import { Command, Plugin } from 'prosemirror-state';
 import { type CoreEditor, Extension } from '../../editor/src/mod.js';
-import { type Commands, type CommandShortcuts } from '../../editor/src/commands/mod.js';
+import { type CommandFactories, type CommandShortcuts } from '../../editor/src/commands/mod.js';
+export declare const undoInputRule: Command;
 export declare class ExtensionHistory extends Extension {
     name: string;
     options: {
         depth: number;
         newGroupDelay: number;
     };
-    getCommands(editor: CoreEditor): Partial<Commands>;
+    getCommandFactories(editor: CoreEditor): Partial<CommandFactories>;
     getKeyboardShortcuts(): Partial<CommandShortcuts>;
     getProseMirrorPlugins(): Plugin[];
 }

package/esm/extension-basic-editor/src/ExtensionHistory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExtensionHistory.d.ts","sourceRoot":"","sources":["../../../src/extension-basic-editor/src/ExtensionHistory.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,KAAK,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,gBAAgB,EACtB,MAAM,kCAAkC,CAAC;AAE1C,qBAAa,gBAAiB,SAAQ,SAAS;IAC7C,IAAI,SAAa;IAEjB,OAAO;;;MAGL;IAEO,WAAW,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO,CAAC,QAAQ,CAAC;IAQlD,oBAAoB,IAAI,OAAO,CAAC,gBAAgB,CAAC;IAiBjD,qBAAqB,IAAI,MAAM,EAAE;CAK3C"}
+{"version":3,"file":"ExtensionHistory.d.ts","sourceRoot":"","sources":["../../../src/extension-basic-editor/src/ExtensionHistory.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,KAAK,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,kCAAkC,CAAC;AAI1C,eAAO,MAAM,aAAa,EAAE,OA4B3B,CAAC;AAEF,qBAAa,gBAAiB,SAAQ,SAAS;IAC7C,IAAI,SAAa;IAEjB,OAAO;;;MAGL;IAEO,mBAAmB,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO,CAAC,gBAAgB,CAAC;IAQlE,oBAAoB,IAAI,OAAO,CAAC,gBAAgB,CAAC;IAkBjD,qBAAqB,IAAI,MAAM,EAAE;CAK3C"}

package/esm/extension-basic-editor/src/ExtensionHistory.js

@@ -1,6 +1,31 @@
 import { history, redo, undo } from 'prosemirror-history';
-import { undoInputRule } from 'prosemirror-inputrules';
 import { Extension } from '../../editor/src/mod.js';
+/// This is a command that will undo an input rule, if applying such a
+/// rule was the last thing that the user did.
+export const undoInputRule = (state, dispatch) => {
+    let plugins = state.plugins;
+    for (let i = 0; i < plugins.length; i++) {
+        let plugin = plugins[i], undoable;
+        if (plugin.spec.isInputRules && (undoable = plugin.getState(state))) {
+            if (dispatch) {
+                let tr = state.tr, toUndo = undoable.transform;
+                for (let j = toUndo.steps.length - 1; j >= 0; j--) {
+                    tr.step(toUndo.steps[j].invert(toUndo.docs[j]));
+                }
+                if (undoable.text) {
+                    let marks = tr.doc.resolve(undoable.from).marks();
+                    tr.replaceWith(undoable.from, undoable.to, state.schema.text(undoable.text, marks));
+                }
+                else {
+                    tr.delete(undoable.from, undoable.to);
+                }
+                dispatch(tr);
+            }
+            return true;
+        }
+    }
+    return false;
+};
 export class ExtensionHistory extends Extension {
     constructor() {
         super(...arguments);
@@ -20,7 +45,7 @@ export class ExtensionHistory extends Extension {
             }
         });
     }
-    getCommands(editor) {
+    getCommandFactories(editor) {
         return {
             'undo': () => undo,
             'redo': () => redo,
@@ -28,8 +53,9 @@ export class ExtensionHistory extends Extension {
         };
     }
     getKeyboardShortcuts() {
+        // https://stackoverflow.com/a/73619128
         const mac = typeof navigator != 'undefined'
-            ? /Mac|iP(hone|[oa]d)/.test(navigator.platform)
+            ? /Mac|iP(hone|[oa]d)/.test(navigator?.platform)
             : false;
         const shortcuts = {
             'Backspace': 'undoInputRule',

package/esm/extension-basic-editor/src/ExtensionHtml.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExtensionHtml.d.ts","sourceRoot":"","sources":["../../../src/extension-basic-editor/src/ExtensionHtml.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,QAAQ,EACR,IAAI,EACJ,KAAK,YAAY,EACjB,MAAM,EACP,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAErF,MAAM,MAAM,4BAA4B,GAAG;IACzC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,GACb,MAAM,CAWR;AAqBD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAQ5D;AA+BD,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,4BAA4B,GACrC,IAAI,CAgBN;AAED,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,4BAA4B,GACrC,QAAQ,CAiBV;AAED,qBAAa,aAAc,SAAQ,SAAS;IAC1C,IAAI,SAAU;IAEL,aAAa,CACpB,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,MAAM,GACb,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;CAa7B"}
+{"version":3,"file":"ExtensionHtml.d.ts","sourceRoot":"","sources":["../../../src/extension-basic-editor/src/ExtensionHtml.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,QAAQ,EACR,IAAI,EACJ,KAAK,YAAY,EACjB,MAAM,EACP,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAErF,MAAM,MAAM,4BAA4B,GAAG;IACzC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,GACb,MAAM,CAaR;AAqBD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAQ5D;AA+BD,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,4BAA4B,GACrC,IAAI,CAgBN;AAED,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,4BAA4B,GACrC,QAAQ,CAiBV;AAED,qBAAa,aAAc,SAAQ,SAAS;IAC1C,IAAI,SAAU;IAEL,aAAa,CACpB,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,MAAM,GACb,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;CAe7B"}

package/esm/extension-basic-editor/src/ExtensionHtml.js

@@ -1,7 +1,8 @@
 import { DOMParser, DOMSerializer, Schema, } from 'prosemirror-model';
 import { Extension } from '../../editor/src/mod.js';
 export function getHTMLFromFragment(fragment, schema) {
-    const documentFragment = DOMSerializer.fromSchema(schema).serializeFragment(fragment);
+    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);
@@ -93,10 +94,12 @@ export class ExtensionHtml extends Extension {
         const config = this.config;
         return {
             'text/html': {
-                fromDoc(document) {
-                    return getHTMLFromFragment(document.content, editor.schema);
+                fromDoc: async (document) => {
+                    const html = getHTMLFromFragment(document.content, editor.schema);
+                    return new TextEncoder().encode(html);
                 },
-                toDoc(html) {
+                toDoc: async (buffer) => {
+                    const html = new TextDecoder().decode(buffer);
                     return createNodeFromHTML(html, editor.schema);
                 },
             },

package/esm/extension-basic-editor/src/ExtensionMediaUpload.d.ts

@@ -0,0 +1,24 @@
+import { Plugin } from 'prosemirror-state';
+import { Extension } from '../../editor/src/mod.js';
+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>;
+}
+/** Extension that adds media upload support via drag & drop and paste */
+export declare class ExtensionMediaUpload extends Extension {
+    protected config: Partial<MediaUploadOptions>;
+    name: string;
+    constructor(config?: Partial<MediaUploadOptions>);
+    getProseMirrorPlugins(): Plugin[];
+}
+//# sourceMappingURL=ExtensionMediaUpload.d.ts.map

package/esm/extension-basic-editor/src/ExtensionMediaUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionMediaUpload.d.ts","sourceRoot":"","sources":["../../../src/extension-basic-editor/src/ExtensionMediaUpload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAa,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE7B,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE7B,mEAAmE;IACnE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,gEAAgE;IAChE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CACjD;AA+ND,yEAAyE;AACzE,qBAAa,oBAAqB,SAAQ,SAAS;cAGlB,MAAM,EAAE,OAAO,CAAC,kBAAkB,CAAC;IAFlE,IAAI,SAAiB;gBAEU,MAAM,GAAE,OAAO,CAAC,kBAAkB,CAAM;IAI9D,qBAAqB,IAAI,MAAM,EAAE;CAG3C"}

package/esm/extension-basic-editor/src/ExtensionMediaUpload.js

@@ -0,0 +1,176 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Extension } from '../../editor/src/mod.js';
+const mediaUploadKey = new PluginKey('mediaUpload');
+/** Convert a File to a base64 data URL */
+function fileToDataURL(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}
+/** Convert a File to an object URL (better for videos) */
+function fileToObjectURL(file) {
+    return URL.createObjectURL(file);
+}
+/** Check if a file is an image */
+function isImage(file, allowedTypes) {
+    return allowedTypes.some((type) => file.type.match(type));
+}
+/** Check if a file is a video */
+function isVideo(file, allowedTypes) {
+    return allowedTypes.some((type) => file.type.match(type));
+}
+/** Insert an image into the editor at the given position */
+function insertImage(view, pos, src, alt, title) {
+    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, pos, src, title, width, height) {
+    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, files, pos, options) {
+    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;
+            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 = {}) {
+    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 = [];
+                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 {
+    constructor(config = {}) {
+        super(config);
+        Object.defineProperty(this, "config", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: config
+        });
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'mediaUpload'
+        });
+    }
+    getProseMirrorPlugins() {
+        return [createMediaUploadPlugin(this.config)];
+    }
+}

package/esm/extension-basic-editor/src/ExtensionSelection.d.ts

@@ -0,0 +1,11 @@
+import { Node } from 'prosemirror-model';
+import { type CoreEditor, Extension } from '../../editor/src/mod.js';
+import type { CommandFactories } from '../../editor/src/commands/mod.js';
+export declare class ExtensionSelection extends Extension {
+    name: string;
+    extractSelection(): Node;
+    replaceSelection(otherDoc: Node): void;
+    appendSelection(otherDoc: Node): void;
+    getCommandFactories(editor: CoreEditor): Partial<CommandFactories>;
+}
+//# sourceMappingURL=ExtensionSelection.d.ts.map

package/esm/extension-basic-editor/src/ExtensionSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionSelection.d.ts","sourceRoot":"","sources":["../../../src/extension-basic-editor/src/ExtensionSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,IAAI,EAIL,MAAM,mBAAmB,CAAC;AAS3B,OAAO,EAAE,KAAK,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,KAAK,EACV,gBAAgB,EAEjB,MAAM,kCAAkC,CAAC;AAuS1C,qBAAa,kBAAmB,SAAQ,SAAS;IAC/C,IAAI,SAAe;IAEnB,gBAAgB,IAAI,IAAI;IAaxB,gBAAgB,CAAC,QAAQ,EAAE,IAAI;IAuB/B,eAAe,CAAC,QAAQ,EAAE,IAAI;IAmBrB,mBAAmB,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO,CAAC,gBAAgB,CAAC;CAO5E"}