@seorii/tiptap 0.1.1 → 0.2.0

package/dist/plugin/command/emoji.d.ts

@@ -0,0 +1,20 @@
+import { PluginKey } from "prosemirror-state";
+import type { Editor } from "@tiptap/core";
+export declare const emoji: {
+    pluginKey: PluginKey<any>;
+    char: string;
+    items: ({ query }: {
+        query: any;
+    }) => {
+        title: string;
+        command: {};
+    }[];
+    render: () => {
+        onStart: (props: any) => void;
+        onUpdate(props: any): void;
+        onKeyDown(props: any): true | undefined;
+        onExit(): void;
+    };
+};
+declare const _default: (editor: Editor) => import("prosemirror-state").Plugin<any>;
+export default _default;

package/dist/plugin/command/emoji.js

@@ -0,0 +1,81 @@
+import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail } from './stores';
+import { PluginKey } from "prosemirror-state";
+import Suggestion from "@tiptap/suggestion";
+//@ts-ignore
+import emojis from 'emojis-list';
+//@ts-ignore
+import tags from 'emojis-keywords';
+const max = 10;
+function fixRange(editor, range, split = '/') {
+    const { state } = editor.view, { selection, doc } = state;
+    if (selection.$to.nodeBefore?.text?.includes?.(split)) {
+        range.from = range.to;
+        while (range.from > 0 && doc.textBetween(range.from - 1, range.from) !== split) {
+            try {
+                range.from -= 1;
+            }
+            catch (e) {
+                range.from += 2;
+                break;
+            }
+        }
+        range.from -= 1;
+    }
+    while (range.to < selection.to && doc.textBetween(range.to, range.to + 1) !== ' ') {
+        try {
+            range.to += 1;
+        }
+        catch (e) {
+            range.to -= 1;
+            break;
+        }
+    }
+    return range;
+}
+export const emoji = {
+    pluginKey: new PluginKey('slash-emoji'),
+    char: ':',
+    items: ({ query }) => {
+        query = ':' + query.toLowerCase();
+        const filtered = [];
+        for (let i = 0; i < emojis.length; i++) {
+            if (tags[i]?.includes?.(query))
+                filtered.push({
+                    title: emojis[i] + '  ' + tags[i],
+                    command: ({ editor, range }) => {
+                        editor.chain().deleteRange(fixRange(editor, range, ':')).insertContent(emojis[i]).run();
+                    }
+                });
+            if (filtered.length >= max)
+                break;
+        }
+        return filtered;
+    },
+    render: () => {
+        return {
+            onStart: (props) => {
+                let editor = props.editor;
+                let range = props.range;
+                let location = props.clientRect();
+                slashProps.set({ editor, range });
+                slashVisible.set(true);
+                slashLocaltion.set({ x: location.x, y: location.y, height: location.height });
+                slashItems.set(props.items);
+                slashDetail.set('emoji');
+            },
+            onUpdate(props) {
+                slashItems.set(props.items);
+            },
+            onKeyDown(props) {
+                if (props.event.key === 'Escape') {
+                    slashVisible.set(false);
+                    return true;
+                }
+            },
+            onExit() {
+                slashVisible.set(false);
+            }
+        };
+    }
+};
+export default (editor) => Suggestion({ ...emoji, editor });

package/dist/plugin/command/stores.d.ts

@@ -11,3 +11,4 @@ export declare const slashProps: import("svelte/store").Writable<{
     range: null;
 }>;
 export declare const slashDetail: import("svelte/store").Writable<null>;
+export declare const slashSelection: import("svelte/store").Writable<null>;

package/dist/plugin/command/stores.js

@@ -4,3 +4,4 @@ export const slashItems = writable([]);
 export const slashLocaltion = writable({ x: 0, y: 0, height: 0 });
 export const slashProps = writable({ editor: null, range: null });
 export const slashDetail = writable(null);
+export const slashSelection = writable(null);

package/dist/plugin/command/suggest.d.ts

