@seorii/tiptap 0.2.22 → 0.3.0-next.10

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

@@ -12,9 +12,9 @@ export default BuiltInTableHeader.extend({
                 parseHTML: (element) => {
                     const colwidth = element.getAttribute('colwidth');
                     return colwidth ? colwidth.split(',').map((item) => parseInt(item, 10)) : null;
-                },
+                }
             },
-            style: { default: null },
+            style: { default: null }
         };
     },
     addProseMirrorPlugins() {
@@ -51,9 +51,9 @@ export default BuiltInTableHeader.extend({
                             });
                         }
                         return DecorationSet.create(doc, decorations);
-                    },
-                },
-            }),
+                    }
+                }
+            })
         ];
-    },
+    }
 });

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

@@ -1,4 +1,4 @@
 import { TableRow as BuiltInTableRow } from '@tiptap/extension-table-row';
 export default BuiltInTableRow.extend({
-    allowGapCursor: false,
+    allowGapCursor: false
 });

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

@@ -6,9 +6,9 @@ export declare const findTable: (selection: Selection) => {
     pos: number;
     start: number;
     depth: number;
-    node: Node;
+    node: import("prosemirror-model").Node;
 } | undefined;
-export declare const isCellSelection: (selection: any) => boolean;
+export declare const isCellSelection: (selection: any) => selection is CellSelection;
 export declare const isTableAnySelected: (selection: any) => false | number[];
 export declare const isColumnSelected: (columnIndex: number) => (selection: any) => boolean;
 export declare const isRowSelected: (rowIndex: number) => (selection: any) => boolean;

package/dist/plugin/table/util.js

@@ -31,7 +31,7 @@ export const isColumnSelected = (columnIndex) => (selection) => {
             left: columnIndex,
             right: columnIndex + 1,
             top: 0,
-            bottom: map.height,
+            bottom: map.height
         })(selection);
     }
     return false;
@@ -43,7 +43,7 @@ export const isRowSelected = (rowIndex) => (selection) => {
             left: 0,
             right: map.width,
             top: rowIndex,
-            bottom: rowIndex + 1,
+            bottom: rowIndex + 1
         })(selection);
     }
     return false;
@@ -55,7 +55,7 @@ export const isTableSelected = (selection) => {
             left: 0,
             right: map.width,
             top: 0,
-            bottom: map.height,
+            bottom: map.height
         })(selection);
     }
     return false;
