@seorii/tiptap 0.3.0-next.9 → 0.4.0

package/dist/i18n/index.d.ts

@@ -1,7 +1,107 @@
-export declare function getLocale(locales: any[]): any;
-declare function i18n(...args: string[]): any;
-declare namespace i18n {
-    var locale: any;
-    var localeLangCountry: string;
-}
+declare const locales: readonly [{
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: string;
+    default: string;
+    auto: string;
+    title: string;
+    paragraph: string;
+    link: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    alignJustify: string;
+    unorderedList: string;
+    numberList: string;
+    codeBlock: string;
+    mathBlock: string;
+    table: string;
+    image: string;
+    iframe: string;
+    youtube: string;
+    blockquote: string;
+    title1Info: string;
+    title2Info: string;
+    title3Info: string;
+    unorderedListInfo: string;
+    numberListInfo: string;
+    codeBlockInfo: string;
+    mathBlockInfo: string;
+    tableInfo: string;
+    imageInfo: string;
+    iframeInfo: string;
+    youtubeInfo: string;
+    blockquoteInfo: string;
+    newLineInfo: string;
+    placeholder: string;
+    insertCode: string;
+}, {
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: string;
+    default: string;
+    auto: string;
+    title: string;
+    paragraph: string;
+    link: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    alignJustify: string;
+    unorderedList: string;
+    numberList: string;
+    codeBlock: string;
+    mathBlock: string;
+    table: string;
+    image: string;
+    iframe: string;
+    youtube: string;
+    blockquote: string;
+    title1Info: string;
+    title2Info: string;
+    title3Info: string;
+    unorderedListInfo: string;
+    numberListInfo: string;
+    codeBlockInfo: string;
+    mathBlockInfo: string;
+    tableInfo: string;
+    imageInfo: string;
+    iframeInfo: string;
+    youtubeInfo: string;
+    blockquoteInfo: string;
+    newLineInfo: string;
+    placeholder: string;
+    insertCode: string;
+}];
+type Locale = (typeof locales)[number];
+export type LocaleInput = string | Locale | null | undefined;
+export type I18nTranslate = (...args: string[]) => string;
+export declare const I18N_CONTEXT: unique symbol;
+export declare function getLocale(localeList?: readonly Locale[], language?: string | null): Locale;
+export declare function translateWithLocale(input: LocaleInput, ...args: string[]): string;
+type I18n = ((...args: string[]) => string) & {
+    locale: Locale;
+    localeLangCountry: string;
+    locales: readonly Locale[];
+    setLocale: (input?: LocaleInput) => Locale;
+    getLocale: () => Locale;
+};
+declare const i18n: I18n;
+export declare function setLocale(input?: LocaleInput): Locale;
 export default i18n;

package/dist/i18n/index.js

@@ -1,21 +1,66 @@
 import enUs from './en-us/index';
 import koKr from './ko-kr/index';
 const locales = [enUs, koKr];
