mce 0.11.2 → 0.11.3

package/README.md

@@ -45,8 +45,8 @@ npm i mce
       svg(),
     ],
     theme: 'system',
-    language: 'en',
     viewMode: 'edgeless',
+    clipboard: true,
     checkerboard: true,
     pixelGrid: true,
     camera: true,
@@ -60,6 +60,7 @@ npm i mce
     zoomToFitOffset: { left: 0, top: 0, right: 0, bottom: 0 },
     localDb: false,
     customUpload: async (blob) => URL.createObjectURL(blob),
+    customContextMenu: (menu) => menu,
     defaultFont: { family: 'SourceHanSansCN-Normal', src: '/SourceHanSansCN-Normal.woff' },
     doc: {
       children: [

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, markRaw, reactive, warn, shallowRef, inject, provide, defineComponent, createVNode, mergeProps, createElementVNode, toValue, getCurrentInstance, onScopeDispose, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, onBeforeUnmount, readonly, toRef, onMounted, useId, onDeactivated, onActivated, useAttrs, createBlock, resolveDynamicComponent, useTemplateRef, renderSlot, Teleport, createCommentVNode, mergeModels, useModel, resolveComponent, withCtx, createTextVNode, toDisplayString, createSlots, normalizeProps, guardReactiveProps, withDirectives, vShow, vModelText, nextTick, withModifiers, onBeforeMount, isRef } from "vue";
+import { ref, computed, watch, markRaw, reactive, warn, shallowRef, onBeforeUnmount, onMounted, inject, provide, defineComponent, createVNode, mergeProps, createElementVNode, toValue, getCurrentInstance, onScopeDispose, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, readonly, toRef, useId, onDeactivated, onActivated, useAttrs, createBlock, resolveDynamicComponent, useTemplateRef, renderSlot, Teleport, createCommentVNode, mergeModels, useModel, resolveComponent, withCtx, createTextVNode, toDisplayString, createSlots, normalizeProps, guardReactiveProps, withDirectives, vShow, vModelText, nextTick, withModifiers, onBeforeMount, isRef } from "vue";
 import { useFileDialog, useEventListener, isClient, useResizeObserver as useResizeObserver$1, useLocalStorage, onClickOutside, useMouse, useDebounceFn } from "@vueuse/core";
 import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, Animation } from "modern-canvas";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeElement, normalizeTextContent } from "modern-idoc";
@@ -110,7 +110,6 @@ const _0_config_base = defineMixin((editor, options) => {
     config
   } = editor;
   registerConfig("theme", "system");
-  registerConfig("language", "en");
   registerConfig("viewMode", "edgeless");
   registerConfig("checkerboard", false);
   registerConfig("pixelGrid", false);
@@ -1362,6 +1361,18 @@ function findChildrenWithProvide(key, vnode) {
   }
   return [];
 }
