@kungal/editor-vue 0.32.1 → 0.33.0
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/CHANGELOG.md +50 -0
- package/dist/components/KunEditor.vue.d.ts +1 -1
- package/dist/components/KunEditor.vue.d.ts.map +1 -1
- package/dist/components/SelectionTooltip.vue.d.ts.map +1 -1
- package/dist/index.js +374 -305
- package/dist/toolbar-icons.d.ts +2 -0
- package/dist/toolbar-icons.d.ts.map +1 -1
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -1,68 +1,68 @@
|
|
|
1
|
-
import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, guardReactiveProps as c, inject as l, nextTick as u, normalizeProps as d, onBeforeUnmount as f, onMounted as p, openBlock as m, provide as h, reactive as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x,
|
|
2
|
-
import { Milkdown as
|
|
3
|
-
import { ProsemirrorAdapterProvider as
|
|
4
|
-
import { parseHeadings as
|
|
5
|
-
import { Editor as
|
|
6
|
-
import { listenerCtx as
|
|
7
|
-
import { SlashProvider as
|
|
8
|
-
import { TooltipProvider as
|
|
9
|
-
import { $prose as
|
|
10
|
-
import { Plugin as
|
|
11
|
-
import { createCodeBlockCommand as
|
|
12
|
-
import { createKunEditorPlugins as
|
|
13
|
-
import { strikethroughSchema as
|
|
14
|
-
import { Annotation as
|
|
15
|
-
import { EditorView as
|
|
16
|
-
import { markdown as
|
|
17
|
-
import { basicSetup as
|
|
1
|
+
import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, guardReactiveProps as c, inject as l, nextTick as u, normalizeProps as d, onBeforeUnmount as f, onMounted as p, openBlock as m, provide as h, reactive as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, vModelText as S, vShow as C, watch as w, withCtx as T, withDirectives as E, withKeys as D, withModifiers as O } from "vue";
|
|
2
|
+
import { Milkdown as k, MilkdownProvider as A, useEditor as j, useInstance as M } from "@milkdown/vue";
|
|
3
|
+
import { ProsemirrorAdapterProvider as N, usePluginViewContext as ee, usePluginViewFactory as P } from "@prosemirror-adapter/vue";
|
|
4
|
+
import { parseHeadings as F, parseHeadings as I } from "@kungal/editor-core";
|
|
5
|
+
import { Editor as L, defaultValueCtx as te, editorViewCtx as R, editorViewOptionsCtx as ne, rootCtx as z } from "@milkdown/kit/core";
|
|
6
|
+
import { listenerCtx as re } from "@milkdown/kit/plugin/listener";
|
|
7
|
+
import { SlashProvider as ie, slashFactory as B } from "@milkdown/kit/plugin/slash";
|
|
8
|
+
import { TooltipProvider as ae, tooltipFactory as V } from "@milkdown/kit/plugin/tooltip";
|
|
9
|
+
import { $prose as H, callCommand as U, replaceAll as W } from "@milkdown/kit/utils";
|
|
10
|
+
import { Plugin as oe, PluginKey as se, TextSelection as G } from "@milkdown/kit/prose/state";
|
|
11
|
+
import { createCodeBlockCommand as K, emphasisSchema as ce, inlineCodeSchema as le, insertHrCommand as ue, insertImageCommand as de, linkSchema as fe, strongSchema as pe, toggleEmphasisCommand as me, toggleInlineCodeCommand as he, toggleStrongCommand as ge, wrapInBlockquoteCommand as _e, wrapInBulletListCommand as ve, wrapInOrderedListCommand as ye } from "@milkdown/kit/preset/commonmark";
|
|
12
|
+
import { createKunEditorPlugins as be, insertKunSpoilerCommand as xe, insertLinkCommand as q, insertMentionCommand as Se, insertQuoteCommand as Ce, kunCM as we, mentionId as Te, setHeadingCommand as Ee, startImageUpload as De } from "@kungal/editor-core/preset";
|
|
13
|
+
import { strikethroughSchema as Oe, toggleStrikethroughCommand as ke } from "@milkdown/kit/preset/gfm";
|
|
14
|
+
import { Annotation as Ae, EditorState as je } from "@codemirror/state";
|
|
15
|
+
import { EditorView as J } from "@codemirror/view";
|
|
16
|
+
import { markdown as Me } from "@codemirror/lang-markdown";
|
|
17
|
+
import { basicSetup as Ne } from "codemirror";
|
|
18
18
|
//#region src/active-marks.ts
|
|
19
|
-
var
|
|
19
|
+
var Pe = [
|
|
20
20
|
"bold",
|
|
21
21
|
"italic",
|
|
22
22
|
"strike",
|
|
23
23
|
"code"
|
|
24
|
-
],
|
|
25
|
-
bold:
|
|
26
|
-
italic:
|
|
27
|
-
strike:
|
|
28
|
-
code:
|
|
29
|
-
},
|
|
24
|
+
], Fe = {
|
|
25
|
+
bold: pe,
|
|
26
|
+
italic: ce,
|
|
27
|
+
strike: Oe,
|
|
28
|
+
code: le
|
|
29
|
+
}, Ie = () => ({
|
|
30
30
|
bold: !1,
|
|
31
31
|
italic: !1,
|
|
32
32
|
strike: !1,
|
|
33
33
|
code: !1
|
|
34
|
-
}),
|
|
35
|
-
let { from: n, $from: r, to: i, empty: a } = e.selection, o =
|
|
36
|
-
for (let s of
|
|
37
|
-
let c =
|
|
34
|
+
}), Y = Object.freeze(Ie()), Le = (e, t) => {
|
|
35
|
+
let { from: n, $from: r, to: i, empty: a } = e.selection, o = Ie();
|
|
36
|
+
for (let s of Pe) {
|
|
37
|
+
let c = Fe[s].type(t);
|
|
38
38
|
o[s] = a ? !!c.isInSet(e.storedMarks ?? r.marks()) : e.doc.rangeHasMark(n, i, c);
|
|
39
39
|
}
|
|
40
40
|
return o;
|
|
41
|
-
},
|
|
42
|
-
let r =
|
|
43
|
-
for (let e of
|
|
44
|
-
},
|
|
45
|
-
key:
|
|
46
|
-
view: (n) => (
|
|
47
|
-
|
|
41
|
+
}, Re = (e, t, n) => {
|
|
42
|
+
let r = Le(e, t);
|
|
43
|
+
for (let e of Pe) n[e] !== r[e] && (n[e] = r[e]);
|
|
44
|
+
}, ze = new se("KUN_ACTIVE_MARKS"), Be = (e) => H((t) => new oe({
|
|
45
|
+
key: ze,
|
|
46
|
+
view: (n) => (Re(n.state, t, e), { update(n) {
|
|
47
|
+
Re(n.state, t, e);
|
|
48
48
|
} })
|
|
49
|
-
})), X = Symbol("kun-editor-context"),
|
|
49
|
+
})), X = Symbol("kun-editor-context"), Ve = [
|
|
50
50
|
"data-active",
|
|
51
51
|
"onMousedown",
|
|
52
52
|
"onMouseenter"
|
|
53
|
-
],
|
|
53
|
+
], He = ["src", "alt"], Ue = {
|
|
54
54
|
key: 1,
|
|
55
55
|
class: "kun-mention-dropdown__avatar kun-mention-dropdown__avatar--fallback"
|
|
56
|
-
},
|
|
56
|
+
}, We = { class: "kun-mention-dropdown__name" }, Ge = {
|
|
57
57
|
key: 1,
|
|
58
58
|
class: "kun-mention-dropdown__hint"
|
|
59
|
-
},
|
|
59
|
+
}, Ke = {
|
|
60
60
|
key: 2,
|
|
61
61
|
class: "kun-mention-dropdown__hint"
|
|
62
|
-
},
|
|
62
|
+
}, qe = {
|
|
63
63
|
key: 3,
|
|
64
64
|
class: "kun-mention-dropdown__hint"
|
|
65
|
-
},
|
|
65
|
+
}, Je = /* @__PURE__ */ s({
|
|
66
66
|
__name: "MentionDropdown",
|
|
67
67
|
setup(n) {
|
|
68
68
|
let r = /(?:^|\s)@([^\s@]{0,30})$/, o = l(X), s = o?.adapters.searchMentionUsers, c = t(() => (o?.locale ?? "zh-cn").toLowerCase().startsWith("en")), u = t(() => c.value ? {
|
|
@@ -73,51 +73,51 @@ var Ae = [
|
|
|
73
73
|
searching: "搜索中…",
|
|
74
74
|
empty: "无匹配用户",
|
|
75
75
|
prompt: "输入用户名以搜索"
|
|
76
|
-
}), { view: d, prevState: h } =
|
|
77
|
-
A &&= (clearTimeout(A), null), S.value = "",
|
|
78
|
-
},
|
|
76
|
+
}), { view: d, prevState: h } = ee(), g = _(null), y, x = _(!1), S = _(""), C = _([]), T = _(0), E = _(!1), D = null, k = 0, A = null, j = () => {
|
|
77
|
+
A &&= (clearTimeout(A), null), S.value = "", C.value = [], T.value = 0, E.value = !1, D = null;
|
|
78
|
+
}, M = (e) => {
|
|
79
79
|
if (A &&= (clearTimeout(A), null), !e || !s) {
|
|
80
|
-
|
|
80
|
+
C.value = [], E.value = !1;
|
|
81
81
|
return;
|
|
82
82
|
}
|
|
83
|
-
|
|
83
|
+
E.value = !0, A = setTimeout(async () => {
|
|
84
84
|
let t = ++k, n = [];
|
|
85
85
|
try {
|
|
86
86
|
n = await s(e);
|
|
87
87
|
} catch {
|
|
88
88
|
n = [];
|
|
89
89
|
}
|
|
90
|
-
t === k && (
|
|
90
|
+
t === k && (C.value = n ?? [], T.value = 0, E.value = !1);
|
|
91
91
|
}, 180);
|
|
92
|
-
},
|
|
92
|
+
}, N = (e) => {
|
|
93
93
|
let { selection: t } = e.state;
|
|
94
94
|
if (!t.empty) return null;
|
|
95
95
|
let { $from: n } = t, i = n.parent.textBetween(Math.max(0, n.parentOffset - 100), n.parentOffset, void 0, "").match(r);
|
|
96
96
|
return i ? i[1] ?? "" : null;
|
|
97
|
-
},
|
|
98
|
-
let t =
|
|
97
|
+
}, P = (e) => {
|
|
98
|
+
let t = N(e);
|
|
99
99
|
if (t === null) return !1;
|
|
100
100
|
let n = e.state.selection.$from.pos;
|
|
101
|
-
return
|
|
101
|
+
return D = {
|
|
102
102
|
from: n - (t.length + 1),
|
|
103
103
|
to: n
|
|
104
|
-
}, t !== S.value && (S.value = t,
|
|
104
|
+
}, t !== S.value && (S.value = t, M(t)), !0;
|
|
105
105
|
}, F = (e) => {
|
|
106
106
|
let t = d.value;
|
|
107
|
-
if (!t || !
|
|
108
|
-
let n = t.state.schema.nodes[
|
|
107
|
+
if (!t || !D) return;
|
|
108
|
+
let n = t.state.schema.nodes[Te];
|
|
109
109
|
if (!n) return;
|
|
110
110
|
let r = n.create({
|
|
111
111
|
userId: e.id,
|
|
112
112
|
name: e.name
|
|
113
|
-
}), { from: i, to: a } =
|
|
114
|
-
o.insertText(" ", s), o.setSelection(
|
|
113
|
+
}), { from: i, to: a } = D, o = t.state.tr.replaceWith(i, a, r), s = i + r.nodeSize;
|
|
114
|
+
o.insertText(" ", s), o.setSelection(G.create(o.doc, s + 1)), t.dispatch(o.scrollIntoView()), t.focus(), y.hide();
|
|
115
115
|
}, I = (e) => {
|
|
116
|
-
if (!x.value || !
|
|
116
|
+
if (!x.value || !C.value.length) {
|
|
117
117
|
x.value && e.key === "Escape" && (e.preventDefault(), y.hide());
|
|
118
118
|
return;
|
|
119
119
|
}
|
|
120
|
-
let t =
|
|
120
|
+
let t = C.value.length - 1;
|
|
121
121
|
switch (e.key) {
|
|
122
122
|
case "ArrowDown":
|
|
123
123
|
e.preventDefault(), e.stopPropagation(), T.value = T.value >= t ? 0 : T.value + 1;
|
|
@@ -127,7 +127,7 @@ var Ae = [
|
|
|
127
127
|
break;
|
|
128
128
|
case "Enter":
|
|
129
129
|
case "Tab": {
|
|
130
|
-
let t =
|
|
130
|
+
let t = C.value[T.value];
|
|
131
131
|
t && (e.preventDefault(), e.stopPropagation(), F(t));
|
|
132
132
|
break;
|
|
133
133
|
}
|
|
@@ -137,17 +137,17 @@ var Ae = [
|
|
|
137
137
|
}
|
|
138
138
|
};
|
|
139
139
|
return p(() => {
|
|
140
|
-
y = new
|
|
140
|
+
y = new ie({
|
|
141
141
|
content: g.value,
|
|
142
142
|
trigger: "@",
|
|
143
|
-
shouldShow:
|
|
143
|
+
shouldShow: P,
|
|
144
144
|
debounce: 0
|
|
145
145
|
}), y.onShow = () => {
|
|
146
146
|
x.value = !0;
|
|
147
147
|
}, y.onHide = () => {
|
|
148
148
|
x.value = !1, j();
|
|
149
149
|
}, y.update(d.value, h.value), window.addEventListener("keydown", I, !0);
|
|
150
|
-
}),
|
|
150
|
+
}), w([d, h], () => {
|
|
151
151
|
y?.update(d.value, h.value);
|
|
152
152
|
}), f(() => {
|
|
153
153
|
A && clearTimeout(A), window.removeEventListener("keydown", I, !0), y?.destroy();
|
|
@@ -156,19 +156,19 @@ var Ae = [
|
|
|
156
156
|
ref: g,
|
|
157
157
|
class: "kun-mention-dropdown",
|
|
158
158
|
"data-show": "false"
|
|
159
|
-
}, [
|
|
159
|
+
}, [C.value.length ? (m(!0), i(e, { key: 0 }, v(C.value, (e, t) => (m(), i("button", {
|
|
160
160
|
key: e.id,
|
|
161
161
|
type: "button",
|
|
162
162
|
class: "kun-mention-dropdown__item",
|
|
163
163
|
"data-active": t === T.value,
|
|
164
|
-
onMousedown:
|
|
164
|
+
onMousedown: O((t) => F(e), ["prevent"]),
|
|
165
165
|
onMouseenter: (e) => T.value = t
|
|
166
166
|
}, [e.avatar ? (m(), i("img", {
|
|
167
167
|
key: 0,
|
|
168
168
|
src: e.avatar,
|
|
169
169
|
alt: e.name,
|
|
170
170
|
class: "kun-mention-dropdown__avatar"
|
|
171
|
-
}, null, 8,
|
|
171
|
+
}, null, 8, He)) : (m(), i("span", Ue, b(e.name.charAt(0)), 1)), a("span", We, b(e.name), 1)], 40, Ve))), 128)) : E.value ? (m(), i("div", Ge, b(u.value.searching), 1)) : S.value ? (m(), i("div", Ke, b(u.value.empty), 1)) : (m(), i("div", qe, b(u.value.prompt), 1))], 512));
|
|
172
172
|
}
|
|
173
173
|
}), Z = (e) => `<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${e}</svg>`, Q = (e, t = 13) => `<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><text x="12" y="12" dominant-baseline="central" text-anchor="middle" font-size="${t}" font-weight="700" font-family="ui-sans-serif, system-ui, sans-serif" fill="currentColor">${e}</text></svg>`, $ = {
|
|
174
174
|
bold: Z("<path d=\"M6 4h8a4 4 0 0 1 0 8H6z\"/><path d=\"M6 12h9a4 4 0 0 1 0 8H6z\"/>"),
|
|
@@ -187,63 +187,96 @@ var Ae = [
|
|
|
187
187
|
spoiler: Z("<path d=\"M9.9 4.24A9.1 9.1 0 0 1 12 4c7 0 10 8 10 8a13.2 13.2 0 0 1-1.67 2.68\"/><path d=\"M6.6 6.6A13.5 13.5 0 0 0 2 12s3 8 10 8a9.7 9.7 0 0 0 5.4-1.6\"/><line x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\"/>"),
|
|
188
188
|
link: Z("<path d=\"M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/><path d=\"M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/>"),
|
|
189
189
|
latex: Q("Σ", 15),
|
|
190
|
+
check: Z("<path d=\"m5 13 4 4L19 7\"/>"),
|
|
191
|
+
close: Z("<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>"),
|
|
190
192
|
smile: Z("<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/>")
|
|
191
|
-
},
|
|
193
|
+
}, Ye = ["data-mode"], Xe = ["placeholder", "aria-label"], Ze = ["title", "aria-label"], Qe = ["innerHTML"], $e = ["title", "aria-label"], et = ["innerHTML"], tt = {
|
|
192
194
|
key: 0,
|
|
193
195
|
class: "kun-editor__toolbar-divider",
|
|
194
196
|
"aria-hidden": "true"
|
|
195
|
-
},
|
|
197
|
+
}, nt = [
|
|
196
198
|
"title",
|
|
197
199
|
"aria-label",
|
|
198
200
|
"aria-pressed",
|
|
199
201
|
"data-active",
|
|
200
202
|
"onMousedown"
|
|
201
|
-
],
|
|
203
|
+
], rt = ["innerHTML"], it = /* @__PURE__ */ s({
|
|
202
204
|
__name: "SelectionTooltip",
|
|
203
205
|
setup(n) {
|
|
204
|
-
let { view: r, prevState: o } =
|
|
205
|
-
|
|
206
|
-
}, b = async () => {
|
|
207
|
-
let e = r.value, { from: t, to: n } = e?.state.selection ?? {
|
|
208
|
-
from: 0,
|
|
209
|
-
to: 0
|
|
210
|
-
}, i = e ? e.state.doc.textBetween(t, n, " ") : "", a = c?.adapters.linkPrompt, o = (a ? await a({ text: i }) : window.prompt(d.value ? "Link URL" : "链接 URL"))?.trim();
|
|
211
|
-
o && y(_e.key, { href: o });
|
|
212
|
-
}, S = t(() => {
|
|
213
|
-
let e = d.value;
|
|
206
|
+
let { view: r, prevState: o } = ee(), [, s] = M(), c = l(X), d = c?.activeMarks ?? Y, h = t(() => (c?.locale ?? "zh-cn").toLowerCase().startsWith("en")), g = t(() => {
|
|
207
|
+
let e = h.value;
|
|
214
208
|
return {
|
|
215
|
-
bold:
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
title: e ? "Italic" : "斜体",
|
|
224
|
-
run: () => y(le.key),
|
|
225
|
-
mark: "italic"
|
|
226
|
-
},
|
|
227
|
-
strike: {
|
|
228
|
-
svg: $.strike,
|
|
229
|
-
title: e ? "Strikethrough" : "删除线",
|
|
230
|
-
run: () => y(Te.key),
|
|
231
|
-
mark: "strike"
|
|
232
|
-
},
|
|
233
|
-
code: {
|
|
234
|
-
svg: $.code,
|
|
235
|
-
title: e ? "Inline code" : "行内代码",
|
|
236
|
-
run: () => y(ue.key),
|
|
237
|
-
mark: "code"
|
|
238
|
-
},
|
|
239
|
-
link: {
|
|
240
|
-
svg: $.link,
|
|
241
|
-
title: e ? "Link" : "链接",
|
|
242
|
-
run: b
|
|
243
|
-
}
|
|
209
|
+
bold: e ? "Bold" : "加粗",
|
|
210
|
+
italic: e ? "Italic" : "斜体",
|
|
211
|
+
strike: e ? "Strikethrough" : "删除线",
|
|
212
|
+
code: e ? "Inline code" : "行内代码",
|
|
213
|
+
link: e ? "Link" : "链接",
|
|
214
|
+
linkUrl: e ? "Link URL" : "链接 URL",
|
|
215
|
+
apply: e ? "Apply" : "确定",
|
|
216
|
+
cancel: e ? "Cancel" : "取消"
|
|
244
217
|
};
|
|
245
|
-
}),
|
|
246
|
-
|
|
218
|
+
}), y = _(null), b, C = (e, t) => {
|
|
219
|
+
s()?.action(U(e, t));
|
|
220
|
+
}, T = _(!1), k = _(""), A = _(null), j = () => {
|
|
221
|
+
let e = "";
|
|
222
|
+
return s()?.action((t) => {
|
|
223
|
+
let n = r.value?.state;
|
|
224
|
+
if (!n) return;
|
|
225
|
+
let i = fe.type(t), { from: a, to: o } = n.selection;
|
|
226
|
+
n.doc.nodesBetween(a, o, (t) => {
|
|
227
|
+
if (e) return !1;
|
|
228
|
+
let n = i.isInSet(t.marks);
|
|
229
|
+
return n && (e = String(n.attrs.href ?? "")), !0;
|
|
230
|
+
});
|
|
231
|
+
}), e;
|
|
232
|
+
}, N = () => {
|
|
233
|
+
T.value = !1, k.value = "", r.value?.focus();
|
|
234
|
+
}, P = () => {
|
|
235
|
+
let e = k.value.trim();
|
|
236
|
+
e && C(q.key, { href: e }), N();
|
|
237
|
+
}, F = async () => {
|
|
238
|
+
let e = c?.adapters.linkPrompt;
|
|
239
|
+
if (e) {
|
|
240
|
+
let t = r.value, { from: n, to: i } = t?.state.selection ?? {
|
|
241
|
+
from: 0,
|
|
242
|
+
to: 0
|
|
243
|
+
}, a = (await e({ text: t ? t.state.doc.textBetween(n, i, " ") : "" }))?.trim();
|
|
244
|
+
a && C(q.key, { href: a });
|
|
245
|
+
return;
|
|
246
|
+
}
|
|
247
|
+
k.value = j(), T.value = !0, await u(), A.value?.focus(), A.value?.select();
|
|
248
|
+
}, I = t(() => ({
|
|
249
|
+
bold: {
|
|
250
|
+
svg: $.bold,
|
|
251
|
+
title: g.value.bold,
|
|
252
|
+
run: () => C(ge.key),
|
|
253
|
+
mark: "bold"
|
|
254
|
+
},
|
|
255
|
+
italic: {
|
|
256
|
+
svg: $.italic,
|
|
257
|
+
title: g.value.italic,
|
|
258
|
+
run: () => C(me.key),
|
|
259
|
+
mark: "italic"
|
|
260
|
+
},
|
|
261
|
+
strike: {
|
|
262
|
+
svg: $.strike,
|
|
263
|
+
title: g.value.strike,
|
|
264
|
+
run: () => C(ke.key),
|
|
265
|
+
mark: "strike"
|
|
266
|
+
},
|
|
267
|
+
code: {
|
|
268
|
+
svg: $.code,
|
|
269
|
+
title: g.value.code,
|
|
270
|
+
run: () => C(he.key),
|
|
271
|
+
mark: "code"
|
|
272
|
+
},
|
|
273
|
+
link: {
|
|
274
|
+
svg: $.link,
|
|
275
|
+
title: g.value.link,
|
|
276
|
+
run: F
|
|
277
|
+
}
|
|
278
|
+
})), L = t(() => {
|
|
279
|
+
let e = I.value, t = (c?.selectionToolbarItems ?? [
|
|
247
280
|
"bold",
|
|
248
281
|
"italic",
|
|
249
282
|
"strike",
|
|
@@ -258,34 +291,70 @@ var Ae = [
|
|
|
258
291
|
return n;
|
|
259
292
|
});
|
|
260
293
|
return p(() => {
|
|
261
|
-
|
|
262
|
-
content:
|
|
294
|
+
b = new ae({
|
|
295
|
+
content: y.value,
|
|
263
296
|
offset: 8
|
|
264
|
-
}),
|
|
265
|
-
|
|
266
|
-
|
|
297
|
+
}), b.onHide = () => {
|
|
298
|
+
T.value = !1, k.value = "";
|
|
299
|
+
}, b.update(r.value, o.value);
|
|
300
|
+
}), w([r, o], () => {
|
|
301
|
+
b?.update(r.value, o.value);
|
|
267
302
|
}), f(() => {
|
|
268
|
-
|
|
303
|
+
b?.destroy();
|
|
269
304
|
}), (t, n) => (m(), i("div", {
|
|
270
305
|
ref_key: "divRef",
|
|
271
|
-
ref:
|
|
306
|
+
ref: y,
|
|
272
307
|
class: "kun-editor__bubble",
|
|
273
|
-
"data-show": "false"
|
|
274
|
-
|
|
308
|
+
"data-show": "false",
|
|
309
|
+
"data-mode": T.value ? "link" : "marks"
|
|
310
|
+
}, [T.value ? (m(), i(e, { key: 0 }, [
|
|
311
|
+
E(a("input", {
|
|
312
|
+
ref_key: "inputRef",
|
|
313
|
+
ref: A,
|
|
314
|
+
"onUpdate:modelValue": n[0] ||= (e) => k.value = e,
|
|
315
|
+
type: "url",
|
|
316
|
+
class: "kun-editor__bubble-input",
|
|
317
|
+
placeholder: g.value.linkUrl,
|
|
318
|
+
"aria-label": g.value.linkUrl,
|
|
319
|
+
spellcheck: "false",
|
|
320
|
+
autocomplete: "off",
|
|
321
|
+
onKeydown: [n[1] ||= D(O((e) => P(), ["prevent"]), ["enter"]), n[2] ||= D(O((e) => N(), ["stop", "prevent"]), ["esc"])]
|
|
322
|
+
}, null, 40, Xe), [[S, k.value]]),
|
|
323
|
+
a("button", {
|
|
324
|
+
type: "button",
|
|
325
|
+
class: "kun-editor__bubble-btn",
|
|
326
|
+
title: g.value.apply,
|
|
327
|
+
"aria-label": g.value.apply,
|
|
328
|
+
onMousedown: n[3] ||= O((e) => P(), ["prevent"])
|
|
329
|
+
}, [a("span", {
|
|
330
|
+
class: "kun-editor__icon",
|
|
331
|
+
innerHTML: x($).check
|
|
332
|
+
}, null, 8, Qe)], 40, Ze),
|
|
333
|
+
a("button", {
|
|
334
|
+
type: "button",
|
|
335
|
+
class: "kun-editor__bubble-btn",
|
|
336
|
+
title: g.value.cancel,
|
|
337
|
+
"aria-label": g.value.cancel,
|
|
338
|
+
onMousedown: n[4] ||= O((e) => N(), ["prevent"])
|
|
339
|
+
}, [a("span", {
|
|
340
|
+
class: "kun-editor__icon",
|
|
341
|
+
innerHTML: x($).close
|
|
342
|
+
}, null, 8, et)], 40, $e)
|
|
343
|
+
], 64)) : (m(!0), i(e, { key: 1 }, v(L.value, (t, n) => (m(), i(e, { key: n }, [t.divider ? (m(), i("span", tt)) : (m(), i("button", {
|
|
275
344
|
key: 1,
|
|
276
345
|
type: "button",
|
|
277
346
|
class: "kun-editor__bubble-btn",
|
|
278
347
|
title: t.title,
|
|
279
348
|
"aria-label": t.title,
|
|
280
|
-
"aria-pressed": t.mark ? x(
|
|
281
|
-
"data-active": t.mark ? x(
|
|
282
|
-
onMousedown:
|
|
349
|
+
"aria-pressed": t.mark ? x(d)[t.mark] : void 0,
|
|
350
|
+
"data-active": t.mark ? x(d)[t.mark] : void 0,
|
|
351
|
+
onMousedown: O((e) => t.run(), ["prevent"])
|
|
283
352
|
}, [a("span", {
|
|
284
353
|
class: "kun-editor__icon",
|
|
285
354
|
innerHTML: t.svg
|
|
286
|
-
}, null, 8,
|
|
355
|
+
}, null, 8, rt)], 40, nt))], 64))), 128))], 8, Ye));
|
|
287
356
|
}
|
|
288
|
-
}),
|
|
357
|
+
}), at = /* @__PURE__ */ s({
|
|
289
358
|
__name: "MilkdownEditor",
|
|
290
359
|
props: {
|
|
291
360
|
modelValue: {},
|
|
@@ -300,44 +369,44 @@ var Ae = [
|
|
|
300
369
|
},
|
|
301
370
|
emits: ["update:modelValue", "update:loading"],
|
|
302
371
|
setup(e, { expose: t, emit: r }) {
|
|
303
|
-
let i = e, a = r, o = i.modelValue, s = !1, c = l(X), u =
|
|
304
|
-
let t =
|
|
305
|
-
t.set(z, e), t.set(
|
|
372
|
+
let i = e, a = r, o = i.modelValue, s = !1, c = l(X), u = P(), d = B("kunMention"), f = i.features.mention !== !1 && !!i.adapters.searchMentionUsers && !!u, p = V("kunSelectionTooltip"), h = i.selectionToolbar && !!u, g = j((e) => {
|
|
373
|
+
let t = L.make().config((t) => {
|
|
374
|
+
t.set(z, e), t.set(te, i.modelValue), t.get(re).markdownUpdated((e, t, n) => {
|
|
306
375
|
!i.active || s || t === n || (o = t, a("update:modelValue", t));
|
|
307
|
-
}), t.update(
|
|
376
|
+
}), t.update(ne, (e) => ({
|
|
308
377
|
...e,
|
|
309
378
|
editable: () => !i.readonly
|
|
310
|
-
})), f && t.set(d.key, { view: u({ component:
|
|
311
|
-
}).use(
|
|
379
|
+
})), f && t.set(d.key, { view: u({ component: Je }) }), h && t.set(p.key, { view: u({ component: it }) });
|
|
380
|
+
}).use(be(i.adapters, i.features, {
|
|
312
381
|
locale: i.locale,
|
|
313
382
|
placeholder: i.placeholder,
|
|
314
383
|
placeholderMode: i.placeholderMode
|
|
315
384
|
}));
|
|
316
|
-
return f && t.use(d), h && t.use(p), c && t.use(
|
|
385
|
+
return f && t.use(d), h && t.use(p), c && t.use(Be(c.activeMarks)), t;
|
|
317
386
|
});
|
|
318
|
-
|
|
387
|
+
w(g.loading, (e) => a("update:loading", e), { immediate: !0 }), w(() => i.modelValue, (e) => {
|
|
319
388
|
if (e === o) return;
|
|
320
389
|
o = e;
|
|
321
390
|
let t = g.get();
|
|
322
|
-
t && (s = !0, t.action(
|
|
323
|
-
}),
|
|
391
|
+
t && (s = !0, t.action(W(e)), s = !1);
|
|
392
|
+
}), w(() => i.readonly, () => {
|
|
324
393
|
g.get()?.action((e) => {
|
|
325
|
-
let t = e.get(
|
|
394
|
+
let t = e.get(R);
|
|
326
395
|
t.dispatch(t.state.tr);
|
|
327
396
|
});
|
|
328
397
|
});
|
|
329
398
|
let _ = () => {
|
|
330
|
-
g.get()?.action((e) => e.get(
|
|
399
|
+
g.get()?.action((e) => e.get(R).focus());
|
|
331
400
|
};
|
|
332
401
|
return t({
|
|
333
402
|
insertQuote: (e) => {
|
|
334
|
-
g.get()?.action(
|
|
403
|
+
g.get()?.action(U(Ce.key, e)), _();
|
|
335
404
|
},
|
|
336
405
|
insertMention: (e) => {
|
|
337
|
-
g.get()?.action(
|
|
406
|
+
g.get()?.action(U(Se.key, e)), _();
|
|
338
407
|
},
|
|
339
408
|
insertImage: (e) => {
|
|
340
|
-
g.get()?.action(
|
|
409
|
+
g.get()?.action(U(de.key, {
|
|
341
410
|
src: e.src,
|
|
342
411
|
alt: e.alt ?? "",
|
|
343
412
|
title: e.title ?? ""
|
|
@@ -346,7 +415,7 @@ var Ae = [
|
|
|
346
415
|
uploadImage: (e) => {
|
|
347
416
|
let t = i.adapters.uploadImage, n = g.get();
|
|
348
417
|
!t || !n || n.action((n) => {
|
|
349
|
-
|
|
418
|
+
De(n.get(R), e, {
|
|
350
419
|
uploadImage: t,
|
|
351
420
|
notify: i.adapters.notify,
|
|
352
421
|
locale: i.locale
|
|
@@ -356,38 +425,38 @@ var Ae = [
|
|
|
356
425
|
focus: _,
|
|
357
426
|
scrollToHeading: (e) => {
|
|
358
427
|
g.get()?.action((t) => {
|
|
359
|
-
let n = t.get(
|
|
428
|
+
let n = t.get(R), r = 0, i = -1;
|
|
360
429
|
if (n.state.doc.forEach((t, n) => {
|
|
361
430
|
t.type.name === "heading" && (r === e && (i = n), r += 1);
|
|
362
431
|
}), !(i < 0) && (n.nodeDOM(i)?.scrollIntoView({
|
|
363
432
|
behavior: "smooth",
|
|
364
433
|
block: "start"
|
|
365
434
|
}), n.editable)) {
|
|
366
|
-
let e =
|
|
435
|
+
let e = G.near(n.state.doc.resolve(i + 1));
|
|
367
436
|
n.dispatch(n.state.tr.setSelection(e)), n.focus();
|
|
368
437
|
}
|
|
369
438
|
});
|
|
370
439
|
}
|
|
371
|
-
}), (e, t) => (m(), n(x(
|
|
440
|
+
}), (e, t) => (m(), n(x(k)));
|
|
372
441
|
}
|
|
373
|
-
}),
|
|
442
|
+
}), ot = /* @__PURE__ */ "😀.😃.😄.😁.😆.😅.🤣.😂.🙂.🙃.😉.😊.😇.🥰.😍.🤩.😘.😗.😚.😋.😛.😜.🤪.😝.🤗.🤭.🤔.🤐.😐.😑.😶.😏.😒.🙄.😬.😌.😔.😪.🤤.😴.😷.🤒.🤕.🥵.🥶.🥴.😵.🤯.🤠.🥳.😎.🤓.🧐.😕.😟.🙁.😮.😯.😲.😳.🥺.😦.😧.😨.😰.😥.😢.😭.😱.😖.😣.😞.😓.😩.😫.🥱.😤.😡.😠.🤬.😈.👿.💀.💩.🤡.👻.👽.🤖.😺.😸.👍.👎.👌.🤌.🤏.✌️.🤞.🤟.🤘.👋.🤚.🖐️.✋.👏.🙌.🤝.🙏.💪.👀.👁️.❤️.🧡.💛.💚.💙.💜.🖤.🤍.💔.💕.💞.💓.💗.💖.💘.💝.💯.✨.⭐.🌟.🔥.💥.💫.⚡.☀️.🌈.🎉.🎊.🎁.🏆.🐶.🐱.🐭.🦊.🐻.🐼.🐨.🦄.🐢.🐳.🍎.🍑.🍓.🍉.🍰.🍺.🍵.☕.🍜.🍙.✅.❌.❓.❗.💤.👑.🎮.🎵.📌.🔖".split("."), st = [
|
|
374
443
|
"title",
|
|
375
444
|
"aria-label",
|
|
376
445
|
"aria-expanded"
|
|
377
|
-
],
|
|
446
|
+
], ct = ["innerHTML"], lt = { class: "kun-editor__picker-panel" }, ut = {
|
|
378
447
|
key: 0,
|
|
379
448
|
class: "kun-editor__picker-tabs",
|
|
380
449
|
role: "tablist"
|
|
381
|
-
},
|
|
450
|
+
}, dt = ["data-active"], ft = ["data-active"], pt = { class: "kun-editor__emoji-grid" }, mt = ["onClick"], ht = {
|
|
382
451
|
key: 1,
|
|
383
452
|
class: "kun-editor__sticker-body"
|
|
384
|
-
},
|
|
453
|
+
}, gt = { class: "kun-editor__pack-name" }, _t = { class: "kun-editor__sticker-grid" }, vt = ["title", "onClick"], yt = ["src", "alt"], bt = {
|
|
385
454
|
key: 1,
|
|
386
455
|
class: "kun-editor__picker-hint"
|
|
387
|
-
},
|
|
456
|
+
}, xt = /* @__PURE__ */ s({
|
|
388
457
|
__name: "StickerPicker",
|
|
389
458
|
setup(n) {
|
|
390
|
-
let [, o] =
|
|
459
|
+
let [, o] = M(), s = l(X), c = s?.adapters.stickerSource, u = !!c, d = t(() => (s?.locale ?? "zh-cn").toLowerCase().startsWith("en")), h = t(() => d.value ? {
|
|
391
460
|
trigger: "Emoji & stickers",
|
|
392
461
|
emoji: "Emoji",
|
|
393
462
|
sticker: "Stickers",
|
|
@@ -399,9 +468,9 @@ var Ae = [
|
|
|
399
468
|
sticker: "贴纸",
|
|
400
469
|
empty: "暂无贴纸",
|
|
401
470
|
failed: "贴纸加载失败"
|
|
402
|
-
}), g = _(!1), y = _(null),
|
|
403
|
-
if (!(
|
|
404
|
-
|
|
471
|
+
}), g = _(!1), y = _(null), S = _("emoji"), w = _([]), T = _(!1), D = _(!1), O = async () => {
|
|
472
|
+
if (!(T.value || !c)) {
|
|
473
|
+
T.value = !0;
|
|
405
474
|
try {
|
|
406
475
|
w.value = await c();
|
|
407
476
|
} catch {
|
|
@@ -410,17 +479,17 @@ var Ae = [
|
|
|
410
479
|
}
|
|
411
480
|
}, k = () => {
|
|
412
481
|
g.value = !g.value, g.value && u && O();
|
|
413
|
-
},
|
|
482
|
+
}, A = (e) => {
|
|
414
483
|
g.value && y.value && !y.value.contains(e.target) && (g.value = !1);
|
|
415
484
|
};
|
|
416
|
-
p(() => document.addEventListener("click",
|
|
417
|
-
let
|
|
485
|
+
p(() => document.addEventListener("click", A)), f(() => document.removeEventListener("click", A));
|
|
486
|
+
let j = (e) => {
|
|
418
487
|
o()?.action((t) => {
|
|
419
|
-
let n = t.get(
|
|
488
|
+
let n = t.get(R), { state: r } = n;
|
|
420
489
|
n.dispatch(r.tr.insertText(e, r.selection.from));
|
|
421
490
|
});
|
|
422
491
|
}, N = (e, t) => {
|
|
423
|
-
o()?.action(
|
|
492
|
+
o()?.action(U(de.key, {
|
|
424
493
|
src: e,
|
|
425
494
|
title: t,
|
|
426
495
|
alt: t
|
|
@@ -440,28 +509,28 @@ var Ae = [
|
|
|
440
509
|
}, [a("span", {
|
|
441
510
|
class: "kun-editor__icon",
|
|
442
511
|
innerHTML: x($).smile
|
|
443
|
-
}, null, 8,
|
|
444
|
-
u ? (m(), i("div",
|
|
512
|
+
}, null, 8, ct)], 8, st), E(a("div", lt, [
|
|
513
|
+
u ? (m(), i("div", ut, [a("button", {
|
|
445
514
|
type: "button",
|
|
446
515
|
class: "kun-editor__picker-tab",
|
|
447
|
-
"data-active":
|
|
448
|
-
onClick: n[0] ||= (e) =>
|
|
449
|
-
}, b(h.value.emoji), 9,
|
|
516
|
+
"data-active": S.value === "emoji",
|
|
517
|
+
onClick: n[0] ||= (e) => S.value = "emoji"
|
|
518
|
+
}, b(h.value.emoji), 9, dt), a("button", {
|
|
450
519
|
type: "button",
|
|
451
520
|
class: "kun-editor__picker-tab",
|
|
452
|
-
"data-active":
|
|
453
|
-
onClick: n[1] ||= (e) =>
|
|
454
|
-
}, b(h.value.sticker), 9,
|
|
455
|
-
|
|
521
|
+
"data-active": S.value === "sticker",
|
|
522
|
+
onClick: n[1] ||= (e) => S.value = "sticker"
|
|
523
|
+
}, b(h.value.sticker), 9, ft)])) : r("", !0),
|
|
524
|
+
E(a("div", pt, [(m(!0), i(e, null, v(x(ot), (e, t) => (m(), i("button", {
|
|
456
525
|
key: t,
|
|
457
526
|
type: "button",
|
|
458
527
|
class: "kun-editor__emoji",
|
|
459
|
-
onClick: (t) =>
|
|
460
|
-
}, b(e), 9,
|
|
461
|
-
u ?
|
|
528
|
+
onClick: (t) => j(e)
|
|
529
|
+
}, b(e), 9, mt))), 128))], 512), [[C, !u || S.value === "emoji"]]),
|
|
530
|
+
u ? E((m(), i("div", ht, [w.value.length ? (m(!0), i(e, { key: 0 }, v(w.value, (t) => (m(), i("div", {
|
|
462
531
|
key: t.name,
|
|
463
532
|
class: "kun-editor__pack"
|
|
464
|
-
}, [a("div",
|
|
533
|
+
}, [a("div", gt, b(t.name), 1), a("div", _t, [(m(!0), i(e, null, v(t.stickers, (e, t) => (m(), i("button", {
|
|
465
534
|
key: t,
|
|
466
535
|
type: "button",
|
|
467
536
|
class: "kun-editor__sticker",
|
|
@@ -471,35 +540,35 @@ var Ae = [
|
|
|
471
540
|
src: e.src,
|
|
472
541
|
alt: e.name,
|
|
473
542
|
loading: "lazy"
|
|
474
|
-
}, null, 8,
|
|
475
|
-
], 512), [[
|
|
543
|
+
}, null, 8, yt)], 8, vt))), 128))])]))), 128)) : (m(), i("div", bt, b(D.value ? h.value.failed : h.value.empty), 1))], 512)), [[C, S.value === "sticker"]]) : r("", !0)
|
|
544
|
+
], 512), [[C, g.value]])], 512));
|
|
476
545
|
}
|
|
477
|
-
}),
|
|
546
|
+
}), St = {
|
|
478
547
|
class: "kun-editor__format-toolbar",
|
|
479
548
|
role: "toolbar"
|
|
480
|
-
},
|
|
549
|
+
}, Ct = ["aria-label"], wt = {
|
|
481
550
|
value: "",
|
|
482
551
|
disabled: "",
|
|
483
552
|
selected: ""
|
|
484
|
-
},
|
|
553
|
+
}, Tt = ["value"], Et = [
|
|
485
554
|
"title",
|
|
486
555
|
"aria-label",
|
|
487
556
|
"aria-pressed",
|
|
488
557
|
"data-active",
|
|
489
558
|
"onClick"
|
|
490
|
-
],
|
|
559
|
+
], Dt = ["innerHTML"], Ot = ["title", "aria-label"], kt = ["innerHTML"], At = /* @__PURE__ */ s({
|
|
491
560
|
__name: "EditorToolbar",
|
|
492
561
|
setup(n) {
|
|
493
|
-
let [, s] =
|
|
494
|
-
s()?.action(
|
|
562
|
+
let [, s] = M(), c = l(X), u = c?.activeMarks ?? Y, d = t(() => c?.adapters.uploadImage), f = t(() => c?.features.sticker !== !1), p = t(() => (c?.locale ?? "zh-cn").toLowerCase().startsWith("en")), h = (e, t) => {
|
|
563
|
+
s()?.action(U(e, t));
|
|
495
564
|
}, g = async () => {
|
|
496
565
|
let e = "";
|
|
497
566
|
s()?.action((t) => {
|
|
498
|
-
let n = t.get(
|
|
567
|
+
let n = t.get(R), { from: r, to: i } = n.state.selection;
|
|
499
568
|
e = n.state.doc.textBetween(r, i, " ");
|
|
500
569
|
});
|
|
501
570
|
let t = c?.adapters.linkPrompt, n = (t ? await t({ text: e }) : window.prompt(p.value ? "Link URL" : "链接 URL"))?.trim();
|
|
502
|
-
n && h(
|
|
571
|
+
n && h(q.key, { href: n });
|
|
503
572
|
}, y = t(() => {
|
|
504
573
|
let e = p.value;
|
|
505
574
|
return {
|
|
@@ -533,31 +602,31 @@ var Ae = [
|
|
|
533
602
|
}));
|
|
534
603
|
}), C = (e) => {
|
|
535
604
|
let t = e.target;
|
|
536
|
-
h(
|
|
605
|
+
h(Ee.key, Number(t.value)), t.selectedIndex = 0;
|
|
537
606
|
}, w = t(() => [
|
|
538
607
|
[
|
|
539
608
|
{
|
|
540
609
|
svg: $.bold,
|
|
541
610
|
title: y.value.bold,
|
|
542
|
-
run: () => h(
|
|
611
|
+
run: () => h(ge.key),
|
|
543
612
|
mark: "bold"
|
|
544
613
|
},
|
|
545
614
|
{
|
|
546
615
|
svg: $.italic,
|
|
547
616
|
title: y.value.italic,
|
|
548
|
-
run: () => h(
|
|
617
|
+
run: () => h(me.key),
|
|
549
618
|
mark: "italic"
|
|
550
619
|
},
|
|
551
620
|
{
|
|
552
621
|
svg: $.strike,
|
|
553
622
|
title: y.value.strike,
|
|
554
|
-
run: () => h(
|
|
623
|
+
run: () => h(ke.key),
|
|
555
624
|
mark: "strike"
|
|
556
625
|
},
|
|
557
626
|
{
|
|
558
627
|
svg: $.code,
|
|
559
628
|
title: y.value.code,
|
|
560
|
-
run: () => h(
|
|
629
|
+
run: () => h(he.key),
|
|
561
630
|
mark: "code"
|
|
562
631
|
},
|
|
563
632
|
{
|
|
@@ -570,55 +639,55 @@ var Ae = [
|
|
|
570
639
|
{
|
|
571
640
|
svg: $.bulletList,
|
|
572
641
|
title: y.value.bulletList,
|
|
573
|
-
run: () => h(
|
|
642
|
+
run: () => h(ve.key)
|
|
574
643
|
},
|
|
575
644
|
{
|
|
576
645
|
svg: $.orderedList,
|
|
577
646
|
title: y.value.orderedList,
|
|
578
|
-
run: () => h(
|
|
647
|
+
run: () => h(ye.key)
|
|
579
648
|
},
|
|
580
649
|
{
|
|
581
650
|
svg: $.quote,
|
|
582
651
|
title: y.value.quote,
|
|
583
|
-
run: () => h(
|
|
652
|
+
run: () => h(_e.key)
|
|
584
653
|
},
|
|
585
654
|
{
|
|
586
655
|
svg: $.codeBlock,
|
|
587
656
|
title: y.value.codeBlock,
|
|
588
|
-
run: () => h(
|
|
657
|
+
run: () => h(K.key, "")
|
|
589
658
|
},
|
|
590
659
|
{
|
|
591
660
|
svg: $.hr,
|
|
592
661
|
title: y.value.hr,
|
|
593
|
-
run: () => h(
|
|
662
|
+
run: () => h(ue.key)
|
|
594
663
|
}
|
|
595
664
|
],
|
|
596
665
|
[{
|
|
597
666
|
svg: $.spoiler,
|
|
598
667
|
title: y.value.spoiler,
|
|
599
|
-
run: () => h(
|
|
668
|
+
run: () => h(xe.key)
|
|
600
669
|
}]
|
|
601
670
|
]), T = _(null), E = () => T.value?.click(), D = (e) => {
|
|
602
671
|
let t = e.target, n = t.files?.[0];
|
|
603
672
|
t.value = "";
|
|
604
673
|
let r = d.value;
|
|
605
674
|
!n || !r || s()?.action((e) => {
|
|
606
|
-
|
|
675
|
+
De(e.get(R), n, {
|
|
607
676
|
uploadImage: r,
|
|
608
677
|
notify: c?.adapters.notify,
|
|
609
678
|
locale: c?.locale
|
|
610
679
|
});
|
|
611
680
|
});
|
|
612
681
|
};
|
|
613
|
-
return (t, n) => (m(), i("div",
|
|
682
|
+
return (t, n) => (m(), i("div", St, [
|
|
614
683
|
a("select", {
|
|
615
684
|
class: "kun-editor__heading-select",
|
|
616
685
|
"aria-label": y.value.textSize,
|
|
617
686
|
onChange: C
|
|
618
|
-
}, [a("option",
|
|
687
|
+
}, [a("option", wt, b(y.value.textSize), 1), (m(!0), i(e, null, v(S.value, (e) => (m(), i("option", {
|
|
619
688
|
key: e.level,
|
|
620
689
|
value: e.level
|
|
621
|
-
}, b(e.label), 9,
|
|
690
|
+
}, b(e.label), 9, Tt))), 128))], 40, Ct),
|
|
622
691
|
(m(!0), i(e, null, v(w.value, (t, r) => (m(), i(e, { key: r }, [n[0] ||= a("span", {
|
|
623
692
|
class: "kun-editor__toolbar-divider",
|
|
624
693
|
"aria-hidden": "true"
|
|
@@ -634,7 +703,7 @@ var Ae = [
|
|
|
634
703
|
}, [a("span", {
|
|
635
704
|
class: "kun-editor__icon",
|
|
636
705
|
innerHTML: e.svg
|
|
637
|
-
}, null, 8,
|
|
706
|
+
}, null, 8, Dt)], 8, Et))), 128))], 64))), 128)),
|
|
638
707
|
d.value ? (m(), i(e, { key: 0 }, [
|
|
639
708
|
n[1] ||= a("span", {
|
|
640
709
|
class: "kun-editor__toolbar-divider",
|
|
@@ -649,7 +718,7 @@ var Ae = [
|
|
|
649
718
|
}, [a("span", {
|
|
650
719
|
class: "kun-editor__icon",
|
|
651
720
|
innerHTML: x($).image
|
|
652
|
-
}, null, 8,
|
|
721
|
+
}, null, 8, kt)], 8, Ot),
|
|
653
722
|
a("input", {
|
|
654
723
|
ref_key: "fileInput",
|
|
655
724
|
ref: T,
|
|
@@ -662,31 +731,31 @@ var Ae = [
|
|
|
662
731
|
f.value ? (m(), i(e, { key: 1 }, [n[2] ||= a("span", {
|
|
663
732
|
class: "kun-editor__toolbar-divider",
|
|
664
733
|
"aria-hidden": "true"
|
|
665
|
-
}, null, -1), o(
|
|
734
|
+
}, null, -1), o(xt)], 64)) : r("", !0)
|
|
666
735
|
]));
|
|
667
736
|
}
|
|
668
|
-
}),
|
|
737
|
+
}), jt = /* @__PURE__ */ s({
|
|
669
738
|
__name: "ToolbarHost",
|
|
670
739
|
setup(e) {
|
|
671
|
-
let [, t] =
|
|
672
|
-
t()?.action(
|
|
740
|
+
let [, t] = M(), n = l(X, void 0), r = (e, n) => {
|
|
741
|
+
t()?.action(U(e, n));
|
|
673
742
|
}, i = () => {
|
|
674
|
-
t()?.action((e) => e.get(
|
|
743
|
+
t()?.action((e) => e.get(R).focus());
|
|
675
744
|
}, a = {
|
|
676
745
|
run: r,
|
|
677
746
|
get activeMarks() {
|
|
678
|
-
return n?.activeMarks ??
|
|
747
|
+
return n?.activeMarks ?? Y;
|
|
679
748
|
},
|
|
680
749
|
insertText: (e) => {
|
|
681
750
|
t()?.action((t) => {
|
|
682
|
-
let n = t.get(
|
|
751
|
+
let n = t.get(R);
|
|
683
752
|
n.dispatch(n.state.tr.insertText(e));
|
|
684
753
|
}), i();
|
|
685
754
|
},
|
|
686
755
|
uploadImage: (e) => {
|
|
687
756
|
let r = n?.adapters.uploadImage, i = t();
|
|
688
757
|
!r || !i || i.action((t) => {
|
|
689
|
-
|
|
758
|
+
De(t.get(R), e, {
|
|
690
759
|
uploadImage: r,
|
|
691
760
|
notify: n?.adapters.notify,
|
|
692
761
|
locale: n?.locale
|
|
@@ -694,20 +763,20 @@ var Ae = [
|
|
|
694
763
|
});
|
|
695
764
|
},
|
|
696
765
|
insertLink: (e) => {
|
|
697
|
-
r(
|
|
766
|
+
r(q.key, e), i();
|
|
698
767
|
},
|
|
699
768
|
insertImage: (e) => {
|
|
700
|
-
r(
|
|
769
|
+
r(de.key, {
|
|
701
770
|
src: e.src,
|
|
702
771
|
alt: e.alt ?? "",
|
|
703
772
|
title: e.title ?? ""
|
|
704
773
|
}), i();
|
|
705
774
|
},
|
|
706
775
|
insertQuote: (e) => {
|
|
707
|
-
r(
|
|
776
|
+
r(Ce.key, e), i();
|
|
708
777
|
},
|
|
709
778
|
insertMention: (e) => {
|
|
710
|
-
r(
|
|
779
|
+
r(Se.key, e), i();
|
|
711
780
|
},
|
|
712
781
|
focus: i,
|
|
713
782
|
get adapters() {
|
|
@@ -722,7 +791,7 @@ var Ae = [
|
|
|
722
791
|
};
|
|
723
792
|
return (e, t) => y(e.$slots, "default", d(c(a)));
|
|
724
793
|
}
|
|
725
|
-
}),
|
|
794
|
+
}), Mt = /* @__PURE__ */ s({
|
|
726
795
|
__name: "MarkdownSource",
|
|
727
796
|
props: {
|
|
728
797
|
modelValue: {},
|
|
@@ -730,21 +799,21 @@ var Ae = [
|
|
|
730
799
|
},
|
|
731
800
|
emits: ["update:modelValue"],
|
|
732
801
|
setup(e, { expose: t, emit: n }) {
|
|
733
|
-
let r = e, a = n, o = _(null), s = null, c =
|
|
802
|
+
let r = e, a = n, o = _(null), s = null, c = Ae.define(), l = (e) => je.create({
|
|
734
803
|
doc: e,
|
|
735
804
|
extensions: [
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
805
|
+
we(),
|
|
806
|
+
J.lineWrapping,
|
|
807
|
+
Ne,
|
|
808
|
+
Me(),
|
|
809
|
+
J.editable.of(!r.readonly),
|
|
810
|
+
J.updateListener.of((e) => {
|
|
742
811
|
e.docChanged && !e.transactions.some((e) => e.annotation(c)) && a("update:modelValue", e.state.doc.toString());
|
|
743
812
|
})
|
|
744
813
|
]
|
|
745
814
|
});
|
|
746
815
|
p(() => {
|
|
747
|
-
o.value && (s = new
|
|
816
|
+
o.value && (s = new J({
|
|
748
817
|
state: l(r.modelValue),
|
|
749
818
|
parent: o.value
|
|
750
819
|
}));
|
|
@@ -773,7 +842,7 @@ var Ae = [
|
|
|
773
842
|
selection: { anchor: i },
|
|
774
843
|
scrollIntoView: !0
|
|
775
844
|
}), s.focus());
|
|
776
|
-
} }),
|
|
845
|
+
} }), w(() => r.modelValue, (e) => {
|
|
777
846
|
if (!s || s.state.doc.toString() === e) return;
|
|
778
847
|
let { anchor: t, head: n } = s.state.selection.main, r = e.length;
|
|
779
848
|
s.dispatch({
|
|
@@ -794,23 +863,23 @@ var Ae = [
|
|
|
794
863
|
class: "kun-editor__source"
|
|
795
864
|
}, null, 512));
|
|
796
865
|
}
|
|
797
|
-
}),
|
|
866
|
+
}), Nt = ["data-mode"], Pt = {
|
|
798
867
|
key: 0,
|
|
799
868
|
class: "kun-editor__toolbar",
|
|
800
869
|
role: "tablist"
|
|
801
|
-
},
|
|
870
|
+
}, Ft = [
|
|
802
871
|
"aria-selected",
|
|
803
872
|
"data-active",
|
|
804
873
|
"onClick"
|
|
805
|
-
],
|
|
874
|
+
], It = ["title", "aria-label"], Lt = [
|
|
806
875
|
"data-active",
|
|
807
876
|
"title",
|
|
808
877
|
"aria-pressed"
|
|
809
|
-
],
|
|
878
|
+
], Rt = ["data-swap"], zt = { class: "kun-editor__wysiwyg kun-editor__pane" }, Bt = {
|
|
810
879
|
key: 1,
|
|
811
880
|
class: "kun-editor__loading",
|
|
812
881
|
"aria-hidden": "true"
|
|
813
|
-
},
|
|
882
|
+
}, Vt = /* @__PURE__ */ s({
|
|
814
883
|
__name: "KunEditor",
|
|
815
884
|
props: {
|
|
816
885
|
modelValue: {},
|
|
@@ -842,54 +911,54 @@ var Ae = [
|
|
|
842
911
|
"update:headings",
|
|
843
912
|
"update:loading"
|
|
844
913
|
],
|
|
845
|
-
setup(s, { expose: l, emit:
|
|
914
|
+
setup(s, { expose: l, emit: S }) {
|
|
846
915
|
let D = [
|
|
847
916
|
"bold",
|
|
848
917
|
"italic",
|
|
849
918
|
"strike",
|
|
850
919
|
"code",
|
|
851
920
|
"link"
|
|
852
|
-
],
|
|
921
|
+
], O = s, k = S, j = _(!1);
|
|
853
922
|
p(() => {
|
|
854
|
-
|
|
923
|
+
j.value = !0;
|
|
855
924
|
});
|
|
856
|
-
let
|
|
857
|
-
|
|
925
|
+
let M = _(!0), ee = (e) => {
|
|
926
|
+
M.value = e, k("update:loading", e);
|
|
858
927
|
};
|
|
859
|
-
|
|
860
|
-
let
|
|
928
|
+
w(() => O.modelValue, (e) => k("update:headings", I(e)), { immediate: !0 });
|
|
929
|
+
let P = g(Ie());
|
|
861
930
|
h(X, {
|
|
862
931
|
get adapters() {
|
|
863
|
-
return
|
|
932
|
+
return O.adapters;
|
|
864
933
|
},
|
|
865
934
|
get features() {
|
|
866
|
-
return
|
|
935
|
+
return O.features;
|
|
867
936
|
},
|
|
868
937
|
get locale() {
|
|
869
|
-
return
|
|
938
|
+
return O.locale;
|
|
870
939
|
},
|
|
871
940
|
get selectionToolbarItems() {
|
|
872
|
-
return Array.isArray(
|
|
941
|
+
return Array.isArray(O.selectionToolbar) ? O.selectionToolbar : D;
|
|
873
942
|
},
|
|
874
943
|
get activeMarks() {
|
|
875
|
-
return
|
|
944
|
+
return P;
|
|
876
945
|
}
|
|
877
946
|
});
|
|
878
|
-
let
|
|
947
|
+
let F = t(() => O.selectionToolbar !== !1), L = _(O.views.includes("wysiwyg") ? "wysiwyg" : O.views[0] ?? "wysiwyg"), te = (e) => {
|
|
879
948
|
L.value = e;
|
|
880
949
|
};
|
|
881
|
-
|
|
950
|
+
w(() => O.views, (e) => {
|
|
882
951
|
e.includes(L.value) || (L.value = e[0] ?? "wysiwyg");
|
|
883
952
|
});
|
|
884
|
-
let
|
|
885
|
-
|
|
886
|
-
},
|
|
887
|
-
|
|
888
|
-
|
|
953
|
+
let R = _(!1), ne = () => {
|
|
954
|
+
R.value = !R.value;
|
|
955
|
+
}, z = _(O.scrollSync);
|
|
956
|
+
w(() => O.scrollSync, (e) => {
|
|
957
|
+
z.value = e;
|
|
889
958
|
});
|
|
890
|
-
let
|
|
891
|
-
|
|
892
|
-
},
|
|
959
|
+
let re = () => {
|
|
960
|
+
z.value = !z.value;
|
|
961
|
+
}, ie = t(() => O.locale.toLowerCase().startsWith("en")), B = t(() => ie.value ? {
|
|
893
962
|
wysiwyg: "Preview",
|
|
894
963
|
source: "Markdown",
|
|
895
964
|
split: "Split",
|
|
@@ -901,104 +970,104 @@ var Ae = [
|
|
|
901
970
|
split: "分栏",
|
|
902
971
|
swap: "左右互换",
|
|
903
972
|
scrollSync: "同步滚动"
|
|
904
|
-
}),
|
|
905
|
-
|
|
906
|
-
},
|
|
907
|
-
|
|
908
|
-
let e =
|
|
973
|
+
}), ae = _(null), V = null, H = null, U = null, W = () => {
|
|
974
|
+
V?.(), V = null, H = null;
|
|
975
|
+
}, oe = () => {
|
|
976
|
+
W();
|
|
977
|
+
let e = ae.value;
|
|
909
978
|
if (!e) return;
|
|
910
979
|
let t = e.querySelector(".cm-scroller"), n = e.querySelector(".kun-editor__wysiwyg");
|
|
911
980
|
if (!t || !n) return;
|
|
912
981
|
let r = (e, t) => () => {
|
|
913
|
-
if (
|
|
914
|
-
|
|
982
|
+
if (H && H !== e) return;
|
|
983
|
+
H = e;
|
|
915
984
|
let n = e.scrollHeight - e.clientHeight, r = n > 0 ? e.scrollTop / n : 0, i = t.scrollHeight - t.clientHeight;
|
|
916
|
-
t.scrollTop = r * (i > 0 ? i : 0),
|
|
917
|
-
|
|
985
|
+
t.scrollTop = r * (i > 0 ? i : 0), U && clearTimeout(U), U = setTimeout(() => {
|
|
986
|
+
H = null;
|
|
918
987
|
}, 120);
|
|
919
988
|
}, i = r(t, n), a = r(n, t);
|
|
920
|
-
t.addEventListener("scroll", i, { passive: !0 }), n.addEventListener("scroll", a, { passive: !0 }),
|
|
989
|
+
t.addEventListener("scroll", i, { passive: !0 }), n.addEventListener("scroll", a, { passive: !0 }), V = () => {
|
|
921
990
|
t.removeEventListener("scroll", i), n.removeEventListener("scroll", a);
|
|
922
991
|
};
|
|
923
992
|
};
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
}), f(
|
|
927
|
-
let
|
|
993
|
+
w([L, z], ([e, t]) => {
|
|
994
|
+
W(), e === "split" && t && u(oe);
|
|
995
|
+
}), f(W);
|
|
996
|
+
let se = t(() => O.readonly || L.value === "split"), G = (e) => k("update:modelValue", e), K = _(null), ce = _(null);
|
|
928
997
|
return l({
|
|
929
|
-
insertQuote: (e) =>
|
|
930
|
-
insertMention: (e) =>
|
|
931
|
-
insertImage: (e) =>
|
|
932
|
-
uploadImage: (e) =>
|
|
933
|
-
focus: () =>
|
|
998
|
+
insertQuote: (e) => K.value?.insertQuote(e),
|
|
999
|
+
insertMention: (e) => K.value?.insertMention(e),
|
|
1000
|
+
insertImage: (e) => K.value?.insertImage(e),
|
|
1001
|
+
uploadImage: (e) => K.value?.uploadImage(e),
|
|
1002
|
+
focus: () => K.value?.focus(),
|
|
934
1003
|
scrollToHeading: (e) => {
|
|
935
|
-
L.value === "source" || L.value === "split" ?
|
|
1004
|
+
L.value === "source" || L.value === "split" ? ce.value?.scrollToHeading(e) : K.value?.scrollToHeading(e);
|
|
936
1005
|
}
|
|
937
1006
|
}), (t, l) => (m(), i("div", {
|
|
938
1007
|
ref_key: "rootEl",
|
|
939
|
-
ref:
|
|
1008
|
+
ref: ae,
|
|
940
1009
|
class: "kun-editor",
|
|
941
1010
|
"data-kun-editor": "",
|
|
942
1011
|
"data-mode": L.value
|
|
943
|
-
}, [
|
|
1012
|
+
}, [j.value ? (m(), i(e, { key: 0 }, [y(t.$slots, "view-switch", {
|
|
944
1013
|
mode: L.value,
|
|
945
|
-
setMode:
|
|
946
|
-
labels:
|
|
1014
|
+
setMode: te,
|
|
1015
|
+
labels: B.value,
|
|
947
1016
|
views: s.views,
|
|
948
|
-
swapped:
|
|
949
|
-
swap:
|
|
950
|
-
scrollSync:
|
|
951
|
-
toggleScrollSync:
|
|
952
|
-
}, () => [s.views.length > 1 ? (m(), i("div",
|
|
1017
|
+
swapped: R.value,
|
|
1018
|
+
swap: ne,
|
|
1019
|
+
scrollSync: z.value,
|
|
1020
|
+
toggleScrollSync: re
|
|
1021
|
+
}, () => [s.views.length > 1 ? (m(), i("div", Pt, [(m(!0), i(e, null, v(s.views, (e) => (m(), i("button", {
|
|
953
1022
|
key: e,
|
|
954
1023
|
type: "button",
|
|
955
1024
|
class: "kun-editor__tab",
|
|
956
1025
|
"aria-selected": L.value === e,
|
|
957
1026
|
"data-active": L.value === e,
|
|
958
|
-
onClick: (t) =>
|
|
959
|
-
}, b(
|
|
1027
|
+
onClick: (t) => te(e)
|
|
1028
|
+
}, b(B.value[e]), 9, Ft))), 128)), L.value === "split" ? (m(), i(e, { key: 0 }, [a("button", {
|
|
960
1029
|
type: "button",
|
|
961
1030
|
class: "kun-editor__tab kun-editor__swap",
|
|
962
|
-
title:
|
|
963
|
-
"aria-label":
|
|
964
|
-
onClick: l[0] ||= (e) =>
|
|
965
|
-
}, " ⇄ ", 8,
|
|
1031
|
+
title: B.value.swap,
|
|
1032
|
+
"aria-label": B.value.swap,
|
|
1033
|
+
onClick: l[0] ||= (e) => ne()
|
|
1034
|
+
}, " ⇄ ", 8, It), a("button", {
|
|
966
1035
|
type: "button",
|
|
967
1036
|
class: "kun-editor__tab",
|
|
968
|
-
"data-active":
|
|
969
|
-
title:
|
|
970
|
-
"aria-pressed":
|
|
971
|
-
onClick: l[1] ||= (e) =>
|
|
972
|
-
}, b(
|
|
973
|
-
default:
|
|
974
|
-
default:
|
|
975
|
-
default:
|
|
1037
|
+
"data-active": z.value,
|
|
1038
|
+
title: B.value.scrollSync,
|
|
1039
|
+
"aria-pressed": z.value,
|
|
1040
|
+
onClick: l[1] ||= (e) => re()
|
|
1041
|
+
}, b(B.value.scrollSync), 9, Lt)], 64)) : r("", !0)])) : r("", !0)]), o(x(A), null, {
|
|
1042
|
+
default: T(() => [o(x(N), null, {
|
|
1043
|
+
default: T(() => [E(a("div", null, [o(jt, null, {
|
|
1044
|
+
default: T((e) => [y(t.$slots, "toolbar", d(c(e)), () => [o(At)])]),
|
|
976
1045
|
_: 3
|
|
977
|
-
})], 512), [[
|
|
1046
|
+
})], 512), [[C, L.value === "wysiwyg" && !s.readonly]]), a("div", {
|
|
978
1047
|
class: "kun-editor__panes",
|
|
979
|
-
"data-swap":
|
|
980
|
-
}, [L.value === "source" || L.value === "split" ? (m(), n(
|
|
1048
|
+
"data-swap": R.value
|
|
1049
|
+
}, [L.value === "source" || L.value === "split" ? (m(), n(Mt, {
|
|
981
1050
|
key: 0,
|
|
982
1051
|
ref_key: "source",
|
|
983
|
-
ref:
|
|
1052
|
+
ref: ce,
|
|
984
1053
|
class: "kun-editor__pane",
|
|
985
1054
|
"model-value": s.modelValue,
|
|
986
1055
|
readonly: s.readonly,
|
|
987
|
-
"onUpdate:modelValue":
|
|
988
|
-
}, null, 8, ["model-value", "readonly"])) : r("", !0),
|
|
1056
|
+
"onUpdate:modelValue": G
|
|
1057
|
+
}, null, 8, ["model-value", "readonly"])) : r("", !0), E(a("div", zt, [o(at, {
|
|
989
1058
|
ref_key: "inner",
|
|
990
|
-
ref:
|
|
1059
|
+
ref: K,
|
|
991
1060
|
"model-value": s.modelValue,
|
|
992
1061
|
adapters: s.adapters,
|
|
993
1062
|
features: s.features,
|
|
994
1063
|
locale: s.locale,
|
|
995
|
-
readonly:
|
|
1064
|
+
readonly: se.value,
|
|
996
1065
|
placeholder: s.placeholder,
|
|
997
1066
|
"placeholder-mode": s.placeholderMode,
|
|
998
1067
|
active: L.value === "wysiwyg" && !s.readonly,
|
|
999
|
-
"selection-toolbar":
|
|
1000
|
-
"onUpdate:modelValue":
|
|
1001
|
-
"onUpdate:loading":
|
|
1068
|
+
"selection-toolbar": F.value,
|
|
1069
|
+
"onUpdate:modelValue": G,
|
|
1070
|
+
"onUpdate:loading": ee
|
|
1002
1071
|
}, null, 8, [
|
|
1003
1072
|
"model-value",
|
|
1004
1073
|
"adapters",
|
|
@@ -1009,18 +1078,18 @@ var Ae = [
|
|
|
1009
1078
|
"placeholder-mode",
|
|
1010
1079
|
"active",
|
|
1011
1080
|
"selection-toolbar"
|
|
1012
|
-
])], 512), [[
|
|
1081
|
+
])], 512), [[C, L.value === "wysiwyg" || L.value === "split"]])], 8, Rt)]),
|
|
1013
1082
|
_: 3
|
|
1014
1083
|
})]),
|
|
1015
1084
|
_: 3
|
|
1016
|
-
})], 64)) : r("", !0), !
|
|
1085
|
+
})], 64)) : r("", !0), !j.value || M.value ? (m(), i("div", Bt, [y(t.$slots, "loading", {}, () => [
|
|
1017
1086
|
l[2] ||= a("div", { class: "kun-editor__skeleton" }, null, -1),
|
|
1018
1087
|
l[3] ||= a("div", { class: "kun-editor__skeleton" }, null, -1),
|
|
1019
1088
|
l[4] ||= a("div", { class: "kun-editor__skeleton" }, null, -1)
|
|
1020
|
-
])])) : r("", !0)], 8,
|
|
1089
|
+
])])) : r("", !0)], 8, Nt));
|
|
1021
1090
|
}
|
|
1022
|
-
}),
|
|
1023
|
-
e.component("KunEditor",
|
|
1091
|
+
}), Ht = { install(e) {
|
|
1092
|
+
e.component("KunEditor", Vt);
|
|
1024
1093
|
} };
|
|
1025
1094
|
//#endregion
|
|
1026
|
-
export {
|
|
1095
|
+
export { ot as EMOJI, Vt as KunEditor, Ht as KunEditorPlugin, F as parseHeadings };
|