@seorii/tiptap 0.2.13 → 0.2.15

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

@@ -37,7 +37,7 @@ export default {
     tableInfo: '표 삽입',
     imageInfo: '이미지',
     iframeInfo: '다른 웹사이트 삽입',
-    youtubeInfo: '유튜브 동영상 삽입',
+    youtubeInfo: 'Youtube 동영상 삽입',
     blockquoteInfo: '있어보이는 인용구 삽입',
     newLineInfo: '/로 명령어 입력. 또는',
     placeholder: '내용을 입력하세요...',

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export default TipTap;
+export { getDetail };
 import TipTap from "./tiptap/index.js";
+import { getDetail } from "./plugin/command/suggest.js";

package/dist/index.js

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

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

@@ -1,5 +1,6 @@
 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;

package/dist/plugin/command/suggest.js

@@ -30,6 +30,10 @@ function fixRange(editor, range, split = '/') {
     }
     return range;
 }
+export function getDetail(editor, range, opt) {
+    slashSelection.set(() => editor.chain().focus().deleteRange(fixRange(editor, range)).run());
+    slashDetail.set(opt);
+}
 export const suggest = {
     pluginKey: new PluginKey('slash-suggest'),
     char: '/',
@@ -128,7 +132,10 @@ export const suggest = {
                         title: i18n('table'),
                         subtitle: i18n('tableInfo'),
                         command: ({ editor, range }) => {
-                            editor.chain().focus().deleteRange(fixRange(editor, range)).insertTable({ rows: 2, cols: 3 }).run();
+                            editor.chain().focus().deleteRange(fixRange(editor, range)).insertTable({
+                                rows: 2,
+                                cols: 3
+                            }).run();
                         }
                     },
                     {
@@ -143,19 +150,24 @@ export const suggest = {
                         icon: 'iframe',
                         title: i18n('iframe'),
                         subtitle: i18n('iframeInfo'),
-                        command: ({ editor, range }) => {
-                            slashSelection.set(() => editor.chain().focus().deleteRange(fixRange(editor, range)).run());
-                            slashDetail.set('iframe');
-                        }
+                        command: ({ editor, range }) => getDetail(editor, range, {
+                            title: 'iframe', placeholder: 'url', handler: (input) => {
+                                editor.chain().focus().insertContent([{
+                                        type: 'iframe',
+                                        attrs: { src: input }
+                                    }, { type: 'paragraph' }]).run();
+                            }
+                        })
                     },
                     {
                         icon: 'youtube_activity',
                         title: i18n('youtube'),
                         subtitle: i18n('youtubeInfo'),
-                        command: ({ editor, range }) => {
-                            slashSelection.set(() => editor.chain().focus().deleteRange(fixRange(editor, range)).run());
-                            slashDetail.set('youtube');
-                        }
+                        command: ({ editor, range }) => getDetail(editor, range, {
+                            title: 'youtube', placeholder: 'url', handler: (input) => {
+                                editor.chain().focus().insertVideoPlayer({ url: input }).insertContent('\n').run();
+                            }
+                        })
                     }
                 ]
             }

package/dist/tiptap/Command.svelte

@@ -7,9 +7,9 @@ import i18n from "../i18n";
 const tiptap = getContext('editor');
 export let selectedIndex = 0;
 let height = 0, elements = [];
-let iframe = '', focus;
+let input = '', focus;
 $: if ($slashVisible) {
-    iframe = '';
+    input = '';
 }
 $: setTimeout(() => focus?.focus?.(), 100);
 </script>
@@ -21,50 +21,7 @@ $: setTimeout(() => focus?.focus?.(), 100);
     <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}}>
