mce 0.15.15 → 0.15.17

package/dist/index.js

@@ -1,13 +1,13 @@
-import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, Aabb2D, IN_BROWSER, clamp, assets, TimelineNode, Video2D, Transform2D, Obb2D, render, Vector2 as Vector2$1, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
-import { reactive, computed, watch, markRaw, isReactive, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, readonly, toRef, onMounted, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withModifiers, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
+import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, Aabb2D, IN_BROWSER, clamp, assets, TimelineNode, Video2D, Transform2D, Obb2D, render, Vector2 as Vector2$1, Lottie2D, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
+import { reactive, computed, watch, markRaw, isReactive, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle as normalizeStyle$1, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, readonly, toRef, onMounted, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, withModifiers, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, h, isRef, useSlots } from "vue";
 import { useFileDialog, useEventListener, isClient, onClickOutside, useDebounceFn, useResizeObserver as useResizeObserver$1, useLocalStorage, useImage } from "@vueuse/core";
-import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeTextContent, normalizeCRLF, isEqualObject } from "modern-idoc";
+import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeTextContent, isCRLF, textContentToString, normalizeCRLF, isEqualObject } from "modern-idoc";
 import { saveAs } from "file-saver";
 import { Fonts } from "modern-font";
 import * as Y from "yjs";
 import { merge, throttle, cloneDeep } from "lodash-es";
-import { measureText } from "modern-text";
-import { TextEditor } from "modern-text/web-components";
+import { measureText, Text } from "modern-text";
+import { diffChars } from "diff";
 import { vResizeObserver } from "@vueuse/components";
 import { useFloating, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
 function defineMixin(cb) {
@@ -486,13 +486,13 @@ class Model extends Reactivable {
     };
   }
 }
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
+  if (result) __defProp$1(target, key, result);
   return result;
 };
 class Doc extends Model {
@@ -867,7 +867,7 @@ class Doc extends Model {
     };
   }
 }
