@seorii/tiptap 0.3.0-next.8 → 0.3.0

package/dist/tiptap/TipTap.svelte

@@ -1,12 +1,22 @@
 <script lang="ts">
-	import { onMount, onDestroy, setContext, untrack } from 'svelte';
+	import { setContext, untrack } from 'svelte';
 	import sanitizeHtml from 'sanitize-html';
 	import '@seorii/prosemirror-math/style.css';
 	import Bubble from './Bubble.svelte';
 	import Floating from './Floating.svelte';
 	import Command from './Command.svelte';
-	import { slashItems, slashProps, slashVisible } from '../plugin/command/stores';
-	import i18n from '../i18n';
+	import {
+		countSlashItems,
+		flattenSlashItems,
+		normalizeSlashIndex,
+		slashState
+	} from '../plugin/command/stores.svelte';
+	import {
+		I18N_CONTEXT,
+		setLocale as setI18nLocale,
+		translateWithLocale,
+		type I18nTranslate
+	} from '../i18n';
 	import type { UploadFn } from '../plugin/image/dragdrop';
 	import { fallbackUpload } from '../plugin/image/dragdrop';
 	import { Render } from 'nunui';
@@ -22,11 +32,13 @@
 		style?: string;
 		blocks?: any[];
 		placeholder?: string;
+		locale?: string;
 		sanitize?: Record<string, any>;
 		colors?: string[];
 		bubble?: any;
 		preloader?: any;
 		crossorigin?: 'anonymous' | 'use-credentials';
+		codeBlockLanguageLabels?: Record<string, string>;
 	};
 
 	let {
@@ -39,7 +51,8 @@
 		imageUpload = fallbackUpload,
 		style = '',
 		blocks = [],
-		placeholder = i18n('placeholder'),
+		placeholder,
+		locale,
 		sanitize = {},
 		colors = [
 			'#ef5350', //red
@@ -54,8 +67,11 @@
 		bubble = null,
 		preloader,
 		crossorigin = 'anonymous',
+		codeBlockLanguageLabels = {}
 	}: Props = $props();
 
+	const scopedI18n: I18nTranslate = (...args) => translateWithLocale(locale, ...args);
+
 	const san = (body: string) =>
 		sanitizeHtml(body || '', {
 			...(sanitize || {}),
@@ -87,13 +103,18 @@
 			}
 		});
 
-	const tiptap = $state({ v: null as any });
+	const tiptap = $state({ v: null as any, c: 0 });
 	setContext('editor', tiptap);
+	setContext(I18N_CONTEXT, scopedI18n);
 	let element: Element,
 		fullscreen = $state(false),
 		mounted = $state(false),
 		last = $state('');
 
+	$effect(() => {
+		setI18nLocale(locale);
+	});
+
 	$effect(() => {
 		if (tiptap.v) tiptap.v.setEditable(editable);
 	});
