@seorii/tiptap 0.3.0-next.9 → 0.3.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 */
+	}
+}

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/tiptap/Bubble.svelte

@@ -1,23 +1,35 @@
 <script lang="ts">
 	import { BubbleMenu } from 'svelte-tiptap';
-	import { getContext, tick } from 'svelte';
+	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 defaultI18n, { I18N_CONTEXT, type I18nTranslate } from '../i18n';
 	import ColorPicker from 'svelte-awesome-color-picker';
 	import { isTextSelection } from '@tiptap/core';
+	import type { EditorState, Selection } from '@tiptap/pm/state';
+	import type { EditorView } from '@tiptap/pm/view';
 
-	let { colors = [], editable, override, children } = $props();
+	type Props = {
+		colors?: string[];
+		editable?: boolean;
+		override?: any;
+		children?: any;
+	};
+
+	let { colors = [], editable, override, children }: Props = $props();
 
 	const editor = getContext<{ v: any; c: number }>('editor');
+	const i18nFromContext = getContext<I18nTranslate | undefined>(I18N_CONTEXT);
+	const i18n: I18nTranslate = (...args) =>
+		i18nFromContext ? i18nFromContext(...args) : defaultI18n(...args);
 	const tiptap = $derived(editor.v);
 
-	let selection = $state(null);
-	let table = $state(false);
+	let selection = $state<Selection | null>(null);
+	let table = $state<number[] | false>(false);
 	let sel = $state('');
 	let _sel = $state('');
 	let link = $state(false);
@@ -25,6 +37,7 @@
 
 	$effect(() => {
 		let _ = editor.c;
+		flushSync();
 		selection = tiptap?.state?.selection;
 	});
 
@@ -45,16 +58,30 @@
 	});
 
 	$effect(() => {
-		if (tiptap && link) {
-			if (href) {
-				tiptap.chain().setLink({ href }).run();
-			} else if (tiptap.getAttributes('link').href) {
-				tiptap.chain().unsetLink().run();
+		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 shouldShow = ({
+		state,
+		from,
+		to
+	}: {
+		view: EditorView;
+		state: EditorState;
+		from: number;
+		to: number;
+	}) => {
+		if (!tiptap?.isEditable) return false;
+
 		const { doc, selection } = state;
 		const { empty } = selection;
 
@@ -87,10 +114,10 @@
 							<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"
+								tabindex={0}
 								transparent
 								small
 								onclick={() => {
@@ -100,7 +127,7 @@
 								}}
 								>{i18n('delete')}
 							</Button>
-							<Button tabindex="0" transparent small onclick={() => (link = false)}
+							<Button tabindex={0} transparent small onclick={() => (link = false)}
 								>{i18n('close')}</Button
 							>
 						</div>
@@ -172,7 +199,7 @@
 					<ToolbarButton icon="subscript" prop="subscript" />
 					<ToolbarButton icon="border_color" prop="highlight" />
 					{#if editable}
-						<ToolbarButton icon="functions" handler={() => setMath(tiptap)} />
+						<ToolbarButton icon="functions" prop="math_inline" handler={() => setMath(tiptap)} />
 					{/if}
 					<Paper bl block>
 						{#snippet target()}
@@ -191,10 +218,13 @@
 											outlined
 											onclick={() => tiptap.chain().focus().unsetColor().run()}
 										>
-											<Icon colorize />
+											<Icon icon="palette" />
 										</Button>
 									{/snippet}
-									<div onclick={(event) => event.stopPropagation()} onmousedown={(event) => event.stopPropagation()}>
+									<div
+										onclick={(event) => event.stopPropagation()}
+										onmousedown={(event) => event.stopPropagation()}
+									>
 										<ColorPicker
 											isDialog={false}
 											onInput={(event) => {
@@ -209,10 +239,7 @@
 										outlined
 										onclick={() => tiptap.chain().focus().setColor(color).run()}
 									>
-										<span
-										style:background={color}
-										class="pal"
-										></span>
+										<span style:background={color} class="pal"></span>
 									</Button>
 								{/each}
 							</div>
@@ -229,54 +256,61 @@
 	</BubbleMenu>
 {/if}
 
-<style>main {
-  box-shadow: var(--shadow);
-  background: var(--surface, #fff);
-  color: var(--on-surface, #000);
-  padding: 8px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.2em;
-}
-main > :global(*) {
-  margin: 0 2px;
-}
-main > :global(*):first-child {
-  margin-left: 0;
-}
-main > :global(*):last-child {
-  margin-right: 0;
-}
+<style>
+	main {
+		box-shadow: var(--shadow);
+		background: var(--surface, #fff);
+		color: var(--on-surface, #000);
+		padding: 8px;
+		border-radius: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.2em;
+		& > :global(*) {
+			margin: 0 2px;
+		}
+
+		& > :global(*:first-child) {
+			margin-left: 0;
+		}
+
+		& > :global(*:last-child) {
+			margin-right: 0;
+		}
+	}
+
+	.link {
+		display: flex;
+		flex-direction: column;
+		font-size: 0.7em;
+
+		& p {
+			margin: 0 0 0.6em 0;
+		}
+
+		& div {
+			margin-top: 0.6em;
+			display: flex;
+			justify-content: flex-end;
+		}
+	}
 
-.link {
-  display: flex;
-  flex-direction: column;
-  font-size: 0.7em;
-}
-.link p {
-  margin: 0 0 0.6em 0;
-}
-.link div {
-  margin-top: 0.6em;
-  display: flex;
-  justify-content: flex-end;
-}
+	.colors {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		gap: 4px;
 
-.colors {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 4px;
-}
-.colors > :global(:first-child) {
-  grid-column: 1/3;
-}
+		& > :global(:first-child) {
+			grid-column: 1/3;
+		}
+	}
 
-.pal {
-  width: 20px;
-  height: 16px;
-  border-radius: 4px;
-  display: inline-block;
-  margin-bottom: -2px;
-}</style>
+	.pal {
+		width: 20px;
+		height: 16px;
+		border-radius: 4px;
+		display: inline-block;
+		margin-bottom: -2px;
+	}
+</style>

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

@@ -1,8 +1,10 @@
 import 'tippy.js/animations/shift-away-subtle.css';
-declare const Bubble: import("svelte").Component<{
-    colors?: unknown;
-    editable: unknown;
-    override: unknown;
-    children: unknown;
-}, {}, "">;
+type Props = {
+    colors?: string[];
+    editable?: boolean;
+    override?: any;
+    children?: any;
+};
+declare const Bubble: import("svelte").Component<Props, {}, "">;
+type Bubble = ReturnType<typeof Bubble>;
 export default Bubble;