@seorii/tiptap 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -39,5 +39,6 @@ declare const _default: {
39
39
  youtubeInfo: string;
40
40
  blockquoteInfo: string;
41
41
  newLineInfo: string;
42
+ placeholder: string;
42
43
  };
43
44
  export default _default;
@@ -38,5 +38,6 @@ export default {
38
38
  iframeInfo: 'Embed another website',
39
39
  youtubeInfo: 'Embed Youtube video',
40
40
  blockquoteInfo: 'Blockquote',
41
- newLineInfo: 'Press / to enter commands. Or'
41
+ newLineInfo: 'Press / to enter commands. Or',
42
+ placeholder: 'Enter content here...',
42
43
  };
@@ -39,5 +39,6 @@ declare const _default: {
39
39
  youtubeInfo: string;
40
40
  blockquoteInfo: string;
41
41
  newLineInfo: string;
42
+ placeholder: string;
42
43
  };
43
44
  export default _default;
@@ -38,5 +38,6 @@ export default {
38
38
  iframeInfo: '다른 웹사이트 삽입',
39
39
  youtubeInfo: '유튜브 동영상 삽입',
40
40
  blockquoteInfo: '있어보이는 인용구 삽입',
41
- newLineInfo: '/로 명령어 입력. 또는'
41
+ newLineInfo: '/로 명령어 입력. 또는',
42
+ placeholder: '내용을 입력하세요...',
42
43
  };
@@ -135,7 +135,7 @@ main {
135
135
  font-size: 0.8em;
136
136
  font-weight: 300;
137
137
  color: var(--on-surface, #000);
138
- opacity: 0.8;
138
+ opacity: 0.7;
139
139
  }
140
140
 
141
141
  .list {
@@ -24,7 +24,7 @@ const san = (body) => sanitizeHtml(body, {
24
24
  });
25
25
  export let body = '', editable = false, ref = null, options = {};
26
26
  export let imageUpload = fallbackUpload, style = '';
27
- export let blocks = [];
27
+ export let blocks = [], placeholder = i18n('placeholder');
28
28
  const tiptap = setContext('editor', writable(null));
29
29
  let element, fullscreen = false, mounted = false, last = '';
30
30
  $: $tiptap && $tiptap.setEditable(editable);
@@ -38,6 +38,7 @@ if (browser) {
38
38
  if (!mounted)
39
39
  return;
40
40
  ref = $tiptap = tt(element, body, {
41
+ placeholder,
41
42
  editable: editable,
42
43
  onTransaction: () => ref = $tiptap = $tiptap,
43
44
  ...options,
@@ -160,11 +161,16 @@ div > :global(div) {
160
161
  outline: none !important;
161
162
  }
162
163
  div > :global(div) :global(.ProseMirror) :global(p.is-editor-empty:first-child::before) {
163
- color: #adb5bd;
164
+ color: var(--on-surface, #000);
165
+ opacity: 0.7;
164
166
  content: attr(data-placeholder);
165
167
  float: left;
166
168
  height: 0;
167
169
  pointer-events: none;
170
+ transition: 0.2s opacity ease-in-out;
171
+ }
172
+ div > :global(div) :global(.ProseMirror-focused) :global(p.is-editor-empty:first-child::before) {
173
+ opacity: 0;
168
174
  }
169
175
  div > :global(div) :global(a) {
170
176
  cursor: pointer;
@@ -10,6 +10,7 @@ declare const __propDef: {
10
10
  imageUpload?: UploadFn | undefined;
11
11
  style?: string | undefined;
12
12
  blocks?: any[] | undefined;
13
+ placeholder?: any;
13
14
  };
14
15
  events: {
15
16
  [evt: string]: CustomEvent<any>;
@@ -1,3 +1,3 @@
1
1
  import { Editor } from "@tiptap/core";
2
- declare const _default: (element: Element, content: string, { plugins, ...props }?: any) => Editor;
2
+ declare const _default: (element: Element, content: string, { placeholder, plugins, ...props }?: any) => Editor;
3
3
  export default _default;
@@ -23,9 +23,11 @@ import Iframe from "../plugin/iframe";
23
23
  // @ts-ignore
24
24
  import { MathInline, MathBlock } from "@seorii/prosemirror-math/tiptap";
25
25
  import Youtube from "../plugin/youtube";
26
+ import Placeholder from "@tiptap/extension-placeholder";
26
27
  import command from "../plugin/command/suggest";
27
28
  import emoji from "../plugin/command/emoji";
28
- export default (element, content, { plugins = [], ...props } = {}) => {
29
+ import i18n from "../i18n";
30
+ export default (element, content, { placeholder = i18n('placeholder'), plugins = [], ...props } = {}) => {
29
31
  const tt = new Editor({
30
32
  element, content, ...props,
31
33
  extensions: [
@@ -73,6 +75,7 @@ export default (element, content, { plugins = [], ...props } = {}) => {
73
75
  return ['code', mergeAttributes(HTMLAttributes, { class: 'inline' })];
74
76
  }
75
77
  }),
78
+ Placeholder.configure({ placeholder }),
76
79
  ...plugins,
77
80
  ],
78
81
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seorii/tiptap",
3
- "version": "0.2.1",
3
+ "version": "0.2.3",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "svelte-kit sync && svelte-package",
@@ -15,24 +15,24 @@
15
15
  "devDependencies": {
16
16
  "@sveltejs/adapter-auto": "^2.1.0",
17
17
  "@sveltejs/adapter-static": "^2.0.3",
18
- "@sveltejs/kit": "^1.22.4",
19
- "@sveltejs/package": "^2.2.0",
18
+ "@sveltejs/kit": "^1.22.5",
19
+ "@sveltejs/package": "^2.2.1",
20
20
  "@types/sanitize-html": "^2.9.0",
21
- "@typescript-eslint/eslint-plugin": "^6.2.1",
22
- "@typescript-eslint/parser": "^6.2.1",
23
- "eslint": "^8.46.0",
24
- "eslint-config-prettier": "^8.10.0",
21
+ "@typescript-eslint/eslint-plugin": "^6.3.0",
22
+ "@typescript-eslint/parser": "^6.3.0",
23
+ "eslint": "^8.47.0",
24
+ "eslint-config-prettier": "^9.0.0",
25
25
  "eslint-plugin-svelte3": "^4.0.0",
26
- "gh-pages": "^5.0.0",
26
+ "gh-pages": "^6.0.0",
27
27
  "prettier": "^3.0.1",
28
28
  "prettier-plugin-svelte": "^3.0.3",
29
- "sass": "^1.64.2",
30
- "svelte": "^4.1.2",
31
- "svelte-check": "^3.4.6",
29
+ "sass": "^1.65.1",
30
+ "svelte": "^4.2.0",
31
+ "svelte-check": "^3.5.0",
32
32
  "svelte-preprocess": "^5.0.4",
33
33
  "tslib": "^2.6.1",
34
34
  "typescript": "^5.1.6",
35
- "vite": "^4.4.8"
35
+ "vite": "^4.4.9"
36
36
  },
37
37
  "type": "module",
38
38
  "dependencies": {
@@ -61,7 +61,7 @@
61
61
  "@tiptap/starter-kit": "^2.0.4",
62
62
  "@tiptap/suggestion": "^2.0.4",
63
63
  "emojis-keywords": "2.0.0",
64
- "emojis-list": "2.0.0",
64
+ "emojis-list": "3.0.0",
65
65
  "lowlight": "^2.9.0",
66
66
  "nunui": "^0.0.101",
67
67
  "prosemirror-commands": "^1.5.2",