@zipify/wysiwyg 4.1.0-0 → 4.1.0-1

package/dist/wysiwyg.mjs

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, ref, onMounted, onBeforeUnmount, h, getCurrentInstance, watchEffect, nextTick, unref, Teleport, reactive, markRaw, customRef, openBlock, createElementBlock, renderSlot, computed, normalizeClass, toRef, watch, Fragment as Fragment$1, renderList, normalizeStyle, inject, onUnmounted, provide, createElementVNode, createVNode, toDisplayString, createCommentVNode, createBlock, Transition, withCtx, withDirectives, pushScopeId, popScopeId, createTextVNode, normalizeProps, guardReactiveProps, withModifiers, resolveComponent, resolveDynamicComponent, useCssVars, KeepAlive } from "vue";
+import { defineComponent, ref, onMounted, onBeforeUnmount, h, getCurrentInstance, watchEffect, nextTick, unref, Teleport, reactive, markRaw, customRef, openBlock, createElementBlock, renderSlot, computed, normalizeClass, toRef, watch, Fragment as Fragment$1, renderList, normalizeStyle, inject, onUnmounted, provide, createElementVNode, createVNode, toDisplayString, createCommentVNode, shallowRef, getCurrentScope, onScopeDispose, shallowReadonly, useCssVars, createBlock, Transition, withCtx, withDirectives, pushScopeId, popScopeId, createTextVNode, normalizeProps, guardReactiveProps, withModifiers, resolveComponent, resolveDynamicComponent, KeepAlive } from "vue";
 import { ColorModel, ColorPicker } from "@zipify/colorpicker";
 function OrderedMap(content) {
   this.content = content;
@@ -8766,7 +8766,7 @@ function captureCopy(view, dom) {
 const brokenClipboardAPI = ie$1 && ie_version < 15 || ios && webkit_version < 604;
 handlers.copy = editHandlers.cut = (view, _event) => {
   let event = _event;
-  let sel = view.state.selection, cut = event.type == "cut";
+  let sel = view.state.selection, cut2 = event.type == "cut";
   if (sel.empty)
     return;
   let data = brokenClipboardAPI ? null : event.clipboardData;
@@ -8779,7 +8779,7 @@ handlers.copy = editHandlers.cut = (view, _event) => {
   } else {
     captureCopy(view, dom);
   }
-  if (cut)
+  if (cut2)
     view.dispatch(view.state.tr.deleteSelection().scrollIntoView().setMeta("uiEvent", "cut"));
 };
 function sliceSingleNode(slice2) {
@@ -11364,9 +11364,6 @@ class CommandManager {
   buildProps(tr2, shouldDispatch = true) {
     const { rawCommands, editor, state } = this;
     const { view } = editor;
-    if (state.storedMarks) {
-      tr2.setStoredMarks(state.storedMarks);
-    }
     const props = {
       tr: tr2,
       editor,
@@ -11376,7 +11373,7 @@ class CommandManager {
         transaction: tr2
       }),
       dispatch: shouldDispatch ? () => void 0 : void 0,
-      chain: () => this.createChain(tr2),
+      chain: () => this.createChain(tr2, shouldDispatch),
       can: () => this.createCan(tr2),
       get commands() {
         return Object.fromEntries(Object.entries(rawCommands).map(([name, command2]) => {
@@ -11531,7 +11528,10 @@ function mergeAttributes(...objects) {
         return;
       }
       if (key === "class") {
-        mergedAttributes[key] = [mergedAttributes[key], value].join(" ");
+        const valueClasses = value ? value.split(" ") : [];
+        const existingClasses = mergedAttributes[key] ? mergedAttributes[key].split(" ") : [];
+        const insertClasses = valueClasses.filter((valueClass) => !existingClasses.includes(valueClass));
+        mergedAttributes[key] = [...existingClasses, ...insertClasses].join(" ");
       } else if (key === "style") {
         mergedAttributes[key] = [mergedAttributes[key], value].join("; ");
       } else {
@@ -11933,7 +11933,7 @@ const pasteRuleMatcherHandler = (text, find2) => {
   });
 };
 function run$2(config) {
-  const { editor, state, from: from2, to, rule } = config;
+  const { editor, state, from: from2, to, rule, pasteEvent, dropEvent } = config;
   const { commands: commands2, chain, can } = new CommandManager({
     editor,
     state
@@ -11963,7 +11963,9 @@ function run$2(config) {
         match,
         commands: commands2,
         chain,
-        can
+        can,
+        pasteEvent,
+        dropEvent
       });
       handlers2.push(handler);
     });
@@ -11976,6 +11978,8 @@ function pasteRulesPlugin(props) {
   let dragSourceElement = null;
   let isPastedFromProseMirror = false;
   let isDroppedFromProseMirror = false;
+  let pasteEvent = new ClipboardEvent("paste");
+  let dropEvent = new DragEvent("drop");
   const plugins = rules.map((rule) => {
     return new Plugin({
       // we register a global drag handler to track the current drag source element
@@ -11993,13 +11997,15 @@ function pasteRulesPlugin(props) {
       },
       props: {
         handleDOMEvents: {
-          drop: (view) => {
+          drop: (view, event) => {
             isDroppedFromProseMirror = dragSourceElement === view.dom.parentElement;
+            dropEvent = event;
             return false;
           },
-          paste: (view, event) => {
+          paste: (_view, event) => {
             var _a2;
             const html = (_a2 = event.clipboardData) === null || _a2 === void 0 ? void 0 : _a2.getData("text/html");
+            pasteEvent = event;
             isPastedFromProseMirror = !!(html === null || html === void 0 ? void 0 : html.includes("data-pm-slice"));
             return false;
           }
@@ -12027,11 +12033,15 @@ function pasteRulesPlugin(props) {
           state: chainableState,
           from: Math.max(from2 - 1, 0),
           to: to.b - 1,
-          rule
+          rule,
+          pasteEvent,
+          dropEvent
         });
         if (!handler || !tr2.steps.length) {
           return;
         }
+        dropEvent = new DragEvent("drop");
+        pasteEvent = new ClipboardEvent("paste");
         return tr2;
       }
     });
@@ -12435,6 +12445,15 @@ const command = (fn2) => (props) => {
 const createParagraphNear = () => ({ state, dispatch }) => {
   return createParagraphNear$1(state, dispatch);
 };
+const cut = (originRange, targetPos) => ({ editor, tr: tr2 }) => {
+  const { state } = editor;
+  const contentSlice = state.doc.slice(originRange.from, originRange.to);
+  tr2.deleteRange(originRange.from, originRange.to);
+  const newPos = tr2.mapping.map(targetPos);
+  tr2.insert(newPos, contentSlice.content);
+  tr2.setSelection(new TextSelection(tr2.doc.resolve(newPos - 1)));
+  return true;
+};
 const deleteCurrentNode = () => ({ tr: tr2, dispatch }) => {
   const { selection } = tr2;
   const currentNode = selection.$anchor.node();
@@ -12717,7 +12736,7 @@ const insertContentAt = (position, value, options) => ({ tr: tr2, dispatch, edit
     if (content.toString() === "<>") {
       return true;
     }
-    let { from: from2, to } = typeof position === "number" ? { from: position, to: position } : position;
+    let { from: from2, to } = typeof position === "number" ? { from: position, to: position } : { from: position.from, to: position.to };
     let isOnlyTextContent = true;
     let isOnlyBlockContent = true;
     const nodes = isFragment(content) ? content : [content];
@@ -12763,6 +12782,36 @@ const joinBackward = () => ({ state, dispatch }) => {
 const joinForward = () => ({ state, dispatch }) => {
   return joinForward$1(state, dispatch);
 };
+const joinItemBackward = () => ({ tr: tr2, state, dispatch }) => {
+  try {
+    const point = joinPoint(state.doc, state.selection.$from.pos, -1);
+    if (point === null || point === void 0) {
+      return false;
+    }
+    tr2.join(point, 2);
+    if (dispatch) {
+      dispatch(tr2);
+    }
+    return true;
+  } catch {
+    return false;
+  }
+};
+const joinItemForward = () => ({ state, dispatch, tr: tr2 }) => {
+  try {
+    const point = joinPoint(state.doc, state.selection.$from.pos, 1);
+    if (point === null || point === void 0) {
+      return false;
+    }
+    tr2.join(point, 2);
+    if (dispatch) {
+      dispatch(tr2);
+    }
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
 function isMacOS() {
   return typeof navigator !== "undefined" ? /Mac/.test(navigator.platform) : false;
 }
@@ -12967,6 +13016,26 @@ const setContent$1 = (content, emitUpdate = false, parseOptions = {}) => ({ tr:
   }
   return true;
 };
+function getMarkAttributes(state, typeOrName) {
+  const type = getMarkType(typeOrName, state.schema);
+  const { from: from2, to, empty: empty2 } = state.selection;
+  const marks = [];
+  if (empty2) {
+    if (state.storedMarks) {
+      marks.push(...state.storedMarks);
+    }
+    marks.push(...state.selection.$head.marks());
+  } else {
+    state.doc.nodesBetween(from2, to, (node) => {
+      marks.push(...node.marks);
+    });
+  }
+  const mark = marks.find((markItem) => markItem.type.name === type.name);
+  if (!mark) {
+    return {};
+  }
+  return { ...mark.attrs };
+}
 function combineTransactionSteps(oldDoc, transactions) {
   const transform = new Transform(oldDoc);
   transactions.forEach((transaction) => {
@@ -13031,26 +13100,6 @@ function getText(node, options) {
   };
   return getTextBetween(node, range, options);
 }
-function getMarkAttributes(state, typeOrName) {
-  const type = getMarkType(typeOrName, state.schema);
-  const { from: from2, to, empty: empty2 } = state.selection;
-  const marks = [];
-  if (empty2) {
-    if (state.storedMarks) {
-      marks.push(...state.storedMarks);
-    }
-    marks.push(...state.selection.$head.marks());
-  } else {
-    state.doc.nodesBetween(from2, to, (node) => {
-      marks.push(...node.marks);
-    });
-  }
-  const mark = marks.find((markItem) => markItem.type.name === type.name);
-  if (!mark) {
-    return {};
-  }
-  return { ...mark.attrs };
-}
 function getNodeAttributes(state, typeOrName) {
   const type = getNodeType(typeOrName, state.schema);
   const { from: from2, to } = state.selection;
@@ -13746,6 +13795,7 @@ var commands = /* @__PURE__ */ Object.freeze({
   clearNodes,
   command,
   createParagraphNear,
+  cut,
   deleteCurrentNode,
   deleteNode,
   deleteRange,
@@ -13762,6 +13812,8 @@ var commands = /* @__PURE__ */ Object.freeze({
   joinDown,
   joinBackward,
   joinForward,
+  joinItemBackward,
+  joinItemForward,
   keyboardShortcut,
   lift,
   liftEmptyBlock,
@@ -13853,7 +13905,10 @@ const Keymap = Extension.create({
         const { selection, doc: doc2 } = tr2;
         const { empty: empty2, $anchor } = selection;
         const { pos, parent } = $anchor;
-        const isAtStart = Selection.atStart(doc2).from === pos;
+        const $parentPos = $anchor.parent.isTextblock ? tr2.doc.resolve(pos - 1) : $anchor;
+        const parentIsIsolating = $parentPos.parent.type.spec.isolating;
+        const parentPos = $anchor.pos - $anchor.parentOffset;
+        const isAtStart = parentIsIsolating && $parentPos.parent.childCount === 1 ? parentPos === $anchor.pos : Selection.atStart(doc2).from === pos;
         if (!empty2 || !isAtStart || !parent.type.isTextblock || parent.textContent.length) {
           return false;
         }
@@ -14045,8 +14100,8 @@ img.ProseMirror-separator {
 .tippy-box[data-animation=fade][data-state=hidden] {
   opacity: 0
 }`;
-function createStyleTag(style2, nonce) {
-  const tiptapStyleTag = document.querySelector("style[data-tiptap-style]");
+function createStyleTag(style2, nonce, suffix) {
+  const tiptapStyleTag = document.querySelector(`style[data-tiptap-style${suffix ? `-${suffix}` : ""}]`);
   if (tiptapStyleTag !== null) {
     return tiptapStyleTag;
   }
@@ -14054,7 +14109,7 @@ function createStyleTag(style2, nonce) {
   if (nonce) {
     styleNode.setAttribute("nonce", nonce);
   }
-  styleNode.setAttribute("data-tiptap-style", "");
+  styleNode.setAttribute(`data-tiptap-style${suffix ? `-${suffix}` : ""}`, "");
   styleNode.innerHTML = style2;
   document.getElementsByTagName("head")[0].appendChild(styleNode);
   return styleNode;
@@ -14252,6 +14307,7 @@ let Editor$1 = class Editor extends EventEmitter {
     });
     this.view.updateState(newState);
     this.createNodeViews();
+    this.prependClass();
     const dom = this.view.dom;
     dom.editor = this;
   }
@@ -14263,6 +14319,12 @@ let Editor$1 = class Editor extends EventEmitter {
       nodeViews: this.extensionManager.nodeViews
     });
   }
+  /**
+   * Prepend class name to element.
+   */
+  prependClass() {
+    this.view.dom.className = `tiptap ${this.view.dom.className}`;
+  }
   captureTransaction(fn2) {
     this.isCapturingTransaction = true;
     fn2();
@@ -14584,8 +14646,8 @@ let Node$1 = class Node3 {
 function markPasteRule(config) {
   return new PasteRule({
     find: config.find,
-    handler: ({ state, range, match }) => {
-      const attributes = callOrReturn(config.getAttributes, void 0, match);
+    handler: ({ state, range, match, pasteEvent }) => {
+      const attributes = callOrReturn(config.getAttributes, void 0, match, pasteEvent);
       if (attributes === false || attributes === null) {
         return null;
       }
@@ -14961,15 +15023,7 @@ function effect$1(_ref2) {
       return;
     }
   }
-  if (process.env.NODE_ENV !== "production") {
-    if (!isHTMLElement$1(arrowElement)) {
-      console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', "To use an SVG arrow, wrap it in an HTMLElement that will be used as", "the arrow."].join(" "));
-    }
-  }
   if (!contains(state.elements.popper, arrowElement)) {
-    if (process.env.NODE_ENV !== "production") {
-      console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', "element."].join(" "));
-    }
     return;
   }
   state.elements.arrow = arrowElement;
@@ -15070,14 +15124,6 @@ function mapToStyles(_ref2) {
 function computeStyles(_ref5) {
   var state = _ref5.state, options = _ref5.options;
   var _options$gpuAccelerat = options.gpuAcceleration, gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, _options$adaptive = options.adaptive, adaptive = _options$adaptive === void 0 ? true : _options$adaptive, _options$roundOffsets = options.roundOffsets, roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-  if (process.env.NODE_ENV !== "production") {
-    var transitionProperty = getComputedStyle$2(state.elements.popper).transitionProperty || "";
-    if (adaptive && ["transform", "top", "right", "bottom", "left"].some(function(property) {
-      return transitionProperty.indexOf(property) >= 0;
-    })) {
-      console.warn(["Popper: Detected CSS transitions on at least one of the following", 'CSS properties: "transform", "top", "right", "bottom", "left".', "\n\n", 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', "for smooth transitions, or remove these properties from the CSS", "transition declaration on the popper element if only transitioning", "opacity or background-color for example.", "\n\n", "We recommend using the popper element as a wrapper around an inner", "element that can have any CSS property transitioned for animations."].join(" "));
-    }
-  }
   var commonStyles = {
     placement: getBasePlacement$1(state.placement),
     variation: getVariation(state.placement),
@@ -15406,9 +15452,6 @@ function computeAutoPlacement(state, options) {
   });
   if (allowedPlacements.length === 0) {
     allowedPlacements = placements$1;
-    if (process.env.NODE_ENV !== "production") {
-      console.error(["Popper: The `allowedAutoPlacements` option did not allow any", "placements. Ensure the `placement` option matches the variation", "of the allowed placements.", 'For example, "auto" cannot be used to allow "bottom-start".', 'Use "auto-start" instead.'].join(" "));
-    }
   }
   var overflows = allowedPlacements.reduce(function(acc, placement2) {
     acc[placement2] = detectOverflow$1(state, {
@@ -15830,86 +15873,6 @@ function debounce$2(fn2) {
     return pending;
   };
 }
-function format(str) {
-  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    args[_key - 1] = arguments[_key];
-  }
-  return [].concat(args).reduce(function(p, c) {
-    return p.replace(/%s/, c);
-  }, str);
-}
-var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
-var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available';
-var VALID_PROPERTIES = ["name", "enabled", "phase", "fn", "effect", "requires", "options"];
-function validateModifiers(modifiers2) {
-  modifiers2.forEach(function(modifier) {
-    [].concat(Object.keys(modifier), VALID_PROPERTIES).filter(function(value, index, self2) {
-      return self2.indexOf(value) === index;
-    }).forEach(function(key) {
-      switch (key) {
-        case "name":
-          if (typeof modifier.name !== "string") {
-            console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', '"' + String(modifier.name) + '"'));
-          }
-          break;
-        case "enabled":
-          if (typeof modifier.enabled !== "boolean") {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', '"' + String(modifier.enabled) + '"'));
-          }
-          break;
-        case "phase":
-          if (modifierPhases.indexOf(modifier.phase) < 0) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(", "), '"' + String(modifier.phase) + '"'));
-          }
-          break;
-        case "fn":
-          if (typeof modifier.fn !== "function") {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', '"' + String(modifier.fn) + '"'));
-          }
-          break;
-        case "effect":
-          if (modifier.effect != null && typeof modifier.effect !== "function") {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', '"' + String(modifier.fn) + '"'));
-          }
-          break;
-        case "requires":
-          if (modifier.requires != null && !Array.isArray(modifier.requires)) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', '"' + String(modifier.requires) + '"'));
-          }
-          break;
-        case "requiresIfExists":
-          if (!Array.isArray(modifier.requiresIfExists)) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', '"' + String(modifier.requiresIfExists) + '"'));
-          }
-          break;
-        case "options":
-        case "data":
-          break;
-        default:
-          console.error('PopperJS: an invalid property has been provided to the "' + modifier.name + '" modifier, valid properties are ' + VALID_PROPERTIES.map(function(s) {
-            return '"' + s + '"';
-          }).join(", ") + '; but "' + key + '" was provided.');
-      }
-      modifier.requires && modifier.requires.forEach(function(requirement) {
-        if (modifiers2.find(function(mod) {
-          return mod.name === requirement;
-        }) == null) {
-          console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement));
-        }
-      });
-    });
-  });
-}
-function uniqueBy(arr, fn2) {
-  var identifiers = /* @__PURE__ */ new Set();
-  return arr.filter(function(item) {
-    var identifier = fn2(item);
-    if (!identifiers.has(identifier)) {
-      identifiers.add(identifier);
-      return true;
-    }
-  });
-}
 function mergeByName(modifiers2) {
   var merged = modifiers2.reduce(function(merged2, current) {
     var existing = merged2[current.name];
@@ -15923,8 +15886,6 @@ function mergeByName(modifiers2) {
     return merged[key];
   });
 }
-var INVALID_ELEMENT_ERROR = "Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.";
-var INFINITE_LOOP_ERROR = "Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.";
 var DEFAULT_OPTIONS = {
   placement: "bottom",
   modifiers: [],
@@ -15975,28 +15936,6 @@ function popperGenerator(generatorOptions) {
         state.orderedModifiers = orderedModifiers.filter(function(m) {
           return m.enabled;
         });
-        if (process.env.NODE_ENV !== "production") {
-          var modifiers2 = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function(_ref) {
-            var name = _ref.name;
-            return name;
-          });
-          validateModifiers(modifiers2);
-          if (getBasePlacement$1(state.options.placement) === auto) {
-            var flipModifier = state.orderedModifiers.find(function(_ref2) {
-              var name = _ref2.name;
-              return name === "flip";
-            });
-            if (!flipModifier) {
-              console.error(['Popper: "auto" placements require the "flip" modifier be', "present and enabled to work."].join(" "));
-            }
-          }
-          var _getComputedStyle = getComputedStyle$2(popper2), marginTop = _getComputedStyle.marginTop, marginRight = _getComputedStyle.marginRight, marginBottom = _getComputedStyle.marginBottom, marginLeft = _getComputedStyle.marginLeft;
-          if ([marginTop, marginRight, marginBottom, marginLeft].some(function(margin) {
-            return parseFloat(margin);
-          })) {
-            console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', "between the popper and its reference element or boundary.", "To replicate margin, use the `offset` modifier, as well as", "the `padding` option in the `preventOverflow` and `flip`", "modifiers."].join(" "));
-          }
-        }
         runModifierEffects();
         return instance.update();
       },
@@ -16011,9 +15950,6 @@ function popperGenerator(generatorOptions) {
         }
         var _state$elements = state.elements, reference3 = _state$elements.reference, popper3 = _state$elements.popper;
         if (!areValidElements(reference3, popper3)) {
-          if (process.env.NODE_ENV !== "production") {
-            console.error(INVALID_ELEMENT_ERROR);
-          }
           return;
         }
         state.rects = {
@@ -16025,15 +15961,7 @@ function popperGenerator(generatorOptions) {
         state.orderedModifiers.forEach(function(modifier) {
           return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
         });
-        var __debug_loops__ = 0;
         for (var index = 0; index < state.orderedModifiers.length; index++) {
-          if (process.env.NODE_ENV !== "production") {
-            __debug_loops__ += 1;
-            if (__debug_loops__ > 100) {
-              console.error(INFINITE_LOOP_ERROR);
-              break;
-            }
-          }
           if (state.reset === true) {
             state.reset = false;
             index = -1;
@@ -16064,9 +15992,6 @@ function popperGenerator(generatorOptions) {
       }
     };
     if (!areValidElements(reference2, popper2)) {
-      if (process.env.NODE_ENV !== "production") {
-        console.error(INVALID_ELEMENT_ERROR);
-      }
       return instance;
     }
     instance.setOptions(options).then(function(state2) {
@@ -16075,8 +16000,8 @@ function popperGenerator(generatorOptions) {
       }
     });
     function runModifierEffects() {
-      state.orderedModifiers.forEach(function(_ref3) {
-        var name = _ref3.name, _ref3$options = _ref3.options, options2 = _ref3$options === void 0 ? {} : _ref3$options, effect3 = _ref3.effect;
+      state.orderedModifiers.forEach(function(_ref) {
+        var name = _ref.name, _ref$options = _ref.options, options2 = _ref$options === void 0 ? {} : _ref$options, effect3 = _ref.effect;
         if (typeof effect3 === "function") {
           var cleanupFn = effect3({
             state,
@@ -17927,6 +17852,7 @@ defineComponent({
   }
 });
 defineComponent({
+  name: "NodeViewContent",
   props: {
     as: {
       type: String,
@@ -17943,6 +17869,7 @@ defineComponent({
   }
 });
 defineComponent({
+  name: "NodeViewWrapper",
   props: {
     as: {
       type: String,
@@ -18077,7 +18004,6 @@ const LinkDestinations = Object.freeze({
   URL: "url",
   BLOCK: "block"
 });
-const ToolbarGroup_vue_vue_type_style_index_0_scoped_8467d9b8_lang = "";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -18085,7 +18011,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$J = {
+const _sfc_main$L = {
   name: "ToolbarGroup"
 };
 const _hoisted_1$p = { class: "zw-toolbar__group" };
@@ -18094,9 +18020,8 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-const ToolbarGroup = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$4], ["__scopeId", "data-v-8467d9b8"]]);
-const ToolbarDivider_vue_vue_type_style_index_0_scoped_1a453fb5_lang = "";
-const _sfc_main$I = {
+const ToolbarGroup = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$4], ["__scopeId", "data-v-8467d9b8"]]);
+const _sfc_main$K = {
   name: "ToolbarDivider",
   props: {
     vertical: {
@@ -18123,9 +18048,8 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(["zw-toolbar__divider", $setup.classes])
   }, null, 2);
 }
-const ToolbarDivider = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$3], ["__scopeId", "data-v-1a453fb5"]]);
-const ToolbarRow_vue_vue_type_style_index_0_scoped_14a4e361_lang = "";
-const _sfc_main$H = {
+const ToolbarDivider = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$3], ["__scopeId", "data-v-1a453fb5"]]);
+const _sfc_main$J = {
   name: "ToolbarRow"
 };
 const _hoisted_1$o = { class: "zw-toolbar__row" };
@@ -18134,7 +18058,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-const ToolbarRow = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$2], ["__scopeId", "data-v-14a4e361"]]);
+const ToolbarRow = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$2], ["__scopeId", "data-v-14a4e361"]]);
 const InjectionTokens$1 = Object.freeze({
   FONTS: Symbol("fonts"),
   FONT_SIZES: Symbol("fontSizes"),
@@ -18721,8 +18645,11 @@ const History = Extension.create({
   addKeyboardShortcuts() {
     return {
       "Mod-z": () => this.editor.commands.undo(),
+      "Mod-Z": () => this.editor.commands.undo(),
       "Mod-y": () => this.editor.commands.redo(),
+      "Mod-Y": () => this.editor.commands.redo(),
       "Shift-Mod-z": () => this.editor.commands.redo(),
+      "Shift-Mod-Z": () => this.editor.commands.redo(),
       // Russian keyboard layouts
       "Mod-я": () => this.editor.commands.undo(),
       "Shift-Mod-я": () => this.editor.commands.redo()
@@ -19149,8 +19076,8 @@ var tk = /* @__PURE__ */ Object.freeze({
   SYM
 });
 const ASCII_LETTER = /[a-z]/;
-const LETTER = /\p{L}/u;
-const EMOJI = /\p{Emoji}/u;
+const LETTER = new RegExp("\\p{L}", "u");
+const EMOJI = new RegExp("\\p{Emoji}", "u");
 const DIGIT = /\d/;
 const SPACE = /\s/;
 const NL = "\n";
@@ -20115,6 +20042,9 @@ function findMarkByType(list, typeOrName) {
   return list.find((mark) => mark.type.name === name);
 }
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
 function listCacheClear$1() {
   this.__data__ = [];
   this.size = 0;
@@ -20568,7 +20498,7 @@ var baseIsArguments = _baseIsArguments, isObjectLike$5 = isObjectLike_1;
 var objectProto$a = Object.prototype;
 var hasOwnProperty$7 = objectProto$a.hasOwnProperty;
 var propertyIsEnumerable$1 = objectProto$a.propertyIsEnumerable;
-var isArguments$1 = baseIsArguments(function() {
+var isArguments$1 = baseIsArguments(/* @__PURE__ */ function() {
   return arguments;
 }()) ? baseIsArguments : function(value) {
   return isObjectLike$5(value) && hasOwnProperty$7.call(value, "callee") && !propertyIsEnumerable$1.call(value, "callee");
@@ -20576,19 +20506,12 @@ var isArguments$1 = baseIsArguments(function() {
 var isArguments_1 = isArguments$1;
 var isArray$4 = Array.isArray;
 var isArray_1 = isArray$4;
-var isBufferExports = {};
-var isBuffer$3 = {
-  get exports() {
-    return isBufferExports;
-  },
-  set exports(v) {
-    isBufferExports = v;
-  }
-};
+var isBuffer$3 = { exports: {} };
 function stubFalse() {
   return false;
 }
 var stubFalse_1 = stubFalse;
+isBuffer$3.exports;
 (function(module, exports) {
   var root2 = _root, stubFalse2 = stubFalse_1;
   var freeExports = exports && !exports.nodeType && exports;
@@ -20598,7 +20521,8 @@ var stubFalse_1 = stubFalse;
   var nativeIsBuffer = Buffer2 ? Buffer2.isBuffer : void 0;
   var isBuffer2 = nativeIsBuffer || stubFalse2;
   module.exports = isBuffer2;
-})(isBuffer$3, isBufferExports);
+})(isBuffer$3, isBuffer$3.exports);
+var isBufferExports = isBuffer$3.exports;
 var MAX_SAFE_INTEGER$1 = 9007199254740991;
 var reIsUint = /^(?:0|[1-9]\d*)$/;
 function isIndex$1(value, length) {
@@ -20628,15 +20552,8 @@ function baseUnary$3(func) {
   };
 }
 var _baseUnary = baseUnary$3;
-var _nodeUtilExports = {};
-var _nodeUtil = {
-  get exports() {
-    return _nodeUtilExports;
-  },
-  set exports(v) {
-    _nodeUtilExports = v;
-  }
-};
+var _nodeUtil = { exports: {} };
+_nodeUtil.exports;
 (function(module, exports) {
   var freeGlobal2 = _freeGlobal;
   var freeExports = exports && !exports.nodeType && exports;
@@ -20654,7 +20571,8 @@ var _nodeUtil = {
     }
   }();
   module.exports = nodeUtil2;
-})(_nodeUtil, _nodeUtilExports);
+})(_nodeUtil, _nodeUtil.exports);
+var _nodeUtilExports = _nodeUtil.exports;
 var baseIsTypedArray = _baseIsTypedArray, baseUnary$2 = _baseUnary, nodeUtil$2 = _nodeUtilExports;
 var nodeIsTypedArray = nodeUtil$2 && nodeUtil$2.isTypedArray;
 var isTypedArray$2 = nodeIsTypedArray ? baseUnary$2(nodeIsTypedArray) : baseIsTypedArray;
@@ -20758,15 +20676,8 @@ function baseAssignIn$1(object, source) {
   return object && copyObject$2(source, keysIn$2(source), object);
 }
 var _baseAssignIn = baseAssignIn$1;
-var _cloneBufferExports = {};
-var _cloneBuffer = {
-  get exports() {
-    return _cloneBufferExports;
-  },
-  set exports(v) {
-    _cloneBufferExports = v;
-  }
-};
+var _cloneBuffer = { exports: {} };
+_cloneBuffer.exports;
 (function(module, exports) {
   var root2 = _root;
   var freeExports = exports && !exports.nodeType && exports;
@@ -20782,7 +20693,8 @@ var _cloneBuffer = {
     return result;
   }
   module.exports = cloneBuffer2;
-})(_cloneBuffer, _cloneBufferExports);
+})(_cloneBuffer, _cloneBuffer.exports);
+var _cloneBufferExports = _cloneBuffer.exports;
 function copyArray$1(source, array) {
   var index = -1, length = source.length;
   array || (array = Array(length));
@@ -20992,7 +20904,7 @@ function initCloneByTag$1(object, tag, isDeep) {
 var _initCloneByTag = initCloneByTag$1;
 var isObject$2 = isObject_1;
 var objectCreate = Object.create;
-var baseCreate$1 = function() {
+var baseCreate$1 = /* @__PURE__ */ function() {
   function object() {
   }
   return function(proto) {
@@ -21108,8 +21020,9 @@ function cloneDeep(value) {
   return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
 }
 var cloneDeep_1 = cloneDeep;
+const cloneDeep$1 = /* @__PURE__ */ getDefaultExportFromCjs(cloneDeep_1);
 function copyMark(mark) {
-  return mark.type.create(cloneDeep_1(mark.attrs));
+  return mark.type.create(cloneDeep$1(mark.attrs));
 }
 const NodeProcessor = Extension.create({
   name: "node_processor",
@@ -22291,7 +22204,9 @@ const ListItem$1 = Node$1.create({
   name: "listItem",
   addOptions() {
     return {
-      HTMLAttributes: {}
+      HTMLAttributes: {},
+      bulletListTypeName: "bulletList",
+      orderedListTypeName: "orderedList"
     };
   },
   content: "paragraph block*",
@@ -22507,25 +22422,8 @@ function autolink(options) {
       }
       const { tr: tr2 } = newState;
       const transform = combineTransactionSteps(oldState.doc, [...transactions]);
-      const { mapping } = transform;
       const changes = getChangedRanges(transform);
-      changes.forEach(({ oldRange, newRange }) => {
-        getMarksBetween(oldRange.from, oldRange.to, oldState.doc).filter((item) => item.mark.type === options.type).forEach((oldMark) => {
-          const newFrom = mapping.map(oldMark.from);
-          const newTo = mapping.map(oldMark.to);
-          const newMarks = getMarksBetween(newFrom, newTo, newState.doc).filter((item) => item.mark.type === options.type);
-          if (!newMarks.length) {
-            return;
-          }
-          const newMark = newMarks[0];
-          const oldLinkText = oldState.doc.textBetween(oldMark.from, oldMark.to, void 0, " ");
-          const newLinkText = newState.doc.textBetween(newMark.from, newMark.to, void 0, " ");
-          const wasLink = test(oldLinkText);
-          const isLink = test(newLinkText);
-          if (wasLink && !isLink) {
-            tr2.removeMark(newMark.from, newMark.to, options.type);
-          }
-        });
+      changes.forEach(({ newRange }) => {
         const nodesInChangedRanges = findChildrenInRange(newState.doc, newRange, (node) => node.isTextblock);
         let textBlock;
         let textBeforeWhitespace;
@@ -22546,16 +22444,24 @@ function autolink(options) {
           if (!lastWordBeforeSpace) {
             return false;
           }
-          find(lastWordBeforeSpace).filter((link) => link.isLink).filter((link) => {
+          find(lastWordBeforeSpace).filter((link) => link.isLink).map((link) => ({
+            ...link,
+            from: lastWordAndBlockOffset + link.start + 1,
+            to: lastWordAndBlockOffset + link.end + 1
+          })).filter((link) => {
+            if (!newState.schema.marks.code) {
+              return true;
+            }
+            return !newState.doc.rangeHasMark(link.from, link.to, newState.schema.marks.code);
+          }).filter((link) => {
             if (options.validate) {
               return options.validate(link.value);
             }
             return true;
-          }).map((link) => ({
-            ...link,
-            from: lastWordAndBlockOffset + link.start + 1,
-            to: lastWordAndBlockOffset + link.end + 1
-          })).forEach((link) => {
+          }).forEach((link) => {
+            if (getMarksBetween(link.from, link.to, newState.doc).some((item) => item.mark.type === options.type)) {
+              return;
+            }
             tr2.addMark(link.from, link.to, options.type.create({
               href: link.href
             }));
@@ -22574,16 +22480,22 @@ function clickHandler(options) {
     key: new PluginKey("handleClickLink"),
     props: {
       handleClick: (view, pos, event) => {
-        var _a2, _b, _c;
-        if (event.button !== 1) {
+        var _a2, _b;
+        if (event.button !== 0) {
+          return false;
+        }
+        const eventTarget = event.target;
+        if (eventTarget.nodeName !== "A") {
           return false;
         }
         const attrs = getAttributes(view.state, options.type.name);
-        const link = (_a2 = event.target) === null || _a2 === void 0 ? void 0 : _a2.closest("a");
-        const href = (_b = link === null || link === void 0 ? void 0 : link.href) !== null && _b !== void 0 ? _b : attrs.href;
-        const target = (_c = link === null || link === void 0 ? void 0 : link.target) !== null && _c !== void 0 ? _c : attrs.target;
+        const link = event.target;
+        const href = (_a2 = link === null || link === void 0 ? void 0 : link.href) !== null && _a2 !== void 0 ? _a2 : attrs.href;
+        const target = (_b = link === null || link === void 0 ? void 0 : link.target) !== null && _b !== void 0 ? _b : attrs.target;
         if (link && href) {
-          window.open(href, target);
+          if (view.editable) {
+            window.open(href, target);
+          }
           return true;
         }
         return false;
@@ -22596,6 +22508,7 @@ function pasteHandler(options) {
     key: new PluginKey("handlePasteLink"),
     props: {
       handlePaste: (view, event, slice2) => {
+        var _a2;
         const { state } = view;
         const { selection } = state;
         const { empty: empty2 } = selection;
@@ -22610,8 +22523,12 @@ function pasteHandler(options) {
         if (!textContent || !link) {
           return false;
         }
+        const html = (_a2 = event.clipboardData) === null || _a2 === void 0 ? void 0 : _a2.getData("text/html");
+        const hrefRegex = /href="([^"]*)"/;
+        const existingLink = html === null || html === void 0 ? void 0 : html.match(hrefRegex);
+        const url = existingLink ? existingLink[1] : link.href;
         options.editor.commands.setMark(options.type, {
-          href: link.href
+          href: url
         });
         return true;
       }
@@ -22659,6 +22576,9 @@ const Link$1 = Mark2.create({
       target: {
         default: this.options.HTMLAttributes.target
       },
+      rel: {
+        default: this.options.HTMLAttributes.rel
+      },
       class: {
         default: this.options.HTMLAttributes.class
       }
@@ -22668,6 +22588,10 @@ const Link$1 = Mark2.create({
     return [{ tag: 'a[href]:not([href *= "javascript:" i])' }];
   },
   renderHTML({ HTMLAttributes }) {
+    var _a2;
+    if ((_a2 = HTMLAttributes.href) === null || _a2 === void 0 ? void 0 : _a2.startsWith("javascript:")) {
+      return ["a", mergeAttributes(this.options.HTMLAttributes, { ...HTMLAttributes, href: "" }), 0];
+    }
     return ["a", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
   addCommands() {
@@ -22697,10 +22621,18 @@ const Link$1 = Mark2.create({
           data: link
         })),
         type: this.type,
-        getAttributes: (match) => {
-          var _a2;
+        getAttributes: (match, pasteEvent) => {
+          var _a2, _b;
+          const html = (_a2 = pasteEvent === null || pasteEvent === void 0 ? void 0 : pasteEvent.clipboardData) === null || _a2 === void 0 ? void 0 : _a2.getData("text/html");
+          const hrefRegex = /href="([^"]*)"/;
+          const existingLink = html === null || html === void 0 ? void 0 : html.match(hrefRegex);
+          if (existingLink) {
+            return {
+              href: existingLink[1]
+            };
+          }
           return {
-            href: (_a2 = match.data) === null || _a2 === void 0 ? void 0 : _a2.href
+            href: (_b = match.data) === null || _b === void 0 ? void 0 : _b.href
           };
         }
       })
@@ -22937,7 +22869,7 @@ class BaseNormalizer {
     throw new Error("Implement abstract method");
   }
 }
-const _HtmlNormalizer = class extends BaseNormalizer {
+const _HtmlNormalizer = class _HtmlNormalizer extends BaseNormalizer {
   constructor({ content, parser }) {
     super({ content });
     __publicField(this, "_parser");
@@ -23163,10 +23095,9 @@ const _HtmlNormalizer = class extends BaseNormalizer {
     return span;
   }
 };
-let HtmlNormalizer = _HtmlNormalizer;
-__publicField(HtmlNormalizer, "BLOCK_NODE_NAMES", ["P", "H1", "H2", "H3", "H4"]);
-__publicField(HtmlNormalizer, "ROOT_NODE_NAMES", _HtmlNormalizer.BLOCK_NODE_NAMES.concat("UL", "OL"));
-__publicField(HtmlNormalizer, "BLOCK_STYLES", [
+__publicField(_HtmlNormalizer, "BLOCK_NODE_NAMES", ["P", "H1", "H2", "H3", "H4"]);
+__publicField(_HtmlNormalizer, "ROOT_NODE_NAMES", _HtmlNormalizer.BLOCK_NODE_NAMES.concat("UL", "OL"));
+__publicField(_HtmlNormalizer, "BLOCK_STYLES", [
   "text-align",
   "line-height",
   "margin",
@@ -23175,6 +23106,7 @@ __publicField(HtmlNormalizer, "BLOCK_STYLES", [
   "margin-left",
   "margin-right"
 ]);
+let HtmlNormalizer = _HtmlNormalizer;
 var HASH_UNDEFINED = "__lodash_hash_undefined__";
 function setCacheAdd$1(value) {
   this.__data__.set(value, HASH_UNDEFINED);
@@ -23424,6 +23356,7 @@ function isEqual(value, other) {
   return baseIsEqual(value, other);
 }
 var isEqual_1 = isEqual;
+const isEqual$1 = /* @__PURE__ */ getDefaultExportFromCjs(isEqual_1);
 class JsonNormalizer extends BaseNormalizer {
   normalize() {
     this._iterateNodes(this._bubbleMarks);
@@ -23477,7 +23410,7 @@ class JsonNormalizer extends BaseNormalizer {
   }
   _includesMark(node, checkingMark) {
     var _a2;
-    return ((_a2 = node.marks) == null ? void 0 : _a2.some((mark) => isEqual_1(mark, checkingMark))) ?? false;
+    return ((_a2 = node.marks) == null ? void 0 : _a2.some((mark) => isEqual$1(mark, checkingMark))) ?? false;
   }
   _includesMarkType(node, type) {
     var _a2;
@@ -23805,7 +23738,7 @@ class StylePresetRenderer {
     return this.makePresetHtmlClass(preset).split(" ").map((part) => `.${part}`).join("");
   }
 }
-const _NodeSelector = class {
+const _NodeSelector = class _NodeSelector {
   static get instance() {
     this._instance ?? (this._instance = new _NodeSelector());
     return this._instance;
@@ -23845,8 +23778,8 @@ const _NodeSelector = class {
     return mark.type.name === selector.typeName;
   }
 };
+__publicField(_NodeSelector, "_instance");
 let NodeSelector = _NodeSelector;
-__publicField(NodeSelector, "_instance");
 const dataStorage = /* @__PURE__ */ new WeakMap();
 function toggleListener(toEnable, onClick) {
   const args = ["click", onClick, { capture: true }];
@@ -23895,9 +23828,8 @@ function tooltip(el, { value, modifiers: modifiers2 }) {
   if (modifiers2.lg)
     el.dataset.tooltipSize = "lg";
 }
-const Button_vue_vue_type_style_index_0_scoped_b2d5d74a_lang = "";
 const _hoisted_1$n = ["disabled"];
-const _sfc_main$G = {
+const _sfc_main$I = {
   __name: "Button",
   props: {
     skin: {
@@ -23942,10 +23874,9 @@ const _sfc_main$G = {
     };
   }
 };
-const Button = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-b2d5d74a"]]);
-const ButtonToggle_vue_vue_type_style_index_0_scoped_bbdc7b20_lang = "";
+const Button = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-b2d5d74a"]]);
 const _hoisted_1$m = { class: "zw-button-toggle" };
-const _sfc_main$F = {
+const _sfc_main$H = {
   __name: "ButtonToggle",
   props: {
     value: {
@@ -23972,10 +23903,9 @@ const _sfc_main$F = {
     };
   }
 };
-const ButtonToggle = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-bbdc7b20"]]);
-const Icon_vue_vue_type_style_index_0_scoped_09bee8af_lang = "";
+const ButtonToggle = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-bbdc7b20"]]);
 const _hoisted_1$l = ["innerHTML"];
-const _sfc_main$E = {
+const _sfc_main$G = {
   __name: "Icon",
   props: {
     name: {
@@ -24021,9 +23951,10 @@ const _sfc_main$E = {
     };
   }
 };
-const Icon = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-09bee8af"]]);
+const Icon = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-09bee8af"]]);
 var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
 var canUseDom = canUseDOM;
+const canUseDOM$1 = /* @__PURE__ */ getDefaultExportFromCjs(canUseDom);
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
 const freeGlobal$1 = freeGlobal;
 var freeSelf = typeof self == "object" && self && self.Object === Object && self;
@@ -24227,7 +24158,7 @@ var __assign = function() {
 };
 var cachedScrollbarWidth = null;
 var cachedDevicePixelRatio = null;
-if (canUseDom) {
+if (canUseDOM$1) {
   window.addEventListener("resize", function() {
     if (cachedDevicePixelRatio !== window.devicePixelRatio) {
       cachedDevicePixelRatio = window.devicePixelRatio;
@@ -24486,7 +24417,7 @@ var SimpleBarCore = (
           eventOffset = e.pageX;
         }
         var dragPos = eventOffset - ((_h = (_g = track.rect) === null || _g === void 0 ? void 0 : _g[_this.axis[_this.draggedAxis].offsetAttr]) !== null && _h !== void 0 ? _h : 0) - _this.axis[_this.draggedAxis].dragOffset;
-        dragPos = _this.isRtl ? ((_k = (_j = track.rect) === null || _j === void 0 ? void 0 : _j[_this.axis[_this.draggedAxis].sizeAttr]) !== null && _k !== void 0 ? _k : 0) - scrollbar.size - dragPos : dragPos;
+        dragPos = _this.draggedAxis === "x" && _this.isRtl ? ((_k = (_j = track.rect) === null || _j === void 0 ? void 0 : _j[_this.axis[_this.draggedAxis].sizeAttr]) !== null && _k !== void 0 ? _k : 0) - scrollbar.size - dragPos : dragPos;
         var dragPerc = dragPos / (trackSize - scrollbar.size);
         var scrollPos = dragPerc * (contentSize - hostSize);
         if (_this.draggedAxis === "x" && _this.isRtl) {
@@ -24598,7 +24529,7 @@ var SimpleBarCore = (
       };
     };
     SimpleBarCore2.prototype.init = function() {
-      if (canUseDom) {
+      if (canUseDOM$1) {
         this.initDOM();
         this.rtlHelpers = SimpleBarCore2.getRtlHelpers();
         this.scrollbarWidth = this.getScrollbarWidth();
@@ -25110,7 +25041,7 @@ var SimpleBar = (
     return SimpleBar2;
   }(SimpleBarCore)
 );
-if (canUseDom) {
+if (canUseDOM$1) {
   SimpleBar.initHtmlApi();
 }
 function useValidator({ validations }) {
@@ -25130,9 +25061,9 @@ function useValidator({ validations }) {
   return { error, validate, reset: reset2 };
 }
 const noFormatter = (value) => value;
-function useTempValue({ valueRef, format: format2 = noFormatter }) {
-  const tempValue = ref(format2(valueRef.value));
-  watch(valueRef, () => tempValue.value = format2(valueRef.value));
+function useTempValue({ valueRef, format = noFormatter }) {
+  const tempValue = ref(format(valueRef.value));
+  watch(valueRef, () => tempValue.value = format(valueRef.value));
   return tempValue;
 }
 function useElementRef(ref2) {
@@ -25142,10 +25073,10 @@ function useElementRef(ref2) {
   });
 }
 function useNumberValue({ valueRef, digits, min: min2, max: max2, onChange }) {
-  function format2(number) {
+  function format(number) {
     return Number(parseFloat(number).toFixed(digits));
   }
-  const temp = useTempValue({ valueRef, format: format2 });
+  const temp = useTempValue({ valueRef, format });
   function validateNumber(number) {
     if (min2 !== null && number < min2)
       return min2;
@@ -25160,19 +25091,19 @@ function useNumberValue({ valueRef, digits, min: min2, max: max2, onChange }) {
     }
     const numericValue = Number.parseFloat(temp.value);
     const validatedNumber = validateNumber(numericValue);
-    temp.value = format2(validatedNumber);
+    temp.value = format(validatedNumber);
     onChange(temp.value);
   }
   function increment(step) {
     const newValue = temp.value + Number(step);
     const validatedNumber = validateNumber(newValue);
-    temp.value = format2(validatedNumber);
+    temp.value = format(validatedNumber);
     onChange(temp.value);
   }
   function decrement(step) {
     const newValue = temp.value - Number(step);
     const validatedNumber = validateNumber(newValue);
-    temp.value = format2(validatedNumber);
+    temp.value = format(validatedNumber);
     onChange(temp.value);
   }
   return {
@@ -25182,31 +25113,319 @@ function useNumberValue({ valueRef, digits, min: min2, max: max2, onChange }) {
     decrement
   };
 }
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
-const floor = Math.floor;
-const createCoords = (v) => ({
-  x: v,
-  y: v
-});
-function clamp(start2, value, end2) {
-  return max(start2, min(value, end2));
-}
-function evaluate(value, param) {
-  return typeof value === "function" ? value(param) : value;
-}
-function getSide(placement) {
-  return placement.split("-")[0];
+function useModalToggler({ onBeforeOpened, onClosed } = {}) {
+  const editor = inject(InjectionTokens$1.EDITOR);
+  const isOpened = ref(false);
+  async function open() {
+    if (isOpened.value)
+      return;
+    onBeforeOpened == null ? void 0 : onBeforeOpened();
+    editor.commands.storeSelection();
+    isOpened.value = true;
+  }
+  function close2() {
+    isOpened.value = false;
+    editor.commands.restoreSelection();
+    onClosed == null ? void 0 : onClosed();
+  }
+  const toggle = (toOpen) => toOpen ? open() : close2();
+  return reactive({ isOpened, open, close: close2, toggle });
 }
-function getAlignment(placement) {
-  return placement.split("-")[1];
+function useActivatedListener({ targetRef, isActiveRef, event, onEvent, options }) {
+  function addListener() {
+    targetRef.value.addEventListener(event, onEvent, options);
+  }
+  function removeListener() {
+    var _a2;
+    (_a2 = targetRef.value) == null ? void 0 : _a2.removeEventListener(event, onEvent, options);
+  }
+  function updateListener() {
+    if (!targetRef.value)
+      return;
+    isActiveRef.value ? addListener() : removeListener();
+  }
+  watch(isActiveRef, updateListener);
+  watch(targetRef, updateListener);
+  onUnmounted(removeListener);
+  updateListener();
 }
-function getOppositeAxis(axis) {
-  return axis === "x" ? "y" : "x";
+const INTERACTIVE_TAGS = [
+  "BUTTON",
+  "INPUT",
+  "LABEL",
+  "A"
+];
+function useDeselectionLock({ hostRef, isActiveRef }) {
+  const editor = inject(InjectionTokens$1.EDITOR);
+  const targetRef = useElementRef(hostRef);
+  function onEvent(event) {
+    if (INTERACTIVE_TAGS.includes(event.target.tagName))
+      return;
+    if (editor.isFocused) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    editor.chain().restoreSelection().run();
+  }
+  useActivatedListener({
+    event: "mousedown",
+    targetRef,
+    isActiveRef,
+    onEvent
+  });
 }
-function getAxisLength(axis) {
-  return axis === "y" ? "height" : "width";
+const SCROLL_VIEW = Symbol("scrollView");
+function useScrollView() {
+  const scrollerRef = inject(SCROLL_VIEW);
+  function scrollToElement(element, { offset: offset2 } = {}) {
+    if (!scrollerRef.value)
+      return;
+    const rootRect = scrollerRef.value.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    const position = elementRect.top - rootRect.top;
+    scrollerRef.value.scrollTo({
+      top: position - (offset2 || 0)
+    });
+  }
+  return { scrollToElement };
+}
+const _sfc_main$F = {
+  __name: "ScrollView",
+  setup(__props) {
+    const hostRef = ref(null);
+    const scrollerRef = ref(null);
+    provide(SCROLL_VIEW, scrollerRef);
+    onMounted(() => {
+      const options = SimpleBar.getOptions(hostRef.value.attributes);
+      const simpleBar = new SimpleBar(hostRef.value, options);
+      scrollerRef.value = simpleBar.getScrollElement();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "zw-scroll-view",
+        "data-simplebar-auto-hide": "false",
+        ref_key: "hostRef",
+        ref: hostRef
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 512);
+    };
+  }
+};
+const ScrollView = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-07fd5408"]]);
+const _hoisted_1$k = ["for"];
+const _sfc_main$E = {
+  __name: "FieldLabel",
+  props: {
+    fieldId: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        class: "zw-field-label",
+        for: __props.fieldId
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 8, _hoisted_1$k);
+    };
+  }
+};
+const FieldLabel = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-7ab8105c"]]);
+const _hoisted_1$j = ["id", "min", "max", "step", "value"];
+const _sfc_main$D = {
+  __name: "Range",
+  props: {
+    min: {
+      type: [String, Number],
+      required: true
+    },
+    max: {
+      type: [String, Number],
+      required: true
+    },
+    step: {
+      type: [String, Number],
+      required: true
+    },
+    value: {
+      type: [String, Number],
+      required: true
+    },
+    fieldId: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  },
+  emits: ["input"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const tempValue = useTempValue({
+      valueRef: toRef(props, "value"),
+      format: Number
+    });
+    const inputStyles = computed(() => {
+      const min2 = Number(props.min);
+      const max2 = Number(props.max);
+      const step = Number(props.step);
+      const value = Math.ceil(tempValue.value / step) * step;
+      const progress = (value - min2) / (max2 - min2);
+      return { "--zw-range-progress": `${progress * 100}%` };
+    });
+    function update(event) {
+      tempValue.value = Number(event.target.value);
+      emit("input", tempValue.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("input", {
+        class: "zw-range",
+        type: "range",
+        id: __props.fieldId,
+        min: __props.min,
+        max: __props.max,
+        step: __props.step,
+        value: unref(tempValue),
+        style: normalizeStyle(inputStyles.value),
+        onInput: _cache[0] || (_cache[0] = ($event) => update($event))
+      }, null, 44, _hoisted_1$j);
+    };
+  }
+};
+const Range = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-c0059745"]]);
+const _hoisted_1$i = ["id", "disabled", "value"];
+const _hoisted_2$7 = { class: "zw-number-field__controls" };
+const _hoisted_3$3 = { class: "zw-number-field__buttons" };
+const _hoisted_4$2 = {
+  key: 0,
+  class: "zw-number-field__units"
+};
+const _sfc_main$C = {
+  __name: "NumberField",
+  props: {
+    value: {
+      required: true,
+      type: [Number, String]
+    },
+    min: {
+      type: [Number, String],
+      required: false,
+      default: null
+    },
+    max: {
+      type: [Number, String],
+      required: false,
+      default: null
+    },
+    digits: {
+      type: [Number, String],
+      required: false,
+      default: 2
+    },
+    step: {
+      type: [Number, String],
+      required: false,
+      default: 1
+    },
+    units: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    fieldId: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  },
+  emits: ["input"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const toOptionalNumber = (number) => number === null ? null : Number(number);
+    const numberValue = useNumberValue({
+      valueRef: toRef(props, "value"),
+      onChange: (value) => emit("input", value),
+      digits: Number(props.digits),
+      min: toOptionalNumber(props.min),
+      max: toOptionalNumber(props.max)
+    });
+    const onChange = (event) => numberValue.change(event.target.value);
+    const incrementValue = () => numberValue.increment(Number(props.step));
+    const decrementValue = () => numberValue.decrement(Number(props.step));
+    const tempValue = computed(() => unref(numberValue.temp.value));
+    const elementClasses = computed(() => ({
+      "zw-number-field--disabled": props.disabled
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        class: normalizeClass([elementClasses.value, "zw-number-field"])
+      }, [
+        createElementVNode("input", {
+          type: "number",
+          class: "zw-number-field__input",
+          id: __props.fieldId,
+          disabled: __props.disabled,
+          value: tempValue.value,
+          onChange
+        }, null, 40, _hoisted_1$i),
+        createElementVNode("div", _hoisted_2$7, [
+          createElementVNode("div", _hoisted_3$3, [
+            createVNode(unref(Button), {
+              class: "zw-number-field__increment-button",
+              onClick: incrementValue,
+              disabled: __props.disabled,
+              "data-test-selector": "increment-button",
+              type: "button"
+            }, null, 8, ["disabled"]),
+            createVNode(unref(Button), {
+              class: "zw-number-field__decrement-button",
+              onClick: decrementValue,
+              disabled: __props.disabled,
+              "data-test-selector": "decrement-button",
+              type: "button"
+            }, null, 8, ["disabled"])
+          ]),
+          __props.units ? (openBlock(), createElementBlock("p", _hoisted_4$2, toDisplayString(__props.units), 1)) : createCommentVNode("", true)
+        ])
+      ], 2);
+    };
+  }
+};
+const NumberField = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-e462abc1"]]);
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const createCoords = (v) => ({
+  x: v,
+  y: v
+});
+function clamp(start2, value, end2) {
+  return max(start2, min(value, end2));
+}
+function evaluate(value, param) {
+  return typeof value === "function" ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split("-")[0];
+}
+function getAlignment(placement) {
+  return placement.split("-")[1];
+}
+function getOppositeAxis(axis) {
+  return axis === "x" ? "y" : "x";
+}
+function getAxisLength(axis) {
+  return axis === "y" ? "height" : "width";
 }
 function getSideAxis(placement) {
   return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
@@ -25762,11 +25981,11 @@ function getCssDimensions(element) {
     $: shouldFallback
   };
 }
-function unwrapElement(element) {
+function unwrapElement$1(element) {
   return !isElement(element) ? element.contextElement : element;
 }
 function getScale(element) {
-  const domElement = unwrapElement(element);
+  const domElement = unwrapElement$1(element);
   if (!isHTMLElement(domElement)) {
     return createCoords(1);
   }
@@ -25817,7 +26036,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     isFixedStrategy = false;
   }
   const clientRect2 = element.getBoundingClientRect();
-  const domElement = unwrapElement(element);
+  const domElement = unwrapElement$1(element);
   let scale = createCoords(1);
   if (includeScale) {
     if (offsetParent) {
@@ -26121,141 +26340,6 @@ const platform = {
   isElement,
   isRTL
 };
-function observeMove(element, onMove) {
-  let io = null;
-  let timeoutId;
-  const root2 = getDocumentElement(element);
-  function cleanup() {
-    clearTimeout(timeoutId);
-    io && io.disconnect();
-    io = null;
-  }
-  function refresh(skip, threshold) {
-    if (skip === void 0) {
-      skip = false;
-    }
-    if (threshold === void 0) {
-      threshold = 1;
-    }
-    cleanup();
-    const {
-      left: left2,
-      top: top2,
-      width,
-      height
-    } = element.getBoundingClientRect();
-    if (!skip) {
-      onMove();
-    }
-    if (!width || !height) {
-      return;
-    }
-    const insetTop = floor(top2);
-    const insetRight = floor(root2.clientWidth - (left2 + width));
-    const insetBottom = floor(root2.clientHeight - (top2 + height));
-    const insetLeft = floor(left2);
-    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
-    const options = {
-      rootMargin,
-      threshold: max(0, min(1, threshold)) || 1
-    };
-    let isFirstUpdate = true;
-    function handleObserve(entries) {
-      const ratio = entries[0].intersectionRatio;
-      if (ratio !== threshold) {
-        if (!isFirstUpdate) {
-          return refresh();
-        }
-        if (!ratio) {
-          timeoutId = setTimeout(() => {
-            refresh(false, 1e-7);
-          }, 100);
-        } else {
-          refresh(false, ratio);
-        }
-      }
-      isFirstUpdate = false;
-    }
-    try {
-      io = new IntersectionObserver(handleObserve, {
-        ...options,
-        // Handle <iframe>s
-        root: root2.ownerDocument
-      });
-    } catch (e) {
-      io = new IntersectionObserver(handleObserve, options);
-    }
-    io.observe(element);
-  }
-  refresh(true);
-  return cleanup;
-}
-function autoUpdate(reference2, floating, update, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    ancestorScroll = true,
-    ancestorResize = true,
-    elementResize = typeof ResizeObserver === "function",
-    layoutShift = typeof IntersectionObserver === "function",
-    animationFrame = false
-  } = options;
-  const referenceEl = unwrapElement(reference2);
-  const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
-  ancestors.forEach((ancestor) => {
-    ancestorScroll && ancestor.addEventListener("scroll", update, {
-      passive: true
-    });
-    ancestorResize && ancestor.addEventListener("resize", update);
-  });
-  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
-  let reobserveFrame = -1;
-  let resizeObserver = null;
-  if (elementResize) {
-    resizeObserver = new ResizeObserver((_ref) => {
-      let [firstEntry] = _ref;
-      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
-        resizeObserver.unobserve(floating);
-        cancelAnimationFrame(reobserveFrame);
-        reobserveFrame = requestAnimationFrame(() => {
-          resizeObserver && resizeObserver.observe(floating);
-        });
-      }
-      update();
-    });
-    if (referenceEl && !animationFrame) {
-      resizeObserver.observe(referenceEl);
-    }
-    resizeObserver.observe(floating);
-  }
-  let frameId;
-  let prevRefRect = animationFrame ? getBoundingClientRect(reference2) : null;
-  if (animationFrame) {
-    frameLoop();
-  }
-  function frameLoop() {
-    const nextRefRect = getBoundingClientRect(reference2);
-    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
-      update();
-    }
-    prevRefRect = nextRefRect;
-    frameId = requestAnimationFrame(frameLoop);
-  }
-  update();
-  return () => {
-    ancestors.forEach((ancestor) => {
-      ancestorScroll && ancestor.removeEventListener("scroll", update);
-      ancestorResize && ancestor.removeEventListener("resize", update);
-    });
-    cleanupIo && cleanupIo();
-    resizeObserver && resizeObserver.disconnect();
-    resizeObserver = null;
-    if (animationFrame) {
-      cancelAnimationFrame(frameId);
-    }
-  };
-}
 const computePosition = (reference2, floating, options) => {
   const cache = /* @__PURE__ */ new Map();
   const mergedOptions = {
@@ -26271,324 +26355,179 @@ const computePosition = (reference2, floating, options) => {
     platform: platformWithCache
   });
 };
-function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef } = {}) {
-  const editor = inject(InjectionTokens$1.EDITOR);
-  const isOpened = ref(false);
-  let floatingInstance;
-  function initModal() {
-    const wrapperEl = useElementRef(wrapperRef);
-    const modalEl = useElementRef(modalRef);
-    floatingInstance = autoUpdate(wrapperEl.value, modalEl.value, async () => {
-      const positioning = await computePosition(wrapperEl.value, modalEl.value, {
-        placement: "bottom",
-        strategy: "fixed",
-        middleware: [
-          shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
-          offset({ mainAxis: 4 })
-        ]
-      });
-      const { x, y } = positioning;
-      Object.assign(modalEl.value, {
-        left: `${x}px`,
-        top: `${y}px`
-      });
-    });
-  }
-  async function open() {
-    if (isOpened.value)
-      return;
-    onBeforeOpened == null ? void 0 : onBeforeOpened();
-    editor.commands.storeSelection();
-    isOpened.value = true;
-    await nextTick();
-    initModal();
-  }
-  function close2() {
-    isOpened.value = false;
-    floatingInstance == null ? void 0 : floatingInstance();
-    editor.commands.restoreSelection();
-    onClosed == null ? void 0 : onClosed();
-  }
-  const toggle = (toOpen) => toOpen ? open() : close2();
-  return { isOpened, open, close: close2, toggle };
+function unwrapElement(element) {
+  var _$el;
+  return (_$el = element == null ? void 0 : element.$el) != null ? _$el : element;
 }
-function useActivatedListener({ targetRef, isActiveRef, event, onEvent, options }) {
-  function addListener() {
-    targetRef.value.addEventListener(event, onEvent, options);
+function getDPR(element) {
+  if (typeof window === "undefined") {
+    return 1;
   }
-  function removeListener() {
-    var _a2;
-    (_a2 = targetRef.value) == null ? void 0 : _a2.removeEventListener(event, onEvent, options);
-  }
-  function updateListener() {
-    if (!targetRef.value)
-      return;
-    isActiveRef.value ? addListener() : removeListener();
-  }
-  watch(isActiveRef, updateListener);
-  watch(targetRef, updateListener);
-  onUnmounted(removeListener);
-  updateListener();
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
 }
-const INTERACTIVE_TAGS = [
-  "BUTTON",
-  "INPUT",
-  "LABEL",
-  "A"
-];
-function useDeselectionLock({ hostRef, isActiveRef }) {
-  const editor = inject(InjectionTokens$1.EDITOR);
-  const targetRef = useElementRef(hostRef);
-  function onEvent(event) {
-    if (INTERACTIVE_TAGS.includes(event.target.tagName))
-      return;
-    if (editor.isFocused) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    editor.chain().restoreSelection().run();
-  }
-  useActivatedListener({
-    event: "mousedown",
-    targetRef,
-    isActiveRef,
-    onEvent
-  });
+function roundByDPR(element, value) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
 }
-const SCROLL_VIEW = Symbol("scrollView");
-function useScrollView() {
-  const scrollerRef = inject(SCROLL_VIEW);
-  function scrollToElement(element, { offset: offset2 } = {}) {
-    if (!scrollerRef.value)
-      return;
-    const rootRect = scrollerRef.value.getBoundingClientRect();
-    const elementRect = element.getBoundingClientRect();
-    const position = elementRect.top - rootRect.top;
-    scrollerRef.value.scrollTo({
-      top: position - (offset2 || 0)
-    });
+function useFloating(reference2, floating, options) {
+  if (options === void 0) {
+    options = {};
   }
-  return { scrollToElement };
-}
-const ScrollView_vue_vue_type_style_index_0_scoped_07fd5408_lang = "";
-const _sfc_main$D = {
-  __name: "ScrollView",
-  setup(__props) {
-    const hostRef = ref(null);
-    const scrollerRef = ref(null);
-    provide(SCROLL_VIEW, scrollerRef);
-    onMounted(() => {
-      const options = SimpleBar.getOptions(hostRef.value.attributes);
-      const simpleBar = new SimpleBar(hostRef.value, options);
-      scrollerRef.value = simpleBar.getScrollElement();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "zw-scroll-view",
-        "data-simplebar-auto-hide": "false",
-        ref_key: "hostRef",
-        ref: hostRef
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 512);
+  const whileElementsMountedOption = options.whileElementsMounted;
+  const openOption = computed(() => {
+    var _unref;
+    return (_unref = unref(options.open)) != null ? _unref : true;
+  });
+  const middlewareOption = computed(() => unref(options.middleware));
+  const placementOption = computed(() => {
+    var _unref2;
+    return (_unref2 = unref(options.placement)) != null ? _unref2 : "bottom";
+  });
+  const strategyOption = computed(() => {
+    var _unref3;
+    return (_unref3 = unref(options.strategy)) != null ? _unref3 : "absolute";
+  });
+  const transformOption = computed(() => {
+    var _unref4;
+    return (_unref4 = unref(options.transform)) != null ? _unref4 : true;
+  });
+  const referenceElement = computed(() => unwrapElement(reference2.value));
+  const floatingElement = computed(() => unwrapElement(floating.value));
+  const x = ref(0);
+  const y = ref(0);
+  const strategy = ref(strategyOption.value);
+  const placement = ref(placementOption.value);
+  const middlewareData = shallowRef({});
+  const isPositioned = ref(false);
+  const floatingStyles = computed(() => {
+    const initialStyles = {
+      position: strategy.value,
+      left: "0",
+      top: "0"
     };
-  }
-};
-const ScrollView = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-07fd5408"]]);
-const FieldLabel_vue_vue_type_style_index_0_scoped_7ab8105c_lang = "";
-const _hoisted_1$k = ["for"];
-const _sfc_main$C = {
-  __name: "FieldLabel",
-  props: {
-    fieldId: {
-      type: String,
-      required: false,
-      default: null
+    if (!floatingElement.value) {
+      return initialStyles;
     }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", {
-        class: "zw-field-label",
-        for: __props.fieldId
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 8, _hoisted_1$k);
+    const xVal = roundByDPR(floatingElement.value, x.value);
+    const yVal = roundByDPR(floatingElement.value, y.value);
+    if (transformOption.value) {
+      return {
+        ...initialStyles,
+        transform: "translate(" + xVal + "px, " + yVal + "px)",
+        ...getDPR(floatingElement.value) >= 1.5 && {
+          willChange: "transform"
+        }
+      };
+    }
+    return {
+      position: strategy.value,
+      left: xVal + "px",
+      top: yVal + "px"
     };
-  }
-};
-const FieldLabel = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-7ab8105c"]]);
-const Range_vue_vue_type_style_index_0_scoped_c0059745_lang = "";
-const _hoisted_1$j = ["id", "min", "max", "step", "value"];
-const _sfc_main$B = {
-  __name: "Range",
-  props: {
-    min: {
-      type: [String, Number],
-      required: true
-    },
-    max: {
-      type: [String, Number],
-      required: true
-    },
-    step: {
-      type: [String, Number],
-      required: true
-    },
-    value: {
-      type: [String, Number],
-      required: true
-    },
-    fieldId: {
-      type: String,
-      required: false,
-      default: ""
+  });
+  let whileElementsMountedCleanup;
+  function update() {
+    if (referenceElement.value == null || floatingElement.value == null) {
+      return;
     }
-  },
-  emits: ["input"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const tempValue = useTempValue({
-      valueRef: toRef(props, "value"),
-      format: Number
-    });
-    const inputStyles = computed(() => {
-      const min2 = Number(props.min);
-      const max2 = Number(props.max);
-      const step = Number(props.step);
-      const value = Math.ceil(tempValue.value / step) * step;
-      const progress = (value - min2) / (max2 - min2);
-      return { "--zw-range-progress": `${progress * 100}%` };
+    computePosition(referenceElement.value, floatingElement.value, {
+      middleware: middlewareOption.value,
+      placement: placementOption.value,
+      strategy: strategyOption.value
+    }).then((position) => {
+      x.value = position.x;
+      y.value = position.y;
+      strategy.value = position.strategy;
+      placement.value = position.placement;
+      middlewareData.value = position.middlewareData;
+      isPositioned.value = true;
     });
-    function update(event) {
-      tempValue.value = Number(event.target.value);
-      emit("input", tempValue.value);
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("input", {
-        class: "zw-range",
-        type: "range",
-        id: __props.fieldId,
-        min: __props.min,
-        max: __props.max,
-        step: __props.step,
-        value: unref(tempValue),
-        style: normalizeStyle(inputStyles.value),
-        onInput: _cache[0] || (_cache[0] = ($event) => update($event))
-      }, null, 44, _hoisted_1$j);
-    };
   }
-};
-const Range = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-c0059745"]]);
-const NumberField_vue_vue_type_style_index_0_scoped_e462abc1_lang = "";
-const _hoisted_1$i = ["id", "disabled", "value"];
-const _hoisted_2$8 = { class: "zw-number-field__controls" };
-const _hoisted_3$3 = { class: "zw-number-field__buttons" };
-const _hoisted_4$2 = {
-  key: 0,
-  class: "zw-number-field__units"
-};
-const _sfc_main$A = {
-  __name: "NumberField",
+  function cleanup() {
+    if (typeof whileElementsMountedCleanup === "function") {
+      whileElementsMountedCleanup();
+      whileElementsMountedCleanup = void 0;
+    }
+  }
+  function attach() {
+    cleanup();
+    if (whileElementsMountedOption === void 0) {
+      update();
+      return;
+    }
+    if (referenceElement.value != null && floatingElement.value != null) {
+      whileElementsMountedCleanup = whileElementsMountedOption(referenceElement.value, floatingElement.value, update);
+      return;
+    }
+  }
+  function reset2() {
+    if (!openOption.value) {
+      isPositioned.value = false;
+    }
+  }
+  watch([middlewareOption, placementOption, strategyOption], update, {
+    flush: "sync"
+  });
+  watch([referenceElement, floatingElement], attach, {
+    flush: "sync"
+  });
+  watch(openOption, reset2, {
+    flush: "sync"
+  });
+  if (getCurrentScope()) {
+    onScopeDispose(cleanup);
+  }
+  return {
+    x: shallowReadonly(x),
+    y: shallowReadonly(y),
+    strategy: shallowReadonly(strategy),
+    placement: shallowReadonly(placement),
+    middlewareData: shallowReadonly(middlewareData),
+    isPositioned: shallowReadonly(isPositioned),
+    floatingStyles,
+    update
+  };
+}
+const _sfc_main$B = {
+  __name: "ModalFloating",
   props: {
-    value: {
-      required: true,
-      type: [Number, String]
-    },
-    min: {
-      type: [Number, String],
-      required: false,
-      default: null
-    },
-    max: {
-      type: [Number, String],
-      required: false,
-      default: null
-    },
-    digits: {
-      type: [Number, String],
-      required: false,
-      default: 2
-    },
-    step: {
-      type: [Number, String],
-      required: false,
-      default: 1
-    },
-    units: {
-      type: String,
-      required: false,
-      default: ""
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    fieldId: {
-      type: String,
-      required: false,
-      default: ""
+    referenceRef: {
+      type: Object,
+      required: true
     }
   },
-  emits: ["input"],
-  setup(__props, { emit }) {
+  setup(__props) {
     const props = __props;
-    const toOptionalNumber = (number) => number === null ? null : Number(number);
-    const numberValue = useNumberValue({
-      valueRef: toRef(props, "value"),
-      onChange: (value) => emit("input", value),
-      digits: Number(props.digits),
-      min: toOptionalNumber(props.min),
-      max: toOptionalNumber(props.max)
+    const floatingRef = ref(null);
+    const referenceRef = toRef(props, "referenceRef");
+    const { floatingStyles } = useFloating(referenceRef, floatingRef, {
+      placement: "bottom",
+      strategy: "fixed",
+      middleware: [
+        shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
+        offset({ mainAxis: 4 })
+      ]
     });
-    const onChange = (event) => numberValue.change(event.target.value);
-    const incrementValue = () => numberValue.increment(Number(props.step));
-    const decrementValue = () => numberValue.decrement(Number(props.step));
-    const tempValue = computed(() => unref(numberValue.temp.value));
-    const elementClasses = computed(() => ({
-      "zw-number-field--disabled": props.disabled
-    }));
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", {
-        class: normalizeClass([elementClasses.value, "zw-number-field"])
+      return openBlock(), createElementBlock("div", {
+        ref_key: "floatingRef",
+        ref: floatingRef,
+        style: normalizeStyle(unref(floatingStyles))
       }, [
-        createElementVNode("input", {
-          type: "number",
-          class: "zw-number-field__input",
-          id: __props.fieldId,
-          disabled: __props.disabled,
-          value: tempValue.value,
-          onChange
-        }, null, 40, _hoisted_1$i),
-        createElementVNode("div", _hoisted_2$8, [
-          createElementVNode("div", _hoisted_3$3, [
-            createVNode(unref(Button), {
-              class: "zw-number-field__increment-button",
-              onClick: incrementValue,
-              disabled: __props.disabled,
-              "data-test-selector": "increment-button",
-              type: "button"
-            }, null, 8, ["disabled"]),
-            createVNode(unref(Button), {
-              class: "zw-number-field__decrement-button",
-              onClick: decrementValue,
-              disabled: __props.disabled,
-              "data-test-selector": "decrement-button",
-              type: "button"
-            }, null, 8, ["disabled"])
-          ]),
-          __props.units ? (openBlock(), createElementBlock("p", _hoisted_4$2, toDisplayString(__props.units), 1)) : createCommentVNode("", true)
-        ])
-      ], 2);
+        renderSlot(_ctx.$slots, "default")
+      ], 4);
     };
   }
 };
-const NumberField = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-e462abc1"]]);
-const Modal_vue_vue_type_style_index_0_scoped_5be0e050_lang = "";
-const _sfc_main$z = {
+const _sfc_main$A = {
   __name: "Modal",
   props: {
+    referenceRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
     toggler: {
       type: Object,
       required: false,
@@ -26611,25 +26550,24 @@ const _sfc_main$z = {
     }
   },
   setup(__props) {
+    useCssVars((_ctx) => ({
+      "3cdf9de8": __props.maxHeight + "px",
+      "8ae6b87e": __props.maxWidth + "px"
+    }));
     const props = __props;
-    const transition = {
+    const transitionDuration = {
       enter: 200,
       leave: 100
     };
     const toggler = props.toggler || useModalToggler();
-    const isOpened = computed(() => unref(toggler.isOpened));
     const hostRef = ref(null);
     const hostEl = useElementRef(hostRef);
-    const modalStyles = computed(() => ({
-      "--zw-modal-max-height": `${props.maxHeight}px`,
-      "--zw-modal-max-width": `${props.maxWidth}px`
-    }));
     useDeselectionLock({
-      isActiveRef: toggler.isOpened,
+      isActiveRef: toRef(toggler, "isOpened"),
       hostRef
     });
     if (props.focusFirstControl) {
-      watch(toggler.isOpened, async (_, wasOpened) => {
+      watch(toRef(toggler, "isOpened"), async (_, wasOpened) => {
         if (wasOpened)
           return;
         await nextTick();
@@ -26640,20 +26578,23 @@ const _sfc_main$z = {
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Transition, {
         name: "zw-modal-",
-        duration: transition
+        duration: transitionDuration
       }, {
         default: withCtx(() => [
-          isOpened.value ? withDirectives((openBlock(), createElementBlock("div", {
+          unref(toggler).isOpened && __props.referenceRef ? withDirectives((openBlock(), createBlock(unref(_sfc_main$B), {
             key: 0,
             class: "zw-modal",
             ref_key: "hostRef",
             ref: hostRef,
             tabindex: "-1",
-            style: normalizeStyle(modalStyles.value),
+            "reference-ref": __props.referenceRef,
             "data-test-selector": "modal"
-          }, [
-            renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ], 4)), [
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ], void 0, true),
+            _: 3
+          }, 8, ["reference-ref"])), [
             [unref(outClick), unref(toggler).close]
           ]) : createCommentVNode("", true)
         ], void 0, true),
@@ -26662,17 +26603,16 @@ const _sfc_main$z = {
     };
   }
 };
-const Modal = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-5be0e050"]]);
-const TextField_vue_vue_type_style_index_0_scoped_dfa0d6f0_lang = "";
+const Modal = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-078bbe11"]]);
 const _hoisted_1$h = { class: "zw-field" };
-const _hoisted_2$7 = ["for"];
+const _hoisted_2$6 = ["for"];
 const _hoisted_3$2 = ["value", "id", "placeholder"];
 const _hoisted_4$1 = {
   key: 0,
   class: "zw-field__label--error",
   "data-test-selector": "error"
 };
-const _sfc_main$y = {
+const _sfc_main$z = {
   __name: "TextField",
   props: {
     value: {
@@ -26695,8 +26635,9 @@ const _sfc_main$y = {
     }
   },
   emits: ["input"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const onInput = (event) => emit("input", event.target.value);
     const fieldId = computed(() => {
       return props.label.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
@@ -26707,7 +26648,7 @@ const _sfc_main$y = {
           class: "zw-field__label",
           for: fieldId.value,
           "data-test-selector": "label"
-        }, toDisplayString(__props.label), 9, _hoisted_2$7),
+        }, toDisplayString(__props.label), 9, _hoisted_2$6),
         createElementVNode("input", {
           class: "zw-field__input",
           type: "text",
@@ -26722,14 +26663,13 @@ const _sfc_main$y = {
     };
   }
 };
-const TextField = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-dfa0d6f0"]]);
-const Checkbox_vue_vue_type_style_index_0_scoped_6e170d87_lang = "";
+const TextField = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-dfa0d6f0"]]);
 const _withScopeId$2 = (n) => (pushScopeId("data-v-6e170d87"), n = n(), popScopeId(), n);
 const _hoisted_1$g = { class: "zw-checkbox" };
-const _hoisted_2$6 = ["checked"];
+const _hoisted_2$5 = ["checked"];
 const _hoisted_3$1 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("span", { class: "zw-checkbox__indicator zw-margin-right--xs" }, null, -1));
 const _hoisted_4 = { class: "zw-checkbox__label" };
-const _sfc_main$x = {
+const _sfc_main$y = {
   __name: "Checkbox",
   props: {
     value: {
@@ -26743,8 +26683,9 @@ const _sfc_main$x = {
     }
   },
   emits: ["input"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const onCheckedChanged = () => emit("input", !props.value);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", _hoisted_1$g, [
@@ -26753,14 +26694,14 @@ const _sfc_main$x = {
           type: "checkbox",
           checked: __props.value,
           onClick: onCheckedChanged
-        }, null, 8, _hoisted_2$6),
+        }, null, 8, _hoisted_2$5),
         _hoisted_3$1,
         createElementVNode("span", _hoisted_4, toDisplayString(__props.label), 1)
       ]);
     };
   }
 };
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-6e170d87"]]);
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-6e170d87"]]);
 const InjectionTokens = Object.freeze({
   ACTIVE_MANAGER: Symbol("dropdownActiveManager"),
   TOGGLER: Symbol("dropdownToggler"),
@@ -26789,14 +26730,13 @@ function useDropdownEntityTitle(entityRef) {
     return ((_a2 = entityRef.value) == null ? void 0 : _a2.title) || ((_b = entityRef.value) == null ? void 0 : _b.id) || "";
   });
 }
-const DropdownActivator_vue_vue_type_style_index_0_scoped_c73e0119_lang = "";
 const _hoisted_1$f = { class: "zw-dropdown__activator-title zw-text--truncate" };
-const _hoisted_2$5 = {
+const _hoisted_2$4 = {
   key: 0,
   class: "zw-dropdown__customized-indicator",
   "data-test-selector": "customizedIndicator"
 };
-const _sfc_main$w = {
+const _sfc_main$x = {
   __name: "DropdownActivator",
   props: {
     color: {
@@ -26814,27 +26754,26 @@ const _sfc_main$w = {
     const props = __props;
     const activeOptionManager = inject(InjectionTokens.ACTIVE_MANAGER);
     const dropdownToggler = inject(InjectionTokens.TOGGLER);
-    const isOpened = computed(() => unref(dropdownToggler.isOpened));
     const color = toRef(props, "color");
     const activeOptionTitle = useDropdownEntityTitle(activeOptionManager.activeOption);
     const dropdownClasses = computed(() => ({
-      "zw-dropdown__activator--active": dropdownToggler.isOpened.value,
+      "zw-dropdown__activator--active": dropdownToggler.isOpened,
       "zw-dropdown__activator--gray": color.value === "gray"
     }));
     return (_ctx, _cache) => {
       return renderSlot(_ctx.$slots, "default", {
         open: unref(dropdownToggler).open,
-        isOpened: isOpened.value
+        isOpened: unref(dropdownToggler).isOpened
       }, () => [
         createVNode(unref(Button), {
           skin: "toolbar",
           class: normalizeClass(["zw-dropdown__activator", dropdownClasses.value]),
-          active: isOpened.value,
+          active: unref(dropdownToggler).isOpened,
           onClick: unref(dropdownToggler).open
         }, {
           default: withCtx(() => [
             createElementVNode("span", _hoisted_1$f, toDisplayString(unref(activeOptionTitle)), 1),
-            __props.isCustomized ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2$5, null, 512)), [
+            __props.isCustomized ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2$4, null, 512)), [
               [
                 unref(tooltip),
                 "Style differs from Page Styles",
@@ -26855,9 +26794,8 @@ const _sfc_main$w = {
     };
   }
 };
-const DropdownActivator = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-c73e0119"]]);
-const DropdownOption_vue_vue_type_style_index_0_scoped_2e8320d2_lang = "";
-const _sfc_main$v = {
+const DropdownActivator = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-678de368"]]);
+const _sfc_main$w = {
   __name: "DropdownOption",
   props: {
     option: {
@@ -26908,11 +26846,10 @@ const _sfc_main$v = {
     };
   }
 };
-const DropdownOption = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-2e8320d2"]]);
-const DropdownGroup_vue_vue_type_style_index_0_scoped_2239aa7b_lang = "";
+const DropdownOption = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-2e8320d2"]]);
 const _hoisted_1$e = { class: "zw-dropdown__group" };
-const _hoisted_2$4 = { class: "zw-dropdown__group-title" };
-const _sfc_main$u = {
+const _hoisted_2$3 = { class: "zw-dropdown__group-title" };
+const _sfc_main$v = {
   __name: "DropdownGroup",
   props: {
     group: {
@@ -26925,7 +26862,7 @@ const _sfc_main$u = {
     const groupTitle = useDropdownEntityTitle(toRef(props, "group"));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createElementVNode("p", _hoisted_2$4, toDisplayString(unref(groupTitle)), 1),
+        createElementVNode("p", _hoisted_2$3, toDisplayString(unref(groupTitle)), 1),
         (openBlock(true), createElementBlock(Fragment$1, null, renderList(__props.group.options, (option) => {
           return renderSlot(_ctx.$slots, "option", { option }, () => [
             createVNode(unref(DropdownOption), { option }, null, 8, ["option"])
@@ -26935,20 +26872,18 @@ const _sfc_main$u = {
     };
   }
 };
-const DropdownGroup = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-2239aa7b"]]);
-const DropdownDivider_vue_vue_type_style_index_0_scoped_91a22273_lang = "";
-const _sfc_main$t = {};
+const DropdownGroup = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-2239aa7b"]]);
+const _sfc_main$u = {};
 const _hoisted_1$d = { class: "zw-dropdown__divider" };
 function _sfc_render$1(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$d);
 }
-const DropdownDivider = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$1], ["__scopeId", "data-v-91a22273"]]);
-const DropdownMenu_vue_vue_type_style_index_0_lang = "";
+const DropdownDivider = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$1], ["__scopeId", "data-v-91a22273"]]);
 const _hoisted_1$c = {
   class: "zw-dropdown__menu",
   "data-test-selector": "dropdownMenu"
 };
-const _sfc_main$s = {
+const _sfc_main$t = {
   __name: "DropdownMenu",
   props: {
     options: {
@@ -26992,8 +26927,7 @@ const _sfc_main$s = {
     };
   }
 };
-const Dropdown_vue_vue_type_style_index_0_scoped_c59753d1_lang = "";
-const _sfc_main$r = {
+const _sfc_main$s = {
   __name: "Dropdown",
   props: {
     value: {
@@ -27022,20 +26956,17 @@ const _sfc_main$r = {
     }
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const dropdownRef = ref(null);
-    const modalRef = ref(null);
     const activeOptionManager = useActiveOptionManager({
       optionsRef: toRef(props, "options"),
       inputRef: toRef(props, "value"),
       stateless: props.value === null,
       onChange: (value) => emit("change", value.id)
     });
-    const toggler = useModalToggler({
-      wrapperRef: dropdownRef,
-      modalRef
-    });
+    const toggler = useModalToggler();
     provide(InjectionTokens.ACTIVE_MANAGER, activeOptionManager);
     provide(InjectionTokens.TOGGLER, toggler);
     return (_ctx, _cache) => {
@@ -27057,11 +26988,10 @@ const _sfc_main$r = {
           "max-height": "300",
           "max-width": __props.maxWidth,
           toggler: unref(toggler),
-          ref_key: "modalRef",
-          ref: modalRef
+          "reference-ref": dropdownRef.value
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$s), { options: __props.options }, {
+            createVNode(unref(_sfc_main$t), { options: __props.options }, {
               option: withCtx((attrs) => [
                 renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(attrs)), void 0, true)
               ]),
@@ -27069,12 +26999,12 @@ const _sfc_main$r = {
             }, 8, ["options"])
           ], void 0, true),
           _: 3
-        }, 8, ["max-width", "toggler"])
+        }, 8, ["max-width", "toggler", "reference-ref"])
       ], 512);
     };
   }
 };
-const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-c59753d1"]]);
+const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-0d65726d"]]);
 function usePickerApi({ pickerRef, colorRef, onChange, onClosed, onBeforeOpened }) {
   const isOpened = computed(() => {
     var _a2;
@@ -27141,7 +27071,7 @@ function usePickerHotkeys({ isOpenedRef, onCancel, onApply }) {
     options: { capture: true }
   });
 }
-const _sfc_main$q = {
+const _sfc_main$r = {
   __name: "ColorPicker",
   props: {
     value: {
@@ -27150,8 +27080,9 @@ const _sfc_main$q = {
     }
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const favoriteColorsService = inject(InjectionTokens$1.FAVORITE_COLORS);
     const editor = inject(InjectionTokens$1.EDITOR);
     const pickerRef = ref(null);
@@ -27211,12 +27142,11 @@ function useRecentFonts({ limit }) {
   const isEmpty = computed(() => !fonts.value.length);
   return { fonts, isEmpty, add };
 }
-const FontFamilyControl_vue_vue_type_style_index_0_scoped_3931975f_lang = "";
 const _hoisted_1$b = {
   key: 0,
   class: "zw-dropdown__default-option"
 };
-const _sfc_main$p = {
+const _sfc_main$q = {
   __name: "FontFamilyControl",
   setup(__props) {
     const fonts = inject(InjectionTokens$1.FONTS);
@@ -27285,13 +27215,12 @@ const _sfc_main$p = {
     };
   }
 };
-const FontFamilyControl = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-3931975f"]]);
-const FontWeightControl_vue_vue_type_style_index_0_scoped_54f744a9_lang = "";
+const FontFamilyControl = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-3931975f"]]);
 const _hoisted_1$a = {
   key: 0,
   class: "zw-dropdown__default-option"
 };
-const _sfc_main$o = {
+const _sfc_main$p = {
   __name: "FontWeightControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -27335,13 +27264,12 @@ const _sfc_main$o = {
     };
   }
 };
-const FontWeightControl = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-54f744a9"]]);
-const FontSizeControl_vue_vue_type_style_index_0_scoped_9452b945_lang = "";
+const FontWeightControl = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-54f744a9"]]);
 const _hoisted_1$9 = {
   key: 0,
   class: "zw-dropdown__default-option"
 };
-const _sfc_main$n = {
+const _sfc_main$o = {
   __name: "FontSizeControl",
   setup(__props) {
     const fontSizes = inject(InjectionTokens$1.FONT_SIZES);
@@ -27386,13 +27314,13 @@ const _sfc_main$n = {
     };
   }
 };
-const FontSizeControl = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-9452b945"]]);
+const FontSizeControl = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-9452b945"]]);
 const _hoisted_1$8 = {
   key: 0,
   class: "zw-button__customized-indicator",
   "data-test-selector": "customizedIndicator"
 };
-const _sfc_main$m = {
+const _sfc_main$n = {
   __name: "FontColorControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -27400,7 +27328,7 @@ const _sfc_main$m = {
     const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_COLOR);
     const apply2 = (color) => editor.chain().applyFontColor(color).run();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$q), {
+      return openBlock(), createBlock(unref(_sfc_main$r), {
         value: unref(currentValue),
         onChange: apply2
       }, {
@@ -27437,14 +27365,14 @@ const _sfc_main$m = {
     };
   }
 };
-const _sfc_main$l = {
+const _sfc_main$m = {
   __name: "BackgroundColorControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
     const currentValue = editor.commands.getBackgroundColor();
     const apply2 = (color) => editor.chain().applyBackgroundColor(color).run();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$q), {
+      return openBlock(), createBlock(unref(_sfc_main$r), {
         value: unref(currentValue),
         onChange: apply2
       }, {
@@ -27477,7 +27405,7 @@ const _hoisted_1$7 = {
   class: "zw-button__customized-indicator",
   "data-test-selector": "customizedIndicator"
 };
-const _sfc_main$k = {
+const _sfc_main$l = {
   __name: "ItalicControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -27521,7 +27449,7 @@ const _hoisted_1$6 = {
   class: "zw-button__customized-indicator",
   "data-test-selector": "customizedIndicator"
 };
-const _sfc_main$j = {
+const _sfc_main$k = {
   __name: "UnderlineControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -27558,7 +27486,7 @@ const _sfc_main$j = {
     };
   }
 };
-const _sfc_main$i = {
+const _sfc_main$j = {
   __name: "StrikeThroughControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -27585,7 +27513,7 @@ const _sfc_main$i = {
     };
   }
 };
-const _sfc_main$h = {
+const _sfc_main$i = {
   __name: "SuperscriptControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -27612,7 +27540,7 @@ const _sfc_main$h = {
     };
   }
 };
-const _sfc_main$g = {
+const _sfc_main$h = {
   __name: "CaseStyleControl",
   setup(__props) {
     const styles = [
@@ -27651,10 +27579,11 @@ const _sfc_main$g = {
     };
   }
 };
-const _sfc_main$f = {
+const _sfc_main$g = {
   __name: "AlignmentControl",
   emits: ["applied"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
     const alignments = [
       {
         id: Alignments.LEFT,
@@ -27725,24 +27654,21 @@ const _sfc_main$f = {
     };
   }
 };
-const LineHeightControl_vue_vue_type_style_index_0_scoped_74a13b9d_lang = "";
 const _hoisted_1$5 = {
   key: 0,
   class: "zw-button__customized-indicator",
   "data-test-selector": "customizedIndicator"
 };
-const _hoisted_2$3 = { class: "zw-line-height-control__row" };
-const _sfc_main$e = {
+const _hoisted_2$2 = { class: "zw-line-height-control__row" };
+const _sfc_main$f = {
   __name: "LineHeightControl",
   setup(__props) {
-    const wrapperRef = ref(null);
-    const modalRef = ref(null);
     const editor = inject(InjectionTokens$1.EDITOR);
-    const toggler = useModalToggler({ wrapperRef, modalRef });
+    const wrapperRef = ref(null);
+    const toggler = useModalToggler();
     const currentValue = editor.commands.getLineHeight();
     const isCustomized = editor.commands.isSettingCustomized(TextSettings.LINE_HEIGHT);
     const apply2 = (value) => editor.commands.applyLineHeight(String(value));
-    const isOpened = computed(() => unref(toggler.isOpened));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "zw-position--relative",
@@ -27753,7 +27679,7 @@ const _sfc_main$e = {
           class: "zw-position--relative",
           icon: "",
           skin: "toolbar",
-          active: isOpened.value,
+          active: unref(toggler).isOpened,
           onClick: unref(toggler).open
         }, {
           default: withCtx(() => [
@@ -27777,9 +27703,8 @@ const _sfc_main$e = {
         ]),
         createVNode(unref(Modal), {
           class: "zw-line-height-control__modal",
-          ref_key: "modalRef",
-          ref: modalRef,
-          toggler: unref(toggler)
+          toggler: unref(toggler),
+          "reference-ref": wrapperRef.value
         }, {
           default: withCtx(() => [
             createVNode(unref(FieldLabel), {
@@ -27791,7 +27716,7 @@ const _sfc_main$e = {
               ], void 0, true),
               _: 1
             }),
-            createElementVNode("div", _hoisted_2$3, [
+            createElementVNode("div", _hoisted_2$2, [
               createVNode(unref(Range), {
                 class: "zw-line-height-control__range",
                 step: "0.1",
@@ -27812,15 +27737,14 @@ const _sfc_main$e = {
             ])
           ], void 0, true),
           _: 1
-        }, 8, ["toggler"])
+        }, 8, ["toggler", "reference-ref"])
       ], 512);
     };
   }
 };
-const LineHeightControl = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-74a13b9d"]]);
-const ListControl_vue_vue_type_style_index_0_scoped_923a86d6_lang = "";
+const LineHeightControl = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-8eb86211"]]);
 const _hoisted_1$4 = { class: "zpa-list-control" };
-const _sfc_main$d = {
+const _sfc_main$e = {
   __name: "ListControl",
   setup(__props) {
     const listTypes = ListTypes.values.map((type) => ({
@@ -27903,8 +27827,8 @@ const _sfc_main$d = {
     };
   }
 };
-const ListControl = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-923a86d6"]]);
-const _sfc_main$c = {
+const ListControl = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-923a86d6"]]);
+const _sfc_main$d = {
   __name: "RemoveFormatControl",
   setup(__props) {
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -27935,20 +27859,20 @@ const RegExps = {
   MAILTO_PROTOCOL: /^mailto:.+$/,
   TEL_PROTOCOL: /^tel:.+$/
 };
-const LinkControlHeader_vue_vue_type_style_index_0_scoped_64870ac2_lang = "";
 const _withScopeId$1 = (n) => (pushScopeId("data-v-64870ac2"), n = n(), popScopeId(), n);
 const _hoisted_1$3 = { class: "zw-link-modal-header" };
-const _hoisted_2$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("span", { class: "zw-link-modal-header__title" }, " Link ", -1));
-const _sfc_main$b = {
+const _hoisted_2$1 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("span", { class: "zw-link-modal-header__title" }, " Link ", -1));
+const _sfc_main$c = {
   __name: "LinkControlHeader",
   emits: ["remove-link"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
     const editor = inject(InjectionTokens$1.EDITOR);
     const isLink = editor.commands.isLink();
     const removeLink = () => emit("remove-link");
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        _hoisted_2$2,
+        _hoisted_2$1,
         createVNode(unref(Button), {
           class: "zw-link-modal-header__unlink-button",
           disabled: !unref(isLink),
@@ -27970,7 +27894,7 @@ const _sfc_main$b = {
     };
   }
 };
-const LinkControlHeader = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-64870ac2"]]);
+const LinkControlHeader = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-64870ac2"]]);
 function useLink() {
   const editor = inject(InjectionTokens$1.EDITOR);
   const pageBlocks = inject(InjectionTokens$1.PAGE_BLOCKS);
@@ -28038,7 +27962,7 @@ function useLink() {
     updateText
   };
 }
-const _sfc_main$a = {
+const _sfc_main$b = {
   __name: "LinkControlPageBlock",
   props: {
     value: {
@@ -28047,7 +27971,8 @@ const _sfc_main$a = {
     }
   },
   emits: ["update"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
     const pageBlocks = inject(InjectionTokens$1.PAGE_BLOCKS);
     const applyBlock = (id) => {
       const block = pageBlocks.value.find((block2) => block2.id === id);
@@ -28060,7 +27985,7 @@ const _sfc_main$a = {
           "field-id": "link-destination"
         }, {
           default: withCtx(() => [
-            createTextVNode(" Select block ")
+            createTextVNode(" Select section ")
           ], void 0, true),
           _: 1
         }),
@@ -28083,7 +28008,7 @@ const _sfc_main$a = {
     };
   }
 };
-const _sfc_main$9 = {
+const _sfc_main$a = {
   __name: "LinkControlUrl",
   props: {
     href: {
@@ -28100,7 +28025,8 @@ const _sfc_main$9 = {
     }
   },
   emits: ["update-link", "update-target"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
     const updateLink = (value) => emit("update-link", value);
     const updateTarget = (value) => emit("update-target", value);
     return (_ctx, _cache) => {
@@ -28122,7 +28048,7 @@ const _sfc_main$9 = {
     };
   }
 };
-const _sfc_main$8 = {
+const _sfc_main$9 = {
   __name: "LinkControlDestination",
   props: {
     link: {
@@ -28135,11 +28061,12 @@ const _sfc_main$8 = {
     }
   },
   emits: ["reset-errors"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const destinationTypes = [
       { id: LinkDestinations.URL, title: "URL" },
-      { id: LinkDestinations.BLOCK, title: "Page Block" }
+      { id: LinkDestinations.BLOCK, title: "Page Section" }
     ];
     const link = toRef(props, "link");
     const isURLDestination = computed(() => link.value.currentDestination.value.id === LinkDestinations.URL);
@@ -28179,7 +28106,7 @@ const _sfc_main$8 = {
           ]),
           _: 1
         }, 8, ["value"]),
-        isURLDestination.value ? (openBlock(), createBlock(unref(_sfc_main$9), {
+        isURLDestination.value ? (openBlock(), createBlock(unref(_sfc_main$a), {
           key: 0,
           class: "zw-margin-bottom--md",
           href: link.value.destinationHrefs.value.url,
@@ -28187,7 +28114,7 @@ const _sfc_main$8 = {
           validator: __props.validator,
           onUpdateLink: updateLink,
           onUpdateTarget: link.value.updateTarget
-        }, null, 8, ["href", "isTargetBlank", "validator", "onUpdateTarget"])) : (openBlock(), createBlock(unref(_sfc_main$a), {
+        }, null, 8, ["href", "isTargetBlank", "validator", "onUpdateTarget"])) : (openBlock(), createBlock(unref(_sfc_main$b), {
           key: 1,
           value: link.value.destinationHrefs.value.block,
           onUpdate: updateLink
@@ -28196,15 +28123,12 @@ const _sfc_main$8 = {
     };
   }
 };
-const LinkControl_vue_vue_type_style_index_0_scoped_c3983e26_lang = "";
-const _hoisted_1$2 = ["onSubmit"];
-const _hoisted_2$1 = { class: "zw-link-modal__actions" };
-const _sfc_main$7 = {
+const _hoisted_1$2 = { class: "zw-link-modal__actions" };
+const _sfc_main$8 = {
   __name: "LinkControl",
   setup(__props) {
-    const wrapperRef = ref(null);
-    const modalRef = ref(null);
     const editor = inject(InjectionTokens$1.EDITOR);
+    const wrapperRef = ref(null);
     const link = useLink();
     const isEmpty = () => {
       return link.linkData.value.text ? false : "Can't be empty";
@@ -28231,18 +28155,15 @@ const _sfc_main$7 = {
       nameValidator.reset();
       urlValidator.reset();
     };
-    const onBeforeOpened = () => {
-      editor.commands.extendMarkRange(TextSettings.LINK);
-      resetErrors();
-      link.prepareInitialFields();
-    };
     const toggler = useModalToggler({
-      onBeforeOpened: () => onBeforeOpened(),
-      wrapperRef,
-      modalRef
+      onBeforeOpened: () => {
+        editor.commands.extendMarkRange(TextSettings.LINK);
+        resetErrors();
+        link.prepareInitialFields();
+      }
     });
     const isLink = editor.commands.isLink();
-    const isActive2 = computed(() => unref(toggler.isOpened) || unref(isLink));
+    const isActive2 = computed(() => toggler.isOpened || unref(isLink));
     const updateLinkText = (value) => {
       resetErrors();
       link.updateText(value);
@@ -28286,8 +28207,7 @@ const _sfc_main$7 = {
         createVNode(unref(Modal), {
           class: "zw-link-modal",
           toggler: unref(toggler),
-          ref_key: "modalRef",
-          ref: modalRef,
+          "reference-ref": wrapperRef.value,
           "focus-first-control": ""
         }, {
           default: withCtx(() => [
@@ -28305,13 +28225,13 @@ const _sfc_main$7 = {
                 error: unref(nameValidator).error.value,
                 onInput: updateLinkText
               }, null, 8, ["value", "error"]),
-              createVNode(unref(_sfc_main$8), {
+              createVNode(unref(_sfc_main$9), {
                 class: "zw-margin-bottom--md",
                 link: unref(link),
                 validator: unref(urlValidator),
                 onResetErrors: resetErrors
               }, null, 8, ["link", "validator"]),
-              createElementVNode("div", _hoisted_2$1, [
+              createElementVNode("div", _hoisted_1$2, [
                 createVNode(unref(Button), {
                   class: "zw-margin-right--xs",
                   skin: "secondary",
@@ -28332,17 +28252,16 @@ const _sfc_main$7 = {
                   _: 1
                 })
               ])
-            ], 40, _hoisted_1$2)
+            ], 32)
           ], void 0, true),
           _: 1
-        }, 8, ["toggler"])
+        }, 8, ["toggler", "reference-ref"])
       ], 512);
     };
   }
 };
-const LinkControl = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-c3983e26"]]);
-const StylePresetOption_vue_vue_type_style_index_0_scoped_c80fcebf_lang = "";
-const _sfc_main$6 = {
+const LinkControl = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-5d6cf980"]]);
+const _sfc_main$7 = {
   name: "StylePresetOption",
   components: {
     DropdownOption
@@ -28389,10 +28308,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["style", "option"]);
 }
-const StylePresetOption = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render], ["__scopeId", "data-v-c80fcebf"]]);
-const StylePresetControl_vue_vue_type_style_index_0_scoped_a8aff4db_lang = "";
+const StylePresetOption = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render], ["__scopeId", "data-v-c80fcebf"]]);
 const _hoisted_1 = { class: "zw-style-preset-control" };
-const _sfc_main$5 = {
+const _sfc_main$6 = {
   __name: "StylePresetControl",
   setup(__props) {
     const CLEAR_MARKS = [TextSettings.FONT_SIZE, TextSettings.FONT_WEIGHT];
@@ -28460,8 +28378,8 @@ const _sfc_main$5 = {
     };
   }
 };
-const StylePresetControl = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-a8aff4db"]]);
-const _sfc_main$4 = {
+const StylePresetControl = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-a8aff4db"]]);
+const _sfc_main$5 = {
   __name: "ToolbarDesktop",
   props: {
     aiComponent: {
@@ -28489,8 +28407,8 @@ const _sfc_main$4 = {
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$m)),
-                createVNode(unref(_sfc_main$l))
+                createVNode(unref(_sfc_main$n)),
+                createVNode(unref(_sfc_main$m))
               ], void 0, true),
               _: 1
             })
@@ -28502,16 +28420,16 @@ const _sfc_main$4 = {
           default: withCtx(() => [
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
+                createVNode(unref(_sfc_main$l)),
                 createVNode(unref(_sfc_main$k)),
                 createVNode(unref(_sfc_main$j)),
                 createVNode(unref(_sfc_main$i)),
-                createVNode(unref(_sfc_main$h)),
-                createVNode(unref(_sfc_main$g))
+                createVNode(unref(_sfc_main$h))
               ], void 0, true),
               _: 1
             }),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
-            createVNode(unref(_sfc_main$f)),
+            createVNode(unref(_sfc_main$g)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(LineHeightControl)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
@@ -28520,7 +28438,7 @@ const _sfc_main$4 = {
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
                 createVNode(unref(LinkControl)),
-                createVNode(unref(_sfc_main$c))
+                createVNode(unref(_sfc_main$d))
               ], void 0, true),
               _: 1
             })
@@ -28531,7 +28449,7 @@ const _sfc_main$4 = {
     };
   }
 };
-const _sfc_main$3 = {
+const _sfc_main$4 = {
   __name: "ToolbarMobile",
   setup(__props) {
     return (_ctx, _cache) => {
@@ -28553,19 +28471,19 @@ const _sfc_main$3 = {
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$m)),
-                createVNode(unref(_sfc_main$l))
+                createVNode(unref(_sfc_main$n)),
+                createVNode(unref(_sfc_main$m))
               ], void 0, true),
               _: 1
             }),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
+                createVNode(unref(_sfc_main$l)),
                 createVNode(unref(_sfc_main$k)),
                 createVNode(unref(_sfc_main$j)),
                 createVNode(unref(_sfc_main$i)),
-                createVNode(unref(_sfc_main$h)),
-                createVNode(unref(_sfc_main$g))
+                createVNode(unref(_sfc_main$h))
               ], void 0, true),
               _: 1
             })
@@ -28575,7 +28493,7 @@ const _sfc_main$3 = {
         createVNode(unref(ToolbarDivider), { horizontal: "" }),
         createVNode(unref(ToolbarRow), null, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$f)),
+            createVNode(unref(_sfc_main$g)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(LineHeightControl)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
@@ -28584,7 +28502,7 @@ const _sfc_main$3 = {
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
                 createVNode(unref(LinkControl)),
-                createVNode(unref(_sfc_main$c))
+                createVNode(unref(_sfc_main$d))
               ], void 0, true),
               _: 1
             })
@@ -28595,7 +28513,7 @@ const _sfc_main$3 = {
     };
   }
 };
-const _sfc_main$2 = {
+const _sfc_main$3 = {
   __name: "ToolbarPopup",
   props: {
     aiComponent: {
@@ -28623,19 +28541,19 @@ const _sfc_main$2 = {
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$m)),
-                createVNode(unref(_sfc_main$l))
+                createVNode(unref(_sfc_main$n)),
+                createVNode(unref(_sfc_main$m))
               ], void 0, true),
               _: 1
             }),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
+                createVNode(unref(_sfc_main$l)),
                 createVNode(unref(_sfc_main$k)),
                 createVNode(unref(_sfc_main$j)),
                 createVNode(unref(_sfc_main$i)),
-                createVNode(unref(_sfc_main$h)),
-                createVNode(unref(_sfc_main$g))
+                createVNode(unref(_sfc_main$h))
               ], void 0, true),
               _: 1
             })
@@ -28645,7 +28563,7 @@ const _sfc_main$2 = {
         createVNode(unref(ToolbarDivider), { horizontal: "" }),
         createVNode(unref(ToolbarRow), null, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$f)),
+            createVNode(unref(_sfc_main$g)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
             createVNode(unref(LineHeightControl)),
             createVNode(unref(ToolbarDivider), { vertical: "" }),
@@ -28654,7 +28572,7 @@ const _sfc_main$2 = {
             createVNode(unref(ToolbarGroup), null, {
               default: withCtx(() => [
                 createVNode(unref(LinkControl)),
-                createVNode(unref(_sfc_main$c))
+                createVNode(unref(_sfc_main$d))
               ], void 0, true),
               _: 1
             })
@@ -28665,7 +28583,46 @@ const _sfc_main$2 = {
     };
   }
 };
-const Toolbar_vue_vue_type_style_index_0_scoped_d3e5d777_lang = "";
+const _sfc_main$2 = {
+  __name: "ToolbarFloating",
+  props: {
+    referenceRef: {
+      type: Object,
+      required: true
+    },
+    placement: {
+      type: String,
+      required: true
+    },
+    offsets: {
+      type: Array,
+      required: true
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const floatingRef = ref(null);
+    const referenceRef = toRef(props, "referenceRef");
+    const middlewares = computed(() => [
+      shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
+      offset({ crossAxis: props.offsets[0], mainAxis: props.offsets[1] })
+    ]);
+    const { floatingStyles } = useFloating(referenceRef, floatingRef, {
+      placement: toRef(props, "placement"),
+      strategy: "fixed",
+      middleware: middlewares
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "floatingRef",
+        ref: floatingRef,
+        style: normalizeStyle(unref(floatingStyles))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 4);
+    };
+  }
+};
 const _sfc_main$1 = {
   __name: "Toolbar",
   props: {
@@ -28673,14 +28630,27 @@ const _sfc_main$1 = {
       type: String,
       required: true
     },
-    toolbar: {
-      type: Object,
+    visible: {
+      type: Boolean,
       required: true
     },
     popupMode: {
       type: Boolean,
       required: true
     },
+    referenceRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    placement: {
+      type: String,
+      required: true
+    },
+    offsets: {
+      type: Array,
+      required: true
+    },
     aiComponent: {
       type: Object,
       required: false,
@@ -28688,19 +28658,14 @@ const _sfc_main$1 = {
     }
   },
   setup(__props) {
-    const props = __props;
     useCssVars((_ctx) => ({
-      "c6eda43c": __props.toolbar.offsets[1]
+      "0f007386": __props.offsets[1]
     }));
+    const props = __props;
     const layoutComponent = computed(() => {
       if (props.popupMode)
-        return _sfc_main$2;
-      return props.device === Devices.MOBILE ? _sfc_main$3 : _sfc_main$4;
-    });
-    const isVisible = computed(() => props.toolbar.isActiveRef.value);
-    const toolbarRef = ref(null);
-    watch(toolbarRef, (toolbarEl) => {
-      toolbarEl && props.toolbar.mount(toolbarEl);
+        return _sfc_main$3;
+      return props.device === Devices.MOBILE ? _sfc_main$4 : _sfc_main$5;
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(KeepAlive, null, [
@@ -28709,14 +28674,18 @@ const _sfc_main$1 = {
           duration: "150"
         }, {
           default: withCtx(() => [
-            isVisible.value ? (openBlock(), createElementBlock("div", {
+            __props.visible && __props.referenceRef ? (openBlock(), createBlock(unref(_sfc_main$2), {
               key: 0,
               class: "zw-toolbar",
-              ref_key: "toolbarRef",
-              ref: toolbarRef
-            }, [
-              (openBlock(), createBlock(resolveDynamicComponent(layoutComponent.value), { "ai-component": __props.aiComponent }, null, 8, ["ai-component"]))
-            ], 512)) : createCommentVNode("", true)
+              "reference-ref": __props.referenceRef,
+              placement: __props.placement,
+              offsets: __props.offsets
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(layoutComponent.value), { "ai-component": __props.aiComponent }, null, 8, ["ai-component"]))
+              ], void 0, true),
+              _: 1
+            }, 8, ["reference-ref", "placement", "offsets"])) : createCommentVNode("", true)
           ], void 0, true),
           _: 1
         })
@@ -28724,7 +28693,7 @@ const _sfc_main$1 = {
     };
   }
 };
-const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-d3e5d777"]]);
+const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-39370f99"]]);
 function useEditor({ content, onChange, extensions: extensions2, isReadonlyRef }) {
   let editor;
   const getContent = () => markWysiwygContent(editor.getJSON());
@@ -28733,7 +28702,12 @@ function useEditor({ content, onChange, extensions: extensions2, isReadonlyRef }
     onUpdate: () => onChange(getContent()),
     extensions: extensions2,
     injectCSS: false,
-    editable: !unref(isReadonlyRef)
+    editable: !unref(isReadonlyRef),
+    editorProps: {
+      attributes: {
+        class: "zw-wysiwyg__content"
+      }
+    }
   }));
   onUnmounted(() => editor.destroy());
   watch(content, (value) => {
@@ -28742,36 +28716,9 @@ function useEditor({ content, onChange, extensions: extensions2, isReadonlyRef }
       editor.commands.setContent(content2, false);
     }
   });
-  watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly));
+  watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly, false));
   return { editor, getContent };
 }
-function useToolbar({ wrapperRef, offsets, isActiveRef, placementRef }) {
-  const wrapperEl = useElementRef(wrapperRef);
-  let floatingInstance;
-  function mount(element) {
-    floatingInstance = autoUpdate(wrapperEl.value, element, async () => {
-      const positioning = await computePosition(wrapperEl.value, element, {
-        placement: placementRef.value,
-        strategy: "fixed",
-        middleware: [
-          shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
-          offset({ crossAxis: offsets[0], mainAxis: offsets[1] })
-        ]
-      });
-      const { x, y } = positioning;
-      Object.assign(element.style, {
-        left: `${x}px`,
-        top: `${y}px`
-      });
-    });
-  }
-  onUnmounted(() => floatingInstance == null ? void 0 : floatingInstance());
-  return {
-    mount,
-    isActiveRef,
-    offsets
-  };
-}
 class Font {
   constructor({ name, category, styles }) {
     this.name = name;
@@ -28806,7 +28753,6 @@ class Font {
     return String(closestWeight);
   }
 }
-const main_css_vue_type_style_index_0_src_true_lang = "";
 const MIN_FONT_SIZE = 5;
 const MAX_FONT_SIZE = 112;
 const _sfc_main = {
@@ -28900,30 +28846,19 @@ const _sfc_main = {
     "update:model-value",
     "update-favorite-colors"
   ],
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     ContextWindow.use(props.window);
     const fonts = props.fonts.map((font) => new Font(font));
-    const toolbarRef = ref(null);
     const wysiwygRef = ref(null);
-    const wrapperRef = computed(() => {
-      var _a2;
-      return ((_a2 = wysiwygRef.value) == null ? void 0 : _a2.$el) || document.body;
-    });
-    const isToolbarActiveRef = computed(() => props.active && !props.readonly);
-    const toolbar = useToolbar({
-      wrapperRef: wysiwygRef,
-      placementRef: toRef(props, "toolbarPlacement"),
-      isActiveRef: isToolbarActiveRef,
-      offsets: props.toolbarOffsets
-    });
-    function onChange(content) {
-      emit("update:model-value", content);
-    }
+    const wrapperRef = computed(() => wysiwygRef.value || document.body);
+    const isToolbarVisible = computed(() => props.active && !props.readonly);
+    const onChange = (content) => emit("update:model-value", content);
     const pageBlocks = toRef(props, "pageBlocks");
     const { editor, getContent } = useEditor({
       content: toRef(props, "modelValue"),
-      onChange: (content) => onChange(content),
+      onChange,
       isReadonlyRef: toRef(props, "readonly"),
       extensions: buildExtensions({
         fonts,
@@ -28960,13 +28895,14 @@ const _sfc_main = {
         ref: wysiwygRef
       }, [
         createVNode(unref(Toolbar), {
-          toolbar: unref(toolbar),
           device: __props.device,
+          visible: isToolbarVisible.value,
           "popup-mode": __props.popupMode,
-          "ai-component": __props.aiComponent,
-          ref_key: "toolbarRef",
-          ref: toolbarRef
-        }, null, 8, ["toolbar", "device", "popup-mode", "ai-component"]),
+          "reference-ref": wysiwygRef.value,
+          placement: __props.toolbarPlacement,
+          offsets: __props.toolbarOffsets,
+          "ai-component": __props.aiComponent
+        }, null, 8, ["device", "visible", "popup-mode", "reference-ref", "placement", "offsets", "ai-component"]),
         createVNode(unref(EditorContent), { editor: unref(editor) }, null, 8, ["editor"])
       ], 512);
     };
@@ -28977,7 +28913,7 @@ export {
   Button,
   ButtonToggle,
   Checkbox,
-  _sfc_main$q as ColorPicker,
+  _sfc_main$r as ColorPicker,
   Dropdown,
   DropdownOption,
   FieldLabel,