mce 0.15.8 → 0.15.9

package/dist/crdt/Doc.d.ts

@@ -41,7 +41,7 @@ export declare class Doc extends Model {
     set(source: Document): this;
     protected _proxyProps(obj: CoreObject, yMap: Y.Map<any>, isMeta?: boolean): void;
     protected _proxyChildren(node: Node, childrenIds: Y.Array<string>): void;
-    protected _proxyNode(node: Node, yNode?: YNode, yChildrenIds?: Y.Array<string>): YNode;
+    protected _proxyNode(node: Node, yNode?: YNode, yChildrenIds?: Y.Array<string>): void;
     protected _initYNode(yNode: YNode): Node;
     toJSON(): Record<string, any>;
 }

package/dist/index.js

@@ -688,7 +688,7 @@ class Doc extends Model {
   }
   _proxyChildren(node, childrenIds) {
     node.on("addChild", (child, newIndex) => {
-      if (this._transacting === false) {
+      if (this._transacting === false || child.internalMode !== "default") {
         return;
       }
       this.transact(() => {
@@ -698,7 +698,7 @@ class Doc extends Model {
       });
     });
     node.on("removeChild", (child, oldIndex) => {
-      if (this._transacting === false) {
+      if (this._transacting === false || child.internalMode !== "default") {
         return;
       }
       this.transact(() => {
@@ -715,7 +715,7 @@ class Doc extends Model {
     const cachedChildrenIds = childrenIds.toArray();
     const observeFn = (event, transaction) => {
       const skip = this._isSelfTransaction(transaction);
-      this._debug(`yChildren ${node.id} changes`, event.changes.delta);
+      this._debug(`yChildren ${node.id} changes skip:${skip}`, event.changes.delta);
       let retain = 0;
       event.changes.delta.forEach((action) => {
         if (action.retain !== void 0) {
@@ -771,6 +771,9 @@ class Doc extends Model {
     childrenIds.observe(observeFn);
   }
   _proxyNode(node, yNode, yChildrenIds) {
+    if (node.internalMode !== "default") {
+      return;
+    }
     const id = node.id;
     if (!yNode) {
       yNode = this._yChildren.get(id);
@@ -839,7 +842,6 @@ class Doc extends Model {
       }
       this._proxyChildren(node, yChildrenIds);
     }
-    return yNode;
   }
   _initYNode(yNode) {
     const id = yNode.get("id");
@@ -2245,6 +2247,13 @@ const _4_1_text = defineMixin((editor) => {
     elementSelection,
     textSelection
   } = editor;
+  const element = computed(() => elementSelection.value[0]);
+  const hasTextSelectionRange = computed(() => {
+    return (textSelection.value?.length ?? 0) > 1 && textSelection.value[0] !== textSelection.value[1];
+  });
+  const isTextAllSelected = computed(() => {
+    return textSelection.value?.[0].isFirst && textSelection.value?.[1].isLast && textSelection.value?.[1].isLastSelected;
+  });
   function textFontSizeToFit(element2, scale) {
     function _handle(element3) {
       if (!scale) {
@@ -2320,13 +2329,22 @@ const _4_1_text = defineMixin((editor) => {
       if (!element3.text?.isValid?.() || typeof element3.text?.content !== "object") {
         return;
       }
+      const isVertical = element3.text.base.isVertical;
       const style = element3.style.toJSON();
       switch (strategy) {
         case "autoWidth":
-          style.width = "auto";
+          if (isVertical) {
+            style.height = "auto";
+          } else {
+            style.width = "auto";
+          }
           break;
         case "autoHeight":
-          style.height = "auto";
+          if (isVertical) {
+            style.width = "auto";
+          } else {
+            style.height = "auto";
+          }
           break;
       }
       const { boundingBox } = measureText({
@@ -2347,10 +2365,6 @@ const _4_1_text = defineMixin((editor) => {
       return false;
     });
   }
-  const element = computed(() => elementSelection.value[0]);
-  const hasSelectionRange = computed(() => {
-    return (textSelection.value?.length ?? 0) > 1 && textSelection.value[0] !== textSelection.value[1];
-  });
   function handleSelection([start, end], cb) {
     let flag = true;
     element.value?.text?.content.forEach((p, pIndex, pItems) => {
@@ -2379,12 +2393,13 @@ const _4_1_text = defineMixin((editor) => {
     });
   }
   function getTextStyle(key) {
-    if (!element.value) {
+    const el = element.value;
+    if (!el) {
       return void 0;
     }
-    let value = element.value.style[key];
-    const content = element.value.text.content;
-    if (hasSelectionRange.value) {
+    let value = el.style[key];
+    const content = el.text.content;
+    if (hasTextSelectionRange.value) {
       const selection = textSelection.value;
       if (selection && selection[0] && selection[1]) {
         handleSelection(selection, ({ selected, fStyle }) => {
@@ -2411,109 +2426,121 @@ const _4_1_text = defineMixin((editor) => {
     }
     return value;
   }
-  function setTextStyle(key, value) {
-    if (!element.value) {
+  function setTextContentByEachFragment(handler) {
+    const el = element.value;
+    if (!el) {
       return;
     }
-    let isAllSelected = false;
-    if (hasSelectionRange.value) {
-      const selection = textSelection.value;
-      if (selection && selection[0] && selection[1]) {
-        if (selection[0].isFirst && selection[1].isLast && selection[1].isLastSelected) {
-          isAllSelected = true;
+    const newContent = [];
+    let newParagraph = { fragments: [] };
+    let newFragment;
+    handleSelection(textSelection.value, ({ selected, fIndex, fStyle, fLength, c, cIndex, cLength }) => {
+      if (fIndex === 0 && cIndex === 0) {
+        newParagraph = { fragments: [] };
+        newFragment = void 0;
+      }
+      const style = { ...fStyle };
+      if (selected) {
+        handler(style);
+      }
+      if (newFragment) {
+        const { content: _, ..._style } = newFragment;
+        if (isEqualObject(style, _style)) {
+          newFragment.content += c;
         } else {
-          const newContent = [];
-          let newParagraph = { fragments: [] };
-          let newFragment;
-          handleSelection(selection, ({ selected, fIndex, fStyle, fLength, c, cIndex, cLength }) => {
-            if (fIndex === 0 && cIndex === 0) {
-              newParagraph = { fragments: [] };
-              newFragment = void 0;
-            }
-            const style = { ...fStyle };
-            if (selected) {
-              style[key] = value;
-            }
-            if (newFragment) {
-              const { content: _, ..._style } = newFragment;
-              if (isEqualObject(style, _style)) {
-                newFragment.content += c;
-              } else {
-                newParagraph.fragments.push(newFragment);
-                newFragment = { ...style, content: c };
-              }
-            } else {
-              newFragment = { ...style, content: c };
-            }
-            if (fIndex === fLength - 1 && cIndex === cLength - 1) {
-              if (newFragment) {
-                newParagraph.fragments.push(newFragment);
-              }
-              if (newParagraph.fragments.length) {
-                newContent.push(newParagraph);
-                newParagraph = { fragments: [] };
-              }
-            }
-            return true;
-          });
-          if (newContent.length) {
-            element.value.text.content = newContent;
-          }
+          newParagraph.fragments.push(newFragment);
+          newFragment = { ...style, content: c };
         }
+      } else {
+        newFragment = { ...style, content: c };
       }
-    } else {
-      isAllSelected = true;
+      if (fIndex === fLength - 1 && cIndex === cLength - 1) {
+        if (newFragment) {
+          newParagraph.fragments.push(newFragment);
+        }
+        if (newParagraph.fragments.length) {
+          newContent.push(newParagraph);
+          newParagraph = { fragments: [] };
+        }
+      }
+      return true;
+    });
+    if (newContent.length) {
+      el.text = { ...el.text.toJSON(), content: newContent };
     }
-    if (isAllSelected) {
-      const el = element.value;
-      switch (key) {
-        case "fill":
-        case "outline":
-          el.text[key] = value;
-          break;
-        default:
+  }
+  function setTextStyle(key, value) {
+    const el = element.value;
+    if (!el) {
+      return;
+    }
+    switch (key) {
+      case "writingMode": {
+        if (el.style[key] !== value) {
+          const { width, height } = el.style;
+          el.style.width = height;
+          el.style.height = width;
           el.style[key] = value;
-          break;
+        }
+        break;
+      }
+      default: {
+        if (hasTextSelectionRange.value && !isTextAllSelected.value) {
+          setTextContentByEachFragment((fragment) => {
+            fragment[key] = value;
+          });
+        } else {
+          switch (key) {
+            case "fill":
+            case "outline":
+              el.text[key] = value;
+              break;
+            default:
+              el.style[key] = value;
+              break;
+          }
+          el.text.content.forEach((p) => {
+            delete p[key];
+            p.fragments.forEach((f) => {
+              delete f[key];
+            });
+          });
+          el.text = el.text.toJSON();
+        }
+        el.requestDraw();
+        textToFit(el);
+        break;
       }
-      const content = element.value.text.content;
-      content.forEach((p) => {
-        delete p[key];
-        p.fragments.forEach((f) => {
-          delete f[key];
-        });
-      });
-      el.text.content = content;
     }
-    element.value.requestRender();
-    textToFit(element.value);
   }
   function getTextFill() {
-    if (!element.value) {
+    const el = element.value;
+    if (!el) {
       return void 0;
     }
     let fill;
-    if (hasSelectionRange.value) {
+    if (hasTextSelectionRange.value) {
       fill = getTextStyle("fill");
       if (!fill) {
-        const color = getTextStyle("color");
-        fill = { color };
+        fill = { color: getTextStyle("color") };
       }
     }
-    fill = fill ?? element.value.text.fill ?? { color: element.value.style.color };
+    fill = fill ?? el.text.fill ?? { color: el.style.color };
     return fill;
   }
   function setTextFill(value) {
-    if (!element.value) {
-      return;
+    const el = element.value;
+    if (!el) {
+      return void 0;
     }
-    if (hasSelectionRange.value && value?.color) {
+    if (hasTextSelectionRange.value && value?.color) {
       setTextStyle("fill", value);
     } else {
-      element.value.text.fill = value;
+      el.text.fill = value;
       if (value?.color) {
-        element.value.style.color = value.color;
+        el.style.color = value.color;
       }
-      element.value.text.content.forEach((p) => {
+      el.text.content.forEach((p) => {
         delete p.fill;
         delete p.color;
         p.fragments.forEach((f) => {
@@ -2521,15 +2548,23 @@ const _4_1_text = defineMixin((editor) => {
           delete f.color;
         });
       });
+      el.text = {
+        ...el.text.toJSON(),
+        fill: value
+      };
+      el.requestDraw();
     }
   }
   Object.assign(editor, {
+    hasTextSelectionRange,
+    isTextAllSelected,
     textFontSizeToFit,
     textToFit,
     setTextStyle,
     getTextStyle,
     getTextFill,
-    setTextFill
+    setTextFill,
+    setTextContentByEachFragment
   });
   return () => {
     TextEditor.register();

package/dist/mixins/0.context.d.ts

@@ -1,5 +1,5 @@
 import type { Cursor, Vector2, Vector2Like } from 'modern-canvas';
-import type { IndexCharacter } from 'modern-text/web-components';
+import type { IndexCharacter as _IndexCharacter } from 'modern-text/web-components';
 import type { ComputedRef, Ref } from 'vue';
 import { Aabb2D, Camera2D, DrawboardEffect, Element2D, Engine, Node, Timeline } from 'modern-canvas';
 import { Fonts } from 'modern-font';
@@ -19,6 +19,7 @@ declare global {
             side: 'left' | 'right';
             align: Tblock | 'center';
         };
+        type IndexCharacter = _IndexCharacter;
         interface Editor {
             fonts: Fonts;
             renderEngine: Ref<Engine>;

package/dist/mixins/4.1.text.d.ts

@@ -1,14 +1,18 @@
 import type { Element2D } from 'modern-canvas';
-import type { NormalizedFill } from 'modern-idoc';
+import type { NormalizedFill, NormalizedFragment } from 'modern-idoc';
+import type { Ref } from 'vue';
 declare global {
     namespace Mce {
         interface Editor {
+            hasTextSelectionRange: Ref<boolean>;
+            isTextAllSelected: Ref<boolean>;
             textFontSizeToFit: (element: Element2D, scale?: number) => void;
             textToFit: (element: Element2D, typography?: Mce.TypographyStrategy) => void;
             getTextStyle: (key: string) => any;
             setTextStyle: (key: string, value: any) => void;
             getTextFill: () => NormalizedFill | undefined;
             setTextFill: (value: NormalizedFill | undefined) => void;
+            setTextContentByEachFragment: (handler: (fragment: NormalizedFragment) => void) => void;
         }
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.8",
+  "version": "0.15.9",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "diff": "^8.0.2",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.22",
-    "modern-canvas": "^0.14.23",
+    "modern-canvas": "^0.14.24",
     "modern-font": "^0.4.4",
     "modern-idoc": "^0.10.8",
     "modern-text": "^1.10.7",