@seorii/tiptap 0.0.9 → 0.1.0

package/dist/i18n/en-us/index.d.ts

@@ -0,0 +1,43 @@
+declare const _default: {
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: 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;
+};
+export default _default;

package/dist/i18n/en-us/index.js

@@ -0,0 +1,42 @@
+export default {
+    target: ['en', 'en-US', 'en-GB'],
+    lang: 'en',
+    country: 'US',
+    text: 'Text',
+    block: 'Block',
+    loading: 'Loading...',
+    delete: 'Delete',
+    close: 'Close',
+    cancel: 'Cancel',
+    insert: 'Insert',
+    noResult: 'No result',
+    title: 'Title',
+    paragraph: 'Paragraph',
+    link: 'Link',
+    alignLeft: 'Align left',
+    alignCenter: 'Align center',
+    alignRight: 'Align right',
+    alignJustify: 'Align justify',
+    unorderedList: 'Unordered list',
+    numberList: 'Number list',
+    codeBlock: 'Code block',
+    mathBlock: 'Math block',
+    table: 'Table',
+    image: 'Image',
+    iframe: 'iframe',
+    youtube: 'Youtube',
+    blockquote: 'Blockquote',
+    title1Info: 'Big title',
+    title2Info: 'Smaller title',
+    title3Info: 'Medium title',
+    unorderedListInfo: 'Unordered list',
+    numberListInfo: '1, 2, 3, 4',
+    codeBlockInfo: 'Code block with syntax highlighting',
+    mathBlockInfo: 'Math block',
+    tableInfo: 'Table',
+    imageInfo: 'Image',
+    iframeInfo: 'Embed another website',
+    youtubeInfo: 'Embed Youtube video',
+    blockquoteInfo: 'Blockquote',
+    newLineInfo: 'Press / to enter commands. Or'
+};

package/dist/i18n/index.d.ts

@@ -0,0 +1,7 @@
+export declare function getLocale(locales: any[]): any;
+declare function i18n(...args: string[]): any;
+declare namespace i18n {
+    var locale: any;
+    var localeLangCountry: string;
+}
+export default i18n;

package/dist/i18n/index.js

@@ -0,0 +1,22 @@
+import enUs from './en-us/index';
+import koKr from './ko-kr/index';
+import { browser } from "$app/environment";
+const locales = [enUs, koKr];
+export function getLocale(locales) {
+    if (typeof navigator === 'undefined')
+        return enUs;
+    const language = navigator.language;
+    const locale = locales.find(item => item.target.includes(language));
+    return locale || enUs;
+}
+const locale = getLocale(locales);
+export default function i18n(...args) {
+    return args.reduce((prev, next) => {
+        return prev[next] || '';
+    }, locale);
+}
+i18n.locale = locale;
+i18n.localeLangCountry = i18n('lang') + '-' + i18n('country');
+//@ts-ignore
+if (browser)
+    window.__me_i18n = i18n;

package/dist/i18n/ko-kr/index.d.ts

@@ -0,0 +1,43 @@
+declare const _default: {
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: 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;
+};
+export default _default;

package/dist/i18n/ko-kr/index.js

@@ -0,0 +1,42 @@
+export default {
+    target: ['ko'],
+    lang: 'ko',
+    country: 'KR',
+    text: '텍스트',
+    block: '블록',
+    loading: '로딩 중...',
+    delete: '삭제',
+    close: '닫기',
+    cancel: '취소',
+    insert: '삽입',
+    noResult: '결과 없음',
+    title: '제목',
+    paragraph: '본문',
+    link: '링크',
+    alignLeft: '왼쪽 정렬',
+    alignCenter: '가운데 정렬',
+    alignRight: '오른쪽 정렬',
+    alignJustify: '양쪽 정렬',
+    unorderedList: '리스트',
+    numberList: '숫자 리스트',
+    codeBlock: '코드 블록',
+    mathBlock: '수식 블록',
+    table: '테이블',
+    image: '이미지',
+    iframe: 'iframe',
+    youtube: '유튜브',
+    blockquote: '인용구',
+    title1Info: '큰 제목',
+    title2Info: '좀 더 작은 제목',
+    title3Info: '적당히 큰 제목',
+    unorderedListInfo: '순서 없는 리스트',
+    numberListInfo: '1, 2, 3, 4',
+    codeBlockInfo: '하이라이팅되는 코드 블록',
+    mathBlockInfo: '가운데로 정렬되는 수식 블록',
+    tableInfo: '표 삽입',
+    imageInfo: '이미지',
+    iframeInfo: '다른 웹사이트 삽입',
+    youtubeInfo: '유튜브 동영상 삽입',
+    blockquoteInfo: '있어보이는 인용구 삽입',
+    newLineInfo: '/로 명령어 입력. 또는'
+};

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

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

