@zipify/wysiwyg 3.0.1 → 3.0.2-0

package/dist/wysiwyg.mjs

@@ -26,7 +26,7 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _buildDecorations, buildDecorations_fn, _domParser, _parser, _NodeFilter, NodeFilter_get, _Node, Node_get, _removeComments, removeComments_fn, _normalizeRootTags, normalizeRootTags_fn, _createNodeIterator, createNodeIterator_fn, _iterateNodes, iterateNodes_fn, _runIterator, runIterator_fn, _removeEmptyNodes, removeEmptyNodes_fn, _normalizeListItems, normalizeListItems_fn, _isBlockNode, isBlockNode_fn, _isRootNode, isRootNode_fn, _assignElementProperties, assignElementProperties_fn, _removeStyleProperties, removeStyleProperties_fn, _normalizeBreakLines, normalizeBreakLines_fn, _normalizeBlockTextDecoration, normalizeBlockTextDecoration_fn, _moveTextDecorationToChildren, moveTextDecorationToChildren_fn, _parseTextDecoration, parseTextDecoration_fn, _normalizeBlockBackgroundColor, normalizeBlockBackgroundColor_fn, _moveBackgroundColorToChildren, moveBackgroundColorToChildren_fn, _wrapTextNode, wrapTextNode_fn, _iterateNodes2, iterateNodes_fn2, _iterateChildNodes, iterateChildNodes_fn, _bubbleMarks, bubbleMarks_fn, _canBubbleMark, canBubbleMark_fn, _includesMark, includesMark_fn, _includesMarkType, includesMarkType_fn, _removeMark, removeMark_fn, _addMark, addMark_fn, _findMarkIndexByType, findMarkIndexByType_fn, _buildHtml, buildHtml_fn, _buildJson, buildJson_fn, _schema, _domParser2, _nodeDomParser, _textBlock, textBlock_fn, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn, _contentSerializer, _getWeights, getWeights_fn;
+var _buildDecorations, buildDecorations_fn, _domParser, _parser, _NodeFilter, NodeFilter_get, _Node, Node_get, _removeComments, removeComments_fn, _normalizeRootTags, normalizeRootTags_fn, _createNodeIterator, createNodeIterator_fn, _iterateNodes, iterateNodes_fn, _runIterator, runIterator_fn, _removeEmptyNodes, removeEmptyNodes_fn, _normalizeListItems, normalizeListItems_fn, _isBlockNode, isBlockNode_fn, _isRootNode, isRootNode_fn, _assignElementProperties, assignElementProperties_fn, _removeStyleProperties, removeStyleProperties_fn, _normalizeBreakLines, normalizeBreakLines_fn, _normalizeBlockTextDecoration, normalizeBlockTextDecoration_fn, _moveTextDecorationToChildren, moveTextDecorationToChildren_fn, _parseTextDecoration, parseTextDecoration_fn, _normalizeBlockBackgroundColor, normalizeBlockBackgroundColor_fn, _moveBackgroundColorToChildren, moveBackgroundColorToChildren_fn, _wrapTextNode, wrapTextNode_fn, _iterateNodes2, iterateNodes_fn2, _iterateChildNodes, iterateChildNodes_fn, _bubbleMarks, bubbleMarks_fn, _canBubbleMark, canBubbleMark_fn, _includesMark, includesMark_fn, _includesMarkType, includesMarkType_fn, _removeMark, removeMark_fn, _addMark, addMark_fn, _findMarkIndexByType, findMarkIndexByType_fn, _buildHtml, buildHtml_fn, _buildJson, buildJson_fn, _schema, _domParser2, _nodeDomParser, _textBlock, textBlock_fn, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn, _contentSerializer, _baseClass, _makeVariable, _linkPresetId, _makeInternalVariableName, makeInternalVariableName_fn, _getWeights, getWeights_fn;
 import { computed, unref, toRef, reactive, watch, ref, inject, onUnmounted, nextTick, provide, onMounted } from "vue";
 import { ColorModel, ZipifyColorPicker } from "@zipify/colorpicker";
 function OrderedMap(content) {
@@ -14408,314 +14408,6 @@ class JsonSerializer {
     return JSON.stringify(json);
   }
 }
