@seorii/tiptap 0.3.0-next.9 → 0.4.0

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

@@ -1,5 +1,5 @@
 .ProseMirror {
-	.tableWrapper {
+	& .tableWrapper {
 		position: relative;
 		margin-top: 0.75em;
 		scrollbar-width: thin;
@@ -7,7 +7,7 @@
 		transition: all 0.1s ease-in-out;
 	}
 
-	.scrollable {
+	& .scrollable {
 		padding-left: 1em;
 		margin-left: -1em;
 		overflow: auto hidden;
@@ -16,7 +16,7 @@
 		transition: border 250ms ease-in-out 0s;
 	}
 
-	.scrollable-shadow {
+	& .scrollable-shadow {
 		position: absolute;
 		top: 0;
 		bottom: 0;
@@ -52,17 +52,17 @@
 		}
 	}
 
-	table {
+	& table {
 		margin-top: 1em;
 		border-radius: 4px;
 		border-collapse: collapse;
 		box-sizing: border-box;
 		width: 100% !important;
 
-		h1,
-		h2,
-		h3,
-		p {
+		& h1,
+		& h2,
+		& h3,
+		& p {
 			margin: 0;
 		}
 
@@ -72,15 +72,13 @@
 	}
 }
 
-.editable {
-	.ProseMirror {
-		.tableWrapper {
-			padding: 10px;
-		}
+.editable .ProseMirror {
+	& .tableWrapper {
+		padding: 10px;
+	}
 
-		.selectedCell {
-			border-style: double;
-			background: var(--primary-light3);
-		}
+	& .selectedCell {
+		border-style: double;
+		background: var(--primary-light3);
 	}
 }

package/dist/plugin/table/style.css

@@ -0,0 +1,4 @@
+@import './style/grip.css';
+@import './style/table.css';
+@import './style/cell.css';
+@import './style/resize.css';

package/dist/plugin/table/tableCell/index.js

@@ -18,14 +18,12 @@ export default BuiltInTableCell.extend({
         };
     },
     addProseMirrorPlugins() {
-        const { isEditable } = this.editor;
         return [
             new Plugin({
                 props: {
                     decorations: (state) => {
-                        if (!isEditable) {
-                            //return DecorationSet.empty;
-                        }
+                        if (!this.editor.isEditable)
+                            return DecorationSet.empty;
                         const { doc, selection } = state;
                         const decorations = [];
                         const cells = getCellsInColumn(0)(selection);

package/dist/plugin/table/tableHeader/index.js

@@ -18,12 +18,11 @@ export default BuiltInTableHeader.extend({
         };
     },
     addProseMirrorPlugins() {
-        const { isEditable } = this.editor;
         return [
             new Plugin({
                 props: {
                     decorations: (state) => {
-                        if (!isEditable)
+                        if (!this.editor.isEditable)
                             return DecorationSet.empty;
                         const { doc, selection } = state;
                         const decorations = [];

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

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { NodeViewWrapper } from 'svelte-tiptap';
+	import type { NodeViewProps } from '@tiptap/core';
+
+	type UploadSkeletonProps = Pick<NodeViewProps, 'node'>;
+	let { node }: UploadSkeletonProps = $props();
+
+	const kind = $derived.by(() => {
+		const raw = node.attrs?.kind;
+		return typeof raw === 'string' && raw.trim().length ? raw : 'block';
+	});
+	const frameHeight = $derived.by(() => {
+		const raw = Number.parseFloat(String(node.attrs?.height ?? ''));
+		const base = Number.isFinite(raw) ? raw : 180;
+		return Math.max(44, Math.min(1200, Math.round(base)));
+	});
+</script>
+
+<NodeViewWrapper>
+	<div class="wrapper" data-kind={kind} style={`height: ${frameHeight}px`}>
+		<div class="shine"></div>
+		<div class="bar top"></div>
+		<div class="bar mid"></div>
+		<div class="bar low"></div>
+	</div>
+</NodeViewWrapper>
+
+<style>
+	.wrapper {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		border-radius: 12px;
+		border: 1px solid var(--primary-light3, rgba(90, 90, 90, 0.25));
+		background: linear-gradient(
+			135deg,
+			var(--surface2, rgba(120, 120, 120, 0.1)),
+			var(--surface3, rgba(80, 80, 80, 0.2))
+		);
+	}
+
+	.wrapper[data-kind='file'] {
+		min-height: 56px;
+	}
+
+	.shine {
+		position: absolute;
+		inset: 0;
+		transform: translateX(-120%);
+		background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.36), transparent 80%);
+		animation: shimmer 1.35s ease-in-out infinite;
+	}
+
+	.bar {
+		position: absolute;
+		left: 14px;
+		right: 14px;
+		height: 10px;
+		border-radius: 999px;
+		background: rgba(255, 255, 255, 0.42);
+	}
+
+	.top {
+		top: 14px;
+		width: min(160px, 45%);
+	}
+
+	.mid {
+		top: 34px;
+		width: min(280px, 78%);
+	}
+
+	.low {
+		top: 54px;
+		width: min(220px, 62%);
+	}
+
+	.wrapper[data-kind='file'] .mid,
+	.wrapper[data-kind='file'] .low {
+		display: none;
+	}
+
+	.wrapper[data-kind='image'] .bar,
+	.wrapper[data-kind='pdf'] .bar,
+	.wrapper[data-kind='embed'] .bar {
+		opacity: 0.78;
+	}
+
+	@keyframes shimmer {
+		from {
+			transform: translateX(-120%);
+		}
+		to {
+			transform: translateX(120%);
+		}
+	}
+</style>

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

@@ -0,0 +1,5 @@
+import type { NodeViewProps } from '@tiptap/core';
+type UploadSkeletonProps = Pick<NodeViewProps, 'node'>;
+declare const UploadSkeleton: import("svelte").Component<UploadSkeletonProps, {}, "">;
+type UploadSkeleton = ReturnType<typeof UploadSkeleton>;
+export default UploadSkeleton;

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

@@ -0,0 +1,30 @@
+import { Node, type Editor, type JSONContent } from '@tiptap/core';
+export declare const UPLOAD_SKELETON_NODE = "tiptap-upload-skeleton";
+declare const defaultHeight: {
+    readonly image: 220;
+    readonly file: 56;
+    readonly pdf: 420;
+    readonly embed: 420;
+    readonly block: 180;
+};
+type UploadSkeletonKind = keyof typeof defaultHeight;
+type InsertUploadSkeletonOptions = {
+    kind?: UploadSkeletonKind;
+    height?: number;
+    at?: number;
+    select?: boolean;
+    insertParagraph?: boolean;
+};
+type ReplaceOptions = {
+    select?: boolean;
+};
+type EditorLike = Pick<Editor, 'state' | 'view'>;
+export type UploadSkeletonHandle = {
+    id: string;
+    exists: () => boolean;
+    replaceWith: (content: JSONContent, options?: ReplaceOptions) => boolean;
+    remove: () => boolean;
+};
+export declare function insertUploadSkeleton(editor: EditorLike, { kind, height, at, select, insertParagraph }?: InsertUploadSkeletonOptions): UploadSkeletonHandle | null;
+declare const _default: Node<any, any>;
+export default _default;

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

@@ -0,0 +1,147 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { NodeSelection } from '@tiptap/pm/state';
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+import UploadSkeleton from './UploadSkeleton.svelte';
+export const UPLOAD_SKELETON_NODE = 'tiptap-upload-skeleton';
+const defaultHeight = {
+    image: 220,
+    file: 56,
+    pdf: 420,
+    embed: 420,
+    block: 180
+};
+function findUploadSkeleton(doc, id) {
+    let foundPos = null;
+    let foundNode = null;
+    doc.descendants((node, pos) => {
+        if (node.type.name !== UPLOAD_SKELETON_NODE)
+            return;
+        if (node.attrs.uploadId !== id)
+            return;
+        foundPos = pos;
+        foundNode = node;
+        return false;
+    });
+    if (foundPos === null || foundNode === null)
+        return null;
+    return { pos: foundPos, node: foundNode };
+}
+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 function insertUploadSkeleton(editor, { kind = 'block', height = defaultHeight[kind], at, select = true, insertParagraph = true } = {}) {
+    const skeletonType = editor.state.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);
+    if (insertParagraph && paragraph) {
+        tr.insert(safePos + node.nodeSize, paragraph);
+    }
+    if (select) {
+        const nodeSelection = tryCreateNodeSelection(tr.doc, safePos);
+        if (nodeSelection)
+            tr.setSelection(nodeSelection);
+    }
+    editor.view.dispatch(tr);
+    return {
+        id: uploadId,
+        exists: () => Boolean(findUploadSkeleton(editor.state.doc, uploadId)),
+        replaceWith: (content, options = {}) => {
+            const target = findUploadSkeleton(editor.state.doc, uploadId);
+            if (!target)
+                return false;
+            if (!content?.type)
+                return false;
+            let nextNode;
+            try {
+                nextNode = editor.state.schema.nodeFromJSON(content);
+            }
+            catch {
+                return false;
+            }
+            const tr = editor.state.tr.replaceWith(target.pos, target.pos + target.node.nodeSize, nextNode);
+            if (options.select ?? true) {
+                const nodeSelection = tryCreateNodeSelection(tr.doc, target.pos);
+                if (nodeSelection)
+                    tr.setSelection(nodeSelection);
+            }
+            editor.view.dispatch(tr);
+            return true;
+        },
+        remove: () => {
+            const target = findUploadSkeleton(editor.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);
+            if (nextNode?.type.name === 'paragraph' && nextNode.content.size === 0) {
+                removeTo += nextNode.nodeSize;
+            }
+            editor.view.dispatch(editor.state.tr.deleteRange(removeFrom, removeTo));
+            return true;
+        }
+    };
+}
+export default Node.create({
+    name: UPLOAD_SKELETON_NODE,
+    group: 'block',
+    atom: true,
+    draggable: false,
+    selectable: true,
+    addAttributes() {
+        return {
+            uploadId: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('data-upload-id'),
+                renderHTML: (attributes) => attributes.uploadId ? { 'data-upload-id': attributes.uploadId } : {}
+            },
+            kind: {
+                default: 'block',
+                parseHTML: (element) => element.getAttribute('data-upload-kind') || 'block',
+                renderHTML: (attributes) => attributes.kind ? { 'data-upload-kind': attributes.kind } : {}
+            },
+            height: {
+                default: defaultHeight.block,
+                parseHTML: (element) => {
+                    const value = Number.parseInt(element.getAttribute('data-upload-height') || '', 10);
+                    return Number.isFinite(value) ? value : defaultHeight.block;
+                },
+                renderHTML: (attributes) => {
+                    const raw = Number.parseFloat(String(attributes.height ?? defaultHeight.block));
+                    const height = Number.isFinite(raw) ? Math.max(44, Math.min(1200, Math.round(raw))) : 180;
+                    return { 'data-upload-height': String(height) };
+                }
+            }
+        };
+    },
+    parseHTML() {
+        return [{ tag: UPLOAD_SKELETON_NODE }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            UPLOAD_SKELETON_NODE,
+            mergeAttributes(HTMLAttributes, {
+                'data-bubble-menu': 'false'
+            })
+        ];
+    },
+    addNodeView() {
+        return SvelteNodeViewRenderer(UploadSkeleton);
+    }
+});

package/dist/plugin/youtube.js

@@ -5,7 +5,7 @@ const youtubeExtractId = (url) => {
     const match = youtubeRegExp.exec(url.trim());
     return match ? match[1] : false;
 };
-const videoPlayerStaticAttributes = { nocookie: true };
+const videoPlayerStaticAttributes = { nocookie: true, 'data-bubble-menu': 'false' };
 export default Node.create({
     name: 'lite-youtube',
     content: '',