@seorii/tiptap 0.4.3 → 0.4.5

package/dist/plugin/command/suggest.js

@@ -29,33 +29,37 @@ function matchItem(item, query, compactQuery) {
     return [item.title, item.subtitle ?? '', ...(item.keywords ?? [])].some((value) => matchQuery(value, query, compactQuery));
 }
 function fixRange(editor, rawRange, split = '/') {
-    const range = { ...rawRange };
-    const { state } = editor.view;
-    const { selection, doc } = state;
-    if (selection.$to.nodeBefore?.text?.includes?.(split)) {
-        range.from = range.to;
-        while (range.from > 0 && doc.textBetween(range.from - 1, range.from) !== split) {
-            try {
-                range.from -= 1;
-            }
-            catch {
-                range.from += 2;
+    const doc = editor.state.doc;
+    const docSize = doc.content.size;
+    const range = {
+        from: Math.max(0, Math.min(rawRange.from, docSize)),
+        to: Math.max(0, Math.min(rawRange.to, docSize))
+    };
+    if (range.to < range.from)
+        range.to = range.from;
+    if (doc.textBetween(range.from, Math.min(range.from + 1, docSize)) !== split && range.from > 0) {
+        const minFrom = Math.max(0, range.from - 64);
+        for (let cursor = range.from; cursor > minFrom; cursor -= 1) {
+            const char = doc.textBetween(cursor - 1, cursor);
+            if (!char || /\s/.test(char))
                 break;
-            }
+            if (char !== split)
+                continue;
+            range.from = cursor - 1;
+            break;
         }
-        range.from -= 1;
     }
-    while (range.to < selection.to && doc.textBetween(range.to, range.to + 1) !== ' ') {
-        try {
-            range.to += 1;
-        }
-        catch {
-            range.to -= 1;
+    while (range.to < docSize) {
+        const next = doc.textBetween(range.to, range.to + 1);
+        if (!next || /\s/.test(next))
             break;
-        }
+        range.to += 1;
     }
     return range;
 }
+function clampDocPos(editor, pos) {
+    return Math.max(0, Math.min(pos, editor.state.doc.content.size));
+}
 export function getDetail(editor, range, option) {
     slashState.selection = () => {
         editor.chain().focus().deleteRange(fixRange(editor, range)).run();
@@ -147,7 +151,18 @@ export const suggest = {
                         subtitle: i18n('imageInfo'),
                         keywords: createKeywords(['image', 'imageInfo']),
                         command: ({ editor, range }) => {
-                            editor.chain().focus().deleteRange(fixRange(editor, range)).run();
+                            const fixedRange = fixRange(editor, range);
+                            editor.chain().focus().deleteRange(fixedRange).run();
+                            let insertAt = clampDocPos(editor, fixedRange.from);
+                            let insertParagraph = true;
+                            const { selection } = editor.state;
+                            if (selection.empty &&
+                                selection.$from.depth > 0 &&
+                                selection.$from.parent.isTextblock &&
+                                selection.$from.parent.content.size === 0) {
+                                insertAt = clampDocPos(editor, selection.$from.before(selection.$from.depth));
+                                insertParagraph = false;
+                            }
                             const input = document.createElement('input');
                             input.type = 'file';
                             input.accept = 'image/*';
@@ -159,10 +174,13 @@ export const suggest = {
                                     return;
                                 const skeleton = insertUploadSkeleton(editor, {
                                     kind: 'image',
-                                    height: 220
+                                    height: 220,
+                                    at: insertAt,
+                                    insertParagraph
                                 });
                                 try {
-                                    const upload = window.__image_uploader ?? fallbackUpload;
+                                    const imageUploader = window.__image_uploader;
+                                    const upload = imageUploader ?? fallbackUpload;
                                     const src = await upload(file);
                                     if (skeleton) {
                                         skeleton.replaceWith({
@@ -171,9 +189,16 @@ export const suggest = {
                                         });
                                     }
                                     else {
-                                        editor.chain().focus().setImage({ src }).run();
+                                        editor
+                                            .chain()
+                                            .insertContentAt(clampDocPos(editor, insertAt), insertParagraph
+                                            ? [{ type: 'image', attrs: { src } }, { type: 'paragraph' }]
+                                            : { type: 'image', attrs: { src } })
+                                            .run();
+                                    }
+                                    if (imageUploader) {
+                                        releaseObjectUrlOnImageSettled(editor.view, src);
                                     }
-                                    releaseObjectUrlOnImageSettled(editor.view, src);
                                 }
                                 catch {
                                     skeleton?.remove();

package/dist/plugin/image/dragdrop.js

@@ -67,17 +67,17 @@ export const dropImagePlugin = () => {
         props: {
             handleDOMEvents: {
                 paste(view, event) {
-                    const upload = window.__image_uploader || fallbackUpload;
+                    const imageUploader = window.__image_uploader;
+                    const upload = imageUploader || fallbackUpload;
                     const items = Array.from(event.clipboardData?.items || []);
                     const { schema } = view.state;
+                    let handledImagePaste = false;
                     items.forEach((item) => {
                         const image = item.getAsFile();
                         if (item.type.indexOf('image') === 0) {
+                            handledImagePaste = true;
                             event.preventDefault();
-                            const skeleton = insertUploadSkeleton({
-                                state: view.state,
-                                view
-                            }, {
+                            const skeleton = insertUploadSkeleton({ view }, {
                                 kind: 'image',
                                 height: 220
                             });
@@ -95,7 +95,9 @@ export const dropImagePlugin = () => {
                                         const transaction = view.state.tr.replaceSelectionWith(node);
                                         view.dispatch(transaction);
                                     }
-                                    releaseObjectUrlOnImageSettled(view, src);
+                                    if (imageUploader) {
+                                        releaseObjectUrlOnImageSettled(view, src);
+                                    }
                                 })
                                     .catch(() => {
                                     skeleton?.remove();
@@ -116,10 +118,11 @@ export const dropImagePlugin = () => {
                             reader.readAsDataURL(image);
                         }
                     });
-                    return false;
+                    return handledImagePaste;
                 },
                 drop: (view, event) => {
-                    const upload = window.__image_uploader || fallbackUpload;
+                    const imageUploader = window.__image_uploader;
+                    const upload = imageUploader || fallbackUpload;
                     const hasFiles = event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length;
                     if (!hasFiles) {
                         return false;
@@ -138,10 +141,7 @@ export const dropImagePlugin = () => {
                         return false;
                     images.forEach(async (image) => {
                         const reader = new FileReader();
-                        const skeleton = insertUploadSkeleton({
-                            state: view.state,
-                            view
-                        }, {
+                        const skeleton = insertUploadSkeleton({ view }, {
                             kind: 'image',
                             height: 220,
                             at: coordinates.pos
@@ -160,7 +160,9 @@ export const dropImagePlugin = () => {
                                     const transaction = view.state.tr.insert(coordinates.pos, node);
                                     view.dispatch(transaction);
                                 }
-                                releaseObjectUrlOnImageSettled(view, src);
+                                if (imageUploader) {
+                                    releaseObjectUrlOnImageSettled(view, src);
+                                }
                             }
                             catch {
                                 skeleton?.remove();

package/dist/plugin/resize/index.js

@@ -28,6 +28,17 @@ const aspectRatioOptions = [
     { label: '4:3', value: '4:3' },
     { label: '9:16', value: '9:16' }
 ];
+const horizontalAlignValues = ['left', 'center', 'right'];
+const horizontalAlignOptions = [
+    { label: 'Auto', value: null },
+    { label: 'Left', value: 'left' },
+    { label: 'Center', value: 'center' },
+    { label: 'Right', value: 'right' }
+];
+const widthPresetOptions = [
+    { label: '100%', value: '100%' },
+    { label: '50%', value: '50%' }
+];
 function isResizableType(value) {
     return typeSet.has(value);
 }
@@ -109,6 +120,28 @@ function sameAspectRatio(left, right) {
         return false;
     return Math.abs(leftRatio - rightRatio) <= 0.001;
 }
+function normalizeHorizontalAlignAttr(value) {
+    if (typeof value !== 'string')
+        return null;
+    const normalized = value.trim().toLowerCase();
+    if (!normalized)
+        return null;
+    return horizontalAlignValues.includes(normalized)
+        ? normalized
+        : null;
+}
+function normalizeWidthPreset(value) {
+    if (typeof value !== 'string' && typeof value !== 'number')
+        return null;
+    const normalized = String(value).trim();
+    if (!normalized)
+        return null;
+    if (normalized === '100' || normalized === '100%')
+        return '100%';
+    if (normalized === '50' || normalized === '50%')
+        return '50%';
+    return null;
+}
 function normalizeStringAttr(value) {
     if (typeof value !== 'string')
         return null;
@@ -261,41 +294,209 @@ function buildResizeAttrs(kind, node, height, imageRatio, aspectRatio = normaliz
 function canUseAspectRatioPreset(kind) {
     return kind === 'iframe' || kind === 'embed';
 }
+function canUseLayoutOptions(kind) {
+    return kind === 'image' || canUseAspectRatioPreset(kind);
+}
+function createToolbarGroupIcon(group) {
+    const icon = document.createElement('span');
+    icon.className = 'tiptap-media-toolbar-group-icon';
+    icon.dataset.group = group;
+    icon.setAttribute('aria-hidden', 'true');
+    return icon;
+}
 function createResizeHandleDecoration(nodePos, widgetPos, resizeMeta, node) {
+    const widthKey = normalizeWidthAttr(node.attrs.width) || 'auto';
+    const aspectRatioKey = normalizeAspectRatioAttr(node.attrs.aspectRatio) || 'auto';
+    const horizontalAlignKey = normalizeHorizontalAlignAttr(node.attrs.horizontalAlign) || 'auto';
     return Decoration.widget(widgetPos, () => {
         const anchor = document.createElement('div');
         anchor.className = 'tiptap-media-resize-anchor';
+        const isImageAnchor = resizeMeta.kind === 'image';
+        let controlsContainer = anchor;
+        if (isImageAnchor) {
+            anchor.classList.add('is-image-anchor');
+            const controls = document.createElement('div');
+            controls.className = 'tiptap-media-resize-controls';
+            controls.style.left = '0px';
+            controls.style.width = '100%';
+            anchor.append(controls);
+            controlsContainer = controls;
+        }
+        else {
+            const normalizedWidth = normalizeWidthAttr(node.attrs.width);
+            if (normalizedWidth) {
+                if (normalizedWidth.endsWith('%')) {
+                    anchor.style.width = normalizedWidth;
+                }
+                else {
+                    const numericWidth = parseNumericSize(normalizedWidth);
+                    if (numericWidth !== null) {
+                        anchor.style.width = `${Math.round(numericWidth)}px`;
+                    }
+                }
+                anchor.style.maxWidth = '100%';
+            }
+            const horizontalAlign = normalizeHorizontalAlignAttr(node.attrs.horizontalAlign);
+            if (horizontalAlign === 'center') {
+                anchor.style.marginLeft = 'auto';
+                anchor.style.marginRight = 'auto';
+            }
+            else if (horizontalAlign === 'right') {
+                anchor.style.marginLeft = 'auto';
+                anchor.style.marginRight = '0';
+            }
+            else {
+                anchor.style.marginLeft = '0';
+                anchor.style.marginRight = '0';
+            }
+        }
+        if (isImageAnchor) {
+            requestAnimationFrame(() => {
+                if (!anchor.isConnected)
+                    return;
+                let candidate = anchor.previousElementSibling;
+                let imageElement = null;
+                while (candidate && !imageElement) {
+                    if (candidate instanceof HTMLImageElement) {
+                        imageElement = candidate;
+                    }
+                    else if (candidate instanceof HTMLElement) {
+                        imageElement = candidate.querySelector('img');
+                    }
+                    candidate = candidate.previousElementSibling;
+                }
+                if (!imageElement && anchor.parentElement instanceof HTMLElement) {
+                    imageElement =
+                        anchor.parentElement.querySelector('figure.ProseMirror-selectednode img, img.ProseMirror-selectednode') || null;
+                }
+                if (!(imageElement instanceof HTMLElement))
+                    return;
+                if (!(controlsContainer instanceof HTMLElement))
+                    return;
+                const rect = imageElement.getBoundingClientRect();
+                if (rect.width <= 0 || rect.height <= 0)
+                    return;
+                const anchorRect = anchor.getBoundingClientRect();
+                const leftOffset = rect.left - anchorRect.left;
+                const maxLeft = Math.max(0, anchorRect.width - rect.width);
+                const clampedLeft = clamp(leftOffset, 0, maxLeft);
+                const topOffset = rect.bottom - anchorRect.top + 6;
+                controlsContainer.style.top = `${Math.round(topOffset)}px`;
+                controlsContainer.style.left = `${Math.round(clampedLeft)}px`;
+                controlsContainer.style.width = `${Math.round(rect.width)}px`;
+            });
+        }
         const button = document.createElement('button');
         button.type = 'button';
         button.className = 'tiptap-media-resize-handle';
         button.dataset.resizePos = String(nodePos);
         button.dataset.resizeKind = resizeMeta.kind;
-        button.setAttribute('aria-label', 'Resize media height (click for aspect ratio)');
-        anchor.append(button);
-        if (canUseAspectRatioPreset(resizeMeta.kind)) {
+        button.setAttribute('aria-label', canUseLayoutOptions(resizeMeta.kind)
+            ? 'Resize media height (click for layout options)'
+            : 'Resize media height');
+        controlsContainer.append(button);
+        if (canUseLayoutOptions(resizeMeta.kind)) {
             const selectedAspectRatio = normalizeAspectRatioAttr(node.attrs.aspectRatio);
+            const selectedHorizontalAlign = normalizeHorizontalAlignAttr(node.attrs.horizontalAlign);
+            const selectedWidthPreset = normalizeWidthPreset(node.attrs.width);
+            const supportsAspectRatio = canUseAspectRatioPreset(resizeMeta.kind);
+            const supportsBottomWidthPreset = resizeMeta.kind === 'image';
+            if (supportsAspectRatio) {
+                const widthHandle = document.createElement('button');
+                widthHandle.type = 'button';
+                widthHandle.className = 'tiptap-media-width-resize-handle';
+                widthHandle.dataset.resizePos = String(nodePos);
+                widthHandle.dataset.resizeKind = resizeMeta.kind;
+                widthHandle.setAttribute('aria-label', 'Resize media width (click for width presets)');
+                controlsContainer.append(widthHandle);
+            }
             const toolbar = document.createElement('div');
             toolbar.className = 'tiptap-media-aspect-ratio-toolbar';
             toolbar.setAttribute('role', 'toolbar');
-            toolbar.setAttribute('aria-label', 'Aspect ratio presets');
+            toolbar.setAttribute('aria-label', 'Media resize options');
             toolbar.dataset.resizePos = String(nodePos);
-            for (const option of aspectRatioOptions) {
+            let hasToolbarItems = false;
+            if (supportsAspectRatio) {
+                toolbar.append(createToolbarGroupIcon('aspect'));
+                for (const option of aspectRatioOptions) {
+                    const optionButton = document.createElement('button');
+                    optionButton.type = 'button';
+                    optionButton.className = 'tiptap-media-aspect-ratio-option';
+                    optionButton.dataset.resizePos = String(nodePos);
+                    optionButton.dataset.aspectRatio = option.value ?? 'auto';
+                    optionButton.textContent = option.label;
+                    const isActive = option.value
+                        ? sameAspectRatio(option.value, selectedAspectRatio)
+                        : !selectedAspectRatio;
+                    optionButton.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+                    toolbar.append(optionButton);
+                }
+                hasToolbarItems = true;
+            }
+            if (hasToolbarItems) {
+                const separator = document.createElement('span');
+                separator.className = 'tiptap-media-toolbar-separator';
+                separator.setAttribute('aria-hidden', 'true');
+                toolbar.append(separator);
+            }
+            toolbar.append(createToolbarGroupIcon('align'));
+            for (const option of horizontalAlignOptions) {
                 const optionButton = document.createElement('button');
                 optionButton.type = 'button';
-                optionButton.className = 'tiptap-media-aspect-ratio-option';
+                optionButton.className = 'tiptap-media-horizontal-align-option';
                 optionButton.dataset.resizePos = String(nodePos);
-                optionButton.dataset.aspectRatio = option.value ?? 'auto';
+                optionButton.dataset.horizontalAlign = option.value ?? 'auto';
                 optionButton.textContent = option.label;
                 const isActive = option.value
-                    ? sameAspectRatio(option.value, selectedAspectRatio)
-                    : !selectedAspectRatio;
+                    ? option.value === selectedHorizontalAlign
+                    : !selectedHorizontalAlign;
                 optionButton.setAttribute('aria-pressed', isActive ? 'true' : 'false');
                 toolbar.append(optionButton);
             }
-            anchor.append(toolbar);
+            hasToolbarItems = true;
+            if (supportsBottomWidthPreset) {
+                const separator = document.createElement('span');
+                separator.className = 'tiptap-media-toolbar-separator';
+                separator.setAttribute('aria-hidden', 'true');
+                toolbar.append(separator);
+                toolbar.append(createToolbarGroupIcon('width'));
+                for (const option of widthPresetOptions) {
+                    const optionButton = document.createElement('button');
+                    optionButton.type = 'button';
+                    optionButton.className = 'tiptap-media-width-option';
+                    optionButton.dataset.resizePos = String(nodePos);
+                    optionButton.dataset.widthPreset = option.value;
+                    optionButton.textContent = option.label;
+                    optionButton.setAttribute('aria-pressed', selectedWidthPreset === option.value ? 'true' : 'false');
+                    toolbar.append(optionButton);
+                }
+            }
+            controlsContainer.append(toolbar);
+            if (supportsAspectRatio) {
+                const widthToolbar = document.createElement('div');
+                widthToolbar.className = 'tiptap-media-width-toolbar';
+                widthToolbar.setAttribute('role', 'toolbar');
+                widthToolbar.setAttribute('aria-label', 'Media width presets');
+                widthToolbar.dataset.resizePos = String(nodePos);
+                widthToolbar.append(createToolbarGroupIcon('width'));
+                for (const option of widthPresetOptions) {
+                    const optionButton = document.createElement('button');
+                    optionButton.type = 'button';
+                    optionButton.className = 'tiptap-media-width-option';
+                    optionButton.dataset.resizePos = String(nodePos);
+                    optionButton.dataset.widthPreset = option.value;
+                    optionButton.textContent = option.label;
+                    optionButton.setAttribute('aria-pressed', selectedWidthPreset === option.value ? 'true' : 'false');
+                    widthToolbar.append(optionButton);
+                }
+                controlsContainer.append(widthToolbar);
+            }
         }
         return anchor;
-    }, { side: 1, key: `media-resize-${nodePos}-${resizeMeta.typeName}-${resizeMeta.kind}` });
+    }, {
+        side: 1,
+        key: `media-resize-${nodePos}-${resizeMeta.typeName}-${resizeMeta.kind}-${widthKey}-${aspectRatioKey}-${horizontalAlignKey}`
+    });
 }
 function tryCreateNodeSelection(doc, pos) {
     if (pos < 0 || pos > doc.content.size)
@@ -413,6 +614,14 @@ export default Extension.create({
                             const aspectRatio = normalizeAspectRatioAttr(attributes.aspectRatio);
                             return aspectRatio ? { 'data-resize-aspect-ratio': aspectRatio } : {};
                         }
+                    },
+                    horizontalAlign: {
+                        default: null,
+                        parseHTML: (element) => normalizeHorizontalAlignAttr(element.getAttribute('data-resize-horizontal-align')),
+                        renderHTML: (attributes) => {
+                            const horizontalAlign = normalizeHorizontalAlignAttr(attributes.horizontalAlign);
+                            return horizontalAlign ? { 'data-resize-horizontal-align': horizontalAlign } : {};
+                        }
                     }
                 }
             }
@@ -422,11 +631,11 @@ export default Extension.create({
         let removeDragListeners = null;
         const closeOpenToolbars = (view, except = null) => {
             view.dom
-                .querySelectorAll('.tiptap-media-resize-anchor.is-toolbar-open')
+                .querySelectorAll('.tiptap-media-resize-anchor.is-toolbar-open, .tiptap-media-resize-anchor.is-width-toolbar-open')
                 .forEach((anchor) => {
                 if (except && anchor === except)
                     return;
-                anchor.classList.remove('is-toolbar-open');
+                anchor.classList.remove('is-toolbar-open', 'is-width-toolbar-open');
             });
         };
         return [
@@ -490,6 +699,60 @@ export default Extension.create({
                                 return false;
                             if (!(event.target instanceof HTMLElement))
                                 return false;
+                            const widthOption = event.target.closest('.tiptap-media-width-option');
+                            if (widthOption) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                const pos = Number.parseInt(widthOption.dataset.resizePos || '', 10);
+                                if (!Number.isFinite(pos))
+                                    return true;
+                                const node = view.state.doc.nodeAt(pos);
+                                if (!node)
+                                    return true;
+                                const resizeMeta = resolveResizeMeta(node);
+                                if (!resizeMeta || !canUseLayoutOptions(resizeMeta.kind))
+                                    return true;
+                                const widthPreset = normalizeWidthPreset(widthOption.dataset.widthPreset);
+                                if (!widthPreset)
+                                    return true;
+                                if (node.attrs.width !== widthPreset) {
+                                    view.dispatch(view.state.tr.setNodeMarkup(pos, node.type, {
+                                        ...node.attrs,
+                                        width: widthPreset
+                                    }));
+                                }
+                                closeOpenToolbars(view);
+                                return true;
+                            }
+                            const horizontalAlignOption = event.target.closest('.tiptap-media-horizontal-align-option');
+                            if (horizontalAlignOption) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                const pos = Number.parseInt(horizontalAlignOption.dataset.resizePos || '', 10);
+                                if (!Number.isFinite(pos))
+                                    return true;
+                                const node = view.state.doc.nodeAt(pos);
+                                if (!node)
+                                    return true;
+                                const resizeMeta = resolveResizeMeta(node);
+                                if (!resizeMeta || !canUseLayoutOptions(resizeMeta.kind))
+                                    return true;
+                                const selectedHorizontalAlign = horizontalAlignOption.dataset.horizontalAlign || 'auto';
+                                const normalizedHorizontalAlign = selectedHorizontalAlign === 'auto'
+                                    ? null
+                                    : normalizeHorizontalAlignAttr(selectedHorizontalAlign);
+                                if (selectedHorizontalAlign !== 'auto' && !normalizedHorizontalAlign)
+                                    return true;
+                                const currentHorizontalAlign = normalizeHorizontalAlignAttr(node.attrs.horizontalAlign);
+                                if (normalizedHorizontalAlign !== currentHorizontalAlign) {
+                                    view.dispatch(view.state.tr.setNodeMarkup(pos, node.type, {
+                                        ...node.attrs,
+                                        horizontalAlign: normalizedHorizontalAlign
+                                    }));
+                                }
+                                closeOpenToolbars(view);
+                                return true;
+                            }
                             const ratioOption = event.target.closest('.tiptap-media-aspect-ratio-option');
                             if (ratioOption) {
                                 event.preventDefault();
@@ -529,6 +792,151 @@ export default Extension.create({
                                 closeOpenToolbars(view);
                                 return true;
                             }
+                            const widthHandle = event.target.closest('.tiptap-media-width-resize-handle');
+                            if (widthHandle) {
+                                const pos = Number.parseInt(widthHandle.dataset.resizePos || '', 10);
+                                if (!Number.isFinite(pos))
+                                    return false;
+                                const node = view.state.doc.nodeAt(pos);
+                                if (!node)
+                                    return false;
+                                const resizeMeta = resolveResizeMeta(node);
+                                if (!resizeMeta || !canUseAspectRatioPreset(resizeMeta.kind))
+                                    return false;
+                                const resizeKind = widthHandle.dataset.resizeKind;
+                                if (resizeKind && resizeMeta.kind !== resizeKind)
+                                    return false;
+                                const target = resolveTargetElement(view, pos, resizeMeta, node);
+                                if (!target)
+                                    return false;
+                                event.preventDefault();
+                                event.stopPropagation();
+                                const anchor = widthHandle.closest('.tiptap-media-resize-anchor');
+                                const startX = event.clientX;
+                                const startY = event.clientY;
+                                const startHeight = resolveStartHeight(resizeMeta.kind, node, target);
+                                const targetParent = target.parentElement;
+                                const shouldShowProxy = resizeMeta.kind !== 'image' && Boolean(targetParent);
+                                const currentHorizontalAlign = normalizeHorizontalAlignAttr(node.attrs.horizontalAlign);
+                                const startWidth = Math.max(1, resolveElementWidth(node, target) ||
+                                    targetParent?.getBoundingClientRect().width ||
+                                    0);
+                                let frame = 0;
+                                let pendingWidth = startWidth;
+                                let resizeProxy = null;
+                                let restoreTarget = null;
+                                let isDragging = false;
+                                let appliedDragCursor = false;
+                                const previousCursor = document.body.style.cursor;
+                                const previousSelect = document.body.style.userSelect;
+                                const dispatchWidth = (width) => {
+                                    const current = view.state.doc.nodeAt(pos);
+                                    if (!current || current.type.name !== resizeMeta.typeName)
+                                        return;
+                                    const currentMeta = resolveResizeMeta(current);
+                                    if (!currentMeta || !canUseAspectRatioPreset(currentMeta.kind))
+                                        return;
+                                    const containerWidth = target.parentElement?.getBoundingClientRect().width || 0;
+                                    const nextWidth = containerWidth > 0
+                                        ? `${Math.round(clamp((width / containerWidth) * 100, 10, 100))}%`
+                                        : String(Math.max(1, Math.round(width)));
+                                    if (nextWidth === current.attrs.width)
+                                        return;
+                                    view.dispatch(view.state.tr.setNodeMarkup(pos, current.type, {
+                                        ...current.attrs,
+                                        width: nextWidth
+                                    }));
+                                };
+                                const beginDrag = () => {
+                                    if (isDragging)
+                                        return;
+                                    isDragging = true;
+                                    closeOpenToolbars(view);
+                                    if (shouldShowProxy && targetParent) {
+                                        const targetElement = target;
+                                        const originalDisplay = targetElement.style.display;
+                                        resizeProxy = document.createElement('div');
+                                        resizeProxy.className = 'tiptap-media-resize-proxy';
+                                        resizeProxy.style.height = `${Math.round(startHeight)}px`;
+                                        resizeProxy.style.width = `${Math.round(startWidth)}px`;
+                                        if (currentHorizontalAlign === 'center') {
+                                            resizeProxy.style.marginLeft = 'auto';
+                                            resizeProxy.style.marginRight = 'auto';
+                                        }
+                                        else if (currentHorizontalAlign === 'right') {
+                                            resizeProxy.style.marginLeft = 'auto';
+                                            resizeProxy.style.marginRight = '0';
+                                        }
+                                        else {
+                                            resizeProxy.style.marginLeft = '0';
+                                            resizeProxy.style.marginRight = '0';
+                                        }
+                                        targetParent.insertBefore(resizeProxy, targetElement);
+                                        targetElement.style.display = 'none';
+                                        restoreTarget = () => {
+                                            targetElement.style.display = originalDisplay;
+                                            resizeProxy?.remove();
+                                            resizeProxy = null;
+                                            restoreTarget = null;
+                                        };
+                                    }
+                                    document.body.style.cursor = 'ew-resize';
+                                    document.body.style.userSelect = 'none';
+                                    appliedDragCursor = true;
+                                };
+                                const onMove = (moveEvent) => {
+                                    const deltaX = moveEvent.clientX - startX;
+                                    const deltaY = moveEvent.clientY - startY;
+                                    if (!isDragging && Math.max(Math.abs(deltaX), Math.abs(deltaY)) < 4)
+                                        return;
+                                    if (!isDragging)
+                                        beginDrag();
+                                    const containerWidth = target.parentElement?.getBoundingClientRect().width || 0;
+                                    const minWidth = containerWidth > 0 ? Math.max(120, containerWidth * 0.2) : 120;
+                                    const maxWidth = containerWidth > 0 ? containerWidth : maxHeight;
+                                    const nextWidth = clamp(startWidth + deltaX, minWidth, maxWidth);
+                                    pendingWidth = nextWidth;
+                                    if (resizeProxy)
+                                        resizeProxy.style.width = `${Math.round(nextWidth)}px`;
+                                    if (shouldShowProxy)
+                                        return;
+                                    if (frame)
+                                        cancelAnimationFrame(frame);
+                                    frame = requestAnimationFrame(() => dispatchWidth(nextWidth));
+                                };
+                                const cleanup = () => {
+                                    if (frame)
+                                        cancelAnimationFrame(frame);
+                                    window.removeEventListener('mousemove', onMove);
+                                    window.removeEventListener('mouseup', onUp);
+                                    if (appliedDragCursor) {
+                                        document.body.style.cursor = previousCursor;
+                                        document.body.style.userSelect = previousSelect;
+                                    }
+                                    restoreTarget?.();
+                                    removeDragListeners = null;
+                                };
+                                const onUp = () => {
+                                    if (!isDragging) {
+                                        const shouldOpen = Boolean(anchor) &&
+                                            !(anchor?.classList.contains('is-width-toolbar-open') ?? false);
+                                        closeOpenToolbars(view, shouldOpen && anchor ? anchor : null);
+                                        if (shouldOpen)
+                                            anchor?.classList.remove('is-toolbar-open');
+                                        anchor?.classList.toggle('is-width-toolbar-open', shouldOpen);
+                                        cleanup();
+                                        return;
+                                    }
+                                    if (shouldShowProxy)
+                                        dispatchWidth(pendingWidth);
+                                    cleanup();
+                                };
+                                removeDragListeners?.();
+                                window.addEventListener('mousemove', onMove);
+                                window.addEventListener('mouseup', onUp);
+                                removeDragListeners = cleanup;
+                                return true;
+                            }
                             const handle = event.target.closest('.tiptap-media-resize-handle');
                             if (!handle) {
                                 closeOpenToolbars(view);
@@ -556,7 +964,9 @@ export default Extension.create({
                             const startY = event.clientY;
                             const startHeight = resolveStartHeight(resizeMeta.kind, node, target);
                             const imageRatio = resizeMeta.kind === 'image' ? resolveImageRatio(node, target) : 1;
-                            const shouldShowProxy = resizeMeta.kind !== 'image';
+                            const shouldShowProxy = true;
+                            const currentHorizontalAlign = normalizeHorizontalAlignAttr(node.attrs.horizontalAlign);
+                            const startWidth = resolveElementWidth(node, target);
                             let resizeProxy = null;
                             let restoreTarget = null;
                             let frame = 0;
@@ -596,6 +1006,21 @@ export default Extension.create({
                                     resizeProxy = document.createElement('div');
                                     resizeProxy.className = 'tiptap-media-resize-proxy';
                                     resizeProxy.style.height = `${Math.round(startHeight)}px`;
+                                    if (startWidth > 0) {
+                                        resizeProxy.style.width = `${Math.round(startWidth)}px`;
+                                    }
+                                    if (currentHorizontalAlign === 'center') {
+                                        resizeProxy.style.marginLeft = 'auto';
+                                        resizeProxy.style.marginRight = 'auto';
+                                    }
+                                    else if (currentHorizontalAlign === 'right') {
+                                        resizeProxy.style.marginLeft = 'auto';
+                                        resizeProxy.style.marginRight = '0';
+                                    }
+                                    else {
+                                        resizeProxy.style.marginLeft = '0';
+                                        resizeProxy.style.marginRight = '0';
+                                    }
                                     target.parentElement.insertBefore(resizeProxy, targetElement);
                                     targetElement.style.display = 'none';
                                     restoreTarget = () => {
@@ -642,6 +1067,8 @@ export default Extension.create({
                                 if (!isDragging) {
                                     const shouldOpen = Boolean(anchor) && !(anchor?.classList.contains('is-toolbar-open') ?? false);
                                     closeOpenToolbars(view, shouldOpen && anchor ? anchor : null);
+                                    if (shouldOpen)
+                                        anchor?.classList.remove('is-width-toolbar-open');
                                     anchor?.classList.toggle('is-toolbar-open', shouldOpen);
                                     cleanup();
                                     return;

package/dist/plugin/upload/skeleton/index.d.ts

@@ -18,7 +18,7 @@ type InsertUploadSkeletonOptions = {
 type ReplaceOptions = {
     select?: boolean;
 };
-type EditorLike = Pick<Editor, 'state' | 'view'>;
+type EditorLike = Pick<Editor, 'view'>;
 export type UploadSkeletonHandle = {
     id: string;
     exists: () => boolean;

package/dist/plugin/upload/skeleton/index.js

@@ -11,20 +11,16 @@ const defaultHeight = {
     block: 180
 };
 function findUploadSkeleton(doc, id) {
-    let foundPos = null;
-    let foundNode = null;
+    let target = null;
     doc.descendants((node, pos) => {
         if (node.type.name !== UPLOAD_SKELETON_NODE)
             return;
         if (node.attrs.uploadId !== id)
             return;
-        foundPos = pos;
-        foundNode = node;
+        target = { pos, node };
         return false;
     });
-    if (foundPos === null || foundNode === null)
-        return null;
-    return { pos: foundPos, node: foundNode };
+    return target;
 }
 function tryCreateNodeSelection(doc, pos) {
     if (pos < 0 || pos > doc.content.size)
@@ -40,15 +36,16 @@ function tryCreateNodeSelection(doc, pos) {
     }
 }
 export function insertUploadSkeleton(editor, { kind = 'block', height = defaultHeight[kind], at, select = true, insertParagraph = true } = {}) {
-    const skeletonType = editor.state.schema.nodes[UPLOAD_SKELETON_NODE];
+    const getState = () => editor.view.state;
+    const skeletonType = getState().schema.nodes[UPLOAD_SKELETON_NODE];
     if (!skeletonType)
         return null;
     const clampedHeight = Math.max(44, Math.min(1200, Math.round(height)));
     const uploadId = `upload-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
     const node = skeletonType.create({ uploadId, kind, height: clampedHeight });
-    const paragraph = editor.state.schema.nodes.paragraph?.create();
-    const safePos = Math.max(0, Math.min(at ?? editor.state.selection.from, editor.state.doc.content.size));
-    const tr = editor.state.tr.insert(safePos, node);
+    const paragraph = getState().schema.nodes.paragraph?.create();
+    const safePos = Math.max(0, Math.min(at ?? getState().selection.from, getState().doc.content.size));
+    const tr = getState().tr.insert(safePos, node);
     if (insertParagraph && paragraph) {
         tr.insert(safePos + node.nodeSize, paragraph);
     }
@@ -60,21 +57,22 @@ export function insertUploadSkeleton(editor, { kind = 'block', height = defaultH
     editor.view.dispatch(tr);
     return {
         id: uploadId,
-        exists: () => Boolean(findUploadSkeleton(editor.state.doc, uploadId)),
+        exists: () => Boolean(findUploadSkeleton(getState().doc, uploadId)),
         replaceWith: (content, options = {}) => {
-            const target = findUploadSkeleton(editor.state.doc, uploadId);
+            const state = getState();
+            const target = findUploadSkeleton(state.doc, uploadId);
             if (!target)
                 return false;
             if (!content?.type)
                 return false;
             let nextNode;
             try {
-                nextNode = editor.state.schema.nodeFromJSON(content);
+                nextNode = state.schema.nodeFromJSON(content);
             }
             catch {
                 return false;
             }
-            const tr = editor.state.tr.replaceWith(target.pos, target.pos + target.node.nodeSize, nextNode);
+            const tr = state.tr.replaceWith(target.pos, target.pos + target.node.nodeSize, nextNode);
             if (options.select ?? true) {
                 const nodeSelection = tryCreateNodeSelection(tr.doc, target.pos);
                 if (nodeSelection)
@@ -84,16 +82,17 @@ export function insertUploadSkeleton(editor, { kind = 'block', height = defaultH
             return true;
         },
         remove: () => {
-            const target = findUploadSkeleton(editor.state.doc, uploadId);
+            const state = getState();
+            const target = findUploadSkeleton(state.doc, uploadId);
             if (!target)
                 return false;
             const removeFrom = target.pos;
             let removeTo = target.pos + target.node.nodeSize;
-            const nextNode = editor.state.doc.nodeAt(removeTo);
+            const nextNode = state.doc.nodeAt(removeTo);
             if (nextNode?.type.name === 'paragraph' && nextNode.content.size === 0) {
                 removeTo += nextNode.nodeSize;
             }
-            editor.view.dispatch(editor.state.tr.deleteRange(removeFrom, removeTo));
+            editor.view.dispatch(state.tr.deleteRange(removeFrom, removeTo));
             return true;
         }
     };

package/dist/tiptap/Command.svelte

@@ -12,11 +12,9 @@
 	import { quartOut } from 'svelte/easing';
 	import defaultI18n, { I18N_CONTEXT, type I18nTranslate } from '../i18n';
 
-	const editor = getContext<{ v: any }>('editor');
 	const i18nFromContext = getContext<I18nTranslate | undefined>(I18N_CONTEXT);
 	const i18n: I18nTranslate = (...args) =>
 		i18nFromContext ? i18nFromContext(...args) : defaultI18n(...args);
-	const tiptap = $derived(editor.v);
 
 	let height = $state(0);
 	let input = $state(''),
@@ -32,7 +30,6 @@
 		if (!editor || !range) return;
 
 		item.command({ editor, range });
-		setTimeout(() => tiptap?.commands?.focus?.());
 	}
 
 	function runDetailCommand() {

package/dist/tiptap/TipTap.svelte

@@ -18,7 +18,6 @@
 		type I18nTranslate
 	} from '../i18n';
 	import type { UploadFn } from '../plugin/image/dragdrop';
-	import { fallbackUpload } from '../plugin/image/dragdrop';
 	import MediaResize, { type ResizeOptions } from '../plugin/resize';
 	import { Render } from 'nunui';
 
@@ -51,7 +50,7 @@
 		ref = $bindable(null),
 		options = {},
 		loaded = $bindable(false),
-		imageUpload = fallbackUpload,
+		imageUpload,
 		style = '',
 		blocks = [],
 		placeholder,
@@ -82,6 +81,7 @@
 		'data-resize-min-height',
 		'data-resize-max-height',
 		'data-resize-aspect-ratio',
+		'data-resize-horizontal-align',
 		'data-bubble-menu',
 		'data-hide-bubble-menu'
 	];
@@ -341,6 +341,10 @@
 		outline: 3px solid var(--primary);
 	}
 
+	.editable :global(.ProseMirror) {
+		position: relative;
+	}
+
 	.editable :global(.tiptap-media-resize-anchor) {
 		width: 100%;
 		display: flex;
@@ -353,6 +357,27 @@
 		overflow: visible;
 	}
 
+	.editable :global(.tiptap-media-resize-anchor.is-image-anchor) {
+		position: relative;
+		display: block;
+		width: 100%;
+		height: 0;
+		margin: 0;
+		z-index: 4;
+	}
+
+	.editable :global(.tiptap-media-resize-anchor.is-image-anchor .tiptap-media-resize-controls) {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		line-height: 0;
+		pointer-events: none;
+		overflow: visible;
+	}
+
 	.editable :global(.tiptap-media-resize-handle) {
 		appearance: none;
 		-webkit-appearance: none;
@@ -383,6 +408,39 @@
 		transform: translateY(1px);
 	}
 
+	.editable :global(.tiptap-media-width-resize-handle) {
+		appearance: none;
+		-webkit-appearance: none;
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 12px;
+		height: 12px;
+		margin: 0;
+		padding: 0;
+		border: 1px solid var(--primary-light3, rgba(120, 120, 120, 0.45));
+		border-radius: 999px;
+		background: var(--primary-light6, rgba(120, 120, 120, 0.2));
+		cursor: ew-resize;
+		pointer-events: auto;
+		transform: translate(40%, -40%);
+		transition:
+			background-color 0.15s ease,
+			border-color 0.15s ease,
+			transform 0.15s ease;
+	}
+
+	.editable :global(.tiptap-media-width-resize-handle:hover),
+	.editable :global(.tiptap-media-width-resize-handle:focus-visible) {
+		background: var(--primary-light4, rgba(120, 120, 120, 0.35));
+		border-color: var(--primary-light2, rgba(100, 100, 100, 0.55));
+		outline: none;
+	}
+
+	.editable :global(.tiptap-media-width-resize-handle:active) {
+		transform: translate(40%, -40%) scale(0.95);
+	}
+
 	.editable :global(.tiptap-media-aspect-ratio-toolbar) {
 		display: none;
 		align-items: center;
@@ -402,12 +460,81 @@
 		white-space: nowrap;
 	}
 
+	.editable :global(.tiptap-media-width-toolbar) {
+		display: none;
+		align-items: center;
+		gap: 4px;
+		padding: 4px;
+		border: 1px solid var(--primary-light3, rgba(120, 120, 120, 0.4));
+		border-radius: 999px;
+		background: var(--surface, #fff);
+		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+		pointer-events: auto;
+		line-height: 1;
+		position: absolute;
+		top: calc(100% + 6px);
+		right: 0;
+		z-index: 4;
+		white-space: nowrap;
+	}
+
 	.editable
 		:global(.tiptap-media-resize-anchor.is-toolbar-open .tiptap-media-aspect-ratio-toolbar) {
 		display: flex;
 	}
 
-	.editable :global(.tiptap-media-aspect-ratio-option) {
+	.editable :global(.tiptap-media-resize-anchor.is-width-toolbar-open .tiptap-media-width-toolbar) {
+		display: flex;
+	}
+
+	.editable :global(.tiptap-media-toolbar-separator) {
+		width: 1px;
+		height: 16px;
+		background: var(--primary-light2, rgba(120, 120, 120, 0.35));
+		opacity: 0.9;
+	}
+
+	.editable :global(.tiptap-media-toolbar-group-icon) {
+		width: 14px;
+		height: 14px;
+		border: 1px solid var(--primary-light3, rgba(120, 120, 120, 0.45));
+		border-radius: 4px;
+		color: var(--on-surface, #333);
+		opacity: 0.75;
+		flex: 0 0 auto;
+		pointer-events: none;
+	}
+
+	.editable :global(.tiptap-media-toolbar-group-icon[data-group='aspect']) {
+		background: linear-gradient(
+				135deg,
+				transparent 42%,
+				currentColor 43%,
+				currentColor 57%,
+				transparent 58%
+			)
+			center / 100% 100% no-repeat;
+	}
+
+	.editable :global(.tiptap-media-toolbar-group-icon[data-group='align']) {
+		background:
+			linear-gradient(currentColor, currentColor) left 2px top 3px / 8px 1.5px no-repeat,
+			linear-gradient(currentColor, currentColor) center top 6px / 10px 1.5px no-repeat,
+			linear-gradient(currentColor, currentColor) right 2px top 9px / 8px 1.5px no-repeat;
+	}
+
+	.editable :global(.tiptap-media-toolbar-group-icon[data-group='width']) {
+		background:
+			linear-gradient(currentColor, currentColor) center / 8px 1.5px no-repeat,
+			linear-gradient(45deg, transparent 38%, currentColor 39%, currentColor 61%, transparent 62%)
+				left 2px center / 4px 4px no-repeat,
+			linear-gradient(-45deg, transparent 38%, currentColor 39%, currentColor 61%, transparent 62%)
+				right 2px center / 4px 4px no-repeat;
+	}
+
+	.editable :global(.tiptap-media-aspect-ratio-option),
+	.editable :global(.tiptap-media-horizontal-align-option),
+	.editable :global(.tiptap-media-width-option) {
 		appearance: none;
 		-webkit-appearance: none;
 		margin: 0;
@@ -423,12 +550,18 @@
 	}
 
 	.editable :global(.tiptap-media-aspect-ratio-option:hover),
-	.editable :global(.tiptap-media-aspect-ratio-option:focus-visible) {
+	.editable :global(.tiptap-media-aspect-ratio-option:focus-visible),
+	.editable :global(.tiptap-media-horizontal-align-option:hover),
+	.editable :global(.tiptap-media-horizontal-align-option:focus-visible),
+	.editable :global(.tiptap-media-width-option:hover),
+	.editable :global(.tiptap-media-width-option:focus-visible) {
 		background: var(--primary-light1, rgba(120, 120, 120, 0.14));
 		outline: none;
 	}
 
-	.editable :global(.tiptap-media-aspect-ratio-option[aria-pressed='true']) {
+	.editable :global(.tiptap-media-aspect-ratio-option[aria-pressed='true']),
+	.editable :global(.tiptap-media-horizontal-align-option[aria-pressed='true']),
+	.editable :global(.tiptap-media-width-option[aria-pressed='true']) {
 		background: var(--primary-light4, rgba(120, 120, 120, 0.3));
 		color: var(--on-primary, #000);
 	}
@@ -469,6 +602,10 @@
 			position: relative;
 		}
 
+		& :global(figure[data-bubble-menu='false']) {
+			margin: 0;
+		}
+
 		& :global(code.inline) {
 			background: var(--primary-light1);
 			padding: 2px 4px;
@@ -535,8 +672,38 @@
 		& :global(iframe),
 		& :global(embed) {
 			display: block;
-			width: 100%;
 			max-width: 100%;
+			margin-left: var(--tiptap-media-horizontal-margin-left, 0);
+			margin-right: var(--tiptap-media-horizontal-margin-right, 0);
+		}
+
+		& :global(img[data-resize-horizontal-align]) {
+			display: block;
+			margin-left: var(--tiptap-media-horizontal-margin-left, 0);
+			margin-right: var(--tiptap-media-horizontal-margin-right, 0);
+		}
+
+		& :global(img[width='100%']) {
+			width: 100%;
+		}
+
+		& :global(img[width='50%']) {
+			width: 50%;
+		}
+
+		& :global([data-resize-horizontal-align='left']) {
+			--tiptap-media-horizontal-margin-left: 0;
+			--tiptap-media-horizontal-margin-right: auto;
+		}
+
+		& :global([data-resize-horizontal-align='center']) {
+			--tiptap-media-horizontal-margin-left: auto;
+			--tiptap-media-horizontal-margin-right: auto;
+		}
+
+		& :global([data-resize-horizontal-align='right']) {
+			--tiptap-media-horizontal-margin-left: auto;
+			--tiptap-media-horizontal-margin-right: 0;
 		}
 
 		& :global([data-resize-aspect-ratio='16:9']) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@seorii/tiptap",
-	"version": "0.4.3",
+	"version": "0.4.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",