@seorii/tiptap 0.4.4 → 0.4.6

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

@@ -10,5 +10,7 @@ declare module '@tiptap/core' {
         };
     }
 }
-declare const _default: Node<any, any>[];
+declare const _default: Node<{
+    HTMLAttributes: {};
+}, any>[];
 export default _default;

package/dist/plugin/columns/index.js

@@ -1,6 +1,42 @@
 import { Node, mergeAttributes } from '@tiptap/core';
+import { NodeSelection, Plugin, PluginKey } from '@tiptap/pm/state';
 import './style.css';
 const normalizeColumnCount = (value) => (Number(value) === 3 ? 3 : 2);
+const columnsSelectionPluginKey = new PluginKey('tiptap-columns-selection');
+const isColumnsSelectHandleHit = (element, event) => {
+    const rect = element.getBoundingClientRect();
+    const handleInset = 4;
+    const handleSize = 32;
+    return (event.clientX >= rect.right - handleSize - handleInset &&
+        event.clientX <= rect.right - handleInset &&
+        event.clientY >= rect.top + handleInset &&
+        event.clientY <= rect.top + handleSize + handleInset);
+};
+const findNodePosByDOM = (view, element, nodeName) => {
+    let found = null;
+    view.state.doc.descendants((node, pos) => {
+        if (found !== null || node.type.name !== nodeName)
+            return;
+        if (view.nodeDOM(pos) === element) {
+            found = pos;
+            return false;
+        }
+    });
+    return found;
+};
+const 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;
+    }
+};
 const Column = Node.create({
     name: 'column',
     content: 'block+',
@@ -31,6 +67,7 @@ const Columns = Node.create({
     isolating: true,
     defining: true,
     draggable: true,
+    selectable: true,
     addOptions() {
         return {
             HTMLAttributes: {}
@@ -83,6 +120,40 @@ const Columns = Node.create({
             setTwoColumns: () => ({ commands }) => commands.setColumns(2),
             setThreeColumns: () => ({ commands }) => commands.setColumns(3)
         };
+    },
+    addProseMirrorPlugins() {
+        const editor = this.editor;
+        const nodeName = this.name;
+        return [
+            new Plugin({
+                key: columnsSelectionPluginKey,
+                props: {
+                    handleDOMEvents: {
+                        mousedown(view, event) {
+                            if (!editor.isEditable)
+                                return false;
+                            if (!(event.target instanceof HTMLElement))
+                                return false;
+                            const columnsElement = event.target.closest('.tiptap-columns');
+                            if (!columnsElement || !isColumnsSelectHandleHit(columnsElement, event)) {
+                                return false;
+                            }
+                            const pos = findNodePosByDOM(view, columnsElement, nodeName);
+                            if (pos === null)
+                                return false;
+                            const selection = tryCreateNodeSelection(view.state.doc, pos);
+                            if (!selection)
+                                return false;
+                            event.preventDefault();
+                            event.stopPropagation();
+                            view.dispatch(view.state.tr.setSelection(selection).scrollIntoView());
+                            view.focus();
+                            return true;
+                        }
+                    }
+                }
+            })
+        ];
     }
 });
 export default [Columns, Column];

package/dist/plugin/columns/style.css

@@ -1,4 +1,5 @@
 .tiptap-columns {
+	position: relative;
 	display: grid;
 	gap: 12px;
 	margin: 12px 0;
@@ -12,6 +13,13 @@
 	grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+@media (max-width: 768px) {
+	.tiptap-columns.columns-2,
+	.tiptap-columns.columns-3 {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
 .tiptap-column {
 	min-width: 0;
 	padding: 10px 12px;
@@ -35,3 +43,40 @@
 .editable .tiptap-column:hover {
 	border-color: var(--primary-light7, rgba(112, 112, 112, 0.65));
 }
+
+.editable .tiptap-columns::before {
+	position: absolute;
+	z-index: 1;
+	top: 4px;
+	right: 4px;
+	box-sizing: border-box;
+	width: 32px;
+	height: 32px;
+	border: 1px solid var(--primary-light4, rgba(112, 112, 112, 0.4));
+	border-radius: 6px;
+	background-color: var(--surface, Canvas);
+	background-image: radial-gradient(currentColor 1.2px, transparent 1.2px);
+	background-position: 7px 7px;
+	background-size: 8px 8px;
+	color: var(--primary-light8, rgba(112, 112, 112, 0.75));
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+	content: '';
+	cursor: pointer;
+	opacity: 0;
+	transition:
+		opacity 0.15s ease,
+		border-color 0.15s ease,
+		color 0.15s ease;
+}
+
+.editable .tiptap-columns:hover::before,
+.editable .tiptap-columns.ProseMirror-selectednode::before {
+	opacity: 1;
+	border-color: var(--primary-light7, rgba(112, 112, 112, 0.65));
+	color: var(--primary, currentColor);
+}
+
+.editable .tiptap-columns.ProseMirror-selectednode {
+	outline: 3px solid var(--primary);
+	outline-offset: 2px;
+}

package/dist/plugin/image/dragdrop.js

@@ -71,14 +71,13 @@ export const dropImagePlugin = () => {
                     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
                             });
@@ -119,7 +118,7 @@ export const dropImagePlugin = () => {
                             reader.readAsDataURL(image);
                         }
                     });
-                    return false;
+                    return handledImagePaste;
                 },
                 drop: (view, event) => {
                     const imageUploader = window.__image_uploader;
@@ -142,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

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

@@ -1,2 +1,6 @@
-declare const _default: (crossorigin?: string) => import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>;
+import { type ImageOptions } from '@tiptap/extension-image';
+type ImageOptionsWithSizes = ImageOptions & {
+    sizes: string[];
+};
+declare const _default: (crossorigin?: string) => import("@tiptap/core").Node<ImageOptionsWithSizes, any>;
 export default _default;

package/dist/plugin/image/index.js

@@ -1,4 +1,4 @@
-import Image from '@tiptap/extension-image';
+import Image, {} from '@tiptap/extension-image';
 import { mergeAttributes } from '@tiptap/core';
 import { dropImagePlugin } from './dragdrop';
 export default (crossorigin = 'anonymous') => Image.extend({

package/dist/plugin/resize/index.js

@@ -453,7 +453,6 @@ function createResizeHandleDecoration(nodePos, widgetPos, resizeMeta, node) {
                 optionButton.setAttribute('aria-pressed', isActive ? 'true' : 'false');
                 toolbar.append(optionButton);
             }
-            hasToolbarItems = true;
             if (supportsBottomWidthPreset) {
                 const separator = document.createElement('span');
                 separator.className = 'tiptap-media-toolbar-separator';
@@ -816,7 +815,7 @@ export default Extension.create({
                                 const startY = event.clientY;
                                 const startHeight = resolveStartHeight(resizeMeta.kind, node, target);
                                 const targetParent = target.parentElement;
-                                const shouldShowProxy = resizeMeta.kind !== 'image' && Boolean(targetParent);
+                                const shouldShowProxy = Boolean(targetParent);
                                 const currentHorizontalAlign = normalizeHorizontalAlignAttr(node.attrs.horizontalAlign);
                                 const startWidth = Math.max(1, resolveElementWidth(node, target) ||
                                     targetParent?.getBoundingClientRect().width ||

package/dist/plugin/upload/skeleton/UploadSkeleton.svelte

@@ -47,7 +47,12 @@
 		position: absolute;
 		inset: 0;
 		transform: translateX(-120%);
-		background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.36), transparent 80%);
+		background: linear-gradient(
+			105deg,
+			transparent 20%,
+			rgba(255, 255, 255, 0.36),
+			transparent 80%
+		);
 		animation: shimmer 1.35s ease-in-out infinite;
 	}
 

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;
         }
     };
@@ -114,7 +113,7 @@ export default Node.create({
             kind: {
                 default: 'block',
                 parseHTML: (element) => element.getAttribute('data-upload-kind') || 'block',
-                renderHTML: (attributes) => attributes.kind ? { 'data-upload-kind': attributes.kind } : {}
+                renderHTML: (attributes) => (attributes.kind ? { 'data-upload-kind': attributes.kind } : {})
             },
             height: {
                 default: defaultHeight.block,

package/dist/tiptap/TipTap.svelte

@@ -43,6 +43,7 @@
 		resize?: boolean | ResizeOptions;
 	};
 
+	/* eslint-disable no-useless-assignment -- Svelte bindable props are read by parent bindings. */
 	let {
 		body = $bindable<string>(),
 		editable = false,
@@ -73,6 +74,7 @@
 		codeBlockLanguageLabels = {},
 		resize = true
 	}: Props = $props();
+	/* eslint-enable no-useless-assignment */
 
 	const scopedI18n: I18nTranslate = (...args) => translateWithLocale(locale, ...args);
 	const resizeDataAttrs = [
@@ -154,6 +156,9 @@
 		Promise.all([import('./tiptap'), import('@justinribeiro/lite-youtube')]).then(
 			([{ default: tt }]) => {
 				if (!untrack(() => mounted)) return;
+				const initialBody = untrack(() => san(body));
+				body = initialBody;
+				last = initialBody;
 				const editorPlaceholder = placeholder ?? scopedI18n('placeholder');
 				const optionPlugins = Array.isArray(options.plugins)
 					? [...options.plugins]
@@ -164,7 +169,7 @@
 					const resizeOptions = typeof resize === 'object' ? resize : {};
 					optionPlugins.unshift(MediaResize.configure(resizeOptions));
 				}
-				tiptap.v = ref = tt(element, r, {
+				tiptap.v = ref = tt(element, initialBody, {
 					placeholder: editorPlaceholder,
 					editable,
 					onTransaction: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@seorii/tiptap",
-	"version": "0.4.4",
+	"version": "0.4.6",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",
@@ -14,30 +14,30 @@
 		"page": "npm run build-page && node gh-pages.js"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.39.3",
+		"@eslint/js": "^10.0.1",
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.53.0",
+		"@sveltejs/kit": "^2.61.0",
 		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "6.2.4",
-		"@types/sanitize-html": "^2.16.0",
-		"@typescript-eslint/eslint-plugin": "^8.56.0",
-		"@typescript-eslint/parser": "^8.56.0",
-		"eslint": "^9.39.3",
+		"@sveltejs/vite-plugin-svelte": "7.1.2",
+		"@types/sanitize-html": "^2.16.1",
+		"@typescript-eslint/eslint-plugin": "^8.59.4",
+		"@typescript-eslint/parser": "^8.59.4",
+		"eslint": "^10.4.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.15.0",
+		"eslint-plugin-svelte": "^3.17.1",
 		"gh-pages": "^6.3.0",
-		"globals": "^17.3.0",
+		"globals": "^17.6.0",
 		"highlight.js": "^11.11.1",
-		"prettier": "^3.8.1",
-		"prettier-plugin-svelte": "^3.5.0",
-		"publint": "^0.3.17",
-		"svelte": "^5.53.2",
-		"svelte-check": "^4.4.3",
-		"svelte-eslint-parser": "^1.4.1",
+		"prettier": "^3.8.3",
+		"prettier-plugin-svelte": "^4.0.1",
+		"publint": "^0.3.21",
+		"svelte": "^5.55.9",
+		"svelte-check": "^4.4.8",
+		"svelte-eslint-parser": "^1.6.1",
 		"tslib": "^2.8.1",
-		"typescript": "^5.9.3",
-		"vite": "^7.3.1"
+		"typescript": "^6.0.3",
+		"vite": "^8.0.14"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
@@ -81,7 +81,7 @@
 		"prosemirror-transform": "^1.11.0",
 		"prosemirror-view": "^1.41.6",
 		"sanitize-html": "^2.17.1",
-		"svelte-awesome-color-picker": "^4.1.1",
+		"svelte-awesome-color-picker": "^4.1.2",
 		"svelte-tiptap": "^2",
 		"tippy.js": "^6.3.7"
 	},