@seorii/tiptap 0.1.2 → 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,7 +1,38 @@
-import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail } from './stores';
+import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail, slashSelection } from './stores';
 import i18n from "../../i18n";
 import { fallbackUpload } from "../image/dragdrop";
-export default {
+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 = [
             {
@@ -11,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();
                         }
                     },
                     {
@@ -19,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();
                         }
                     },
                     {
@@ -27,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();
                         }
                     },
                     {
@@ -35,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();
                         }
                     },
@@ -44,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();
                         }
                     }
@@ -57,6 +88,7 @@ export default {
                         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/*';
@@ -78,7 +110,7 @@ export default {
                         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();
                         }
                     },
                     {
@@ -87,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();
                         }
                     },
                     {
@@ -95,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();
                         }
                     },
                     {
@@ -103,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();
                         }
                     },
                     {
@@ -111,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');
                         }
                     },
@@ -119,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');
                         }
                     }
@@ -158,3 +192,4 @@ export default {
         };
     }
 };
+export default (editor) => Suggestion({ ...suggest, editor });

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>

package/dist/tiptap/TipTap.svelte

@@ -64,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') {
@@ -82,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.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.2",
+  "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;
-}