@zipify/wysiwyg 2.0.0-9 → 2.0.0

package/dist/wysiwyg.css

@@ -547,20 +547,20 @@
     color: rgb(var(--zw-color-white));
 }
 
-.zw-font-family-control[data-v-2f66bfa6] {
+.zw-font-family-control[data-v-5f8e49dc] {
     width: 96px;
 }
-.zw-font-family-control__option[data-v-2f66bfa6] {
+.zw-font-family-control__option[data-v-5f8e49dc] {
     font-weight: 400;
     font-family: var(--zw-font-family-option);
     width: 150px;
 }
 
-.zw-font-weight-control[data-v-5a87e48e] {
+.zw-font-weight-control[data-v-00378d67] {
     width: 60px;
 }
 
-.zw-font-size-control[data-v-3f8185ea] {
+.zw-font-size-control[data-v-13bfe2fe] {
     width: 72px;
 }
 
@@ -571,17 +571,17 @@
     flex-direction: column;
 }
 
-.zw-line-height-control__modal[data-v-c316d7dc] {
+.zw-line-height-control__modal[data-v-2f58c40f] {
     padding: var(--zw-offset-sm);
 }
-.zw-line-height-control__row[data-v-c316d7dc] {
+.zw-line-height-control__row[data-v-2f58c40f] {
     display: flex;
     align-items: center;
 }
-.zw-line-height-control__range[data-v-c316d7dc] {
+.zw-line-height-control__range[data-v-2f58c40f] {
     width: 156px;
 }
-.zw-line-height-control__field[data-v-c316d7dc] {
+.zw-line-height-control__field[data-v-2f58c40f] {
     width: 64px;
     margin-left: var(--zw-offset-sm);
 }
@@ -743,7 +743,7 @@ $font-height--xs: 1.33;
 $font-height--sm: 1.43;
 $font-height--md: 1.72;
  */
-.zw-wysiwyg__placeholder:first-child:last-child::before {
+.zw-wysiwyg__placeholder::before {
     content: attr(data-placeholder);
     color: rgb(var(--zw-color-n70));
     float: left;

package/dist/wysiwyg.mjs

@@ -26,7 +26,7 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _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, _textBlock, textBlock_fn, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn;
+var _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, _textBlock, textBlock_fn, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn, _buildDecorations, buildDecorations_fn;
 import { computed, ref, watch, inject, onUnmounted, nextTick, provide, onMounted, toRef, unref, reactive } from "vue";
 import { ColorModel, ZipifyColorPicker } from "@zipify/colorpicker";
 function OrderedMap(content) {
@@ -14427,7 +14427,7 @@ const __vite_glob_0_4 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" sty
 const __vite_glob_0_5 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="#fff" stroke="#B3B3B3" d="M4.5 4.5h19v19h-19z"/>\n    <path fill="#3B3B3B" d="M26 20.7a2.51 2.51 0 0 1-5 0c0-1.31 2.5-4.7 2.5-4.7s2.5 3.39 2.5 4.7Z"/>\n    <path fill="#3B3B3B" fill-rule="evenodd" d="M19.64 19.93h-1.715a.75.75 0 0 1-.475-.145.82.82 0 0 1-.268-.359l-.89-2.433h-4.943l-.89 2.433a.78.78 0 0 1-.26.347.73.73 0 0 1-.475.157H8L12.686 8h2.269l4.686 11.93Zm-7.721-4.505h3.803l-1.452-3.968a18.048 18.048 0 0 1-.219-.623c-.08-.24-.158-.5-.235-.78-.077.28-.152.542-.227.784a8.742 8.742 0 0 1-.218.635l-1.452 3.952Z" clip-rule="evenodd"/>\n</svg>\n';
 const __vite_glob_0_6 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M16.64 19.93h-1.715a.75.75 0 0 1-.475-.145.82.82 0 0 1-.268-.359l-.89-2.433H8.35l-.891 2.433a.78.78 0 0 1-.26.347.73.73 0 0 1-.475.157H5L9.686 8h2.269l4.686 11.93Zm-7.72-4.505h3.803l-1.452-3.968a18.048 18.048 0 0 1-.219-.623c-.08-.24-.158-.5-.235-.78-.077.28-.152.542-.227.784a8.742 8.742 0 0 1-.218.635L8.92 15.425Zm14.968 4.505h-.915a.987.987 0 0 1-.454-.087c-.11-.058-.192-.175-.248-.35l-.181-.603a7.005 7.005 0 0 1-.631.507c-.206.146-.42.269-.64.368a3.26 3.26 0 0 1-.7.222c-.248.05-.523.075-.826.075-.357 0-.687-.049-.99-.145a2.134 2.134 0 0 1-.78-.433 1.967 1.967 0 0 1-.507-.718 2.545 2.545 0 0 1-.181-.998c0-.319.084-.634.251-.945.168-.31.447-.59.838-.841.39-.25.91-.458 1.559-.623.649-.165 1.455-.258 2.417-.28v-.495c0-.567-.12-.986-.359-1.259-.239-.272-.587-.408-1.043-.408-.33 0-.605.039-.825.116a3.17 3.17 0 0 0-.574.26 25.11 25.11 0 0 1-.45.26.912.912 0 0 1-.453.115.59.59 0 0 1-.355-.107.843.843 0 0 1-.239-.264l-.371-.652c.973-.891 2.148-1.337 3.523-1.337.494 0 .936.081 1.324.244.387.162.716.387.985.676.27.289.475.634.615 1.036.14.401.21.841.21 1.32v5.346Zm-3.96-1.271c.21 0 .402-.02.578-.058.176-.038.342-.096.5-.173.156-.077.307-.172.453-.285a4.13 4.13 0 0 0 .441-.4v-1.427c-.594.027-1.09.078-1.489.153a3.967 3.967 0 0 0-.961.284c-.242.116-.414.25-.516.404a.894.894 0 0 0-.152.504c0 .357.106.613.317.767.212.154.489.231.83.231Z" clip-rule="evenodd"/>\n</svg>\n';
 const __vite_glob_0_7 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M22 20.62a2.42 2.42 0 0 1-4.84 0c0-1.25 2.42-4.54 2.42-4.54S22 19.37 22 20.62ZM9.92 15.425l1.452-3.951c.071-.182.145-.394.219-.636.074-.242.149-.503.226-.783a17.223 17.223 0 0 0 .454 1.402l1.452 3.968H9.919Zm5.411 4.199c.226-.795.658-1.684 1.184-2.562L12.955 8h-2.269L6 19.93h1.725a.736.736 0 0 0 .474-.157.792.792 0 0 0 .26-.347l.891-2.434h4.941l.891 2.434c.031.079.097.134.148.198Z" clip-rule="evenodd"/>\n</svg>\n';
-const __vite_glob_0_8 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9 9">\n    <path fill="#FFAB00" d="M0 4.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"/>\n    <path fill="#fff" fill-rule="evenodd" d="M5.063 2.25H3.938v3.375h1.124V2.25Zm-1.125 4.5a.562.562 0 1 1 1.123-.001.562.562 0 0 1-1.123.001Z" clip-rule="evenodd"/>\n</svg>\n';
+const __vite_glob_0_8 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 9 9">\n    <path fill="#FFAB00" d="M0 4.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"/>\n    <path fill="#fff" fill-rule="evenodd" d="M5.063 2.25H3.938v3.375h1.124V2.25Zm-1.125 4.5a.562.562 0 1 1 1.123-.001.562.562 0 0 1-1.123.001Z" clip-rule="evenodd"/>\n</svg>\n';
 const __vite_glob_0_9 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" d="M18 9V7h-7v2h2.64l-1.22 10H10v2h7v-2h-2.83L15.4 9H18Z"/>\n</svg>\n';
 const __vite_glob_0_10 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m5 10 3-3 3 3H9v8h2l-3 3-3-3h2v-8H5Zm8-3h10v2H13V7Zm10 6H13v2h10v-2Zm0 6H13v2h10v-2Z" clip-rule="evenodd"/>\n</svg>\n';
 const __vite_glob_0_11 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">\n    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M12 17.5h-2a3.5 3.5 0 1 1 0-7h2V9h-2a5 5 0 0 0 0 10h2v-1.5Zm6-4.5h-8v2h8v-2Zm-2-4h2a5 5 0 0 1 0 10h-2v-1.5h2a3.5 3.5 0 1 0 0-7h-2V9Z" clip-rule="evenodd"/>\n</svg>\n';
@@ -14450,6 +14450,9 @@ function importIcon(name) {
 function isWysiwygContent(content) {
   return typeof content === "object" && content.__wswg__;
 }
+function unmarkWysiwygContent({ __wswg__, ...content }) {
+  return content;
+}
 function markWysiwygContent(content) {
   return { ...content, __wswg__: true };
 }
@@ -22398,7 +22401,7 @@ const __vue2_script$n = {
       return { "--zw-font-family-option": `"${option.id}"` };
     }
     const currentValue = editor.commands.getFontFamily();
-    const isCustomized = editor.commands.isSettingCustomized("marks", TextSettings.FONT_FAMILY);
+    const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_FAMILY);
     const apply2 = (fontFamily) => {
       recentFontNames.add(fontFamily);
       editor.chain().focus().applyFontFamily(fontFamily).run();
@@ -22419,7 +22422,7 @@ var __component__$n = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$n,
   false,
   __vue2_injectStyles$n,
-  "2f66bfa6",
+  "5f8e49dc",
   null,
   null
 );
@@ -22471,7 +22474,7 @@ const __vue2_script$m = {
     const font = editor.commands.getFont();
     const options = computed(() => unref(font).weights.map((style2) => ({ id: style2 })));
     const currentValue = editor.commands.getFontWeight();
-    const isCustomized = editor.commands.isSettingCustomized("marks", TextSettings.FONT_WEIGHT);
+    const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_WEIGHT);
     const apply2 = (value) => editor.chain().focus().applyFontWeight(value).run();
     return {
       options,
@@ -22488,7 +22491,7 @@ var __component__$m = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$m,
   false,
   __vue2_injectStyles$m,
-  "5a87e48e",
+  "00378d67",
   null,
   null
 );
@@ -22542,7 +22545,7 @@ const __vue2_script$l = {
       return fontSizes.map((size2) => ({ id: size2, title: `${size2}px` }));
     });
     const currentValue = editor.commands.getFontSize();
-    const isCustomized = editor.commands.isSettingCustomized("marks", TextSettings.FONT_SIZE);
+    const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_SIZE);
     const apply2 = (value) => editor.chain().focus().applyFontSize(value).run();
     return {
       options,
@@ -22559,7 +22562,7 @@ var __component__$l = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$l,
   false,
   __vue2_injectStyles$l,
-  "3f8185ea",
+  "13bfe2fe",
   null,
   null
 );
@@ -22643,7 +22646,7 @@ const __vue2_script$k = {
   setup() {
     const editor = inject(InjectionTokens$1.EDITOR);
     const currentValue = editor.commands.getFontColor();
-    const isCustomized = editor.commands.isSettingCustomized("marks", TextSettings.FONT_COLOR);
+    const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_COLOR);
     const apply2 = (color) => editor.chain().applyFontColor(color).run();
     return {
       currentValue,
@@ -22813,7 +22816,7 @@ const __vue2_script$i = {
   setup() {
     const editor = inject(InjectionTokens$1.EDITOR);
     const currentValue = editor.commands.isItalic();
-    const isCustomized = editor.commands.isSettingCustomized("marks", TextSettings.FONT_STYLE);
+    const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_STYLE);
     const isAvailable = editor.commands.isItalicAvailable();
     const apply2 = () => editor.chain().focus().toggleItalic().run();
     return {
@@ -23236,7 +23239,7 @@ const __vue2_script$d = {
   setup(_, { emit }) {
     const editor = inject(InjectionTokens$1.EDITOR);
     const currentValue = editor.commands.getAlignment();
-    const isCustomized = editor.commands.isSettingCustomized("attributes", TextSettings.ALIGNMENT);
+    const isCustomized = editor.commands.isSettingCustomized(TextSettings.ALIGNMENT);
     function apply2(value) {
       editor.chain().focus().applyAlignment(value).run();
       emit("applied");
@@ -23459,7 +23462,7 @@ const __vue2_script$b = {
     const editor = inject(InjectionTokens$1.EDITOR);
     const toggler = useModalToggler({ wrapperRef, modalRef });
     const currentValue = editor.commands.getLineHeight();
-    const isCustomized = editor.commands.isSettingCustomized("attributes", TextSettings.LINE_HEIGHT);
+    const isCustomized = editor.commands.isSettingCustomized(TextSettings.LINE_HEIGHT);
     const apply2 = (value) => editor.commands.applyLineHeight(String(value));
     return {
       wrapperRef,
@@ -23479,7 +23482,7 @@ var __component__$b = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$b,
   false,
   __vue2_injectStyles$b,
-  "c316d7dc",
+  "2f58c40f",
   null,
   null
 );
@@ -24718,8 +24721,9 @@ const StylePreset = Extension.create({
           };
         });
       }),
-      isSettingCustomized: createCommand(({ commands: commands2 }, group, name) => {
+      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;
@@ -25473,13 +25477,38 @@ const ListItem$1 = Node.create({
 const ListItem = ListItem$1.extend({
   name: NodeTypes.LIST_ITEM,
   marks: MarkGroups.SETTINGS,
+  addCommands() {
+    const getItemPosition = ({ selection }) => selection.$cursor.before(selection.$cursor.depth - 1);
+    return {
+      listItemNewline: createCommand(({ commands: commands2, tr }) => {
+        const initialNode = tr.doc.nodeAt(getItemPosition(tr));
+        const isEmptyParagraph = !tr.selection.$cursor.node().textContent;
+        if (isEmptyParagraph)
+          return false;
+        commands2.splitListItem(this.name);
+        const position = getItemPosition(tr);
+        for (const mark of initialNode.marks) {
+          tr.step(new AddNodeMarkStep(position, copyMark(mark)));
+        }
+        return true;
+      })
+    };
+  },
   addOptions: () => ({
     HTMLAttributes: { class: "zw-style" }
   }),
-  addKeyboardShortcuts() {
-    const { Enter } = this.parent();
-    return { Enter };
-  }
+  addKeyboardShortcuts: () => ({
+    Enter: (context) => {
+      var _a;
+      const { state, commands: commands2 } = context.editor;
+      const isListSelected = (_a = state.selection.$cursor) == null ? void 0 : _a.path.some((node) => {
+        var _a2;
+        return ((_a2 = node.type) == null ? void 0 : _a2.name) === NodeTypes.LIST;
+      });
+      if (isListSelected)
+        return commands2.listItemNewline();
+    }
+  })
 });
 const List = Node.create({
   name: NodeTypes.LIST,
@@ -25490,7 +25519,8 @@ const List = Node.create({
     ListItem
   ],
   addOptions: () => ({
-    baseClass: ""
+    baseClass: "",
+    presetClass: ""
   }),
   addAttributes: () => ({
     bullet: {
@@ -25528,10 +25558,12 @@ const List = Node.create({
     ];
   },
   renderHTML({ HTMLAttributes: attrs }) {
+    const classes = [
+      this.options.baseClass + attrs.bullet.type,
+      this.options.presetClass
+    ];
     const isOrdered = ListTypes.ordered.includes(attrs.bullet.type);
-    const tag = isOrdered ? "ol" : "ul";
-    const bulletClass = this.options.baseClass + attrs.bullet.type;
-    return [tag, { class: bulletClass }, 0];
+    return [isOrdered ? "ol" : "ul", { class: classes.join(" ") }, 0];
   },
   addCommands() {
     return {
@@ -26665,128 +26697,43 @@ const Link = Link$1.extend({
     return ["a", linkAttrs, 0];
   }
 });
-const Superscript$1 = Mark.create({
-  name: "superscript",
-  addOptions() {
-    return {
-      HTMLAttributes: {}
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: "sup"
-      },
-      {
-        style: "vertical-align",
-        getAttrs(value) {
-          if (value !== "super") {
-            return false;
-          }
-          return null;
-        }
-      }
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return ["sup", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-  },
-  addCommands() {
-    return {
-      setSuperscript: () => ({ commands: commands2 }) => {
-        return commands2.setMark(this.name);
-      },
-      toggleSuperscript: () => ({ commands: commands2 }) => {
-        return commands2.toggleMark(this.name);
-      },
-      unsetSuperscript: () => ({ commands: commands2 }) => {
-        return commands2.unsetMark(this.name);
-      }
-    };
-  },
-  addKeyboardShortcuts() {
-    return {
-      "Mod-.": () => this.editor.commands.toggleSuperscript()
-    };
-  }
-});
-const Superscript = Superscript$1.extend({
+const Superscript = Mark.create({
   name: TextSettings.SUPERSCRIPT,
-  addKeyboardShortcuts: null,
-  addOptions: () => ({
-    HTMLAttributes: { class: "zw-superscript" }
-  }),
   addCommands() {
-    const { setSuperscript, unsetSuperscript } = this.parent();
     return {
-      applySuperscript: setSuperscript,
-      removeSuperscript: unsetSuperscript,
+      applySuperscript: createCommand(({ commands: commands2 }) => {
+        commands2.setMark(this.name);
+      }),
+      removeSuperscript: createCommand(({ commands: commands2 }) => {
+        commands2.unsetMark(this.name);
+      }),
       toggleSuperscript: createCommand(({ commands: commands2 }) => {
         const isActive2 = unref(commands2.isSuperscript());
-        isActive2 ? commands2.applySuperscript() : commands2.removeSuperscript();
+        isActive2 ? commands2.removeSuperscript() : commands2.applySuperscript();
       }),
       isSuperscript: createCommand(({ commands: commands2 }) => {
         const selectionRef = commands2.getMark(this.name);
         return computed(() => !!unref(selectionRef));
       })
     };
+  },
+  parseHTML() {
+    return [
+      { tag: "sup" },
+      {
+        style: "vertical-align",
+        getAttrs: (value) => value !== "super" ? false : null
+      }
+    ];
+  },
+  renderHTML() {
+    return ["sup", { class: "zw-superscript" }, 0];
   }
 });
 const Text = Node.create({
   name: "text",
   group: "inline"
 });
-const Placeholder = Extension.create({
-  name: "placeholder",
-  addOptions() {
-    return {
-      emptyEditorClass: "is-editor-empty",
-      emptyNodeClass: "is-empty",
-      placeholder: "Write something \u2026",
-      showOnlyWhenEditable: true,
-      showOnlyCurrent: true,
-      includeChildren: false
-    };
-  },
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        props: {
-          decorations: ({ doc: doc2, selection }) => {
-            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
-            const { anchor } = selection;
-            const decorations = [];
-            if (!active) {
-              return null;
-            }
-            doc2.descendants((node, pos) => {
-              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
-              const isEmpty = !node.isLeaf && !node.childCount;
-              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
-                const classes = [this.options.emptyNodeClass];
-                if (this.editor.isEmpty) {
-                  classes.push(this.options.emptyEditorClass);
-                }
-                const decoration = Decoration.node(pos, pos + node.nodeSize, {
-                  class: classes.join(" "),
-                  "data-placeholder": typeof this.options.placeholder === "function" ? this.options.placeholder({
-                    editor: this.editor,
-                    node,
-                    pos,
-                    hasAnchor
-                  }) : this.options.placeholder
-                });
-                decorations.push(decoration);
-              }
-              return this.options.includeChildren;
-            });
-            return DecorationSet.create(doc2, decorations);
-          }
-        }
-      })
-    ];
-  }
-});
 var GOOD_LEAF_SIZE = 200;
 var RopeSequence = function RopeSequence2() {
 };
@@ -27453,9 +27400,6 @@ const NodeProcessor = Extension.create({
           }
         });
       }),
-      removeMark: createCommand(({ commands: commands2, state }, node, position, mark) => {
-        commands2._removeNodeMark({ tr: state.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));
       })
@@ -27517,82 +27461,6 @@ const SelectionProcessor = Extension.create({
     };
   }
 });
-class ProseMirrorPlugin {
-  static create(options) {
-    const plugin = new this(options || {});
-    return new Plugin({
-      key: new PluginKey(this.name),
-      props: plugin.buildProps()
-    });
-  }
-  constructor(options) {
-    this.options = options;
-  }
-  buildProps() {
-    return {};
-  }
-}
-class PastePlugin extends ProseMirrorPlugin {
-  buildProps() {
-    return {
-      transformPastedHTML: this._transformPastedHTML.bind(this),
-      handlePaste: this._handlePaste.bind(this)
-    };
-  }
-  _transformPastedHTML(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;
-  }
-}
-const CopyPasteProcessor = Extension.create({
-  name: "copy_paste_processor",
-  addProseMirrorPlugins() {
-    return [PastePlugin.create()];
-  }
-});
 const Document$1 = Node.create({
   name: "doc",
   topNode: true,
@@ -27711,12 +27579,119 @@ const Heading = Heading$1.extend({
     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)
+    };
+  }
+  _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)
+    ];
+  }
+});
 const buildCoreExtensions = () => [
   Document,
-  Placeholder.configure({
-    placeholder: "Type your text here...",
-    emptyNodeClass: "zw-wysiwyg__placeholder"
-  }),
   Paragraph,
   Heading,
   Text,
@@ -27724,7 +27699,7 @@ const buildCoreExtensions = () => [
   NodeProcessor,
   TextProcessor,
   SelectionProcessor,
-  CopyPasteProcessor
+  ProseMirrorPlugins
 ];
 const Margin = Extension.create({
   name: TextSettings.MARGIN,
@@ -27769,7 +27744,8 @@ function buildExtensions(options) {
       makeVariable: options.makePresetVariable
     }),
     List.configure({
-      baseClass: options.baseListClass
+      baseClass: options.baseListClass,
+      presetClass: options.basePresetClass + options.defaultPresetId
     }),
     DeviceManager.configure({
       device: options.deviceRef
@@ -28032,5 +28008,7 @@ export {
   NodeTypes,
   TextSettings,
   Wysiwyg,
-  isWysiwygContent
+  isWysiwygContent,
+  markWysiwygContent,
+  unmarkWysiwygContent
 };

package/lib/assets/icons/indicator.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9 9">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 9 9">
     <path fill="#FFAB00" d="M0 4.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"/>
     <path fill="#fff" fill-rule="evenodd" d="M5.063 2.25H3.938v3.375h1.124V2.25Zm-1.125 4.5a.562.562 0 1 1 1.123-.001.562.562 0 0 1-1.123.001Z" clip-rule="evenodd"/>
 </svg>