@@ -1,4 +1,8 @@
-declare const _default: {
+import { PluginKey } from "prosemirror-state";
+import { Editor } from "@tiptap/core";
+export declare const suggest: {
+    pluginKey: PluginKey<any>;
+    char: string;
     items: ({ query }: {
         query: any;
     }) => {
@@ -20,4 +24,5 @@ declare const _default: {
         onExit(): void;
     };
 };
+declare const _default: (editor: Editor) => import("prosemirror-state").Plugin<any>;
 export default _default;

package/dist/plugin/command/suggest.js

@@ -1,6 +1,38 @@
-import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail } from './stores';
+import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail, slashSelection } from './stores';
 import i18n from "../../i18n";
-export default {
+import { fallbackUpload } from "../image/dragdrop";
+import { PluginKey } from "prosemirror-state";
+import { Editor } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+function fixRange(editor, range, split = '/') {
+    const { state } = editor.view, { selection, doc } = state;
+    if (selection.$to.nodeBefore?.text?.includes?.(split)) {
+        range.from = range.to;
+        while (range.from > 0 && doc.textBetween(range.from - 1, range.from) !== split) {
+            try {
+                range.from -= 1;
+            }
+            catch (e) {
+                range.from += 2;
+                break;
+            }
+        }
+        range.from -= 1;
+    }
+    while (range.to < selection.to && doc.textBetween(range.to, range.to + 1) !== ' ') {
+        try {
+            range.to += 1;
+        }
+        catch (e) {
+            range.to -= 1;
+            break;
+        }
+    }
+    return range;
+}
+export const suggest = {
+    pluginKey: new PluginKey('slash-suggest'),
+    char: '/',
     items: ({ query }) => {
         const raw = [
             {
@@ -10,7 +42,7 @@ export default {
                         title: i18n('title') + ' 1',
                         subtitle: i18n('title1Info'),
                         command: ({ editor, range }) => {
-                            editor.chain().focus().deleteRange(range).setNode('heading', { level: 1 }).run();
+                            editor.chain().focus().deleteRange(fixRange(editor, range)).setNode('heading', { level: 1 }).run();
                         }
                     },
                     {
@@ -18,7 +50,7 @@ export default {
                         title: i18n('title') + ' 2',
                         subtitle: i18n('title2Info'),
                         command: ({ editor, range }) => {
-                            editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run();
+                            editor.chain().focus().deleteRange(fixRange(editor, range)).setNode('heading', { level: 2 }).run();
                         }
                     },
                     {
@@ -26,7 +58,7 @@ export default {
                         title: i18n('title') + ' 3',
                         subtitle: i18n('title3Info'),
                         command: ({ editor, range }) => {
-                            editor.chain().focus().deleteRange(range).setNode('heading', { level: 3 }).run();
+                            editor.chain().focus().deleteRange(fixRange(editor, range)).setNode('heading', { level: 3 }).run();
                         }
                     },
                     {
@@ -34,7 +66,7 @@ export default {
                         title: i18n('unorderedList'),
                         subtitle: i18n('unorderedListInfo'),
                         command: ({ editor, range }) => {
-                            editor.commands.deleteRange(range);
+                            editor.commands.deleteRange(fixRange(editor, range));
                             editor.commands.toggleBulletList();
                         }
                     },
@@ -43,7 +75,7 @@ export default {
                         title: i18n('numberList'),
                         subtitle: i18n('numberListInfo'),
                         command: ({ editor, range }) => {
-                            editor.commands.deleteRange(range);
+                            editor.commands.deleteRange(fixRange(editor, range));
                             editor.commands.toggleOrderedList();
                         }
                     }
@@ -51,12 +83,34 @@ export default {
             },
             {
                 section: i18n('block'), list: [
+                    {
+                        icon: 'image',
+                        title: i18n('image'),
+                        subtitle: i18n('imageInfo'),
+                        command: ({ editor, range }) => {
+                            editor.chain().focus().deleteRange(fixRange(editor, range)).run();
+                            const input = document.createElement('input');
+                            input.type = 'file';
+                            input.accept = 'image/*';
+                            input.onchange = async () => {
+                                if (input.files) {
+                                    const file = input.files[0];
+                                    if (file) {
+                                        const upload = window.__image_uploader || fallbackUpload;
+                                        const src = await upload(file);
+                                        editor.chain().focus().deleteRange(range).setImage({ src }).run();
+                                    }
+                                }
+                            };
+                            input.click();
+                        }
+                    },
                     {
                         icon: 'code',
                         title: i18n('codeBlock'),
                         subtitle: i18n('codeBlockInfo'),
                         command: ({ editor, range }) => {
-                            editor.chain().focus().deleteRange(range).setNode('codeBlock').run();
+                            editor.chain().focus().deleteRange(fixRange(editor, range)).setNode('codeBlock').run();
                         }
                     },
                     {
@@ -65,7 +119,7 @@ export default {
                         subtitle: i18n('mathBlockInfo'),
                         command: ({ editor, range }) => {
                             const { to } = range;
-                            editor.chain().focus().deleteRange(range).setNode('math_display').focus().run();
+                            editor.chain().focus().deleteRange(fixRange(editor, range)).setNode('math_display').focus().run();
                         }
                     },
                     {
@@ -73,7 +127,7 @@ export default {
                         title: i18n('table'),
                         subtitle: i18n('tableInfo'),
                         command: ({ editor, range }) => {
-                            editor.chain().focus().insertTable({ rows: 2, cols: 3 }).run();
+                            editor.chain().focus().deleteRange(fixRange(editor, range)).insertTable({ rows: 2, cols: 3 }).run();
                         }
                     },
                     {
@@ -81,7 +135,7 @@ export default {
                         title: i18n('blockquote'),
                         subtitle: i18n('blockquoteInfo'),
                         command: ({ editor, range }) => {
-                            editor.chain().focus().deleteRange(range).setBlockquote().focus().run();
+                            editor.chain().focus().deleteRange(fixRange(editor, range)).setBlockquote().focus().run();
                         }
                     },
                     {
@@ -89,6 +143,7 @@ export default {
                         title: i18n('iframe'),
                         subtitle: i18n('iframeInfo'),
                         command: ({ editor, range }) => {
+                            slashSelection.set(() => editor.chain().focus().deleteRange(fixRange(editor, range)).run());
                             slashDetail.set('iframe');
                         }
                     },
@@ -97,6 +152,7 @@ export default {
                         title: i18n('youtube'),
                         subtitle: i18n('youtubeInfo'),
                         command: ({ editor, range }) => {
+                            slashSelection.set(() => editor.chain().focus().deleteRange(fixRange(editor, range)).run());
                             slashDetail.set('youtube');
                         }
                     }
@@ -136,3 +192,4 @@ export default {
         };
     }
 };
+export default (editor) => Suggestion({ ...suggest, editor });

package/dist/plugin/image/dragdrop.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'prosemirror-state';
+export type UploadFn = (image: File) => Promise<string>;
+export declare const fallbackUpload: (image: File) => Promise<string>;
+export declare const dropImagePlugin: () => Plugin<any>;

package/dist/plugin/image/dragdrop.js

@@ -0,0 +1,86 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+export const fallbackUpload = (async (image) => URL.createObjectURL(image));
+export const dropImagePlugin = () => {
+    return new Plugin({
+        props: {
+            handleDOMEvents: {
+                paste(view, event) {
+                    const upload = window.__image_uploader || fallbackUpload;
+                    const items = Array.from(event.clipboardData?.items || []);
+                    const { schema } = view.state;
+                    items.forEach((item) => {
+                        const image = item.getAsFile();
+                        if (item.type.indexOf('image') === 0) {
+                            event.preventDefault();
+                            if (upload && image) {
+                                upload(image).then((src) => {
+                                    const node = schema.nodes.image.create({
+                                        src: src,
+                                    });
+                                    const transaction = view.state.tr.replaceSelectionWith(node);
+                                    view.dispatch(transaction);
+                                });
+                            }
+                        }
+                        else {
+                            const reader = new FileReader();
+                            reader.onload = (readerEvent) => {
+                                const node = schema.nodes.image.create({
+                                    src: readerEvent.target?.result,
+                                });
+                                const transaction = view.state.tr.replaceSelectionWith(node);
+                                view.dispatch(transaction);
+                            };
+                            if (!image)
+                                return;
+                            reader.readAsDataURL(image);
+                        }
+                    });
+                    return false;
+                },
+                drop: (view, event) => {
+                    const upload = window.__image_uploader || fallbackUpload;
+                    const hasFiles = event.dataTransfer &&
+                        event.dataTransfer.files &&
+                        event.dataTransfer.files.length;
+                    if (!hasFiles) {
+                        return false;
+                    }
+                    const images = Array.from(event.dataTransfer?.files ?? []).filter((file) => /image/i.test(file.type));
+                    if (images.length === 0) {
+                        return false;
+                    }
+                    event.preventDefault();
+                    const { schema } = view.state;
+                    const coordinates = view.posAtCoords({
+                        left: event.clientX,
+                        top: event.clientY,
+                    });
+                    if (!coordinates)
+                        return false;
+                    images.forEach(async (image) => {
+                        const reader = new FileReader();
+                        if (upload) {
+                            const node = schema.nodes.image.create({
+                                src: await upload(image),
+                            });
+                            const transaction = view.state.tr.insert(coordinates.pos, node);
+                            view.dispatch(transaction);
+                        }
+                        else {
+                            reader.onload = (readerEvent) => {
+                                const node = schema.nodes.image.create({
+                                    src: readerEvent.target?.result,
+                                });
+                                const transaction = view.state.tr.insert(coordinates.pos, node);
+                                view.dispatch(transaction);
+                            };
+                            reader.readAsDataURL(image);
+                        }
+                    });
+                    return true;
+                },
+            },
+        },
+    });
+};

package/dist/plugin/{image.js → image/index.js}

@@ -1,5 +1,6 @@
 import Image from "@tiptap/extension-image";
 import { mergeAttributes } from "@tiptap/core";
+import { dropImagePlugin } from "./dragdrop";
 export default Image.extend({
     addOptions() {
         return {
@@ -11,5 +12,8 @@ export default Image.extend({
     renderHTML({ HTMLAttributes }) {
         const { style } = HTMLAttributes;
         return ["figure", { style }, ["img", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]];
-    }
+    },
+    addProseMirrorPlugins() {
+        return [dropImagePlugin()];
+    },
 }).configure({ HTMLAttributes: { crossorigin: 'anonymous' } });

package/dist/plugin/table/style/grip.scss

@@ -63,7 +63,7 @@ $grip-margin: 3px;
     }
   }
 
-  .editor & {
+  .editable & {
     .grip-column, .grip-row, .grip-table {
       opacity: 1;
       cursor: pointer;

package/dist/plugin/table/style/resize.scss

@@ -9,7 +9,7 @@
     background-color: var(--primary-light6);
     opacity: 0;
 
-    .editor & {
+    .editable & {
       opacity: 1;
     }
   }
@@ -17,7 +17,7 @@
   &.resize-cursor {
     pointer-events: none;
 
-    .editor & {
+    .editable & {
       pointer-events: initial;
       cursor: ew-resize;
       cursor: col-resize; /* stylelint-disable declaration-block-no-duplicate-properties */

package/dist/plugin/table/style/table.scss

@@ -69,7 +69,7 @@
   }
 }
 
-.editor {
+.editable {
   .ProseMirror {
     .tableWrapper {
       padding: 10px;

package/dist/plugin/table/style.scss

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

package/dist/tiptap/Command.svelte

@@ -1,16 +1,17 @@
-<script>import { Button, IconButton, Input, List, TwoLine } from "nunui";
+<script>import { Button, IconButton, Input, List, OneLine, TwoLine } from "nunui";
 import { getContext } from "svelte";
-import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail } from '../plugin/command/stores';
+import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail, slashSelection } from '../plugin/command/stores';
 import { fly, slide } from "svelte/transition";
 import { quartOut } from "svelte/easing";
 import i18n from "../i18n";
 const tiptap = getContext('editor');
 export let selectedIndex = 0;
 let height = 0, elements = [];
-let iframe = '';
+let iframe = '', focus;
 $: if ($slashVisible) {
     iframe = '';
 }
+$: setTimeout(() => focus?.focus?.(), 100);
 </script>
 
 <svelte:window bind:innerHeight={height}/>
@@ -26,16 +27,19 @@ $: if ($slashVisible) {
                     <IconButton icon="arrow_back" on:click={() => $slashDetail = ''}/>
                     <div class="title">iframe</div>
                 </header>
-                <Input placeholder="url" fullWidth bind:value={iframe} autofocus
+                <Input placeholder="url" fullWidth bind:value={iframe} bind:input={focus}
                        on:submit={() => $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}/>
                 <footer>
                     <Button tabindex="0" transparent small on:click={() => {
-                                iframe = ''
-                                $slashDetail = ''
-                            }}>{i18n('cancel')}
+                        iframe = ''
+                        $slashDetail = ''
+                    }}>{i18n('cancel')}
                     </Button>
                     <Button tabindex="0" transparent small
-                            on:click={() => $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}>{i18n('insert')}
+                            on:click={() => {
+                                $slashSelection?.();
+                                $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}
+                            }>{i18n('insert')}
                     </Button>
                 </footer>
             </div>
@@ -45,31 +49,52 @@ $: if ($slashVisible) {
                     <IconButton icon="arrow_back" on:click={() => $slashDetail = ''}/>
                     <div class="title">Youtube</div>
                 </header>
-                <Input placeholder="url" fullWidth bind:value={iframe} autofocus
+                <Input placeholder="url" fullWidth bind:value={iframe} bind:input={focus}
                        on:submit={() => $tiptap.commands.insertVideoPlayer({url: iframe})}/>
                 <footer>
                     <Button tabindex="0" transparent small on:click={() => {
-                                iframe = ''
-                                $slashDetail = ''
-                            }}>{i18n('cancel')}
+                        iframe = ''
+                        $slashDetail = ''
+                    }}>{i18n('cancel')}
                     </Button>
-                    <Button tabindex="0" transparent small
-                            on:click={() => $tiptap.commands.insertVideoPlayer({url: iframe})}>{i18n('insert')}
+                    <Button tabindex="0" transparent small on:click={() => {
+                        $slashSelection?.();
+                        $tiptap.commands.insertVideoPlayer({url: iframe});
+                    }}>{i18n('insert')}
                     </Button>
                 </footer>
             </div>
+        {:else if $slashDetail === 'emoji'}
+            <div class="list">
+                <List>
+                    {#each $slashItems as {title, command}, i(title)}
+                        <div transition:slide={{duration: 400, easing: quartOut}}>
+                            <OneLine on:click={() => {
+                                command?.($slashProps);
+                                setTimeout(() => $tiptap.commands.focus());
+                            }} bind:this={elements[i]} {title} active={selectedIndex === i}/>
+                        </div>
+                    {/each}
+                    {#if !$slashItems.length}
+                        <div class="section"
+                             transition:slide={{duration: 400, easing: quartOut}}>{i18n('noResult')}</div>
+                    {/if}
+                </List>
+            </div>
         {:else}
             <div class="list">
                 <List>
-                    {#each $slashItems as {section, list}(section)}
+                    {#each $slashItems as {section, list}, j(section)}
+                        {@const lastCount = $slashItems.slice(0, j).reduce((acc, cur) => acc + cur.list.length, 0)}
                         <div class="section" transition:slide={{duration: 400, easing: quartOut}}>{section}</div>
                         <div transition:slide={{duration: 400, easing: quartOut}}>
                             {#each list || [] as {title, subtitle, icon, command, section}, i(title)}
                                 <div transition:slide={{duration: 400, easing: quartOut}}>
-                                    <TwoLine on:mouseenter={() => (selectedIndex = i)} on:click={() => {
+                                    <TwoLine on:mouseenter={() => (selectedIndex = i + lastCount)} on:click={() => {
                                         command?.($slashProps);
                                         setTimeout(() => $tiptap.commands.focus());
-                                    }} bind:this={elements[i]} {icon} {title} subtitle={subtitle || ''}/>
+                                    }} bind:this={elements[i + lastCount]} {icon} {title} subtitle={subtitle || ''}
+                                             active={selectedIndex === i + lastCount}/>
                                 </div>
                             {/each}
                         </div>
@@ -98,6 +123,7 @@ main {
   position: fixed;
   background: var(--surface, #fff);
   width: 220px;
+  max-height: 384px;
   border-radius: 4px;
   overflow-y: scroll;
   z-index: 10;

package/dist/tiptap/TipTap.svelte

@@ -8,6 +8,7 @@ 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";
 const san = (body) => sanitizeHtml(body, {
     allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'tiptap-file', 'lite-youtube', 'blockquote']),
     allowedStyles: '*', allowedAttributes: {
@@ -21,11 +22,12 @@ const san = (body) => sanitizeHtml(body, {
         'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider'],
     },
 });
-export let body = '', editable = false, style = '', ref = null, options = {};
+export let body = '', editable = false, ref = null, options = {};
+export const imageUpload = fallbackUpload, style = '';
 const tiptap = setContext('editor', writable(null));
 let element, fullscreen = false, mounted = false, last = '';
-$: ref = $tiptap;
 $: $tiptap && $tiptap.setEditable(editable);
+$: browser && (window.__image_uploader = imageUpload);
 if (browser) {
     onMount(() => {
         body = last = san(body);
@@ -33,9 +35,9 @@ if (browser) {
         Promise.all([import('./tiptap'), import("@justinribeiro/lite-youtube")]).then(([{ default: tt }]) => {
             if (!mounted)
                 return;
-            $tiptap = tt(element, body, {
+            ref = $tiptap = tt(element, body, {
                 editable: editable,
-                onTransaction: () => $tiptap = $tiptap,
+                onTransaction: () => ref = $tiptap = $tiptap,
                 ...options,
             });
             $tiptap.on('update', ({ editor: tiptap }) => {
@@ -62,14 +64,17 @@ $: 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 + $slashItems.length - 1) % $slashItems.length;
+        selectedIndex = (selectedIndex + count - 1) % count;
         return true;
     }
     if (event.key === 'ArrowDown') {
         event.preventDefault();
-        selectedIndex = (selectedIndex + 1) % $slashItems.length;
+        selectedIndex = (selectedIndex + 1) % count;
         return true;
     }
     if (event.key === 'Enter') {
@@ -80,10 +85,10 @@ function handleKeydown(event) {
     return false;
 }
 function selectItem(index) {
-    const item = $slashItems[index];
+    const item = $slashItems[0]?.list ? $slashItems.map(i => i.list).flat()[index] : $slashItems[index];
     if (item) {
         let range = $slashProps.range;
-        item.command({ editor: editable, range });
+        item.command({ editor: $tiptap, range });
     }
 }
 </script>

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

@@ -1,12 +1,14 @@
 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;
-        style?: string | undefined;
-        ref?: any;
+        ref?: null | undefined;
         options?: {} | undefined;
+        imageUpload?: UploadFn | undefined;
+        style?: "" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,5 +21,7 @@ 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> {
+    get imageUpload(): UploadFn;
+    get style(): "";
 }
 export {};

package/dist/tiptap/tiptap.js

@@ -23,55 +23,60 @@ import Iframe from "../plugin/iframe";
 // @ts-ignore
 import { MathInline, MathBlock } from "@seorii/prosemirror-math/tiptap";
 import Youtube from "../plugin/youtube";
-import command from "../plugin/command";
-export default (element, content, { plugins = [], ...props } = {}) => new Editor({
-    element, content, ...props,
-    extensions: [
-        CodeBlockLowlight.extend({
-            addKeyboardShortcuts() {
-                return {
-                    ...this.parent?.(),
-                    'Tab': () => {
-                        if (this.editor.isActive('codeBlock')) {
-                            return this.editor.commands.insertContent('    ');
+import command from "../plugin/command/suggest";
+import emoji from "../plugin/command/emoji";
+export default (element, content, { plugins = [], ...props } = {}) => {
+    const tt = new Editor({
+        element, content, ...props,
+        extensions: [
+            CodeBlockLowlight.extend({
+                addKeyboardShortcuts() {
+                    return {
+                        ...this.parent?.(),
+                        'Tab': () => {
+                            if (this.editor.isActive('codeBlock')) {
+                                return this.editor.commands.insertContent('    ');
+                            }
+                            return true;
                         }
-                        return true;
-                    }
-                };
-            }
-        }).configure({ lowlight }),
-        Image,
-        Youtube,
-        StarterKit,
-        Underline,
-        Highlight.configure({ multicolor: true }),
-        Link.configure({
-            openOnClick: true, protocols: ['ftp', 'mailto', {
-                    scheme: 'tel',
-                    optionalSlashes: true
-                }]
-        }),
-        TextAlign.configure({ types: ['heading', 'paragraph', 'image'] }),
-        DropCursor,
-        orderedlist,
-        MathInline,
-        MathBlock,
-        table,
-        tableHeader,
-        tableRow,
-        tableCell,
-        Superscript,
-        Subscript,
-        Indent,
-        Color,
-        TextStyle,
-        Iframe,
-        Code.extend({
-            renderHTML({ HTMLAttributes }) {
-                return ['code', mergeAttributes(HTMLAttributes, { class: 'inline' })];
-            }
-        }),
-        command,
-        ...plugins,
-    ],
-});
+                    };
+                }
+            }).configure({ lowlight }),
+            Image,
+            Youtube,
+            StarterKit,
+            Underline,
+            Highlight.configure({ multicolor: true }),
+            Link.configure({
+                openOnClick: true, protocols: ['ftp', 'mailto', {
+                        scheme: 'tel',
+                        optionalSlashes: true
+                    }]
+            }),
+            TextAlign.configure({ types: ['heading', 'paragraph', 'image'] }),
+            DropCursor,
+            orderedlist,
+            MathInline,
+            MathBlock,
+            table,
+            tableHeader,
+            tableRow,
+            tableCell,
+            Superscript,
+            Subscript,
+            Indent,
+            Color,
+            TextStyle,
+            Iframe,
+            Code.extend({
+                renderHTML({ HTMLAttributes }) {
+                    return ['code', mergeAttributes(HTMLAttributes, { class: 'inline' })];
+                }
+            }),
+            ...plugins,
+        ],
+    });
+    tt.registerPlugin(emoji(tt));
+    tt.registerPlugin(command(tt));
+    return tt;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seorii/tiptap",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "scripts": {
     "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",
@@ -60,6 +60,8 @@
     "@tiptap/pm": "^2.0.4",
     "@tiptap/starter-kit": "^2.0.4",
     "@tiptap/suggestion": "^2.0.4",
+    "emojis-keywords": "2.0.0",
+    "emojis-list": "2.0.0",
     "lowlight": "^2.9.0",
     "nunui": "^0.0.101",
     "prosemirror-commands": "^1.5.2",

package/dist/plugin/command/index.d.ts

@@ -1,4 +0,0 @@
-import { Extension } from '@tiptap/core';
-export declare const Command: Extension<any, any>;
-declare const _default: Extension<any, any>;
-export default _default;

package/dist/plugin/command/index.js

@@ -1,27 +0,0 @@
-import { Extension } from '@tiptap/core';
-import Suggestion from '@tiptap/suggestion';
-import suggestion from "./suggest";
-export const Command = Extension.create({
-    name: 'slash',
-    addOptions() {
-        return {
-            suggestion: {
-                char: '/',
-                command: ({ editor, range, props }) => {
-                    props.command({ editor, range });
-                }
-            }
-        };
-    },
-    addProseMirrorPlugins() {
-        return [
-            Suggestion({
-                editor: this.editor,
-                ...this.options.suggestion
-            })
-        ];
-    }
-});
-export default Command.configure({
-    suggestion
-});

package/dist/plugin/table/style/theme.scss

@@ -1,6 +0,0 @@
-$highlight-color: #00bcd4;
-
-.ProseMirror {
-  --highlight-color: #{$highlight-color};
-  --highlight-bg-color: #{$highlight-color}33;
-}