@seorii/tiptap 0.2.0 → 0.2.2

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

@@ -39,5 +39,6 @@ declare const _default: {
     youtubeInfo: string;
     blockquoteInfo: string;
     newLineInfo: string;
+    placeholder: string;
 };
 export default _default;

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

@@ -38,5 +38,6 @@ export default {
     iframeInfo: 'Embed another website',
     youtubeInfo: 'Embed Youtube video',
     blockquoteInfo: 'Blockquote',
-    newLineInfo: 'Press / to enter commands. Or'
+    newLineInfo: 'Press / to enter commands. Or',
+    placeholder: 'Enter content here...',
 };

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

@@ -39,5 +39,6 @@ declare const _default: {
     youtubeInfo: string;
     blockquoteInfo: string;
     newLineInfo: string;
+    placeholder: string;
 };
 export default _default;

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

@@ -38,5 +38,6 @@ export default {
     iframeInfo: '다른 웹사이트 삽입',
     youtubeInfo: '유튜브 동영상 삽입',
     blockquoteInfo: '있어보이는 인용구 삽입',
-    newLineInfo: '/로 명령어 입력. 또는'
+    newLineInfo: '/로 명령어 입력. 또는',
+    placeholder: '내용을 입력하세요...',
 };

package/dist/plugin/command/emoji.js