@@ -71,7 +71,7 @@ export const getCellsInColumn = (columnIndex) => (selection) => {
                     left: index,
                     right: index + 1,
                     top: 0,
-                    bottom: map.height,
+                    bottom: map.height
                 });
                 return acc.concat(cells.map((nodePos) => {
                     const node = table.node.nodeAt(nodePos);
@@ -94,7 +94,7 @@ export const getCellsInRow = (rowIndex) => (selection) => {
                     left: 0,
                     right: map.width,
                     top: index,
-                    bottom: index + 1,
+                    bottom: index + 1
                 });
                 return acc.concat(cells.map((nodePos) => {
                     const node = table.node.nodeAt(nodePos);
@@ -114,7 +114,7 @@ export const getCellsInTable = (selection) => {
             left: 0,
             right: map.width,
             top: 0,
-            bottom: map.height,
+            bottom: map.height
         });
         return cells.map((nodePos) => {
             const node = table.node.nodeAt(nodePos);
@@ -131,7 +131,7 @@ export const findParentNodeClosestToPos = ($pos, predicate) => {
                 pos: i > 0 ? $pos.before(i) : 0,
                 start: $pos.start(i),
                 depth: i,
-                node,
+                node
             };
         }
     }
@@ -155,7 +155,7 @@ const select = (type) => (index) => (tr) => {
                 left,
                 top,
                 right: isRowSelection ? right : left + 1,
-                bottom: isRowSelection ? top + 1 : bottom,
+                bottom: isRowSelection ? top + 1 : bottom
             });
             const cellsInLastRow = bottom - top === 1
                 ? cellsInFirstRow
@@ -163,7 +163,7 @@ const select = (type) => (index) => (tr) => {
                     left: isRowSelection ? left : right - 1,
                     top: isRowSelection ? bottom - 1 : top,
                     right,
-                    bottom,
+                    bottom
                 });
             const head = table.start + cellsInFirstRow[0];
             const anchor = table.start + cellsInLastRow[cellsInLastRow.length - 1];

package/dist/plugin/youtube.d.ts

@@ -1,8 +1,8 @@
-import { Node } from "@tiptap/core";
+import { Node } from '@tiptap/core';
 export interface VideoPlayerOptions {
     HTMLAttributes: Record<string, any>;
 }
-declare module "@tiptap/core" {
+declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         videoPlayer: {
             insertVideoPlayer: (options: {

package/dist/plugin/youtube.js

@@ -1,5 +1,5 @@
-import { Node, mergeAttributes } from "@tiptap/core";
-import { Plugin, PluginKey } from "prosemirror-state";
+import { Node, mergeAttributes } from '@tiptap/core';
+import { Plugin, PluginKey } from 'prosemirror-state';
 const youtubeRegExp = /^(?:(?:https?:)?\/\/)?(?:www\.)?(?:m\.)?(?:youtu(?:be)?\.com\/(?:v\/|embed\/|watch(?:\/|\?v=))|youtu\.be\/)((?:\w|-){11})(?:\S+)?$/;
 const youtubeExtractId = (url) => {
     const match = youtubeRegExp.exec(url.trim());
@@ -7,32 +7,32 @@ const youtubeExtractId = (url) => {
 };
 const videoPlayerStaticAttributes = { nocookie: true };
 export default Node.create({
-    name: "lite-youtube",
-    content: "",
-    marks: "",
-    group: "block",
+    name: 'lite-youtube',
+    content: '',
+    marks: '',
+    group: 'block',
     draggable: true,
     addAttributes() {
         return {
             videoid: {
-                default: null,
+                default: null
             },
             provider: {
-                default: "youtube",
-            },
+                default: 'youtube'
+            }
         };
     },
     parseHTML() {
         return [
             {
-                tag: "lite-youtube",
-            },
+                tag: 'lite-youtube'
+            }
         ];
     },
     renderHTML({ HTMLAttributes }) {
         return [
-            "lite-youtube",
-            mergeAttributes(videoPlayerStaticAttributes, this.options.HTMLAttributes, HTMLAttributes),
+            'lite-youtube',
+            mergeAttributes(videoPlayerStaticAttributes, this.options.HTMLAttributes, HTMLAttributes)
         ];
     },
     addCommands() {
@@ -43,19 +43,23 @@ export default Node.create({
                 if (videoid) {
                     const { selection } = editor.state;
                     const pos = selection.$head;
-                    return chain().insertContentAt(pos.before(), [{
+                    return chain()
+                        .insertContentAt(pos.before(), [
+                        {
                             type: this.name,
-                            attrs: { videoid, provider: "youtube" },
-                        }]).run();
+                            attrs: { videoid, provider: 'youtube' }
+                        }
+                    ])
+                        .run();
                 }
                 return false;
-            },
+            }
         };
     },
     addProseMirrorPlugins() {
         return [
             new Plugin({
-                key: new PluginKey("handlePasteVideoURL"),
+                key: new PluginKey('handlePasteVideoURL'),
                 props: {
                     handlePaste: (view, _event, slice) => {
                         if (slice.content.childCount !== 1)
@@ -69,7 +73,7 @@ export default Node.create({
                         const node = pos.node();
                         if (node.content.size > 0)
                             return false;
-                        let textContent = "", href = "";
+                        let textContent = '', href = '';
                         slice.content.forEach((node) => {
                             textContent += node.textContent;
                         });
@@ -87,14 +91,19 @@ export default Node.create({
                             }
                         if (!videoid)
                             return false;
-                        this.editor.chain().insertContentAt(pos.before(), [{
+                        this.editor
+                            .chain()
+                            .insertContentAt(pos.before(), [
+                            {
                                 type: this.name,
-                                attrs: { videoid, provider: "youtube" },
-                            }]).run();
+                                attrs: { videoid, provider: 'youtube' }
+                            }
+                        ])
+                            .run();
                         return true;
-                    },
-                },
-            }),
+                    }
+                }
+            })
         ];
-    },
+    }
 });

package/dist/tiptap/Bubble.svelte

@@ -1,45 +1,87 @@
-<script>import { BubbleMenu } from 'svelte-tiptap';
-import { getContext, tick } from 'svelte';
-import 'tippy.js/animations/shift-away-subtle.css';
-import ToolbarButton from './ToolbarButton.svelte';
-import { isTableAnySelected } from '../plugin/table/util';
-import deleteTable from '../plugin/table/deleteTable';
-import setMath from './setMath';
-import { Button, Icon, IconButton, Input, List, OneLine, Tooltip } from 'nunui';
-import i18n from '../i18n';
-import ColorPicker from 'svelte-awesome-color-picker';
-import { isTextSelection } from '@tiptap/core';
-export let colors = [], editable, override;
-const tiptap = getContext('editor');
-let link = false, href = '', sel = '', _sel = '';
-$: selection = $tiptap?.state?.selection;
-$: table = isTableAnySelected(selection);
-$: sel = selection?.from + '-' + selection?.to;
-$: if ($tiptap && sel !== _sel) {
-    _sel = sel;
-    link = false;
-    href = $tiptap.getAttributes('link').href;
-}
-$: if ($tiptap && link) {
-    if (href)
-        $tiptap.chain().setLink({ href }).run();
-    else if ($tiptap.getAttributes('link').href)
-        $tiptap.chain().unsetLink().run();
-}
-const shouldShow = ({ view, state, from, to }) => {
-    const { doc, selection } = state;
-    const { empty } = selection;
-    const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
-    return !(empty || isEmptyTextBlock);
-};
+<script lang="ts">
+	import { BubbleMenu } from 'svelte-tiptap';
+	import { flushSync, getContext, tick, untrack } from 'svelte';
+	import 'tippy.js/animations/shift-away-subtle.css';
+	import ToolbarButton from './ToolbarButton.svelte';
+	import { isTableAnySelected } from '../plugin/table/util';
+	import deleteTable from '../plugin/table/deleteTable';
+	import setMath from './setMath';
+	import { Button, Icon, IconButton, Input, List, OneLine, Paper, Render } from 'nunui';
+	import i18n from '../i18n';
+	import ColorPicker from 'svelte-awesome-color-picker';
+	import { isTextSelection } from '@tiptap/core';
+
+	let { colors = [], editable, override, children } = $props();
+
+	const editor = getContext<{ v: any; c: number }>('editor');
+	const tiptap = $derived(editor.v);
+
+	let selection = $state(null);
+	let table = $state(false);
+	let sel = $state('');
+	let _sel = $state('');
+	let link = $state(false);
+	let href = $state('');
+
+	$effect(() => {
+		let _ = editor.c;
+		flushSync();
+		selection = tiptap?.state?.selection;
+	});
+
+	$effect(() => {
+		table = isTableAnySelected(selection);
+	});
+
+	$effect(() => {
+		sel = selection?.from + '-' + selection?.to;
+	});
+
+	$effect(() => {
+		if (tiptap && sel !== _sel) {
+			_sel = sel;
+			link = false;
+			href = tiptap.getAttributes('link').href || '';
+		}
+	});
+
+	$effect(() => {
+		const _href = href;
+		untrack(() => {
+			if (tiptap && link) {
+				if (href) {
+					tiptap.chain().setLink({ href: _href }).run();
+				} else if (tiptap.getAttributes('link').href) {
+					tiptap.chain().unsetLink().run();
+				}
+			}
+		})
+	});
+
+	const shouldShow = ({ view, state, from, to }) => {
+		const { doc, selection } = state;
+		const { empty } = selection;
+
+		const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
+
+		return !(empty || isEmptyTextBlock);
+	};
 </script>
 
-{#if $tiptap}
-	<BubbleMenu editor={$tiptap} updateDelay={50} {shouldShow}
-							tippyOptions={{moveTransition: 'transform 0.2s cubic-bezier(1,.5,0,.85)', animation:'shift-away-subtle', duration: [200, 50]}}>
+{#if tiptap}
+	<BubbleMenu
+		editor={tiptap}
+		updateDelay={50}
+		{shouldShow}
+		tippyOptions={{
+			moveTransition: 'transform 0.2s cubic-bezier(1,.5,0,.85)',
+			animation: 'shift-away-subtle',
+			duration: [200, 50]
+		}}
+	>
 		{#if override}
 			<main>
-				<slot name="override" />
+				<Render it={override} />
 			</main>
 		{:else}
 			<main>
@@ -49,54 +91,82 @@ const shouldShow = ({ view, state, from, to }) => {
 							<Icon icon="link" />
 							{i18n('link')}
 						</p>
-						<Input placeholder="url" fullWidth bind:value={href} autofocus />
+						<Input placeholder="url" bind:value={href} autofocus />
 						<div>
-							<Button tabindex="0" transparent small on:click={() => {
-                                href = ''
-                                $tiptap.chain().focus().unsetLink().run()
-                                tick().then(() => link = false)
-                            }}>{i18n('delete')}
+							<Button
+								tabindex="0"
+								transparent
+								small
+								onclick={() => {
+									href = '';
+									tiptap.chain().focus().unsetLink().run();
+									tick().then(() => (link = false));
+								}}
+								>{i18n('delete')}
 							</Button>
-							<Button tabindex="0" transparent small
-											on:click={() => link = false}>{i18n('close')}</Button>
+							<Button tabindex="0" transparent small onclick={() => (link = false)}
+								>{i18n('close')}</Button
+							>
 						</div>
 					</div>
 				{:else if table}
 					{#if table.length > 1}
-						<ToolbarButton icon="cell_merge" handler={() => $tiptap.commands.mergeCells()} />
+						<ToolbarButton icon="cell_merge" handler={() => tiptap.commands.mergeCells()} />
 					{:else}
-						<ToolbarButton icon="splitscreen_left" handler={() => $tiptap.commands.splitCell()} />
+						<ToolbarButton icon="splitscreen_left" handler={() => tiptap.commands.splitCell()} />
 					{/if}
-					<ToolbarButton icon="keyboard_double_arrow_left"
-												 handler={() => $tiptap.chain().focus().addColumnBefore().run()} />
-					<ToolbarButton icon="keyboard_double_arrow_right"
-												 handler={() => $tiptap.chain().focus().addColumnAfter().run()} />
-					<ToolbarButton icon="keyboard_double_arrow_up"
-												 handler={() => $tiptap.chain().focus().addRowBefore().run()} />
-					<ToolbarButton icon="keyboard_double_arrow_down"
-												 handler={() => $tiptap.chain().focus().addRowAfter().run()} />
-					<ToolbarButton icon="close" handler={() => deleteTable({editor: $tiptap})} />
+					<ToolbarButton
+						icon="keyboard_double_arrow_left"
+						handler={() => tiptap.chain().focus().addColumnBefore().run()}
+					/>
+					<ToolbarButton
+						icon="keyboard_double_arrow_right"
+						handler={() => tiptap.chain().focus().addColumnAfter().run()}
+					/>
+					<ToolbarButton
+						icon="keyboard_double_arrow_up"
+						handler={() => tiptap.chain().focus().addRowBefore().run()}
+					/>
+					<ToolbarButton
+						icon="keyboard_double_arrow_down"
+						handler={() => tiptap.chain().focus().addRowAfter().run()}
+					/>
+					<ToolbarButton icon="close" handler={() => deleteTable({ editor: tiptap })} />
 				{:else}
 					{#if editable}
-						<Tooltip bottom left xstack width="160px">
-							<IconButton size="1.2em" icon="format_align_left" slot="target" />
+						<Paper hover bl>
+							{#snippet target()}
+								<IconButton size="1.2em" icon="format_align_left" />
+							{/snippet}
 							<div style="margin: -6px;font-size: 0.6em">
 								<List>
-									<OneLine icon="format_align_left" title={i18n('alignLeft')}
-													 on:click={() => $tiptap.chain().focus().setTextAlign('left').run()}
-													 active={$tiptap.isActive({ textAlign: 'left' })} />
-									<OneLine icon="format_align_center" title={i18n('alignCenter')}
-													 on:click={() => $tiptap.chain().focus().setTextAlign('center').run()}
-													 active={$tiptap.isActive({ textAlign: 'center' })} />
-									<OneLine icon="format_align_right" title={i18n('alignRight')}
-													 on:click={() => $tiptap.chain().focus().setTextAlign('right').run()}
-													 active={$tiptap.isActive({ textAlign: 'right' })} />
-									<OneLine icon="format_align_justify" title={i18n('alignJustify')}
-													 on:click={() => $tiptap.chain().focus().setTextAlign('justify').run()}
-													 active={$tiptap.isActive({ textAlign: 'justify' })} />
+									<OneLine
+										icon="format_align_left"
+										title={i18n('alignLeft')}
+										onclick={() => tiptap.chain().focus().setTextAlign('left').run()}
+										active={tiptap.isActive({ textAlign: 'left' })}
+									/>
+									<OneLine
+										icon="format_align_center"
+										title={i18n('alignCenter')}
+										onclick={() => tiptap.chain().focus().setTextAlign('center').run()}
+										active={tiptap.isActive({ textAlign: 'center' })}
+									/>
+									<OneLine
+										icon="format_align_right"
+										title={i18n('alignRight')}
+										onclick={() => tiptap.chain().focus().setTextAlign('right').run()}
+										active={tiptap.isActive({ textAlign: 'right' })}
+									/>
+									<OneLine
+										icon="format_align_justify"
+										title={i18n('alignJustify')}
+										onclick={() => tiptap.chain().focus().setTextAlign('justify').run()}
+										active={tiptap.isActive({ textAlign: 'justify' })}
+									/>
 								</List>
 							</div>
-						</Tooltip>
+						</Paper>
 					{/if}
 					<ToolbarButton icon="format_bold" prop="bold" />
 					<ToolbarButton icon="format_italic" prop="italic" />
@@ -106,41 +176,58 @@ const shouldShow = ({ view, state, from, to }) => {
 					<ToolbarButton icon="subscript" prop="subscript" />
 					<ToolbarButton icon="border_color" prop="highlight" />
 					{#if editable}
-						<ToolbarButton icon="functions" handler={() => setMath($tiptap)} />
+						<ToolbarButton icon="functions" handler={() => setMath(tiptap)} />
 					{/if}
-					<Tooltip bottom left xstack>
-						<IconButton size="1.2em" icon="palette" slot="target" />
+					<Paper bl block>
+						{#snippet target()}
+							<IconButton size="1.2em" icon="palette" />
+						{/snippet}
 						<div style="font-size: 0.6em">
-							<List>
-								<Button small outlined on:click={() => $tiptap.chain().focus().unsetColor().run()}>
+							<div class="colors">
+								<Button small outlined onclick={() => tiptap.chain().focus().unsetColor().run()}>
 									{i18n('default')}
 								</Button>
-								<Tooltip bottom left xstack stacked="2">
-									<Button small outlined on:click={() => $tiptap.chain().focus().unsetColor().run()}
-													slot="target">
-										<Icon colorize />
-									</Button>
-									<ColorPicker isDialog={false} on:input={(event) => {
-                                        $tiptap.chain().focus().setColor(event.detail.hex).run()
-                                    }} />
-								</Tooltip>
+								<Paper bl remap block>
+									{#snippet target()}
+										<Button
+											small
+											full
+											outlined
+											onclick={() => tiptap.chain().focus().unsetColor().run()}
+										>
+											<Icon colorize />
+										</Button>
+									{/snippet}
+									<div onclick={(event) => event.stopPropagation()} onmousedown={(event) => event.stopPropagation()}>
+										<ColorPicker
+											isDialog={false}
+											onInput={(event) => {
+												tiptap.chain().focus().setColor(event.hex).run();
+											}}
+										/>
+									</div>
+								</Paper>
 								{#each colors as color}
-									<Button small outlined
-													on:click={() => $tiptap.chain().focus().setColor(color).run()}
-													style="margin-right:4px">
+									<Button
+										small
+										outlined
+										onclick={() => tiptap.chain().focus().setColor(color).run()}
+									>
 										<span
-											style="width: 20px; height: 16px; background: {color}; border-radius: 4px;display: inline-block;margin-bottom: -2px"></span>
+										style:background={color}
+										class="pal"
+										></span>
 									</Button>
 								{/each}
-							</List>
+							</div>
 						</div>
-					</Tooltip>
+					</Paper>
 					{#if editable}
 						<ToolbarButton icon="code" prop="code" />
-						<ToolbarButton icon="link" prop="link" handler={() => link = true} />
+						<ToolbarButton icon="link" prop="link" handler={() => (link = true)} />
 					{/if}
 				{/if}
-				<slot />
+				<Render it={children} />
 			</main>
 		{/if}
 	</BubbleMenu>
@@ -179,4 +266,21 @@ main > :global(*):last-child {
   margin-top: 0.6em;
   display: flex;
   justify-content: flex-end;
-}</style>
+}
+
+.colors {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 4px;
+}
+.colors > :global(:first-child) {
+  grid-column: 1/3;
+}
+
+.pal {
+  width: 20px;
+  height: 16px;
+  border-radius: 4px;
+  display: inline-block;
+  margin-bottom: -2px;
+}</style>

package/dist/tiptap/Bubble.svelte.d.ts

@@ -1,22 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
 import 'tippy.js/animations/shift-away-subtle.css';
-declare const __propDef: {
-    props: {
-        colors?: any[] | undefined;
-        editable: any;
-        override: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        override: {};
-        default: {};
-    };
-};
-export type BubbleProps = typeof __propDef.props;
-export type BubbleEvents = typeof __propDef.events;
-export type BubbleSlots = typeof __propDef.slots;
-export default class Bubble extends SvelteComponentTyped<BubbleProps, BubbleEvents, BubbleSlots> {
-}
-export {};
+declare const Bubble: import("svelte").Component<{
+    colors?: unknown;
+    editable: unknown;
+    override: unknown;
+    children: unknown;
+}, {}, "">;
+export default Bubble;