@seorii/tiptap 0.2.22 → 0.3.0-next.10

package/dist/tiptap/TipTap.svelte

@@ -1,126 +1,208 @@
-<script>import { browser } from '$app/environment';
-import { beforeUpdate, onMount, setContext } from 'svelte';
-import { writable } from 'svelte/store';
-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 { fallbackUpload } from '../plugin/image/dragdrop';
-export let body = '', editable = false, mark = false, ref = null, options = {}, loaded = false;
-export let imageUpload = fallbackUpload, style = '';
-export let blocks = [], placeholder = i18n('placeholder');
-export let sanitize = {};
-export let colors = [
-    '#ef5350', //red
-    '#ec407a', //pink
-    '#ff7043', //orange
-    '#daca3b', //yellow
-    '#8bc34a', //green
-    '#2196f3', //blue
-    '#3f51b5', //blue
-    '#ab47bc' //purple
-];
-export let bubbleOverride = false;
-const san = (body) => sanitizeHtml(body, {
-    ...sanitize,
-    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'lite-youtube', 'blockquote', 'embed', 'mark', 'code', ...sanitize.allowedTags]),
-    allowedStyles: '*', allowedAttributes: {
-        '*': ['style', 'class'],
-        a: ['href', 'name', 'target'],
-        img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading'],
-        iframe: ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
-        th: ['colwidth', 'colspan', 'rowspan'],
-        td: ['colwidth', 'colspan', 'rowspan'],
-        'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider'],
-        embed: ['src', 'type', 'frameborder', 'allowfullscreen'],
-        mark: ['style', 'data-color'],
-        code: ['class'],
-        ...sanitize.allowedAttributes
-    }
-});
-const tiptap = setContext('editor', writable(null));
-let element, fullscreen = false, mounted = false, last = '';
-$: $tiptap && $tiptap.setEditable(editable);
-$: browser && (window.__image_uploader = imageUpload);
-$: browser && (window.__tiptap_blocks = blocks);
-if (browser) {
-    onMount(() => {
-        body = last = san(body);
-        mounted = true;
-        Promise.all([import('./tiptap'), import('@justinribeiro/lite-youtube')]).then(([{ default: tt }]) => {
-            if (!mounted)
-                return;
-            ref = $tiptap = tt(element, body, {
-                placeholder,
-                editable: editable,
-                onTransaction: () => ref = $tiptap = $tiptap,
-                ...options
-            });
-            $tiptap.on('update', ({ editor: tiptap }) => {
-                let content = tiptap.getHTML(), json = tiptap.getJSON().content;
-                if (Array.isArray(json) && json.length === 1 && json[0].type === 'paragraph' && !json[0].hasOwnProperty('content'))
-                    content = null;
-                body = last = content;
-            });
-            loaded = true;
-        });
-        return () => {
-            mounted = false;
-            $tiptap?.destroy?.();
-        };
-    });
-    beforeUpdate(() => {
-        if (last === body)
-            return;
-        body = san(body);
-        $tiptap?.commands?.setContent?.(body);
-    });
-}
-let selectedIndex = 0;
-$: selectedIndex = $slashVisible ? selectedIndex : 0;
-function handleKeydown(event) {
-    if (!$slashVisible)
-        return;
-    let count = $slashItems.length;
-    if ($slashItems[0]?.list)
-        count = $slashItems.reduce((acc, item) => acc + item.list.length, 0);
-    if (event.key === 'ArrowUp') {
-        event.preventDefault();
-        selectedIndex = (selectedIndex + count - 1) % count;
-        return true;
-    }
-    if (event.key === 'ArrowDown') {
-        event.preventDefault();
-        selectedIndex = (selectedIndex + 1) % count;
-        return true;
-    }
-    if (event.key === 'Enter') {
-        event.preventDefault();
-        selectItem(selectedIndex);
-        return true;
-    }
-    return false;
-}
-function selectItem(index) {
-    const item = $slashItems[0]?.list ? $slashItems.map(i => i.list).flat()[index] : $slashItems[index];
-    if (item) {
-        let range = $slashProps.range;
-        item.command({ editor: $tiptap, range });
-    }
-}
+<script lang="ts">
+	import { onMount, onDestroy, 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 type { UploadFn } from '../plugin/image/dragdrop';
+	import { fallbackUpload } from '../plugin/image/dragdrop';
+	import { Render } from 'nunui';
+
+	type Props = {
+		body: string;
+		editable?: boolean;
+		mark?: boolean;
+		ref?: any;
+		options?: Record<string, any>;
+		loaded?: boolean;
+		imageUpload?: UploadFn;
+		style?: string;
+		blocks?: any[];
+		placeholder?: string;
+		sanitize?: Record<string, any>;
+		colors?: string[];
+		bubble?: any;
+		preloader?: any;
+		crossorigin?: 'anonymous' | 'use-credentials';
+	};
+
+	let {
+		body = $bindable<string>(),
+		editable = false,
+		mark = false,
+		ref = $bindable(null),
+		options = {},
+		loaded = $bindable(false),
+		imageUpload = fallbackUpload,
+		style = '',
+		blocks = [],
+		placeholder = i18n('placeholder'),
+		sanitize = {},
+		colors = [
+			'#ef5350', //red
+			'#ec407a', //pink
+			'#ff7043', //orange
+			'#daca3b', //yellow
+			'#8bc34a', //green
+			'#2196f3', //blue
+			'#3f51b5', //blue
+			'#ab47bc' //purple
+		],
+		bubble = null,
+		preloader,
+		crossorigin = 'anonymous',
+	}: Props = $props();
+
+	const san = (body: string) =>
+		sanitizeHtml(body || '', {
+			...(sanitize || {}),
+			allowedTags: sanitizeHtml.defaults.allowedTags.concat([
+				'img',
+				'math-inline',
+				'math-node',
+				'iframe',
+				'lite-youtube',
+				'blockquote',
+				'embed',
+				'mark',
+				'code',
+				...(sanitize.allowedTags || [])
+			]),
+			allowedStyles: '*' as any,
+			allowedAttributes: {
+				'*': ['style', 'class'],
+				a: ['href', 'name', 'target'],
+				img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading'],
+				iframe: ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
+				th: ['colwidth', 'colspan', 'rowspan'],
+				td: ['colwidth', 'colspan', 'rowspan'],
+				'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider'],
+				embed: ['src', 'type', 'frameborder', 'allowfullscreen'],
+				mark: ['style', 'data-color'],
+				code: ['class'],
+				...(sanitize.allowedAttributes || [])
+			}
+		});
+
+	const tiptap = $state({ v: null as any, c: 0 });
+	setContext('editor', tiptap);
+	let element: Element,
+		fullscreen = $state(false),
+		mounted = $state(false),
+		last = $state('');
+
+	$effect(() => {
+		if (tiptap.v) tiptap.v.setEditable(editable);
+	});
+
+	$effect(() => {
+		(window as any).__image_uploader = imageUpload;
+		(window as any).__tiptap_blocks = blocks;
+	});
+
+	$effect(() => {
+		const r = untrack(() => san(body));
+		body = r;
+		last = r;
+		mounted = true;
+		Promise.all([import('./tiptap'), import('@justinribeiro/lite-youtube')]).then(
+			([{ default: tt }]) => {
+				if (!untrack(() => mounted)) return;
+				tiptap.v = ref = tt(element, r, {
+					placeholder,
+					editable,
+					onTransaction: () => {
+						tiptap.v = ref = tiptap.v;
+						tiptap.c++;
+					},
+					crossorigin,
+					...options
+				});
+				tiptap.v.on('update', ({ editor: tiptap }: any) => {
+					let content = tiptap.getHTML(),
+						json = tiptap.getJSON().content;
+					if (
+						Array.isArray(json) &&
+						json.length === 1 &&
+						json[0].type === 'paragraph' &&
+						!json[0].hasOwnProperty('content')
+					)
+						content = null;
+					body = last = content;
+				});
+				loaded = true;
+			}
+		);
+		return () => {
+			mounted = false;
+			untrack(() => tiptap.v?.destroy?.());
+		};
+	});
+
+	$effect.pre(() => {
+		if (last === body) return;
+		const r = san(body);
+		body = r;
+		last = r;
+		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.key === 'ArrowUp') {
+			event.preventDefault();
+			selectedIndex = (selectedIndex + count - 1) % count;
+			return true;
+		}
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			selectedIndex = (selectedIndex + 1) % count;
+			return true;
+		}
+
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			selectItem(selectedIndex);
+			return true;
+		}
+
+		return false;
+	}
+
+	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 });
+		}
+	}
 </script>
 
