@seorii/tiptap 0.3.0-next.9 → 0.4.0

package/dist/plugin/resize/index.js

@@ -0,0 +1,454 @@
+import { Extension } from '@tiptap/core';
+import { NodeSelection, Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+const resizableTypes = ['image', 'iframe', 'embed', 'tiptap-midibus'];
+const typeSet = new Set(resizableTypes);
+const pluginKey = new PluginKey('tiptap-media-height-resize');
+const defaultHeight = {
+    image: 360,
+    iframe: 600,
+    embed: 500,
+    'tiptap-midibus': 600,
+    attr: 420
+};
+const minHeight = {
+    image: 120,
+    iframe: 180,
+    embed: 200,
+    'tiptap-midibus': 220,
+    attr: 160
+};
+const maxHeight = 1600;
+function isResizableType(value) {
+    return typeSet.has(value);
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function parseNumericSize(value) {
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? value : null;
+    if (typeof value !== 'string')
+        return null;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    const normalized = trimmed.toLowerCase().endsWith('px') ? trimmed.slice(0, -2) : trimmed;
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function normalizeStringAttr(value) {
+    if (typeof value !== 'string')
+        return null;
+    const trimmed = value.trim();
+    return trimmed || null;
+}
+function hasResizeHandler(value) {
+    if (typeof value === 'string') {
+        const normalized = value.trim().toLowerCase();
+        if (!normalized)
+            return true;
+        return !['false', '0', 'off', 'no'].includes(normalized);
+    }
+    return Boolean(value);
+}
+function normalizeNumericAttr(value) {
+    const parsed = parseNumericSize(value);
+    if (parsed === null)
+        return null;
+    return String(Math.round(parsed));
+}
+function normalizeWidthAttr(value) {
+    if (typeof value === 'number')
+        return String(Math.round(value));
+    if (typeof value !== 'string')
+        return null;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    if (trimmed.endsWith('%'))
+        return trimmed;
+    return normalizeNumericAttr(trimmed);
+}
+function resolveResizeMeta(node) {
+    const typeName = node.type.name;
+    const kind = isResizableType(typeName)
+        ? typeName
+        : hasResizeHandler(node.attrs.resizeHandler)
+            ? 'attr'
+            : null;
+    if (!kind)
+        return null;
+    const minFromAttr = parseNumericSize(node.attrs.minHeight);
+    const maxFromAttr = parseNumericSize(node.attrs.maxHeight);
+    const resolvedMin = minFromAttr !== null ? Math.max(1, minFromAttr) : minHeight[kind];
+    const resolvedMax = maxFromAttr !== null ? Math.max(resolvedMin, maxFromAttr) : maxHeight;
+    return {
+        kind,
+        typeName,
+        minHeight: resolvedMin,
+        maxHeight: resolvedMax
+    };
+}
+function resolveImageRatio(node, element) {
+    if (element instanceof HTMLImageElement && element.naturalWidth && element.naturalHeight) {
+        return element.naturalWidth / element.naturalHeight;
+    }
+    const rect = element.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+        return rect.width / rect.height;
+    }
+    const width = parseNumericSize(node.attrs.width);
+    const height = parseNumericSize(node.attrs.height);
+    if (width && height)
+        return width / height;
+    return 1;
+}
+function resolveStartHeight(kind, node, element) {
+    const rect = element.getBoundingClientRect();
+    if (rect.height > 0)
+        return rect.height;
+    const fromAttr = parseNumericSize(node.attrs.height);
+    if (fromAttr !== null)
+        return fromAttr;
+    return defaultHeight[kind];
+}
+function resolveTargetElement(view, pos, resizeMeta, node) {
+    const nodeDom = view.nodeDOM(pos);
+    if (!(nodeDom instanceof HTMLElement))
+        return null;
+    if (resizeMeta.kind === 'image') {
+        if (nodeDom instanceof HTMLImageElement)
+            return nodeDom;
+        return nodeDom.querySelector('img');
+    }
+    if (resizeMeta.kind === 'iframe') {
+        if (nodeDom instanceof HTMLIFrameElement)
+            return nodeDom;
+        return nodeDom.querySelector('iframe');
+    }
+    if (resizeMeta.kind === 'embed') {
+        return (nodeDom.querySelector('[data-tiptap-pdf-container]') ||
+            nodeDom.querySelector('embed') ||
+            nodeDom);
+    }
+    if (resizeMeta.kind === 'attr') {
+        const preferredSelector = normalizeStringAttr(node.attrs.resizeTarget);
+        if (preferredSelector) {
+            try {
+                const preferredTarget = nodeDom.querySelector(preferredSelector);
+                if (preferredTarget)
+                    return preferredTarget;
+            }
+            catch {
+                // ignore invalid selector values
+            }
+        }
+        return (nodeDom.querySelector('[data-tiptap-resize-target]') ||
+            nodeDom.querySelector('[data-resize-target]') ||
+            nodeDom.querySelector('iframe, embed, img') ||
+            nodeDom);
+    }
+    return (nodeDom.querySelector('[data-tiptap-midibus-frame]') ||
+        nodeDom.querySelector('iframe') ||
+        nodeDom);
+}
+function buildResizeAttrs(kind, node, height, imageRatio) {
+    const attrs = { ...node.attrs };
+    const roundedHeight = String(Math.round(height));
+    if (kind === 'image') {
+        const roundedWidth = String(Math.max(1, Math.round(height * imageRatio)));
+        return { ...attrs, width: roundedWidth, height: roundedHeight };
+    }
+    if (kind === 'iframe' || kind === 'embed') {
+        return { ...attrs, width: attrs.width || '100%', height: roundedHeight };
+    }
+    return { ...attrs, height: roundedHeight };
+}
+function createResizeHandleDecoration(nodePos, widgetPos, resizeMeta) {
+    return Decoration.widget(widgetPos, () => {
+        const anchor = document.createElement('div');
+        anchor.className = 'tiptap-media-resize-anchor';
+        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');
+        anchor.append(button);
+        return anchor;
+    }, { side: 1, key: `media-resize-${nodePos}-${resizeMeta.typeName}-${resizeMeta.kind}` });
+}
+function tryCreateNodeSelection(doc, pos) {
+    if (pos < 0 || pos > doc.content.size)
+        return null;
+    const node = doc.nodeAt(pos);
+    if (!node || node.type.spec.selectable === false)
+        return null;
+    try {
+        return NodeSelection.create(doc, pos);
+    }
+    catch {
+        return null;
+    }
+}
+export default Extension.create({
+    name: 'tiptap-media-height-resize',
+    addOptions() {
+        return {
+            attributeTypes: [],
+            showHandleAlways: true,
+            showHandleOnActive: true
+        };
+    },
+    addGlobalAttributes() {
+        const attributeTypes = Array.from(new Set([...(this.options.attributeTypes || []), ...resizableTypes]));
+        return [
+            {
+                types: ['image'],
+                attributes: {
+                    width: {
+                        default: null,
+                        parseHTML: (element) => normalizeWidthAttr(element.getAttribute('width') || element.style.width),
+                        renderHTML: (attributes) => {
+                            const width = normalizeWidthAttr(attributes.width);
+                            return width ? { width } : {};
+                        }
+                    },
+                    height: {
+                        default: null,
+                        parseHTML: (element) => normalizeNumericAttr(element.getAttribute('height') || element.style.height),
+                        renderHTML: (attributes) => {
+                            const height = normalizeNumericAttr(attributes.height);
+                            return height ? { height } : {};
+                        }
+                    }
+                }
+            },
+            {
+                types: ['iframe'],
+                attributes: {
+                    width: {
+                        default: '100%',
+                        parseHTML: (element) => normalizeWidthAttr(element.getAttribute('width') || element.style.width) || '100%',
+                        renderHTML: (attributes) => {
+                            const width = normalizeWidthAttr(attributes.width) || '100%';
+                            return { width };
+                        }
+                    },
+                    height: {
+                        default: '600',
+                        parseHTML: (element) => normalizeNumericAttr(element.getAttribute('height') || element.style.height) || '600',
+                        renderHTML: (attributes) => {
+                            const height = normalizeNumericAttr(attributes.height) || '600';
+                            return { height };
+                        }
+                    }
+                }
+            },
+            {
+                types: attributeTypes,
+                attributes: {
+                    resizeHandler: {
+                        default: false,
+                        parseHTML: (element) => hasResizeHandler(element.getAttribute('data-resize-handler') ||
+                            element.getAttribute('resize-handler')),
+                        renderHTML: (attributes) => hasResizeHandler(attributes.resizeHandler)
+                            ? { 'data-resize-handler': 'true' }
+                            : {}
+                    },
+                    resizeTarget: {
+                        default: null,
+                        parseHTML: (element) => normalizeStringAttr(element.getAttribute('data-resize-target')),
+                        renderHTML: (attributes) => {
+                            const resizeTarget = normalizeStringAttr(attributes.resizeTarget);
+                            return resizeTarget ? { 'data-resize-target': resizeTarget } : {};
+                        }
+                    },
+                    minHeight: {
+                        default: null,
+                        parseHTML: (element) => normalizeNumericAttr(element.getAttribute('data-resize-min-height')),
+                        renderHTML: (attributes) => {
+                            const minHeight = normalizeNumericAttr(attributes.minHeight);
+                            return minHeight ? { 'data-resize-min-height': minHeight } : {};
+                        }
+                    },
+                    maxHeight: {
+                        default: null,
+                        parseHTML: (element) => normalizeNumericAttr(element.getAttribute('data-resize-max-height')),
+                        renderHTML: (attributes) => {
+                            const maxHeight = normalizeNumericAttr(attributes.maxHeight);
+                            return maxHeight ? { 'data-resize-max-height': maxHeight } : {};
+                        }
+                    }
+                }
+            }
+        ];
+    },
+    addProseMirrorPlugins() {
+        let removeDragListeners = null;
+        return [
+            new Plugin({
+                key: pluginKey,
+                appendTransaction: (transactions, _oldState, newState) => {
+                    if (!transactions.some((tr) => tr.docChanged))
+                        return null;
+                    if (newState.selection instanceof NodeSelection)
+                        return null;
+                    const nodeBefore = newState.selection.$from.nodeBefore;
+                    if (!nodeBefore)
+                        return null;
+                    const resizeMeta = resolveResizeMeta(nodeBefore);
+                    if (!resizeMeta)
+                        return null;
+                    const typeName = nodeBefore.type.name;
+                    const nodePos = newState.selection.from - nodeBefore.nodeSize;
+                    if (nodePos < 0)
+                        return null;
+                    if (newState.doc.nodeAt(nodePos)?.type.name !== typeName)
+                        return null;
+                    const nodeSelection = tryCreateNodeSelection(newState.doc, nodePos);
+                    if (!nodeSelection)
+                        return null;
+                    return newState.tr.setSelection(nodeSelection);
+                },
+                props: {
+                    decorations: (state) => {
+                        if (!this.editor.isEditable)
+                            return DecorationSet.empty;
+                        const showHandleAlways = this.options.showHandleAlways !== false;
+                        const showHandleOnActive = this.options.showHandleOnActive !== false;
+                        if (!showHandleAlways && !showHandleOnActive)
+                            return DecorationSet.empty;
+                        const decorations = [];
+                        const handled = new Set();
+                        if (showHandleAlways) {
+                            state.doc.descendants((node, pos) => {
+                                const resizeMeta = resolveResizeMeta(node);
+                                if (!resizeMeta || resizeMeta.kind === 'image' || node.isInline)
+                                    return;
+                                decorations.push(createResizeHandleDecoration(pos, pos + node.nodeSize, resizeMeta));
+                                handled.add(pos);
+                            });
+                        }
+                        if (showHandleOnActive && state.selection instanceof NodeSelection) {
+                            const pos = state.selection.from;
+                            const resizeMeta = resolveResizeMeta(state.selection.node);
+                            if (resizeMeta && !handled.has(pos)) {
+                                decorations.push(createResizeHandleDecoration(pos, pos + state.selection.node.nodeSize, resizeMeta));
+                            }
+                        }
+                        if (!decorations.length)
+                            return DecorationSet.empty;
+                        return DecorationSet.create(state.doc, decorations);
+                    },
+                    handleDOMEvents: {
+                        mousedown: (view, event) => {
+                            if (!this.editor.isEditable)
+                                return false;
+                            if (!(event.target instanceof HTMLElement))
+                                return false;
+                            const handle = event.target.closest('.tiptap-media-resize-handle');
+                            if (!handle)
+                                return false;
+                            const pos = Number.parseInt(handle.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)
+                                return false;
+                            const resizeKind = handle.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 startY = event.clientY;
+                            const startHeight = resolveStartHeight(resizeMeta.kind, node, target);
+                            const imageRatio = resizeMeta.kind === 'image' ? resolveImageRatio(node, target) : 1;
+                            const shouldShowProxy = resizeMeta.kind !== 'image';
+                            let resizeProxy = null;
+                            let restoreTarget = null;
+                            let frame = 0;
+                            let pendingHeight = startHeight;
+                            if (shouldShowProxy && target.parentElement) {
+                                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`;
+                                target.parentElement.insertBefore(resizeProxy, targetElement);
+                                targetElement.style.display = 'none';
+                                restoreTarget = () => {
+                                    targetElement.style.display = originalDisplay;
+                                    resizeProxy?.remove();
+                                    resizeProxy = null;
+                                    restoreTarget = null;
+                                };
+                            }
+                            const dispatchHeight = (height) => {
+                                const current = view.state.doc.nodeAt(pos);
+                                if (!current || current.type.name !== resizeMeta.typeName)
+                                    return;
+                                const currentMeta = resolveResizeMeta(current);
+                                if (!currentMeta)
+                                    return;
+                                const nextAttrs = buildResizeAttrs(currentMeta.kind, current, height, imageRatio);
+                                const nextWidth = 'width' in nextAttrs ? nextAttrs.width : current.attrs.width;
+                                if (nextAttrs.height === current.attrs.height && nextWidth === current.attrs.width)
+                                    return;
+                                const tr = view.state.tr.setNodeMarkup(pos, current.type, nextAttrs);
+                                view.dispatch(tr);
+                            };
+                            const previousCursor = document.body.style.cursor;
+                            const previousSelect = document.body.style.userSelect;
+                            document.body.style.cursor = 'ns-resize';
+                            document.body.style.userSelect = 'none';
+                            const onMove = (moveEvent) => {
+                                const nextHeight = clamp(startHeight + moveEvent.clientY - startY, resizeMeta.minHeight, resizeMeta.maxHeight);
+                                pendingHeight = nextHeight;
+                                if (resizeProxy)
+                                    resizeProxy.style.height = `${Math.round(nextHeight)}px`;
+                                if (shouldShowProxy)
+                                    return;
+                                if (frame)
+                                    cancelAnimationFrame(frame);
+                                frame = requestAnimationFrame(() => dispatchHeight(nextHeight));
+                            };
+                            const cleanup = () => {
+                                if (frame)
+                                    cancelAnimationFrame(frame);
+                                window.removeEventListener('mousemove', onMove);
+                                window.removeEventListener('mouseup', onUp);
+                                document.body.style.cursor = previousCursor;
+                                document.body.style.userSelect = previousSelect;
+                                restoreTarget?.();
+                                removeDragListeners = null;
+                            };
+                            const onUp = () => {
+                                if (shouldShowProxy)
+                                    dispatchHeight(pendingHeight);
+                                cleanup();
+                            };
+                            removeDragListeners?.();
+                            window.addEventListener('mousemove', onMove);
+                            window.addEventListener('mouseup', onUp);
+                            removeDragListeners = cleanup;
+                            return true;
+                        }
+                    }
+                },
+                view: () => ({
+                    destroy: () => {
+                        removeDragListeners?.();
+                    }
+                })
+            })
+        ];
+    }
+});

package/dist/plugin/table/index.d.ts

@@ -1,3 +1,3 @@
-import './style.scss';
+import './style.css';
 declare const _default: import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any>;
 export default _default;

package/dist/plugin/table/index.js

@@ -1,9 +1,20 @@
-import BuiltInTable from '@tiptap/extension-table';
+import { Table as BuiltInTable } from '@tiptap/extension-table';
 import { Plugin } from 'prosemirror-state';
 import { tableEditing, columnResizing } from 'prosemirror-tables';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import deleteTable from './deleteTable';
-import './style.scss';
+import './style.css';
+const resolveTableElement = (view, pos) => {
+    if (!view)
+        return null;
+    const dom = view.nodeDOM(pos);
+    if (dom instanceof HTMLTableElement)
+        return dom;
+    if (!(dom instanceof HTMLElement))
+        return null;
+    const table = dom.querySelector('table');
+    return table instanceof HTMLTableElement ? table : null;
+};
 export default BuiltInTable.extend({
     renderHTML() {
         return [
@@ -17,7 +28,6 @@ export default BuiltInTable.extend({
         ];
     },
     addProseMirrorPlugins() {
-        const { isEditable } = this.editor;
         return [
             tableEditing(),
             columnResizing({}),
@@ -26,25 +36,23 @@ export default BuiltInTable.extend({
                     decorations: (state) => {
                         const { doc } = state;
                         const decorations = [];
-                        let index = 0;
+                        const isEditable = this.editor.isEditable;
+                        const view = this.editor.view;
                         doc.descendants((node, pos) => {
                             if (node.type.name !== this.name)
                                 return;
-                            const elements = document.getElementsByClassName('as-table');
-                            const table = elements[index];
+                            const table = resolveTableElement(view, pos);
                             if (!table)
                                 return;
-                            if (!isEditable)
-                                table.classList.add('is-readonly');
-                            const element = table.parentElement;
-                            const shadowRight = !!(element && element.scrollWidth > element.clientWidth);
+                            table.classList.toggle('is-readonly', !isEditable);
+                            const scrollable = table.parentElement;
+                            const shadowRight = !!(scrollable instanceof HTMLElement && scrollable.scrollWidth > scrollable.clientWidth);
                             if (shadowRight)
                                 decorations.push(Decoration.widget(pos + 1, () => {
                                     const shadow = document.createElement('div');
                                     shadow.className = `scrollable-shadow right ${isEditable ? 'is-editable' : ''}`;
                                     return shadow;
                                 }));
-                            index++;
                         });
                         return DecorationSet.create(doc, decorations);
                     }

package/dist/plugin/table/style/{cell.scss → cell.css}

@@ -1,6 +1,6 @@
 .ProseMirror table {
-	td,
-	th {
+	& td,
+	& th {
 		position: relative;
 		min-width: 8px;
 		padding: 4px 8px;
@@ -9,9 +9,10 @@
 		border: 1px solid var(--primary-light3) !important;
 		transition: all 0.1s ease-in-out;
 		font-weight: normal;
+	}
 
-		> * {
-			margin-bottom: 0;
-		}
+	& td > *,
+	& th > * {
+		margin-bottom: 0;
 	}
 }

package/dist/plugin/table/style/{grip.scss → grip.css}

@@ -1,19 +1,16 @@
-$grip-margin: 3px;
-
 .ProseMirror table {
-	.grip-column {
+	& .grip-column {
 		position: absolute;
 		top: -0.7em;
 		left: 0;
 		z-index: 10;
 		display: block;
-		width: calc(100% - 2 * #{$grip-margin});
+		width: calc(100% - 6px);
 		height: 0.4em;
-		margin: 0 $grip-margin 3px $grip-margin;
+		margin: 0 3px 3px 3px;
 		background: var(--primary-light3);
 		opacity: 0;
 		border-radius: 10px;
-
 		transition: all 0.1s ease-in-out;
 
 		&:hover,
@@ -22,19 +19,18 @@ $grip-margin: 3px;
 		}
 	}
 
-	.grip-row {
+	& .grip-row {
 		position: absolute;
 		top: 0;
 		left: -0.7em;
 		z-index: 10;
 		display: block;
 		width: 0.4em;
-		height: calc(100% - 2 * #{$grip-margin});
-		margin: $grip-margin 3px $grip-margin 0;
+		height: calc(100% - 6px);
+		margin: 3px 3px 3px 0;
 		background: var(--primary-light3);
 		opacity: 0;
 		border-radius: 10px;
-
 		transition: all 0.1s ease-in-out;
 
 		&:hover,
@@ -43,7 +39,7 @@ $grip-margin: 3px;
 		}
 	}
 
-	.grip-table {
+	& .grip-table {
 		position: absolute;
 		top: -0.8em;
 		left: -0.8em;
@@ -54,7 +50,6 @@ $grip-margin: 3px;
 		background: var(--primary-light3);
 		border-radius: 50%;
 		opacity: 0;
-
 		transition: all 0.1s ease-in-out;
 
 		&:hover,
@@ -62,13 +57,13 @@ $grip-margin: 3px;
 			background: var(--primary-light6);
 		}
 	}
+}
 
-	.editable & {
-		.grip-column,
-		.grip-row,
-		.grip-table {
-			opacity: 1;
-			cursor: pointer;
-		}
+.editable .ProseMirror table {
+	& .grip-column,
+	& .grip-row,
+	& .grip-table {
+		opacity: 1;
+		cursor: pointer;
 	}
 }

package/dist/plugin/table/style/resize.css

@@ -0,0 +1,28 @@
+.ProseMirror {
+	& table .column-resize-handle {
+		position: absolute;
+		top: 0;
+		right: -2px;
+		bottom: -2px;
+		width: 4px;
+		pointer-events: none;
+		background-color: var(--primary-light6);
+		opacity: 0;
+	}
+
+	&.resize-cursor {
+		pointer-events: none;
+	}
+}
+
+.editable .ProseMirror {
+	& table .column-resize-handle {
+		opacity: 1;
+	}
+
+	&.resize-cursor {
+		pointer-events: initial;
+		cursor: ew-resize;
+		cursor: col-resize; /* stylelint-disable declaration-block-no-duplicate-properties */
+	}
+}