@bagelink/vue 0.0.992 → 0.0.996
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/components/form/inputs/CodeEditor/Index.vue.d.ts +7 -11
- package/dist/components/form/inputs/CodeEditor/Index.vue.d.ts.map +1 -1
- package/dist/components/form/inputs/RichText/components/Toolbar.vue.d.ts.map +1 -1
- package/dist/components/form/inputs/RichText/composables/useEditor.d.ts.map +1 -1
- package/dist/components/form/inputs/RichText/config.d.ts.map +1 -1
- package/dist/components/form/inputs/RichText/index.vue.d.ts.map +1 -1
- package/dist/components/form/inputs/RichText/utils/formatting.d.ts +1 -0
- package/dist/components/form/inputs/RichText/utils/formatting.d.ts.map +1 -1
- package/dist/components/form/inputs/RichText/utils/media.d.ts +3 -3
- package/dist/components/form/inputs/RichText/utils/media.d.ts.map +1 -1
- package/dist/components/form/inputs/RichText/utils/selection.d.ts.map +1 -1
- package/dist/index.cjs +285 -102
- package/dist/index.mjs +285 -102
- package/dist/style.css +16 -14
- package/package.json +2 -1
- package/src/components/form/inputs/CodeEditor/Index.vue +26 -10
- package/src/components/form/inputs/RichText/components/Toolbar.vue +1 -1
- package/src/components/form/inputs/RichText/composables/useEditor.ts +17 -4
- package/src/components/form/inputs/RichText/config.ts +5 -1
- package/src/components/form/inputs/RichText/index.vue +1 -0
- package/src/components/form/inputs/RichText/richTextTypes.d.ts +2 -0
- package/src/components/form/inputs/RichText/utils/formatting.ts +281 -34
- package/src/components/form/inputs/RichText/utils/media.ts +9 -6
- package/src/components/form/inputs/RichText/utils/selection.ts +6 -22
package/dist/index.cjs
CHANGED
|
@@ -6517,7 +6517,7 @@ const _hoisted_1$1$1 = {
|
|
|
6517
6517
|
};
|
|
6518
6518
|
const _hoisted_2$1$1 = ["width", "height", "viewBox"];
|
|
6519
6519
|
const _hoisted_3$m = { class: "layer-rectangles" };
|
|
6520
|
-
const _hoisted_4$
|
|
6520
|
+
const _hoisted_4$d = ["transform", "onMouseover"];
|
|
6521
6521
|
const _hoisted_5$d = ["width", "height"];
|
|
6522
6522
|
const _hoisted_6$a = {
|
|
6523
6523
|
x: 0 + 10,
|
|
@@ -6569,7 +6569,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
6569
6569
|
)
|
|
6570
6570
|
])
|
|
6571
6571
|
])
|
|
6572
|
-
], 42, _hoisted_4$
|
|
6572
|
+
], 42, _hoisted_4$d);
|
|
6573
6573
|
}),
|
|
6574
6574
|
128
|
|
6575
6575
|
/* KEYED_FRAGMENT */
|
|
@@ -6793,7 +6793,7 @@ const _hoisted_2$q = {
|
|
|
6793
6793
|
class: "data-row m_py-05"
|
|
6794
6794
|
};
|
|
6795
6795
|
const _hoisted_3$l = { class: "key" };
|
|
6796
|
-
const _hoisted_4$
|
|
6796
|
+
const _hoisted_4$c = { class: "m-0" };
|
|
6797
6797
|
const _hoisted_5$c = { key: 1 };
|
|
6798
6798
|
const _hoisted_6$9 = {
|
|
6799
6799
|
key: 0,
|
|
@@ -6852,7 +6852,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
|
|
|
6852
6852
|
}, [
|
|
6853
6853
|
vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$q, [
|
|
6854
6854
|
vue.createElementVNode("div", _hoisted_3$l, [
|
|
6855
|
-
vue.createElementVNode("p", _hoisted_4$
|
|
6855
|
+
vue.createElementVNode("p", _hoisted_4$c, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1)
|
|
6856
6856
|
]),
|
|
6857
6857
|
vue.createVNode(vue.unref(_sfc_main$N), {
|
|
6858
6858
|
modelValue: itemData.value,
|
|
@@ -24238,28 +24238,18 @@ function requireCommon() {
|
|
|
24238
24238
|
return common;
|
|
24239
24239
|
}
|
|
24240
24240
|
requireCommon();
|
|
24241
|
-
const _hoisted_1$A = {
|
|
24242
|
-
const _hoisted_2$o = {
|
|
24243
|
-
|
|
24244
|
-
style: { "height": "800px" }
|
|
24245
|
-
};
|
|
24246
|
-
const _hoisted_3$j = { class: "numbers absolute inset-0 py-1 px-05 txt16 line-height-15 overflow-hidden z-999 w50px txt-start opacity-3 color-gray" };
|
|
24247
|
-
const _hoisted_4$c = ["onKeydown"];
|
|
24241
|
+
const _hoisted_1$A = { class: "code-editor-wrap ltr radius-1" };
|
|
24242
|
+
const _hoisted_2$o = { class: "numbers absolute inset-0 py-1 px-05 txt16 line-height-15 overflow-hidden z-1 w50px txt-start opacity-3 color-gray" };
|
|
24243
|
+
const _hoisted_3$j = ["onKeydown"];
|
|
24248
24244
|
const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
|
|
24249
24245
|
__name: "Index",
|
|
24250
|
-
props:
|
|
24246
|
+
props: {
|
|
24251
24247
|
language: {},
|
|
24252
|
-
readonly: { type: Boolean, default: false }
|
|
24253
|
-
|
|
24254
|
-
|
|
24255
|
-
type: String,
|
|
24256
|
-
default: ""
|
|
24257
|
-
},
|
|
24258
|
-
"modelModifiers": {}
|
|
24259
|
-
}),
|
|
24260
|
-
emits: ["update:modelValue"],
|
|
24248
|
+
readonly: { type: Boolean, default: false },
|
|
24249
|
+
modelValue: { default: "" }
|
|
24250
|
+
},
|
|
24261
24251
|
setup(__props) {
|
|
24262
|
-
|
|
24252
|
+
let code = vue.ref("");
|
|
24263
24253
|
function tabKeyDown(event) {
|
|
24264
24254
|
const target = event.target;
|
|
24265
24255
|
const start = target.selectionStart;
|
|
@@ -24270,12 +24260,26 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
|
|
|
24270
24260
|
target.selectionStart = target.selectionEnd = start + 2;
|
|
24271
24261
|
});
|
|
24272
24262
|
}
|
|
24263
|
+
const textarea = vue.ref();
|
|
24264
|
+
let height = vue.ref("300px");
|
|
24265
|
+
function setHeight() {
|
|
24266
|
+
if (!textarea.value) return;
|
|
24267
|
+
const { scrollHeight } = textarea.value;
|
|
24268
|
+
height.value = `${scrollHeight}px`;
|
|
24269
|
+
}
|
|
24273
24270
|
const Highlightjs = o.component;
|
|
24271
|
+
vue.watch(() => code.value, setHeight, { immediate: true });
|
|
24272
|
+
vue.watch(() => __props.modelValue, (value) => {
|
|
24273
|
+
if (value !== code.value) code.value = value;
|
|
24274
|
+
}, { immediate: true });
|
|
24274
24275
|
return (_ctx, _cache) => {
|
|
24275
24276
|
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
|
|
24276
|
-
vue.createElementVNode("div",
|
|
24277
|
-
|
|
24278
|
-
|
|
24277
|
+
vue.createElementVNode("div", {
|
|
24278
|
+
class: "relative block h-100",
|
|
24279
|
+
style: vue.normalizeStyle({ height: vue.unref(height) })
|
|
24280
|
+
}, [
|
|
24281
|
+
vue.createElementVNode("div", _hoisted_2$o, [
|
|
24282
|
+
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(code).split("\n"), (_2, index2) => {
|
|
24279
24283
|
return vue.openBlock(), vue.createElementBlock("div", {
|
|
24280
24284
|
key: index2,
|
|
24281
24285
|
class: "number txt-end"
|
|
@@ -24285,23 +24289,26 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
|
|
|
24285
24289
|
vue.createVNode(vue.unref(Highlightjs), {
|
|
24286
24290
|
class: "highlighted-code absolute inset-0",
|
|
24287
24291
|
autodetect: !_ctx.language,
|
|
24288
|
-
code: code
|
|
24292
|
+
code: vue.unref(code),
|
|
24289
24293
|
wrap: true,
|
|
24290
24294
|
language: _ctx.language
|
|
24291
24295
|
}, null, 8, ["autodetect", "code", "language"]),
|
|
24292
24296
|
!_ctx.readonly ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
|
|
24293
24297
|
key: 0,
|
|
24294
|
-
|
|
24298
|
+
ref_key: "textarea",
|
|
24299
|
+
ref: textarea,
|
|
24300
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(code) ? code.value = $event : code = $event),
|
|
24295
24301
|
spellcheck: false,
|
|
24296
24302
|
class: "code-editor absolute inset-0 overflow-hidden bg-transparent line-height-15 border-none m-0",
|
|
24297
24303
|
placeholder: "Write your code here",
|
|
24298
24304
|
"aria-label": "Code Editor",
|
|
24299
24305
|
"data-gramm": "false",
|
|
24306
|
+
onInput: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", vue.unref(code))),
|
|
24300
24307
|
onKeydown: vue.withKeys(vue.withModifiers(tabKeyDown, ["prevent"]), ["tab"])
|
|
24301
|
-
}, null, 40,
|
|
24302
|
-
[vue.vModelText, code
|
|
24308
|
+
}, null, 40, _hoisted_3$j)), [
|
|
24309
|
+
[vue.vModelText, vue.unref(code)]
|
|
24303
24310
|
]) : vue.createCommentVNode("", true)
|
|
24304
|
-
])
|
|
24311
|
+
], 4)
|
|
24305
24312
|
]);
|
|
24306
24313
|
};
|
|
24307
24314
|
}
|
|
@@ -34944,12 +34951,14 @@ const defaultToolbarConfig = [
|
|
|
34944
34951
|
"italic",
|
|
34945
34952
|
"underline",
|
|
34946
34953
|
"separator",
|
|
34954
|
+
"p",
|
|
34955
|
+
"blockquote",
|
|
34947
34956
|
"orderedList",
|
|
34948
34957
|
"unorderedList",
|
|
34949
34958
|
"separator",
|
|
34950
34959
|
"link",
|
|
34951
34960
|
"image",
|
|
34952
|
-
|
|
34961
|
+
// 'youtube',
|
|
34953
34962
|
"separator",
|
|
34954
34963
|
"splitView",
|
|
34955
34964
|
"clear",
|
|
@@ -34963,6 +34972,8 @@ const toolbarOptions = [
|
|
|
34963
34972
|
{ name: "h4", label: "h4", icon: "format_h4" },
|
|
34964
34973
|
{ name: "h5", label: "h5", icon: "format_h5" },
|
|
34965
34974
|
{ name: "h6", label: "h6", icon: "format_h6" },
|
|
34975
|
+
{ name: "p", label: "Paragraph", icon: "format_paragraph" },
|
|
34976
|
+
{ name: "blockquote", label: "Blockquote", icon: "format_quote" },
|
|
34966
34977
|
{ name: "bold", label: "Bold", icon: "format_bold" },
|
|
34967
34978
|
{ name: "italic", label: "Italic", icon: "format_italic" },
|
|
34968
34979
|
{ name: "underline", label: "Underline", icon: "format_underlined" },
|
|
@@ -35094,8 +35105,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
|
|
|
35094
35105
|
}, null, 8, ["onSelect"])
|
|
35095
35106
|
]),
|
|
35096
35107
|
_: 1
|
|
35097
|
-
})) : vue.
|
|
35098
|
-
action.name !== "separator" ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(Btn), {
|
|
35108
|
+
})) : action.name !== "separator" ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(Btn), {
|
|
35099
35109
|
key: 1,
|
|
35100
35110
|
icon: action.icon,
|
|
35101
35111
|
thin: "",
|
|
@@ -35115,12 +35125,91 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
|
|
|
35115
35125
|
};
|
|
35116
35126
|
}
|
|
35117
35127
|
});
|
|
35118
|
-
const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-
|
|
35128
|
+
const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-9688758a"]]);
|
|
35119
35129
|
function formatting(state2) {
|
|
35130
|
+
const { doc, range: range2, selection } = state2;
|
|
35131
|
+
function setRangeAndSelect(node, start, end) {
|
|
35132
|
+
if (!range2) return;
|
|
35133
|
+
range2.setStart(node, start);
|
|
35134
|
+
range2.setEnd(node, end);
|
|
35135
|
+
}
|
|
35136
|
+
const wrapWithTag = (content, tag) => {
|
|
35137
|
+
const wrapper = doc.createElement(tag);
|
|
35138
|
+
wrapper.textContent = content;
|
|
35139
|
+
return wrapper;
|
|
35140
|
+
};
|
|
35141
|
+
const createBlockElement = (tag, content) => {
|
|
35142
|
+
const block2 = doc.createElement(tag);
|
|
35143
|
+
block2.appendChild(content);
|
|
35144
|
+
return block2;
|
|
35145
|
+
};
|
|
35146
|
+
const clear = () => {
|
|
35147
|
+
if (!doc || !range2 || !selection) return;
|
|
35148
|
+
const inlineTags = ["b", "i", "u", "strong", "em"];
|
|
35149
|
+
const isInlineTag = (el) => el && inlineTags.includes(el.tagName.toLowerCase());
|
|
35150
|
+
if (range2.collapsed) {
|
|
35151
|
+
return;
|
|
35152
|
+
}
|
|
35153
|
+
const selectedContent = range2.extractContents();
|
|
35154
|
+
const cleanInlineTags = (node) => {
|
|
35155
|
+
if (node.nodeType === 1 && isInlineTag(node)) {
|
|
35156
|
+
const fragment2 = doc.createDocumentFragment();
|
|
35157
|
+
let child = node.firstChild;
|
|
35158
|
+
while (child) {
|
|
35159
|
+
const { nextSibling } = child;
|
|
35160
|
+
fragment2.appendChild(cleanInlineTags(child));
|
|
35161
|
+
child = nextSibling;
|
|
35162
|
+
}
|
|
35163
|
+
return fragment2;
|
|
35164
|
+
} else if (node.nodeType === 1) {
|
|
35165
|
+
const element = node.cloneNode(false);
|
|
35166
|
+
let child = node.firstChild;
|
|
35167
|
+
while (child) {
|
|
35168
|
+
const { nextSibling } = child;
|
|
35169
|
+
element.appendChild(cleanInlineTags(child));
|
|
35170
|
+
child = nextSibling;
|
|
35171
|
+
}
|
|
35172
|
+
return element;
|
|
35173
|
+
} else if (node.nodeType === 3) {
|
|
35174
|
+
return node;
|
|
35175
|
+
}
|
|
35176
|
+
return doc.createTextNode("");
|
|
35177
|
+
};
|
|
35178
|
+
const fragment = doc.createDocumentFragment();
|
|
35179
|
+
Array.from(selectedContent.childNodes).forEach((child) => {
|
|
35180
|
+
const cleanedChild = cleanInlineTags(child);
|
|
35181
|
+
if (cleanedChild.nodeType === 11) {
|
|
35182
|
+
fragment.appendChild(cleanedChild);
|
|
35183
|
+
} else {
|
|
35184
|
+
fragment.appendChild(cleanedChild);
|
|
35185
|
+
}
|
|
35186
|
+
});
|
|
35187
|
+
range2.deleteContents();
|
|
35188
|
+
range2.insertNode(fragment);
|
|
35189
|
+
const normalizeDom = (node) => {
|
|
35190
|
+
var _a2, _b;
|
|
35191
|
+
if (node.nodeType === 3 && ((_a2 = node.nextSibling) == null ? void 0 : _a2.nodeType) === 3) {
|
|
35192
|
+
if (node.textContent && node.nextSibling.textContent) {
|
|
35193
|
+
node.textContent += node.nextSibling.textContent;
|
|
35194
|
+
}
|
|
35195
|
+
(_b = node.parentNode) == null ? void 0 : _b.removeChild(node.nextSibling);
|
|
35196
|
+
} else if (node.nodeType === 1) {
|
|
35197
|
+
Array.from(node.childNodes).forEach((child) => {
|
|
35198
|
+
normalizeDom(child);
|
|
35199
|
+
});
|
|
35200
|
+
}
|
|
35201
|
+
};
|
|
35202
|
+
Array.from(fragment.childNodes).forEach((child) => {
|
|
35203
|
+
normalizeDom(child);
|
|
35204
|
+
});
|
|
35205
|
+
selection.removeAllRanges();
|
|
35206
|
+
range2.selectNodeContents(fragment);
|
|
35207
|
+
selection.addRange(range2);
|
|
35208
|
+
};
|
|
35120
35209
|
const text = (command) => {
|
|
35121
|
-
var _a2, _b;
|
|
35122
|
-
const { doc, range: range2, selection } = state2;
|
|
35210
|
+
var _a2, _b, _c, _d, _e2;
|
|
35123
35211
|
if (!doc || !range2 || !selection) return;
|
|
35212
|
+
const { startOffset, endOffset } = range2;
|
|
35124
35213
|
let tag = "";
|
|
35125
35214
|
if (command === "bold") tag = "b";
|
|
35126
35215
|
if (command === "italic") tag = "i";
|
|
@@ -35130,84 +35219,179 @@ function formatting(state2) {
|
|
|
35130
35219
|
const relatedTags = {
|
|
35131
35220
|
b: ["strong"],
|
|
35132
35221
|
i: ["em"],
|
|
35133
|
-
u: [],
|
|
35222
|
+
u: ["u"],
|
|
35134
35223
|
em: ["i"],
|
|
35135
35224
|
strong: ["b"]
|
|
35136
35225
|
};
|
|
35137
|
-
const
|
|
35138
|
-
|
|
35139
|
-
|
|
35226
|
+
const isTagMatch = (el) => el && (el.tagName.toLowerCase() === tag || relatedTags[tag].includes(el.tagName.toLowerCase()));
|
|
35227
|
+
if (range2.collapsed) {
|
|
35228
|
+
const container2 = range2.commonAncestorContainer;
|
|
35229
|
+
const parent2 = container2.parentElement;
|
|
35230
|
+
if (parent2 && isTagMatch(parent2)) {
|
|
35231
|
+
const textNode = doc.createTextNode(parent2.textContent || "");
|
|
35232
|
+
(_a2 = parent2.parentNode) == null ? void 0 : _a2.replaceChild(textNode, parent2);
|
|
35233
|
+
range2.selectNodeContents(textNode);
|
|
35234
|
+
selection.removeAllRanges();
|
|
35235
|
+
setRangeAndSelect(textNode, startOffset, endOffset);
|
|
35236
|
+
selection.addRange(range2);
|
|
35237
|
+
}
|
|
35238
|
+
return;
|
|
35239
|
+
}
|
|
35140
35240
|
const container = range2.commonAncestorContainer;
|
|
35141
35241
|
const parent = container.parentElement;
|
|
35142
|
-
if (parent && (parent
|
|
35143
|
-
|
|
35144
|
-
|
|
35145
|
-
|
|
35146
|
-
|
|
35242
|
+
if (parent && isTagMatch(parent)) {
|
|
35243
|
+
const parentText = parent.textContent || "";
|
|
35244
|
+
const beforeText = parentText.substring(0, range2.startOffset - parentText.indexOf(parent.textContent || ""));
|
|
35245
|
+
const selectedText = parentText.substring(range2.startOffset, range2.endOffset);
|
|
35246
|
+
const afterText = parentText.substring(range2.endOffset);
|
|
35247
|
+
if (beforeText) {
|
|
35248
|
+
const beforeNode = wrapWithTag(beforeText, tag);
|
|
35249
|
+
(_b = parent.parentNode) == null ? void 0 : _b.insertBefore(beforeNode, parent);
|
|
35250
|
+
}
|
|
35251
|
+
const unwrappedTextNode = doc.createTextNode(selectedText);
|
|
35252
|
+
(_c = parent.parentNode) == null ? void 0 : _c.insertBefore(unwrappedTextNode, parent);
|
|
35253
|
+
if (afterText) {
|
|
35254
|
+
const afterNode = wrapWithTag(afterText, tag);
|
|
35255
|
+
(_d = parent.parentNode) == null ? void 0 : _d.insertBefore(afterNode, parent);
|
|
35256
|
+
}
|
|
35257
|
+
(_e2 = parent.parentNode) == null ? void 0 : _e2.removeChild(parent);
|
|
35258
|
+
range2.selectNode(unwrappedTextNode);
|
|
35147
35259
|
} else {
|
|
35260
|
+
const selectedContent = range2.extractContents();
|
|
35261
|
+
const wrapper = doc.createElement(tag);
|
|
35262
|
+
wrapper.appendChild(selectedContent);
|
|
35148
35263
|
range2.insertNode(wrapper);
|
|
35264
|
+
const nestedTags = wrapper.querySelectorAll(`${tag},${(relatedTags[tag] || []).join(",")}`);
|
|
35265
|
+
nestedTags.forEach((nestedTag) => {
|
|
35266
|
+
var _a3, _b2;
|
|
35267
|
+
while (nestedTag.firstChild) {
|
|
35268
|
+
(_a3 = nestedTag.parentNode) == null ? void 0 : _a3.insertBefore(nestedTag.firstChild, nestedTag);
|
|
35269
|
+
}
|
|
35270
|
+
(_b2 = nestedTag.parentNode) == null ? void 0 : _b2.removeChild(nestedTag);
|
|
35271
|
+
});
|
|
35272
|
+
range2.selectNodeContents(wrapper);
|
|
35149
35273
|
}
|
|
35150
|
-
const nestedTags = wrapper.querySelectorAll(`${tag},${(relatedTags[tag] || []).join(",")}`);
|
|
35151
|
-
nestedTags.forEach((nestedTag) => {
|
|
35152
|
-
var _a3, _b2;
|
|
35153
|
-
while (nestedTag.firstChild) {
|
|
35154
|
-
(_a3 = nestedTag.parentNode) == null ? void 0 : _a3.insertBefore(nestedTag.firstChild, nestedTag);
|
|
35155
|
-
}
|
|
35156
|
-
(_b2 = nestedTag.parentNode) == null ? void 0 : _b2.removeChild(nestedTag);
|
|
35157
|
-
});
|
|
35158
35274
|
selection.removeAllRanges();
|
|
35159
35275
|
selection.addRange(range2);
|
|
35160
35276
|
};
|
|
35161
35277
|
const block = (command, value) => {
|
|
35162
35278
|
var _a2;
|
|
35163
|
-
const { doc, range: range2, selection } = state2;
|
|
35164
35279
|
if (!doc || !range2 || !selection) return;
|
|
35165
35280
|
const container = range2.commonAncestorContainer;
|
|
35166
35281
|
const parent = container.nodeType === 3 ? container.parentElement : container;
|
|
35167
35282
|
if (!parent) return;
|
|
35168
|
-
const currentHeading = parent.closest("p,h1,h2,h3,h4,h5,h6");
|
|
35283
|
+
const currentHeading = parent.closest("p,h1,h2,h3,h4,h5,h6,blockquote");
|
|
35169
35284
|
const { startOffset, endOffset } = range2;
|
|
35170
35285
|
const blockEl = currentHeading || parent.closest("p,h1,h2,h3,h4,h5,h6") || parent;
|
|
35171
35286
|
range2.selectNodeContents(blockEl);
|
|
35172
35287
|
const content = range2.extractContents();
|
|
35173
|
-
const newElement =
|
|
35174
|
-
newElement.appendChild(content);
|
|
35288
|
+
const newElement = createBlockElement(value, content);
|
|
35175
35289
|
if (currentHeading) {
|
|
35176
35290
|
(_a2 = currentHeading.parentNode) == null ? void 0 : _a2.replaceChild(newElement, currentHeading);
|
|
35177
35291
|
} else {
|
|
35178
35292
|
range2.insertNode(newElement);
|
|
35179
35293
|
}
|
|
35180
35294
|
selection.removeAllRanges();
|
|
35181
|
-
|
|
35182
|
-
range2.setEnd(container, endOffset);
|
|
35295
|
+
setRangeAndSelect(container, startOffset, endOffset);
|
|
35183
35296
|
selection.addRange(range2);
|
|
35184
35297
|
};
|
|
35185
35298
|
const list = (command) => {
|
|
35186
35299
|
var _a2;
|
|
35187
|
-
|
|
35188
|
-
if (!doc || !range2) return;
|
|
35300
|
+
if (!doc || !range2 || !selection) return;
|
|
35189
35301
|
const listTag = command === "orderedList" ? "ol" : "ul";
|
|
35190
35302
|
const container = range2.commonAncestorContainer;
|
|
35191
35303
|
const parent = container.nodeType === 3 ? container.parentElement : container;
|
|
35192
35304
|
const currentList = parent == null ? void 0 : parent.closest("ul,ol");
|
|
35305
|
+
if (!parent) return;
|
|
35306
|
+
const listItem = parent.closest("li");
|
|
35307
|
+
if (listItem) {
|
|
35308
|
+
const listParent = listItem.parentElement;
|
|
35309
|
+
if (!listParent) return;
|
|
35310
|
+
const beforeFragment = doc.createDocumentFragment();
|
|
35311
|
+
const afterFragment = doc.createDocumentFragment();
|
|
35312
|
+
let currentNode = listParent.firstChild;
|
|
35313
|
+
let isBefore2 = true;
|
|
35314
|
+
while (currentNode) {
|
|
35315
|
+
if (currentNode === listItem) {
|
|
35316
|
+
isBefore2 = false;
|
|
35317
|
+
} else if (isBefore2) {
|
|
35318
|
+
beforeFragment.appendChild(currentNode.cloneNode(true));
|
|
35319
|
+
} else {
|
|
35320
|
+
afterFragment.appendChild(currentNode.cloneNode(true));
|
|
35321
|
+
}
|
|
35322
|
+
currentNode = currentNode.nextSibling;
|
|
35323
|
+
}
|
|
35324
|
+
const standaloneBlock = doc.createElement("p");
|
|
35325
|
+
while (listItem.firstChild) {
|
|
35326
|
+
standaloneBlock.appendChild(listItem.firstChild);
|
|
35327
|
+
}
|
|
35328
|
+
const grandParent = listParent.parentNode;
|
|
35329
|
+
if (!grandParent) return;
|
|
35330
|
+
if (beforeFragment.childNodes.length > 0) {
|
|
35331
|
+
const newListBefore = doc.createElement(listParent.tagName.toLowerCase());
|
|
35332
|
+
newListBefore.appendChild(beforeFragment);
|
|
35333
|
+
grandParent.insertBefore(newListBefore, listParent);
|
|
35334
|
+
}
|
|
35335
|
+
grandParent.insertBefore(standaloneBlock, listParent);
|
|
35336
|
+
if (afterFragment.childNodes.length > 0) {
|
|
35337
|
+
const newListAfter = doc.createElement(listParent.tagName.toLowerCase());
|
|
35338
|
+
newListAfter.appendChild(afterFragment);
|
|
35339
|
+
grandParent.insertBefore(newListAfter, listParent.nextSibling);
|
|
35340
|
+
}
|
|
35341
|
+
grandParent.removeChild(listParent);
|
|
35342
|
+
selection.removeAllRanges();
|
|
35343
|
+
range2.selectNodeContents(standaloneBlock);
|
|
35344
|
+
selection.addRange(range2);
|
|
35345
|
+
return;
|
|
35346
|
+
}
|
|
35347
|
+
const startBlock = parent.closest("p,h1,h2,h3,h4,h5,h6,blockquote") || parent;
|
|
35348
|
+
const endBlock = range2.endContainer.nodeType === 3 ? ((_a2 = range2.endContainer.parentElement) == null ? void 0 : _a2.closest("p,h1,h2,h3,h4,h5,h6,blockquote")) || range2.endContainer.parentElement : range2.endContainer;
|
|
35349
|
+
const blocks = [];
|
|
35350
|
+
let currentBlock = startBlock;
|
|
35351
|
+
while (currentBlock) {
|
|
35352
|
+
blocks.push(currentBlock);
|
|
35353
|
+
if (currentBlock === endBlock) break;
|
|
35354
|
+
currentBlock = currentBlock.nextElementSibling;
|
|
35355
|
+
}
|
|
35193
35356
|
if (currentList) {
|
|
35194
|
-
const
|
|
35195
|
-
|
|
35196
|
-
|
|
35197
|
-
|
|
35357
|
+
const fragment = doc.createDocumentFragment();
|
|
35358
|
+
blocks.forEach((block2) => {
|
|
35359
|
+
const paragraph = doc.createElement("p");
|
|
35360
|
+
while (block2.firstChild) {
|
|
35361
|
+
paragraph.appendChild(block2.firstChild);
|
|
35362
|
+
}
|
|
35363
|
+
fragment.appendChild(paragraph);
|
|
35364
|
+
});
|
|
35365
|
+
const listParent = currentList.parentNode;
|
|
35366
|
+
if (listParent) {
|
|
35367
|
+
listParent.insertBefore(fragment, currentList.nextSibling);
|
|
35368
|
+
if (!currentList.querySelector("li")) {
|
|
35369
|
+
listParent.removeChild(currentList);
|
|
35370
|
+
}
|
|
35371
|
+
}
|
|
35372
|
+
selection.removeAllRanges();
|
|
35373
|
+
range2.selectNodeContents(fragment);
|
|
35374
|
+
selection.addRange(range2);
|
|
35198
35375
|
} else {
|
|
35199
35376
|
const listEl = doc.createElement(listTag);
|
|
35200
|
-
|
|
35201
|
-
|
|
35202
|
-
|
|
35203
|
-
|
|
35377
|
+
blocks.forEach((block2) => {
|
|
35378
|
+
const li = doc.createElement("li");
|
|
35379
|
+
while (block2.firstChild) {
|
|
35380
|
+
li.appendChild(block2.firstChild);
|
|
35381
|
+
}
|
|
35382
|
+
listEl.appendChild(li);
|
|
35383
|
+
});
|
|
35204
35384
|
range2.insertNode(listEl);
|
|
35385
|
+
selection.removeAllRanges();
|
|
35386
|
+
range2.selectNodeContents(listEl);
|
|
35387
|
+
selection.addRange(range2);
|
|
35205
35388
|
}
|
|
35206
35389
|
};
|
|
35207
|
-
return { text, block, list };
|
|
35390
|
+
return { text, block, list, clear };
|
|
35208
35391
|
}
|
|
35209
|
-
function insertImage(modal,
|
|
35210
|
-
|
|
35392
|
+
function insertImage(modal, state2) {
|
|
35393
|
+
const { range: range2, doc } = state2;
|
|
35394
|
+
if (!range2 || !doc) return;
|
|
35211
35395
|
modal.showModalForm({
|
|
35212
35396
|
title: "Upload Image",
|
|
35213
35397
|
schema: [
|
|
@@ -35219,14 +35403,15 @@ function insertImage(modal, doc, range2) {
|
|
|
35219
35403
|
const img = doc.createElement("img");
|
|
35220
35404
|
img.src = data2.src;
|
|
35221
35405
|
img.alt = data2.alt;
|
|
35222
|
-
range2.
|
|
35406
|
+
range2.collapse(false);
|
|
35223
35407
|
range2.insertNode(img);
|
|
35224
35408
|
}
|
|
35225
35409
|
}
|
|
35226
35410
|
});
|
|
35227
35411
|
}
|
|
35228
|
-
function insertLink(modal,
|
|
35229
|
-
|
|
35412
|
+
function insertLink(modal, state2) {
|
|
35413
|
+
const { range: range2, doc } = state2;
|
|
35414
|
+
if (!range2 || !doc) return;
|
|
35230
35415
|
modal.showModalForm({
|
|
35231
35416
|
title: "Insert Link",
|
|
35232
35417
|
schema: [
|
|
@@ -35255,28 +35440,12 @@ function isStyleActive(style, doc) {
|
|
|
35255
35440
|
if (tags.includes(element.tagName.toLowerCase())) return true;
|
|
35256
35441
|
return checkParent(element.parentElement, tags);
|
|
35257
35442
|
};
|
|
35258
|
-
|
|
35259
|
-
|
|
35260
|
-
|
|
35261
|
-
|
|
35262
|
-
|
|
35263
|
-
|
|
35264
|
-
return checkParent(parent, ["u"]);
|
|
35265
|
-
case "h1":
|
|
35266
|
-
return checkParent(parent, ["h1"]);
|
|
35267
|
-
case "h2":
|
|
35268
|
-
return checkParent(parent, ["h2"]);
|
|
35269
|
-
case "h3":
|
|
35270
|
-
return checkParent(parent, ["h3"]);
|
|
35271
|
-
case "h4":
|
|
35272
|
-
return checkParent(parent, ["h4"]);
|
|
35273
|
-
case "h5":
|
|
35274
|
-
return checkParent(parent, ["h5"]);
|
|
35275
|
-
case "h6":
|
|
35276
|
-
return checkParent(parent, ["h6"]);
|
|
35277
|
-
default:
|
|
35278
|
-
return false;
|
|
35279
|
-
}
|
|
35443
|
+
const styleTags = {
|
|
35444
|
+
bold: ["strong", "b"],
|
|
35445
|
+
italic: ["em", "i"],
|
|
35446
|
+
underline: ["u"]
|
|
35447
|
+
};
|
|
35448
|
+
return checkParent(parent, styleTags[style] ?? [style]);
|
|
35280
35449
|
}
|
|
35281
35450
|
function insertTable(rows, cols, state2) {
|
|
35282
35451
|
if (!state2.doc) return;
|
|
@@ -35383,7 +35552,12 @@ function useEditor() {
|
|
|
35383
35552
|
"h3",
|
|
35384
35553
|
"h4",
|
|
35385
35554
|
"h5",
|
|
35386
|
-
"h6"
|
|
35555
|
+
"h6",
|
|
35556
|
+
"blockquote",
|
|
35557
|
+
"table",
|
|
35558
|
+
"p",
|
|
35559
|
+
"ol",
|
|
35560
|
+
"li"
|
|
35387
35561
|
];
|
|
35388
35562
|
styleTypes.forEach((style) => {
|
|
35389
35563
|
if (state2.doc && isStyleActive(style, state2.doc)) {
|
|
@@ -35451,7 +35625,7 @@ function useEditor() {
|
|
|
35451
35625
|
if (!state2.doc.body.contains(selection.anchorNode)) {
|
|
35452
35626
|
state2.doc.body.focus();
|
|
35453
35627
|
}
|
|
35454
|
-
console.log(command);
|
|
35628
|
+
console.log("command", command, value2);
|
|
35455
35629
|
switch (command) {
|
|
35456
35630
|
case "insertTable": {
|
|
35457
35631
|
const [rows, cols] = (value2 == null ? void 0 : value2.split("x").map(Number)) || [3, 3];
|
|
@@ -35484,12 +35658,16 @@ function useEditor() {
|
|
|
35484
35658
|
case "underline":
|
|
35485
35659
|
format2().text(command);
|
|
35486
35660
|
break;
|
|
35661
|
+
case "clear": {
|
|
35662
|
+
format2().clear();
|
|
35663
|
+
break;
|
|
35664
|
+
}
|
|
35487
35665
|
case "orderedList":
|
|
35488
35666
|
case "unorderedList":
|
|
35489
35667
|
format2().list(command);
|
|
35490
35668
|
break;
|
|
35491
35669
|
case "image":
|
|
35492
|
-
insertImage(state2.modal, state2
|
|
35670
|
+
insertImage(state2.modal, state2);
|
|
35493
35671
|
break;
|
|
35494
35672
|
// case 'youtube':
|
|
35495
35673
|
// if (isCaret) return
|
|
@@ -35497,7 +35675,11 @@ function useEditor() {
|
|
|
35497
35675
|
// break
|
|
35498
35676
|
case "link":
|
|
35499
35677
|
if (isCaret) return;
|
|
35500
|
-
insertLink(state2.modal, state2
|
|
35678
|
+
insertLink(state2.modal, state2);
|
|
35679
|
+
break;
|
|
35680
|
+
case "blockquote":
|
|
35681
|
+
case "p":
|
|
35682
|
+
format2().block(command, value2 || command);
|
|
35501
35683
|
break;
|
|
35502
35684
|
default:
|
|
35503
35685
|
if (/^h[1-6]$/.test(command)) {
|
|
@@ -35598,6 +35780,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
|
|
|
35598
35780
|
vue.watch(() => props2.modelValue, (newValue) => {
|
|
35599
35781
|
if (newValue !== editor.state.content) {
|
|
35600
35782
|
editor.state.content = newValue;
|
|
35783
|
+
editor.updateContent("html");
|
|
35601
35784
|
}
|
|
35602
35785
|
});
|
|
35603
35786
|
vue.watch(() => editor.state.content, (newValue) => {
|
|
@@ -35641,7 +35824,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
|
|
|
35641
35824
|
};
|
|
35642
35825
|
}
|
|
35643
35826
|
});
|
|
35644
|
-
const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-
|
|
35827
|
+
const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-e274dd3b"]]);
|
|
35645
35828
|
const _hoisted_1$m = { class: "flex gap-05" };
|
|
35646
35829
|
const _hoisted_2$e = ["disabled"];
|
|
35647
35830
|
const _hoisted_3$b = { key: 1 };
|