-<main class:fullscreen class:editable>
+<main class:fullscreen class:editable {style}>
 	<div class="wrapper">
-		<div bind:this={element} class="target" on:keydown|capture={handleKeydown}></div>
-		{#if !$tiptap}
-			{#if $$slots.preloader}
-				<slot name="preloader" />
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div bind:this={element} class="target" onkeydown={handleKeydown}></div>
+		{#if !tiptap.v}
+			{#if preloader}
+				<Render it={preloader} />
 			{:else}
-				{i18n('loading')}
+				<div class="target">
+					<div>
+						{@html san(body)}
+					</div>
+				</div>
 			{/if}
 		{/if}
 	</div>
@@ -129,23 +211,18 @@ function selectItem(index) {
 		<Floating />
 	{/if}
 	{#if editable || mark}
-		<Bubble {colors} {editable} override={bubbleOverride}>
-			<slot name="bubble" />
-			<slot name="bubbleOverride" slot="override" />
+		<Bubble {colors} {editable} override={bubble}>
+			<Render it={bubble} />
 		</Bubble>
 	{/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);
+  --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;
@@ -223,7 +300,8 @@ div > :global(div) :global(table) {
   border: 1px solid var(--primary-light1);
   border-radius: 12px;
 }
-div > :global(div) :global(table) :global(th), div > :global(div) :global(table) :global(td) {
+div > :global(div) :global(th),
+div > :global(div) :global(td) {
   padding: 8px;
   border: 1px solid var(--primary-light1);
 }
@@ -241,10 +319,10 @@ div > :global(div) :global(.iframe-wrapper) {
   height: 600px;
   border-radius: 12px;
 }
-div > :global(div) :global(.iframe-wrapper) :global(iframe) {
+div > :global(div) :global(iframe) {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-}</style>
+}</style>

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

@@ -1,36 +1,20 @@
-import { SvelteComponentTyped } from "svelte";
 import '@seorii/prosemirror-math/style.css';
 import type { UploadFn } from '../plugin/image/dragdrop';
-declare const __propDef: {
-    props: {
-        body?: string | undefined;
-        editable?: boolean | undefined;
-        mark?: boolean | undefined;
-        ref?: null | undefined;
-        options?: {} | undefined;
-        loaded?: boolean | undefined;
-        imageUpload?: UploadFn | undefined;
-        style?: string | undefined;
-        blocks?: any[] | undefined;
-        placeholder?: any;
-        sanitize?: any;
-        colors?: string[] | undefined;
-        bubbleOverride?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        preloader: {};
-        bubble: {};
-        bubbleOverride: {
-            slot: string;
-        };
-    };
-};
-export type TipTapProps = typeof __propDef.props;
-export type TipTapEvents = typeof __propDef.events;
-export type TipTapSlots = typeof __propDef.slots;
-export default class TipTap extends SvelteComponentTyped<TipTapProps, TipTapEvents, TipTapSlots> {
-}
-export {};
+declare const TipTap: import("svelte").Component<{
+    body: string;
+    editable?: boolean;
+    mark?: boolean;
+    ref?: any;
+    options?: Record<string, any>;
+    loaded?: boolean;
+    imageUpload?: UploadFn;
+    style?: string;
+    blocks?: any[];
+    placeholder?: string;
+    sanitize?: Record<string, any>;
+    colors?: string[];
+    bubble?: any;
+    preloader?: any;
+    crossorigin?: "anonymous" | "use-credentials";
+}, {}, "body" | "ref" | "loaded">;
+export default TipTap;

package/dist/tiptap/ToolbarButton.svelte

@@ -1,26 +1,38 @@
-<script>import { getContext } from "svelte";
-import { Button, IconButton } from "nunui";
-const editor = getContext("editor");
-export let prop = '', attrs = '', label = '', icon = '', methodName = 'toggle' + prop.charAt(0).toUpperCase() + prop.slice(1), tooltip, handler;
-$: isActive = () => {
-    return editor && prop && $editor.isActive(prop, attrs);
-};
-function toggle() {
-    if (!$editor)
-        return;
-    //$editor.chain().focus().clearNodes().run()
-    if (handler)
-        return handler();
-    setTimeout(() => $editor.chain().focus()[methodName](attrs)?.run(), 0);
-}
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { Button, IconButton, Render } from 'nunui';
+
+	const editor = getContext<{ v: any }>('editor');
+	const tiptap = $derived(editor.v);
+
+	let {
+		prop = '',
+		attrs = '',
+		label = '',
+		icon = '',
+		methodName = 'toggle' + prop.charAt(0).toUpperCase() + prop.slice(1),
+		tooltip,
+		handler,
+		...rest
+	} = $props();
+
+	const isActive = $derived(() => {
+		return editor && 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);
+	}
 </script>
 
 {#if icon}
-    <IconButton size="1.2em" {icon} active={isActive()} on:click={toggle} tooltip={tooltip} tabindex="0"/>
+	<IconButton size="1.2em" {icon} active={isActive()} onclick={toggle} {tooltip} tabindex="0" />
 {:else}
-    <Button outlined={!isActive()} on:click={handler || toggle} small {...$$restProps}>
-        {label}
-        <slot/>
-    </Button>
+	<Button outlined={!isActive()} onclick={handler || toggle} small {...rest}>
+		{label}
+		<Render it={children} />
+	</Button>
 {/if}
-

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

@@ -1,25 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        prop?: string | undefined;
-        attrs?: string | undefined;
-        label?: string | undefined;
-        icon?: string | undefined;
-        methodName?: string | undefined;
-        tooltip: any;
-        handler: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ToolbarButtonProps = typeof __propDef.props;
-export type ToolbarButtonEvents = typeof __propDef.events;
-export type ToolbarButtonSlots = typeof __propDef.slots;
-export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
-}
-export {};
+declare const ToolbarButton: import("svelte").Component<{
+    prop?: string;
+    attrs?: string;
+    label?: string;
+    icon?: string;
+    methodName?: unknown;
+    tooltip: unknown;
+    handler: unknown;
+} & Record<string, unknown>, {}, "">;
+export default ToolbarButton;

package/dist/tiptap/index.d.ts

@@ -1,2 +1,2 @@
 export default TipTap;
-import TipTap from "./TipTap.svelte";
+import TipTap from './TipTap.svelte';

package/dist/tiptap/index.js

@@ -1,3 +1,3 @@
-import TipTap from "./TipTap.svelte";
+import TipTap from './TipTap.svelte';
 
-export default TipTap;
+export default TipTap;

package/dist/tiptap/setMath.js

@@ -1,6 +1,8 @@
 export default function setMath(tiptap) {
     const { selection } = tiptap.state;
-    tiptap.chain().command(({ state, tr }) => state.doc.nodesBetween(selection.from, selection.to, (node, position) => {
+    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);
@@ -10,5 +12,6 @@ export default function setMath(tiptap) {
         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);
-    })).run();
+    }))
+        .run();
 }

package/dist/tiptap/tiptap.d.ts

@@ -1,3 +1,3 @@
-import { Editor } from "@tiptap/core";
-declare const _default: (element: Element, content: string, { placeholder, plugins, ...props }?: any) => Editor;
+import { Editor } from '@tiptap/core';
+declare const _default: (element: Element, content: string, { placeholder, plugins, crossorigin, ...props }?: any) => Editor;
 export default _default;