vuewrite 0.0.24-a → 0.0.25-a

package/dist/vuewrite.d.ts

@@ -71,6 +71,7 @@ styles?: Style[] | undefined;
 autofocus?: boolean | undefined;
 autoselect?: boolean | undefined;
 preventMultiline?: boolean | undefined;
+htmlParser?: ((el: Element) => string | null | void) | undefined;
 }>, {
 currentStyles: ComputedRef<Map<string, Style>>;
 currentBlock: ComputedRef<    {
@@ -127,14 +128,13 @@ styles?: Style[] | undefined;
 autofocus?: boolean | undefined;
 autoselect?: boolean | undefined;
 preventMultiline?: boolean | undefined;
+htmlParser?: ((el: Element) => string | null | void) | undefined;
 }>>> & {
 onKeydown?: ((...args: any[]) => any) | undefined;
 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 "onUpdate:styles"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>, {
-    _before?(_: {}): any;
     placeholder?(_: {}): any;
-    _after?(_: {}): any;
 }>;
 
 declare class TextEditorHistory {
@@ -263,6 +263,7 @@ decorator?: any;
 renderer?: any;
 parser?: any;
 modelValue?: any;
+listParser?: any;
 }>, () => VNode<RendererNode, RendererElement, {
 [key: string]: any;
 }>, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<Readonly<{
@@ -271,12 +272,14 @@ decorator?: any;
 renderer?: any;
 parser?: any;
 modelValue?: any;
+listParser?: any;
 }>>>, {
 readonly styles?: any;
 readonly decorator?: any;
 readonly renderer?: any;
 readonly parser?: any;
 readonly modelValue?: any;
+readonly listParser?: any;
 }, {}>;
 
 declare type TextParser = (text: string) => Style[];

package/dist/vuewrite.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { getCurrentScope, onScopeDispose, unref, watch, reactive, computed, ref, defineComponent, getCurrentInstance, h, nextTick, useSlots, isProxy, toRaw, onMounted, openBlock, createElementBlock, renderSlot, Fragment, renderList, createBlock, createCommentVNode } from "vue";
+import { getCurrentScope, onScopeDispose, unref, watch, reactive, computed, ref, defineComponent, getCurrentInstance, h, nextTick, useSlots, isProxy, toRaw, onMounted, openBlock, createElementBlock, Fragment, renderList, createBlock, renderSlot, createCommentVNode } from "vue";
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
@@ -814,7 +814,7 @@ const createClipboardEvents = (store, props) => {
     store.deleteSelected();
     store.history.push("setText");
   };
-  const insertText = (text) => {
+  const insertText = (text, type) => {
     if (props.preventMultiline) {
       const blocks = text.split("\n");
       store.insertText(blocks[0]);
@@ -823,11 +823,14 @@ const createClipboardEvents = (store, props) => {
         store.insertText(blocks[i]);
       }
     } else {
+      if (type && store.currentBlock) {
+        store.currentBlock.type = type;
+      }
       store.insertText(text);
     }
   };
-  const parseHtml = (node) => {
-    var _a;
+  const parseHtml = (node, type) => {
+    var _a, _b, _c, _d;
     let isTextNode = false;
     for (let _node of node.childNodes) {
       if (_node.nodeType === Node.TEXT_NODE && ((_a = _node.textContent) == null ? void 0 : _a.trim()) || _node.nodeType == Node.ELEMENT_NODE && _node.tagName === "SPAN") {
@@ -839,15 +842,19 @@ const createClipboardEvents = (store, props) => {
       const text = node.textContent;
       if (!text)
         return;
-      insertText(text);
+      insertText(text, type ?? ((_b = props.htmlParser) == null ? void 0 : _b.call(props, node)) ?? void 0);
       store.addNewLine();
       return;
     }
     for (let child of node.children) {
       if (child.tagName === "DIV") {
-        parseHtml(child);
+        parseHtml(child, type);
+      } else if (child.tagName === "UL" || child.tagName === "OL") {
+        for (let li of child.children) {
+          parseHtml(li, ((_c = props.htmlParser) == null ? void 0 : _c.call(props, li)) ?? void 0);
+        }
       } else {
-        insertText(child.textContent ?? "");
+        insertText(child.textContent ?? "", type ?? ((_d = props.htmlParser) == null ? void 0 : _d.call(props, child)) ?? void 0);
         store.addNewLine();
       }
     }
@@ -889,7 +896,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     styles: {},
     autofocus: { type: Boolean },
     autoselect: { type: Boolean },
-    preventMultiline: { type: Boolean }
+    preventMultiline: { type: Boolean },
+    htmlParser: { type: Function }
   },
   emits: ["keydown", "update:modelValue", "update:styles"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1089,7 +1097,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         onCut: _cache[3] || (_cache[3] = //@ts-ignore
         (...args) => unref(onCut) && unref(onCut)(...args))
       }, [
-        renderSlot(_ctx.$slots, "_before"),
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(store).blocks, (block) => {
           return openBlock(), createBlock(_sfc_main$2, {
             key: block.id,
@@ -1101,30 +1108,66 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             onPostrender: onPostRender
           }, null, 8, ["block", "slots", "renderer", "decorator", "parser"]);
         }), 128)),
-        unref(store).blocks.length === 1 && unref(store).blocks[0].text === "" && !unref(store).blocks[0].type ? renderSlot(_ctx.$slots, "placeholder", { key: 0 }) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "_after")
+        unref(store).blocks.length === 1 && unref(store).blocks[0].text === "" && !unref(store).blocks[0].type ? renderSlot(_ctx.$slots, "placeholder", { key: 0 }) : createCommentVNode("", true)
       ], 544);
     };
   }
 });
