@seorii/tiptap 0.0.10 → 0.1.1
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/en-us/index.d.ts +43 -0
- package/dist/i18n/en-us/index.js +42 -0
- package/dist/i18n/index.d.ts +7 -0
- package/dist/i18n/index.js +22 -0
- package/dist/i18n/ko-kr/index.d.ts +43 -0
- package/dist/i18n/ko-kr/index.js +42 -0
- package/dist/plugin/command/suggest.d.ts +3 -3
- package/dist/plugin/command/suggest.js +35 -23
- package/dist/tiptap/Bubble.svelte +10 -8
- package/dist/tiptap/Command.svelte +11 -9
- package/dist/tiptap/Floating.svelte +8 -8
- package/dist/tiptap/TipTap.svelte +14 -10
- package/dist/tiptap/TipTap.svelte.d.ts +1 -1
- package/dist/tiptap/tiptap.js +13 -1
- package/package.json +8 -8
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
target: string[];
|
|
3
|
+
lang: string;
|
|
4
|
+
country: string;
|
|
5
|
+
text: string;
|
|
6
|
+
block: string;
|
|
7
|
+
loading: string;
|
|
8
|
+
delete: string;
|
|
9
|
+
close: string;
|
|
10
|
+
cancel: string;
|
|
11
|
+
insert: string;
|
|
12
|
+
noResult: string;
|
|
13
|
+
title: string;
|
|
14
|
+
paragraph: string;
|
|
15
|
+
link: string;
|
|
16
|
+
alignLeft: string;
|
|
17
|
+
alignCenter: string;
|
|
18
|
+
alignRight: string;
|
|
19
|
+
alignJustify: string;
|
|
20
|
+
unorderedList: string;
|
|
21
|
+
numberList: string;
|
|
22
|
+
codeBlock: string;
|
|
23
|
+
mathBlock: string;
|
|
24
|
+
table: string;
|
|
25
|
+
image: string;
|
|
26
|
+
iframe: string;
|
|
27
|
+
youtube: string;
|
|
28
|
+
blockquote: string;
|
|
29
|
+
title1Info: string;
|
|
30
|
+
title2Info: string;
|
|
31
|
+
title3Info: string;
|
|
32
|
+
unorderedListInfo: string;
|
|
33
|
+
numberListInfo: string;
|
|
34
|
+
codeBlockInfo: string;
|
|
35
|
+
mathBlockInfo: string;
|
|
36
|
+
tableInfo: string;
|
|
37
|
+
imageInfo: string;
|
|
38
|
+
iframeInfo: string;
|
|
39
|
+
youtubeInfo: string;
|
|
40
|
+
blockquoteInfo: string;
|
|
41
|
+
newLineInfo: string;
|
|
42
|
+
};
|
|
43
|
+
export default _default;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
target: ['en', 'en-US', 'en-GB'],
|
|
3
|
+
lang: 'en',
|
|
4
|
+
country: 'US',
|
|
5
|
+
text: 'Text',
|
|
6
|
+
block: 'Block',
|
|
7
|
+
loading: 'Loading...',
|
|
8
|
+
delete: 'Delete',
|
|
9
|
+
close: 'Close',
|
|
10
|
+
cancel: 'Cancel',
|
|
11
|
+
insert: 'Insert',
|
|
12
|
+
noResult: 'No result',
|
|
13
|
+
title: 'Title',
|
|
14
|
+
paragraph: 'Paragraph',
|
|
15
|
+
link: 'Link',
|
|
16
|
+
alignLeft: 'Align left',
|
|
17
|
+
alignCenter: 'Align center',
|
|
18
|
+
alignRight: 'Align right',
|
|
19
|
+
alignJustify: 'Align justify',
|
|
20
|
+
unorderedList: 'Unordered list',
|
|
21
|
+
numberList: 'Number list',
|
|
22
|
+
codeBlock: 'Code block',
|
|
23
|
+
mathBlock: 'Math block',
|
|
24
|
+
table: 'Table',
|
|
25
|
+
image: 'Image',
|
|
26
|
+
iframe: 'iframe',
|
|
27
|
+
youtube: 'Youtube',
|
|
28
|
+
blockquote: 'Blockquote',
|
|
29
|
+
title1Info: 'Big title',
|
|
30
|
+
title2Info: 'Smaller title',
|
|
31
|
+
title3Info: 'Medium title',
|
|
32
|
+
unorderedListInfo: 'Unordered list',
|
|
33
|
+
numberListInfo: '1, 2, 3, 4',
|
|
34
|
+
codeBlockInfo: 'Code block with syntax highlighting',
|
|
35
|
+
mathBlockInfo: 'Math block',
|
|
36
|
+
tableInfo: 'Table',
|
|
37
|
+
imageInfo: 'Image',
|
|
38
|
+
iframeInfo: 'Embed another website',
|
|
39
|
+
youtubeInfo: 'Embed Youtube video',
|
|
40
|
+
blockquoteInfo: 'Blockquote',
|
|
41
|
+
newLineInfo: 'Press / to enter commands. Or'
|
|
42
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import enUs from './en-us/index';
|
|
2
|
+
import koKr from './ko-kr/index';
|
|
3
|
+
import { browser } from "$app/environment";
|
|
4
|
+
const locales = [enUs, koKr];
|
|
5
|
+
export function getLocale(locales) {
|
|
6
|
+
if (typeof navigator === 'undefined')
|
|
7
|
+
return enUs;
|
|
8
|
+
const language = navigator.language;
|
|
9
|
+
const locale = locales.find(item => item.target.includes(language));
|
|
10
|
+
return locale || enUs;
|
|
11
|
+
}
|
|
12
|
+
const locale = getLocale(locales);
|
|
13
|
+
export default function i18n(...args) {
|
|
14
|
+
return args.reduce((prev, next) => {
|
|
15
|
+
return prev[next] || '';
|
|
16
|
+
}, locale);
|
|
17
|
+
}
|
|
18
|
+
i18n.locale = locale;
|
|
19
|
+
i18n.localeLangCountry = i18n('lang') + '-' + i18n('country');
|
|
20
|
+
//@ts-ignore
|
|
21
|
+
if (browser)
|
|
22
|
+
window.__me_i18n = i18n;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
target: string[];
|
|
3
|
+
lang: string;
|
|
4
|
+
country: string;
|
|
5
|
+
text: string;
|
|
6
|
+
block: string;
|
|
7
|
+
loading: string;
|
|
8
|
+
delete: string;
|
|
9
|
+
close: string;
|
|
10
|
+
cancel: string;
|
|
11
|
+
insert: string;
|
|
12
|
+
noResult: string;
|
|
13
|
+
title: string;
|
|
14
|
+
paragraph: string;
|
|
15
|
+
link: string;
|
|
16
|
+
alignLeft: string;
|
|
17
|
+
alignCenter: string;
|
|
18
|
+
alignRight: string;
|
|
19
|
+
alignJustify: string;
|
|
20
|
+
unorderedList: string;
|
|
21
|
+
numberList: string;
|
|
22
|
+
codeBlock: string;
|
|
23
|
+
mathBlock: string;
|
|
24
|
+
table: string;
|
|
25
|
+
image: string;
|
|
26
|
+
iframe: string;
|
|
27
|
+
youtube: string;
|
|
28
|
+
blockquote: string;
|
|
29
|
+
title1Info: string;
|
|
30
|
+
title2Info: string;
|
|
31
|
+
title3Info: string;
|
|
32
|
+
unorderedListInfo: string;
|
|
33
|
+
numberListInfo: string;
|
|
34
|
+
codeBlockInfo: string;
|
|
35
|
+
mathBlockInfo: string;
|
|
36
|
+
tableInfo: string;
|
|
37
|
+
imageInfo: string;
|
|
38
|
+
iframeInfo: string;
|
|
39
|
+
youtubeInfo: string;
|
|
40
|
+
blockquoteInfo: string;
|
|
41
|
+
newLineInfo: string;
|
|
42
|
+
};
|
|
43
|
+
export default _default;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
target: ['ko'],
|
|
3
|
+
lang: 'ko',
|
|
4
|
+
country: 'KR',
|
|
5
|
+
text: '텍스트',
|
|
6
|
+
block: '블록',
|
|
7
|
+
loading: '로딩 중...',
|
|
8
|
+
delete: '삭제',
|
|
9
|
+
close: '닫기',
|
|
10
|
+
cancel: '취소',
|
|
11
|
+
insert: '삽입',
|
|
12
|
+
noResult: '결과 없음',
|
|
13
|
+
title: '제목',
|
|
14
|
+
paragraph: '본문',
|
|
15
|
+
link: '링크',
|
|
16
|
+
alignLeft: '왼쪽 정렬',
|
|
17
|
+
alignCenter: '가운데 정렬',
|
|
18
|
+
alignRight: '오른쪽 정렬',
|
|
19
|
+
alignJustify: '양쪽 정렬',
|
|
20
|
+
unorderedList: '리스트',
|
|
21
|
+
numberList: '숫자 리스트',
|
|
22
|
+
codeBlock: '코드 블록',
|
|
23
|
+
mathBlock: '수식 블록',
|
|
24
|
+
table: '테이블',
|
|
25
|
+
image: '이미지',
|
|
26
|
+
iframe: 'iframe',
|
|
27
|
+
youtube: '유튜브',
|
|
28
|
+
blockquote: '인용구',
|
|
29
|
+
title1Info: '큰 제목',
|
|
30
|
+
title2Info: '좀 더 작은 제목',
|
|
31
|
+
title3Info: '적당히 큰 제목',
|
|
32
|
+
unorderedListInfo: '순서 없는 리스트',
|
|
33
|
+
numberListInfo: '1, 2, 3, 4',
|
|
34
|
+
codeBlockInfo: '하이라이팅되는 코드 블록',
|
|
35
|
+
mathBlockInfo: '가운데로 정렬되는 수식 블록',
|
|
36
|
+
tableInfo: '표 삽입',
|
|
37
|
+
imageInfo: '이미지',
|
|
38
|
+
iframeInfo: '다른 웹사이트 삽입',
|
|
39
|
+
youtubeInfo: '유튜브 동영상 삽입',
|
|
40
|
+
blockquoteInfo: '있어보이는 인용구 삽입',
|
|
41
|
+
newLineInfo: '/로 명령어 입력. 또는'
|
|
42
|
+
};
|
|
@@ -2,11 +2,11 @@ declare const _default: {
|
|
|
2
2
|
items: ({ query }: {
|
|
3
3
|
query: any;
|
|
4
4
|
}) => {
|
|
5
|
-
section:
|
|
5
|
+
section: any;
|
|
6
6
|
list: {
|
|
7
7
|
icon: string;
|
|
8
|
-
title:
|
|
9
|
-
subtitle:
|
|
8
|
+
title: any;
|
|
9
|
+
subtitle: any;
|
|
10
10
|
command: ({ editor, range }: {
|
|
11
11
|
editor: any;
|
|
12
12
|
range: any;
|
|
@@ -1,37 +1,38 @@
|
|
|
1
1
|
import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail } from './stores';
|
|
2
|
+
import i18n from "../../i18n";
|
|
2
3
|
export default {
|
|
3
4
|
items: ({ query }) => {
|
|
4
5
|
const raw = [
|
|
5
6
|
{
|
|
6
|
-
section: '
|
|
7
|
+
section: i18n('text'), list: [
|
|
7
8
|
{
|
|
8
9
|
icon: 'title',
|
|
9
|
-
title: '
|
|
10
|
-
subtitle: '
|
|
10
|
+
title: i18n('title') + ' 1',
|
|
11
|
+
subtitle: i18n('title1Info'),
|
|
11
12
|
command: ({ editor, range }) => {
|
|
12
13
|
editor.chain().focus().deleteRange(range).setNode('heading', { level: 1 }).run();
|
|
13
14
|
}
|
|
14
15
|
},
|
|
15
16
|
{
|
|
16
17
|
icon: 'title',
|
|
17
|
-
title: '
|
|
18
|
-
subtitle: '
|
|
18
|
+
title: i18n('title') + ' 2',
|
|
19
|
+
subtitle: i18n('title2Info'),
|
|
19
20
|
command: ({ editor, range }) => {
|
|
20
21
|
editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run();
|
|
21
22
|
}
|
|
22
23
|
},
|
|
23
24
|
{
|
|
24
25
|
icon: 'title',
|
|
25
|
-
title: '
|
|
26
|
-
subtitle: '
|
|
26
|
+
title: i18n('title') + ' 3',
|
|
27
|
+
subtitle: i18n('title3Info'),
|
|
27
28
|
command: ({ editor, range }) => {
|
|
28
29
|
editor.chain().focus().deleteRange(range).setNode('heading', { level: 3 }).run();
|
|
29
30
|
}
|
|
30
31
|
},
|
|
31
32
|
{
|
|
32
33
|
icon: 'format_list_bulleted',
|
|
33
|
-
title: '
|
|
34
|
-
subtitle: '
|
|
34
|
+
title: i18n('unorderedList'),
|
|
35
|
+
subtitle: i18n('unorderedListInfo'),
|
|
35
36
|
command: ({ editor, range }) => {
|
|
36
37
|
editor.commands.deleteRange(range);
|
|
37
38
|
editor.commands.toggleBulletList();
|
|
@@ -39,8 +40,8 @@ export default {
|
|
|
39
40
|
},
|
|
40
41
|
{
|
|
41
42
|
icon: 'format_list_numbered',
|
|
42
|
-
title: '
|
|
43
|
-
subtitle: '
|
|
43
|
+
title: i18n('numberList'),
|
|
44
|
+
subtitle: i18n('numberListInfo'),
|
|
44
45
|
command: ({ editor, range }) => {
|
|
45
46
|
editor.commands.deleteRange(range);
|
|
46
47
|
editor.commands.toggleOrderedList();
|
|
@@ -49,19 +50,19 @@ export default {
|
|
|
49
50
|
]
|
|
50
51
|
},
|
|
51
52
|
{
|
|
52
|
-
section: '
|
|
53
|
+
section: i18n('block'), list: [
|
|
53
54
|
{
|
|
54
55
|
icon: 'code',
|
|
55
|
-
title: '
|
|
56
|
-
subtitle: '
|
|
56
|
+
title: i18n('codeBlock'),
|
|
57
|
+
subtitle: i18n('codeBlockInfo'),
|
|
57
58
|
command: ({ editor, range }) => {
|
|
58
59
|
editor.chain().focus().deleteRange(range).setNode('codeBlock').run();
|
|
59
60
|
}
|
|
60
61
|
},
|
|
61
62
|
{
|
|
62
63
|
icon: 'functions',
|
|
63
|
-
title: '
|
|
64
|
-
subtitle: '
|
|
64
|
+
title: i18n('mathBlock'),
|
|
65
|
+
subtitle: i18n('mathBlockInfo'),
|
|
65
66
|
command: ({ editor, range }) => {
|
|
66
67
|
const { to } = range;
|
|
67
68
|
editor.chain().focus().deleteRange(range).setNode('math_display').focus().run();
|
|
@@ -69,24 +70,32 @@ export default {
|
|
|
69
70
|
},
|
|
70
71
|
{
|
|
71
72
|
icon: 'table_chart',
|
|
72
|
-
title: '
|
|
73
|
-
subtitle: '
|
|
73
|
+
title: i18n('table'),
|
|
74
|
+
subtitle: i18n('tableInfo'),
|
|
74
75
|
command: ({ editor, range }) => {
|
|
75
76
|
editor.chain().focus().insertTable({ rows: 2, cols: 3 }).run();
|
|
76
77
|
}
|
|
77
78
|
},
|
|
79
|
+
{
|
|
80
|
+
icon: 'format_quote',
|
|
81
|
+
title: i18n('blockquote'),
|
|
82
|
+
subtitle: i18n('blockquoteInfo'),
|
|
83
|
+
command: ({ editor, range }) => {
|
|
84
|
+
editor.chain().focus().deleteRange(range).setBlockquote().focus().run();
|
|
85
|
+
}
|
|
86
|
+
},
|
|
78
87
|
{
|
|
79
88
|
icon: 'iframe',
|
|
80
|
-
title: '
|
|
81
|
-
subtitle: '
|
|
89
|
+
title: i18n('iframe'),
|
|
90
|
+
subtitle: i18n('iframeInfo'),
|
|
82
91
|
command: ({ editor, range }) => {
|
|
83
92
|
slashDetail.set('iframe');
|
|
84
93
|
}
|
|
85
94
|
},
|
|
86
95
|
{
|
|
87
96
|
icon: 'youtube_activity',
|
|
88
|
-
title: '
|
|
89
|
-
subtitle: '
|
|
97
|
+
title: i18n('youtube'),
|
|
98
|
+
subtitle: i18n('youtubeInfo'),
|
|
90
99
|
command: ({ editor, range }) => {
|
|
91
100
|
slashDetail.set('youtube');
|
|
92
101
|
}
|
|
@@ -94,7 +103,10 @@ export default {
|
|
|
94
103
|
]
|
|
95
104
|
}
|
|
96
105
|
];
|
|
97
|
-
const filtered = raw.map(({ section, list }) => ({
|
|
106
|
+
const filtered = raw.map(({ section, list }) => ({
|
|
107
|
+
section, list: list.filter((item) => item.title.toLowerCase().includes(query.toLowerCase())
|
|
108
|
+
|| item.subtitle.toLowerCase().includes(query.toLowerCase()))
|
|
109
|
+
})).filter(({ list }) => list.length > 0);
|
|
98
110
|
return filtered;
|
|
99
111
|
},
|
|
100
112
|
render: () => {
|
|
@@ -6,6 +6,7 @@ import { isTableAnySelected } from "../plugin/table/util";
|
|
|
6
6
|
import deleteTable from "../plugin/table/deleteTable";
|
|
7
7
|
import setMath from "./setMath";
|
|
8
8
|
import { Button, Icon, IconButton, Input, List, OneLine, Tooltip } from "nunui";
|
|
9
|
+
import i18n from "../i18n";
|
|
9
10
|
const tiptap = getContext('editor');
|
|
10
11
|
let link = false, href = '', sel = '', _sel = '';
|
|
11
12
|
$: selection = $tiptap?.state?.selection;
|
|
@@ -19,7 +20,7 @@ $: if ($tiptap && sel !== _sel) {
|
|
|
19
20
|
$: if ($tiptap) {
|
|
20
21
|
if (href)
|
|
21
22
|
$tiptap.chain().setLink({ href }).run();
|
|
22
|
-
else
|
|
23
|
+
else if ($tiptap.getAttributes('link').href)
|
|
23
24
|
$tiptap.chain().unsetLink().run();
|
|
24
25
|
}
|
|
25
26
|
</script>
|
|
@@ -36,7 +37,7 @@ $: if ($tiptap) {
|
|
|
36
37
|
<div class="link">
|
|
37
38
|
<p>
|
|
38
39
|
<Icon icon="link"/>
|
|
39
|
-
|
|
40
|
+
{i18n('link')}
|
|
40
41
|
</p>
|
|
41
42
|
<Input placeholder="url" fullWidth bind:value={href} autofocus/>
|
|
42
43
|
<div>
|
|
@@ -44,9 +45,10 @@ $: if ($tiptap) {
|
|
|
44
45
|
href = ''
|
|
45
46
|
$tiptap.chain().focus().unsetLink().run()
|
|
46
47
|
tick().then(() => link = false)
|
|
47
|
-
}}
|
|
48
|
+
}}>{i18n('delete')}
|
|
48
49
|
</Button>
|
|
49
|
-
<Button tabindex="0" transparent small
|
|
50
|
+
<Button tabindex="0" transparent small
|
|
51
|
+
on:click={() => link = false}>{i18n('close')}</Button>
|
|
50
52
|
</div>
|
|
51
53
|
</div>
|
|
52
54
|
{:else if table}
|
|
@@ -69,16 +71,16 @@ $: if ($tiptap) {
|
|
|
69
71
|
<IconButton size="1.2em" icon="format_align_left" slot="target"/>
|
|
70
72
|
<div style="margin: -6px;font-size: 0.6em">
|
|
71
73
|
<List>
|
|
72
|
-
<OneLine icon="format_align_left" title=
|
|
74
|
+
<OneLine icon="format_align_left" title={i18n('alignLeft')}
|
|
73
75
|
on:click={() => $tiptap.chain().focus().setTextAlign('left').run()}
|
|
74
76
|
active={$tiptap.isActive({ textAlign: 'left' })}/>
|
|
75
|
-
<OneLine icon="format_align_center" title=
|
|
77
|
+
<OneLine icon="format_align_center" title={i18n('alignCenter')}
|
|
76
78
|
on:click={() => $tiptap.chain().focus().setTextAlign('center').run()}
|
|
77
79
|
active={$tiptap.isActive({ textAlign: 'center' })}/>
|
|
78
|
-
<OneLine icon="format_align_right" title=
|
|
80
|
+
<OneLine icon="format_align_right" title={i18n('alignRight')}
|
|
79
81
|
on:click={() => $tiptap.chain().focus().setTextAlign('right').run()}
|
|
80
82
|
active={$tiptap.isActive({ textAlign: 'right' })}/>
|
|
81
|
-
<OneLine icon="format_align_justify" title=
|
|
83
|
+
<OneLine icon="format_align_justify" title={i18n('alignJustify')}
|
|
82
84
|
on:click={() => $tiptap.chain().focus().setTextAlign('justify').run()}
|
|
83
85
|
active={$tiptap.isActive({ textAlign: 'justify' })}/>
|
|
84
86
|
</List>
|
|
@@ -3,6 +3,7 @@ import { getContext } from "svelte";
|
|
|
3
3
|
import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail } from '../plugin/command/stores';
|
|
4
4
|
import { fly, slide } from "svelte/transition";
|
|
5
5
|
import { quartOut } from "svelte/easing";
|
|
6
|
+
import i18n from "../i18n";
|
|
6
7
|
const tiptap = getContext('editor');
|
|
7
8
|
export let selectedIndex = 0;
|
|
8
9
|
let height = 0, elements = [];
|
|
@@ -31,10 +32,10 @@ $: if ($slashVisible) {
|
|
|
31
32
|
<Button tabindex="0" transparent small on:click={() => {
|
|
32
33
|
iframe = ''
|
|
33
34
|
$slashDetail = ''
|
|
34
|
-
}}
|
|
35
|
+
}}>{i18n('cancel')}
|
|
35
36
|
</Button>
|
|
36
37
|
<Button tabindex="0" transparent small
|
|
37
|
-
on:click={() => $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}
|
|
38
|
+
on:click={() => $tiptap.commands.insertContent({type: 'iframe', attrs: {src: iframe}})}>{i18n('insert')}
|
|
38
39
|
</Button>
|
|
39
40
|
</footer>
|
|
40
41
|
</div>
|
|
@@ -42,7 +43,7 @@ $: if ($slashVisible) {
|
|
|
42
43
|
<div class="detail">
|
|
43
44
|
<header>
|
|
44
45
|
<IconButton icon="arrow_back" on:click={() => $slashDetail = ''}/>
|
|
45
|
-
<div class="title">
|
|
46
|
+
<div class="title">Youtube</div>
|
|
46
47
|
</header>
|
|
47
48
|
<Input placeholder="url" fullWidth bind:value={iframe} autofocus
|
|
48
49
|
on:submit={() => $tiptap.commands.insertVideoPlayer({url: iframe})}/>
|
|
@@ -50,10 +51,10 @@ $: if ($slashVisible) {
|
|
|
50
51
|
<Button tabindex="0" transparent small on:click={() => {
|
|
51
52
|
iframe = ''
|
|
52
53
|
$slashDetail = ''
|
|
53
|
-
}}
|
|
54
|
+
}}>{i18n('cancel')}
|
|
54
55
|
</Button>
|
|
55
56
|
<Button tabindex="0" transparent small
|
|
56
|
-
on:click={() => $tiptap.commands.insertVideoPlayer({url: iframe})}
|
|
57
|
+
on:click={() => $tiptap.commands.insertVideoPlayer({url: iframe})}>{i18n('insert')}
|
|
57
58
|
</Button>
|
|
58
59
|
</footer>
|
|
59
60
|
</div>
|
|
@@ -66,15 +67,16 @@ $: if ($slashVisible) {
|
|
|
66
67
|
{#each list || [] as {title, subtitle, icon, command, section}, i(title)}
|
|
67
68
|
<div transition:slide={{duration: 400, easing: quartOut}}>
|
|
68
69
|
<TwoLine on:mouseenter={() => (selectedIndex = i)} on:click={() => {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
command?.($slashProps);
|
|
71
|
+
setTimeout(() => $tiptap.commands.focus());
|
|
72
|
+
}} bind:this={elements[i]} {icon} {title} subtitle={subtitle || ''}/>
|
|
72
73
|
</div>
|
|
73
74
|
{/each}
|
|
74
75
|
</div>
|
|
75
76
|
{/each}
|
|
76
77
|
{#if !$slashItems.length}
|
|
77
|
-
<div class="section"
|
|
78
|
+
<div class="section"
|
|
79
|
+
transition:slide={{duration: 400, easing: quartOut}}>{i18n('noResult')}</div>
|
|
78
80
|
{/if}
|
|
79
81
|
</List>
|
|
80
82
|
</div>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
<script>import {
|
|
1
|
+
<script>import { FloatingMenu } from "svelte-tiptap";
|
|
2
2
|
import { getContext } from "svelte";
|
|
3
|
-
import {
|
|
3
|
+
import { IconButton, List, OneLine, Tooltip } from "nunui";
|
|
4
4
|
import ToolbarButton from "./ToolbarButton.svelte";
|
|
5
|
-
import
|
|
5
|
+
import i18n from "../i18n";
|
|
6
6
|
const tiptap = getContext('editor');
|
|
7
7
|
</script>
|
|
8
8
|
|
|
@@ -11,16 +11,16 @@ const tiptap = getContext('editor');
|
|
|
11
11
|
tippyOptions={{animation:'fade', duration: [200, 50]}}>
|
|
12
12
|
<main on:mousedown={() => setTimeout(() => $tiptap.commands.focus())}>
|
|
13
13
|
<span>
|
|
14
|
-
|
|
14
|
+
{i18n('newLineInfo')}
|
|
15
15
|
</span>
|
|
16
16
|
<Tooltip bottom left xstack width="160px">
|
|
17
17
|
<IconButton size="1.2em" icon="text_fields" slot="target"/>
|
|
18
18
|
<div style="margin: -6px">
|
|
19
19
|
<List>
|
|
20
|
-
<OneLine icon="counter_1" title="
|
|
21
|
-
<OneLine icon="counter_2" title="
|
|
22
|
-
<OneLine icon="counter_3" title="
|
|
23
|
-
<OneLine icon="segment" title=
|
|
20
|
+
<OneLine icon="counter_1" title="{i18n('title')} 1" on:click={() => $tiptap.commands.setHeading({level: 1})}/>
|
|
21
|
+
<OneLine icon="counter_2" title="{i18n('title')} 2" on:click={() => $tiptap.commands.setHeading({level: 2})}/>
|
|
22
|
+
<OneLine icon="counter_3" title="{i18n('title')} 3" on:click={() => $tiptap.commands.setHeading({level: 3})}/>
|
|
23
|
+
<OneLine icon="segment" title={i18n('paragraph')} on:click={() => $tiptap.commands.setParagraph()}/>
|
|
24
24
|
</List>
|
|
25
25
|
</div>
|
|
26
26
|
</Tooltip>
|
|
@@ -7,8 +7,9 @@ import Bubble from "./Bubble.svelte";
|
|
|
7
7
|
import Floating from "./Floating.svelte";
|
|
8
8
|
import Command from "./Command.svelte";
|
|
9
9
|
import { slashItems, slashProps, slashVisible } from "../plugin/command/stores";
|
|
10
|
+
import i18n from "../i18n";
|
|
10
11
|
const san = (body) => sanitizeHtml(body, {
|
|
11
|
-
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'tiptap-file', 'lite-youtube']),
|
|
12
|
+
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'tiptap-file', 'lite-youtube', 'blockquote']),
|
|
12
13
|
allowedStyles: '*', allowedAttributes: {
|
|
13
14
|
'*': ['style', 'class'],
|
|
14
15
|
a: ['href', 'name', 'target'],
|
|
@@ -20,11 +21,11 @@ const san = (body) => sanitizeHtml(body, {
|
|
|
20
21
|
'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider'],
|
|
21
22
|
},
|
|
22
23
|
});
|
|
23
|
-
export let body = '',
|
|
24
|
+
export let body = '', editable = false, style = '', ref = null, options = {};
|
|
24
25
|
const tiptap = setContext('editor', writable(null));
|
|
25
26
|
let element, fullscreen = false, mounted = false, last = '';
|
|
26
27
|
$: ref = $tiptap;
|
|
27
|
-
$: $tiptap && $tiptap.setEditable(
|
|
28
|
+
$: $tiptap && $tiptap.setEditable(editable);
|
|
28
29
|
if (browser) {
|
|
29
30
|
onMount(() => {
|
|
30
31
|
body = last = san(body);
|
|
@@ -33,7 +34,7 @@ if (browser) {
|
|
|
33
34
|
if (!mounted)
|
|
34
35
|
return;
|
|
35
36
|
$tiptap = tt(element, body, {
|
|
36
|
-
editable:
|
|
37
|
+
editable: editable,
|
|
37
38
|
onTransaction: () => $tiptap = $tiptap,
|
|
38
39
|
...options,
|
|
39
40
|
});
|
|
@@ -82,19 +83,19 @@ function selectItem(index) {
|
|
|
82
83
|
const item = $slashItems[index];
|
|
83
84
|
if (item) {
|
|
84
85
|
let range = $slashProps.range;
|
|
85
|
-
item.command({ editor, range });
|
|
86
|
+
item.command({ editor: editable, range });
|
|
86
87
|
}
|
|
87
88
|
}
|
|
88
89
|
</script>
|
|
89
90
|
|
|
90
|
-
<main class:fullscreen class:
|
|
91
|
+
<main class:fullscreen class:editable>
|
|
91
92
|
<div class="wrapper">
|
|
92
93
|
<div bind:this={element} class="target" on:keydown|capture={handleKeydown}></div>
|
|
93
94
|
{#if !$tiptap}
|
|
94
|
-
|
|
95
|
+
{i18n('loading')}
|
|
95
96
|
{/if}
|
|
96
97
|
</div>
|
|
97
|
-
{#if
|
|
98
|
+
{#if editable}
|
|
98
99
|
<Command {selectedIndex}/>
|
|
99
100
|
<Floating/>
|
|
100
101
|
{#if $$slots.bubble}
|
|
@@ -139,12 +140,12 @@ main .wrapper {
|
|
|
139
140
|
margin-bottom: 0 !important;
|
|
140
141
|
}
|
|
141
142
|
|
|
142
|
-
.
|
|
143
|
+
.editable :global(.ProseMirror-selectednode img) {
|
|
143
144
|
transition: all 0.2s ease-in-out;
|
|
144
145
|
filter: drop-shadow(0 0 0.75rem var(--primary-light13));
|
|
145
146
|
}
|
|
146
147
|
|
|
147
|
-
.
|
|
148
|
+
.editable :global(.iframe-wrapper.ProseMirror-selectednode) {
|
|
148
149
|
outline: 3px solid var(--primary);
|
|
149
150
|
}
|
|
150
151
|
|
|
@@ -158,6 +159,9 @@ div > :global(div) :global(.ProseMirror) :global(p.is-editor-empty:first-child::
|
|
|
158
159
|
height: 0;
|
|
159
160
|
pointer-events: none;
|
|
160
161
|
}
|
|
162
|
+
div > :global(div) :global(a) {
|
|
163
|
+
cursor: pointer;
|
|
164
|
+
}
|
|
161
165
|
div > :global(div) :global(img) {
|
|
162
166
|
transition: all 0.2s ease-in-out;
|
|
163
167
|
max-width: 100%;
|
package/dist/tiptap/tiptap.js
CHANGED
|
@@ -27,7 +27,19 @@ import command from "../plugin/command";
|
|
|
27
27
|
export default (element, content, { plugins = [], ...props } = {}) => new Editor({
|
|
28
28
|
element, content, ...props,
|
|
29
29
|
extensions: [
|
|
30
|
-
CodeBlockLowlight.
|
|
30
|
+
CodeBlockLowlight.extend({
|
|
31
|
+
addKeyboardShortcuts() {
|
|
32
|
+
return {
|
|
33
|
+
...this.parent?.(),
|
|
34
|
+
'Tab': () => {
|
|
35
|
+
if (this.editor.isActive('codeBlock')) {
|
|
36
|
+
return this.editor.commands.insertContent(' ');
|
|
37
|
+
}
|
|
38
|
+
return true;
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
}).configure({ lowlight }),
|
|
31
43
|
Image,
|
|
32
44
|
Youtube,
|
|
33
45
|
StarterKit,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seorii/tiptap",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "svelte-kit sync && svelte-package",
|
|
@@ -18,21 +18,21 @@
|
|
|
18
18
|
"@sveltejs/kit": "^1.22.4",
|
|
19
19
|
"@sveltejs/package": "^2.2.0",
|
|
20
20
|
"@types/sanitize-html": "^2.9.0",
|
|
21
|
-
"@typescript-eslint/eslint-plugin": "^6.2.
|
|
22
|
-
"@typescript-eslint/parser": "^6.2.
|
|
21
|
+
"@typescript-eslint/eslint-plugin": "^6.2.1",
|
|
22
|
+
"@typescript-eslint/parser": "^6.2.1",
|
|
23
23
|
"eslint": "^8.46.0",
|
|
24
|
-
"eslint-config-prettier": "^8.
|
|
24
|
+
"eslint-config-prettier": "^8.10.0",
|
|
25
25
|
"eslint-plugin-svelte3": "^4.0.0",
|
|
26
26
|
"gh-pages": "^5.0.0",
|
|
27
|
-
"prettier": "^3.0.
|
|
27
|
+
"prettier": "^3.0.1",
|
|
28
28
|
"prettier-plugin-svelte": "^3.0.3",
|
|
29
|
-
"sass": "^1.64.
|
|
29
|
+
"sass": "^1.64.2",
|
|
30
30
|
"svelte": "^4.1.2",
|
|
31
31
|
"svelte-check": "^3.4.6",
|
|
32
32
|
"svelte-preprocess": "^5.0.4",
|
|
33
33
|
"tslib": "^2.6.1",
|
|
34
34
|
"typescript": "^5.1.6",
|
|
35
|
-
"vite": "^4.4.
|
|
35
|
+
"vite": "^4.4.8"
|
|
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
|
"lowlight": "^2.9.0",
|
|
64
|
-
"nunui": "^0.0.
|
|
64
|
+
"nunui": "^0.0.101",
|
|
65
65
|
"prosemirror-commands": "^1.5.2",
|
|
66
66
|
"prosemirror-model": "^1.19.3",
|
|
67
67
|
"prosemirror-state": "^1.4.3",
|