@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.
Files changed (24) hide show
  1. package/dist/components/form/inputs/CodeEditor/Index.vue.d.ts +7 -11
  2. package/dist/components/form/inputs/CodeEditor/Index.vue.d.ts.map +1 -1
  3. package/dist/components/form/inputs/RichText/components/Toolbar.vue.d.ts.map +1 -1
  4. package/dist/components/form/inputs/RichText/composables/useEditor.d.ts.map +1 -1
  5. package/dist/components/form/inputs/RichText/config.d.ts.map +1 -1
  6. package/dist/components/form/inputs/RichText/index.vue.d.ts.map +1 -1
  7. package/dist/components/form/inputs/RichText/utils/formatting.d.ts +1 -0
  8. package/dist/components/form/inputs/RichText/utils/formatting.d.ts.map +1 -1
  9. package/dist/components/form/inputs/RichText/utils/media.d.ts +3 -3
  10. package/dist/components/form/inputs/RichText/utils/media.d.ts.map +1 -1
  11. package/dist/components/form/inputs/RichText/utils/selection.d.ts.map +1 -1
  12. package/dist/index.cjs +285 -102
  13. package/dist/index.mjs +285 -102
  14. package/dist/style.css +16 -14
  15. package/package.json +2 -1
  16. package/src/components/form/inputs/CodeEditor/Index.vue +26 -10
  17. package/src/components/form/inputs/RichText/components/Toolbar.vue +1 -1
  18. package/src/components/form/inputs/RichText/composables/useEditor.ts +17 -4
  19. package/src/components/form/inputs/RichText/config.ts +5 -1
  20. package/src/components/form/inputs/RichText/index.vue +1 -0
  21. package/src/components/form/inputs/RichText/richTextTypes.d.ts +2 -0
  22. package/src/components/form/inputs/RichText/utils/formatting.ts +281 -34
  23. package/src/components/form/inputs/RichText/utils/media.ts +9 -6
  24. 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$e = ["transform", "onMouseover"];
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$e);
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$d = { class: "m-0" };
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$d, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1)
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 = { style: { "max-height": "900px", "height": "100vh", "overflow": "scroll" } };
24242
- const _hoisted_2$o = {
24243
- class: "relative block h-100 ltr code-editor-wrap",
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: /* @__PURE__ */ vue.mergeModels({
24246
+ props: {
24251
24247
  language: {},
24252
- readonly: { type: Boolean, default: false }
24253
- }, {
24254
- "modelValue": {
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
- const code = vue.useModel(__props, "modelValue");
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", _hoisted_2$o, [
24277
- vue.createElementVNode("div", _hoisted_3$j, [
24278
- (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(code.value.split("\n"), (_2, index2) => {
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.value,
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
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => code.value = $event),
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, _hoisted_4$c)), [
24302
- [vue.vModelText, code.value]
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
- "youtube",
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.createCommentVNode("", true),
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-df400bb5"]]);
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 selectedContent = range2.extractContents();
35138
- const wrapper = doc.createElement(tag);
35139
- wrapper.appendChild(selectedContent);
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.tagName.toLowerCase() === tag || relatedTags[tag].includes(parent.tagName.toLowerCase()))) {
35143
- while (wrapper.firstChild) {
35144
- (_a2 = parent.parentNode) == null ? void 0 : _a2.insertBefore(wrapper.firstChild, parent);
35145
- }
35146
- (_b = parent.parentNode) == null ? void 0 : _b.removeChild(parent);
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 = doc.createElement(currentHeading && currentHeading.tagName.toLowerCase() === value ? "p" : value);
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
- range2.setStart(container, startOffset);
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
- const { doc, range: range2 } = state2;
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 content = range2.extractContents();
35195
- const p2 = doc.createElement("p");
35196
- p2.appendChild(content);
35197
- (_a2 = currentList.parentNode) == null ? void 0 : _a2.replaceChild(p2, currentList);
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
- const li = doc.createElement("li");
35201
- const content = range2.extractContents();
35202
- li.appendChild(content);
35203
- listEl.appendChild(li);
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, doc, range2) {
35210
- if (!range2) return;
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.deleteContents();
35406
+ range2.collapse(false);
35223
35407
  range2.insertNode(img);
35224
35408
  }
35225
35409
  }
35226
35410
  });
35227
35411
  }
35228
- function insertLink(modal, doc, range2) {
35229
- if (!range2) return;
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
- switch (style) {
35259
- case "bold":
35260
- return checkParent(parent, ["strong", "b"]);
35261
- case "italic":
35262
- return checkParent(parent, ["em", "i"]);
35263
- case "underline":
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.doc, range2);
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.doc, range2);
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-faf0065a"]]);
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 };