@seorii/tiptap 0.2.15 → 0.2.17
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.
|
@@ -7,6 +7,7 @@ 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
9
|
import i18n from "../i18n";
|
|
10
|
+
import ColorPicker from "svelte-awesome-color-picker";
|
|
10
11
|
export let colors = [];
|
|
11
12
|
const tiptap = getContext('editor');
|
|
12
13
|
let link = false, href = '', sel = '', _sel = '';
|
|
@@ -97,8 +98,18 @@ $: if ($tiptap && link) {
|
|
|
97
98
|
<IconButton size="1.2em" icon="palette" slot="target"/>
|
|
98
99
|
<div style="font-size: 0.6em">
|
|
99
100
|
<List>
|
|
100
|
-
<Button small outlined on:click={() => $tiptap.chain().focus().unsetColor().run()}>
|
|
101
|
+
<Button small outlined on:click={() => $tiptap.chain().focus().unsetColor().run()}>
|
|
102
|
+
{i18n('default')}
|
|
101
103
|
</Button>
|
|
104
|
+
<Tooltip bottom left xstack stacked="2">
|
|
105
|
+
<Button small outlined on:click={() => $tiptap.chain().focus().unsetColor().run()}
|
|
106
|
+
slot="target">
|
|
107
|
+
<Icon colorize/>
|
|
108
|
+
</Button>
|
|
109
|
+
<ColorPicker isDialog={false} on:input={(event) => {
|
|
110
|
+
$tiptap.chain().focus().setColor(event.detail.hex).run()
|
|
111
|
+
}}/>
|
|
112
|
+
</Tooltip>
|
|
102
113
|
{#each colors as color}
|
|
103
114
|
<Button small outlined
|
|
104
115
|
on:click={() => $tiptap.chain().focus().setColor(color).run()}
|
|
@@ -9,24 +9,10 @@ import Command from "./Command.svelte";
|
|
|
9
9
|
import { slashItems, slashProps, slashVisible } from "../plugin/command/stores";
|
|
10
10
|
import i18n from "../i18n";
|
|
11
11
|
import { fallbackUpload } from "../plugin/image/dragdrop";
|
|
12
|
-
const san = (body) => sanitizeHtml(body, {
|
|
13
|
-
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'lite-youtube', 'blockquote', 'embed', ...allowedTags]),
|
|
14
|
-
allowedStyles: '*', allowedAttributes: {
|
|
15
|
-
'*': ['style', 'class'],
|
|
16
|
-
a: ['href', 'name', 'target'],
|
|
17
|
-
img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading'],
|
|
18
|
-
iframe: ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
|
|
19
|
-
th: ['colwidth', 'colspan', 'rowspan'],
|
|
20
|
-
td: ['colwidth', 'colspan', 'rowspan'],
|
|
21
|
-
'tiptap-file': ['id'],
|
|
22
|
-
'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider'],
|
|
23
|
-
embed: ['src', 'type', 'frameborder', 'allowfullscreen']
|
|
24
|
-
},
|
|
25
|
-
});
|
|
26
12
|
export let body = '', editable = false, ref = null, options = {}, loaded = false;
|
|
27
13
|
export let imageUpload = fallbackUpload, style = '';
|
|
28
14
|
export let blocks = [], placeholder = i18n('placeholder');
|
|
29
|
-
export let allowedTags = [];
|
|
15
|
+
export let allowedTags = [], allowedAttributes = {};
|
|
30
16
|
export let colors = [
|
|
31
17
|
'#ef5350', //red
|
|
32
18
|
'#ec407a', //pink
|
|
@@ -37,6 +23,20 @@ export let colors = [
|
|
|
37
23
|
'#3f51b5', //blue
|
|
38
24
|
'#ab47bc', //purple
|
|
39
25
|
];
|
|
26
|
+
const san = (body) => sanitizeHtml(body, {
|
|
27
|
+
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'math-inline', 'math-node', 'iframe', 'lite-youtube', 'blockquote', 'embed', ...allowedTags]),
|
|
28
|
+
allowedStyles: '*', allowedAttributes: {
|
|
29
|
+
'*': ['style', 'class'],
|
|
30
|
+
a: ['href', 'name', 'target'],
|
|
31
|
+
img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading'],
|
|
32
|
+
iframe: ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
|
|
33
|
+
th: ['colwidth', 'colspan', 'rowspan'],
|
|
34
|
+
td: ['colwidth', 'colspan', 'rowspan'],
|
|
35
|
+
'lite-youtube': ['videoid', 'params', 'nocookie', 'title', 'provider'],
|
|
36
|
+
embed: ['src', 'type', 'frameborder', 'allowfullscreen'],
|
|
37
|
+
...allowedAttributes,
|
|
38
|
+
},
|
|
39
|
+
});
|
|
40
40
|
const tiptap = setContext('editor', writable(null));
|
|
41
41
|
let element, fullscreen = false, mounted = false, last = '';
|
|
42
42
|
$: $tiptap && $tiptap.setEditable(editable);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seorii/tiptap",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.17",
|
|
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
|
},
|