@seorii/tiptap 0.2.12 → 0.2.14
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.
- package/dist/i18n/ko-kr/index.js +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +3 -1
- package/dist/plugin/command/suggest.d.ts +1 -0
- package/dist/plugin/command/suggest.js +21 -9
- package/dist/tiptap/Command.svelte +28 -46
- package/dist/tiptap/TipTap.svelte +14 -7
- package/dist/tiptap/tiptap.js +20 -1
- package/package.json +52 -49
package/dist/i18n/ko-kr/index.js
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -30,6 +30,10 @@ function fixRange(editor, range, split = '/') {
|
|
|
30
30
|
}
|
|
31
31
|
return range;
|
|
32
32
|
}
|
|
33
|
+
export function getDetail(editor, range, opt) {
|
|
34
|
+
slashSelection.set(() => editor.chain().focus().deleteRange(fixRange(editor, range)).run());
|
|
35
|
+
slashDetail.set(opt);
|
|
36
|
+
}
|
|
33
37
|
export const suggest = {
|
|
34
38
|
pluginKey: new PluginKey('slash-suggest'),
|
|
35
39
|
char: '/',
|
|
@@ -128,7 +132,10 @@ export const suggest = {
|
|
|
128
132
|
title: i18n('table'),
|
|
129
133
|
subtitle: i18n('tableInfo'),
|
|
130
134
|
command: ({ editor, range }) => {
|
|
131
|
-
editor.chain().focus().deleteRange(fixRange(editor, range)).insertTable({
|
|
135
|
+
editor.chain().focus().deleteRange(fixRange(editor, range)).insertTable({
|
|
136
|
+
rows: 2,
|
|
137
|
+
cols: 3
|
|
138
|
+
}).run();
|
|
132
139
|
}
|
|
133
140
|
},
|
|
134
141
|
{
|
|
@@ -143,19 +150,24 @@ export const suggest = {
|
|
|
143
150
|
icon: 'iframe',
|
|
144
151
|
title: i18n('iframe'),
|
|
145
152
|
subtitle: i18n('iframeInfo'),
|
|
146
|
-
command: ({ editor, range }) => {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
153
|
+
command: ({ editor, range }) => getDetail(editor, range, {
|
|
154
|
+
title: 'iframe', placeholder: 'url', handler: (input) => {
|
|
155
|
+
editor.chain().focus().insertContent([{
|
|
156
|
+
type: 'iframe',
|
|
157
|
+
attrs: { src: input }
|
|
158
|
+
}, { type: 'paragraph' }]).run();
|
|
159
|
+
}
|
|
160
|
+
})
|
|
150
161
|
},
|
|
151
162
|
{
|
|
152
163
|
icon: 'youtube_activity',
|
|
153
164
|
title: i18n('youtube'),
|
|
154
165
|
subtitle: i18n('youtubeInfo'),
|
|
155
|
-
command: ({ editor, range }) => {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
166
|
+
command: ({ editor, range }) => getDetail(editor, range, {
|
|
167
|
+
title: 'youtube', placeholder: 'url', handler: (input) => {
|
|
168
|
+
editor.chain().focus().insertVideoPlayer({ url: input }).insertContent('\n').run();
|
|
169
|
+
}
|
|
170
|
+
})
|
|
159
171
|
}
|
|
160
172
|
]
|
|
161
173
|
}
|
|
@@ -7,9 +7,9 @@ import i18n from "../i18n";
|
|
|
7
7
|
const tiptap = getContext('editor');
|
|
8
8
|
export let selectedIndex = 0;
|
|
9
9
|
let height = 0, elements = [];
|
|
10
|
-
let
|
|
10
|
+
let input = '', focus;
|
|
11
11
|
$: if ($slashVisible) {
|
|
12
|
-
|
|
12
|
+
input = '';
|
|
13
13
|
}
|
|
14
14
|
$: setTimeout(() => focus?.focus?.(), 100);
|
|
15
15
|
</script>
|
|
@@ -21,50 +21,7 @@ $: setTimeout(() => focus?.focus?.(), 100);
|
|
|
21
21
|
<main style="left: {$slashLocaltion.x}px; top: {$slashLocaltion.y + $slashLocaltion.height + 384 > height
|
|
22
22
|
? $slashLocaltion.y - $slashLocaltion.height - 384
|
|
23
23
|
: $slashLocaltion.y + $slashLocaltion.height}px;" transition:fly={{y: 10, duration: 200, easing: quartOut}}>
|
|
24
|
-
{#if $slashDetail === '
|
|
25
|
-
<div class="detail">
|
|
26
|
-
<header>
|
|
27
|
-
<IconButton icon="arrow_back" on:click={() => $slashDetail = ''}/>
|
|
28
|
-
<div class="title">iframe</div>
|
|
29
|
-
</header>
|
|
30
|
-
<Input placeholder="url" fullWidth bind:value={iframe} bind:input={focus}
|
|
31
|
-
on:submit={() => $tiptap.chain().focus().insertContent([{type: 'iframe', attrs: {src: iframe}}, {type: 'paragraph'}]).run()}/>
|
|
32
|
-
<footer>
|
|
33
|
-
<Button tabindex="0" transparent small on:click={() => {
|
|
34
|
-
iframe = ''
|
|
35
|
-
$slashDetail = ''
|
|
36
|
-
}}>{i18n('cancel')}
|
|
37
|
-
</Button>
|
|
38
|
-
<Button tabindex="0" transparent small
|
|
39
|
-
on:click={() => {
|
|
40
|
-
$slashSelection?.();
|
|
41
|
-
$tiptap.chain().focus().insertContent([{type: 'iframe', attrs: {src: iframe}}, {type: 'paragraph'}]).run();
|
|
42
|
-
}}>{i18n('insert')}
|
|
43
|
-
</Button>
|
|
44
|
-
</footer>
|
|
45
|
-
</div>
|
|
46
|
-
{:else if $slashDetail === 'youtube'}
|
|
47
|
-
<div class="detail">
|
|
48
|
-
<header>
|
|
49
|
-
<IconButton icon="arrow_back" on:click={() => $slashDetail = ''}/>
|
|
50
|
-
<div class="title">Youtube</div>
|
|
51
|
-
</header>
|
|
52
|
-
<Input placeholder="url" fullWidth bind:value={iframe} bind:input={focus}
|
|
53
|
-
on:submit={() => $tiptap.chain().focus().insertVideoPlayer({url: iframe}).insertContent('\n').run()}/>
|
|
54
|
-
<footer>
|
|
55
|
-
<Button tabindex="0" transparent small on:click={() => {
|
|
56
|
-
iframe = ''
|
|
57
|
-
$slashDetail = ''
|
|
58
|
-
}}>{i18n('cancel')}
|
|
59
|
-
</Button>
|
|
60
|
-
<Button tabindex="0" transparent small on:click={() => {
|
|
61
|
-
$slashSelection?.();
|
|
62
|
-
$tiptap.chain().focus().insertVideoPlayer({url: iframe}).insertContent('\n').run();
|
|
63
|
-
}}>{i18n('insert')}
|
|
64
|
-
</Button>
|
|
65
|
-
</footer>
|
|
66
|
-
</div>
|
|
67
|
-
{:else if $slashDetail === 'emoji'}
|
|
24
|
+
{#if $slashDetail === 'emoji'}
|
|
68
25
|
<div class="list">
|
|
69
26
|
<List>
|
|
70
27
|
{#each $slashItems as {title, command}, i(title)}
|
|
@@ -81,6 +38,31 @@ $: setTimeout(() => focus?.focus?.(), 100);
|
|
|
81
38
|
{/if}
|
|
82
39
|
</List>
|
|
83
40
|
</div>
|
|
41
|
+
{:else if $slashDetail}
|
|
42
|
+
<div class="detail">
|
|
43
|
+
<header>
|
|
44
|
+
<IconButton icon="arrow_back" on:click={() => $slashDetail = null}/>
|
|
45
|
+
<div class="title">{$slashDetail.title}</div>
|
|
46
|
+
</header>
|
|
47
|
+
<Input placeholder={$slashDetail.placeholder} fullWidth bind:value={input} bind:input={focus}
|
|
48
|
+
on:submit={() => {
|
|
49
|
+
$slashSelection?.();
|
|
50
|
+
$slashDetail.handler(input)
|
|
51
|
+
}}/>
|
|
52
|
+
<footer>
|
|
53
|
+
<Button tabindex="0" transparent small on:click={() => {
|
|
54
|
+
input = ''
|
|
55
|
+
$slashDetail = null
|
|
56
|
+
}}>{i18n('cancel')}
|
|
57
|
+
</Button>
|
|
58
|
+
<Button tabindex="0" transparent small
|
|
59
|
+
on:click={() => {
|
|
60
|
+
$slashSelection?.();
|
|
61
|
+
$slashDetail.handler(input);
|
|
62
|
+
}}>{i18n('insert')}
|
|
63
|
+
</Button>
|
|
64
|
+
</footer>
|
|
65
|
+
</div>
|
|
84
66
|
{:else}
|
|
85
67
|
<div class="list">
|
|
86
68
|
<List>
|
|
@@ -27,13 +27,13 @@ export let body = '', editable = false, ref = null, options = {}, loaded = false
|
|
|
27
27
|
export let imageUpload = fallbackUpload, style = '';
|
|
28
28
|
export let blocks = [], placeholder = i18n('placeholder');
|
|
29
29
|
export let colors = [
|
|
30
|
-
'#ef5350',
|
|
31
|
-
'#ec407a',
|
|
32
|
-
'#ff7043',
|
|
33
|
-
'#daca3b',
|
|
34
|
-
'#8bc34a',
|
|
35
|
-
'#2196f3',
|
|
36
|
-
'#3f51b5',
|
|
30
|
+
'#ef5350', //red
|
|
31
|
+
'#ec407a', //pink
|
|
32
|
+
'#ff7043', //orange
|
|
33
|
+
'#daca3b', //yellow
|
|
34
|
+
'#8bc34a', //green
|
|
35
|
+
'#2196f3', //blue
|
|
36
|
+
'#3f51b5', //blue
|
|
37
37
|
'#ab47bc', //purple
|
|
38
38
|
];
|
|
39
39
|
const tiptap = setContext('editor', writable(null));
|
|
@@ -173,6 +173,10 @@ main .wrapper {
|
|
|
173
173
|
outline: 3px solid var(--primary);
|
|
174
174
|
}
|
|
175
175
|
|
|
176
|
+
.editable :global(lite-youtube.ProseMirror-selectednode) {
|
|
177
|
+
outline: 3px solid var(--primary);
|
|
178
|
+
}
|
|
179
|
+
|
|
176
180
|
div > :global(div) {
|
|
177
181
|
outline: none !important;
|
|
178
182
|
}
|
|
@@ -222,6 +226,9 @@ div > :global(div) :global(table) :global(th), div > :global(div) :global(table)
|
|
|
222
226
|
div > :global(div) :global(.math-render) {
|
|
223
227
|
cursor: initial;
|
|
224
228
|
}
|
|
229
|
+
div > :global(div) :global(lite-youtube) {
|
|
230
|
+
border-radius: 12px;
|
|
231
|
+
}
|
|
225
232
|
div > :global(div) :global(.iframe-wrapper) {
|
|
226
233
|
position: relative;
|
|
227
234
|
padding-bottom: 12px;
|
package/dist/tiptap/tiptap.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Editor, mergeAttributes } from "@tiptap/core";
|
|
2
2
|
import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
|
|
3
|
-
import {
|
|
3
|
+
import { all, createLowlight } from 'lowlight';
|
|
4
4
|
import Code from "@tiptap/extension-code";
|
|
5
5
|
import Image from "../plugin/image";
|
|
6
6
|
import StarterKit from "@tiptap/starter-kit";
|
|
@@ -28,7 +28,26 @@ import Placeholder from "@tiptap/extension-placeholder";
|
|
|
28
28
|
import command from "../plugin/command/suggest";
|
|
29
29
|
import emoji from "../plugin/command/emoji";
|
|
30
30
|
import i18n from "../i18n";
|
|
31
|
+
import js from 'highlight.js/lib/languages/javascript';
|
|
32
|
+
import ts from 'highlight.js/lib/languages/typescript';
|
|
33
|
+
import python from 'highlight.js/lib/languages/python';
|
|
34
|
+
import cpp from 'highlight.js/lib/languages/cpp';
|
|
35
|
+
import java from 'highlight.js/lib/languages/java';
|
|
36
|
+
import kotlin from 'highlight.js/lib/languages/kotlin';
|
|
37
|
+
import go from 'highlight.js/lib/languages/go';
|
|
38
|
+
import csharp from 'highlight.js/lib/languages/csharp';
|
|
39
|
+
import rust from 'highlight.js/lib/languages/rust';
|
|
31
40
|
export default (element, content, { placeholder = i18n('placeholder'), plugins = [], ...props } = {}) => {
|
|
41
|
+
const lowlight = createLowlight(all);
|
|
42
|
+
lowlight.register('js', js);
|
|
43
|
+
lowlight.register('ts', ts);
|
|
44
|
+
lowlight.register('python', python);
|
|
45
|
+
lowlight.register('cpp', cpp);
|
|
46
|
+
lowlight.register('java', java);
|
|
47
|
+
lowlight.register('kotlin', kotlin);
|
|
48
|
+
lowlight.register('go', go);
|
|
49
|
+
lowlight.register('csharp', csharp);
|
|
50
|
+
lowlight.register('rust', rust);
|
|
32
51
|
const tt = new Editor({
|
|
33
52
|
element, content, ...props,
|
|
34
53
|
extensions: [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seorii/tiptap",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.14",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "svelte-kit sync && svelte-package",
|
|
@@ -13,64 +13,67 @@
|
|
|
13
13
|
"page": "npm run build-page && node gh-pages.js"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
|
-
"@sveltejs/adapter-auto": "^
|
|
17
|
-
"@sveltejs/adapter-static": "^
|
|
18
|
-
"@sveltejs/kit": "^
|
|
19
|
-
"@sveltejs/package": "^2.
|
|
20
|
-
"@
|
|
21
|
-
"@
|
|
22
|
-
"@
|
|
23
|
-
"eslint": "^
|
|
24
|
-
"eslint
|
|
16
|
+
"@sveltejs/adapter-auto": "^3.1.1",
|
|
17
|
+
"@sveltejs/adapter-static": "^3.0.1",
|
|
18
|
+
"@sveltejs/kit": "^2.5.4",
|
|
19
|
+
"@sveltejs/package": "^2.3.0",
|
|
20
|
+
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
|
21
|
+
"@tiptap/extension-code-block": "^2.2.4",
|
|
22
|
+
"@types/sanitize-html": "^2.11.0",
|
|
23
|
+
"@typescript-eslint/eslint-plugin": "^7.3.1",
|
|
24
|
+
"@typescript-eslint/parser": "^7.3.1",
|
|
25
|
+
"eslint": "^8.57.0",
|
|
26
|
+
"eslint-config-prettier": "^9.1.0",
|
|
25
27
|
"eslint-plugin-svelte3": "^4.0.0",
|
|
26
|
-
"gh-pages": "^6.
|
|
27
|
-
"
|
|
28
|
-
"prettier
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"svelte
|
|
32
|
-
"svelte-
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
28
|
+
"gh-pages": "^6.1.1",
|
|
29
|
+
"highlight.js": "^11.9.0",
|
|
30
|
+
"prettier": "^3.2.5",
|
|
31
|
+
"prettier-plugin-svelte": "^3.2.2",
|
|
32
|
+
"sass": "^1.72.0",
|
|
33
|
+
"svelte": "^4.2.12",
|
|
34
|
+
"svelte-check": "^3.6.8",
|
|
35
|
+
"svelte-preprocess": "^5.1.3",
|
|
36
|
+
"tslib": "^2.6.2",
|
|
37
|
+
"typescript": "^5.4.2",
|
|
38
|
+
"vite": "^5.2.2"
|
|
36
39
|
},
|
|
37
40
|
"type": "module",
|
|
38
41
|
"dependencies": {
|
|
39
42
|
"@justinribeiro/lite-youtube": "^1.5.0",
|
|
40
43
|
"@seorii/prosemirror-math": "^0.4.2",
|
|
41
|
-
"@tiptap/core": "^2.
|
|
42
|
-
"@tiptap/extension-code": "^2.
|
|
43
|
-
"@tiptap/extension-code-block-lowlight": "^2.
|
|
44
|
-
"@tiptap/extension-color": "^2.
|
|
45
|
-
"@tiptap/extension-dropcursor": "^2.
|
|
46
|
-
"@tiptap/extension-highlight": "^2.
|
|
47
|
-
"@tiptap/extension-image": "^2.
|
|
48
|
-
"@tiptap/extension-link": "^2.
|
|
49
|
-
"@tiptap/extension-ordered-list": "^2.
|
|
50
|
-
"@tiptap/extension-placeholder": "^2.
|
|
51
|
-
"@tiptap/extension-subscript": "^2.
|
|
52
|
-
"@tiptap/extension-superscript": "^2.
|
|
53
|
-
"@tiptap/extension-table": "^2.
|
|
54
|
-
"@tiptap/extension-table-cell": "^2.
|
|
55
|
-
"@tiptap/extension-table-header": "^2.
|
|
56
|
-
"@tiptap/extension-table-row": "^2.
|
|
57
|
-
"@tiptap/extension-text-align": "^2.
|
|
58
|
-
"@tiptap/extension-text-style": "^2.
|
|
59
|
-
"@tiptap/extension-underline": "^2.
|
|
60
|
-
"@tiptap/pm": "^2.
|
|
61
|
-
"@tiptap/starter-kit": "^2.
|
|
62
|
-
"@tiptap/suggestion": "^2.
|
|
44
|
+
"@tiptap/core": "^2.2.4",
|
|
45
|
+
"@tiptap/extension-code": "^2.2.4",
|
|
46
|
+
"@tiptap/extension-code-block-lowlight": "^2.2.4",
|
|
47
|
+
"@tiptap/extension-color": "^2.2.4",
|
|
48
|
+
"@tiptap/extension-dropcursor": "^2.2.4",
|
|
49
|
+
"@tiptap/extension-highlight": "^2.2.4",
|
|
50
|
+
"@tiptap/extension-image": "^2.2.4",
|
|
51
|
+
"@tiptap/extension-link": "^2.2.4",
|
|
52
|
+
"@tiptap/extension-ordered-list": "^2.2.4",
|
|
53
|
+
"@tiptap/extension-placeholder": "^2.2.4",
|
|
54
|
+
"@tiptap/extension-subscript": "^2.2.4",
|
|
55
|
+
"@tiptap/extension-superscript": "^2.2.4",
|
|
56
|
+
"@tiptap/extension-table": "^2.2.4",
|
|
57
|
+
"@tiptap/extension-table-cell": "^2.2.4",
|
|
58
|
+
"@tiptap/extension-table-header": "^2.2.4",
|
|
59
|
+
"@tiptap/extension-table-row": "^2.2.4",
|
|
60
|
+
"@tiptap/extension-text-align": "^2.2.4",
|
|
61
|
+
"@tiptap/extension-text-style": "^2.2.4",
|
|
62
|
+
"@tiptap/extension-underline": "^2.2.4",
|
|
63
|
+
"@tiptap/pm": "^2.2.4",
|
|
64
|
+
"@tiptap/starter-kit": "^2.2.4",
|
|
65
|
+
"@tiptap/suggestion": "^2.2.4",
|
|
63
66
|
"emojis-keywords": "2.0.0",
|
|
64
67
|
"emojis-list": "3.0.0",
|
|
65
|
-
"lowlight": "^
|
|
66
|
-
"nunui": "^0.0.
|
|
68
|
+
"lowlight": "^3.1.0",
|
|
69
|
+
"nunui": "^0.0.118",
|
|
67
70
|
"prosemirror-commands": "^1.5.2",
|
|
68
|
-
"prosemirror-model": "^1.19.
|
|
71
|
+
"prosemirror-model": "^1.19.4",
|
|
69
72
|
"prosemirror-state": "^1.4.3",
|
|
70
|
-
"prosemirror-tables": "^1.3.
|
|
71
|
-
"prosemirror-transform": "^1.
|
|
72
|
-
"prosemirror-view": "^1.
|
|
73
|
-
"sanitize-html": "^2.
|
|
73
|
+
"prosemirror-tables": "^1.3.7",
|
|
74
|
+
"prosemirror-transform": "^1.8.0",
|
|
75
|
+
"prosemirror-view": "^1.33.1",
|
|
76
|
+
"sanitize-html": "^2.12.1",
|
|
74
77
|
"svelte-tiptap": "^1.1.2",
|
|
75
78
|
"tippy.js": "^6.3.7"
|
|
76
79
|
},
|