-export function getLocale(locales) {
+export const I18N_CONTEXT = Symbol('tiptap-i18n');
+const normalizeLocaleCode = (value) => (value ?? '').trim().replace(/_/g, '-').toLowerCase();
+const findLocale = (localeList, language) => {
+    const normalized = normalizeLocaleCode(language);
+    if (!normalized)
+        return null;
+    const exact = localeList.find((item) => item.target.some((target) => normalizeLocaleCode(target) === normalized));
+    if (exact)
+        return exact;
+    const primary = normalized.split('-')[0];
+    if (!primary)
+        return null;
+    return (localeList.find((item) => normalizeLocaleCode(item.lang) === primary) ??
+        localeList.find((item) => item.target.some((target) => normalizeLocaleCode(target).split('-')[0] === primary)) ??
+        null);
+};
+export function getLocale(localeList = locales, language) {
+    if (language)
+        return findLocale(localeList, language) ?? enUs;
     if (typeof navigator === 'undefined')
         return enUs;
-    const language = navigator.language;
-    const locale = locales.find((item) => item.target.includes(language));
-    return locale || enUs;
+    return findLocale(localeList, navigator.language) ?? enUs;
 }
-const locale = getLocale(locales);
-export default function i18n(...args) {
-    return args.reduce((prev, next) => {
-        return prev[next] || '';
-    }, locale);
+const resolveLocale = (input) => {
+    if (!input || (typeof input === 'string' && normalizeLocaleCode(input) === 'auto'))
+        return getLocale();
+    if (typeof input === 'string')
+        return getLocale(locales, input);
+    return input;
+};
+const translate = (locale, args) => {
+    let value = locale;
+    for (const key of args) {
+        if (value && typeof value === 'object' && key in value) {
+            value = value[key];
+            continue;
+        }
+        value = '';
+        break;
+    }
+    return typeof value === 'string' ? value : '';
+};
+export function translateWithLocale(input, ...args) {
+    return translate(resolveLocale(input), args);
 }
-i18n.locale = locale;
-i18n.localeLangCountry = i18n('lang') + '-' + i18n('country');
+let currentLocale = getLocale();
+const i18n = ((...args) => {
+    return translate(currentLocale, args);
+});
+export function setLocale(input) {
+    currentLocale = resolveLocale(input);
+    i18n.locale = currentLocale;
+    i18n.localeLangCountry = `${i18n('lang')}-${i18n('country')}`;
+    return currentLocale;
+}
+i18n.locales = locales;
+i18n.getLocale = () => currentLocale;
+i18n.setLocale = setLocale;
+setLocale(currentLocale);
+export default i18n;
 //@ts-ignore
 if (typeof window !== 'undefined')
     window.__me_i18n = i18n;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export default TipTap;
-export { getDetail };
 import TipTap from './tiptap/index.js';
 import { getDetail } from './plugin/command/suggest.js';
+import { insertUploadSkeleton } from './plugin/upload/skeleton/index.js';
+export { getDetail, insertUploadSkeleton };

package/dist/index.js

@@ -1,6 +1,7 @@
 // Reexport your entry components here
 import TipTap from './tiptap/index.js';
 import { getDetail } from './plugin/command/suggest.js';
+import { insertUploadSkeleton } from './plugin/upload/skeleton/index.js';
 
 export default TipTap;
-export { getDetail };
+export { getDetail, insertUploadSkeleton };

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

@@ -1,20 +1,6 @@
-import { PluginKey } from 'prosemirror-state';
+import { type SlashItem } from './stores.svelte';
+import { type SuggestionOptions } from '@tiptap/suggestion';
 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;
-    };
-};
+export declare const emoji: Omit<SuggestionOptions<SlashItem>, 'editor'>;
 declare const _default: (editor: Editor) => import("prosemirror-state").Plugin<any>;
 export default _default;

package/dist/plugin/command/emoji.js

@@ -1,20 +1,22 @@
-import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail } from './stores';
-import { PluginKey } from 'prosemirror-state';
-import Suggestion from '@tiptap/suggestion';
-//@ts-ignore
+import { closeSlash, moveSlashSelection, runSlashItemAt, setSlashItems, setSlashLocation, setSlashProps, slashState } from './stores.svelte';
+import { PluginKey } from '@tiptap/pm/state';
+import Suggestion, {} from '@tiptap/suggestion';
+// @ts-ignore
 import emojis from 'emojis-list';
-//@ts-ignore
+// @ts-ignore
 import tags from 'emojis-keywords';
 const max = 10;
-function fixRange(editor, range, split = '/') {
-    const { state } = editor.view, { selection, doc } = state;
+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;
             }
