@seorii/tiptap 0.2.17 → 0.2.19
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.
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
<script>import { BubbleMenu } from
|
|
2
|
-
import { getContext, tick } from
|
|
1
|
+
<script>import { BubbleMenu } from 'svelte-tiptap';
|
|
2
|
+
import { getContext, tick } from 'svelte';
|
|
3
3
|
import 'tippy.js/animations/shift-away-subtle.css';
|
|
4
|
-
import ToolbarButton from
|
|
5
|
-
import { isTableAnySelected } from
|
|
6
|
-
import deleteTable from
|
|
7
|
-
import setMath from
|
|
8
|
-
import { Button, Icon, IconButton, Input, List, OneLine, Tooltip } from
|
|
9
|
-
import i18n from
|
|
10
|
-
import ColorPicker from
|
|
11
|
-
|
|
4
|
+
import ToolbarButton from './ToolbarButton.svelte';
|
|
5
|
+
import { isTableAnySelected } from '../plugin/table/util';
|
|
6
|
+
import deleteTable from '../plugin/table/deleteTable';
|
|
7
|
+
import setMath from './setMath';
|
|
8
|
+
import { Button, Icon, IconButton, Input, List, OneLine, Tooltip } from 'nunui';
|
|
9
|
+
import i18n from '../i18n';
|
|
10
|
+
import ColorPicker from 'svelte-awesome-color-picker';
|
|
11
|
+
import { isTextSelection } from '@tiptap/core';
|
|
12
|
+
export let colors = [], editable, override;
|
|
12
13
|
const tiptap = getContext('editor');
|
|
13
14
|
let link = false, href = '', sel = '', _sel = '';
|
|
14
15
|
$: selection = $tiptap?.state?.selection;
|
|
@@ -25,107 +26,124 @@ $: if ($tiptap && link) {
|
|
|
25
26
|
else if ($tiptap.getAttributes('link').href)
|
|
26
27
|
$tiptap.chain().unsetLink().run();
|
|
27
28
|
}
|
|
29
|
+
const shouldShow = ({ view, state, from, to }) => {
|
|
30
|
+
const { doc, selection } = state;
|
|
31
|
+
const { empty } = selection;
|
|
32
|
+
const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
|
|
33
|
+
return !(empty || isEmptyTextBlock);
|
|
34
|
+
};
|
|
28
35
|
</script>
|
|
29
36
|
|
|
30
37
|
{#if $tiptap}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
38
|
+
<BubbleMenu editor={$tiptap} updateDelay={50} {shouldShow}
|
|
39
|
+
tippyOptions={{moveTransition: 'transform 0.2s cubic-bezier(1,.5,0,.85)', animation:'shift-away-subtle', duration: [200, 50]}}>
|
|
40
|
+
{#if override}
|
|
41
|
+
<main>
|
|
42
|
+
<slot name="override" />
|
|
43
|
+
</main>
|
|
44
|
+
{:else}
|
|
45
|
+
<main>
|
|
46
|
+
{#if link}
|
|
47
|
+
<div class="link">
|
|
48
|
+
<p>
|
|
49
|
+
<Icon icon="link" />
|
|
50
|
+
{i18n('link')}
|
|
51
|
+
</p>
|
|
52
|
+
<Input placeholder="url" fullWidth bind:value={href} autofocus />
|
|
53
|
+
<div>
|
|
54
|
+
<Button tabindex="0" transparent small on:click={() => {
|
|
46
55
|
href = ''
|
|
47
56
|
$tiptap.chain().focus().unsetLink().run()
|
|
48
57
|
tick().then(() => link = false)
|
|
49
58
|
}}>{i18n('delete')}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
59
|
+
</Button>
|
|
60
|
+
<Button tabindex="0" transparent small
|
|
61
|
+
on:click={() => link = false}>{i18n('close')}</Button>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
{:else if table}
|
|
65
|
+
{#if table.length > 1}
|
|
66
|
+
<ToolbarButton icon="cell_merge" handler={() => $tiptap.commands.mergeCells()} />
|
|
67
|
+
{:else}
|
|
68
|
+
<ToolbarButton icon="splitscreen_left" handler={() => $tiptap.commands.splitCell()} />
|
|
69
|
+
{/if}
|
|
70
|
+
<ToolbarButton icon="keyboard_double_arrow_left"
|
|
71
|
+
handler={() => $tiptap.chain().focus().addColumnBefore().run()} />
|
|
72
|
+
<ToolbarButton icon="keyboard_double_arrow_right"
|
|
73
|
+
handler={() => $tiptap.chain().focus().addColumnAfter().run()} />
|
|
74
|
+
<ToolbarButton icon="keyboard_double_arrow_up"
|
|
75
|
+
handler={() => $tiptap.chain().focus().addRowBefore().run()} />
|
|
76
|
+
<ToolbarButton icon="keyboard_double_arrow_down"
|
|
77
|
+
handler={() => $tiptap.chain().focus().addRowAfter().run()} />
|
|
78
|
+
<ToolbarButton icon="close" handler={() => deleteTable({editor: $tiptap})} />
|
|
79
|
+
{:else}
|
|
80
|
+
{#if editable}
|
|
81
|
+
<Tooltip bottom left xstack width="160px">
|
|
82
|
+
<IconButton size="1.2em" icon="format_align_left" slot="target" />
|
|
83
|
+
<div style="margin: -6px;font-size: 0.6em">
|
|
84
|
+
<List>
|
|
85
|
+
<OneLine icon="format_align_left" title={i18n('alignLeft')}
|
|
86
|
+
on:click={() => $tiptap.chain().focus().setTextAlign('left').run()}
|
|
87
|
+
active={$tiptap.isActive({ textAlign: 'left' })} />
|
|
88
|
+
<OneLine icon="format_align_center" title={i18n('alignCenter')}
|
|
89
|
+
on:click={() => $tiptap.chain().focus().setTextAlign('center').run()}
|
|
90
|
+
active={$tiptap.isActive({ textAlign: 'center' })} />
|
|
91
|
+
<OneLine icon="format_align_right" title={i18n('alignRight')}
|
|
92
|
+
on:click={() => $tiptap.chain().focus().setTextAlign('right').run()}
|
|
93
|
+
active={$tiptap.isActive({ textAlign: 'right' })} />
|
|
94
|
+
<OneLine icon="format_align_justify" title={i18n('alignJustify')}
|
|
95
|
+
on:click={() => $tiptap.chain().focus().setTextAlign('justify').run()}
|
|
96
|
+
active={$tiptap.isActive({ textAlign: 'justify' })} />
|
|
97
|
+
</List>
|
|
98
|
+
</div>
|
|
99
|
+
</Tooltip>
|
|
100
|
+
{/if}
|
|
101
|
+
<ToolbarButton icon="format_bold" prop="bold" />
|
|
102
|
+
<ToolbarButton icon="format_italic" prop="italic" />
|
|
103
|
+
<ToolbarButton icon="format_strikethrough" prop="strike" />
|
|
104
|
+
<ToolbarButton icon="format_underlined" prop="underline" />
|
|
105
|
+
<ToolbarButton icon="superscript" prop="superscript" />
|
|
106
|
+
<ToolbarButton icon="subscript" prop="subscript" />
|
|
107
|
+
<ToolbarButton icon="border_color" prop="highlight" />
|
|
108
|
+
{#if editable}
|
|
109
|
+
<ToolbarButton icon="functions" handler={() => setMath($tiptap)} />
|
|
110
|
+
{/if}
|
|
111
|
+
<Tooltip bottom left xstack>
|
|
112
|
+
<IconButton size="1.2em" icon="palette" slot="target" />
|
|
113
|
+
<div style="font-size: 0.6em">
|
|
114
|
+
<List>
|
|
115
|
+
<Button small outlined on:click={() => $tiptap.chain().focus().unsetColor().run()}>
|
|
116
|
+
{i18n('default')}
|
|
117
|
+
</Button>
|
|
118
|
+
<Tooltip bottom left xstack stacked="2">
|
|
119
|
+
<Button small outlined on:click={() => $tiptap.chain().focus().unsetColor().run()}
|
|
120
|
+
slot="target">
|
|
121
|
+
<Icon colorize />
|
|
122
|
+
</Button>
|
|
123
|
+
<ColorPicker isDialog={false} on:input={(event) => {
|
|
110
124
|
$tiptap.chain().focus().setColor(event.detail.hex).run()
|
|
111
|
-
}}/>
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
125
|
+
}} />
|
|
126
|
+
</Tooltip>
|
|
127
|
+
{#each colors as color}
|
|
128
|
+
<Button small outlined
|
|
129
|
+
on:click={() => $tiptap.chain().focus().setColor(color).run()}
|
|
130
|
+
style="margin-right:4px">
|
|
131
|
+
<span
|
|
132
|
+
style="width: 20px; height: 16px; background: {color}; border-radius: 4px;display: inline-block;margin-bottom: -2px"></span>
|
|
133
|
+
</Button>
|
|
134
|
+
{/each}
|
|
135
|
+
</List>
|
|
136
|
+
</div>
|
|
137
|
+
</Tooltip>
|
|
138
|
+
{#if editable}
|
|
139
|
+
<ToolbarButton icon="code" prop="code" />
|
|
140
|
+
<ToolbarButton icon="link" prop="link" handler={() => link = true} />
|
|
141
|
+
{/if}
|
|
142
|
+
{/if}
|
|
143
|
+
<slot name="bubble" />
|
|
144
|
+
</main>
|
|
145
|
+
{/if}
|
|
146
|
+
</BubbleMenu>
|
|
129
147
|
{/if}
|
|
130
148
|
|
|
131
149
|
<style>main {
|
|
@@ -3,12 +3,15 @@ import 'tippy.js/animations/shift-away-subtle.css';
|
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
colors?: any[] | undefined;
|
|
6
|
+
editable: any;
|
|
7
|
+
override: any;
|
|
6
8
|
};
|
|
7
9
|
events: {
|
|
8
10
|
[evt: string]: CustomEvent<any>;
|
|
9
11
|
};
|
|
10
12
|
slots: {
|
|
11
|
-
|
|
13
|
+
override: {};
|
|
14
|
+
bubble: {};
|
|
12
15
|
};
|
|
13
16
|
};
|
|
14
17
|
export type BubbleProps = typeof __propDef.props;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
<script>import { browser } from
|
|
1
|
+
<script>import { browser } from '$app/environment';
|
|
2
2
|
import { beforeUpdate, onMount, setContext } from 'svelte';
|
|
3
|
-
import { writable } from
|
|
3
|
+
import { writable } from 'svelte/store';
|
|
4
4
|
import sanitizeHtml from 'sanitize-html';
|
|
5
|
-
import
|
|
6
|
-
import Bubble from
|
|
7
|
-
import Floating from
|
|
8
|
-
import Command from
|
|
9
|
-
import { slashItems, slashProps, slashVisible } from
|
|
10
|
-
import i18n from
|
|
11
|
-
import { fallbackUpload } from
|
|
12
|
-
export let body = '', editable = false, ref = null, options = {}, loaded = false;
|
|
5
|
+
import '@seorii/prosemirror-math/style.css';
|
|
6
|
+
import Bubble from './Bubble.svelte';
|
|
7
|
+
import Floating from './Floating.svelte';
|
|
8
|
+
import Command from './Command.svelte';
|
|
9
|
+
import { slashItems, slashProps, slashVisible } from '../plugin/command/stores';
|
|
10
|
+
import i18n from '../i18n';
|
|
11
|
+
import { fallbackUpload } from '../plugin/image/dragdrop';
|
|
12
|
+
export let body = '', editable = false, mark = false, ref = null, options = {}, loaded = false;
|
|
13
13
|
export let imageUpload = fallbackUpload, style = '';
|
|
14
14
|
export let blocks = [], placeholder = i18n('placeholder');
|
|
15
15
|
export let allowedTags = [], allowedAttributes = {};
|
|
@@ -21,10 +21,11 @@ export let colors = [
|
|
|
21
21
|
'#8bc34a', //green
|
|
22
22
|
'#2196f3', //blue
|
|
23
23
|
'#3f51b5', //blue
|
|
24
|
-
'#ab47bc'
|
|
24
|
+
'#ab47bc' //purple
|
|
25
25
|
];
|
|
26
|
+
export let bubbleOverride = false;
|
|
26
27
|
const san = (body) => sanitizeHtml(body, {
|
|
27
|
-
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'lite-youtube', 'blockquote', 'embed', ...allowedTags]),
|
|
28
|
+
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'lite-youtube', 'blockquote', 'embed', 'mark', ...allowedTags]),
|
|
28
29
|
allowedStyles: '*', allowedAttributes: {
|
|
29
30
|
'*': ['style', 'class'],
|
|
30
31
|
a: ['href', 'name', 'target'],
|
|
@@ -34,8 +35,9 @@ const san = (body) => sanitizeHtml(body, {
|
|
|
34
35
|
td: ['colwidth', 'colspan', 'rowspan'],
|
|
35
36
|
'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider'],
|
|
36
37
|
embed: ['src', 'type', 'frameborder', 'allowfullscreen'],
|
|
37
|
-
|
|
38
|
-
|
|
38
|
+
mark: ['style', 'data-color'],
|
|
39
|
+
...allowedAttributes
|
|
40
|
+
}
|
|
39
41
|
});
|
|
40
42
|
const tiptap = setContext('editor', writable(null));
|
|
41
43
|
let element, fullscreen = false, mounted = false, last = '';
|
|
@@ -46,18 +48,18 @@ if (browser) {
|
|
|
46
48
|
onMount(() => {
|
|
47
49
|
body = last = san(body);
|
|
48
50
|
mounted = true;
|
|
49
|
-
Promise.all([import('./tiptap'), import(
|
|
51
|
+
Promise.all([import('./tiptap'), import('@justinribeiro/lite-youtube')]).then(([{ default: tt }]) => {
|
|
50
52
|
if (!mounted)
|
|
51
53
|
return;
|
|
52
54
|
ref = $tiptap = tt(element, body, {
|
|
53
55
|
placeholder,
|
|
54
56
|
editable: editable,
|
|
55
57
|
onTransaction: () => ref = $tiptap = $tiptap,
|
|
56
|
-
...options
|
|
58
|
+
...options
|
|
57
59
|
});
|
|
58
60
|
$tiptap.on('update', ({ editor: tiptap }) => {
|
|
59
61
|
let content = tiptap.getHTML(), json = tiptap.getJSON().content;
|
|
60
|
-
if (Array.isArray(json) && json.length === 1 && json[0].type === 'paragraph' && !json[0].hasOwnProperty(
|
|
62
|
+
if (Array.isArray(json) && json.length === 1 && json[0].type === 'paragraph' && !json[0].hasOwnProperty('content'))
|
|
61
63
|
content = null;
|
|
62
64
|
body = last = content;
|
|
63
65
|
});
|
|
@@ -110,27 +112,26 @@ function selectItem(index) {
|
|
|
110
112
|
</script>
|
|
111
113
|
|
|
112
114
|
<main class:fullscreen class:editable>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
{/if}
|
|
115
|
+
<div class="wrapper">
|
|
116
|
+
<div bind:this={element} class="target" on:keydown|capture={handleKeydown}></div>
|
|
117
|
+
{#if !$tiptap}
|
|
118
|
+
{#if $$slots.preloader}
|
|
119
|
+
<slot name="preloader" />
|
|
120
|
+
{:else}
|
|
121
|
+
{i18n('loading')}
|
|
122
|
+
{/if}
|
|
123
|
+
{/if}
|
|
124
|
+
</div>
|
|
125
|
+
{#if editable}
|
|
126
|
+
<Command {selectedIndex} />
|
|
127
|
+
<Floating />
|
|
128
|
+
{/if}
|
|
129
|
+
{#if editable || mark}
|
|
130
|
+
<Bubble {colors} {editable} override={bubbleOverride}>
|
|
131
|
+
<slot name="bubble" />
|
|
132
|
+
<slot name="bubbleOverride" slot="override" />
|
|
133
|
+
</Bubble>
|
|
134
|
+
{/if}
|
|
134
135
|
</main>
|
|
135
136
|
|
|
136
137
|
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import
|
|
3
|
-
import type { UploadFn } from
|
|
2
|
+
import '@seorii/prosemirror-math/style.css';
|
|
3
|
+
import type { UploadFn } from '../plugin/image/dragdrop';
|
|
4
4
|
declare const __propDef: {
|
|
5
5
|
props: {
|
|
6
6
|
body?: string | undefined;
|
|
7
7
|
editable?: boolean | undefined;
|
|
8
|
+
mark?: boolean | undefined;
|
|
8
9
|
ref?: null | undefined;
|
|
9
10
|
options?: {} | undefined;
|
|
10
11
|
loaded?: boolean | undefined;
|
|
@@ -15,6 +16,7 @@ declare const __propDef: {
|
|
|
15
16
|
allowedTags?: string[] | undefined;
|
|
16
17
|
allowedAttributes?: any;
|
|
17
18
|
colors?: string[] | undefined;
|
|
19
|
+
bubbleOverride?: boolean | undefined;
|
|
18
20
|
};
|
|
19
21
|
events: {
|
|
20
22
|
[evt: string]: CustomEvent<any>;
|
|
@@ -22,6 +24,9 @@ declare const __propDef: {
|
|
|
22
24
|
slots: {
|
|
23
25
|
preloader: {};
|
|
24
26
|
bubble: {};
|
|
27
|
+
bubbleOverride: {
|
|
28
|
+
slot: string;
|
|
29
|
+
};
|
|
25
30
|
};
|
|
26
31
|
};
|
|
27
32
|
export type TipTapProps = typeof __propDef.props;
|