@seorii/tiptap 0.3.0-next.8 → 0.3.0

package/dist/plugin/command/suggest.js

@@ -1,18 +1,43 @@
-import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail, slashSelection } from './stores';
+import { closeSlash, moveSlashSelection, runSlashItemAt, setSlashItems, setSlashLocation, setSlashProps, slashState } from './stores.svelte';
 import i18n from '../../i18n';
-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;
+import enUs from '../../i18n/en-us/index';
+import koKr from '../../i18n/ko-kr/index';
+import { fallbackUpload, releaseObjectUrlOnImageSettled } from '../image/dragdrop';
+import { PluginKey, TextSelection } from '@tiptap/pm/state';
+import Suggestion, {} from '@tiptap/suggestion';
+const normalizeSearch = (value) => value.toLowerCase().trim();
+const compactSearch = (value) => normalizeSearch(value).replace(/\s+/g, '');
+function localeText(key, locale) {
+    const value = locale[key];
+    return typeof value === 'string' ? value : '';
+}
+function createKeywords(keys, extra = []) {
+    return [
+        ...new Set([...extra, ...keys.flatMap((key) => [localeText(key, enUs), localeText(key, koKr)])]
+            .map(normalizeSearch)
+            .filter(Boolean))
+    ];
+}
+function matchQuery(value, query, compactQuery) {
+    const normalizedValue = normalizeSearch(value);
+    return normalizedValue.includes(query) || compactSearch(normalizedValue).includes(compactQuery);
+}
+function matchItem(item, query, compactQuery) {
+    if (!query)
+        return true;
+    return [item.title, item.subtitle ?? '', ...(item.keywords ?? [])].some((value) => matchQuery(value, query, compactQuery));
+}
+function fixRange(editor, rawRange, split = '/') {
+    const range = { ...rawRange };
+    const { state } = editor.view;
+    const { 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) {
+            catch {
                 range.from += 2;
                 break;
             }
@@ -23,29 +48,35 @@ function fixRange(editor, range, split = '/') {
         try {
             range.to += 1;
         }
-        catch (e) {
+        catch {
             range.to -= 1;
             break;
         }
     }
     return range;
 }
-export function getDetail(editor, range, opt) {
-    slashSelection.set(() => editor.chain().focus().deleteRange(fixRange(editor, range)).run());
-    slashDetail.set(opt);
+export function getDetail(editor, range, option) {
+    slashState.selection = () => {
+        editor.chain().focus().deleteRange(fixRange(editor, range)).run();
+    };
+    slashState.detail = option;
 }
 export const suggest = {
     pluginKey: new PluginKey('slash-suggest'),
     char: '/',
     items: ({ query }) => {
+        const blocks = typeof window !== 'undefined'
+            ? (window.__tiptap_blocks ?? [])
+            : [];
         const raw = [
             {
                 section: i18n('text'),
                 list: [
                     {
                         icon: 'title',
-                        title: i18n('title') + ' 1',
+                        title: `${i18n('title')} 1`,
                         subtitle: i18n('title1Info'),
+                        keywords: createKeywords(['title', 'title1Info'], ['heading 1', 'h1']),
                         command: ({ editor, range }) => {
                             editor
                                 .chain()
@@ -57,8 +88,9 @@ export const suggest = {
                     },
                     {
                         icon: 'title',
-                        title: i18n('title') + ' 2',
+                        title: `${i18n('title')} 2`,
                         subtitle: i18n('title2Info'),
+                        keywords: createKeywords(['title', 'title2Info'], ['heading 2', 'h2']),
                         command: ({ editor, range }) => {
                             editor
                                 .chain()
@@ -70,8 +102,9 @@ export const suggest = {
                     },
                     {
                         icon: 'title',
-                        title: i18n('title') + ' 3',
+                        title: `${i18n('title')} 3`,
                         subtitle: i18n('title3Info'),
+                        keywords: createKeywords(['title', 'title3Info'], ['heading 3', 'h3']),
                         command: ({ editor, range }) => {
                             editor
                                 .chain()
@@ -85,6 +118,7 @@ export const suggest = {
                         icon: 'format_list_bulleted',
                         title: i18n('unorderedList'),
                         subtitle: i18n('unorderedListInfo'),
+                        keywords: createKeywords(['unorderedList', 'unorderedListInfo'], ['bullet list', 'ul']),
                         command: ({ editor, range }) => {
                             editor.commands.deleteRange(fixRange(editor, range));
                             editor.commands.toggleBulletList();
@@ -94,6 +128,7 @@ export const suggest = {
                         icon: 'format_list_numbered',
                         title: i18n('numberList'),
                         subtitle: i18n('numberListInfo'),
+                        keywords: createKeywords(['numberList', 'numberListInfo'], ['ordered list', 'ol']),
                         command: ({ editor, range }) => {
                             editor.commands.deleteRange(fixRange(editor, range));
                             editor.commands.toggleOrderedList();
@@ -104,25 +139,27 @@ export const suggest = {
             {
                 section: i18n('block'),
                 list: [
-                    ...window.__tiptap_blocks,
+                    ...blocks,
                     {
                         icon: 'image',
                         title: i18n('image'),
                         subtitle: i18n('imageInfo'),
+                        keywords: createKeywords(['image', '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();
-                                    }
-                                }
+                                if (!input.files?.length)
+                                    return;
+                                const file = input.files[0];
+                                if (!file)
+                                    return;
+                                const upload = window.__image_uploader ?? fallbackUpload;
+                                const src = await upload(file);
+                                editor.chain().focus().deleteRange(range).setImage({ src }).run();
+                                releaseObjectUrlOnImageSettled(editor.view, src);
                             };
                             input.click();
                         }
@@ -131,24 +168,42 @@ export const suggest = {
                         icon: 'code',
                         title: i18n('codeBlock'),
                         subtitle: i18n('codeBlockInfo'),
-                        command: ({ editor, range }) => getDetail(editor, range, {
-                            type: 'code',
-                            handler: (input) => {
-                                editor
-                                    .chain()
-                                    .focus()
-                                    .deleteRange(fixRange(editor, range - 1))
-                                    .setNode('codeBlock', { language: input })
-                                    .run();
-                            }
-                        })
+                        keywords: createKeywords(['codeBlock', 'codeBlockInfo'], ['code']),
+                        command: ({ editor, range }) => {
+                            editor
+                                .chain()
+                                .focus()
+                                .deleteRange(fixRange(editor, range))
+                                .setNode('codeBlock', { language: null })
+                                .command(({ tr }) => {
+                                const { from } = tr.selection;
+                                const $from = tr.doc.resolve(from);
+                                if ($from.parent.type.name === 'codeBlock') {
+                                    tr.setSelection(TextSelection.create(tr.doc, $from.start()));
+                                    return true;
+                                }
+                                const before = $from.nodeBefore;
+                                if (before?.type.name === 'codeBlock') {
+                                    const positionInsideCodeBlock = from - before.nodeSize + 1;
+                                    tr.setSelection(TextSelection.create(tr.doc, positionInsideCodeBlock));
+                                    return true;
+                                }
+                                const after = $from.nodeAfter;
+                                if (after?.type.name === 'codeBlock') {
+                                    tr.setSelection(TextSelection.create(tr.doc, from + 1));
+                                }
+                                return true;
+                            })
+                                .focus()
+                                .run();
+                        }
                     },
                     {
                         icon: 'functions',
                         title: i18n('mathBlock'),
                         subtitle: i18n('mathBlockInfo'),
+                        keywords: createKeywords(['mathBlock', 'mathBlockInfo'], ['latex', 'equation']),
                         command: ({ editor, range }) => {
-                            const { to } = range;
                             editor
                                 .chain()
                                 .focus()
@@ -162,6 +217,7 @@ export const suggest = {
                         icon: 'table_chart',
                         title: i18n('table'),
                         subtitle: i18n('tableInfo'),
+                        keywords: createKeywords(['table', 'tableInfo']),
                         command: ({ editor, range }) => {
                             editor
                                 .chain()
@@ -178,6 +234,7 @@ export const suggest = {
                         icon: 'format_quote',
                         title: i18n('blockquote'),
                         subtitle: i18n('blockquoteInfo'),
+                        keywords: createKeywords(['blockquote', 'blockquoteInfo'], ['quote']),
                         command: ({ editor, range }) => {
                             editor
                                 .chain()
@@ -192,6 +249,7 @@ export const suggest = {
                         icon: 'iframe',
                         title: i18n('iframe'),
                         subtitle: i18n('iframeInfo'),
+                        keywords: createKeywords(['iframe', 'iframeInfo'], ['embed', 'url']),
                         command: ({ editor, range }) => getDetail(editor, range, {
                             title: 'iframe',
                             placeholder: 'url',
@@ -214,6 +272,7 @@ export const suggest = {
                         icon: 'youtube_activity',
                         title: i18n('youtube'),
                         subtitle: i18n('youtubeInfo'),
+                        keywords: createKeywords(['youtube', 'youtubeInfo'], ['video']),
                         command: ({ editor, range }) => getDetail(editor, range, {
                             title: 'youtube',
                             placeholder: 'url',
@@ -230,38 +289,61 @@ export const suggest = {
                 ]
             }
         ];
-        const filtered = raw
+        const normalizedQuery = normalizeSearch(query);
+        const compactQuery = compactSearch(query);
+        return raw
             .map(({ section, list }) => ({
             section,
-            list: list.filter((item) => item.title.toLowerCase().includes(query.toLowerCase()) ||
-                item.subtitle.toLowerCase().includes(query.toLowerCase()))
+            list: list.filter((item) => matchItem(item, normalizedQuery, compactQuery))
         }))
             .filter(({ list }) => list.length > 0);
-        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(null);
+                const { editor, range } = props;
+                setSlashProps({ editor, range });
+                slashState.visible = true;
+                slashState.selectedIndex = 0;
+                setSlashItems(props.items);
+                slashState.detail = null;
+                const location = props.clientRect?.();
+                if (location) {
+                    setSlashLocation({ x: location.x, y: location.y, height: location.height });
+                }
             },
             onUpdate(props) {
-                slashItems.set(props.items);
+                setSlashProps({ editor: props.editor, range: props.range });
+                setSlashItems(props.items);
             },
             onKeyDown(props) {
+                if (props.event.key === 'ArrowUp') {
+                    props.event.preventDefault();
+                    moveSlashSelection(-1);
+                    return true;
+                }
+                if (props.event.key === 'ArrowDown') {
+                    props.event.preventDefault();
+                    moveSlashSelection(1);
+                    return true;
+                }
+                if (props.event.key === 'Tab') {
+                    props.event.preventDefault();
+                    moveSlashSelection(props.event.shiftKey ? -1 : 1);
+                    return true;
+                }
+                if (props.event.key === 'Enter') {
+                    props.event.preventDefault();
+                    return runSlashItemAt(slashState.selectedIndex);
+                }
                 if (props.event.key === 'Escape') {
-                    slashVisible.set(false);
+                    closeSlash();
                     return true;
                 }
+                return false;
             },
             onExit() {
-                slashVisible.set(false);
+                closeSlash();
             }
         };
     }

package/dist/plugin/embed.d.ts

@@ -1,7 +1,6 @@
 import { Node } from '@tiptap/core';
 export interface EmbedOptions {
     allowFullscreen: boolean;
-    type: string;
     HTMLAttributes: {
         [key: string]: any;
     };
@@ -12,7 +11,8 @@ declare module '@tiptap/core' {
             setEmbed: (options: {
                 src: string;
                 type: string;
-                width: string;
+                width?: string;
+                height?: string;
             }) => ReturnType;
         };
     }

package/dist/plugin/embed.js

@@ -42,7 +42,11 @@ export default Node.create({
         return {
             setEmbed: (options) => ({ tr, dispatch }) => {
                 const { selection } = tr;
-                const node = this.type.create(options);
+                const node = this.type.create({
+                    width: options.width ?? '100%',
+                    height: options.height ?? '800px',
+                    ...options
+                });
                 if (dispatch)
                     tr.replaceRangeWith(selection.from, selection.to, node);
                 return true;

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

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

package/dist/plugin/image/dragdrop.js

@@ -1,5 +1,66 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { Plugin } from 'prosemirror-state';
 export const fallbackUpload = async (image) => URL.createObjectURL(image);
+const OBJECT_URL_PREFIX = 'blob:';
+const OBJECT_URL_REVOKE_TIMEOUT_MS = 30_000;
+const isObjectUrl = (src) => src.startsWith(OBJECT_URL_PREFIX);
+const revokeObjectUrl = (src) => {
+    try {
+        URL.revokeObjectURL(src);
+    }
+    catch {
+        // no-op
+    }
+};
+export const releaseObjectUrlOnImageSettled = (view, src) => {
+    if (!isObjectUrl(src))
+        return;
+    let released = false;
+    const cleanups = [];
+    const release = () => {
+        if (released)
+            return;
+        released = true;
+        cleanups.forEach((cleanup) => cleanup());
+        cleanups.length = 0;
+        revokeObjectUrl(src);
+    };
+    const timer = setTimeout(release, OBJECT_URL_REVOKE_TIMEOUT_MS);
+    cleanups.push(() => clearTimeout(timer));
+    const bind = () => {
+        const images = Array.from(view.dom.querySelectorAll('img')).filter((image) => image.getAttribute('src') === src);
+        if (!images.length)
+            return false;
+        let pending = 0;
+        images.forEach((image) => {
+            if (image.complete)
+                return;
+            pending += 1;
+            const settle = () => {
+                image.removeEventListener('load', settle);
+                image.removeEventListener('error', settle);
+                pending -= 1;
+                if (pending <= 0)
+                    release();
+            };
+            image.addEventListener('load', settle);
+            image.addEventListener('error', settle);
+            cleanups.push(() => {
+                image.removeEventListener('load', settle);
+                image.removeEventListener('error', settle);
+            });
+        });
+        if (pending <= 0)
+            release();
+        return true;
+    };
+    queueMicrotask(() => {
+        if (bind())
+            return;
+        requestAnimationFrame(() => {
+            bind();
+        });
+    });
+};
 export const dropImagePlugin = () => {
     return new Plugin({
         props: {
@@ -19,6 +80,7 @@ export const dropImagePlugin = () => {
                                     });
                                     const transaction = view.state.tr.replaceSelectionWith(node);
                                     view.dispatch(transaction);
+                                    releaseObjectUrlOnImageSettled(view, src);
                                 });
                             }
                         }
@@ -59,11 +121,13 @@ export const dropImagePlugin = () => {
                     images.forEach(async (image) => {
                         const reader = new FileReader();
                         if (upload) {
+                            const src = await upload(image);
                             const node = schema.nodes.image.create({
-                                src: await upload(image)
+                                src
                             });
                             const transaction = view.state.tr.insert(coordinates.pos, node);
                             view.dispatch(transaction);
+                            releaseObjectUrlOnImageSettled(view, src);
                         }
                         else {
                             reader.onload = (readerEvent) => {

package/dist/plugin/image/index.js

@@ -3,14 +3,15 @@ import { mergeAttributes } from '@tiptap/core';
 import { dropImagePlugin } from './dragdrop';
 export default (crossorigin = 'anonymous') => Image.extend({
     addOptions() {
+        const parentOptions = this.parent?.() ?? {};
         return {
-            ...this.parent?.(),
+            ...parentOptions,
             sizes: ['inline', 'block', 'left', 'right']
         };
     },
     parseHTML: () => [{ tag: 'img' }],
     renderHTML({ HTMLAttributes }) {
-        const { style } = HTMLAttributes;
+        const style = HTMLAttributes.style;
         return [
             'figure',
             { style },

package/dist/plugin/indent.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 // Sources:
 // https://github.com/ueberdosis/tiptap/issues/1036#issuecomment-981094752
 // https://github.com/django-tiptap/django_tiptap/blob/main/django_tiptap/templates/forms/tiptap_textarea.html#L453-L602

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

@@ -1,3 +1,3 @@
-import './korean.scss';
+import './korean.css';
 declare const _default: import("@tiptap/core").Node<import("@tiptap/extension-ordered-list").OrderedListOptions, any>;
 export default _default;

package/dist/plugin/orderedlist/index.js

@@ -1,7 +1,7 @@
 import { wrappingInputRule } from '@tiptap/core';
 import OrderedListBase from '@tiptap/extension-ordered-list';
 import toggleList from './toggleList';
-import './korean.scss';
+import './korean.css';
 export default OrderedListBase.extend({
     priority: 20,
     addAttributes() {

package/dist/plugin/orderedlist/{korean.scss → korean.css}

@@ -11,11 +11,11 @@
 }
 
 .ProseMirror {
-	ol[type='kors'] {
+	& ol[type='kors'] {
 		list-style-type: kors;
 	}
 
-	ol[type='korc'] {
+	& ol[type='korc'] {
 		list-style-type: korc;
 	}
 }

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

@@ -1,3 +1,3 @@
-import './style.scss';
+import './style.css';
 declare const _default: import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any>;
 export default _default;

package/dist/plugin/table/index.js

@@ -1,9 +1,20 @@
-import BuiltInTable from '@tiptap/extension-table';
+import { Table as BuiltInTable } from '@tiptap/extension-table';
 import { Plugin } from 'prosemirror-state';
 import { tableEditing, columnResizing } from 'prosemirror-tables';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import deleteTable from './deleteTable';
-import './style.scss';
+import './style.css';
+const resolveTableElement = (view, pos) => {
+    if (!view)
+        return null;
+    const dom = view.nodeDOM(pos);
+    if (dom instanceof HTMLTableElement)
+        return dom;
+    if (!(dom instanceof HTMLElement))
+        return null;
+    const table = dom.querySelector('table');
+    return table instanceof HTMLTableElement ? table : null;
+};
 export default BuiltInTable.extend({
     renderHTML() {
         return [
@@ -17,7 +28,6 @@ export default BuiltInTable.extend({
         ];
     },
     addProseMirrorPlugins() {
-        const { isEditable } = this.editor;
         return [
             tableEditing(),
             columnResizing({}),
@@ -26,25 +36,23 @@ export default BuiltInTable.extend({
                     decorations: (state) => {
                         const { doc } = state;
                         const decorations = [];
-                        let index = 0;
+                        const isEditable = this.editor.isEditable;
+                        const view = this.editor.view;
                         doc.descendants((node, pos) => {
                             if (node.type.name !== this.name)
                                 return;
-                            const elements = document.getElementsByClassName('as-table');
-                            const table = elements[index];
+                            const table = resolveTableElement(view, pos);
                             if (!table)
                                 return;
-                            if (!isEditable)
-                                table.classList.add('is-readonly');
-                            const element = table.parentElement;
-                            const shadowRight = !!(element && element.scrollWidth > element.clientWidth);
+                            table.classList.toggle('is-readonly', !isEditable);
+                            const scrollable = table.parentElement;
+                            const shadowRight = !!(scrollable instanceof HTMLElement && scrollable.scrollWidth > scrollable.clientWidth);
                             if (shadowRight)
                                 decorations.push(Decoration.widget(pos + 1, () => {
                                     const shadow = document.createElement('div');
                                     shadow.className = `scrollable-shadow right ${isEditable ? 'is-editable' : ''}`;
                                     return shadow;
                                 }));
-                            index++;
                         });
                         return DecorationSet.create(doc, decorations);
                     }

package/dist/plugin/table/style/{cell.scss → cell.css}

@@ -1,6 +1,6 @@
 .ProseMirror table {
-	td,
-	th {
+	& td,
+	& th {
 		position: relative;
 		min-width: 8px;
 		padding: 4px 8px;
@@ -9,9 +9,10 @@
 		border: 1px solid var(--primary-light3) !important;
 		transition: all 0.1s ease-in-out;
 		font-weight: normal;
+	}
 
-		> * {
-			margin-bottom: 0;
-		}
+	& td > *,
+	& th > * {
+		margin-bottom: 0;
 	}
 }