-__decorateClass([
+__decorateClass$1([
   property()
 ], Doc.prototype, "name");
 const _0_context = defineMixin((editor) => {
@@ -1089,6 +1089,8 @@ const en = {
   "polygon": "Polygon",
   "star": "Star",
   "image": "Image",
+  "video": "Video",
+  "lottie": "Lottie",
   "pen": "Pen",
   "pencil": "Pencil",
   "file": "File",
@@ -1195,6 +1197,8 @@ const zhHans = {
   "polygon": "多边形",
   "star": "星形",
   "image": "图片",
+  "video": "视频",
+  "lottie": "Lottie",
   "pen": "钢笔",
   "pencil": "铅笔",
   "file": "文件",
@@ -1808,10 +1812,6 @@ const _1_timeline = defineMixin((editor) => {
       on
     } = editor;
     async function updateEndTime() {
-      console.log("updateEndTime");
-      await renderEngine.value.nextTick();
-      await renderEngine.value.nextTick();
-      await renderEngine.value.nextTick();
       await renderEngine.value.nextTick();
       timeline.value.endTime = root.value ? getTimeRange(root.value).endTime : 0;
     }
@@ -2257,6 +2257,724 @@ const _4_0_node = defineMixin((editor) => {
     addNode
   });
 });
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+function normalizeStyle(style) {
+  const newStyle = {};
+  for (const key in style) {
+    if (key !== "id" && style[key] !== void 0 && style[key] !== "") {
+      newStyle[key] = style[key];
+    }
+  }
+  return newStyle;
+}
+function textContentToCharStyles(textContent) {
+  return textContent.flatMap((p) => {
+    const { fragments } = p;
+    const res = fragments.flatMap((f) => {
+      const { content, ...fStyle } = f;
+      return Array.from(normalizeCRLF(content)).map(() => ({ ...fStyle }));
+    });
+    if (isCRLF(normalizeCRLF(fragments[fragments.length - 1]?.content ?? ""))) {
+      return res;
+    }
+    return [...res, {}];
+  });
+}
+function isEqualStyle(style1, style2) {
+  const keys1 = Object.keys(style1);
+  const keys2 = Object.keys(style2);
+  const keys = Array.from(/* @__PURE__ */ new Set([...keys1, ...keys2]));
+  return !keys.length || keys.every((key) => style1[key] === style2[key]);
+}
+const emojiRE = /[#*0-9]\uFE0F?\u20E3|[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23ED-\u23EF\u23F1\u23F2\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB\u25FC\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u265F\u2660\u2663\u2665\u2666\u2668\u267B\u267E\u267F\u2692\u2694-\u2697\u2699\u269B\u269C\u26A0\u26A7\u26AA\u26B0\u26B1\u26BD\u26BE\u26C4\u26C8\u26CF\u26D1\u26E9\u26F0-\u26F5\u26F7\u26F8\u26FA\u2702\u2708\u2709\u270F\u2712\u2714\u2716\u271D\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u27A1\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B55\u3030\u303D\u3297\u3299]\uFE0F?|[\u261D\u270C\u270D](?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?|[\u270A\u270B](?:\uD83C[\uDFFB-\uDFFF])?|[\u23E9-\u23EC\u23F0\u23F3\u25FD\u2693\u26A1\u26AB\u26C5\u26CE\u26D4\u26EA\u26FD\u2705\u2728\u274C\u274E\u2753-\u2755\u2795-\u2797\u27B0\u27BF\u2B50]|\u26D3\uFE0F?(?:\u200D\uD83D\uDCA5)?|\u26F9(?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?(?:\u200D[\u2640\u2642]\uFE0F?)?|\u2764\uFE0F?(?:\u200D(?:\uD83D\uDD25|\uD83E\uDE79))?|\uD83C(?:[\uDC04\uDD70\uDD71\uDD7E\uDD7F\uDE02\uDE37\uDF21\uDF24-\uDF2C\uDF36\uDF7D\uDF96\uDF97\uDF99-\uDF9B\uDF9E\uDF9F\uDFCD\uDFCE\uDFD4-\uDFDF\uDFF5\uDFF7]\uFE0F?|[\uDF85\uDFC2\uDFC7](?:\uD83C[\uDFFB-\uDFFF])?|[\uDFC4\uDFCA](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDFCB\uDFCC](?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDCCF\uDD8E\uDD91-\uDD9A\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF43\uDF45-\uDF4A\uDF4C-\uDF7C\uDF7E-\uDF84\uDF86-\uDF93\uDFA0-\uDFC1\uDFC5\uDFC6\uDFC8\uDFC9\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF8-\uDFFF]|\uDDE6\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF]|\uDDE7\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF]|\uDDE8\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF7\uDDFA-\uDDFF]|\uDDE9\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF]|\uDDEA\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA]|\uDDEB\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7]|\uDDEC\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE]|\uDDED\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA]|\uDDEE\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9]|\uDDEF\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5]|\uDDF0\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF]|\uDDF1\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE]|\uDDF2\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF]|\uDDF3\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF]|\uDDF4\uD83C\uDDF2|\uDDF5\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE]|\uDDF6\uD83C\uDDE6|\uDDF7\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC]|\uDDF8\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF]|\uDDF9\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF]|\uDDFA\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF]|\uDDFB\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA]|\uDDFC\uD83C[\uDDEB\uDDF8]|\uDDFD\uD83C\uDDF0|\uDDFE\uD83C[\uDDEA\uDDF9]|\uDDFF\uD83C[\uDDE6\uDDF2\uDDFC]|\uDF44(?:\u200D\uD83D\uDFEB)?|\uDF4B(?:\u200D\uD83D\uDFE9)?|\uDFC3(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDFF3\uFE0F?(?:\u200D(?:\u26A7\uFE0F?|\uD83C\uDF08))?|\uDFF4(?:\u200D\u2620\uFE0F?|\uDB40\uDC67\uDB40\uDC62\uDB40(?:\uDC65\uDB40\uDC6E\uDB40\uDC67|\uDC73\uDB40\uDC63\uDB40\uDC74|\uDC77\uDB40\uDC6C\uDB40\uDC73)\uDB40\uDC7F)?)|\uD83D(?:[\uDC3F\uDCFD\uDD49\uDD4A\uDD6F\uDD70\uDD73\uDD76-\uDD79\uDD87\uDD8A-\uDD8D\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA\uDECB\uDECD-\uDECF\uDEE0-\uDEE5\uDEE9\uDEF0\uDEF3]\uFE0F?|[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC6B-\uDC6D\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDC8F\uDC91\uDCAA\uDD7A\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC](?:\uD83C[\uDFFB-\uDFFF])?|[\uDC6E\uDC70\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4\uDEB5](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD74\uDD90](?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?|[\uDC00-\uDC07\uDC09-\uDC14\uDC16-\uDC25\uDC27-\uDC3A\uDC3C-\uDC3E\uDC40\uDC44\uDC45\uDC51-\uDC65\uDC6A\uDC79-\uDC7B\uDC7D-\uDC80\uDC84\uDC88-\uDC8E\uDC90\uDC92-\uDCA9\uDCAB-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDDA4\uDDFB-\uDE2D\uDE2F-\uDE34\uDE37-\uDE41\uDE43\uDE44\uDE48-\uDE4A\uDE80-\uDEA2\uDEA4-\uDEB3\uDEB7-\uDEBF\uDEC1-\uDEC5\uDED0-\uDED2\uDED5-\uDED7\uDEDC-\uDEDF\uDEEB\uDEEC\uDEF4-\uDEFC\uDFE0-\uDFEB\uDFF0]|\uDC08(?:\u200D\u2B1B)?|\uDC15(?:\u200D\uD83E\uDDBA)?|\uDC26(?:\u200D(?:\u2B1B|\uD83D\uDD25))?|\uDC3B(?:\u200D\u2744\uFE0F?)?|\uDC41\uFE0F?(?:\u200D\uD83D\uDDE8\uFE0F?)?|\uDC68(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFE])))?))?|\uDC69(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?[\uDC68\uDC69]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?|\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFE])))?))?|\uDC6F(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDD75(?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDE2E(?:\u200D\uD83D\uDCA8)?|\uDE35(?:\u200D\uD83D\uDCAB)?|\uDE36(?:\u200D\uD83C\uDF2B\uFE0F?)?|\uDE42(?:\u200D[\u2194\u2195]\uFE0F?)?|\uDEB6(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?)|\uD83E(?:[\uDD0C\uDD0F\uDD18-\uDD1F\uDD30-\uDD34\uDD36\uDD77\uDDB5\uDDB6\uDDBB\uDDD2\uDDD3\uDDD5\uDEC3-\uDEC5\uDEF0\uDEF2-\uDEF8](?:\uD83C[\uDFFB-\uDFFF])?|[\uDD26\uDD35\uDD37-\uDD39\uDD3D\uDD3E\uDDB8\uDDB9\uDDCD\uDDCF\uDDD4\uDDD6-\uDDDD](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDDDE\uDDDF](?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD0D\uDD0E\uDD10-\uDD17\uDD20-\uDD25\uDD27-\uDD2F\uDD3A\uDD3F-\uDD45\uDD47-\uDD76\uDD78-\uDDB4\uDDB7\uDDBA\uDDBC-\uDDCC\uDDD0\uDDE0-\uDDFF\uDE70-\uDE7C\uDE80-\uDE89\uDE8F-\uDEC2\uDEC6\uDECE-\uDEDC\uDEDF-\uDEE9]|\uDD3C(?:\u200D[\u2640\u2642]\uFE0F?|\uD83C[\uDFFB-\uDFFF])?|\uDDCE(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDDD1(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1|\uDDD1\u200D\uD83E\uDDD2(?:\u200D\uD83E\uDDD2)?|\uDDD2(?:\u200D\uD83E\uDDD2)?))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFC-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFD-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFD\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFE]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?))?|\uDEF1(?:\uD83C(?:\uDFFB(?:\u200D\uD83E\uDEF2\uD83C[\uDFFC-\uDFFF])?|\uDFFC(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFD-\uDFFF])?|\uDFFD(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])?|\uDFFE(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFD\uDFFF])?|\uDFFF(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFE])?))?)/g;
+function parseHTML(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  return template.content.cloneNode(true);
+}
+const SUPPORTS_POINTER_EVENTS = "PointerEvent" in globalThis;
+class TextEditor extends HTMLElement {
+  _prevSelection;
+  _composition = false;
+  get composition() {
+    return this._composition;
+  }
+  static _defined = false;
+  static register() {
+    if (!this._defined) {
+      this._defined = true;
+      customElements.define("text-editor", this);
+    }
+  }
+  _text = new Text();
+  get text() {
+    return this._text;
+  }
+  set text(newText) {
+    if (newText) {
+      this._text?.off("update", this._update);
+      this.reset();
+      newText.on("update", this._update);
+      this._text = newText;
+      this._setTextInput(this.getPlaintext());
+      this.text.update();
+      this._update();
+    }
+  }
+  _oldText = "";
+  _container;
+  _selection;
+  _textarea;
+  _cursor;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: "open" });
+    shadowRoot.appendChild(
+      parseHTML(`
+  <style>
+  :host {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: 1;
+  }
+
+  .container {
+    position: absolute;
+  }
+
+  textarea {
+    position: absolute;
+    opacity: 0;
+    caret-color: transparent;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    resize: none;
+    overflow: hidden;
+  }
+
+  .selection {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+  }
+
+  .selection > * {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: rgba(var(--color, 0, 0, 0), 0.4);
+  }
+
+  .cursor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+  }
+
+  .cursor.blink {
+    animation: cursor-blink 1s steps(2, start) infinite;
+  }
+
+  @keyframes cursor-blink {
+    100% {
+      visibility: hidden;
+    }
+  }
+  </style>
+
+  <div class="container">
+    <textarea></textarea>
+    <div class="selection"></div>
+    <div class="cursor blink"></div>
+  </div>
+`)
+    );
+    this._container = shadowRoot.querySelector(".container");
+    this._selection = shadowRoot.querySelector(".selection");
+    this._textarea = shadowRoot.querySelector("textarea");
+    this._cursor = shadowRoot.querySelector(".cursor");
+    this._bindEventListeners();
+    this._update = this._update.bind(this);
+  }
+  connectedCallback() {
+    this._emit("init");
+  }
+  moveToDom(target) {
+    const style = getComputedStyle(target);
+    const host = this.shadowRoot.host;
+    host.style.width = `${target.clientWidth}px`;
+    host.style.height = `${target.clientHeight}px`;
+    host.style.transform = "";
+    const hostRect = host.getBoundingClientRect();
+    const hostCenter = { x: hostRect.x + hostRect.width / 2, y: hostRect.y + hostRect.height / 2 };
+    const targetRect = target.getBoundingClientRect();
+    const targetCenter = { x: targetRect.x + targetRect.width / 2, y: targetRect.y + targetRect.height / 2 };
+    this.left = targetCenter.x - hostCenter.x;
+    this.top = targetCenter.y - hostCenter.y;
+    const m = new DOMMatrixReadOnly(style.transform);
+    this.rotate = Math.atan2(m.b, m.a) * (180 / Math.PI);
+    this._update();
+  }
+  set(text) {
+    this.text = text;
+  }
+  onUpdateProperty(key, _newValue, _oldValue) {
+    switch (key) {
+      case "selection":
+        if (this.selection) {
+          this._selectionMinMax = {
+            min: Math.min(...this.selection),
+            max: Math.max(...this.selection)
+          };
+          this._showCursor = true;
+        } else {
+          this._selectionMinMax = {
+            min: -1,
+            max: -1
+          };
+          this._showCursor = false;
+        }
+        break;
+      case "_selectionMinMax":
+      case "_chars":
+        this._updateSelectedChars();
+        this._updateCursorPosition();
+        break;
+      case "_showCursor":
+      case "_cursorPosition":
+        this._renderCursor();
+        break;
+      case "_selectedChars":
+        this._renderCursor();
+        this._renderSelectRange();
+        break;
+      case "left":
+      case "top":
+      case "rotate":
+        this._update();
+        break;
+    }
+  }
+  _updateChars() {
+    const paragraphs = [];
+    this.text.paragraphs.forEach((p, paragraphIndex) => {
+      p.fragments.forEach((f, fragmentIndex) => {
+        f.characters.forEach((c) => {
+          if (!paragraphs[paragraphIndex])
+            paragraphs[paragraphIndex] = [];
+          if (!paragraphs[paragraphIndex][fragmentIndex])
+            paragraphs[paragraphIndex][fragmentIndex] = [];
+          paragraphs[paragraphIndex][fragmentIndex].push(c);
+        });
+      });
+    });
+    const toIndexChar = (c) => {
+      return {
+        paragraphIndex: -1,
+        fragmentIndex: -1,
+        charIndex: -1,
+        color: c.computedStyle.color,
+        left: c.inlineBox.left,
+        top: c.inlineBox.top,
+        width: c.inlineBox.width,
+        height: c.inlineBox.height,
+        content: c.content
+      };
+    };
+    const chars = [];
+    let pos = 0;
+    paragraphs.forEach((p, paragraphIndex) => {
+      if (p.length === 1 && p[0].length === 1 && isCRLF(p[0][0].content)) {
+        const c = p[0][0];
+        chars[pos] = {
+          ...toIndexChar(c),
+          paragraphIndex,
+          fragmentIndex: 0,
+          charIndex: 0,
+          isCrlf: true
+        };
+      } else {
+        p.forEach((f, fragmentIndex) => {
+          f.forEach((c, charIndex) => {
+            const char = toIndexChar(c);
+            chars[pos] = {
+              ...char,
+              paragraphIndex,
+              fragmentIndex,
+              charIndex
+            };
+            pos++;
+            if (!isCRLF(c.content)) {
+              chars[pos] = {
+                ...char,
+                paragraphIndex,
+                fragmentIndex,
+                charIndex,
+                content: " ",
+                isLastSelected: true
+              };
+            }
+          });
+        });
+      }
+      pos++;
+    });
+    if (chars[0]) {
+      chars[0].isFirst = true;
+    }
+    if (chars[chars.length - 1]) {
+      chars[chars.length - 1].isLast = true;
+    }
+    this._chars = chars;
+  }
+  _updateSelectedChars() {
+    this._selectedChars = this._chars.filter((_char, index) => {
+      return index >= this._selectionMinMax.min && index < this._selectionMinMax.max;
+    });
+    if (this._selectionMinMax.min > -1) {
+      this._emit("selected", [
+        this._chars[this._selectionMinMax.min],
+        this._chars[this._selectionMinMax.max]
+      ]);
+    } else {
+      this._emit("selected", void 0);
+    }
+  }
+  _updateCursorPosition() {
+    let left = 0;
+    let top = 0;
+    const char = this._chars[this._selectionMinMax.min];
+    if (char?.isLastSelected) {
+      if (this.text.isVertical) {
+        top += char?.height ?? 0;
+      } else {
+        left += char?.width ?? 0;
+      }
+    }
+    left += char?.left ?? 0;
+    top += char?.top ?? 0;
+    this._cursorPosition = {
+      color: char?.color,
+      left,
+      top,
+      height: char?.height ?? 0,
+      width: char?.width ?? 0
+    };
+  }
+  getPlaintext() {
+    return textContentToString(
+      this._getNewContent(
+        this.text.content
+      )
+    );
+  }
+  _getNewContent(content, newString = textContentToString(content), oldString = newString) {
+    newString = normalizeCRLF(newString);
+    newString = newString.replace(emojiRE, (emoji) => {
+      if (Array.from(emoji).length > 1) {
+        return "?";
+      }
+      return emoji;
+    });
+    oldString = normalizeCRLF(oldString);
+    const oldStyles = textContentToCharStyles(content);
+    const styles = [];
+    let styleIndex = 0;
+    let oldStyleIndex = 0;
+    let prevOldStyle = {};
+    const changes = diffChars(oldString, newString);
+    changes.forEach((change) => {
+      const chars = Array.from(change.value);
+      if (change.removed) {
+        oldStyleIndex += chars.length;
+      } else {
+        chars.forEach(() => {
+          if (change.added) {
+            styles[styleIndex] = { ...prevOldStyle };
+          } else {
+            prevOldStyle = normalizeStyle(oldStyles[oldStyleIndex]);
+            styles[styleIndex] = { ...prevOldStyle };
+            oldStyleIndex++;
+          }
+          styleIndex++;
+        });
+      }
+    });
+    let charIndex = 0;
+    const newContents = [];
+    normalizeTextContent(newString).forEach((p, pI) => {
+      const { fragments: _, ...pStyle } = content[pI] ?? {};
+      let newParagraph = { ...pStyle, fragments: [] };
+      let newFragment;
+      p.fragments.forEach((f) => {
+        Array.from(f.content).forEach((char) => {
+          const style = styles[charIndex] ?? {};
+          if (newFragment) {
+            const { content: _2, ..._style } = newFragment;
+            if (isEqualStyle(style, _style)) {
+              newFragment.content += char;
+            } else {
+              newParagraph.fragments.push(newFragment);
+              newFragment = { ...style, content: char };
+            }
+          } else {
+            newFragment = { ...style, content: char };
+          }
+          charIndex++;
+        });
+      });
+      if (!isCRLF(p.fragments[p.fragments.length - 1]?.content ?? "")) {
+        charIndex++;
+      }
+      if (newFragment) {
+        newParagraph.fragments.push(newFragment);
+      }
+      if (newParagraph.fragments.length) {
+        newContents.push(newParagraph);
+        newParagraph = { ...pStyle, fragments: [] };
+      }
+    });
+    return newContents;
+  }
+  _setTextInput(newText) {
+    this._textarea.value = newText;
+    this._oldText = newText;
+  }
+  _onInput() {
+    const newText = this._textarea.value;
+    this.text.content = this._getNewContent(
+      this.text.content,
+      newText,
+      this._oldText
+    );
+    this._oldText = newText;
+    this.text.update();
+    this._emit("update");
+  }
+  _timer;
+  _onKeydown(e) {
+    e.stopPropagation();
+    switch (e.key) {
+      case "Escape":
+        this.selection = void 0;
+        return this._textarea.blur();
+    }
+    this._updateSelectionByDom();
+    setTimeout(() => this._updateSelectionByDom(), 0);
+    setTimeout(() => this._updateSelectionByDom(), 100);
+  }
+  _findNearest(options) {
+    const isVertical = this.text.isVertical;
+    const {
+      x,
+      y,
+      xWeight = 1,
+      yWeight = 1
+    } = options;
+    const char = this._chars.reduce(
+      (prev, current, index) => {
+        const diff = Math.abs(current.left + current.width / 2 - x) * xWeight + Math.abs(current.top + current.height / 2 - y) * yWeight;
+        if (diff < prev.diff) {
+          return {
+            diff,
+            index,
+            value: current
+          };
+        }
+        return prev;
+      },
+      {
+        diff: Number.MAX_SAFE_INTEGER,
+        index: -1,
+        value: void 0
+      }
+    );
+    if (char?.value) {
+      if ((isVertical ? y > char.value.top + char.value.height / 2 : x > char.value.left + char.value.width / 2) && !char.value.isCrlf && !char.value.isLastSelected) {
+        return char.index + 1;
+      }
+      return char.index;
+    }
+    return -1;
+  }
+  _updateSelectionByDom() {
+    if (this._composition) {
+      this.selection = this._prevSelection;
+    } else {
+      const { selectionStart, selectionEnd } = this._textarea;
+      let count2 = 0;
+      const _selection = [-1, -1];
+      this._chars.forEach((char, index) => {
+        if (count2 <= selectionStart) {
+          _selection[0] = index;
+        }
+        if (count2 <= selectionEnd) {
+          _selection[1] = index;
+        }
+        count2 += char.content.length;
+      });
+      const oldSelection = this.selection;
+      this.selection = _selection;
+      this._prevSelection = oldSelection;
+    }
+  }
+  _updateDomSelection() {
+    let start = 0;
+    let end = 0;
+    this._chars.forEach((char, index) => {
+      if (index < this._selectionMinMax.min) {
+        start += char.content.length;
+        end = start;
+      } else if (index < this._selectionMinMax.max) {
+        end += char.content.length;
+      }
+    });
+    this._textarea.selectionStart = start;
+    this._textarea.selectionEnd = end;
+  }
+  _update() {
+    this._updateChars();
+    const { boundingBox, lineBox } = this.text;
+    const host = this.shadowRoot.host;
+    const radian = this.rotate * Math.PI / 180;
+    const cos = Math.cos(radian);
+    const sin = Math.sin(radian);
+    host.style.transform = `matrix(${cos}, ${sin}, ${-sin}, ${cos}, ${this.left}, ${this.top})`;
+    host.style.width = `${boundingBox.width}px`;
+    host.style.height = `${boundingBox.height}px`;
+    this._container.style.left = `${-boundingBox.left}px`;
+    this._container.style.top = `${-boundingBox.top}px`;
+    this._container.style.width = `${lineBox.width}px`;
+    this._container.style.height = `${lineBox.height}px`;
+    this._textarea.style.fontSize = `${this.text.computedStyle.fontSize}px`;
+    this._textarea.style.writingMode = this.text.computedStyle.writingMode;
+    this._renderSelectRange();
+    this._renderCursor();
+  }
+  _bindEventListeners() {
+    this._textarea.addEventListener("compositionstart", () => this._composition = true);
+    this._textarea.addEventListener("compositionend", () => this._composition = false);
+    this._textarea.addEventListener("keydown", this._onKeydown.bind(this));
+    this._textarea.addEventListener("input", this._onInput.bind(this));
+    if (SUPPORTS_POINTER_EVENTS) {
+      this._textarea.addEventListener("pointerdown", this.pointerDown.bind(this));
+    } else {
+      this._textarea.addEventListener("mousedown", this.pointerDown.bind(this));
+    }
+    ["keyup", "mouseup", "input", "paste", "cut"].forEach((key) => {
+      this._textarea.addEventListener(key, () => {
+        this._updateSelectionByDom();
+      });
+    });
+  }
+  pointerDown(e) {
+    if (e && e.button !== 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+    const isVertical = this.text.isVertical;
+    const host = this.shadowRoot.host;
+    const clientRect = host.getBoundingClientRect();
+    const { clientWidth: width, clientHeight: height } = host;
+    const scaleX = clientRect.width / width;
+    const scaleY = clientRect.height / height;
+    const radian = this.rotate * Math.PI / 180;
+    const cos = Math.cos(radian);
+    const sin = Math.sin(radian);
+    const m = new DOMMatrixReadOnly([cos, sin, -sin, cos, 0, 0]).inverse();
+    const clientCenter = { x: clientRect.x + clientRect.width / 2, y: clientRect.y + clientRect.height / 2 };
+    const center = { x: clientCenter.x / scaleX, y: clientCenter.y / scaleY };
+    let x = 0;
+    let y = 0;
+    const getXy = (e2) => {
+      const _p = m.transformPoint({
+        x: e2.clientX - clientCenter.x,
+        y: e2.clientY - clientCenter.y
+      });
+      const p = {
+        x: (_p.x + clientCenter.x) / scaleX,
+        y: (_p.y + clientCenter.y) / scaleY
+      };
+      if (isVertical) {
+        return {
+          x: center.x + width / 2 - p.x,
+          y: p.y - (center.y - height / 2)
+        };
+      } else {
+        return {
+          x: p.x - (center.x - width / 2),
+          y: p.y - (center.y - height / 2)
+        };
+      }
+    };
+    if (e) {
+      ({ x, y } = getXy(e));
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    const index = this._findNearest({ x, y });
+    this.selection = [index, index];
+    this._updateDomSelection();
+    if (e && ["mousedown", "pointerdown"].includes(e.type)) {
+      const onMove = (e2) => {
+        this.selection = [
+          index,
+          this._findNearest(getXy(e2))
+        ];
+        this._updateDomSelection();
+      };
+      const onUp = () => {
+        if (SUPPORTS_POINTER_EVENTS) {
+          document.removeEventListener("pointermove", onMove);
+          document.removeEventListener("pointerup", onUp);
+        } else {
+          document.removeEventListener("mousemove", onMove);
+          document.removeEventListener("mouseup", onUp);
+        }
+      };
+      if (SUPPORTS_POINTER_EVENTS) {
+        document.addEventListener("pointermove", onMove);
+        document.addEventListener("pointerup", onUp);
+      } else {
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
+      }
+    }
+    this._textarea.focus();
+    return true;
+  }
+  selectAll() {
+    this._textarea.focus();
+    this._textarea.select();
+    this._updateSelectionByDom();
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    this[name] = newValue;
+  }
+  _emit(type, detail) {
+    return this.dispatchEvent(
+      new CustomEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail
+      })
+    );
+  }
+  _renderSelectRange() {
+    const isVertical = this.text.isVertical;
+    const boxesGroupsMap = {};
+    this._selectedChars.forEach((char) => {
+      if (char.isLastSelected) {
+        return;
+      }
+      const key = isVertical ? char.left : char.top;
+      if (!boxesGroupsMap[key]) {
+        boxesGroupsMap[key] = [];
+      }
+      boxesGroupsMap[key].push({
+        x: char.left,
+        y: char.top,
+        w: char.width,
+        h: char.height
+      });
+    });
+    const boxesGroups = Object.values(boxesGroupsMap);
+    const sourceLen = this._selection.children.length;
+    const targetLen = boxesGroups.length;
+    const len = Math.max(sourceLen, targetLen);
+    const deleted = [];
+    for (let i = 0; i < len; i++) {
+      let element = this._selection.children.item(i);
+      const boxes = boxesGroups[i];
+      if (!boxes) {
+        deleted.push(element);
+        continue;
+      } else if (!element) {
+        element = document.createElement("div");
+        this._selection.append(element);
+      }
+      const min = {
+        x: Math.min(...boxes.map((v) => v.x)),
+        y: Math.min(...boxes.map((v) => v.y))
+      };
+      const max = {
+        x: Math.max(...boxes.map((v) => v.x + v.w)),
+        y: Math.max(...boxes.map((v) => v.y + v.h))
+      };
+      element.style.width = `${max.x - min.x}px`;
+      element.style.height = `${max.y - min.y}px`;
+      element.style.transform = `translate(${min.x}px, ${min.y}px)`;
+    }
+    deleted.forEach((el) => el?.remove());
+  }
+  _renderCursor() {
+    if (this._showCursor && this._cursorPosition && this._selectedChars.length === 0) {
+      const _cursorPosition = this._cursorPosition;
+      this._cursor.style.display = "block";
+      this._cursor.style.backgroundColor = _cursorPosition.color ?? "rgba(var(--color))";
+      this._cursor.style.left = `${_cursorPosition.left}px`;
+      this._cursor.style.top = `${_cursorPosition.top}px`;
+      this._cursor.style.height = this.text.isVertical ? "1px" : `${_cursorPosition.height}px`;
+      this._cursor.style.width = this.text.isVertical ? `${_cursorPosition.width}px` : "1px";
+    } else {
+      this._cursor.style.display = "none";
+    }
+    this._cursor.classList.remove("blink");
+    if (this._timer) {
+      clearTimeout(this._timer);
+    }
+    this._timer = setTimeout(() => this._cursor.classList.add("blink"), 500);
+  }
+  reset() {
+    this.selection = void 0;
+  }
+}
+__decorateClass([
+  property({ fallback: 0 })
+], TextEditor.prototype, "left");
+__decorateClass([
+  property({ fallback: 0 })
+], TextEditor.prototype, "top");
+__decorateClass([
+  property({ fallback: 0 })
+], TextEditor.prototype, "rotate");
+__decorateClass([
+  property()
+], TextEditor.prototype, "selection");
+__decorateClass([
+  property({ internal: true, fallback: () => ({ min: -1, max: -1 }) })
+], TextEditor.prototype, "_selectionMinMax");
+__decorateClass([
+  property({ internal: true, fallback: () => [] })
+], TextEditor.prototype, "_chars");
+__decorateClass([
+  property({ internal: true, fallback: () => [] })
+], TextEditor.prototype, "_selectedChars");
+__decorateClass([
+  property({ internal: true })
+], TextEditor.prototype, "_cursorPosition");
+__decorateClass([
+  property({ internal: true, fallback: false })
+], TextEditor.prototype, "_showCursor");
 const _4_1_text = defineMixin((editor) => {
   const {
     isElement,
@@ -2856,7 +3574,7 @@ const _4_3_element = defineMixin((editor) => {
       }
       return [node];
     }).filter((node) => {
-      return "isVisibleInTree" in node && node.isVisibleInTree() && getObb(node, "drawboard").overlapsOnAxis(area2) && !isLock(node);
+      return "isVisibleInTree" in node && node.isVisibleInTree() && getObb(node, "drawboard").overlapsOnAxis(area2) && !isLock(node) && !node.findAncestor((ancestor) => isLock(ancestor));
     }) ?? [];
     selection.value = selected;
     return selected;
@@ -3542,7 +4260,18 @@ const _clipboard = definePlugin((editor, options) => {
       return;
     }
     addElements(
-      selection.value.map((v) => v.toJSON()),
+      selection.value.map((v) => {
+        const el = v.toJSON();
+        if (el.style) {
+          if (el.style.left) {
+            el.style.left += 20;
+          }
+          if (el.style.top) {
+            el.style.top += 20;
+          }
+        }
+        return el;
+      }),
       {
         parent: selection.value[0].parent,
         index: selection.value[0].getIndex(),
@@ -3650,7 +4379,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       return unref(state) === "drawing" && unref(drawboardPointer) ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: "mce-drawing",
-        style: normalizeStyle({
+        style: normalizeStyle$1({
           left: `${unref(drawboardPointer).x}px`,
           top: `${unref(drawboardPointer).y}px`
         })
@@ -3793,6 +4522,8 @@ const aliases = {
   shape: "M8 17.95q.25.025.488.038T9 18t.513-.012t.487-.038V20h10V10h-2.05q.025-.25.038-.488T18 9t-.012-.513T17.95 8H20q.825 0 1.413.588T22 10v10q0 .825-.587 1.413T20 22H10q-.825 0-1.412-.587T8 20zM9 16q-2.925 0-4.962-2.037T2 9t2.038-4.962T9 2t4.963 2.038T16 9t-2.037 4.963T9 16m0-2q2.075 0 3.538-1.463T14 9t-1.463-3.537T9 4T5.463 5.463T4 9t1.463 3.538T9 14m0-5",
   text: "m18.5 4l1.16 4.35l-.96.26c-.45-.87-.91-1.74-1.44-2.18C16.73 6 16.11 6 15.5 6H13v10.5c0 .5 0 1 .33 1.25c.34.25 1 .25 1.67.25v1H9v-1c.67 0 1.33 0 1.67-.25c.33-.25.33-.75.33-1.25V6H8.5c-.61 0-1.23 0-1.76.43c-.53.44-.99 1.31-1.44 2.18l-.96-.26L5.5 4z",
   image: "M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zm1-2h12l-3.75-5l-3 4L9 13zm-1 2V5zm3.5-9q.625 0 1.063-.437T10 8.5t-.437-1.062T8.5 7t-1.062.438T7 8.5t.438 1.063T8.5 10",
+  lottie: "M17 6c-2.8 0-4.4 2.8-5.9 5.5C9.9 13.8 8.7 16 7 16c-.6 0-1 .4-1 1s.4 1 1 1c2.8 0 4.4-2.8 5.9-5.5C14.1 10.2 15.3 8 17 8c.6 0 1-.4 1-1s-.4-1-1-1m2-4H5C3.3 2 2 3.3 2 5v14c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3V5c0-1.7-1.3-3-3-3m1 17c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1V5c0-.6.4-1 1-1h14c.6 0 1 .4 1 1z",
+  video: "M15 8v8H5V8zm1-2H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4V7a1 1 0 0 0-1-1",
   lock: "M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm0-2h12V10H6zm6-3q.825 0 1.413-.587T14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6zM6 20V10z",
   unlock: "M6 8h9V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6H7q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22H6q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8m0 12h12V10H6zm6-3q.825 0 1.413-.587T14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17m-6 3V10z",
   visible: "M12 16q1.875 0 3.188-1.312T16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.788T9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2m0 4.8q-3.65 0-6.65-2.037T1 11.5q1.35-3.425 4.35-5.462T12 4t6.65 2.038T23 11.5q-1.35 3.425-4.35 5.463T12 19m0-2q2.825 0 5.188-1.487T20.8 11.5q-1.25-2.525-3.613-4.012T12 6T6.813 7.488T3.2 11.5q1.25 2.525 3.613 4.013T12 17",
@@ -4381,13 +5112,14 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       config,
       exec,
       renderEngine,
-      drawboardDom
+      drawboardDom,
+      isLock
     } = useEditor();
     const editing = ref(false);
     async function onDblclick() {
       editing.value = true;
-      await nextTick();
       if (input.value) {
+        await nextTick();
         input.value.focus();
         input.value.select();
       }
@@ -4404,19 +5136,20 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", {
-        style: normalizeStyle(unref(getObb)(frame.value, "drawboard").toCssStyle()),
+        style: normalizeStyle$1(unref(getObb)(frame.value, "drawboard").toCssStyle()),
         class: normalizeClass(["mce-frame", [
           unref(config).frameOutline && "mce-frame--outline",
           unref(hoverElement)?.equal(frame.value) && "mce-frame--hover",
-          unref(selection).some((v) => v.equal(frame.value)) && "mce-frame--selected"
+          unref(selection).some((v) => v.equal(frame.value)) && "mce-frame--selected",
+          unref(isLock)(frame.value) && "mce-frame--lock"
         ]])
       }, [
-        withDirectives(createElementVNode("div", {
+        createElementVNode("div", {
           class: "mce-frame__name",
-          onDblclick,
+          onDblclick: withModifiers(onDblclick, ["prevent", "stop"]),
           onPointerdown,
-          onPointerenter: _cache[2] || (_cache[2] = ($event) => !unref(state) && (hoverElement.value = frame.value)),
-          onPointerleave: _cache[3] || (_cache[3] = ($event) => !unref(state) && (hoverElement.value = void 0))
+          onPointerenter: _cache[2] || (_cache[2] = ($event) => !unref(state) && !unref(isLock)(frame.value) && (hoverElement.value = frame.value)),
+          onPointerleave: _cache[3] || (_cache[3] = ($event) => !unref(state) && !unref(isLock)(frame.value) && (hoverElement.value = void 0))
         }, [
           createElementVNode("div", null, toDisplayString(frame.value.name), 1),
           withDirectives(createElementVNode("input", {
@@ -4427,9 +5160,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             [vShow, editing.value],
             [vModelText, frame.value.name]
           ])
-        ], 544), [
-          [vShow, unref(config).viewMode === "edgeless"]
-        ])
+        ], 32)
       ], 6)), [
         [vShow, frame.value.visible]
       ]);
@@ -4469,6 +5200,9 @@ const _frame = definePlugin((editor) => {
         handle: (start) => {
           const el = addElement({
             name: t("frame"),
+            style: {
+              overflow: "hidden"
+            },
             meta: {
               inPptIs: "GroupShape",
               inEditorIs: "Frame",
@@ -4675,7 +5409,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
         key: 0,
         class: "mce-hover",
         "data-name": unref(hoverElement).name,
-        style: normalizeStyle({
+        style: normalizeStyle$1({
           borderColor: "currentcolor",
           borderRadius: `${(unref(hoverElement).style.borderRadius ?? 0) * unref(camera).zoom.x}px`,
           ...hoverElementObb.value.toCssStyle()
@@ -5181,6 +5915,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         return "$frame";
       } else if (node.children.filter(isElement).length) {
         return "$group";
+      } else if (node instanceof Lottie2D) {
+        return "$lottie";
+      } else if (node instanceof Video2D) {
+        return "$video";
       } else if (isElement(node)) {
         if (node.foreground.isValid() && node.foreground.image) {
           return "$image";
@@ -5197,8 +5935,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       if (!value) {
         if (isFrame(node)) {
           return t("frame");
-        } else if (node.children.length) {
+        } else if (node.children.filter(isElement).length) {
           value = t("group");
+        } else if (node instanceof Lottie2D) {
+          value = t("lottie");
+        } else if (node instanceof Video2D) {
+          value = t("video");
         } else if (isElement(node)) {
           if (node.foreground.isValid() && node.foreground.image) {
             value = t("image");
@@ -5317,7 +6059,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             isHoverElement.value && "mce-layer--hover",
             unref(dropping) && "mce-layer--dropping"
           ]]),
-          style: normalizeStyle({
+          style: normalizeStyle$1({
             "--indent-padding": `${props.indent * 16}px`
           }),
           "data-id": unref(id),
@@ -5364,7 +6106,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 [vModelText, editValue.value]
               ]),
               createElementVNode("div", {
-                style: normalizeStyle({ visibility: editing.value ? "hidden" : void 0 })
+                style: normalizeStyle$1({ visibility: editing.value ? "hidden" : void 0 })
               }, toDisplayString(editValue.value || thumbnailName.value), 5)
             ], 32),
             createElementVNode("div", {
@@ -5949,7 +6691,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         target: position.value,
         location: "bottom-start",
         items: unref(contextMenu),
-        style: normalizeStyle({
+        style: normalizeStyle$1({
           maxHeight: `${unref(drawboardAabb).height * 0.8}px`
         }),
         "onClick:item": onClickItem
@@ -10892,7 +11634,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
               "mce-ruler-refline--horizontal": !props.vertical,
               "mce-ruler-refline--temp": item === tempLine.value
             }]),
-            style: normalizeStyle({
+            style: normalizeStyle$1({
               [props.vertical ? "height" : "width"]: "0",
               [props.vertical ? "width" : "height"]: "100%",
               [props.vertical ? "top" : "left"]: `${numToPx(item)}px`,
@@ -11086,7 +11828,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           "mce-scrollbar--vertical": props.vertical,
           "mce-scrollbar--horizontal": !props.vertical
         }]),
-        style: normalizeStyle({
+        style: normalizeStyle$1({
           [props.vertical ? "height" : "width"]: `calc(100% - ${props.size + props.offset}px)`,
           [props.vertical ? "width" : "height"]: `${props.size}px`,
           [props.vertical ? "top" : "left"]: `${props.offset}px`
@@ -11098,7 +11840,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["mce-scrollbar__thumb", {
               "mce-scrollbar__thumb--active": isActive.value
             }]),
-            style: normalizeStyle({
+            style: normalizeStyle$1({
               top: thumbTop.value,
               bottom: thumbBottom.value,
               left: thumbLeft.value,
@@ -11432,7 +12174,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock("div", {
             key,
             class: normalizeClass(item.class.map((v) => `mce-smart-guides__${v}`)),
-            style: normalizeStyle({
+            style: normalizeStyle$1({
               left: `${item.style.left}px`,
               top: `${item.style.top}px`,
               width: `${item.style.width}px`,
@@ -12798,7 +13540,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           !__props.indeterminate ? (openBlock(), createElementBlock("div", {
             key: 0,
             class: "progress-indicator__bar-fill",
-            style: normalizeStyle({ width: `${progress.value * 100}%` })
+            style: normalizeStyle$1({ width: `${progress.value * 100}%` })
           }, null, 4)) : (openBlock(), createElementBlock("div", _hoisted_4$3))
         ])
       ]);
@@ -13023,10 +13765,38 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const blocks = computed(() => {
+      const node = props.node;
+      if (node instanceof Element2D) {
+        return node.children.filter((child) => child instanceof Animation).map((anim) => {
+          const box = {
+            left: anim.delay / props.msPerPx,
+            top: 0,
+            width: anim.duration / props.msPerPx
+          };
+          if (box.width) {
+            box.width = `${box.width}px`;
+          } else {
+            box.width = "100%";
+          }
+          return {
+            name: anim.name,
+            style: {
+              width: box.width,
+              transform: `matrix(1, 0, 0, 1, ${box.left}, ${box.top})`
+            }
+          };
+        });
+      }
+      return [];
+    });
     const style = computed(() => {
-      const box = { left: 0, top: 0, width: 0 };
-      box.left = props.node.delay / props.msPerPx;
-      box.width = props.node.duration / props.msPerPx;
+      const node = props.node;
+      const box = {
+        left: node.delay / props.msPerPx,
+        top: 0,
+        width: node.duration / props.msPerPx
+      };
       if (box.width) {
         box.width = `${box.width}px`;
       } else {
@@ -13040,11 +13810,18 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["mce-segment", [
-          `mce-segment--${__props.node.meta.inEditorIs}`,
+          `mce-segment--${(__props.node.meta.inEditorIs ?? "none").toLowerCase()}`,
           __props.active && `mce-segment--active`
         ]]),
-        style: normalizeStyle(style.value)
+        style: normalizeStyle$1(style.value)
       }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(blocks.value, (block, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: index,
+            class: "mce-segment__block",
+            style: normalizeStyle$1(block.style)
+          }, toDisplayString(block.name), 5);
+        }), 128)),
         __props.active ? (openBlock(), createElementBlock("div", _hoisted_1$8)) : createCommentVNode("", true),
         createElementVNode("span", _hoisted_2$4, toDisplayString(props.node.name), 1),
         __props.active ? (openBlock(), createElementBlock("div", _hoisted_3$4)) : createCommentVNode("", true)
@@ -13072,7 +13849,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "mce-trackhead",
-        style: normalizeStyle({
+        style: normalizeStyle$1({
           height: `var(--timeline-track-height__${__props.node.meta.inEditorIs}, 22px)`
         })
       }, toDisplayString(__props.node.meta.inEditorIs), 5);
@@ -13201,7 +13978,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_3$3, [
             createElementVNode("div", _hoisted_4$1, [
               createElementVNode("div", {
-                style: normalizeStyle({
+                style: normalizeStyle$1({
                   transform: `translateY(${offset2.value[1]}px)`
                 })
               }, [
@@ -13233,7 +14010,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               ]),
               createElementVNode("div", _hoisted_7$1, [
                 createElementVNode("div", {
-                  style: normalizeStyle({
+                  style: normalizeStyle$1({
                     width: `${unref(endTime) / unref(msPerPx)}px`,
                     transform: `translate(${offset2.value[0]}px, ${offset2.value[1]}px)`
                   })
@@ -13254,7 +14031,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 ], 4)
               ]),
               createVNode(_sfc_main$h, {
-                style: normalizeStyle({
+                style: normalizeStyle$1({
                   transform: `translate(${offset2.value[0] + Math.ceil(unref(currentTime) / unref(msPerPx))}px, 0px)`
                 })
               }, null, 8, ["style"])
@@ -13857,7 +14634,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$u, {
         ref: "overlayTpl",
-        style: normalizeStyle(style.value),
+        style: normalizeStyle$1(style.value),
         class: "mce-floatbar",
         location: props.location,
         middlewares: props.middlewares,
@@ -14382,7 +15159,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           activeHandle.value?.startsWith("rotate") && "mce-transformable--rotateing",
           props.borderStyle && `mce-transformable--${props.borderStyle}`
         ]]),
-        style: normalizeStyle(style.value)
+        style: normalizeStyle$1(style.value)
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {
@@ -14603,7 +15380,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$3, [
         createElementVNode("div", {
           class: "mce-cropper__source",
-          style: normalizeStyle(sourceStyle.value)
+          style: normalizeStyle$1(sourceStyle.value)
         }, [
           createElementVNode("canvas", {
             ref_key: "canvasRef",
@@ -14646,7 +15423,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         key: 0,
         modelValue: element.value.foreground.cropRect,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => element.value.foreground.cropRect = $event),
-        style: normalizeStyle(element.value.style.toJSON()),
+        style: normalizeStyle$1(element.value.style.toJSON()),
         image: element.value.foreground.image,
         class: "pointer-events-auto",
         "onUpdate:style": _cache[1] || (_cache[1] = (val) => element.value.style.setProperties(val)),
@@ -14855,7 +15632,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock("div", {
             key: index,
             class: "mce-selector__parent-element",
-            style: normalizeStyle({
+            style: normalizeStyle$1({
               borderColor: "currentColor",
               ...style
             })
@@ -14864,7 +15641,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         unref(state) === "selecting" ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "mce-selector__selected-area",
-          style: normalizeStyle({
+          style: normalizeStyle$1({
             borderColor: "currentcolor",
             ...props.selectedArea.toCssStyle()
           })
@@ -14873,7 +15650,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock("div", {
             key: index,
             class: "mce-selector__element",
-            style: normalizeStyle({
+            style: normalizeStyle$1({
               borderColor: "currentcolor",
               ...style
             })
@@ -14907,7 +15684,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         transform.value.width && transform.value.height && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "mce-selector__slot",
-          style: normalizeStyle(unref(boundingBoxToStyle)(transform.value))
+          style: normalizeStyle$1(unref(boundingBoxToStyle)(transform.value))
         }, [
           renderSlot(_ctx.$slots, "default", { box: transform.value })
         ], 4)) : createCommentVNode("", true)
@@ -15006,7 +15783,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref: unref(layoutRef),
         class: normalizeClass(normalizeClass([unref(layoutClasses), props.class])),
-        style: normalizeStyle(normalizeStyle([unref(layoutStyles), props.style]))
+        style: normalizeStyle$1(normalizeStyle$1([unref(layoutStyles), props.style]))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 6);
@@ -15052,7 +15829,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           `mce-layout-item--${props.position}`,
           props.class
         ])),
-        style: normalizeStyle(normalizeStyle([unref(layoutItemStyles), props.style]))
+        style: normalizeStyle$1(normalizeStyle$1([unref(layoutItemStyles), props.style]))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 6);
@@ -15076,7 +15853,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["mce-main", [
           { "mce-main--scrollable": props.scrollable }
         ]]),
-        style: normalizeStyle([unref(mainStyles)])
+        style: normalizeStyle$1([unref(mainStyles)])
       }, [
         props.scrollable ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
           renderSlot(_ctx.$slots, "default")
@@ -15157,13 +15934,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", {
         class: "mce-text-editor",
-        style: normalizeStyle({
+        style: normalizeStyle$1({
           ...mainStyleWithScale.value
         })
       }, [
         createElementVNode("div", {
           class: "mce-text-editor__wrapper",
-          style: normalizeStyle({
+          style: normalizeStyle$1({
             ...textEditorStyle.value
           })
         }, [
@@ -15299,7 +16076,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           hovered = result;
         }
       }
-      if (!(isElement(hovered) && !isLock(hovered) && !isTopLevelFrame(hovered))) {
+      if (!(isElement(hovered) && !isLock(hovered) && !hovered.findAncestor((ancestor) => isLock(ancestor)) && !isTopLevelFrame(hovered))) {
         hovered = void 0;
         cursor = void 0;
       }
@@ -15314,7 +16091,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         allowRootFrame = false
       } = options;
       function isIncluded(node) {
-        return isElement(node) && !isLock(node) && (allowRootFrame || !isTopLevelFrame(node));
+        return isElement(node) && !isLock(node) && (allowRootFrame || !isTopLevelFrame(node)) && !node.findAncestor((ancestor) => isLock(ancestor));
       }
       const drawing = state.value === "drawing";
       const hand = state.value === "hand";