@@ -43,7 +43,7 @@ export const emoji = {
                 filtered.push({
                     title: emojis[i] + '  ' + tags[i],
                     command: ({ editor, range }) => {
-                        editor.chain().deleteRange(fixRange(editor, range, ':')).insertContent(emojis[i]).run();
+                        editor.chain().deleteRange(fixRange(editor, range, ':')).insertContent(emojis[i] + ' ').run();
                     }
                 });
             if (filtered.length >= max)

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

@@ -7,15 +7,7 @@ export declare const suggest: {
         query: any;
     }) => {
         section: any;
-        list: {
-            icon: string;
-            title: any;
-            subtitle: any;
-            command: ({ editor, range }: {
-                editor: any;
-                range: any;
-            }) => void;
-        }[];
+        list: any[];
     }[];
     render: () => {
         onStart: (props: any) => void;

package/dist/plugin/command/suggest.js

@@ -83,6 +83,7 @@ export const suggest = {
             },
             {
                 section: i18n('block'), list: [
+                    ...(window.__tiptap_blocks),
                     {
                         icon: 'image',
                         title: i18n('image'),

package/dist/tiptap/Command.svelte

@@ -28,7 +28,7 @@ $: setTimeout(() => focus?.focus?.(), 100);
                     <div class="title">iframe</div>
                 </header>
                 <Input placeholder="url" fullWidth bind:value={iframe} bind:input={focus}
-                       on:submit={() => $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}/>
+                       on:submit={() => $tiptap.chain().focus().insertContent({type: 'iframe', attrs: {src: iframe}}).insertContent('\n').run()}/>
                 <footer>
                     <Button tabindex="0" transparent small on:click={() => {
                         iframe = ''
@@ -38,8 +38,8 @@ $: setTimeout(() => focus?.focus?.(), 100);
                     <Button tabindex="0" transparent small
                             on:click={() => {
                                 $slashSelection?.();
-                                $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}
-                            }>{i18n('insert')}
+                                $tiptap.chain().focus().insertContent({type: 'iframe', attrs: {src: iframe}}).insertContent('\n').run();
+                            }}>{i18n('insert')}
                     </Button>
                 </footer>
             </div>
@@ -50,7 +50,7 @@ $: setTimeout(() => focus?.focus?.(), 100);
                     <div class="title">Youtube</div>
                 </header>
                 <Input placeholder="url" fullWidth bind:value={iframe} bind:input={focus}
-                       on:submit={() => $tiptap.commands.insertVideoPlayer({url: iframe})}/>
+                       on:submit={() => $tiptap.chain().focus().insertVideoPlayer({url: iframe}).insertContent('\n').run()}/>
                 <footer>
                     <Button tabindex="0" transparent small on:click={() => {
                         iframe = ''
@@ -59,7 +59,7 @@ $: setTimeout(() => focus?.focus?.(), 100);
                     </Button>
                     <Button tabindex="0" transparent small on:click={() => {
                         $slashSelection?.();
-                        $tiptap.commands.insertVideoPlayer({url: iframe});
+                        $tiptap.chain().focus().insertVideoPlayer({url: iframe}).insertContent('\n').run();
                     }}>{i18n('insert')}
                     </Button>
                 </footer>
@@ -135,7 +135,7 @@ main {
   font-size: 0.8em;
   font-weight: 300;
   color: var(--on-surface, #000);
-  opacity: 0.8;
+  opacity: 0.7;
 }
 
 .list {

package/dist/tiptap/TipTap.svelte

@@ -23,11 +23,13 @@ const san = (body) => sanitizeHtml(body, {
     },
 });
 export let body = '', editable = false, ref = null, options = {};
-export const imageUpload = fallbackUpload, style = '';
+export let imageUpload = fallbackUpload, style = '';
+export let blocks = [], placeholder = i18n('placeholder');
 const tiptap = setContext('editor', writable(null));
 let element, fullscreen = false, mounted = false, last = '';
 $: $tiptap && $tiptap.setEditable(editable);
 $: browser && (window.__image_uploader = imageUpload);
+$: browser && (window.__tiptap_blocks = blocks);
 if (browser) {
     onMount(() => {
         body = last = san(body);
@@ -36,6 +38,7 @@ if (browser) {
             if (!mounted)
                 return;
             ref = $tiptap = tt(element, body, {
+                placeholder,
                 editable: editable,
                 onTransaction: () => ref = $tiptap = $tiptap,
                 ...options,
@@ -158,11 +161,16 @@ div > :global(div) {
   outline: none !important;
 }
 div > :global(div) :global(.ProseMirror) :global(p.is-editor-empty:first-child::before) {
-  color: #adb5bd;
+  color: var(--on-surface, #000);
+  opacity: 0.7;
   content: attr(data-placeholder);
   float: left;
   height: 0;
   pointer-events: none;
+  transition: 0.2s opacity ease-in-out;
+}
+div > :global(div) :global(.ProseMirror-focused) :global(p.is-editor-empty:first-child::before) {
+  opacity: 0;
 }
 div > :global(div) :global(a) {
   cursor: pointer;

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

@@ -8,7 +8,9 @@ declare const __propDef: {
         ref?: null | undefined;
         options?: {} | undefined;
         imageUpload?: UploadFn | undefined;
-        style?: "" | undefined;
+        style?: string | undefined;
+        blocks?: any[] | undefined;
+        placeholder?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -21,7 +23,5 @@ export type TipTapProps = typeof __propDef.props;
 export type TipTapEvents = typeof __propDef.events;
 export type TipTapSlots = typeof __propDef.slots;
 export default class TipTap extends SvelteComponentTyped<TipTapProps, TipTapEvents, TipTapSlots> {
-    get imageUpload(): UploadFn;
-    get style(): "";
 }
 export {};

package/dist/tiptap/tiptap.d.ts

@@ -1,3 +1,3 @@
 import { Editor } from "@tiptap/core";
-declare const _default: (element: Element, content: string, { plugins, ...props }?: any) => Editor;
+declare const _default: (element: Element, content: string, { placeholder, plugins, ...props }?: any) => Editor;
 export default _default;

package/dist/tiptap/tiptap.js

@@ -23,9 +23,11 @@ import Iframe from "../plugin/iframe";
 // @ts-ignore
 import { MathInline, MathBlock } from "@seorii/prosemirror-math/tiptap";
 import Youtube from "../plugin/youtube";
+import Placeholder from "@tiptap/extension-placeholder";
 import command from "../plugin/command/suggest";
 import emoji from "../plugin/command/emoji";
-export default (element, content, { plugins = [], ...props } = {}) => {
+import i18n from "../i18n";
+export default (element, content, { placeholder = i18n('placeholder'), plugins = [], ...props } = {}) => {
     const tt = new Editor({
         element, content, ...props,
         extensions: [
@@ -73,6 +75,7 @@ export default (element, content, { plugins = [], ...props } = {}) => {
                     return ['code', mergeAttributes(HTMLAttributes, { class: 'inline' })];
                 }
             }),
+            Placeholder.configure({ placeholder }),
             ...plugins,
         ],
     });

package/package.json

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