-const FontFamily = Mark.create({
-  name: TextSettings.FONT_FAMILY,
-  group: MarkGroups.SETTINGS,
-  addOptions: () => ({
-    fonts: []
-  }),
-  addAttributes: () => ({
-    value: { required: true }
-  }),
-  addCommands() {
-    return {
-      applyFontFamily: createCommand(({ commands: commands2 }, value) => {
-        commands2.applyMark(this.name, { value });
-        const font = commands2.findFontByName(value);
-        let fontWeight = unref(commands2.getFontWeight());
-        if (!font.isWeightSupported(fontWeight)) {
-          fontWeight = font.findClosestWeight(fontWeight);
-          commands2.applyFontWeight(fontWeight);
-        }
-        if (!font.isItalicSupported(fontWeight)) {
-          commands2.removeItalic();
-        }
-      }),
-      getFont: createCommand(({ commands: commands2 }) => {
-        const defaultPreset = unref(this.options.defaultPreset);
-        const defaultFont = commands2.findFontByName(defaultPreset.common.font_family);
-        const fontFamily = commands2.getFontFamily();
-        return computed(() => commands2.findFontByName(unref(fontFamily)) || defaultFont);
-      }),
-      findFontByName: createCommand((_, name) => {
-        return this.options.fonts.find((font) => font.name === name);
-      }),
-      getFontFamily: createCommand(({ commands: commands2 }) => {
-        return commands2.getCommonSettingMark(this.name, commands2.getDefaultFontFamily());
-      }),
-      getDefaultFontFamily: createCommand(({ commands: commands2 }) => {
-        const preset = commands2.getPreset();
-        return computed(() => unref(preset).common.font_family);
-      })
-    };
-  },
-  parseHTML() {
-    const getAttrs = (input) => ({ value: input.replace(/["']/g, "") });
-    return [
-      {
-        style: "--zw-font-family",
-        getAttrs
-      },
-      {
-        style: "font-family",
-        getAttrs
-      }
-    ];
-  },
-  renderHTML({ HTMLAttributes: attrs }) {
-    const font_family = attrs.value ? `"${attrs.value}"` : null;
-    return renderMark({ font_family });
-  }
-});
-function makePresetClass(base2, preset) {
-  const baseClass = base2.split(" ").map((part) => `.${part}`).join("");
-  return baseClass + preset.id;
-}
-const StylePreset = Extension.create({
-  name: TextSettings.STYLE_PRESET,
-  addStorage: () => ({
-    presetStyleEl: null
-  }),
-  addGlobalAttributes() {
-    return [
-      {
-        types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
-        attributes: {
-          preset: {
-            isRequired: false,
-            default: { id: this.options.defaultId },
-            parseHTML: (element) => {
-              const presets = unref(this.options.presets);
-              if (element.parentElement.tagName === "LI")
-                return null;
-              for (const { id: id2, node, fallbackClass } of presets) {
-                const isFallback = fallbackClass && element.classList.contains(fallbackClass);
-                if (isFallback)
-                  return { id: id2 };
-                const className = makePresetClass(this.options.baseClass, { id: id2 });
-                if (element.matches(className))
-                  return { id: id2 };
-                if (element.tagName === `H${node == null ? void 0 : node.level}`)
-                  return { id: id2 };
-              }
-              return element.tagName === "P" ? { id: this.options.defaultId } : null;
-            },
-            renderHTML: (attrs) => {
-              if (!attrs.preset)
-                return null;
-              return { class: this.options.baseClass + attrs.preset.id };
-            }
-          }
-        }
-      }
-    ];
-  },
-  addCommands() {
-    function findPresetById(presets, id2) {
-      return presets.find((preset) => id2 === preset.id);
-    }
-    function mergeSettings(source, target) {
-      const settings = {};
-      for (const name of Object.keys(source)) {
-        const sourceValue = source[name];
-        const targetValue = target[name];
-        const isInherit = !targetValue || targetValue.toLowerCase() === "inherit";
-        settings[name] = isInherit ? sourceValue : targetValue;
-      }
-      return settings;
-    }
-    return {
-      getPresetList: createCommand(() => computed(() => {
-        return this.options.presets.filter((preset) => !preset.hidden);
-      })),
-      getPreset: createCommand(({ commands: commands2 }) => {
-        const selectionRef = commands2.getBlockAttributes("preset", { id: this.options.defaultId });
-        const presetsRef = commands2.getPresetList();
-        const isLinkRef = commands2.isLink();
-        const linkPresetRef = commands2.getLinkPreset();
-        return computed(() => {
-          const preset = findPresetById(unref(presetsRef), unref(selectionRef).id);
-          if (!unref(isLinkRef))
-            return preset;
-          const linkPreset = unref(linkPresetRef);
-          return {
-            id: preset.id,
-            common: mergeSettings(preset.common, linkPreset.common),
-            mobile: mergeSettings(preset.mobile, linkPreset.mobile),
-            tablet: mergeSettings(preset.tablet, linkPreset.tablet),
-            desktop: mergeSettings(preset.desktop, linkPreset.desktop)
-          };
-        });
-      }),
-      applyPreset: createCommand(({ commands: commands2, chain }, presetId) => {
-        var _a, _b;
-        const presets = unref(commands2.getPresetList());
-        const preset = findPresetById(presets, presetId);
-        const nodeType = (_b = (_a = preset.node) == null ? void 0 : _a.type) != null ? _b : NodeTypes.PARAGRAPH;
-        const attrs = {
-          preset: { id: presetId }
-        };
-        if (preset.node) {
-          attrs.level = preset.node.level;
-        }
-        for (const textAttribute of TextSettings.attributes) {
-          attrs[textAttribute] = unref(commands2.getBlockAttributes(textAttribute));
-        }
-        chain().removeList().setNode(nodeType, attrs).run();
-      }),
-      applyDefaultPreset: createCommand(({ commands: commands2 }) => {
-        commands2.applyPreset(this.options.defaultId);
-      }),
-      removePreset: createCommand(({ commands: commands2 }) => {
-        commands2.setNode(NodeTypes.PARAGRAPH, { preset: null });
-      }),
-      getPresetCustomization: createCommand(({ editor, commands: commands2 }) => {
-        const state = toRef(editor, "state");
-        return computed(() => {
-          const { selection, doc: doc2 } = unref(state);
-          const { from: from2, to } = selection;
-          return commands2._getSettingCustomization(doc2, from2, to);
-        });
-      }),
-      isSettingCustomized: createCommand(({ commands: commands2 }, name) => {
-        const customization = commands2.getPresetCustomization();
-        const group = TextSettings.attributes.includes(name) ? "attributes" : "marks";
-        return computed(() => {
-          var _a, _b;
-          return (_b = (_a = unref(customization)[group]) == null ? void 0 : _a.includes(name)) != null ? _b : false;
-        });
-      }),
-      getContentCustomization: createCommand(({ editor, commands: commands2 }) => {
-        const state = toRef(editor, "state");
-        return computed(() => {
-          const { doc: doc2 } = unref(state);
-          return commands2._getSettingCustomization(doc2, 0, doc2.content.size);
-        });
-      }),
-      _getSettingCustomization: createCommand((_, doc2, from2, to) => {
-        const marks = /* @__PURE__ */ new Set();
-        const attributes = /* @__PURE__ */ new Set();
-        doc2.nodesBetween(from2, to, (node) => {
-          for (const [name, value] of Object.entries(node.attrs)) {
-            const isSetting = TextSettings.attributes.includes(name);
-            if (isSetting && value)
-              attributes.add(name);
-          }
-          for (const { type } of node.marks) {
-            if (TextSettings.marks.includes(type.name)) {
-              marks.add(type.name);
-            }
-          }
-        });
-        return {
-          attributes: Array.from(attributes),
-          marks: Array.from(marks)
-        };
-      }),
-      removePresetCustomization: createCommand(({ chain }) => {
-        chain().storeSelection().expandSelectionToBlock().removeMarks(TextSettings.marks).resetAttributes(NodeTypes.PARAGRAPH, TextSettings.attributes).resetAttributes(NodeTypes.HEADING, TextSettings.attributes).restoreSelection().run();
-      }),
-      removeFormat: createCommand(({ chain }) => {
-        chain().storeSelection().expandSelectionToBlock().removeAllMarks().applyDefaultPreset().restoreSelection().run();
-      })
-    };
-  },
-  onCreate() {
-    const existingStyleEl = ContextWindow.document.querySelector("[data-zw-styles]");
-    if (existingStyleEl) {
-      this.storage.presetStyleEl = existingStyleEl;
-      return;
-    }
-    this.storage.presetStyleEl = ContextWindow.document.createElement("style");
-    this.storage.presetStyleEl.dataset.zwStyles = "";
-    for (const preset of this.options.presets) {
-      const className = makePresetClass(this.options.baseClass, preset);
-      const css = [` ${className} {`];
-      for (const device of Devices.values) {
-        for (const setting of Object.keys(preset[device])) {
-          const variable = this.options.makeVariable({ device, preset, property: setting });
-          const property = setting.replace(/_/i, "-");
-          const prefix = device === Devices.COMMON ? "preset" : `preset-${device}`;
-          css.push(`--zw-${prefix}-${property}: var(${variable}, inherit);`);
-        }
-      }
-      css.push("}");
-      this.storage.presetStyleEl.innerHTML += css.join(" ");
-    }
-    ContextWindow.head.append(this.storage.presetStyleEl);
-  }
-});
-const FontWeight = Mark.create({
-  name: TextSettings.FONT_WEIGHT,
-  group: MarkGroups.SETTINGS,
-  addAttributes: () => ({
-    value: { required: true }
-  }),
-  addCommands() {
-    return {
-      applyFontWeight: createCommand(({ commands: commands2 }, value) => {
-        commands2.applyMark(this.name, { value });
-        const font = unref(commands2.getFont());
-        if (!font.isItalicSupported(value)) {
-          commands2.removeItalic();
-        }
-      }),
-      toggleBold: createCommand(({ commands: commands2 }) => {
-        const currentWeight = unref(commands2.getFontWeight());
-        const currentFont = unref(commands2.getFont());
-        const isBold = Number(currentWeight) >= 600;
-        const wantedWeight = isBold ? "400" : "700";
-        const nextWeight = currentFont.findClosestWeight(wantedWeight);
-        commands2.applyFontWeight(nextWeight);
-      }),
-      getFontWeight: createCommand(({ commands: commands2 }) => {
-        const selectionRef = commands2.getCommonSettingMark(this.name, commands2.getDefaultFontWeight());
-        const fontRef = commands2.getFont();
-        return computed(() => {
-          const weight = unref(selectionRef);
-          const font = unref(fontRef);
-          return font.isWeightSupported(weight) ? weight : font.findClosestWeight(weight);
-        });
-      }),
-      getDefaultFontWeight: createCommand(({ commands: commands2 }) => {
-        const preset = commands2.getPreset();
-        return computed(() => unref(preset).common.font_weight);
-      })
-    };
-  },
-  addKeyboardShortcuts: () => ({
-    "Mod-b": createKeyboardShortcut("toggleBold"),
-    "Mod-B": createKeyboardShortcut("toggleBold")
-  }),
-  parseHTML() {
-    const getAttrs = (value) => {
-      if (value === "bold")
-        return { value: "700" };
-      return Number(value) ? { value } : false;
-    };
-    return [
-      {
-        style: "--zw-font-weight",
-        getAttrs
-      },
-      {
-        style: "font-weight",
-        getAttrs
-      },
-      {
-        tag: "b",
-        attrs: { value: "700" }
-      },
-      {
-        tag: "strong",
-        attrs: { value: "700" }
-      }
-    ];
-  },
-  renderHTML({ HTMLAttributes: attrs }) {
-    return renderMark({ font_weight: attrs.value });
-  }
-});
 const Text$1 = Node.create({
   name: "text",
   group: "inline"
@@ -15192,639 +14884,921 @@ function mustPreserveItems(state) {
         break;
       }
   }
-  return cachedPreserveItems;
-}
-const historyKey = new PluginKey("history");
-const closeHistoryKey = new PluginKey("closeHistory");
-function history(config = {}) {
-  config = {
-    depth: config.depth || 100,
-    newGroupDelay: config.newGroupDelay || 500
-  };
-  return new Plugin({
-    key: historyKey,
-    state: {
-      init() {
-        return new HistoryState(Branch.empty, Branch.empty, null, 0);
-      },
-      apply(tr, hist, state) {
-        return applyTransaction(hist, state, tr, config);
-      }
-    },
-    config,
-    props: {
-      handleDOMEvents: {
-        beforeinput(view, e) {
-          let inputType = e.inputType;
-          let command2 = inputType == "historyUndo" ? undo : inputType == "historyRedo" ? redo : null;
-          if (!command2)
-            return false;
-          e.preventDefault();
-          return command2(view.state, view.dispatch);
+  return cachedPreserveItems;
+}
+const historyKey = new PluginKey("history");
+const closeHistoryKey = new PluginKey("closeHistory");
+function history(config = {}) {
+  config = {
+    depth: config.depth || 100,
+    newGroupDelay: config.newGroupDelay || 500
+  };
+  return new Plugin({
+    key: historyKey,
+    state: {
+      init() {
+        return new HistoryState(Branch.empty, Branch.empty, null, 0);
+      },
+      apply(tr, hist, state) {
+        return applyTransaction(hist, state, tr, config);
+      }
+    },
+    config,
+    props: {
+      handleDOMEvents: {
+        beforeinput(view, e) {
+          let inputType = e.inputType;
+          let command2 = inputType == "historyUndo" ? undo : inputType == "historyRedo" ? redo : null;
+          if (!command2)
+            return false;
+          e.preventDefault();
+          return command2(view.state, view.dispatch);
+        }
+      }
+    }
+  });
+}
+const undo = (state, dispatch) => {
+  let hist = historyKey.getState(state);
+  if (!hist || hist.done.eventCount == 0)
+    return false;
+  if (dispatch)
+    histTransaction(hist, state, dispatch, false);
+  return true;
+};
+const redo = (state, dispatch) => {
+  let hist = historyKey.getState(state);
+  if (!hist || hist.undone.eventCount == 0)
+    return false;
+  if (dispatch)
+    histTransaction(hist, state, dispatch, true);
+  return true;
+};
+const History = Extension.create({
+  name: "history",
+  addOptions() {
+    return {
+      depth: 100,
+      newGroupDelay: 500
+    };
+  },
+  addCommands() {
+    return {
+      undo: () => ({ state, dispatch }) => {
+        return undo(state, dispatch);
+      },
+      redo: () => ({ state, dispatch }) => {
+        return redo(state, dispatch);
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      history(this.options)
+    ];
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-z": () => this.editor.commands.undo(),
+      "Mod-y": () => this.editor.commands.redo(),
+      "Shift-Mod-z": () => this.editor.commands.redo(),
+      "Mod-\u044F": () => this.editor.commands.undo(),
+      "Shift-Mod-\u044F": () => this.editor.commands.redo()
+    };
+  }
+});
+class RemoveNodeMarkStep extends Step {
+  static fromJSON(schema, json) {
+    if (typeof json.pos != "number") {
+      throw new RangeError("Invalid input for RemoveNodeMarkStep.fromJSON");
+    }
+    return new RemoveNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
+  }
+  constructor(pos, mark) {
+    super();
+    this.pos = pos;
+    this.mark = mark;
+  }
+  apply(doc2) {
+    const node = doc2.nodeAt(this.pos);
+    if (!node)
+      return StepResult.fail("No node at mark step's position");
+    const updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
+    const slice2 = new Slice(Fragment.from(updated), 0, node.isLeaf ? 0 : 1);
+    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, slice2);
+  }
+  invert(doc2) {
+    const node = doc2.nodeAt(this.pos);
+    if (!node || !this.mark.isInSet(node.marks))
+      return this;
+    return new AddNodeMarkStep(this.pos, this.mark);
+  }
+  map(mapping) {
+    const pos = mapping.mapResult(this.pos, 1);
+    return pos.deletedAfter ? null : new RemoveNodeMarkStep(pos.pos, this.mark);
+  }
+  toJSON() {
+    return { stepType: "removeNodeMark", pos: this.pos, mark: this.mark.toJSON() };
+  }
+}
+Step.jsonID("removeNodeMark", RemoveNodeMarkStep);
+class AddNodeMarkStep extends Step {
+  static fromJSON(schema, json) {
+    if (typeof json.pos != "number") {
+      throw new RangeError("Invalid input for AddNodeMarkStep.fromJSON");
+    }
+    return new AddNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
+  }
+  constructor(pos, mark) {
+    super();
+    this.pos = pos;
+    this.mark = mark;
+  }
+  apply(doc2) {
+    const node = doc2.nodeAt(this.pos);
+    if (!node)
+      return StepResult.fail("No node at mark step's position");
+    const updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
+    const slice2 = new Slice(Fragment.from(updated), 0, node.isLeaf ? 0 : 1);
+    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, slice2);
+  }
+  invert(doc2) {
+    const node = doc2.nodeAt(this.pos);
+    if (node) {
+      const newSet = this.mark.addToSet(node.marks);
+      if (newSet.length === node.marks.length) {
+        for (const mark of node.marks) {
+          if (!mark.isInSet(newSet)) {
+            return new AddNodeMarkStep(this.pos, mark);
+          }
         }
+        return new AddNodeMarkStep(this.pos, this.mark);
       }
     }
-  });
+    return new RemoveNodeMarkStep(this.pos, this.mark);
+  }
+  map(mapping) {
+    const pos = mapping.mapResult(this.pos, 1);
+    return pos.deletedAfter ? null : new AddNodeMarkStep(pos.pos, this.mark);
+  }
+  toJSON() {
+    return { stepType: "addNodeMark", pos: this.pos, mark: this.mark.toJSON() };
+  }
 }
-const undo = (state, dispatch) => {
-  let hist = historyKey.getState(state);
-  if (!hist || hist.done.eventCount == 0)
-    return false;
-  if (dispatch)
-    histTransaction(hist, state, dispatch, false);
-  return true;
-};
-const redo = (state, dispatch) => {
-  let hist = historyKey.getState(state);
-  if (!hist || hist.undone.eventCount == 0)
-    return false;
-  if (dispatch)
-    histTransaction(hist, state, dispatch, true);
-  return true;
-};
-const History = Extension.create({
-  name: "history",
+Step.jsonID("addNodeMark", AddNodeMarkStep);
+class AttrStep extends Step {
+  static fromJSON(schema, json) {
+    if (typeof json.pos != "number" || typeof json.attr != "string") {
+      throw new RangeError("Invalid input for AttrStep.fromJSON");
+    }
+    return new AttrStep(json.pos, json.attr, json.value);
+  }
+  constructor(pos, attr, value) {
+    super();
+    this.pos = pos;
+    this.attr = attr;
+    this.value = value;
+  }
+  apply(doc2) {
+    const node = doc2.nodeAt(this.pos);
+    if (!node)
+      return StepResult.fail("No node at attribute step's position");
+    const attrs = /* @__PURE__ */ Object.create(null);
+    for (let name in node.attrs)
+      attrs[name] = node.attrs[name];
+    attrs[this.attr] = this.value;
+    const updated = node.type.create(attrs, null, node.marks);
+    const slice2 = new Slice(Fragment.from(updated), 0, node.isLeaf ? 0 : 1);
+    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, slice2);
+  }
+  getMap() {
+    return StepMap.empty;
+  }
+  invert(doc2) {
+    return new AttrStep(this.pos, this.attr, doc2.nodeAt(this.pos).attrs[this.attr]);
+  }
+  map(mapping) {
+    let pos = mapping.mapResult(this.pos, 1);
+    return pos.deletedAfter ? null : new AttrStep(pos.pos, this.attr, this.value);
+  }
+  toJSON() {
+    return { stepType: "attr", pos: this.pos, attr: this.attr, value: this.value };
+  }
+}
+Step.jsonID("attr", AttrStep);
+const NodeProcessor = Extension.create({
+  name: "node_processor",
+  addCommands() {
+    return {
+      setBlockAttributes: createCommand(({ commands: commands2, state }, name, attrs, defaults2 = {}) => {
+        var _a;
+        const current = (_a = unref(commands2.getBlockAttributes(name))) != null ? _a : {};
+        const { doc: doc2, tr } = state;
+        const { from: from2, to } = tr.selection;
+        doc2.nodesBetween(from2, to, (node, position) => {
+          if (!NodeTypes.blocks.includes(node.type.name))
+            return;
+          tr.step(new AttrStep(position, name, { ...defaults2, ...current, ...attrs }));
+        });
+      }),
+      getBlockAttributes: createCommand(({ editor }, name, defaults2) => computed(() => {
+        var _a;
+        let attrs = Object.assign({}, defaults2 || {});
+        for (const type of NodeTypes.blocks) {
+          Object.assign(attrs, ((_a = editor.getAttributes(type)) == null ? void 0 : _a[name]) || {});
+        }
+        return Object.keys(attrs).length ? attrs : null;
+      })),
+      removeBlockAttributes: createCommand(({ commands: commands2 }, names) => {
+        for (const type of NodeTypes.blocks) {
+          commands2.resetAttributes(type, names);
+        }
+      }),
+      applyMark: createCommand(({ state, commands: commands2 }, name, value, customizer = {}) => {
+        const { tr, doc: doc2, schema } = state;
+        const { $from, $to } = tr.selection;
+        const linkMarkType = getMarkType(TextSettings.LINK, schema);
+        const markType = getMarkType(name, schema);
+        const markGroup = markType.spec.group || "";
+        if (!markGroup.includes(MarkGroups.SETTINGS)) {
+          return commands2.setMark(name, value);
+        }
+        if ($from.pos === $to.pos)
+          return;
+        const onAppliedToParent = (context) => {
+          if (!customizer.onAppliedToParent || customizer.onAppliedToParent(context) === false) {
+            const { tr: tr2, node, position, mark } = context;
+            commands2._removeNodeMark({ tr: tr2, node, position, mark: mark.type });
+          }
+        };
+        doc2.nodesBetween($from.pos, $to.pos, (node, position) => {
+          if (node.type.name === NodeTypes.LIST)
+            return;
+          const initialMark = findMarkByType(node.marks, name);
+          const applyingMark = markType.create({ ...(initialMark == null ? void 0 : initialMark.attrs) || {}, ...value });
+          const textPosition = resolveTextPosition($from, $to, node, position);
+          const isAppliedToParent = !linkMarkType.isInSet(node.marks) && isMarkAppliedToParent(tr.doc, position, applyingMark, customizer.isAppliedToParent);
+          if (isAppliedToParent) {
+            return onAppliedToParent({ tr, node, position, mark: applyingMark });
+          }
+          if (node.isText) {
+            tr.addMark(textPosition.from, textPosition.to, applyingMark);
+            return;
+          }
+          if (isNodeFullySelected(tr.doc, tr.selection, node, position)) {
+            tr.step(new AddNodeMarkStep(position, applyingMark));
+          }
+        });
+      }),
+      getMarks: createCommand(({ editor }, name) => {
+        const stateRef = toRef(editor, "state");
+        return computed(() => {
+          const { selection, doc: doc2 } = unref(stateRef);
+          const { from: from2, to } = unref(selection);
+          const marks = [];
+          doc2.nodesBetween(from2, to, (node) => {
+            for (const mark of node.marks) {
+              if (mark.type.name === name)
+                marks.unshift(mark.attrs);
+            }
+          });
+          return marks;
+        });
+      }),
+      getMark: createCommand(({ commands: commands2 }, name) => {
+        const marksRef = commands2.getMarks(name);
+        return computed(() => {
+          var _a;
+          return (_a = unref(marksRef)[0]) != null ? _a : null;
+        });
+      }),
+      hasMark: createCommand(({ commands: commands2 }, name) => {
+        const mark = commands2.getMark(name);
+        return computed(() => !!unref(mark));
+      }),
+      getCommonSettingMark: createCommand(({ commands: commands2 }, name, defaultRef) => {
+        const selectionRef = commands2.getMark(name);
+        return computed(() => {
+          var _a, _b;
+          return (_b = (_a = unref(selectionRef)) == null ? void 0 : _a.value) != null ? _b : unref(defaultRef);
+        });
+      }),
+      getDeviceSettingMark: createCommand(({ commands: commands2 }, name, defaultRef) => {
+        const selectionRef = commands2.getMarks(name);
+        const deviceRef = commands2.getDevice();
+        return computed(() => {
+          for (const attrs of unref(selectionRef)) {
+            const value = attrs[unref(deviceRef)];
+            if (value)
+              return value;
+          }
+          return unref(defaultRef);
+        });
+      }),
+      removeAllMarks: createCommand(({ state, commands: commands2 }) => {
+        const { tr, doc: doc2 } = state;
+        const { from: from2, to } = tr.selection;
+        doc2.nodesBetween(from2, to, (node, position) => {
+          for (const mark of node.marks) {
+            commands2._removeNodeMark({ tr, node, position, mark });
+          }
+        });
+      }),
+      removeMarks: createCommand(({ state, commands: commands2 }, marks) => {
+        const { tr, doc: doc2 } = state;
+        const { from: from2, to } = tr.selection;
+        doc2.nodesBetween(from2, to, (node, position) => {
+          const removingMarks = node.marks.filter((mark) => marks.includes(mark.type.name));
+          for (const mark of removingMarks) {
+            commands2._removeNodeMark({ tr, node, position, mark });
+          }
+        });
+      }),
+      _removeNodeMark: createCommand((context, { tr, node, position, mark }) => {
+        return node.isText ? tr.removeMark(position, position + node.nodeSize, mark) : tr.step(new RemoveNodeMarkStep(position, mark));
+      })
+    };
+  }
+});
+const TextProcessor = Extension.create({
+  name: "text_processor",
+  addCommands() {
+    return {
+      getSelectedText: createCommand(({ state }) => {
+        const { from: from2, to } = state.selection;
+        return state.doc.textBetween(from2, to, " ");
+      }),
+      transformText: createCommand(({ state }, transform) => {
+        const { $from, $to } = state.tr.selection;
+        if ($from.pos === $to.pos)
+          return;
+        state.doc.nodesBetween($from.pos, $to.pos, (node, position) => {
+          if (!node.isText)
+            return;
+          const textPosition = resolveTextPosition($from, $to, node, position);
+          const substringFrom = Math.max(0, $from.pos - position);
+          const substringTo = Math.max(0, $to.pos - position);
+          const updatedText = transform({
+            text: node.textContent.substring(substringFrom, substringTo)
+          });
+          const updatedNode = state.schema.text(updatedText, node.marks);
+          state.tr.replaceWith(textPosition.from, textPosition.to, updatedNode);
+        });
+      })
+    };
+  }
+});
+const SelectionProcessor = Extension.create({
+  name: "selection_processor",
+  addStorage: () => ({
+    selection: null
+  }),
+  addCommands() {
+    return {
+      storeSelection: createCommand(({ state }) => {
+        this.storage.selection = state.selection;
+      }),
+      restoreSelection: createCommand(({ commands: commands2 }) => {
+        this.storage.selection && commands2.setTextSelection(this.storage.selection);
+      }),
+      expandSelection: createCommand(({ tr, commands: commands2 }, predicate) => {
+        let from2 = tr.selection.from;
+        let to = tr.selection.to;
+        tr.doc.nodesBetween(from2, to, (node, position, parent) => {
+          if (predicate({ node, parent })) {
+            const offset2 = node.isText ? 0 : resolvePositionOffset(tr.doc, position);
+            from2 = Math.min(from2, position + offset2);
+            to = Math.max(to, position + node.nodeSize - offset2);
+          }
+        });
+        commands2.setTextSelection({ from: from2, to });
+      }),
+      expandSelectionToBlock: createCommand(({ commands: commands2 }) => {
+        commands2.expandSelection(({ parent }) => parent.type.name === NodeTypes.DOCUMENT);
+      })
+    };
+  }
+});
+const Document$1 = Node.create({
+  name: "doc",
+  topNode: true,
+  content: "block+"
+});
+const Document = Document$1.extend({
+  marks: MarkGroups.SETTINGS
+});
+const Paragraph$1 = Node.create({
+  name: "paragraph",
+  priority: 1e3,
   addOptions() {
     return {
-      depth: 100,
-      newGroupDelay: 500
+      HTMLAttributes: {}
     };
   },
+  group: "block",
+  content: "inline*",
+  parseHTML() {
+    return [
+      { tag: "p" }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["p", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
   addCommands() {
     return {
-      undo: () => ({ state, dispatch }) => {
-        return undo(state, dispatch);
-      },
-      redo: () => ({ state, dispatch }) => {
-        return redo(state, dispatch);
+      setParagraph: () => ({ commands: commands2 }) => {
+        return commands2.setNode(this.name);
       }
     };
   },
-  addProseMirrorPlugins() {
-    return [
-      history(this.options)
-    ];
-  },
   addKeyboardShortcuts() {
     return {
-      "Mod-z": () => this.editor.commands.undo(),
-      "Mod-y": () => this.editor.commands.redo(),
-      "Shift-Mod-z": () => this.editor.commands.redo(),
-      "Mod-\u044F": () => this.editor.commands.undo(),
-      "Shift-Mod-\u044F": () => this.editor.commands.redo()
+      "Mod-Alt-0": () => this.editor.commands.setParagraph()
     };
   }
 });
-class RemoveNodeMarkStep extends Step {
-  static fromJSON(schema, json) {
-    if (typeof json.pos != "number") {
-      throw new RangeError("Invalid input for RemoveNodeMarkStep.fromJSON");
-    }
-    return new RemoveNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
-  }
-  constructor(pos, mark) {
-    super();
-    this.pos = pos;
-    this.mark = mark;
-  }
-  apply(doc2) {
-    const node = doc2.nodeAt(this.pos);
-    if (!node)
-      return StepResult.fail("No node at mark step's position");
-    const updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
-    const slice2 = new Slice(Fragment.from(updated), 0, node.isLeaf ? 0 : 1);
-    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, slice2);
+const Paragraph = Paragraph$1.extend({
+  marks: MarkGroups.ALL,
+  addOptions: () => ({
+    HTMLAttributes: { class: "zw-style" }
+  })
+});
+const Heading$1 = Node.create({
+  name: "heading",
+  addOptions() {
+    return {
+      levels: [1, 2, 3, 4, 5, 6],
+      HTMLAttributes: {}
+    };
+  },
+  content: "inline*",
+  group: "block",
+  defining: true,
+  addAttributes() {
+    return {
+      level: {
+        default: 1,
+        rendered: false
+      }
+    };
+  },
+  parseHTML() {
+    return this.options.levels.map((level) => ({
+      tag: `h${level}`,
+      attrs: { level }
+    }));
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const hasLevel = this.options.levels.includes(node.attrs.level);
+    const level = hasLevel ? node.attrs.level : this.options.levels[0];
+    return [`h${level}`, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands() {
+    return {
+      setHeading: (attributes) => ({ commands: commands2 }) => {
+        if (!this.options.levels.includes(attributes.level)) {
+          return false;
+        }
+        return commands2.setNode(this.name, attributes);
+      },
+      toggleHeading: (attributes) => ({ commands: commands2 }) => {
+        if (!this.options.levels.includes(attributes.level)) {
+          return false;
+        }
+        return commands2.toggleNode(this.name, "paragraph", attributes);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return this.options.levels.reduce((items, level) => ({
+      ...items,
+      ...{
+        [`Mod-Alt-${level}`]: () => this.editor.commands.toggleHeading({ level })
+      }
+    }), {});
+  },
+  addInputRules() {
+    return this.options.levels.map((level) => {
+      return textblockTypeInputRule({
+        find: new RegExp(`^(#{1,${level}})\\s$`),
+        type: this.type,
+        getAttributes: {
+          level
+        }
+      });
+    });
   }
-  invert(doc2) {
-    const node = doc2.nodeAt(this.pos);
-    if (!node || !this.mark.isInSet(node.marks))
-      return this;
-    return new AddNodeMarkStep(this.pos, this.mark);
+});
+const Heading = Heading$1.extend({
+  marks: MarkGroups.ALL,
+  addOptions: () => ({
+    levels: [1, 2, 3, 4],
+    HTMLAttributes: { class: "zw-style" }
+  })
+});
+class ProseMirrorPlugin {
+  static create(editor, options) {
+    const plugin = new this(editor, options || {});
+    return new Plugin({
+      key: new PluginKey(this.name),
+      props: plugin.buildProps()
+    });
   }
-  map(mapping) {
-    const pos = mapping.mapResult(this.pos, 1);
-    return pos.deletedAfter ? null : new RemoveNodeMarkStep(pos.pos, this.mark);
+  constructor(editor, options) {
+    this.options = options;
+    this.editor = editor;
   }
-  toJSON() {
-    return { stepType: "removeNodeMark", pos: this.pos, mark: this.mark.toJSON() };
+  buildProps() {
+    return {};
   }
 }
-Step.jsonID("removeNodeMark", RemoveNodeMarkStep);
-class AddNodeMarkStep extends Step {
-  static fromJSON(schema, json) {
-    if (typeof json.pos != "number") {
-      throw new RangeError("Invalid input for AddNodeMarkStep.fromJSON");
-    }
-    return new AddNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
-  }
-  constructor(pos, mark) {
-    super();
-    this.pos = pos;
-    this.mark = mark;
+class PastePlugin extends ProseMirrorPlugin {
+  buildProps() {
+    return {
+      transformPastedHTML: this._transformPastedHTML.bind(this),
+      handlePaste: this._handlePaste.bind(this)
+    };
   }
-  apply(doc2) {
-    const node = doc2.nodeAt(this.pos);
-    if (!node)
-      return StepResult.fail("No node at mark step's position");
-    const updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
-    const slice2 = new Slice(Fragment.from(updated), 0, node.isLeaf ? 0 : 1);
-    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, slice2);
+  _transformPastedHTML(html2) {
+    if (html2.includes("data-pm-slice") && html2.includes("zw-style")) {
+      return html2;
+    }
+    const normalizer = ContentNormalizer.build(html2);
+    normalizer.normalizeHTML();
+    this._removeDeprecatedStyles(normalizer);
+    return normalizer.normalizedHTML;
   }
-  invert(doc2) {
-    const node = doc2.nodeAt(this.pos);
-    if (node) {
-      const newSet = this.mark.addToSet(node.marks);
-      if (newSet.length === node.marks.length) {
-        for (const mark of node.marks) {
-          if (!mark.isInSet(newSet)) {
-            return new AddNodeMarkStep(this.pos, mark);
-          }
-        }
-        return new AddNodeMarkStep(this.pos, this.mark);
-      }
+  _removeDeprecatedStyles(normalizer) {
+    const elements = normalizer.dom.querySelectorAll('[style*="margin"]');
+    for (const element of Array.from(elements)) {
+      element.style.removeProperty("margin");
+      element.style.removeProperty("margin-top");
+      element.style.removeProperty("margin-right");
+      element.style.removeProperty("margin-bottom");
+      element.style.removeProperty("margin-left");
     }
-    return new RemoveNodeMarkStep(this.pos, this.mark);
-  }
-  map(mapping) {
-    const pos = mapping.mapResult(this.pos, 1);
-    return pos.deletedAfter ? null : new AddNodeMarkStep(pos.pos, this.mark);
   }
-  toJSON() {
-    return { stepType: "addNodeMark", pos: this.pos, mark: this.mark.toJSON() };
+  _handlePaste(view, _, slice2) {
+    const transaction = this._insertPastedContent(view, slice2).scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste");
+    view.dispatch(transaction);
+    return true;
   }
-}
-Step.jsonID("addNodeMark", AddNodeMarkStep);
-class AttrStep extends Step {
-  static fromJSON(schema, json) {
-    if (typeof json.pos != "number" || typeof json.attr != "string") {
-      throw new RangeError("Invalid input for AttrStep.fromJSON");
+  _insertPastedContent({ state, input }, slice2) {
+    if (!this._isFullBlockSelected(state)) {
+      return state.tr.replaceSelection(slice2);
     }
-    return new AttrStep(json.pos, json.attr, json.value);
-  }
-  constructor(pos, attr, value) {
-    super();
-    this.pos = pos;
-    this.attr = attr;
-    this.value = value;
+    return state.tr.replaceSelectionWith(slice2.content, input.shiftKey);
   }
-  apply(doc2) {
-    const node = doc2.nodeAt(this.pos);
-    if (!node)
-      return StepResult.fail("No node at attribute step's position");
-    const attrs = /* @__PURE__ */ Object.create(null);
-    for (let name in node.attrs)
-      attrs[name] = node.attrs[name];
-    attrs[this.attr] = this.value;
-    const updated = node.type.create(attrs, null, node.marks);
-    const slice2 = new Slice(Fragment.from(updated), 0, node.isLeaf ? 0 : 1);
-    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, slice2);
+  _isFullBlockSelected(state) {
+    const blocksSelection = this._expandSelectionToBlocks(state);
+    const isFromMatch = this._isMatchPosition(blocksSelection.from, state.selection.from);
+    const isToMatch = this._isMatchPosition(blocksSelection.to, state.selection.to);
+    return isFromMatch && isToMatch;
   }
-  getMap() {
-    return StepMap.empty;
+  _expandSelectionToBlocks({ selection, doc: doc2 }) {
+    let from2 = selection.from;
+    let to = selection.to;
+    doc2.nodesBetween(from2, to, (node, position, parent) => {
+      if (parent.type.name !== NodeTypes.DOCUMENT)
+        return;
+      from2 = Math.min(from2, position + 1);
+      to = Math.max(to, position + node.nodeSize - 1);
+    });
+    return { from: from2, to };
   }
-  invert(doc2) {
-    return new AttrStep(this.pos, this.attr, doc2.nodeAt(this.pos).attrs[this.attr]);
+  _isMatchPosition(position1, position2) {
+    return Math.abs(position1 - position2) < 5;
   }
-  map(mapping) {
-    let pos = mapping.mapResult(this.pos, 1);
-    return pos.deletedAfter ? null : new AttrStep(pos.pos, this.attr, this.value);
+}
+class PlaceholderPlugin extends ProseMirrorPlugin {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _buildDecorations);
   }
-  toJSON() {
-    return { stepType: "attr", pos: this.pos, attr: this.attr, value: this.value };
+  buildProps() {
+    return { decorations: __privateMethod(this, _buildDecorations, buildDecorations_fn).bind(this) };
   }
 }
-Step.jsonID("attr", AttrStep);
-const NodeProcessor = Extension.create({
-  name: "node_processor",
-  addCommands() {
-    return {
-      setBlockAttributes: createCommand(({ commands: commands2, state }, name, attrs, defaults2 = {}) => {
-        var _a;
-        const current = (_a = unref(commands2.getBlockAttributes(name))) != null ? _a : {};
-        const { doc: doc2, tr } = state;
-        const { from: from2, to } = tr.selection;
-        doc2.nodesBetween(from2, to, (node, position) => {
-          if (!NodeTypes.blocks.includes(node.type.name))
-            return;
-          tr.step(new AttrStep(position, name, { ...defaults2, ...current, ...attrs }));
-        });
-      }),
-      getBlockAttributes: createCommand(({ editor }, name, defaults2) => computed(() => {
-        var _a;
-        let attrs = Object.assign({}, defaults2 || {});
-        for (const type of NodeTypes.blocks) {
-          Object.assign(attrs, ((_a = editor.getAttributes(type)) == null ? void 0 : _a[name]) || {});
-        }
-        return Object.keys(attrs).length ? attrs : null;
-      })),
-      removeBlockAttributes: createCommand(({ commands: commands2 }, names) => {
-        for (const type of NodeTypes.blocks) {
-          commands2.resetAttributes(type, names);
-        }
-      }),
-      applyMark: createCommand(({ state, commands: commands2 }, name, value, customizer = {}) => {
-        const { tr, doc: doc2, schema } = state;
-        const { $from, $to } = tr.selection;
-        const markType = getMarkType(name, schema);
-        const markGroup = markType.spec.group || "";
-        if (!markGroup.includes(MarkGroups.SETTINGS)) {
-          return commands2.setMark(name, value);
-        }
-        if ($from.pos === $to.pos)
-          return;
-        const onAppliedToParent = (context) => {
-          if (!customizer.onAppliedToParent || customizer.onAppliedToParent(context) === false) {
-            const { tr: tr2, node, position, mark } = context;
-            commands2._removeNodeMark({ tr: tr2, node, position, mark: mark.type });
-          }
-        };
-        doc2.nodesBetween($from.pos, $to.pos, (node, position) => {
-          if (node.type.name === NodeTypes.LIST)
-            return;
-          const initialMark = findMarkByType(node.marks, name);
-          const applyingMark = markType.create({ ...(initialMark == null ? void 0 : initialMark.attrs) || {}, ...value });
-          const textPosition = resolveTextPosition($from, $to, node, position);
-          if (isMarkAppliedToParent(tr.doc, position, applyingMark, customizer.isAppliedToParent)) {
-            return onAppliedToParent({ tr, node, position, mark: applyingMark });
-          }
-          if (node.isText) {
-            tr.addMark(textPosition.from, textPosition.to, applyingMark);
-            return;
-          }
-          if (isNodeFullySelected(tr.doc, tr.selection, node, position)) {
-            tr.step(new AddNodeMarkStep(position, applyingMark));
-          }
-        });
-      }),
-      getMarks: createCommand(({ editor }, name) => {
-        const stateRef = toRef(editor, "state");
-        return computed(() => {
-          const { selection, doc: doc2 } = unref(stateRef);
-          const { from: from2, to } = unref(selection);
-          const marks = [];
-          doc2.nodesBetween(from2, to, (node) => {
-            for (const mark of node.marks) {
-              if (mark.type.name === name)
-                marks.unshift(mark.attrs);
-            }
-          });
-          return marks;
-        });
-      }),
-      getMark: createCommand(({ commands: commands2 }, name) => {
-        const marksRef = commands2.getMarks(name);
-        return computed(() => {
-          var _a;
-          return (_a = unref(marksRef)[0]) != null ? _a : null;
-        });
-      }),
-      hasMark: createCommand(({ commands: commands2 }, name) => {
-        const mark = commands2.getMark(name);
-        return computed(() => !!unref(mark));
-      }),
-      getCommonSettingMark: createCommand(({ commands: commands2 }, name, defaultRef) => {
-        const selectionRef = commands2.getMark(name);
-        return computed(() => {
-          var _a, _b;
-          return (_b = (_a = unref(selectionRef)) == null ? void 0 : _a.value) != null ? _b : unref(defaultRef);
-        });
-      }),
-      getDeviceSettingMark: createCommand(({ commands: commands2 }, name, defaultRef) => {
-        const selectionRef = commands2.getMarks(name);
-        const deviceRef = commands2.getDevice();
-        return computed(() => {
-          for (const attrs of unref(selectionRef)) {
-            const value = attrs[unref(deviceRef)];
-            if (value)
-              return value;
-          }
-          return unref(defaultRef);
-        });
-      }),
-      removeAllMarks: createCommand(({ state, commands: commands2 }) => {
-        const { tr, doc: doc2 } = state;
-        const { from: from2, to } = tr.selection;
-        doc2.nodesBetween(from2, to, (node, position) => {
-          for (const mark of node.marks) {
-            commands2._removeNodeMark({ tr, node, position, mark });
-          }
-        });
-      }),
-      removeMarks: createCommand(({ state, commands: commands2 }, marks) => {
-        const { tr, doc: doc2 } = state;
-        const { from: from2, to } = tr.selection;
-        doc2.nodesBetween(from2, to, (node, position) => {
-          const removingMarks = node.marks.filter((mark) => marks.includes(mark.type.name));
-          for (const mark of removingMarks) {
-            commands2._removeNodeMark({ tr, node, position, mark });
-          }
-        });
-      }),
-      _removeNodeMark: createCommand((context, { tr, node, position, mark }) => {
-        return node.isText ? tr.removeMark(position, position + node.nodeSize, mark) : tr.step(new RemoveNodeMarkStep(position, mark));
-      })
-    };
-  }
-});
-const TextProcessor = Extension.create({
-  name: "text_processor",
-  addCommands() {
-    return {
-      getSelectedText: createCommand(({ state }) => {
-        const { from: from2, to } = state.selection;
-        return state.doc.textBetween(from2, to, " ");
-      }),
-      transformText: createCommand(({ state }, transform) => {
-        const { $from, $to } = state.tr.selection;
-        if ($from.pos === $to.pos)
-          return;
-        state.doc.nodesBetween($from.pos, $to.pos, (node, position) => {
-          if (!node.isText)
-            return;
-          const textPosition = resolveTextPosition($from, $to, node, position);
-          const substringFrom = Math.max(0, $from.pos - position);
-          const substringTo = Math.max(0, $to.pos - position);
-          const updatedText = transform({
-            text: node.textContent.substring(substringFrom, substringTo)
-          });
-          const updatedNode = state.schema.text(updatedText, node.marks);
-          state.tr.replaceWith(textPosition.from, textPosition.to, updatedNode);
-        });
-      })
-    };
+_buildDecorations = new WeakSet();
+buildDecorations_fn = function({ doc: doc2 }) {
+  const decorations = [];
+  if (!this.editor.isEditable)
+    return null;
+  if (doc2.childCount > 1)
+    return;
+  doc2.descendants((node, pos) => {
+    if (!node.childCount) {
+      const decoration = Decoration.node(pos, pos + node.nodeSize, {
+        class: "zw-wysiwyg__placeholder",
+        "data-placeholder": "Type your text here..."
+      });
+      decorations.push(decoration);
+    }
+    return false;
+  });
+  return DecorationSet.create(doc2, decorations);
+};
+const ProseMirrorPlugins = Extension.create({
+  name: "prose_mirror_plugins",
+  addProseMirrorPlugins() {
+    return [
+      PastePlugin.create(this.editor),
+      PlaceholderPlugin.create(this.editor)
+    ];
   }
 });
-const SelectionProcessor = Extension.create({
-  name: "selection_processor",
-  addStorage: () => ({
-    selection: null
+const buildCoreExtensions = () => [
+  Document,
+  Paragraph,
+  Heading,
+  Text$1,
+  History,
+  NodeProcessor,
+  TextProcessor,
+  SelectionProcessor,
+  ProseMirrorPlugins
+];
+const FontFamily = Mark.create({
+  name: TextSettings.FONT_FAMILY,
+  group: MarkGroups.SETTINGS,
+  addOptions: () => ({
+    fonts: []
+  }),
+  addAttributes: () => ({
+    value: { required: true }
   }),
   addCommands() {
     return {
-      storeSelection: createCommand(({ state }) => {
-        this.storage.selection = state.selection;
+      applyFontFamily: createCommand(({ commands: commands2 }, value) => {
+        commands2.applyMark(this.name, { value });
+        const font = commands2.findFontByName(value);
+        let fontWeight = unref(commands2.getFontWeight());
+        if (!font.isWeightSupported(fontWeight)) {
+          fontWeight = font.findClosestWeight(fontWeight);
+          commands2.applyFontWeight(fontWeight);
+        }
+        if (!font.isItalicSupported(fontWeight)) {
+          commands2.removeItalic();
+        }
       }),
-      restoreSelection: createCommand(({ commands: commands2 }) => {
-        this.storage.selection && commands2.setTextSelection(this.storage.selection);
+      getFont: createCommand(({ commands: commands2 }) => {
+        const defaultPreset = unref(this.options.defaultPreset);
+        const defaultFont = commands2.findFontByName(defaultPreset.common.font_family);
+        const fontFamily = commands2.getFontFamily();
+        return computed(() => commands2.findFontByName(unref(fontFamily)) || defaultFont);
       }),
-      expandSelection: createCommand(({ tr, commands: commands2 }, predicate) => {
-        let from2 = tr.selection.from;
-        let to = tr.selection.to;
-        tr.doc.nodesBetween(from2, to, (node, position, parent) => {
-          if (predicate({ node, parent })) {
-            const offset2 = node.isText ? 0 : resolvePositionOffset(tr.doc, position);
-            from2 = Math.min(from2, position + offset2);
-            to = Math.max(to, position + node.nodeSize - offset2);
-          }
-        });
-        commands2.setTextSelection({ from: from2, to });
+      findFontByName: createCommand((_, name) => {
+        return this.options.fonts.find((font) => font.name === name);
       }),
-      expandSelectionToBlock: createCommand(({ commands: commands2 }) => {
-        commands2.expandSelection(({ parent }) => parent.type.name === NodeTypes.DOCUMENT);
+      getFontFamily: createCommand(({ commands: commands2 }) => {
+        return commands2.getCommonSettingMark(this.name, commands2.getDefaultFontFamily());
+      }),
+      getDefaultFontFamily: createCommand(({ commands: commands2 }) => {
+        const preset = commands2.getPreset();
+        return computed(() => unref(preset).common.font_family);
       })
     };
-  }
-});
-const Document$1 = Node.create({
-  name: "doc",
-  topNode: true,
-  content: "block+"
-});
-const Document = Document$1.extend({
-  marks: MarkGroups.SETTINGS
-});
-const Paragraph$1 = Node.create({
-  name: "paragraph",
-  priority: 1e3,
-  addOptions() {
-    return {
-      HTMLAttributes: {}
-    };
   },
-  group: "block",
-  content: "inline*",
   parseHTML() {
+    const getAttrs = (input) => ({ value: input.replace(/["']/g, "") });
     return [
-      { tag: "p" }
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return ["p", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-  },
-  addCommands() {
-    return {
-      setParagraph: () => ({ commands: commands2 }) => {
-        return commands2.setNode(this.name);
+      {
+        style: "--zw-font-family",
+        getAttrs
+      },
+      {
+        style: "font-family",
+        getAttrs
       }
-    };
+    ];
   },
-  addKeyboardShortcuts() {
-    return {
-      "Mod-Alt-0": () => this.editor.commands.setParagraph()
-    };
+  renderHTML({ HTMLAttributes: attrs }) {
+    const font_family = attrs.value ? `"${attrs.value}"` : null;
+    return renderMark({ font_family });
   }
 });
-const Paragraph = Paragraph$1.extend({
-  marks: MarkGroups.ALL,
-  addOptions: () => ({
-    HTMLAttributes: { class: "zw-style" }
-  })
-});
-const Heading$1 = Node.create({
-  name: "heading",
-  addOptions() {
-    return {
-      levels: [1, 2, 3, 4, 5, 6],
-      HTMLAttributes: {}
-    };
+const StylePreset = Extension.create({
+  name: TextSettings.STYLE_PRESET,
+  addGlobalAttributes() {
+    return [
+      {
+        types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+        attributes: {
+          preset: {
+            isRequired: false,
+            default: { id: this.options.defaultId },
+            parseHTML: (element) => {
+              const presets = unref(this.options.presets);
+              if (element.parentElement.tagName === "LI")
+                return null;
+              for (const { id: id2, node, fallbackClass } of presets) {
+                if (fallbackClass && element.classList.contains(fallbackClass)) {
+                  return { id: id2 };
+                }
+                const presetSelector = this.options.styleRenderer.makePresetCssClass({ id: id2 });
+                if (element.matches(presetSelector))
+                  return { id: id2 };
+                if (element.tagName === `H${node == null ? void 0 : node.level}`)
+                  return { id: id2 };
+              }
+              return element.tagName === "P" ? { id: this.options.defaultId } : null;
+            },
+            renderHTML: (attrs) => {
+              if (!attrs.preset)
+                return null;
+              return { class: this.options.styleRenderer.makePresetHtmlClass(attrs.preset) };
+            }
+          }
+        }
+      }
+    ];
   },
-  content: "inline*",
-  group: "block",
-  defining: true,
-  addAttributes() {
-    return {
-      level: {
-        default: 1,
-        rendered: false
+  addCommands() {
+    function findPresetById(presets, id2) {
+      return presets.find((preset) => id2 === preset.id);
+    }
+    function mergeSettings(source, target) {
+      const settings = {};
+      for (const name of Object.keys(source)) {
+        const sourceValue = source[name];
+        const targetValue = target[name];
+        const isInherit = !targetValue || targetValue.toLowerCase() === "inherit";
+        settings[name] = isInherit ? sourceValue : targetValue;
       }
+      return settings;
+    }
+    return {
+      getPresetList: createCommand(() => computed(() => {
+        return this.options.presets.filter((preset) => !preset.hidden);
+      })),
+      getPreset: createCommand(({ commands: commands2 }) => {
+        const selectionRef = commands2.getBlockAttributes("preset", { id: this.options.defaultId });
+        const presetsRef = commands2.getPresetList();
+        const isLinkRef = commands2.isLink();
+        const linkPresetRef = commands2.getLinkPreset();
+        return computed(() => {
+          const preset = findPresetById(unref(presetsRef), unref(selectionRef).id);
+          if (!unref(isLinkRef))
+            return preset;
+          const linkPreset = unref(linkPresetRef);
+          return {
+            id: preset.id,
+            common: mergeSettings(preset.common, linkPreset.common),
+            mobile: mergeSettings(preset.mobile, linkPreset.mobile),
+            tablet: mergeSettings(preset.tablet, linkPreset.tablet),
+            desktop: mergeSettings(preset.desktop, linkPreset.desktop)
+          };
+        });
+      }),
+      applyPreset: createCommand(({ commands: commands2, chain }, presetId) => {
+        var _a, _b;
+        const presets = unref(commands2.getPresetList());
+        const preset = findPresetById(presets, presetId);
+        const nodeType = (_b = (_a = preset.node) == null ? void 0 : _a.type) != null ? _b : NodeTypes.PARAGRAPH;
+        const attrs = {
+          preset: { id: presetId }
+        };
+        if (preset.node) {
+          attrs.level = preset.node.level;
+        }
+        for (const textAttribute of TextSettings.attributes) {
+          attrs[textAttribute] = unref(commands2.getBlockAttributes(textAttribute));
+        }
+        chain().removeList().setNode(nodeType, attrs).run();
+      }),
+      applyDefaultPreset: createCommand(({ commands: commands2 }) => {
+        commands2.applyPreset(this.options.defaultId);
+      }),
+      removePreset: createCommand(({ commands: commands2 }) => {
+        commands2.setNode(NodeTypes.PARAGRAPH, { preset: null });
+      }),
+      getPresetCustomization: createCommand(({ editor, commands: commands2 }) => {
+        const state = toRef(editor, "state");
+        return computed(() => {
+          const { selection, doc: doc2 } = unref(state);
+          const { from: from2, to } = selection;
+          return commands2._getSettingCustomization(doc2, from2, to);
+        });
+      }),
+      isSettingCustomized: createCommand(({ commands: commands2 }, name) => {
+        const customization = commands2.getPresetCustomization();
+        const group = TextSettings.attributes.includes(name) ? "attributes" : "marks";
+        return computed(() => {
+          var _a, _b;
+          return (_b = (_a = unref(customization)[group]) == null ? void 0 : _a.includes(name)) != null ? _b : false;
+        });
+      }),
+      getContentCustomization: createCommand(({ editor, commands: commands2 }) => {
+        const state = toRef(editor, "state");
+        return computed(() => {
+          const { doc: doc2 } = unref(state);
+          return commands2._getSettingCustomization(doc2, 0, doc2.content.size);
+        });
+      }),
+      _getSettingCustomization: createCommand((_, doc2, from2, to) => {
+        const marks = /* @__PURE__ */ new Set();
+        const attributes = /* @__PURE__ */ new Set();
+        doc2.nodesBetween(from2, to, (node) => {
+          for (const [name, value] of Object.entries(node.attrs)) {
+            const isSetting = TextSettings.attributes.includes(name);
+            if (isSetting && value)
+              attributes.add(name);
+          }
+          for (const { type } of node.marks) {
+            if (TextSettings.marks.includes(type.name)) {
+              marks.add(type.name);
+            }
+          }
+        });
+        return {
+          attributes: Array.from(attributes),
+          marks: Array.from(marks)
+        };
+      }),
+      removePresetCustomization: createCommand(({ chain }) => {
+        chain().storeSelection().expandSelectionToBlock().removeMarks(TextSettings.marks).resetAttributes(NodeTypes.PARAGRAPH, TextSettings.attributes).resetAttributes(NodeTypes.HEADING, TextSettings.attributes).restoreSelection().run();
+      }),
+      removeFormat: createCommand(({ chain }) => {
+        chain().storeSelection().expandSelectionToBlock().removeAllMarks().applyDefaultPreset().restoreSelection().run();
+      })
     };
   },
-  parseHTML() {
-    return this.options.levels.map((level) => ({
-      tag: `h${level}`,
-      attrs: { level }
-    }));
-  },
-  renderHTML({ node, HTMLAttributes }) {
-    const hasLevel = this.options.levels.includes(node.attrs.level);
-    const level = hasLevel ? node.attrs.level : this.options.levels[0];
-    return [`h${level}`, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-  },
+  onCreate() {
+    this.options.styleRenderer.inject(ContextWindow.head, this.options.presets);
+  }
+});
+const FontWeight = Mark.create({
+  name: TextSettings.FONT_WEIGHT,
+  group: MarkGroups.SETTINGS,
+  addAttributes: () => ({
+    value: { required: true }
+  }),
   addCommands() {
     return {
-      setHeading: (attributes) => ({ commands: commands2 }) => {
-        if (!this.options.levels.includes(attributes.level)) {
-          return false;
-        }
-        return commands2.setNode(this.name, attributes);
-      },
-      toggleHeading: (attributes) => ({ commands: commands2 }) => {
-        if (!this.options.levels.includes(attributes.level)) {
-          return false;
+      applyFontWeight: createCommand(({ commands: commands2 }, value) => {
+        commands2.applyMark(this.name, { value });
+        const font = unref(commands2.getFont());
+        if (!font.isItalicSupported(value)) {
+          commands2.removeItalic();
         }
-        return commands2.toggleNode(this.name, "paragraph", attributes);
-      }
+      }),
+      toggleBold: createCommand(({ commands: commands2 }) => {
+        const currentWeight = unref(commands2.getFontWeight());
+        const currentFont = unref(commands2.getFont());
+        const isBold = Number(currentWeight) >= 600;
+        const wantedWeight = isBold ? "400" : "700";
+        const nextWeight = currentFont.findClosestWeight(wantedWeight);
+        commands2.applyFontWeight(nextWeight);
+      }),
+      getFontWeight: createCommand(({ commands: commands2 }) => {
+        const selectionRef = commands2.getCommonSettingMark(this.name, commands2.getDefaultFontWeight());
+        const fontRef = commands2.getFont();
+        return computed(() => {
+          const weight = unref(selectionRef);
+          const font = unref(fontRef);
+          return font.isWeightSupported(weight) ? weight : font.findClosestWeight(weight);
+        });
+      }),
+      getDefaultFontWeight: createCommand(({ commands: commands2 }) => {
+        const preset = commands2.getPreset();
+        return computed(() => unref(preset).common.font_weight);
+      })
     };
   },
-  addKeyboardShortcuts() {
-    return this.options.levels.reduce((items, level) => ({
-      ...items,
-      ...{
-        [`Mod-Alt-${level}`]: () => this.editor.commands.toggleHeading({ level })
-      }
-    }), {});
-  },
-  addInputRules() {
-    return this.options.levels.map((level) => {
-      return textblockTypeInputRule({
-        find: new RegExp(`^(#{1,${level}})\\s$`),
-        type: this.type,
-        getAttributes: {
-          level
-        }
-      });
-    });
-  }
-});
-const Heading = Heading$1.extend({
-  marks: MarkGroups.ALL,
-  addOptions: () => ({
-    levels: [1, 2, 3, 4],
-    HTMLAttributes: { class: "zw-style" }
-  })
-});
-class ProseMirrorPlugin {
-  static create(editor, options) {
-    const plugin = new this(editor, options || {});
-    return new Plugin({
-      key: new PluginKey(this.name),
-      props: plugin.buildProps()
-    });
-  }
-  constructor(editor, options) {
-    this.options = options;
-    this.editor = editor;
-  }
-  buildProps() {
-    return {};
-  }
-}
-class PastePlugin extends ProseMirrorPlugin {
-  buildProps() {
-    return {
-      transformPastedHTML: this._transformPastedHTML.bind(this),
-      handlePaste: this._handlePaste.bind(this)
+  addKeyboardShortcuts: () => ({
+    "Mod-b": createKeyboardShortcut("toggleBold"),
+    "Mod-B": createKeyboardShortcut("toggleBold")
+  }),
+  parseHTML() {
+    const getAttrs = (value) => {
+      if (value === "bold")
+        return { value: "700" };
+      return Number(value) ? { value } : false;
     };
-  }
-  _transformPastedHTML(html2) {
-    if (html2.includes("data-pm-slice") && html2.includes("zw-style")) {
-      return html2;
-    }
-    const normalizer = ContentNormalizer.build(html2);
-    normalizer.normalizeHTML();
-    this._removeDeprecatedStyles(normalizer);
-    return normalizer.normalizedHTML;
-  }
-  _removeDeprecatedStyles(normalizer) {
-    const elements = normalizer.dom.querySelectorAll('[style*="margin"]');
-    for (const element of Array.from(elements)) {
-      element.style.removeProperty("margin");
-      element.style.removeProperty("margin-top");
-      element.style.removeProperty("margin-right");
-      element.style.removeProperty("margin-bottom");
-      element.style.removeProperty("margin-left");
-    }
-  }
-  _handlePaste(view, _, slice2) {
-    const transaction = this._insertPastedContent(view, slice2).scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste");
-    view.dispatch(transaction);
-    return true;
-  }
-  _insertPastedContent({ state, input }, slice2) {
-    if (!this._isFullBlockSelected(state)) {
-      return state.tr.replaceSelection(slice2);
-    }
-    return state.tr.replaceSelectionWith(slice2.content, input.shiftKey);
-  }
-  _isFullBlockSelected(state) {
-    const blocksSelection = this._expandSelectionToBlocks(state);
-    const isFromMatch = this._isMatchPosition(blocksSelection.from, state.selection.from);
-    const isToMatch = this._isMatchPosition(blocksSelection.to, state.selection.to);
-    return isFromMatch && isToMatch;
-  }
-  _expandSelectionToBlocks({ selection, doc: doc2 }) {
-    let from2 = selection.from;
-    let to = selection.to;
-    doc2.nodesBetween(from2, to, (node, position, parent) => {
-      if (parent.type.name !== NodeTypes.DOCUMENT)
-        return;
-      from2 = Math.min(from2, position + 1);
-      to = Math.max(to, position + node.nodeSize - 1);
-    });
-    return { from: from2, to };
-  }
-  _isMatchPosition(position1, position2) {
-    return Math.abs(position1 - position2) < 5;
-  }
-}
-class PlaceholderPlugin extends ProseMirrorPlugin {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _buildDecorations);
-  }
-  buildProps() {
-    return { decorations: __privateMethod(this, _buildDecorations, buildDecorations_fn).bind(this) };
-  }
-}
-_buildDecorations = new WeakSet();
-buildDecorations_fn = function({ doc: doc2 }) {
-  const decorations = [];
-  if (!this.editor.isEditable)
-    return null;
-  if (doc2.childCount > 1)
-    return;
-  doc2.descendants((node, pos) => {
-    if (!node.childCount) {
-      const decoration = Decoration.node(pos, pos + node.nodeSize, {
-        class: "zw-wysiwyg__placeholder",
-        "data-placeholder": "Type your text here..."
-      });
-      decorations.push(decoration);
-    }
-    return false;
-  });
-  return DecorationSet.create(doc2, decorations);
-};
-const ProseMirrorPlugins = Extension.create({
-  name: "prose_mirror_plugins",
-  addProseMirrorPlugins() {
     return [
-      PastePlugin.create(this.editor),
-      PlaceholderPlugin.create(this.editor)
+      {
+        style: "--zw-font-weight",
+        getAttrs
+      },
+      {
+        style: "font-weight",
+        getAttrs
+      },
+      {
+        tag: "b",
+        attrs: { value: "700" }
+      },
+      {
+        tag: "strong",
+        attrs: { value: "700" }
+      }
     ];
+  },
+  renderHTML({ HTMLAttributes: attrs }) {
+    return renderMark({ font_weight: attrs.value });
   }
 });
-const buildCoreExtensions = () => [
-  Document,
-  Paragraph,
-  Heading,
-  Text$1,
-  History,
-  NodeProcessor,
-  TextProcessor,
-  SelectionProcessor,
-  ProseMirrorPlugins
-];
 const FontSize = Mark.create({
   name: TextSettings.FONT_SIZE,
   group: MarkGroups.SETTINGS,
@@ -16231,9 +16205,9 @@ const Alignment = Extension.create({
             if (textAlign) {
               return { desktop: textAlign, tablet: textAlign, mobile: textAlign };
             }
-            const mobile = style2.getPropertyValue("--zw-text-align-mobile") || null;
-            const tablet = style2.getPropertyValue("--zw-text-align-tablet") || null;
-            const desktop = style2.getPropertyValue("--zw-text-align-desktop") || null;
+            const mobile = style2.getPropertyValue("--zw-alignment-mobile") || null;
+            const tablet = style2.getPropertyValue("--zw-alignment-tablet") || null;
+            const desktop = style2.getPropertyValue("--zw-alignment-desktop") || null;
             if (!mobile && !tablet && !desktop)
               return null;
             return { desktop, tablet, mobile };
@@ -16242,9 +16216,9 @@ const Alignment = Extension.create({
             if (!attrs.alignment)
               return null;
             return renderInlineSetting({
-              text_align_mobile: attrs.alignment.mobile,
-              text_align_tablet: attrs.alignment.tablet,
-              text_align_desktop: attrs.alignment.desktop
+              alignment_mobile: attrs.alignment.mobile,
+              alignment_tablet: attrs.alignment.tablet,
+              alignment_desktop: attrs.alignment.desktop
             });
           }
         }
@@ -17675,8 +17649,11 @@ function buildExtensions(options) {
     StylePreset.configure({
       presets: options.presetsRef,
       defaultId: options.defaultPresetId,
-      baseClass: options.basePresetClass,
-      makeVariable: options.makePresetVariable
+      styleRenderer: new StylePresetRenderer({
+        baseClass: options.basePresetClass,
+        makeVariable: options.makePresetVariable,
+        linkPresetId: options.linkPresetId
+      })
     }),
     List.configure({
       baseClass: options.baseListClass,
@@ -19162,6 +19139,62 @@ const _HtmlToJsonParser = class {
 };
 let HtmlToJsonParser = _HtmlToJsonParser;
 _contentSerializer = new WeakMap();
+class StylePresetRenderer {
+  constructor({ baseClass, makeVariable, linkPresetId }) {
+    __privateAdd(this, _makeInternalVariableName);
+    __privateAdd(this, _baseClass, void 0);
+    __privateAdd(this, _makeVariable, void 0);
+    __privateAdd(this, _linkPresetId, void 0);
+    __privateSet(this, _baseClass, baseClass);
+    __privateSet(this, _makeVariable, makeVariable);
+    __privateSet(this, _linkPresetId, linkPresetId);
+  }
+  inject(hostEl, presets) {
+    let styleEl = hostEl.querySelector("[data-zw-styles]");
+    if (styleEl)
+      return;
+    styleEl = ContextWindow.document.createElement("style");
+    styleEl.dataset.zwStyles = "";
+    styleEl.innerHTML = this.render(presets);
+    hostEl.append(styleEl);
+  }
+  render(presets) {
+    let css = "";
+    for (const preset of presets) {
+      const isLink = preset.id === __privateGet(this, _linkPresetId);
+      const className = this.makePresetCssClass(preset);
+      css += ` ${className} {`;
+      for (const device of Devices.values) {
+        for (const setting of Object.keys(preset[device])) {
+          const variable = __privateGet(this, _makeVariable).call(this, { device, preset, property: setting });
+          const internalVariable = __privateMethod(this, _makeInternalVariableName, makeInternalVariableName_fn).call(this, setting, device);
+          css += `${internalVariable}: var(${variable}, inherit);`;
+          if (isLink) {
+            const overrideVariable = internalVariable.replace("preset-", "");
+            css += `${overrideVariable}: var(${internalVariable});`;
+          }
+        }
+      }
+      css += "}";
+    }
+    return css;
+  }
+  makePresetHtmlClass(preset) {
+    return __privateGet(this, _baseClass) + preset.id;
+  }
+  makePresetCssClass(preset) {
+    return this.makePresetHtmlClass(preset).split(" ").map((part) => `.${part}`).join("");
+  }
+}
+_baseClass = new WeakMap();
+_makeVariable = new WeakMap();
+_linkPresetId = new WeakMap();
+_makeInternalVariableName = new WeakSet();
+makeInternalVariableName_fn = function(setting, device) {
+  const property = setting === "color" ? "font-color" : setting.replace(/_/i, "-");
+  const prefix = device === Devices.COMMON ? "" : `-${device}`;
+  return `--zw-preset-${property}${prefix}`;
+};
 function convertFontSize(value, wrapperEl) {
   if (!value.includes("em"))
     return parseInt(value);
@@ -25008,7 +25041,7 @@ var __component__$v = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$v,
   false,
   __vue2_injectStyles$v,
-  "eeca926a",
+  "bb5c4efe",
   null,
   null
 );
@@ -25642,7 +25675,7 @@ var __component__$o = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$o,
   false,
   __vue2_injectStyles$o,
-  "3739e310",
+  "1f333e30",
   null,
   null
 );
@@ -27874,7 +27907,7 @@ var render = function __render__45() {
   })], 1);
 };
 var staticRenderFns = [];
-const main_css_vue_type_style_index_0_from__2FUsers_2Fmaster_2Fprojects_2FZipifyWysiwyg_2Flib_2FWysiwyg_vue_src_lang = "";
+const main_css_vue_type_style_index_0_from__2FUsers_2Fmaster_2FProjects_2FZipifyWysiwyg_2Flib_2FWysiwyg_vue_src_lang = "";
 const MIN_FONT_SIZE = 5;
 const MAX_FONT_SIZE = 112;
 const __vue2_script = {