@seorii/tiptap 0.2.19 → 0.2.21
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 +2 -0
- package/dist/i18n/en-us/index.js +2 -0
- package/dist/i18n/ko-kr/index.d.ts +2 -0
- package/dist/i18n/ko-kr/index.js +2 -0
- package/dist/plugin/command/suggest.js +5 -3
- package/dist/tiptap/Bubble.svelte +1 -1
- package/dist/tiptap/Bubble.svelte.d.ts +1 -1
- package/dist/tiptap/Command.svelte +76 -63
- package/dist/tiptap/TipTap.svelte +2 -1
- package/package.json +1 -1
|
@@ -11,6 +11,7 @@ declare const _default: {
|
|
|
11
11
|
insert: string;
|
|
12
12
|
noResult: string;
|
|
13
13
|
default: string;
|
|
14
|
+
auto: string;
|
|
14
15
|
title: string;
|
|
15
16
|
paragraph: string;
|
|
16
17
|
link: string;
|
|
@@ -41,5 +42,6 @@ declare const _default: {
|
|
|
41
42
|
blockquoteInfo: string;
|
|
42
43
|
newLineInfo: string;
|
|
43
44
|
placeholder: string;
|
|
45
|
+
insertCode: string;
|
|
44
46
|
};
|
|
45
47
|
export default _default;
|
package/dist/i18n/en-us/index.js
CHANGED
|
@@ -11,6 +11,7 @@ export default {
|
|
|
11
11
|
insert: 'Insert',
|
|
12
12
|
noResult: 'No result',
|
|
13
13
|
default: 'default',
|
|
14
|
+
auto: 'auto',
|
|
14
15
|
title: 'Title',
|
|
15
16
|
paragraph: 'Paragraph',
|
|
16
17
|
link: 'Link',
|
|
@@ -41,4 +42,5 @@ export default {
|
|
|
41
42
|
blockquoteInfo: 'Blockquote',
|
|
42
43
|
newLineInfo: 'Press / to enter commands. Or',
|
|
43
44
|
placeholder: 'Enter content here...',
|
|
45
|
+
insertCode: 'Insert code',
|
|
44
46
|
};
|
|
@@ -11,6 +11,7 @@ declare const _default: {
|
|
|
11
11
|
insert: string;
|
|
12
12
|
noResult: string;
|
|
13
13
|
default: string;
|
|
14
|
+
auto: string;
|
|
14
15
|
title: string;
|
|
15
16
|
paragraph: string;
|
|
16
17
|
link: string;
|
|
@@ -41,5 +42,6 @@ declare const _default: {
|
|
|
41
42
|
blockquoteInfo: string;
|
|
42
43
|
newLineInfo: string;
|
|
43
44
|
placeholder: string;
|
|
45
|
+
insertCode: string;
|
|
44
46
|
};
|
|
45
47
|
export default _default;
|
package/dist/i18n/ko-kr/index.js
CHANGED
|
@@ -11,6 +11,7 @@ export default {
|
|
|
11
11
|
insert: '삽입',
|
|
12
12
|
noResult: '결과 없음',
|
|
13
13
|
default: '기본',
|
|
14
|
+
auto: '자동',
|
|
14
15
|
title: '제목',
|
|
15
16
|
paragraph: '본문',
|
|
16
17
|
link: '링크',
|
|
@@ -41,4 +42,5 @@ export default {
|
|
|
41
42
|
blockquoteInfo: '있어보이는 인용구 삽입',
|
|
42
43
|
newLineInfo: '/로 명령어 입력. 또는',
|
|
43
44
|
placeholder: '내용을 입력하세요...',
|
|
45
|
+
insertCode: '코드 삽입',
|
|
44
46
|
};
|
|
@@ -114,9 +114,11 @@ export const suggest = {
|
|
|
114
114
|
icon: 'code',
|
|
115
115
|
title: i18n('codeBlock'),
|
|
116
116
|
subtitle: i18n('codeBlockInfo'),
|
|
117
|
-
command: ({ editor, range }) => {
|
|
118
|
-
|
|
119
|
-
|
|
117
|
+
command: ({ editor, range }) => getDetail(editor, range, {
|
|
118
|
+
type: 'code', handler: (input) => {
|
|
119
|
+
editor.chain().focus().deleteRange(fixRange(editor, range - 1)).setNode('codeBlock', { language: input }).run();
|
|
120
|
+
}
|
|
121
|
+
})
|
|
120
122
|
},
|
|
121
123
|
{
|
|
122
124
|
icon: 'functions',
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<script>import { Button, IconButton, Input, List, OneLine, TwoLine } from
|
|
2
|
-
import { getContext } from
|
|
1
|
+
<script>import { Button, IconButton, Input, List, OneLine, TwoLine } from 'nunui';
|
|
2
|
+
import { getContext } from 'svelte';
|
|
3
3
|
import { slashVisible, slashItems, slashLocaltion, slashProps, slashDetail, slashSelection } from '../plugin/command/stores';
|
|
4
|
-
import { fly, slide } from
|
|
5
|
-
import { quartOut } from
|
|
6
|
-
import i18n from
|
|
4
|
+
import { fly, slide } from 'svelte/transition';
|
|
5
|
+
import { quartOut } from 'svelte/easing';
|
|
6
|
+
import i18n from '../i18n';
|
|
7
7
|
const tiptap = getContext('editor');
|
|
8
8
|
export let selectedIndex = 0;
|
|
9
9
|
let height = 0, elements = [];
|
|
@@ -14,81 +14,94 @@ $: if ($slashVisible) {
|
|
|
14
14
|
$: setTimeout(() => focus?.focus?.(), 100);
|
|
15
15
|
</script>
|
|
16
16
|
|
|
17
|
-
<svelte:window bind:innerHeight={height}/>
|
|
17
|
+
<svelte:window bind:innerHeight={height} />
|
|
18
18
|
|
|
19
19
|
{#if $slashVisible}
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
<div class="scrim" on:click={() => $slashVisible = false} />
|
|
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
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
{#if $slashDetail === 'emoji'}
|
|
25
|
+
<div class="list">
|
|
26
|
+
<List>
|
|
27
|
+
{#each $slashItems as { title, command }, i(title)}
|
|
28
|
+
<div transition:slide={{duration: 400, easing: quartOut}}>
|
|
29
|
+
<OneLine on:click={() => {
|
|
30
30
|
command?.($slashProps);
|
|
31
31
|
setTimeout(() => $tiptap.commands.focus());
|
|
32
|
-
}} bind:this={elements[i]} {title} active={selectedIndex === i}/>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
32
|
+
}} bind:this={elements[i]} {title} active={selectedIndex === i} />
|
|
33
|
+
</div>
|
|
34
|
+
{/each}
|
|
35
|
+
{#if !$slashItems.length}
|
|
36
|
+
<div class="section"
|
|
37
|
+
transition:slide={{duration: 400, easing: quartOut}}>{i18n('noResult')}</div>
|
|
38
|
+
{/if}
|
|
39
|
+
</List>
|
|
40
|
+
</div>
|
|
41
|
+
{:else if $slashDetail?.type === 'code'}
|
|
42
|
+
<div class="detail">
|
|
43
|
+
<header>
|
|
44
|
+
<IconButton icon="arrow_back" on:click={() => $slashDetail = null} />
|
|
45
|
+
<div class="title">{i18n('insertCode')}</div>
|
|
46
|
+
</header>
|
|
47
|
+
<div>
|
|
48
|
+
<Button small on:click={() => {$slashSelection?.();$slashDetail.handler(undefined);}}>{i18n('auto')}</Button>
|
|
49
|
+
{#each ['cpp', 'python', 'java'] as lang}
|
|
50
|
+
<Button small outlined on:click={() => {$slashSelection?.();$slashDetail.handler(lang);}}>{lang}</Button>
|
|
51
|
+
{/each}
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
{:else if $slashDetail}
|
|
55
|
+
<div class="detail">
|
|
56
|
+
<header>
|
|
57
|
+
<IconButton icon="arrow_back" on:click={() => $slashDetail = null} />
|
|
58
|
+
<div class="title">{$slashDetail.title}</div>
|
|
59
|
+
</header>
|
|
60
|
+
<Input placeholder={$slashDetail.placeholder} fullWidth bind:value={input} bind:input={focus}
|
|
61
|
+
on:submit={() => {
|
|
49
62
|
$slashSelection?.();
|
|
50
63
|
$slashDetail.handler(input)
|
|
51
|
-
}}/>
|
|
52
|
-
|
|
53
|
-
|
|
64
|
+
}} />
|
|
65
|
+
<footer>
|
|
66
|
+
<Button tabindex="0" transparent small on:click={() => {
|
|
54
67
|
input = ''
|
|
55
68
|
$slashDetail = null
|
|
56
69
|
}}>{i18n('cancel')}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
70
|
+
</Button>
|
|
71
|
+
<Button tabindex="0" transparent small
|
|
72
|
+
on:click={() => {
|
|
60
73
|
$slashSelection?.();
|
|
61
74
|
$slashDetail.handler(input);
|
|
62
75
|
}}>{i18n('insert')}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
+
</Button>
|
|
77
|
+
</footer>
|
|
78
|
+
</div>
|
|
79
|
+
{:else}
|
|
80
|
+
<div class="list">
|
|
81
|
+
<List>
|
|
82
|
+
{#each $slashItems as { section, list }, j(section)}
|
|
83
|
+
{@const lastCount = $slashItems.slice(0, j).reduce((acc, cur) => acc + cur.list.length, 0)}
|
|
84
|
+
<div class="section" transition:slide={{duration: 400, easing: quartOut}}>{section}</div>
|
|
85
|
+
<div transition:slide={{duration: 400, easing: quartOut}}>
|
|
86
|
+
{#each list || [] as { title, subtitle, icon, command, section }, i(title)}
|
|
87
|
+
<div transition:slide={{duration: 400, easing: quartOut}}>
|
|
88
|
+
<TwoLine on:mouseenter={() => (selectedIndex = i + lastCount)} on:click={() => {
|
|
76
89
|
command?.($slashProps);
|
|
77
90
|
setTimeout(() => $tiptap.commands.focus());
|
|
78
91
|
}} bind:this={elements[i + lastCount]} {icon} {title} subtitle={subtitle || ''}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
+
active={selectedIndex === i + lastCount} />
|
|
93
|
+
</div>
|
|
94
|
+
{/each}
|
|
95
|
+
</div>
|
|
96
|
+
{/each}
|
|
97
|
+
{#if !$slashItems.length}
|
|
98
|
+
<div class="section"
|
|
99
|
+
transition:slide={{duration: 400, easing: quartOut}}>{i18n('noResult')}</div>
|
|
100
|
+
{/if}
|
|
101
|
+
</List>
|
|
102
|
+
</div>
|
|
103
|
+
{/if}
|
|
104
|
+
</main>
|
|
92
105
|
{/if}
|
|
93
106
|
|
|
94
107
|
<style>.scrim {
|
|
@@ -25,7 +25,7 @@ export let colors = [
|
|
|
25
25
|
];
|
|
26
26
|
export let bubbleOverride = false;
|
|
27
27
|
const san = (body) => sanitizeHtml(body, {
|
|
28
|
-
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'lite-youtube', 'blockquote', 'embed', 'mark', ...allowedTags]),
|
|
28
|
+
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'lite-youtube', 'blockquote', 'embed', 'mark', 'code', ...allowedTags]),
|
|
29
29
|
allowedStyles: '*', allowedAttributes: {
|
|
30
30
|
'*': ['style', 'class'],
|
|
31
31
|
a: ['href', 'name', 'target'],
|
|
@@ -36,6 +36,7 @@ const san = (body) => sanitizeHtml(body, {
|
|
|
36
36
|
'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider'],
|
|
37
37
|
embed: ['src', 'type', 'frameborder', 'allowfullscreen'],
|
|
38
38
|
mark: ['style', 'data-color'],
|
|
39
|
+
code: ['class'],
|
|
39
40
|
...allowedAttributes
|
|
40
41
|
}
|
|
41
42
|
});
|