-        {#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} bind:input={focus}
-                       on:submit={() => $tiptap.chain().focus().insertContent([{type: 'iframe', attrs: {src: iframe}}, {type: 'paragraph'}]).run()}/>
-                <footer>
-                    <Button tabindex="0" transparent small on:click={() => {
-                        iframe = ''
-                        $slashDetail = ''
-                    }}>{i18n('cancel')}
-                    </Button>
-                    <Button tabindex="0" transparent small
-                            on:click={() => {
-                                $slashSelection?.();
-                                $tiptap.chain().focus().insertContent([{type: 'iframe', attrs: {src: iframe}}, {type: 'paragraph'}]).run();
-                            }}>{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} bind:input={focus}
-                       on:submit={() => $tiptap.chain().focus().insertVideoPlayer({url: iframe}).insertContent('\n').run()}/>
-                <footer>
-                    <Button tabindex="0" transparent small on:click={() => {
-                        iframe = ''
-                        $slashDetail = ''
-                    }}>{i18n('cancel')}
-                    </Button>
-                    <Button tabindex="0" transparent small on:click={() => {
-                        $slashSelection?.();
-                        $tiptap.chain().focus().insertVideoPlayer({url: iframe}).insertContent('\n').run();
-                    }}>{i18n('insert')}
-                    </Button>
-                </footer>
-            </div>
-        {:else if $slashDetail === 'emoji'}
+        {#if $slashDetail === 'emoji'}
             <div class="list">
                 <List>
                     {#each $slashItems as {title, command}, i(title)}
@@ -81,6 +38,31 @@ $: setTimeout(() => focus?.focus?.(), 100);
                     {/if}
                 </List>
             </div>
+        {:else if $slashDetail}
+            <div class="detail">
+                <header>
+                    <IconButton icon="arrow_back" on:click={() => $slashDetail = null}/>
+                    <div class="title">{$slashDetail.title}</div>
+                </header>
+                <Input placeholder={$slashDetail.placeholder} fullWidth bind:value={input} bind:input={focus}
+                       on:submit={() => {
+                           $slashSelection?.();
+                           $slashDetail.handler(input)
+                       }}/>
+                <footer>
+                    <Button tabindex="0" transparent small on:click={() => {
+                        input = ''
+                        $slashDetail = null
+                    }}>{i18n('cancel')}
+                    </Button>
+                    <Button tabindex="0" transparent small
+                            on:click={() => {
+                                $slashSelection?.();
+                                $slashDetail.handler(input);
+                            }}>{i18n('insert')}
+                    </Button>
+                </footer>
+            </div>
         {:else}
             <div class="list">
                 <List>

package/dist/tiptap/TipTap.svelte

@@ -10,7 +10,7 @@ import { slashItems, slashProps, slashVisible } from "../plugin/command/stores";
 import i18n from "../i18n";
 import { fallbackUpload } from "../plugin/image/dragdrop";
 const san = (body) => sanitizeHtml(body, {
-    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'tiptap-file', 'lite-youtube', 'blockquote', 'embed']),
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'lite-youtube', 'blockquote', 'embed', ...allowedTags]),
     allowedStyles: '*', allowedAttributes: {
         '*': ['style', 'class'],
         a: ['href', 'name', 'target'],
@@ -26,6 +26,7 @@ const san = (body) => sanitizeHtml(body, {
 export let body = '', editable = false, ref = null, options = {}, loaded = false;
 export let imageUpload = fallbackUpload, style = '';
 export let blocks = [], placeholder = i18n('placeholder');
+export let allowedTags = [];
 export let colors = [
     '#ef5350', //red
     '#ec407a', //pink
@@ -173,6 +174,10 @@ main .wrapper {
   outline: 3px solid var(--primary);
 }
 
+.editable :global(lite-youtube.ProseMirror-selectednode) {
+  outline: 3px solid var(--primary);
+}
+
 div > :global(div) {
   outline: none !important;
 }
@@ -222,6 +227,9 @@ div > :global(div) :global(table) :global(th), div > :global(div) :global(table)
 div > :global(div) :global(.math-render) {
   cursor: initial;
 }
+div > :global(div) :global(lite-youtube) {
+  border-radius: 12px;
+}
 div > :global(div) :global(.iframe-wrapper) {
   position: relative;
   padding-bottom: 12px;

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

@@ -12,6 +12,7 @@ declare const __propDef: {
         style?: string | undefined;
         blocks?: any[] | undefined;
         placeholder?: any;
+        allowedTags?: string[] | undefined;
         colors?: string[] | undefined;
     };
     events: {

package/package.json

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