+const wrapLists = (blocks, creator) => {
+  if (!blocks.some((i) => !!creator(i))) {
+    return blocks;
+  }
+  const arr = [];
+  let liArray = [];
+  let currentListTag = null;
+  for (let i of blocks) {
+    let listTag = creator(i);
+    if (listTag) {
+      if (currentListTag == null || listTag !== currentListTag) {
+        liArray = [];
+        arr.push(liArray);
+        currentListTag = listTag;
+      }
+      liArray.push(i);
+    } else {
+      arr.push(i);
+      currentListTag = null;
+    }
+  }
+  return arr;
+};
 const _sfc_main = defineComponent({
-  props: ["modelValue", "decorator", "parser", "styles", "renderer"],
+  props: ["modelValue", "decorator", "parser", "styles", "renderer", "listParser"],
   setup(props, { slots }) {
     const blocks = computed(() => {
       if (Array.isArray(props.modelValue)) {
+        if (props.listParser && props.modelValue.some((i) => props.listParser(i))) {
+          return wrapLists(props.modelValue, props.listParser);
+        }
         return props.modelValue;
       }
       return [{ text: props.modelValue, styles: props.styles ?? [] }];
     });
-    return () => h("div", blocks.value.map((block) => h(_sfc_main$2, {
-      key: block.id,
-      block,
-      slots,
-      decorator: props.decorator,
-      renderer: props.renderer,
-      parser: props.parser,
-      static: true
-    })));
+    return () => h("div", blocks.value.map((block) => {
+      var _a;
+      return Array.isArray(block) ? h(((_a = props.listParser) == null ? void 0 : _a.call(props, block[0])) ?? "ul", { key: block[0].id }, block.map((block2) => h(_sfc_main$2, {
+        key: block2.id,
+        block: block2,
+        slots,
+        decorator: props.decorator,
+        renderer: props.renderer,
+        parser: props.parser,
+        static: true
+      }))) : h(_sfc_main$2, {
+        key: block.id,
+        block,
+        slots,
+        decorator: props.decorator,
+        renderer: props.renderer,
+        parser: props.parser,
+        static: true
+      });
+    }));
   }
 });
 export {

package/package.json

@@ -2,7 +2,7 @@
   "name": "vuewrite",
   "description": "Rich Text Editor based on Vue3 reactivity",
   "private": false,
-  "version": "0.0.24-a",
+  "version": "0.0.25-a",
   "type": "module",
   "license": "MIT",
   "author": "den59k",