@seorii/tiptap 0.3.0-next.9 → 0.4.0

package/dist/plugin/command/suggest.js

@@ -1,18 +1,44 @@
-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 { insertUploadSkeleton } from '../upload/skeleton';
+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 +49,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 +89,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 +103,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 +119,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 +129,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,24 +140,43 @@ 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 skeleton = insertUploadSkeleton(editor, {
+                                    kind: 'image',
+                                    height: 220
+                                });
+                                try {
+                                    const upload = window.__image_uploader ?? fallbackUpload;
+                                    const src = await upload(file);
+                                    if (skeleton) {
+                                        skeleton.replaceWith({
+                                            type: 'image',
+                                            attrs: { src }
+                                        });
+                                    }
+                                    else {
+                                        editor.chain().focus().setImage({ src }).run();
                                     }
+                                    releaseObjectUrlOnImageSettled(editor.view, src);
+                                }
+                                catch {
+                                    skeleton?.remove();
                                 }
                             };
                             input.click();
@@ -131,24 +186,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 +235,7 @@ export const suggest = {
                         icon: 'table_chart',
                         title: i18n('table'),
                         subtitle: i18n('tableInfo'),
+                        keywords: createKeywords(['table', 'tableInfo']),
                         command: ({ editor, range }) => {
                             editor
                                 .chain()
@@ -178,6 +252,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 +267,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 +290,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 +307,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

@@ -34,7 +34,7 @@ export default Node.create({
     renderHTML({ HTMLAttributes }) {
         return [
             'div',
-            this.options.HTMLAttributes,
+            mergeAttributes(this.options.HTMLAttributes, { 'data-bubble-menu': 'false' }),
             ['embed', mergeAttributes(HTMLAttributes, { credentialless: true, crossorigin: 'anonymous' })]
         ];
     },
@@ -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/iframe.js

@@ -31,7 +31,7 @@ export default Node.create({
     renderHTML({ HTMLAttributes }) {
         return [
             'div',
-            this.options.HTMLAttributes,
+            mergeAttributes(this.options.HTMLAttributes, { 'data-bubble-menu': 'false' }),
             [
                 'iframe',
                 mergeAttributes(HTMLAttributes, { credentialless: true, crossorigin: 'anonymous' })

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,67 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { Plugin } from 'prosemirror-state';
+import { insertUploadSkeleton } from '../upload/skeleton';
 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: {
@@ -12,13 +74,31 @@ export const dropImagePlugin = () => {
                         const image = item.getAsFile();
                         if (item.type.indexOf('image') === 0) {
                             event.preventDefault();
+                            const skeleton = insertUploadSkeleton({
+                                state: view.state,
+                                view
+                            }, {
+                                kind: 'image',
+                                height: 220
+                            });
                             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);
+                                upload(image)
+                                    .then((src) => {
+                                    if (skeleton) {
+                                        skeleton.replaceWith({
+                                            type: 'image',
+                                            attrs: { src }
+                                        });
+                                    }
+                                    else {
+                                        const node = schema.nodes.image.create({ src });
+                                        const transaction = view.state.tr.replaceSelectionWith(node);
+                                        view.dispatch(transaction);
+                                    }
+                                    releaseObjectUrlOnImageSettled(view, src);
+                                })
+                                    .catch(() => {
+                                    skeleton?.remove();
                                 });
                             }
                         }
@@ -58,18 +138,49 @@ export const dropImagePlugin = () => {
                         return false;
                     images.forEach(async (image) => {
                         const reader = new FileReader();
+                        const skeleton = insertUploadSkeleton({
+                            state: view.state,
+                            view
+                        }, {
+                            kind: 'image',
+                            height: 220,
+                            at: coordinates.pos
+                        });
                         if (upload) {
-                            const node = schema.nodes.image.create({
-                                src: await upload(image)
-                            });
-                            const transaction = view.state.tr.insert(coordinates.pos, node);
-                            view.dispatch(transaction);
+                            try {
+                                const src = await upload(image);
+                                if (skeleton) {
+                                    skeleton.replaceWith({
+                                        type: 'image',
+                                        attrs: { src }
+                                    });
+                                }
+                                else {
+                                    const node = schema.nodes.image.create({ src });
+                                    const transaction = view.state.tr.insert(coordinates.pos, node);
+                                    view.dispatch(transaction);
+                                }
+                                releaseObjectUrlOnImageSettled(view, src);
+                            }
+                            catch {
+                                skeleton?.remove();
+                            }
                         }
                         else {
                             reader.onload = (readerEvent) => {
-                                const node = schema.nodes.image.create({
-                                    src: readerEvent.target?.result
-                                });
+                                const src = readerEvent.target?.result;
+                                if (typeof src !== 'string') {
+                                    skeleton?.remove();
+                                    return;
+                                }
+                                if (skeleton) {
+                                    skeleton.replaceWith({
+                                        type: 'image',
+                                        attrs: { src }
+                                    });
+                                    return;
+                                }
+                                const node = schema.nodes.image.create({ src });
                                 const transaction = view.state.tr.insert(coordinates.pos, node);
                                 view.dispatch(transaction);
                             };

package/dist/plugin/image/index.js

@@ -3,17 +3,18 @@ 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 },
+            { style, 'data-bubble-menu': 'false' },
             ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
         ];
     },

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/resize/index.d.ts

@@ -0,0 +1,8 @@
+import { Extension } from '@tiptap/core';
+export type ResizeOptions = {
+    attributeTypes: string[];
+    showHandleAlways?: boolean;
+    showHandleOnActive?: boolean;
+};
+declare const _default: Extension<ResizeOptions, any>;
+export default _default;