mce 0.15.18 → 0.15.19

package/dist/index.css

@@ -694,7 +694,7 @@
 100% {
     left: 100%;
 }
-}.mce-statusbar[data-v-a57093aa] {
+}.mce-statusbar[data-v-79192677] {
   user-select: none;
   position: relative;
   display: flex;
@@ -709,28 +709,30 @@
   color: rgba(var(--mce-theme-on-surface), 1);
   font-weight: bold;
 }
-.mce-statusbar__main[data-v-a57093aa] {
+.mce-statusbar__main[data-v-79192677] {
   flex: 1;
   display: flex;
   align-items: center;
+  gap: 4px;
+  height: 100%;
 }
-.mce-statusbar__item[data-v-a57093aa] {
+.mce-statusbar__item[data-v-79192677] {
   display: flex;
   align-items: center;
   gap: 4px;
 }
-.mce-statusbar__item > svg[data-v-a57093aa] {
+.mce-statusbar__item > svg[data-v-79192677] {
   width: 1em;
   height: 1em;
 }
-.mce-statusbar__divider[data-v-a57093aa] {
+.mce-statusbar__divider[data-v-79192677] {
   width: 0;
   height: 60%;
   border-right: 1px solid rgba(var(--mce-theme-on-surface), 0.2);
   margin: 0 8px;
 }
-.mce-statusbar__kbd[data-v-a57093aa] {
-  outline: 1px solid rgba(var(--mce-theme-on-surface), 0.4);
+.mce-statusbar__kbd[data-v-79192677] {
+  outline: 1px solid rgba(var(--mce-theme-on-surface), 0.1);
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -1035,7 +1037,6 @@
   font-size: 24px;
   width: 100%;
   height: 100%;
-  border-radius: 8px;
 }
 .mce-toolbelt__icon {
   font-size: 1rem;

package/dist/index.js

@@ -1076,6 +1076,7 @@ const en = {
   "goBackSelectedArea": "Go back selected area",
   "selectArea": "Select area",
   "dragSelected": "Drag selected",
+  "startTyping": "Start typing",
   "move": "Move",
   "hand": "Hand",
   "frame": "Frame",
@@ -1184,6 +1185,7 @@ const zhHans = {
   "goBackSelectedArea": "返回选中区域",
   "selectArea": "选择区域",
   "dragSelected": "拖拽选择的",
+  "startTyping": "编辑文字",
   "move": "移动",
   "hand": "抓手",
   "frame": "画板",
@@ -2671,10 +2673,11 @@ class TextEditor extends HTMLElement {
   _timer;
   _onKeydown(e) {
     e.stopPropagation();
-    switch (e.key) {
-      case "Escape":
-        this.selection = void 0;
-        return this._textarea.blur();
+    if (e.key === "Escape" || (e.ctrlKey || e.metaKey) && e.key === "Enter") {
+      this.selection = void 0;
+      this._textarea.blur();
+      this._emit("submit");
+      return;
     }
     this._updateSelectionByDom();
     setTimeout(() => this._updateSelectionByDom(), 0);
@@ -3372,6 +3375,7 @@ const _4_3_element = defineMixin((editor) => {
     textToFit,
     log,
     root,
+    isElement,
     isFrame,
     isLock,
     getObb,
@@ -3557,12 +3561,14 @@ const _4_3_element = defineMixin((editor) => {
       element2?.requestRender?.();
     }
     handle(element);
-    function deepHandle(element2) {
-      element2.children?.forEach((child) => {
-        deepHandle(child);
+    if (options.deep) {
+      element.findOne((node) => {
+        if (isElement(node)) {
+          handle(node);
+        }
+        return false;
       });
     }
-    options.deep && deepHandle(element);
     options.textToFit && textToFit(element);
     options.textFontSizeToFit && textFontSizeToFit(element, scaleX);
   }
@@ -3850,16 +3856,17 @@ const _snapshot = defineMixin((editor) => {
       data
     });
   }
-  async function captureFrameScreenshot(pageIndex) {
-    const frame = frames.value[pageIndex];
+  async function captureFrameScreenshot(index) {
+    const frame = frames.value[index];
     if (frame) {
       const canvas = await captureElementScreenshot(frame);
-      frameThumbs.value[pageIndex] = {
+      frameThumbs.value[index] = {
+        instanceId: frame.instanceId,
         width: canvas.width,
         height: canvas.height,
         url: canvas.toDataURL()
       };
-      log("captureFrameScreenshot", pageIndex);
+      log("captureFrameScreenshot", index);
     }
   }
   function renderFrameThumb(target) {
@@ -3899,16 +3906,18 @@ const _snapshot = defineMixin((editor) => {
   return () => {
     const {
       on,
-      config
+      config,
+      isFrame
     } = editor;
     on("setDoc", (doc) => {
       if (config.value.frameScreenshot) {
         snapshot();
       }
-      function onAppendChild(node) {
-        if (config.value.frameScreenshot) {
-          const index = node.getIndex();
+      function onAddChild(node, _newIndex) {
+        if (config.value.frameScreenshot && isFrame(node)) {
+          const index = frames.value.findIndex((f) => f.equal(node));
           frameThumbs.value.splice(index, 0, {
+            instanceId: -1,
             width: 0,
             height: 0,
             url: ""
@@ -3916,7 +3925,16 @@ const _snapshot = defineMixin((editor) => {
           captureFrameScreenshot(index);
         }
       }
-      doc.root.on("appendChild", onAppendChild);
+      function onRemoveChild(node, _oldIndex) {
+        if (config.value.frameScreenshot && isFrame(node)) {
+          frameThumbs.value.splice(
+            frameThumbs.value.findIndex((v) => v.instanceId === node.instanceId),
+            1
+          );
+        }
+      }
+      doc.root.on("addChild", onAddChild);
+      doc.root.on("removeChild", onRemoveChild);
     });
     on("setCurrentFrame", (_index, oldIndex) => {
       if (config.value.frameScreenshot) {
@@ -4106,6 +4124,18 @@ const _clipboard = definePlugin((editor, options) => {
           })
         ]);
       }
+    } else if (Array.isArray(source) && source.some((v) => v instanceof Blob)) {
+      if (useClipboard) {
+        const items = {};
+        source.forEach((blob) => {
+          if (blob instanceof Blob) {
+            items[blob.type] = blob;
+          }
+        });
+        await navigator.clipboard.write([
+          new ClipboardItem(items)
+        ]);
+      }
     } else {
       if (useClipboard) {
         const textItems = [];
@@ -4176,11 +4206,13 @@ const _clipboard = definePlugin((editor, options) => {
     const elements = [];
     for (const item of items) {
       const types = [...item.types];
-      const index = types.indexOf("text/html");
-      if (index > -1) {
-        types.splice(index, 1);
-        types.unshift("text/html");
-      }
+      ["image/svg+xml", "text/html"].forEach((type) => {
+        const index = types.indexOf(type);
+        if (index > -1) {
+          types.splice(index, 1);
+          types.unshift(type);
+        }
+      });
       for (const type of types) {
         const blob = await item.getType(type);
         if (await canLoad(blob)) {
@@ -4403,6 +4435,33 @@ const _drawingTool = definePlugin((editor) => {
     ]
   };
 });
+const _enter = definePlugin((editor) => {
+  const {
+    selection,
+    isElement,
+    exec
+  } = editor;
+  async function _enter2() {
+    if (selection.value.length === 1) {
+      const node = selection.value[0];
+      if (isElement(node)) {
+        if (node.text.isValid()) {
+          await exec("startTyping");
+        }
+      }
+    }
+  }
+  const when = () => Boolean(selection.value.length > 0);
+  return {
+    name: "mce:enter",
+    commands: [
+      { command: "enter", handle: _enter2 }
+    ],
+    hotkeys: [
+      { command: "enter", key: ["Enter"], when }
+    ]
+  };
+});
 const _flip = definePlugin((editor) => {
   const {
     elementSelection
@@ -13568,7 +13627,8 @@ const _hoisted_17 = { class: "mce-statusbar__item" };
 const _hoisted_18 = { class: "mce-statusbar__item" };
 const _hoisted_19 = { class: "mce-statusbar__kbd" };
 const _hoisted_20 = { class: "mce-statusbar__item" };
-const _hoisted_21 = { class: "mce-statusbar__progress" };
+const _hoisted_21 = { class: "mce-statusbar__item" };
+const _hoisted_22 = { class: "mce-statusbar__progress" };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "Statusbar",
   setup(__props) {
@@ -13577,7 +13637,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       t,
       getKbd,
       exporting,
-      exportProgress
+      exportProgress,
+      selection,
+      isElement
     } = useEditor();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$a, [
@@ -13611,29 +13673,36 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)
             ]),
-            _cache[4] || (_cache[4] = createElementVNode("span", null, " + ", -1)),
+            _cache[5] || (_cache[5] = createElementVNode("span", null, " + ", -1)),
             createElementVNode("div", _hoisted_15, [
               createElementVNode("span", _hoisted_16, toDisplayString(unref(getKbd)("Shift")), 1),
               createElementVNode("span", null, toDisplayString(unref(t)("extend")), 1)
             ]),
-            _cache[5] || (_cache[5] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
+            _cache[6] || (_cache[6] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_17, [
               createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)
             ]),
-            _cache[6] || (_cache[6] = createElementVNode("span", null, " + ", -1)),
+            _cache[7] || (_cache[7] = createElementVNode("span", null, " + ", -1)),
             createElementVNode("div", _hoisted_18, [
               createElementVNode("span", _hoisted_19, toDisplayString(unref(getKbd)("Shift")), 1),
               createElementVNode("span", null, toDisplayString(unref(t)("extend")), 1)
             ]),
-            _cache[7] || (_cache[7] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
+            _cache[8] || (_cache[8] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_20, [
               createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("dragSelected")), 1)
-            ])
+            ]),
+            unref(selection).length === 1 && unref(isElement)(unref(selection)[0]) && unref(selection)[0].text.isValid() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              _cache[4] || (_cache[4] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
+              createElementVNode("div", _hoisted_21, [
+                createElementVNode("span", null, toDisplayString(unref(getKbd)("Enter")), 1),
+                createElementVNode("span", null, toDisplayString(unref(t)("startTyping")), 1)
+              ])
+            ], 64)) : createCommentVNode("", true)
           ], 64))
         ]),
-        createElementVNode("div", _hoisted_21, [
+        createElementVNode("div", _hoisted_22, [
           unref(exporting) ? (openBlock(), createBlock(ProgressIndicator, {
             key: 0,
             modelValue: unref(exportProgress),
@@ -13645,7 +13714,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-a57093aa"]]);
+const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-79192677"]]);
 const _statusbar = definePlugin((editor) => {
   const {
     registerConfig
@@ -14399,6 +14468,7 @@ const plugins = [
   _copyAs,
   _delete,
   _drawingTool,
+  _enter,
   _flip,
   _frame,
   _gif,
@@ -15583,7 +15653,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               element,
               newStyle.width / element.style.width,
               newStyle.height / element.style.height,
-              isFrame(element) ? void 0 : !shape.isValid() ? handle.split("-").length > 2 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true } : void 0
+              isFrame(element) ? void 0 : shape.isValid() ? { deep: true } : handle.split("-").length > 2 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
             );
             newStyle.width = element.style.width;
             newStyle.height = element.style.height;
@@ -15661,9 +15731,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ref: "transformableTpl",
           modelValue: transform.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => transform.value = $event),
-          movable: movable.value,
-          resizable: resizable.value,
-          rotatable: rotatable.value,
+          movable: unref(state) !== "typing" && movable.value,
+          resizable: unref(state) !== "typing" && resizable.value,
+          rotatable: unref(state) !== "typing" && rotatable.value,
           "adjustable-border-radius": adjustableBorderRadius.value,
           "resize-strategy": props.resizeStrategy,
           "handle-shape": unref(config).handleShape,
@@ -15902,6 +15972,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         textToFit(element);
       }
     }
+    function onSubmit() {
+      state.value = void 0;
+    }
     async function startTyping(e) {
       const element = elementSelection.value[0];
       if (!element) {
@@ -15953,7 +16026,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             },
             "data-pointerdown_to_drawboard": "",
             onSelected: onUpdateTextSelection,
-            onUpdate
+            onUpdate,
+            onSubmit
           }, null, 544)
         ], 4)
       ], 4)), [

package/dist/locale/en.d.ts

@@ -11,6 +11,7 @@ declare const _default: {
     goBackSelectedArea: string;
     selectArea: string;
     dragSelected: string;
+    startTyping: string;
     move: string;
     hand: string;
     frame: string;

package/dist/locale/zh-Hans.d.ts

@@ -12,6 +12,7 @@ declare const _default: {
     goBackSelectedArea: string;
     selectArea: string;
     dragSelected: string;
+    startTyping: string;
     move: string;
     hand: string;
     frame: string;

package/dist/mixins/1.frame.d.ts

@@ -4,6 +4,7 @@ import type { AxisAlignedBoundingBox } from '../types';
 declare global {
     namespace Mce {
         interface FrameThumb {
+            instanceId: number;
             width: number;
             height: number;
             url: string;

package/dist/mixins/2.export.d.ts

@@ -11,7 +11,7 @@ declare global {
         type ExporterHandle = (options: ExportOptions) => any | Promise<any>;
         interface Exporter {
             name: string;
-            copyAs?: boolean | ((exported: any) => string);
+            copyAs?: boolean | ((exported: any) => CopySource);
             saveAs?: boolean | ((exported: any) => Blob);
             handle: ExporterHandle;
         }

package/dist/plugins/clipboard.d.ts

@@ -7,7 +7,7 @@ declare global {
             paste: [event: KeyboardEvent];
             duplicate: [event: KeyboardEvent];
         }
-        type CopySource = string | Blob | Record<string, any>[];
+        type CopySource = string | Blob | Blob[] | Record<string, any>[];
         type PasteSource = DataTransfer | ClipboardItem[];
         interface Commands {
             copy: (source?: CopySource) => Promise<void>;

package/dist/plugins/enter.d.ts

@@ -0,0 +1,12 @@
+declare global {
+    namespace Mce {
+        interface Commands {
+            enter: () => void;
+        }
+        interface Hotkeys {
+            enter: [event: KeyboardEvent];
+        }
+    }
+}
+declare const _default: import("..").Plugin;
+export default _default;

package/dist/typed-plugins.d.ts

@@ -31,6 +31,7 @@ import './plugins/clipboard'
 import './plugins/copyAs'
 import './plugins/delete'
 import './plugins/drawingTool'
+import './plugins/enter'
 import './plugins/flip'
 import './plugins/frame'
 import './plugins/gif'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.18",
+  "version": "0.15.19",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -63,7 +63,7 @@
     "lodash-es": "^4.17.22",
     "modern-canvas": "^0.14.35",
     "modern-font": "^0.4.4",
-    "modern-idoc": "^0.10.8",
+    "modern-idoc": "^0.10.9",
     "modern-text": "^1.10.15",
     "yjs": "^13.6.29"
   },