package/dist/plugin/command/stores.js

@@ -3,3 +3,4 @@ export const slashVisible = writable(false);
 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);

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

@@ -2,11 +2,11 @@ declare const _default: {
     items: ({ query }: {
         query: any;
     }) => {
-        section: string;
+        section: any;
         list: {
             icon: string;
-            title: string;
-            subtitle: string;
+            title: any;
+            subtitle: any;
             command: ({ editor, range }: {
                 editor: any;
                 range: any;

package/dist/plugin/command/suggest.js

@@ -1,37 +1,38 @@
-import { slashVisible, slashItems, slashLocaltion, slashProps } from './stores';
+import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail } from './stores';
+import i18n from "../../i18n";
 export default {
     items: ({ query }) => {
         const raw = [
             {
-                section: '텍스트', list: [
+                section: i18n('text'), list: [
                     {
                         icon: 'title',
-                        title: '제목 1',
-                        subtitle: '큰 제목',
+                        title: i18n('title') + ' 1',
+                        subtitle: i18n('title1Info'),
                         command: ({ editor, range }) => {
                             editor.chain().focus().deleteRange(range).setNode('heading', { level: 1 }).run();
                         }
                     },
                     {
                         icon: 'title',
-                        title: '제목 2',
-                        subtitle: '좀 더 작은 제목',
+                        title: i18n('title') + ' 2',
+                        subtitle: i18n('title2Info'),
                         command: ({ editor, range }) => {
                             editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run();
                         }
                     },
                     {
                         icon: 'title',
-                        title: '제목 3',
-                        subtitle: '적당히 큰 제목',
+                        title: i18n('title') + ' 3',
+                        subtitle: i18n('title3Info'),
                         command: ({ editor, range }) => {
                             editor.chain().focus().deleteRange(range).setNode('heading', { level: 3 }).run();
                         }
                     },
                     {
                         icon: 'format_list_bulleted',
-                        title: '리스트',
-                        subtitle: '순서 없는 리스트',
+                        title: i18n('unorderedList'),
+                        subtitle: i18n('unorderedListInfo'),
                         command: ({ editor, range }) => {
                             editor.commands.deleteRange(range);
                             editor.commands.toggleBulletList();
@@ -39,8 +40,8 @@ export default {
                     },
                     {
                         icon: 'format_list_numbered',
-                        title: '숫자 리스트',
-                        subtitle: '1, 2, 3, 4',
+                        title: i18n('numberList'),
+                        subtitle: i18n('numberListInfo'),
                         command: ({ editor, range }) => {
                             editor.commands.deleteRange(range);
                             editor.commands.toggleOrderedList();
@@ -49,19 +50,19 @@ export default {
                 ]
             },
             {
-                section: '블록', list: [
+                section: i18n('block'), list: [
                     {
                         icon: 'code',
-                        title: '코드 블록',
-                        subtitle: '하이라이팅되는 코드 블록',
+                        title: i18n('codeBlock'),
+                        subtitle: i18n('codeBlockInfo'),
                         command: ({ editor, range }) => {
                             editor.chain().focus().deleteRange(range).setNode('codeBlock').run();
                         }
                     },
                     {
                         icon: 'functions',
-                        title: '수식 블록',
-                        subtitle: '가운데로 정렬된 큰 수식',
+                        title: i18n('mathBlock'),
+                        subtitle: i18n('mathBlockInfo'),
                         command: ({ editor, range }) => {
                             const { to } = range;
                             editor.chain().focus().deleteRange(range).setNode('math_display').focus().run();
@@ -69,16 +70,43 @@ export default {
                     },
                     {
                         icon: 'table_chart',
-                        title: '테이블',
-                        subtitle: '표',
+                        title: i18n('table'),
+                        subtitle: i18n('tableInfo'),
                         command: ({ editor, range }) => {
                             editor.chain().focus().insertTable({ rows: 2, cols: 3 }).run();
                         }
+                    },
+                    {
+                        icon: 'format_quote',
+                        title: i18n('blockquote'),
+                        subtitle: i18n('blockquoteInfo'),
+                        command: ({ editor, range }) => {
+                            editor.chain().focus().deleteRange(range).setBlockquote().focus().run();
+                        }
+                    },
+                    {
+                        icon: 'iframe',
+                        title: i18n('iframe'),
+                        subtitle: i18n('iframeInfo'),
+                        command: ({ editor, range }) => {
+                            slashDetail.set('iframe');
+                        }
+                    },
+                    {
+                        icon: 'youtube_activity',
+                        title: i18n('youtube'),
+                        subtitle: i18n('youtubeInfo'),
+                        command: ({ editor, range }) => {
+                            slashDetail.set('youtube');
+                        }
                     }
                 ]
             }
         ];
-        const filtered = raw.map(({ section, list }) => ({ section, list: list.filter((item) => item.title.toLowerCase().includes(query.toLowerCase())) })).filter(({ list }) => list.length > 0);
+        const filtered = raw.map(({ section, list }) => ({
+            section, list: list.filter((item) => item.title.toLowerCase().includes(query.toLowerCase())
+                || item.subtitle.toLowerCase().includes(query.toLowerCase()))
+        })).filter(({ list }) => list.length > 0);
         return filtered;
     },
     render: () => {
@@ -91,6 +119,7 @@ export default {
                 slashVisible.set(true);
                 slashLocaltion.set({ x: location.x, y: location.y, height: location.height });
                 slashItems.set(props.items);
+                slashDetail.set(null);
             },
             onUpdate(props) {
                 slashItems.set(props.items);

package/dist/plugin/youtube.d.ts

@@ -0,0 +1,15 @@
+import { Node } from "@tiptap/core";
+export interface VideoPlayerOptions {
+    HTMLAttributes: Record<string, any>;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        videoPlayer: {
+            insertVideoPlayer: (options: {
+                url: string;
+            }) => ReturnType;
+        };
+    }
+}
+declare const _default: Node<VideoPlayerOptions, any>;
+export default _default;

package/dist/plugin/youtube.js

@@ -0,0 +1,100 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+import { Plugin, PluginKey } from "prosemirror-state";
+const youtubeRegExp = /^(?:(?:https?:)?\/\/)?(?:www\.)?(?:m\.)?(?:youtu(?:be)?\.com\/(?:v\/|embed\/|watch(?:\/|\?v=))|youtu\.be\/)((?:\w|-){11})(?:\S+)?$/;
+const youtubeExtractId = (url) => {
+    const match = youtubeRegExp.exec(url.trim());
+    return match ? match[1] : false;
+};
+const videoPlayerStaticAttributes = { nocookie: true };
+export default Node.create({
+    name: "lite-youtube",
+    content: "",
+    marks: "",
+    group: "block",
+    draggable: true,
+    addAttributes() {
+        return {
+            videoid: {
+                default: null,
+            },
+            provider: {
+                default: "youtube",
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "lite-youtube",
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "lite-youtube",
+            mergeAttributes(videoPlayerStaticAttributes, this.options.HTMLAttributes, HTMLAttributes),
+        ];
+    },
+    addCommands() {
+        return {
+            insertVideoPlayer: (options) => ({ chain, editor }) => {
+                const { url } = options;
+                const videoid = youtubeExtractId(url);
+                if (videoid) {
+                    const { selection } = editor.state;
+                    const pos = selection.$head;
+                    return chain().insertContentAt(pos.before(), [{
+                            type: this.name,
+                            attrs: { videoid, provider: "youtube" },
+                        }]).run();
+                }
+                return false;
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey("handlePasteVideoURL"),
+                props: {
+                    handlePaste: (view, _event, slice) => {
+                        if (slice.content.childCount !== 1)
+                            return false;
+                        const { state } = view;
+                        const { selection } = state;
+                        const { empty } = selection;
+                        if (!empty)
+                            return false;
+                        const pos = selection.$head;
+                        const node = pos.node();
+                        if (node.content.size > 0)
+                            return false;
+                        let textContent = "", href = "";
+                        slice.content.forEach((node) => {
+                            textContent += node.textContent;
+                        });
+                        textContent = textContent.trim();
+                        let videoid = youtubeExtractId(textContent);
+                        if (!videoid)
+                            for (const mark of slice?.content?.content?.[0]?.marks) {
+                                if (mark.attrs.href) {
+                                    const id = youtubeExtractId(mark.attrs.href);
+                                    if (id) {
+                                        videoid = id;
+                                        break;
+                                    }
+                                }
+                            }
+                        if (!videoid)
+                            return false;
+                        this.editor.chain().insertContentAt(pos.before(), [{
+                                type: this.name,
+                                attrs: { videoid, provider: "youtube" },
+                            }]).run();
+                        return true;
+                    },
+                },
+            }),
+        ];
+    },
+});

package/dist/tiptap/Bubble.svelte

@@ -1,15 +1,28 @@
 <script>import { BubbleMenu } from "svelte-tiptap";
-import { getContext } from "svelte";
+import { getContext, tick } from "svelte";
 import 'tippy.js/animations/shift-away-subtle.css';
 import ToolbarButton from "./ToolbarButton.svelte";
 import { isTableAnySelected } from "../plugin/table/util";
 import deleteTable from "../plugin/table/deleteTable";
-//@ts-ignore
-import { MathInline } from "@seorii/prosemirror-math/tiptap";
 import setMath from "./setMath";
+import { Button, Icon, IconButton, Input, List, OneLine, Tooltip } from "nunui";
+import i18n from "../i18n";
 const tiptap = getContext('editor');
+let link = false, href = '', sel = '', _sel = '';
 $: selection = $tiptap?.state?.selection;
 $: table = isTableAnySelected(selection);
+$: sel = selection?.from + '-' + selection?.to;
+$: if ($tiptap && sel !== _sel) {
+    _sel = sel;
+    link = false;
+    href = $tiptap.getAttributes('link').href;
+}
+$: if ($tiptap) {
+    if (href)
+        $tiptap.chain().setLink({ href }).run();
+    else
+        $tiptap.chain().unsetLink().run();
+}
 </script>
 
 
@@ -20,7 +33,25 @@ $: table = isTableAnySelected(selection);
             <slot/>
         {:else}
             <main>
-                {#if table}
+                {#if link}
+                    <div class="link">
+                        <p>
+                            <Icon icon="link"/>
+                            {i18n('link')}
+                        </p>
+                        <Input placeholder="url" fullWidth bind:value={href} autofocus/>
+                        <div>
+                            <Button tabindex="0" transparent small on:click={() => {
+                                href = ''
+                                $tiptap.chain().focus().unsetLink().run()
+                                tick().then(() => link = false)
+                            }}>{i18n('delete')}
+                            </Button>
+                            <Button tabindex="0" transparent small
+                                    on:click={() => link = false}>{i18n('close')}</Button>
+                        </div>
+                    </div>
+                {:else if table}
                     {#if table.length > 1}
                         <ToolbarButton icon="cell_merge" handler={() => $tiptap.commands.mergeCells()}/>
                     {:else}
@@ -36,12 +67,34 @@ $: table = isTableAnySelected(selection);
                                    handler={() => $tiptap.chain().focus().addRowAfter().run()}/>
                     <ToolbarButton icon="close" handler={() => deleteTable({editor: $tiptap})}/>
                 {:else}
+                    <Tooltip bottom left xstack width="160px">
+                        <IconButton size="1.2em" icon="format_align_left" slot="target"/>
+                        <div style="margin: -6px;font-size: 0.6em">
+                            <List>
+                                <OneLine icon="format_align_left" title={i18n('alignLeft')}
+                                         on:click={() => $tiptap.chain().focus().setTextAlign('left').run()}
+                                         active={$tiptap.isActive({ textAlign: 'left' })}/>
+                                <OneLine icon="format_align_center" title={i18n('alignCenter')}
+                                         on:click={() => $tiptap.chain().focus().setTextAlign('center').run()}
+                                         active={$tiptap.isActive({ textAlign: 'center' })}/>
+                                <OneLine icon="format_align_right" title={i18n('alignRight')}
+                                         on:click={() => $tiptap.chain().focus().setTextAlign('right').run()}
+                                         active={$tiptap.isActive({ textAlign: 'right' })}/>
+                                <OneLine icon="format_align_justify" title={i18n('alignJustify')}
+                                         on:click={() => $tiptap.chain().focus().setTextAlign('justify').run()}
+                                         active={$tiptap.isActive({ textAlign: 'justify' })}/>
+                            </List>
+                        </div>
+                    </Tooltip>
                     <ToolbarButton icon="format_bold" prop="bold"/>
                     <ToolbarButton icon="format_italic" prop="italic"/>
                     <ToolbarButton icon="format_strikethrough" prop="strike"/>
                     <ToolbarButton icon="format_underlined" prop="underline"/>
+                    <ToolbarButton icon="superscript" prop="superscript"/>
+                    <ToolbarButton icon="subscript" prop="subscript"/>
                     <ToolbarButton icon="functions" handler={() => setMath($tiptap)}/>
                     <ToolbarButton icon="code" prop="code"/>
+                    <ToolbarButton icon="link" prop="link" handler={() => link = true}/>
                 {/if}
             </main>
         {/if}
@@ -50,7 +103,8 @@ $: table = isTableAnySelected(selection);
 
 <style>main {
   box-shadow: var(--shadow);
-  background: var(--surface);
+  background: var(--surface, #fff);
+  color: var(--on-surface, #000);
   padding: 8px;
   border-radius: 4px;
   display: flex;
@@ -66,4 +120,18 @@ main > :global(*):first-child {
 }
 main > :global(*):last-child {
   margin-right: 0;
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.7em;
+}
+.link p {
+  margin: 0 0 0.6em 0;
+}
+.link div {
+  margin-top: 0.6em;
+  display: flex;
+  justify-content: flex-end;
 }</style>

package/dist/tiptap/Command.svelte

@@ -1,11 +1,16 @@
-<script>import { List, TwoLine } from "nunui";
+<script>import { Button, IconButton, Input, List, TwoLine } from "nunui";
 import { getContext } from "svelte";
-import { slashVisible, slashItems, slashLocaltion, slashProps } from '../plugin/command/stores';
+import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail } 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 = '';
+$: if ($slashVisible) {
+    iframe = '';
+}
 </script>
 
 <svelte:window bind:innerHeight={height}/>
@@ -15,27 +20,67 @@ let height = 0, elements = [];
     <main style="left: {$slashLocaltion.x}px; top: {$slashLocaltion.y + $slashLocaltion.height + 384 > height
 			? $slashLocaltion.y - $slashLocaltion.height - 384
 			: $slashLocaltion.y + $slashLocaltion.height}px;" transition:fly={{y: 10, duration: 200, easing: quartOut}}>
-        <div class="list">
-            <List>
-                {#each $slashItems as {section, list}(section)}
-                    <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={() => {
-                                    $slashVisible = false;
+        {#if $slashDetail === 'iframe'}
+            <div class="detail">
+                <header>
+                    <IconButton icon="arrow_back" on:click={() => $slashDetail = ''}/>
+                    <div class="title">iframe</div>
+                </header>
+                <Input placeholder="url" fullWidth bind:value={iframe} autofocus
+                       on:submit={() => $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}/>
+                <footer>
+                    <Button tabindex="0" transparent small on:click={() => {
+                                iframe = ''
+                                $slashDetail = ''
+                            }}>{i18n('cancel')}
+                    </Button>
+                    <Button tabindex="0" transparent small
+                            on:click={() => $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}>{i18n('insert')}
+                    </Button>
+                </footer>
+            </div>
+        {:else if $slashDetail === 'youtube'}
+            <div class="detail">
+                <header>
+                    <IconButton icon="arrow_back" on:click={() => $slashDetail = ''}/>
+                    <div class="title">Youtube</div>
+                </header>
+                <Input placeholder="url" fullWidth bind:value={iframe} autofocus
+                       on:submit={() => $tiptap.commands.insertVideoPlayer({url: iframe})}/>
+                <footer>
+                    <Button tabindex="0" transparent small on:click={() => {
+                                iframe = ''
+                                $slashDetail = ''
+                            }}>{i18n('cancel')}
+                    </Button>
+                    <Button tabindex="0" transparent small
+                            on:click={() => $tiptap.commands.insertVideoPlayer({url: iframe})}>{i18n('insert')}
+                    </Button>
+                </footer>
+            </div>
+        {:else}
+            <div class="list">
+                <List>
+                    {#each $slashItems as {section, list}(section)}
+                        <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={() => {
                                     command?.($slashProps);
                                     setTimeout(() => $tiptap.commands.focus());
                                 }} bind:this={elements[i]} {icon} {title} subtitle={subtitle || ''}/>
-                            </div>
-                        {/each}
-                    </div>
-                {/each}
-                {#if !$slashItems.length}
-                    <div class="section" transition:slide={{duration: 400, easing: quartOut}}>결과 없음</div>
-                {/if}
-            </List>
-        </div>
+                                </div>
+                            {/each}
+                        </div>
+                    {/each}
+                    {#if !$slashItems.length}
+                        <div class="section"
+                             transition:slide={{duration: 400, easing: quartOut}}>{i18n('noResult')}</div>
+                    {/if}
+                </List>
+            </div>
+        {/if}
     </main>
 {/if}
 
@@ -50,7 +95,7 @@ let height = 0, elements = [];
 }
 
 main {
-  position: absolute;
+  position: fixed;
   background: var(--surface, #fff);
   width: 220px;
   border-radius: 4px;
@@ -79,4 +124,29 @@ main {
   font-size: 0.8em !important;
   font-weight: 300 !important;
   color: var(--primary-dark1);
+}
+
+.detail {
+  font-size: 0.8em;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+header > :global(*) {
+  margin-right: 8px;
+}
+header > :global(*):last-child {
+  margin-right: 0;
+}
+
+footer {
+  margin-top: 0.6em;
+  display: flex;
+  justify-content: flex-end;
 }</style>

package/dist/tiptap/Floating.svelte

@@ -1,8 +1,8 @@
-<script>import { BubbleMenu, FloatingMenu } from "svelte-tiptap";
+<script>import { FloatingMenu } from "svelte-tiptap";
 import { getContext } from "svelte";
-import { Button, IconButton, List, OneLine, Tooltip } from "nunui";
+import { IconButton, List, OneLine, Tooltip } from "nunui";
 import ToolbarButton from "./ToolbarButton.svelte";
-import setMath from "./setMath";
+import i18n from "../i18n";
 const tiptap = getContext('editor');
 </script>
 
@@ -11,16 +11,16 @@ const tiptap = getContext('editor');
                   tippyOptions={{animation:'fade', duration: [200, 50]}}>
         <main on:mousedown={() => setTimeout(() => $tiptap.commands.focus())}>
             <span>
-                /로 명령어 입력. 또는
+                {i18n('newLineInfo')}
             </span>
             <Tooltip bottom left xstack width="160px">
                 <IconButton size="1.2em" icon="text_fields" slot="target"/>
                 <div style="margin: -6px">
                     <List>
-                        <OneLine title="제목 1" on:click={() => $tiptap.commands.setHeading({level: 1})}/>
-                        <OneLine title="제목 2" on:click={() => $tiptap.commands.setHeading({level: 2})}/>
-                        <OneLine title="제목 3" on:click={() => $tiptap.commands.setHeading({level: 3})}/>
-                        <OneLine title="본문" on:click={() => $tiptap.commands.setParagraph()}/>
+                        <OneLine icon="counter_1" title="{i18n('title')} 1" on:click={() => $tiptap.commands.setHeading({level: 1})}/>
+                        <OneLine icon="counter_2" title="{i18n('title')} 2" on:click={() => $tiptap.commands.setHeading({level: 2})}/>
+                        <OneLine icon="counter_3" title="{i18n('title')} 3" on:click={() => $tiptap.commands.setHeading({level: 3})}/>
+                        <OneLine icon="segment" title={i18n('paragraph')} on:click={() => $tiptap.commands.setParagraph()}/>
                     </List>
                 </div>
             </Tooltip>

package/dist/tiptap/TipTap.svelte

@@ -7,8 +7,9 @@ import Bubble from "./Bubble.svelte";
 import Floating from "./Floating.svelte";
 import Command from "./Command.svelte";
 import { slashItems, slashProps, slashVisible } from "../plugin/command/stores";
+import i18n from "../i18n";
 const san = (body) => sanitizeHtml(body, {
-    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'tiptap-file']),
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'tiptap-file', 'lite-youtube', 'blockquote']),
     allowedStyles: '*', allowedAttributes: {
         '*': ['style', 'class'],
         a: ['href', 'name', 'target'],
@@ -16,23 +17,24 @@ const san = (body) => sanitizeHtml(body, {
         iframe: ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
         th: ['colwidth', 'colspan', 'rowspan'],
         td: ['colwidth', 'colspan', 'rowspan'],
-        'tiptap-file': ['id']
+        'tiptap-file': ['id'],
+        'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider'],
     },
 });
-export let body = '', editor = false, style = '', ref = null, options = {};
+export let body = '', editable = false, style = '', ref = null, options = {};
 const tiptap = setContext('editor', writable(null));
 let element, fullscreen = false, mounted = false, last = '';
 $: ref = $tiptap;
-$: $tiptap && $tiptap.setEditable(editor);
+$: $tiptap && $tiptap.setEditable(editable);
 if (browser) {
     onMount(() => {
         body = last = san(body);
         mounted = true;
-        import('./tiptap').then(({ default: tt }) => {
+        Promise.all([import('./tiptap'), import("@justinribeiro/lite-youtube")]).then(([{ default: tt }]) => {
             if (!mounted)
                 return;
             $tiptap = tt(element, body, {
-                editable: editor,
+                editable: editable,
                 onTransaction: () => $tiptap = $tiptap,
                 ...options,
             });
@@ -81,19 +83,19 @@ function selectItem(index) {
     const item = $slashItems[index];
     if (item) {
         let range = $slashProps.range;
-        item.command({ editor, range });
+        item.command({ editor: editable, range });
     }
 }
 </script>
 
-<main class:fullscreen class:editor>
+<main class:fullscreen class:editable>
     <div class="wrapper">
         <div bind:this={element} class="target" on:keydown|capture={handleKeydown}></div>
         {#if !$tiptap}
-            로드 중...
+            {i18n('loading')}
         {/if}
     </div>
-    {#if editor}
+    {#if editable}
         <Command {selectedIndex}/>
         <Floating/>
         {#if $$slots.bubble}
@@ -138,12 +140,12 @@ main .wrapper {
   margin-bottom: 0 !important;
 }
 
-.editor :global(.ProseMirror-selectednode img) {
+.editable :global(.ProseMirror-selectednode img) {
   transition: all 0.2s ease-in-out;
   filter: drop-shadow(0 0 0.75rem var(--primary-light13));
 }
 
-.editor .iframe-wrapper.ProseMirror-selectednode {
+.editable :global(.iframe-wrapper.ProseMirror-selectednode) {
   outline: 3px solid var(--primary);
 }
 
@@ -157,6 +159,9 @@ div > :global(div) :global(.ProseMirror) :global(p.is-editor-empty:first-child::
   height: 0;
   pointer-events: none;
 }
+div > :global(div) :global(a) {
+  cursor: pointer;
+}
 div > :global(div) :global(img) {
   transition: all 0.2s ease-in-out;
   max-width: 100%;

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

@@ -3,7 +3,7 @@ import "@seorii/prosemirror-math/style.css";
 declare const __propDef: {
     props: {
         body?: string | undefined;
-        editor?: boolean | undefined;
+        editable?: boolean | undefined;
         style?: string | undefined;
         ref?: any;
         options?: {} | undefined;

package/dist/tiptap/tiptap.js

@@ -22,16 +22,35 @@ import TextStyle from '@tiptap/extension-text-style';
 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.configure({ lowlight }),
+        CodeBlockLowlight.extend({
+            addKeyboardShortcuts() {
+                return {
+                    ...this.parent?.(),
+                    'Tab': () => {
+                        if (this.editor.isActive('codeBlock')) {
+                            return this.editor.commands.insertContent('    ');
+                        }
+                        return true;
+                    }
+                };
+            }
+        }).configure({ lowlight }),
         Image,
+        Youtube,
         StarterKit,
         Underline,
         Highlight.configure({ multicolor: true }),
-        Link.configure({ openOnClick: true }),
+        Link.configure({
+            openOnClick: true, protocols: ['ftp', 'mailto', {
+                    scheme: 'tel',
+                    optionalSlashes: true
+                }]
+        }),
         TextAlign.configure({ types: ['heading', 'paragraph', 'image'] }),
         DropCursor,
         orderedlist,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seorii/tiptap",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "scripts": {
     "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",
@@ -36,6 +36,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@justinribeiro/lite-youtube": "^1.5.0",
     "@seorii/prosemirror-math": "^0.4.2",
     "@tiptap/core": "^2.0.4",
     "@tiptap/extension-code": "^2.0.4",