@seorii/tiptap 0.2.1 → 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/tiptap/Command.svelte

@@ -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

@@ -24,7 +24,7 @@ const san = (body) => sanitizeHtml(body, {
 });
 export let body = '', editable = false, ref = null, options = {};
 export let imageUpload = fallbackUpload, style = '';
-export let blocks = [];
+export let blocks = [], placeholder = i18n('placeholder');
 const tiptap = setContext('editor', writable(null));
 let element, fullscreen = false, mounted = false, last = '';
 $: $tiptap && $tiptap.setEditable(editable);
@@ -38,6 +38,7 @@ if (browser) {
             if (!mounted)
                 return;
             ref = $tiptap = tt(element, body, {
+                placeholder,
                 editable: editable,
                 onTransaction: () => ref = $tiptap = $tiptap,
                 ...options,
@@ -160,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

@@ -10,6 +10,7 @@ declare const __propDef: {
         imageUpload?: UploadFn | undefined;
         style?: string | undefined;
         blocks?: any[] | undefined;
+        placeholder?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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.1",
+  "version": "0.2.2",
   "scripts": {
     "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",