@@ -25,7 +27,7 @@ function fixRange(editor, range, split = '/') {
         try {
             range.to += 1;
         }
-        catch (e) {
+        catch {
             range.to -= 1;
             break;
         }
@@ -36,20 +38,22 @@ export const emoji = {
     pluginKey: new PluginKey('slash-emoji'),
     char: ':',
     items: ({ query }) => {
-        query = ':' + query.toLowerCase();
+        const normalizedQuery = `:${query.toLowerCase()}`;
         const filtered = [];
         for (let i = 0; i < emojis.length; i++) {
-            if (tags[i]?.includes?.(query))
+            if (tags[i]?.includes?.(normalizedQuery)) {
+                const emojiValue = emojis[i];
                 filtered.push({
-                    title: emojis[i] + '  ' + tags[i],
+                    title: `${emojiValue}  ${tags[i]}`,
                     command: ({ editor, range }) => {
                         editor
                             .chain()
                             .deleteRange(fixRange(editor, range, ':'))
-                            .insertContent(emojis[i] + ' ')
+                            .insertContent(`${emojiValue} `)
                             .run();
                     }
                 });
+            }
             if (filtered.length >= max)
                 break;
         }
@@ -58,26 +62,49 @@ export const emoji = {
     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');
+                const { editor, range } = props;
+                setSlashProps({ editor, range });
+                slashState.visible = true;
+                slashState.selectedIndex = 0;
+                setSlashItems(props.items);
+                slashState.detail = 'emoji';
+                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/command/stores.svelte.d.ts

@@ -0,0 +1,52 @@
+import type { Editor, Range } from '@tiptap/core';
+export type SlashCommandContext = {
+    editor: Editor;
+    range: Range;
+};
+export type SlashItem = {
+    title: string;
+    subtitle?: string;
+    icon?: string;
+    keywords?: string[];
+    command: (context: SlashCommandContext) => void;
+};
+export type SlashGroup = {
+    section: string;
+    list: SlashItem[];
+};
+export type SlashDetail = null | 'emoji' | {
+    title: string;
+    placeholder: string;
+    handler: (input: string) => void;
+};
+export type SlashLocation = {
+    x: number;
+    y: number;
+    height: number;
+};
+export type SlashProps = {
+    editor: Editor | null;
+    range: Range | null;
+};
+export type SlashEntry = SlashItem | SlashGroup;
+export declare const slashState: {
+    visible: boolean;
+    items: SlashEntry[];
+    location: SlashLocation;
+    props: SlashProps;
+    detail: SlashDetail;
+    selection: (() => void) | null;
+    selectedIndex: number;
+};
+export declare const slashLocaltion: SlashLocation;
+export declare function isSlashGroup(item: SlashEntry): item is SlashGroup;
+export declare function isSlashItem(item: SlashEntry): item is SlashItem;
+export declare function flattenSlashItems(items?: SlashEntry[]): SlashItem[];
+export declare function countSlashItems(items?: SlashEntry[]): number;
+export declare function moveSlashSelection(delta: number): void;
+export declare function normalizeSlashIndex(): void;
+export declare function setSlashItems(items: SlashEntry[]): void;
+export declare function setSlashProps(props: SlashProps): void;
+export declare function setSlashLocation(location: SlashLocation): void;
+export declare function runSlashItemAt(index: number): boolean;
+export declare function closeSlash(): void;

package/dist/plugin/command/stores.svelte.js

@@ -0,0 +1,69 @@
+export const slashState = $state({
+    visible: false,
+    items: [],
+    location: { x: 0, y: 0, height: 0 },
+    props: { editor: null, range: null },
+    detail: null,
+    selection: null,
+    selectedIndex: 0
+});
+// keep typo alias for backward compatibility
+export const slashLocaltion = slashState.location;
+export function isSlashGroup(item) {
+    return 'list' in item;
+}
+export function isSlashItem(item) {
+    return 'command' in item;
+}
+export function flattenSlashItems(items = slashState.items) {
+    if (!items.length)
+        return [];
+    if (isSlashGroup(items[0])) {
+        return items.flatMap((item) => (isSlashGroup(item) ? item.list : []));
+    }
+    return items.filter(isSlashItem);
+}
+export function countSlashItems(items = slashState.items) {
+    return flattenSlashItems(items).length;
+}
+export function moveSlashSelection(delta) {
+    const count = countSlashItems();
+    if (count === 0) {
+        slashState.selectedIndex = 0;
+        return;
+    }
+    slashState.selectedIndex += delta;
+    normalizeSlashIndex();
+}
+export function normalizeSlashIndex() {
+    const count = countSlashItems();
+    if (count === 0) {
+        slashState.selectedIndex = 0;
+        return;
+    }
+    slashState.selectedIndex = ((slashState.selectedIndex % count) + count) % count;
+}
+export function setSlashItems(items) {
+    slashState.items = items;
+    normalizeSlashIndex();
+}
+export function setSlashProps(props) {
+    slashState.props = props;
+}
+export function setSlashLocation(location) {
+    slashState.location.x = location.x;
+    slashState.location.y = location.y;
+    slashState.location.height = location.height;
+}
+export function runSlashItemAt(index) {
+    const item = flattenSlashItems()[index];
+    const { editor, range } = slashState.props;
+    if (!item || !editor || !range)
+        return false;
+    item.command({ editor, range });
+    return true;
+}
+export function closeSlash() {
+    slashState.visible = false;
+    slashState.selectedIndex = 0;
+}

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

@@ -1,21 +1,8 @@
-import { PluginKey } from 'prosemirror-state';
-import { Editor } from '@tiptap/core';
-export declare function getDetail(editor: any, range: any, opt: any): void;
-export declare const suggest: {
-    pluginKey: PluginKey<any>;
-    char: string;
-    items: ({ query }: {
-        query: any;
-    }) => {
-        section: any;
-        list: any[];
-    }[];
-    render: () => {
-        onStart: (props: any) => void;
-        onUpdate(props: any): void;
-        onKeyDown(props: any): true | undefined;
-        onExit(): void;
-    };
-};
+import { type SlashDetail, type SlashGroup } from './stores.svelte';
+import type { Editor, Range } from '@tiptap/core';
+import { type SuggestionOptions } from '@tiptap/suggestion';
+type DetailInput = Exclude<SlashDetail, null | 'emoji'>;
+export declare function getDetail(editor: Editor, range: Range, option: DetailInput): void;
+export declare const suggest: Omit<SuggestionOptions<SlashGroup>, 'editor'>;
 declare const _default: (editor: Editor) => import("prosemirror-state").Plugin<any>;
 export default _default;