@@ -111,11 +132,16 @@
 		Promise.all([import('./tiptap'), import('@justinribeiro/lite-youtube')]).then(
 			([{ default: tt }]) => {
 				if (!untrack(() => mounted)) return;
+				const editorPlaceholder = placeholder ?? scopedI18n('placeholder');
 				tiptap.v = ref = tt(element, r, {
-					placeholder,
+					placeholder: editorPlaceholder,
 					editable,
-					onTransaction: () => (tiptap.v = ref = tiptap.v),
+					onTransaction: () => {
+						tiptap.v = ref = tiptap.v;
+						tiptap.c++;
+					},
 					crossorigin,
+					codeBlockLanguageLabels,
 					...options
 				});
 				tiptap.v.on('update', ({ editor: tiptap }: any) => {
@@ -147,29 +173,35 @@
 		tiptap.v?.commands?.setContent?.(body);
 	});
 
-	let selectedIndex = $state(0);
-	$effect(() => {
-		if (!slashVisible) selectedIndex = 0;
-	});
-
 	function handleKeydown(event: KeyboardEvent) {
-		if (!$slashVisible) return;
-		let count = $slashItems.length;
-		if (($slashItems[0] as any)?.list) count = $slashItems.reduce((acc, item) => acc + (item as any).list.length, 0);
+		if (event.defaultPrevented) return true;
+		if (!slashState.visible) return false;
+		const count = countSlashItems();
+		if (!count) return false;
+
+		if (event.key === 'Tab') {
+			event.preventDefault();
+			slashState.selectedIndex += event.shiftKey ? -1 : 1;
+			normalizeSlashIndex();
+			return true;
+		}
+
 		if (event.key === 'ArrowUp') {
 			event.preventDefault();
-			selectedIndex = (selectedIndex + count - 1) % count;
+			slashState.selectedIndex -= 1;
+			normalizeSlashIndex();
 			return true;
 		}
 		if (event.key === 'ArrowDown') {
 			event.preventDefault();
-			selectedIndex = (selectedIndex + 1) % count;
+			slashState.selectedIndex += 1;
+			normalizeSlashIndex();
 			return true;
 		}
 
 		if (event.key === 'Enter') {
 			event.preventDefault();
-			selectItem(selectedIndex);
+			selectItem(slashState.selectedIndex);
 			return true;
 		}
 
@@ -177,13 +209,10 @@
 	}
 
 	function selectItem(index: number) {
-		const item = ($slashItems[0] as any)?.list
-			? $slashItems.map((i: any) => i.list).flat()[index]
-			: $slashItems[index];
-		if (item) {
-			let range = $slashProps.range;
-			item.command({ editor: tiptap.v, range });
-		}
+		const item = flattenSlashItems()[index];
+		const { editor, range } = slashState.props;
+		if (!item || !editor || !range) return;
+		item.command({ editor, range });
 	}
 </script>
 
@@ -204,7 +233,7 @@
 		{/if}
 	</div>
 	{#if editable}
-		<Command {selectedIndex} />
+		<Command />
 		<Floating />
 	{/if}
 	{#if editable || mark}
@@ -214,112 +243,163 @@
 	{/if}
 </main>
 
-<style>main {
-  position: relative;
-  overscroll-behavior: none;
-  --shadow: 0 1px 2px rgba(127, 127, 127, 0.07), 0 2px 4px rgba(127, 127, 127, 0.07),
-  	0 4px 8px rgba(127, 127, 127, 0.07), 0 8px 16px rgba(127, 127, 127, 0.07),
-  	0 16px 32px rgba(127, 127, 127, 0.07), 0 32px 64px rgba(127, 127, 127, 0.07);
-}
-main.fullscreen {
-  z-index: 999999999;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--surface);
-  padding: 82px 12px 12px 12px;
-}
-main .wrapper {
-  position: relative;
-}
-
-.target > :global(div) > :global(*:first-child) {
-  margin-top: 0 !important;
-}
-.target > :global(div) > :global(*:last-child) {
-  margin-bottom: 0 !important;
-}
-
-.editable :global(.ProseMirror-selectednode img) {
-  transition: all 0.2s ease-in-out;
-  filter: drop-shadow(0 0 0.75rem var(--primary-light13));
-}
-
-.editable :global(.iframe-wrapper.ProseMirror-selectednode) {
-  outline: 3px solid var(--primary);
-}
-
-.editable :global(lite-youtube.ProseMirror-selectednode) {
-  outline: 3px solid var(--primary);
-}
-
-div > :global(div) {
-  outline: none !important;
-}
-div > :global(div) :global(.ProseMirror) :global(p.is-editor-empty:first-child::before) {
-  color: var(--on-surface, #000);
-  opacity: 0.7;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-  transition: 0.2s opacity ease-in-out;
-}
-div > :global(div) :global(.ProseMirror-focused) :global(p.is-editor-empty:first-child::before) {
-  opacity: 0;
-}
-div > :global(div) :global(a) {
-  cursor: pointer;
-}
-div > :global(div) :global(img) {
-  transition: all 0.2s ease-in-out;
-  max-width: 100%;
-  border-radius: 12px;
-  position: relative;
-}
-div > :global(div) :global(code.inline) {
-  background: var(--primary-light1);
-  padding: 2px 4px;
-  border-radius: 4px;
-}
-div > :global(div) :global(pre) {
-  background: var(--primary-light1);
-  padding: 12px;
-  border-radius: 12px;
-  max-width: 100%;
-}
-div > :global(div) :global(table) {
-  border-collapse: collapse;
-  width: 100%;
-  margin: 8px 0;
-  border: 1px solid var(--primary-light1);
-  border-radius: 12px;
-}
-div > :global(div) :global(th),
-div > :global(div) :global(td) {
-  padding: 8px;
-  border: 1px solid var(--primary-light1);
-}
-div > :global(div) :global(.math-render) {
-  cursor: initial;
-}
-div > :global(div) :global(lite-youtube) {
-  border-radius: 12px;
-}
-div > :global(div) :global(.iframe-wrapper) {
-  position: relative;
-  padding-bottom: 12px;
-  overflow: hidden;
-  width: 100%;
-  height: 600px;
-  border-radius: 12px;
-}
-div > :global(div) :global(iframe) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}</style>
+<style>
+	main {
+		position: relative;
+		overscroll-behavior: none;
+		--shadow:
+			0 1px 2px rgba(127, 127, 127, 0.07), 0 2px 4px rgba(127, 127, 127, 0.07),
+			0 4px 8px rgba(127, 127, 127, 0.07), 0 8px 16px rgba(127, 127, 127, 0.07),
+			0 16px 32px rgba(127, 127, 127, 0.07), 0 32px 64px rgba(127, 127, 127, 0.07);
+		&.fullscreen {
+			z-index: 999999999;
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: var(--surface);
+			padding: 82px 12px 12px 12px;
+		}
+
+		& .wrapper {
+			position: relative;
+		}
+	}
+
+	main :global(.tiptap-code-block-toolbar) {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		z-index: 1;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	main:not(.editable) :global(.tiptap-code-block-toolbar) {
+		visibility: hidden;
+		pointer-events: none;
+	}
+
+	.target > :global(div) > :global(*:first-child) {
+		margin-top: 0 !important;
+	}
+
+	.target > :global(div) > :global(*:last-child) {
+		margin-bottom: 0 !important;
+	}
+
+	.editable :global(.ProseMirror-selectednode img) {
+		transition: all 0.2s ease-in-out;
+		filter: drop-shadow(0 0 0.75rem var(--primary-light13));
+	}
+
+	.editable :global(.iframe-wrapper.ProseMirror-selectednode) {
+		outline: 3px solid var(--primary);
+	}
+
+	.editable :global(lite-youtube.ProseMirror-selectednode) {
+		outline: 3px solid var(--primary);
+	}
+
+	div > :global(div) {
+		outline: none !important;
+		& :global(.ProseMirror) :global(p.is-editor-empty:first-child::before) {
+			color: var(--on-surface, #000);
+			opacity: 0.7;
+			content: attr(data-placeholder);
+			float: left;
+			height: 0;
+			pointer-events: none;
+			transition: 0.2s opacity ease-in-out;
+		}
+
+		& :global(.ProseMirror-focused) :global(p.is-editor-empty:first-child::before) {
+			opacity: 0;
+		}
+
+		& :global(a) {
+			cursor: pointer;
+		}
+
+		& :global(img) {
+			transition: all 0.2s ease-in-out;
+			max-width: 100%;
+			border-radius: 12px;
+			position: relative;
+		}
+
+		& :global(code.inline) {
+			background: var(--primary-light1);
+			padding: 2px 4px;
+			border-radius: 4px;
+		}
+
+		& :global(pre) {
+			background: var(--primary-light1);
+			padding: 12px;
+			border-radius: 12px;
+			max-width: 100%;
+		}
+
+		& :global(.tiptap-code-block) {
+			max-width: 100%;
+			position: relative;
+		}
+
+		& :global(.tiptap-code-block-language) {
+			padding: 2px 6px;
+			border-radius: 8px;
+			border: 1px solid var(--primary-light2, #ddd);
+			outline: 1px solid transparent;
+			outline-offset: 0;
+			background: var(--surface, #fff);
+			color: var(--on-surface, #000);
+			font-size: 0.75em;
+
+			&:focus,
+			&:focus-visible {
+				outline-color: var(--primary-light9, #89a2d9);
+			}
+		}
+
+		& :global(table) {
+			border-collapse: collapse;
+			width: 100%;
+			margin: 8px 0;
+			border: 1px solid var(--primary-light1);
+			border-radius: 12px;
+		}
+
+		& :global(th),
+		& :global(td) {
+			padding: 8px;
+			border: 1px solid var(--primary-light1);
+		}
+
+		& :global(.math-render) {
+			cursor: initial;
+		}
+
+		& :global(lite-youtube) {
+			border-radius: 12px;
+		}
+
+		& :global(.iframe-wrapper) {
+			position: relative;
+			padding-bottom: 12px;
+			overflow: hidden;
+			width: 100%;
+			height: 600px;
+			border-radius: 12px;
+		}
+
+		& :global(iframe) {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+</style>

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

@@ -1,6 +1,6 @@
 import '@seorii/prosemirror-math/style.css';
 import type { UploadFn } from '../plugin/image/dragdrop';
-declare const TipTap: import("svelte").Component<{
+type Props = {
     body: string;
     editable?: boolean;
     mark?: boolean;
@@ -11,10 +11,14 @@ declare const TipTap: import("svelte").Component<{
     style?: string;
     blocks?: any[];
     placeholder?: string;
+    locale?: string;
     sanitize?: Record<string, any>;
     colors?: string[];
     bubble?: any;
     preloader?: any;
-    crossorigin?: "anonymous" | "use-credentials";
-}, {}, "body" | "ref" | "loaded">;
+    crossorigin?: 'anonymous' | 'use-credentials';
+    codeBlockLanguageLabels?: Record<string, string>;
+};
+declare const TipTap: import("svelte").Component<Props, {}, "body" | "ref" | "loaded">;
+type TipTap = ReturnType<typeof TipTap>;
 export default TipTap;

package/dist/tiptap/ToolbarButton.svelte

@@ -2,36 +2,56 @@
 	import { getContext } from 'svelte';
 	import { Button, IconButton, Render } from 'nunui';
 
-	const editor = getContext<{ v: any }>('editor');
+	const editor = getContext<{ v: any; c: number }>('editor');
 	const tiptap = $derived(editor.v);
 
+	type Props = {
+		prop?: string;
+		attrs?: Record<string, unknown>;
+		label?: string;
+		icon?: string;
+		methodName?: string;
+		tooltip?: string | Record<string, any>;
+		handler?: (() => void) | null;
+		children?: any;
+		[key: string]: unknown;
+	};
+
 	let {
 		prop = '',
-		attrs = '',
+		attrs = {},
 		label = '',
 		icon = '',
 		methodName = 'toggle' + prop.charAt(0).toUpperCase() + prop.slice(1),
 		tooltip,
-		handler,
+		handler = null,
+		children,
 		...rest
-	} = $props();
+	}: Props = $props();
 
-	const isActive = $derived(() => {
-		return editor && prop && tiptap.isActive(prop, attrs);
+	const isActive = $derived.by(() => {
+		// Recompute active styles on every editor transaction (selection/mark changes)
+		editor.c;
+		return !!(prop && tiptap?.isActive(prop, attrs));
 	});
 
 	function toggle() {
 		if (!tiptap) return;
-		//tiptap.chain().focus().clearNodes().run()
 		if (handler) return handler();
-		setTimeout(() => tiptap.chain().focus()[methodName](attrs)?.run(), 0);
+		setTimeout(() => {
+			const chain = tiptap.chain().focus() as Record<
+				string,
+				(attrs?: unknown) => { run?: () => void }
+			>;
+			chain[methodName]?.(attrs)?.run?.();
+		}, 0);
 	}
 </script>
 
 {#if icon}
-	<IconButton size="1.2em" {icon} active={isActive()} onclick={toggle} {tooltip} tabindex="0" />
+	<IconButton size="1.2em" {icon} active={isActive} onclick={toggle} {tooltip} tabindex={0} />
 {:else}
-	<Button outlined={!isActive()} onclick={handler || toggle} small {...rest}>
+	<Button outlined={!isActive} onclick={handler || toggle} small {...rest}>
 		{label}
 		<Render it={children} />
 	</Button>

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

@@ -1,10 +1,14 @@
-declare const ToolbarButton: import("svelte").Component<{
+type Props = {
     prop?: string;
-    attrs?: string;
+    attrs?: Record<string, unknown>;
     label?: string;
     icon?: string;
-    methodName?: unknown;
-    tooltip: unknown;
-    handler: unknown;
-} & Record<string, unknown>, {}, "">;
+    methodName?: string;
+    tooltip?: string | Record<string, any>;
+    handler?: (() => void) | null;
+    children?: any;
+    [key: string]: unknown;
+};
+declare const ToolbarButton: import("svelte").Component<Props, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
 export default ToolbarButton;

package/dist/tiptap/setMath.d.ts

@@ -1 +1,2 @@
-export default function setMath(tiptap: any): void;
+import type { Editor } from '@tiptap/core';
+export default function setMath(tiptap: Editor): void;

package/dist/tiptap/setMath.js

@@ -1,17 +1,79 @@
+import { NodeSelection } from '@tiptap/pm/state';
+const pushUniqueTarget = (targets, from, to, text) => {
+    if (targets.some((target) => target.from === from && target.to === to))
+        return;
+    targets.push({ from, to, text });
+};
+const collectMathTargets = (state, mathInline) => {
+    const targets = [];
+    const { selection } = state;
+    if (selection instanceof NodeSelection && selection.node.type === mathInline) {
+        pushUniqueTarget(targets, selection.from, selection.to, selection.node.textContent);
+    }
+    if (selection.$from.parent.type === mathInline) {
+        const depth = selection.$from.depth;
+        const from = selection.$from.before(depth);
+        const to = selection.$from.after(depth);
+        pushUniqueTarget(targets, from, to, selection.$from.parent.textContent);
+    }
+    state.doc.nodesBetween(selection.from, selection.to, (node, position) => {
+        if (node.type !== mathInline)
+            return;
+        pushUniqueTarget(targets, position, position + node.nodeSize, node.textContent);
+        return false;
+    });
+    return targets;
+};
+const unwrapMath = ({ state, tr }, mathInline) => {
+    const targets = collectMathTargets(state, mathInline);
+    if (!targets.length)
+        return false;
+    for (const { from, to, text } of targets.sort((a, b) => b.from - a.from)) {
+        if (!text.length) {
+            tr.delete(from, to);
+            continue;
+        }
+        tr.replaceWith(from, to, state.schema.text(text));
+    }
+    return true;
+};
+const wrapSelectionAsMath = ({ state, tr }, mathInline) => {
+    const { selection } = state;
+    if (selection.empty)
+        return false;
+    const targets = [];
+    state.doc.nodesBetween(selection.from, selection.to, (node, position) => {
+        if (!node.isTextblock)
+            return;
+        const contentFrom = position + 1;
+        const contentTo = position + node.nodeSize - 1;
+        const from = Math.max(selection.from, contentFrom);
+        const to = Math.min(selection.to, contentTo);
+        if (from >= to)
+            return;
+        const text = state.doc.textBetween(from, to, '');
+        if (!text.length)
+            return;
+        targets.push({ from, to, text });
+    });
+    if (!targets.length)
+        return false;
+    for (const { from, to, text } of targets.sort((a, b) => b.from - a.from)) {
+        const newNode = mathInline.create(null, state.schema.text(text));
+        tr.replaceWith(from, to, newNode);
+    }
+    return true;
+};
 export default function setMath(tiptap) {
-    const { selection } = tiptap.state;
     tiptap
         .chain()
-        .command(({ state, tr }) => state.doc.nodesBetween(selection.from, selection.to, (node, position) => {
-        if (!node.isTextblock || selection.from === selection.to)
-            return;
-        const startPosition = Math.max(position + 1, selection.from);
-        const endPosition = Math.min(position + node.nodeSize, selection.to);
-        const substringFrom = Math.max(0, selection.from - position - 1);
-        const substringTo = Math.max(0, selection.to - position - 1);
-        const updatedText = node.textContent.substring(substringFrom, substringTo);
-        const newNode = state.schema.nodes.math_inline.create(null, state.schema.text(updatedText));
-        tr = tr.replaceWith(startPosition, endPosition, newNode);
-    }))
+        .command((props) => {
+        const mathInline = props.state.schema.nodes.math_inline;
+        if (!mathInline || props.state.selection.empty)
+            return false;
+        if (unwrapMath(props, mathInline))
+            return true;
+        return wrapSelectionAsMath(props, mathInline);
+    })
         .run();
 }

package/dist/tiptap/tiptap.d.ts

@@ -1,3 +1,11 @@
 import { Editor } from '@tiptap/core';
-declare const _default: (element: Element, content: string, { placeholder, plugins, crossorigin, ...props }?: any) => Editor;
+type CodeBlockLanguageLabelMap = Record<string, string>;
+type CrossOrigin = 'anonymous' | 'use-credentials' | undefined;
+declare const _default: (element: Element, content: string, { placeholder, plugins, crossorigin, codeBlockLanguageLabels, ...props }?: {
+    placeholder?: string;
+    plugins?: any[];
+    crossorigin?: CrossOrigin;
+    codeBlockLanguageLabels?: CodeBlockLanguageLabelMap;
+    [key: string]: unknown;
+}) => Editor;
 export default _default;