+function isInputEvent(event) {
+  if (!event)
+    return false;
+  let path = event.path;
+  if (!path && event.composedPath)
+    path = event.composedPath();
+  if (!path)
+    return false;
+  return path?.some(
+    (el) => ["INPUT", "TEXTAREA", "SELECT"].includes(el?.tagName) || el?.contentEditable === "true"
+  );
+}
 function propsFactory(props, source) {
   return (defaults) => {
     return Object.keys(props).reduce((obj, prop) => {
@@ -1391,18 +1402,6 @@ function uuidv4() {
 const defaultHotkeys = [
   { command: "cancel", key: "Esc", editable: false }
 ];
-function isInputEvent(event) {
-  if (!event)
-    return false;
-  let path = event.path;
-  if (!path && event.composedPath)
-    path = event.composedPath();
-  if (!path)
-    return false;
-  return path?.some(
-    (el) => ["INPUT", "TEXTAREA", "SELECT"].includes(el?.tagName) || el?.contentEditable === "true"
-  );
-}
 const _1_hotkey = defineMixin((editor) => {
   const {
     registerConfig
@@ -1962,15 +1961,15 @@ const _2_load = defineMixin((editor) => {
   };
   const load = async (source) => {
     state.value = "loading";
-    let result;
+    const items = [];
     try {
       for (const loader of loaders.value.values()) {
         if (await loader.test(source)) {
           const res = await loader.load(source);
           if (Array.isArray(res)) {
-            result = { id: idGenerator(), children: res };
+            items.push(...res);
           } else {
-            result = res;
+            items.push(res);
           }
           break;
         }
@@ -1978,10 +1977,10 @@ const _2_load = defineMixin((editor) => {
     } finally {
       state.value = void 0;
     }
-    if (!result) {
+    if (!items.length) {
       throw new Error(`Failed to load source "${source}"`);
     }
-    return result;
+    return items;
   };
   const openFileDialog = (options = {}) => {
     const {
@@ -2549,7 +2548,11 @@ const _4_4_doc = defineMixin((editor, options) => {
         }
       }
       if (source && typeof source !== "string") {
-        doc2.set(source);
+        if (Array.isArray(source)) {
+          doc2.set({ children: source });
+        } else {
+          doc2.set(source);
+        }
       }
     });
     doc2.on("update", throttle((update, origin) => emit("updateDoc", update, origin), 200));
@@ -2559,8 +2562,17 @@ const _4_4_doc = defineMixin((editor, options) => {
     let id;
     if (typeof source === "string") {
       id = source;
-    } else {
-      id = source?.id;
+    } else if (source) {
+      if (Array.isArray(source) && source.length === 1) {
+        source = source[0];
+      }
+      if (!Array.isArray(source)) {
+        if (source.meta?.inEditorIs === "Doc") {
+          id = source.id;
+        } else {
+          source = [source];
+        }
+      }
     }
     const _doc = new Doc(id);
     state.value = "loading";
@@ -2576,11 +2588,7 @@ const _4_4_doc = defineMixin((editor, options) => {
     return _doc;
   };
   const loadDoc = async (source) => {
-    let loaded = await load(source);
-    if (loaded.meta?.inEditorIs !== "Doc") {
-      loaded = { id: idGenerator(), children: [loaded] };
-    }
-    const _doc = await setDoc(loaded);
+    const _doc = await setDoc(await load(source));
     emit("loadDoc", _doc, source);
     return _doc;
   };
@@ -4054,7 +4062,12 @@ const _clipboard = definePlugin((editor, options) => {
   const useClipboard = options.clipboard !== false && SUPPORTS_CLIPBOARD;
   const copy = async (data) => {
     if (data === void 0) {
-      data = selection.value.length === 1 ? [selection.value[0].toJSON()] : selection.value.map((v) => v.toJSON());
+      data = selection.value.map((v) => {
+        const json = v.toJSON();
+        delete json.style.left;
+        delete json.style.top;
+        return json;
+      });
     }
     if (useClipboard) {
       if (Array.isArray(data)) {
@@ -4077,46 +4090,69 @@ const _clipboard = definePlugin((editor, options) => {
       }
     }
   };
-  async function cut() {
+  const cut = async () => {
     await copy();
     exec("delete");
-  }
-  let lock = false;
-  function pasteLock() {
-    if (!lock) {
-      lock = true;
-    }
+  };
+  let locked = false;
+  function getPasteLock() {
     return {
-      lock,
-      unlock: () => lock = false
+      locked,
+      lock: () => locked = true,
+      unlock: () => locked = false
     };
   }
-  async function onPaste(source) {
-    const items = source ?? await navigator.clipboard.read();
+  async function _paste(items) {
     const elements = [];
     for (const item of items) {
       for (const type of item.types) {
         const blob = await item.getType(type);
         if (await canLoad(blob)) {
-          elements.push(await load(blob));
+          elements.push(...await load(blob));
         } else {
           console.warn(`Unhandled clipboard ${blob.type}`, await blob.text());
         }
       }
     }
-    addElement(elements, {
-      inPointerPosition: true,
-      active: true,
-      regenId: true
-    });
+    if (elements.length) {
+      addElement(elements, {
+        inPointerPosition: true,
+        active: true,
+        regenId: true
+      });
+    }
   }
-  async function paste() {
-    await new Promise((r) => setTimeout(r, 0));
-    const { lock: lock2, unlock } = pasteLock();
-    if (!lock2) {
-      try {
+  const paste = async (source) => {
+    if (source) {
+      const { unlock, lock } = getPasteLock();
+      lock();
+      let items = [];
+      if (source instanceof DataTransfer) {
+        for (const item of source.items) {
+          switch (item.kind) {
+            case "file": {
+              const file = item.getAsFile();
+              if (file) {
+                items.push(new ClipboardItem({ [file.type]: file }));
+              }
+              break;
+            }
+          }
+        }
+      } else {
+        items = source;
+      }
+      if (items.length) {
+        await _paste(items);
+      } else {
+        unlock();
+      }
+    } else {
+      await new Promise((r) => setTimeout(r, 100));
+      const { locked: locked2, unlock } = getPasteLock();
+      if (!locked2) {
         if (useClipboard) {
-          await onPaste();
+          await _paste(await navigator.clipboard.read());
         } else if (copiedData.value) {
           if (Array.isArray(copiedData.value)) {
             addElement(copiedData.value?.map((el) => cloneDeep(el)) ?? [], {
@@ -4126,13 +4162,11 @@ const _clipboard = definePlugin((editor, options) => {
             });
           }
         }
-      } finally {
+      } else {
         unlock();
       }
-    } else {
-      unlock();
     }
-  }
+  };
   async function duplicate() {
     await copy();
     await paste();
@@ -4156,31 +4190,16 @@ const _clipboard = definePlugin((editor, options) => {
     ],
     setup: () => {
       if (useClipboard) {
-        window.addEventListener("paste", async (e) => {
-          const items = e.clipboardData?.items;
-          if (items?.length) {
-            pasteLock();
-            const clipboardItems = [];
-            for (const item of items) {
-              switch (item.kind) {
-                case "file": {
-                  const file = item.getAsFile();
-                  if (file) {
-                    clipboardItems.push(
-                      new ClipboardItem({
-                        [file.type]: file
-                      })
-                    );
-                  }
-                  break;
-                }
-              }
-            }
-            await onPaste(
-              clipboardItems.length ? clipboardItems : void 0
-            );
+        async function onPaste(e) {
+          if (isInputEvent(e)) {
+            return;
           }
-        });
+          if (e.clipboardData) {
+            await paste(e.clipboardData);
+          }
+        }
+        window.addEventListener("paste", onPaste);
+        onBeforeUnmount(() => window.removeEventListener("paste", onPaste));
       }
     }
   };
@@ -4609,7 +4628,7 @@ const _import = definePlugin((editor) => {
   } = editor;
   const _import2 = async (options = {}) => {
     const files = await openFileDialog({ multiple: true });
-    return addElement(await Promise.all(files.map((file) => load(file))), {
+    return addElement((await Promise.all(files.map((file) => load(file)))).flat(), {
       ...options,
       sizeToFit: true,
       positionToFit: true
@@ -4622,7 +4641,35 @@ const _import = definePlugin((editor) => {
     ],
     hotkeys: [
       { command: "import", key: "CmdOrCtrl+i" }
-    ]
+    ],
+    setup: () => {
+      const {
+        drawboardPointer,
+        drawboardDom,
+        exec
+      } = editor;
+      function onDragover(e) {
+        e.preventDefault();
+        drawboardPointer.value = { x: e.clientX, y: e.clientY };
+        if (e.dataTransfer) {
+          e.dataTransfer.dropEffect = "copy";
+        }
+      }
+      async function onDrop(e) {
+        e.preventDefault();
+        if (e.dataTransfer) {
+          await exec("paste", e.dataTransfer);
+        }
+      }
+      onMounted(() => {
+        drawboardDom.value?.addEventListener("dragover", onDragover);
+        drawboardDom.value?.addEventListener("drop", onDrop);
+      });
+      onBeforeUnmount(() => {
+        drawboardDom.value?.removeEventListener("dragover", onDragover);
+        drawboardDom.value?.removeEventListener("drop", onDrop);
+      });
+    }
   };
 });
 const _layerOrder = definePlugin((editor) => {
@@ -4988,10 +5035,7 @@ const _new = definePlugin((editor) => {
     setDoc
   } = editor;
   function _new2() {
-    setDoc({
-      id: idGenerator(),
-      children: []
-    });
+    setDoc([]);
   }
   return {
     name: "mce:new",
@@ -8872,6 +8916,7 @@ export {
   imageExts,
   imageMimeTypeExtMap,
   isClickInsideElement,
+  isInputEvent,
   isMac,
   isOverlappingAabb,
   isOverlappingObb,

package/dist/mixins/0.config/base.d.ts

@@ -3,13 +3,11 @@ declare global {
         interface Options extends Partial<Config> {
         }
         type Theme = 'system' | 'light' | 'dark';
-        type Language = string;
         type ViewMode = 'frame' | 'edgeless';
         type TypographyStrategy = 'autoHeight' | 'autoWidth' | 'fixedWidthHeight' | 'autoFontSize';
         type HandleShape = 'rect' | 'circle';
         interface Config {
             theme: Theme;
-            language: Language;
             viewMode: ViewMode;
             checkerboard: boolean;
             pixelGrid: boolean;

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

@@ -13,7 +13,7 @@ declare global {
             registerLoader: (value: Loader | Loader[]) => void;
             unregisterLoader: (name: string) => void;
             canLoad: (source: any) => Promise<boolean>;
-            load: <T = NormalizedElement>(source: any) => Promise<T>;
+            load: <T = NormalizedElement>(source: any) => Promise<T[]>;
             openFileDialog: (options?: {
                 multiple?: boolean;
             }) => Promise<File[]>;

package/dist/mixins/4.4.doc.d.ts

@@ -1,10 +1,10 @@
-import type { Document } from 'modern-idoc';
+import type { Document, Element } from 'modern-idoc';
 import { Doc } from '../models';
 declare global {
     namespace Mce {
         interface Editor {
             getDoc: () => JsonData;
-            setDoc: (doc: Document | string) => Promise<Doc>;
+            setDoc: (doc: Document | Element[] | string) => Promise<Doc>;
             loadDoc: (source: any) => Promise<Doc>;
             clearDoc: () => void;
         }

package/dist/plugins/clipboard.d.ts

@@ -7,10 +7,11 @@ declare global {
             paste: [event: KeyboardEvent];
             duplicate: [event: KeyboardEvent];
         }
+        type PasteSource = DataTransfer | ClipboardItem[];
         interface Commands {
             copy: (data?: any) => Promise<void>;
             cut: () => Promise<void>;
-            paste: () => Promise<void>;
+            paste: (source?: PasteSource) => Promise<void>;
             duplicate: () => Promise<void>;
         }
         interface Editor {

package/dist/utils/helper.d.ts

@@ -10,3 +10,4 @@ export declare function convertToUnit(str: number, unit?: string): string;
 export declare function convertToUnit(str: string | number | null | undefined, unit?: string): string | undefined;
 export declare function templateRef(): TemplateRef;
 export declare function findChildrenWithProvide(key: InjectionKey<any> | symbol, vnode?: VNodeChild): ComponentInternalInstance[];
+export declare function isInputEvent(event?: Event): boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",