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