@seorii/tiptap 0.0.10 → 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/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, 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,24 +70,32 @@ 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: '프레임',
-                        subtitle: '다른 웹사이트 삽입',
+                        title: i18n('iframe'),
+                        subtitle: i18n('iframeInfo'),
                         command: ({ editor, range }) => {
                             slashDetail.set('iframe');
                         }
                     },
                     {
                         icon: 'youtube_activity',
-                        title: '유튜브',
-                        subtitle: '유튜브 임베드',
+                        title: i18n('youtube'),
+                        subtitle: i18n('youtubeInfo'),
                         command: ({ editor, range }) => {
                             slashDetail.set('youtube');
                         }
@@ -94,7 +103,10 @@ export default {
                 ]
             }
         ];
-        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: () => {

package/dist/tiptap/Bubble.svelte

@@ -6,6 +6,7 @@ import { isTableAnySelected } from "../plugin/table/util";
 import deleteTable from "../plugin/table/deleteTable";
 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;
@@ -36,7 +37,7 @@ $: if ($tiptap) {
                     <div class="link">
                         <p>
                             <Icon icon="link"/>
-                            링크
+                            {i18n('link')}
                         </p>
                         <Input placeholder="url" fullWidth bind:value={href} autofocus/>
                         <div>
@@ -44,9 +45,10 @@ $: if ($tiptap) {
                                 href = ''
                                 $tiptap.chain().focus().unsetLink().run()
                                 tick().then(() => link = false)
-                            }}>삭제
+                            }}>{i18n('delete')}
                             </Button>
-                            <Button tabindex="0" transparent small on:click={() => link = false}>닫기</Button>
+                            <Button tabindex="0" transparent small
+                                    on:click={() => link = false}>{i18n('close')}</Button>
                         </div>
                     </div>
                 {:else if table}
@@ -69,16 +71,16 @@ $: if ($tiptap) {
                         <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="왼쪽 정렬"
+                                <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="가운데 정렬"
+                                <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="오른쪽 정렬"
+                                <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="양쪽 정렬"
+                                <OneLine icon="format_align_justify" title={i18n('alignJustify')}
                                          on:click={() => $tiptap.chain().focus().setTextAlign('justify').run()}
                                          active={$tiptap.isActive({ textAlign: 'justify' })}/>
                             </List>

package/dist/tiptap/Command.svelte

@@ -3,6 +3,7 @@ import { getContext } from "svelte";
 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 = [];
@@ -31,10 +32,10 @@ $: if ($slashVisible) {
                     <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}})}>삽입
+                            on:click={() => $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}>{i18n('insert')}
                     </Button>
                 </footer>
             </div>
@@ -42,7 +43,7 @@ $: if ($slashVisible) {
             <div class="detail">
                 <header>
                     <IconButton icon="arrow_back" on:click={() => $slashDetail = ''}/>
-                    <div class="title">youtube</div>
+                    <div class="title">Youtube</div>
                 </header>
                 <Input placeholder="url" fullWidth bind:value={iframe} autofocus
                        on:submit={() => $tiptap.commands.insertVideoPlayer({url: iframe})}/>
@@ -50,10 +51,10 @@ $: if ($slashVisible) {
                     <Button tabindex="0" transparent small on:click={() => {
                                 iframe = ''
                                 $slashDetail = ''
-                            }}>취소
+                            }}>{i18n('cancel')}
                     </Button>
                     <Button tabindex="0" transparent small
-                            on:click={() => $tiptap.commands.insertVideoPlayer({url: iframe})}>삽입
+                            on:click={() => $tiptap.commands.insertVideoPlayer({url: iframe})}>{i18n('insert')}
                     </Button>
                 </footer>
             </div>
@@ -74,7 +75,8 @@ $: if ($slashVisible) {
                         </div>
                     {/each}
                     {#if !$slashItems.length}
-                        <div class="section" transition:slide={{duration: 400, easing: quartOut}}>결과 없음</div>
+                        <div class="section"
+                             transition:slide={{duration: 400, easing: quartOut}}>{i18n('noResult')}</div>
                     {/if}
                 </List>
             </div>

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 icon="counter_1" title="제목 1" on:click={() => $tiptap.commands.setHeading({level: 1})}/>
-                        <OneLine icon="counter_2" title="제목 2" on:click={() => $tiptap.commands.setHeading({level: 2})}/>
-                        <OneLine icon="counter_3" title="제목 3" on:click={() => $tiptap.commands.setHeading({level: 3})}/>
-                        <OneLine icon="segment" 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', 'lite-youtube']),
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'tiptap-file', 'lite-youtube', 'blockquote']),
     allowedStyles: '*', allowedAttributes: {
         '*': ['style', 'class'],
         a: ['href', 'name', 'target'],
@@ -20,11 +21,11 @@ const san = (body) => sanitizeHtml(body, {
         '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);
@@ -33,7 +34,7 @@ if (browser) {
             if (!mounted)
                 return;
             $tiptap = tt(element, body, {
-                editable: editor,
+                editable: editable,
                 onTransaction: () => $tiptap = $tiptap,
                 ...options,
             });
@@ -82,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}
@@ -139,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 :global(.iframe-wrapper.ProseMirror-selectednode) {
+.editable :global(.iframe-wrapper.ProseMirror-selectednode) {
   outline: 3px solid var(--primary);
 }
 
@@ -158,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

@@ -27,7 +27,19 @@ 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seorii/tiptap",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "scripts": {
     "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",