@wix/ricos 11.20.0 → 11.20.2

package/dist/cjs/ricos-common-plugins/decoration-plugins/indentation-styling.js

@@ -63,7 +63,7 @@ const buildIndentationStylingDecorations = (doc) => {
     const marker = (0, import_wix_rich_content_common.getListSymbol)(normalizedVisualIndent, node.type.name);
     const isCheckboxList = node.type.name === import_v1.Node_Type.CHECKBOX_LIST;
     const marginStart = `margin-inline-start: ${(0, import_wix_rich_content_common.normalizeOffset)(node.attrs.offset || 0) * 2 + 1.5}em`;
-    const style = isCheckboxList ? `${marginStart};` : `list-style-type: ${marker}; ${marginStart};`;
+    const style = isCheckboxList ? marginStart : `list-style-type: ${marker}; ${marginStart}`;
     node.forEach((childNode, childPos) => {
       const childPosInDoc = childPos + pos + 1;
       decorations.push(

package/dist/cjs/ricos-common-plugins/decoration-plugins/indentation-styling.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ricos-common-plugins/decoration-plugins/indentation-styling.ts"],
-  "sourcesContent": ["import { Node_Type } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport type { Node } from './../../tiptap/pm/model.js';\nimport { Plugin, PluginKey } from './../../tiptap/pm/state.js';\nimport { Decoration, DecorationSet } from './../../tiptap/pm/view.js';\nimport { getListSymbol, normalizeOffset } from './../../wix-rich-content-common/index.js';\n\nimport { getListItemsWithVisibleIndentation } from '../list-item/commands/commons.js';\nimport { isInlineTextOnly } from '../transaction-predicates/is-inline-text-only.js';\nimport { onlyChangesUnrelatedAttrs } from '../transaction-predicates/only-changes-unrelated-attrs.js';\n\n// Reads `attrs.offset` on LIST_ITEM (and walks list nesting structure).\nconst RELEVANT_ATTRS: ReadonlySet<string> = new Set(['offset']);\n\n/**\n * Adds inline styling and an aria-level attribute to list items based on\n * their nesting level and parents' offset sum.\n *\n * Output depends on list nesting + `offset` attrs. Inline-text-only edits\n * cannot change list structure, offsets, or node types, so the cached set\n * can be remapped instead of rebuilt on every keystroke.\n */\nexport const createIndentationStylingDecorationPlugin = () => {\n  const key = new PluginKey<DecorationSet>('indentation-styling');\n\n  return new Plugin<DecorationSet>({\n    key,\n    state: {\n      init: (_config, state) => buildIndentationStylingDecorations(state.doc),\n      apply: (tr, prev) => {\n        if (!tr.docChanged) {\n          return prev;\n        }\n        if (isInlineTextOnly(tr)) {\n          return prev.map(tr.mapping, tr.doc);\n        }\n        if (onlyChangesUnrelatedAttrs(tr, RELEVANT_ATTRS)) {\n          return prev;\n        }\n        return buildIndentationStylingDecorations(tr.doc);\n      },\n    },\n    props: {\n      decorations(state) {\n        return key.getState(state);\n      },\n    },\n  });\n};\n\nconst buildIndentationStylingDecorations = (doc: Node): DecorationSet => {\n  const decorations: Decoration[] = [];\n\n  const listItemsWithVisualIndent = getListItemsWithVisibleIndentation(doc);\n\n  listItemsWithVisualIndent.forEach(({ node, pos, visibleIndentation }) => {\n    const normalizedVisualIndent = normalizeOffset(visibleIndentation);\n    const marker = getListSymbol(normalizedVisualIndent, node.type.name as Node_Type);\n    const isCheckboxList = node.type.name === Node_Type.CHECKBOX_LIST;\n\n    const marginStart = `margin-inline-start: ${\n      normalizeOffset(node.attrs.offset || 0) * 2 + 1.5\n    }em`;\n    const style = isCheckboxList\n      ? `${marginStart};`\n      : `list-style-type: ${marker}; ${marginStart};`;\n\n    node.forEach((childNode: Node, childPos: number) => {\n      const childPosInDoc = childPos + pos + 1;\n      decorations.push(\n        Decoration.node(childPosInDoc, childPosInDoc + childNode.nodeSize, {\n          style,\n          'aria-level': `${normalizedVisualIndent + 1}`,\n        })\n      );\n    });\n  });\n\n  return DecorationSet.create(doc, decorations);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA0B;AAE1B,mBAAkC;AAClC,kBAA0C;AAC1C,qCAA+C;AAE/C,qBAAmD;AACnD,iCAAiC;AACjC,0CAA0C;AAG1C,MAAM,iBAAsC,oBAAI,IAAI,CAAC,QAAQ,CAAC;AAUvD,MAAM,2CAA2C,MAAM;AAC5D,QAAM,MAAM,IAAI,uBAAyB,qBAAqB;AAE9D,SAAO,IAAI,oBAAsB;AAAA,IAC/B;AAAA,IACA,OAAO;AAAA,MACL,MAAM,CAAC,SAAS,UAAU,mCAAmC,MAAM,GAAG;AAAA,MACtE,OAAO,CAAC,IAAI,SAAS;AACnB,YAAI,CAAC,GAAG,YAAY;AAClB,iBAAO;AAAA,QACT;AACA,gBAAI,6CAAiB,EAAE,GAAG;AACxB,iBAAO,KAAK,IAAI,GAAG,SAAS,GAAG,GAAG;AAAA,QACpC;AACA,gBAAI,+DAA0B,IAAI,cAAc,GAAG;AACjD,iBAAO;AAAA,QACT;AACA,eAAO,mCAAmC,GAAG,GAAG;AAAA,MAClD;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,YAAY,OAAO;AACjB,eAAO,IAAI,SAAS,KAAK;AAAA,MAC3B;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEA,MAAM,qCAAqC,CAAC,QAA6B;AACvE,QAAM,cAA4B,CAAC;AAEnC,QAAM,gCAA4B,mDAAmC,GAAG;AAExE,4BAA0B,QAAQ,CAAC,EAAE,MAAM,KAAK,mBAAmB,MAAM;AACvE,UAAM,6BAAyB,gDAAgB,kBAAkB;AACjE,UAAM,aAAS,8CAAc,wBAAwB,KAAK,KAAK,IAAiB;AAChF,UAAM,iBAAiB,KAAK,KAAK,SAAS,oBAAU;AAEpD,UAAM,cAAc,4BAClB,gDAAgB,KAAK,MAAM,UAAU,CAAC,IAAI,IAAI,GAChD;AACA,UAAM,QAAQ,iBACV,GAAG,WAAW,MACd,oBAAoB,MAAM,KAAK,WAAW;AAE9C,SAAK,QAAQ,CAAC,WAAiB,aAAqB;AAClD,YAAM,gBAAgB,WAAW,MAAM;AACvC,kBAAY;AAAA,QACV,uBAAW,KAAK,eAAe,gBAAgB,UAAU,UAAU;AAAA,UACjE;AAAA,UACA,cAAc,GAAG,yBAAyB,CAAC;AAAA,QAC7C,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,SAAO,0BAAc,OAAO,KAAK,WAAW;AAC9C;",
+  "sourcesContent": ["import { Node_Type } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport type { Node } from './../../tiptap/pm/model.js';\nimport { Plugin, PluginKey } from './../../tiptap/pm/state.js';\nimport { Decoration, DecorationSet } from './../../tiptap/pm/view.js';\nimport { getListSymbol, normalizeOffset } from './../../wix-rich-content-common/index.js';\n\nimport { getListItemsWithVisibleIndentation } from '../list-item/commands/commons.js';\nimport { isInlineTextOnly } from '../transaction-predicates/is-inline-text-only.js';\nimport { onlyChangesUnrelatedAttrs } from '../transaction-predicates/only-changes-unrelated-attrs.js';\n\n// Reads `attrs.offset` on LIST_ITEM (and walks list nesting structure).\nconst RELEVANT_ATTRS: ReadonlySet<string> = new Set(['offset']);\n\n/**\n * Adds inline styling and an aria-level attribute to list items based on\n * their nesting level and parents' offset sum.\n *\n * Output depends on list nesting + `offset` attrs. Inline-text-only edits\n * cannot change list structure, offsets, or node types, so the cached set\n * can be remapped instead of rebuilt on every keystroke.\n */\nexport const createIndentationStylingDecorationPlugin = () => {\n  const key = new PluginKey<DecorationSet>('indentation-styling');\n\n  return new Plugin<DecorationSet>({\n    key,\n    state: {\n      init: (_config, state) => buildIndentationStylingDecorations(state.doc),\n      apply: (tr, prev) => {\n        if (!tr.docChanged) {\n          return prev;\n        }\n        if (isInlineTextOnly(tr)) {\n          return prev.map(tr.mapping, tr.doc);\n        }\n        if (onlyChangesUnrelatedAttrs(tr, RELEVANT_ATTRS)) {\n          return prev;\n        }\n        return buildIndentationStylingDecorations(tr.doc);\n      },\n    },\n    props: {\n      decorations(state) {\n        return key.getState(state);\n      },\n    },\n  });\n};\n\nconst buildIndentationStylingDecorations = (doc: Node): DecorationSet => {\n  const decorations: Decoration[] = [];\n\n  const listItemsWithVisualIndent = getListItemsWithVisibleIndentation(doc);\n\n  listItemsWithVisualIndent.forEach(({ node, pos, visibleIndentation }) => {\n    const normalizedVisualIndent = normalizeOffset(visibleIndentation);\n    const marker = getListSymbol(normalizedVisualIndent, node.type.name as Node_Type);\n    const isCheckboxList = node.type.name === Node_Type.CHECKBOX_LIST;\n\n    const marginStart = `margin-inline-start: ${\n      normalizeOffset(node.attrs.offset || 0) * 2 + 1.5\n    }em`;\n    // No trailing `;`: ProseMirror joins stacked node-decoration styles with `;`,\n    // and jsdom drops the declaration after a `;;` (e.g. list-item-sizing's font-size).\n    const style = isCheckboxList ? marginStart : `list-style-type: ${marker}; ${marginStart}`;\n\n    node.forEach((childNode: Node, childPos: number) => {\n      const childPosInDoc = childPos + pos + 1;\n      decorations.push(\n        Decoration.node(childPosInDoc, childPosInDoc + childNode.nodeSize, {\n          style,\n          'aria-level': `${normalizedVisualIndent + 1}`,\n        })\n      );\n    });\n  });\n\n  return DecorationSet.create(doc, decorations);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA0B;AAE1B,mBAAkC;AAClC,kBAA0C;AAC1C,qCAA+C;AAE/C,qBAAmD;AACnD,iCAAiC;AACjC,0CAA0C;AAG1C,MAAM,iBAAsC,oBAAI,IAAI,CAAC,QAAQ,CAAC;AAUvD,MAAM,2CAA2C,MAAM;AAC5D,QAAM,MAAM,IAAI,uBAAyB,qBAAqB;AAE9D,SAAO,IAAI,oBAAsB;AAAA,IAC/B;AAAA,IACA,OAAO;AAAA,MACL,MAAM,CAAC,SAAS,UAAU,mCAAmC,MAAM,GAAG;AAAA,MACtE,OAAO,CAAC,IAAI,SAAS;AACnB,YAAI,CAAC,GAAG,YAAY;AAClB,iBAAO;AAAA,QACT;AACA,gBAAI,6CAAiB,EAAE,GAAG;AACxB,iBAAO,KAAK,IAAI,GAAG,SAAS,GAAG,GAAG;AAAA,QACpC;AACA,gBAAI,+DAA0B,IAAI,cAAc,GAAG;AACjD,iBAAO;AAAA,QACT;AACA,eAAO,mCAAmC,GAAG,GAAG;AAAA,MAClD;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,YAAY,OAAO;AACjB,eAAO,IAAI,SAAS,KAAK;AAAA,MAC3B;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEA,MAAM,qCAAqC,CAAC,QAA6B;AACvE,QAAM,cAA4B,CAAC;AAEnC,QAAM,gCAA4B,mDAAmC,GAAG;AAExE,4BAA0B,QAAQ,CAAC,EAAE,MAAM,KAAK,mBAAmB,MAAM;AACvE,UAAM,6BAAyB,gDAAgB,kBAAkB;AACjE,UAAM,aAAS,8CAAc,wBAAwB,KAAK,KAAK,IAAiB;AAChF,UAAM,iBAAiB,KAAK,KAAK,SAAS,oBAAU;AAEpD,UAAM,cAAc,4BAClB,gDAAgB,KAAK,MAAM,UAAU,CAAC,IAAI,IAAI,GAChD;AAGA,UAAM,QAAQ,iBAAiB,cAAc,oBAAoB,MAAM,KAAK,WAAW;AAEvF,SAAK,QAAQ,CAAC,WAAiB,aAAqB;AAClD,YAAM,gBAAgB,WAAW,MAAM;AACvC,kBAAY;AAAA,QACV,uBAAW,KAAK,eAAe,gBAAgB,UAAU,UAAU;AAAA,UACjE;AAAA,UACA,cAAc,GAAG,yBAAyB,CAAC;AAAA,QAC7C,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,SAAO,0BAAc,OAAO,KAAK,WAAW;AAC9C;",
   "names": []
 }

package/dist/cjs/ricos-common-plugins/decoration-plugins/list-item-sizing.js

@@ -22,13 +22,14 @@ __export(list_item_sizing_exports, {
 });
 module.exports = __toCommonJS(list_item_sizing_exports);
 var import_v1 = require("./../../ricos-schema/legacy/wix/rich_content/v1/index.js");
-var import_ricos_types = require("./../../ricos-types/index.js");
+var import_get_px_font_size = require("./../../_shared/get-px-font-size.js");
 var import_get_block_default_font_size = require("./../../_shared/list-checkbox/get-block-default-font-size.js");
 var import_state = require("./../../tiptap/pm/state.js");
 var import_view = require("./../../tiptap/pm/view.js");
+var import_block_font_size = require("../font-size/block-font-size.js");
 var import_header_names = require("../title/header-names.js");
 var import_only_changes_unrelated_attrs = require("../transaction-predicates/only-changes-unrelated-attrs.js");
-const RELEVANT_ATTRS = /* @__PURE__ */ new Set(["level"]);
+const RELEVANT_ATTRS = /* @__PURE__ */ new Set(["level", "fontSize"]);
 const createListItemSizingDecorationPlugin = () => {
   const key = new import_state.PluginKey("list-item-sizing");
   return new import_state.Plugin({
@@ -53,6 +54,12 @@ const createListItemSizingDecorationPlugin = () => {
     }
   });
 };
+const getChildFontSize = (blockNode) => {
+  if (!blockNode) {
+    return 0;
+  }
+  return (blockNode.content.size ? (0, import_block_font_size.toBlockFontSize)(blockNode.firstChild?.marks)?.value : (0, import_get_px_font_size.getPxFontSize)(blockNode.attrs.fontSize)) ?? 0;
+};
 const buildListItemSizingDecorations = (doc) => {
   const decorations = [];
   doc.descendants((node, pos) => {
@@ -64,18 +71,14 @@ const buildListItemSizingDecorations = (doc) => {
     }
     const firstChildOfListItem = node.firstChild;
     const headingLevel = firstChildOfListItem?.type.name === import_v1.Node_Type.HEADING ? firstChildOfListItem?.attrs.level || 1 : void 0;
-    const childFontSize = Number(
-      firstChildOfListItem?.firstChild?.marks.find((mark) => mark.type.name === import_ricos_types.Mark_Type.FONT_SIZE)?.attrs.value
-    );
+    const childFontSize = getChildFontSize(firstChildOfListItem);
     if (childFontSize) {
+      const childFontFit = childFontSize < (0, import_get_block_default_font_size.getBlockDefaultFontSize)(headingLevel);
       decorations.push(
         import_view.Decoration.node(pos, pos + node.nodeSize, {
-          style: `font-size: ${childFontSize}px;`,
-          // When the chosen font is smaller than the block's own default, the
-          // block's strut keeps the line (and marker) oversized; flag the item
-          // so the child paragraph/heading shrinks its font to match — see
-          // `list-checkbox.scss`.
-          ...childFontSize < (0, import_get_block_default_font_size.getBlockDefaultFontSize)(headingLevel) ? { "data-child-font-fit": "true" } : {}
+          // No trailing `;` — see indentation-styling.ts.
+          style: `font-size: ${childFontSize}px`,
+          ...childFontFit ? { "data-child-font-fit": "true" } : {}
         })
       );
     }

package/dist/cjs/ricos-common-plugins/decoration-plugins/list-item-sizing.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ricos-common-plugins/decoration-plugins/list-item-sizing.ts"],
-  "sourcesContent": ["import { Node_Type } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport { Mark_Type } from './../../ricos-types/index.js';\nimport { getBlockDefaultFontSize } from './../../_shared/list-checkbox/get-block-default-font-size.js';\nimport type { Node as ProseMirrorNode } from './../../tiptap/pm/model.js';\nimport { Plugin, PluginKey } from './../../tiptap/pm/state.js';\nimport { Decoration, DecorationSet } from './../../tiptap/pm/view.js';\n\nimport type { Level } from '../title/extension.js';\nimport { HEADER_NAMES } from '../title/header-names.js';\nimport { onlyChangesUnrelatedAttrs } from '../transaction-predicates/only-changes-unrelated-attrs.js';\n\n// Reads heading `attrs.level` on the list item's first child. Marks (font-\n// size) come through `Add/RemoveMarkStep` — non-attr — and correctly\n// defeat the predicate without needing to be listed here.\nconst RELEVANT_ATTRS: ReadonlySet<string> = new Set(['level']);\n\n/**\n * Adds, depending on the list item's first child:\n * - a font-size (so the list marker and paddings size with the first text node),\n * - a `data-child-font-fit` flag when that font-size is smaller than the block's\n *   own default, so the child paragraph/heading shrinks its font to match (see\n *   `list-checkbox.scss`),\n * - and/or a `data-heading-level` attribute (so a heading-first list item gets\n *   heading styles).\n *\n * No `reuseWhen`: the decoration value depends on the first child's first\n * text node's marks / type, which inline-text edits can change (pasting\n * marked text in front of an unmarked first character, typing that changes\n * the first mark, etc.). Cache is still used across selection-only\n * transactions.\n */\nexport const createListItemSizingDecorationPlugin = () => {\n  const key = new PluginKey<DecorationSet>('list-item-sizing');\n\n  return new Plugin<DecorationSet>({\n    key,\n    state: {\n      init: (_config, state) => buildListItemSizingDecorations(state.doc),\n      // No `reuseWhen` predicate — see plugin docstring for why.\n      apply: (tr, prev) => {\n        if (!tr.docChanged) {\n          return prev;\n        }\n        if (onlyChangesUnrelatedAttrs(tr, RELEVANT_ATTRS)) {\n          return prev;\n        }\n        return buildListItemSizingDecorations(tr.doc);\n      },\n    },\n    props: {\n      decorations(state) {\n        return key.getState(state);\n      },\n    },\n  });\n};\n\nconst buildListItemSizingDecorations = (doc: ProseMirrorNode): DecorationSet => {\n  const decorations: Decoration[] = [];\n\n  doc.descendants((node, pos) => {\n    // Text blocks (paragraph, heading, blockquote) cannot contain list items,\n    // so skipping their subtree avoids visiting every text/mark node.\n    // We cannot prune at LIST_ITEM because it may contain nested lists via\n    // `listItemSecondChildContent`, and those nested list items still need\n    // decorations.\n    if (node.isTextblock) {\n      return false;\n    }\n\n    if (node.type.name !== Node_Type.LIST_ITEM) {\n      return;\n    }\n\n    const firstChildOfListItem = node.firstChild;\n    const headingLevel: Level | undefined =\n      firstChildOfListItem?.type.name === Node_Type.HEADING\n        ? firstChildOfListItem?.attrs.level || 1\n        : undefined;\n\n    // If the list item's child's (paragraph's/heading's) first text node has\n    // a specified font-size, apply it to the list item as a decoration so the\n    // list marker matches the text font-size.\n    const childFontSize = Number(\n      firstChildOfListItem?.firstChild?.marks.find(mark => mark.type.name === Mark_Type.FONT_SIZE)\n        ?.attrs.value\n    );\n    if (childFontSize) {\n      decorations.push(\n        Decoration.node(pos, pos + node.nodeSize, {\n          style: `font-size: ${childFontSize}px;`,\n          // When the chosen font is smaller than the block's own default, the\n          // block's strut keeps the line (and marker) oversized; flag the item\n          // so the child paragraph/heading shrinks its font to match — see\n          // `list-checkbox.scss`.\n          ...(childFontSize < getBlockDefaultFontSize(headingLevel)\n            ? { 'data-child-font-fit': 'true' }\n            : {}),\n        })\n      );\n    }\n\n    if (headingLevel !== undefined) {\n      decorations.push(\n        Decoration.node(pos, pos + node.nodeSize, {\n          'data-heading-level': `header${HEADER_NAMES[headingLevel - 1]}`,\n        })\n      );\n    }\n  });\n\n  return DecorationSet.create(doc, decorations);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA0B;AAC1B,yBAA0B;AAC1B,yCAAwC;AAExC,mBAAkC;AAClC,kBAA0C;AAG1C,0BAA6B;AAC7B,0CAA0C;AAK1C,MAAM,iBAAsC,oBAAI,IAAI,CAAC,OAAO,CAAC;AAiBtD,MAAM,uCAAuC,MAAM;AACxD,QAAM,MAAM,IAAI,uBAAyB,kBAAkB;AAE3D,SAAO,IAAI,oBAAsB;AAAA,IAC/B;AAAA,IACA,OAAO;AAAA,MACL,MAAM,CAAC,SAAS,UAAU,+BAA+B,MAAM,GAAG;AAAA;AAAA,MAElE,OAAO,CAAC,IAAI,SAAS;AACnB,YAAI,CAAC,GAAG,YAAY;AAClB,iBAAO;AAAA,QACT;AACA,gBAAI,+DAA0B,IAAI,cAAc,GAAG;AACjD,iBAAO;AAAA,QACT;AACA,eAAO,+BAA+B,GAAG,GAAG;AAAA,MAC9C;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,YAAY,OAAO;AACjB,eAAO,IAAI,SAAS,KAAK;AAAA,MAC3B;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEA,MAAM,iCAAiC,CAAC,QAAwC;AAC9E,QAAM,cAA4B,CAAC;AAEnC,MAAI,YAAY,CAAC,MAAM,QAAQ;AAM7B,QAAI,KAAK,aAAa;AACpB,aAAO;AAAA,IACT;AAEA,QAAI,KAAK,KAAK,SAAS,oBAAU,WAAW;AAC1C;AAAA,IACF;AAEA,UAAM,uBAAuB,KAAK;AAClC,UAAM,eACJ,sBAAsB,KAAK,SAAS,oBAAU,UAC1C,sBAAsB,MAAM,SAAS,IACrC;AAKN,UAAM,gBAAgB;AAAA,MACpB,sBAAsB,YAAY,MAAM,KAAK,UAAQ,KAAK,KAAK,SAAS,6BAAU,SAAS,GACvF,MAAM;AAAA,IACZ;AACA,QAAI,eAAe;AACjB,kBAAY;AAAA,QACV,uBAAW,KAAK,KAAK,MAAM,KAAK,UAAU;AAAA,UACxC,OAAO,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,UAKlC,GAAI,oBAAgB,4DAAwB,YAAY,IACpD,EAAE,uBAAuB,OAAO,IAChC,CAAC;AAAA,QACP,CAAC;AAAA,MACH;AAAA,IACF;AAEA,QAAI,iBAAiB,QAAW;AAC9B,kBAAY;AAAA,QACV,uBAAW,KAAK,KAAK,MAAM,KAAK,UAAU;AAAA,UACxC,sBAAsB,SAAS,iCAAa,eAAe,CAAC,CAAC;AAAA,QAC/D,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO,0BAAc,OAAO,KAAK,WAAW;AAC9C;",
+  "sourcesContent": ["import { Node_Type } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport { getPxFontSize } from './../../_shared/get-px-font-size.js';\nimport { getBlockDefaultFontSize } from './../../_shared/list-checkbox/get-block-default-font-size.js';\nimport type { Node as ProseMirrorNode } from './../../tiptap/pm/model.js';\nimport { Plugin, PluginKey } from './../../tiptap/pm/state.js';\nimport { Decoration, DecorationSet } from './../../tiptap/pm/view.js';\n\nimport { toBlockFontSize } from '../font-size/block-font-size.js';\nimport type { Level } from '../title/extension.js';\nimport { HEADER_NAMES } from '../title/header-names.js';\nimport { onlyChangesUnrelatedAttrs } from '../transaction-predicates/only-changes-unrelated-attrs.js';\n\n// Reads heading `attrs.level` and the block `attrs.fontSize` on the list\n// item's first child. Marks (font-size) come through `Add/RemoveMarkStep` —\n// non-attr — and correctly defeat the predicate without needing to be listed here.\nconst RELEVANT_ATTRS: ReadonlySet<string> = new Set(['level', 'fontSize']);\n\n/**\n * Adds, depending on the list item's first child:\n * - a font-size (so the list marker and paddings size with the text),\n * - a `data-child-font-fit` flag when that font-size is smaller than the block's\n *   own default, so the child paragraph/heading shrinks its font to match (see\n *   `list-checkbox.scss`),\n * - and/or a `data-heading-level` attribute (so a heading-first list item gets\n *   heading styles).\n *\n * No `reuseWhen`: the decoration value depends on the first child's first\n * text node's marks / type, which inline-text edits can change (pasting\n * marked text in front of an unmarked first character, typing that changes\n * the first mark, etc.). Cache is still used across selection-only\n * transactions.\n */\nexport const createListItemSizingDecorationPlugin = () => {\n  const key = new PluginKey<DecorationSet>('list-item-sizing');\n\n  return new Plugin<DecorationSet>({\n    key,\n    state: {\n      init: (_config, state) => buildListItemSizingDecorations(state.doc),\n      // No `reuseWhen` predicate — see plugin docstring for why.\n      apply: (tr, prev) => {\n        if (!tr.docChanged) {\n          return prev;\n        }\n        if (onlyChangesUnrelatedAttrs(tr, RELEVANT_ATTRS)) {\n          return prev;\n        }\n        return buildListItemSizingDecorations(tr.doc);\n      },\n    },\n    props: {\n      decorations(state) {\n        return key.getState(state);\n      },\n    },\n  });\n};\n\n// An empty block sizes the item with its own font size, a block with text with its first text node's.\n// Only an absolute size can size the item: a relative one would compound with the same size on the\n// block inside it, which is relative to the item.\nconst getChildFontSize = (blockNode: ProseMirrorNode | null): number => {\n  if (!blockNode) {\n    return 0;\n  }\n  return (\n    (blockNode.content.size\n      ? toBlockFontSize(blockNode.firstChild?.marks)?.value\n      : getPxFontSize(blockNode.attrs.fontSize)) ?? 0\n  );\n};\n\nconst buildListItemSizingDecorations = (doc: ProseMirrorNode): DecorationSet => {\n  const decorations: Decoration[] = [];\n\n  doc.descendants((node, pos) => {\n    // Text blocks (paragraph, heading, blockquote) cannot contain list items,\n    // so skipping their subtree avoids visiting every text/mark node.\n    // We cannot prune at LIST_ITEM because it may contain nested lists via\n    // `listItemSecondChildContent`, and those nested list items still need\n    // decorations.\n    if (node.isTextblock) {\n      return false;\n    }\n\n    if (node.type.name !== Node_Type.LIST_ITEM) {\n      return;\n    }\n\n    const firstChildOfListItem = node.firstChild;\n    const headingLevel: Level | undefined =\n      firstChildOfListItem?.type.name === Node_Type.HEADING\n        ? firstChildOfListItem?.attrs.level || 1\n        : undefined;\n\n    // Apply the child block's font-size to the list item as a decoration so\n    // the list marker matches the text font-size.\n    const childFontSize = getChildFontSize(firstChildOfListItem);\n    if (childFontSize) {\n      // When the chosen font is smaller than the block's own default, the\n      // block's strut keeps the line (and marker) oversized; flag the item\n      // so the child paragraph/heading shrinks its font to match — see\n      // `list-checkbox.scss`.\n      const childFontFit = childFontSize < getBlockDefaultFontSize(headingLevel);\n      decorations.push(\n        Decoration.node(pos, pos + node.nodeSize, {\n          // No trailing `;` — see indentation-styling.ts.\n          style: `font-size: ${childFontSize}px`,\n          ...(childFontFit ? { 'data-child-font-fit': 'true' } : {}),\n        })\n      );\n    }\n\n    if (headingLevel !== undefined) {\n      decorations.push(\n        Decoration.node(pos, pos + node.nodeSize, {\n          'data-heading-level': `header${HEADER_NAMES[headingLevel - 1]}`,\n        })\n      );\n    }\n  });\n\n  return DecorationSet.create(doc, decorations);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA0B;AAC1B,8BAA8B;AAC9B,yCAAwC;AAExC,mBAAkC;AAClC,kBAA0C;AAE1C,6BAAgC;AAEhC,0BAA6B;AAC7B,0CAA0C;AAK1C,MAAM,iBAAsC,oBAAI,IAAI,CAAC,SAAS,UAAU,CAAC;AAiBlE,MAAM,uCAAuC,MAAM;AACxD,QAAM,MAAM,IAAI,uBAAyB,kBAAkB;AAE3D,SAAO,IAAI,oBAAsB;AAAA,IAC/B;AAAA,IACA,OAAO;AAAA,MACL,MAAM,CAAC,SAAS,UAAU,+BAA+B,MAAM,GAAG;AAAA;AAAA,MAElE,OAAO,CAAC,IAAI,SAAS;AACnB,YAAI,CAAC,GAAG,YAAY;AAClB,iBAAO;AAAA,QACT;AACA,gBAAI,+DAA0B,IAAI,cAAc,GAAG;AACjD,iBAAO;AAAA,QACT;AACA,eAAO,+BAA+B,GAAG,GAAG;AAAA,MAC9C;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,YAAY,OAAO;AACjB,eAAO,IAAI,SAAS,KAAK;AAAA,MAC3B;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAKA,MAAM,mBAAmB,CAAC,cAA8C;AACtE,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,UACG,UAAU,QAAQ,WACf,wCAAgB,UAAU,YAAY,KAAK,GAAG,YAC9C,uCAAc,UAAU,MAAM,QAAQ,MAAM;AAEpD;AAEA,MAAM,iCAAiC,CAAC,QAAwC;AAC9E,QAAM,cAA4B,CAAC;AAEnC,MAAI,YAAY,CAAC,MAAM,QAAQ;AAM7B,QAAI,KAAK,aAAa;AACpB,aAAO;AAAA,IACT;AAEA,QAAI,KAAK,KAAK,SAAS,oBAAU,WAAW;AAC1C;AAAA,IACF;AAEA,UAAM,uBAAuB,KAAK;AAClC,UAAM,eACJ,sBAAsB,KAAK,SAAS,oBAAU,UAC1C,sBAAsB,MAAM,SAAS,IACrC;AAIN,UAAM,gBAAgB,iBAAiB,oBAAoB;AAC3D,QAAI,eAAe;AAKjB,YAAM,eAAe,oBAAgB,4DAAwB,YAAY;AACzE,kBAAY;AAAA,QACV,uBAAW,KAAK,KAAK,MAAM,KAAK,UAAU;AAAA;AAAA,UAExC,OAAO,cAAc,aAAa;AAAA,UAClC,GAAI,eAAe,EAAE,uBAAuB,OAAO,IAAI,CAAC;AAAA,QAC1D,CAAC;AAAA,MACH;AAAA,IACF;AAEA,QAAI,iBAAiB,QAAW;AAC9B,kBAAY;AAAA,QACV,uBAAW,KAAK,KAAK,MAAM,KAAK,UAAU;AAAA,UACxC,sBAAsB,SAAS,iCAAa,eAAe,CAAC,CAAC;AAAA,QAC/D,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO,0BAAc,OAAO,KAAK,WAAW;AAC9C;",
   "names": []
 }

package/dist/cjs/ricos-common-plugins/font-size/block-font-size-plugin.js

@@ -0,0 +1,130 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var block_font_size_plugin_exports = {};
+__export(block_font_size_plugin_exports, {
+  createBlockFontSizePlugin: () => createBlockFontSizePlugin,
+  findEmptyCursorBlock: () => findEmptyCursorBlock
+});
+module.exports = __toCommonJS(block_font_size_plugin_exports);
+var import_ricos_types = require("./../../ricos-types/index.js");
+var import_format_font_size = require("./../../_shared/format-font-size.js");
+var import_core = require("./../../tiptap/core/index.js");
+var import_state = require("./../../tiptap/pm/state.js");
+var import_view = require("./../../tiptap/pm/view.js");
+var import_block_font_size = require("./block-font-size.js");
+const createBlockFontSizePlugin = (config) => {
+  const key = new import_state.PluginKey("block-font-size");
+  return new import_state.Plugin({
+    key,
+    state: {
+      init: (_config, state) => buildEmptyBlockDecorations(state.doc, config),
+      apply: (tr, prev) => tr.docChanged ? buildEmptyBlockDecorations(tr.doc, config) : prev
+    },
+    props: {
+      decorations(state) {
+        return key.getState(state);
+      }
+    },
+    appendTransaction: (transactions, oldState, newState) => {
+      const tr = newState.tr;
+      const transform = transactions.some((transaction) => transaction.docChanged) ? (0, import_core.combineTransactionSteps)(oldState.doc, [...transactions]) : void 0;
+      if (transform) {
+        sizeEmptiedBlocks(tr, oldState, newState, transform);
+      }
+      const cursorBlock = findEmptyCursorBlock(newState);
+      let storedMarks = newState.storedMarks;
+      if (cursorBlock && transform && leftBlockType(oldState, cursorBlock, transform)) {
+        const { $from, $to } = oldState.selection;
+        const carriedMarks = storedMarks ?? ($to.parentOffset ? $from.marks() : []);
+        if (carriedMarks.some((mark) => mark.type.name === import_ricos_types.Mark_Type.FONT_SIZE)) {
+          storedMarks = carriedMarks.filter((mark) => mark.type.name !== import_ricos_types.Mark_Type.FONT_SIZE);
+        }
+        if (cursorBlock.node.attrs.fontSize) {
+          tr.setNodeAttribute(cursorBlock.pos, "fontSize", null);
+        }
+      } else if (cursorBlock && transactions.some((transaction) => transaction.storedMarksSet)) {
+        const storedFontSize = (0, import_block_font_size.toBlockFontSize)(storedMarks);
+        if (storedFontSize && !(0, import_block_font_size.isSameBlockFontSize)(storedFontSize, cursorBlock.node.attrs.fontSize)) {
+          tr.setNodeAttribute(cursorBlock.pos, "fontSize", storedFontSize);
+        }
+      }
+      const blockFontSize = cursorBlock && tr.doc.nodeAt(cursorBlock.pos).attrs.fontSize;
+      const fontSizeMarkType = newState.schema.marks[import_ricos_types.Mark_Type.FONT_SIZE];
+      if (blockFontSize && fontSizeMarkType && !fontSizeMarkType.isInSet(storedMarks ?? [])) {
+        storedMarks = [...storedMarks ?? [], fontSizeMarkType.create(blockFontSize)];
+      }
+      if (storedMarks && (tr.steps.length || storedMarks !== newState.storedMarks)) {
+        tr.setStoredMarks(storedMarks);
+      }
+      return tr.steps.length || tr.storedMarksSet ? tr : void 0;
+    }
+  });
+};
+const buildEmptyBlockDecorations = (doc, config) => {
+  const decorations = [];
+  doc.descendants((node, pos) => {
+    const fontSize = node.attrs.fontSize;
+    if ((0, import_block_font_size.isSizedTextblock)(node) && !node.content.size && fontSize) {
+      decorations.push(
+        import_view.Decoration.node(pos, pos + node.nodeSize, {
+          // No trailing `;` — see indentation-styling.ts.
+          style: `font-size: ${(0, import_format_font_size.formatFontSize)({ value: fontSize.value, unit: fontSize.unit?.toLowerCase() }, config)}`
+        })
+      );
+    }
+    return !node.isTextblock;
+  });
+  return import_view.DecorationSet.create(doc, decorations);
+};
+const sizeEmptiedBlocks = (tr, oldState, newState, transform) => {
+  const sized = /* @__PURE__ */ new Set();
+  (0, import_core.getChangedRanges)(transform).forEach(({ oldRange }) => {
+    oldState.doc.nodesBetween(oldRange.from, oldRange.to, (oldNode, oldPos) => {
+      if ((0, import_block_font_size.isSizedTextblock)(oldNode) && oldNode.content.size) {
+        const pos = transform.mapping.map(oldPos);
+        const node = newState.doc.nodeAt(pos);
+        if (node?.type === oldNode.type && !node.content.size && !sized.has(pos)) {
+          sized.add(pos);
+          const fontSize = (0, import_block_font_size.toBlockFontSize)(oldNode.firstChild?.marks);
+          if (!(0, import_block_font_size.isSameBlockFontSize)(fontSize, node.attrs.fontSize)) {
+            tr.setNodeAttribute(pos, "fontSize", fontSize);
+          }
+        }
+      }
+      return !oldNode.isTextblock;
+    });
+  });
+};
+const leftBlockType = (oldState, cursorBlock, transform) => {
+  const { $from } = oldState.selection;
+  return $from.depth > 0 && transform.mapping.map($from.before()) !== cursorBlock.pos && $from.parent.type !== cursorBlock.node.type;
+};
+const findEmptyCursorBlock = ({
+  selection
+}) => {
+  if (!selection.empty) {
+    return void 0;
+  }
+  const { parent } = selection.$from;
+  if (!(0, import_block_font_size.isSizedTextblock)(parent) || parent.content.size !== 0) {
+    return void 0;
+  }
+  return { node: parent, pos: selection.$from.before() };
+};
+//# sourceMappingURL=block-font-size-plugin.js.map

package/dist/cjs/ricos-common-plugins/font-size/block-font-size-plugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/ricos-common-plugins/font-size/block-font-size-plugin.ts"],
+  "sourcesContent": ["import type { FontSizeData } from './../../ricos-schema/next-schema/index.js';\nimport { Mark_Type } from './../../ricos-types/index.js';\nimport { type FontSizeCommonConfig, formatFontSize } from './../../_shared/format-font-size.js';\nimport { combineTransactionSteps, getChangedRanges } from './../../tiptap/core/index.js';\nimport type { Node as ProseMirrorNode } from './../../tiptap/pm/model.js';\nimport type { EditorState, Transaction } from './../../tiptap/pm/state.js';\nimport { Plugin, PluginKey } from './../../tiptap/pm/state.js';\nimport type { Transform } from './../../tiptap/pm/transform.js';\nimport { Decoration, DecorationSet } from './../../tiptap/pm/view.js';\n\nimport { isSameBlockFontSize, isSizedTextblock, toBlockFontSize } from './block-font-size.js';\n\ntype Block = { node: ProseMirrorNode; pos: number };\n\n// Only blocks a transaction touched are visited, so loaded content is never rewritten\nexport const createBlockFontSizePlugin = (config?: FontSizeCommonConfig) => {\n  const key = new PluginKey<DecorationSet>('block-font-size');\n\n  return new Plugin<DecorationSet>({\n    key,\n    state: {\n      init: (_config, state) => buildEmptyBlockDecorations(state.doc, config),\n      apply: (tr, prev) => (tr.docChanged ? buildEmptyBlockDecorations(tr.doc, config) : prev),\n    },\n    props: {\n      decorations(state) {\n        return key.getState(state);\n      },\n    },\n    appendTransaction: (transactions, oldState, newState) => {\n      const tr = newState.tr;\n      const transform = transactions.some(transaction => transaction.docChanged)\n        ? combineTransactionSteps(oldState.doc, [...transactions])\n        : undefined;\n\n      if (transform) {\n        sizeEmptiedBlocks(tr, oldState, newState, transform);\n      }\n\n      const cursorBlock = findEmptyCursorBlock(newState);\n      let storedMarks = newState.storedMarks;\n\n      if (cursorBlock && transform && leftBlockType(oldState, cursorBlock, transform)) {\n        // The marks the new block would type at: the stored ones, or the ones `unique-id` carries\n        // over from the old cursor when it ids the block (keep the fallback in sync with it).\n        const { $from, $to } = oldState.selection;\n        const carriedMarks = storedMarks ?? ($to.parentOffset ? $from.marks() : []);\n        if (carriedMarks.some(mark => mark.type.name === Mark_Type.FONT_SIZE)) {\n          storedMarks = carriedMarks.filter(mark => mark.type.name !== Mark_Type.FONT_SIZE);\n        }\n        if (cursorBlock.node.attrs.fontSize) {\n          tr.setNodeAttribute(cursorBlock.pos, 'fontSize', null);\n        }\n      } else if (cursorBlock && transactions.some(transaction => transaction.storedMarksSet)) {\n        const storedFontSize = toBlockFontSize(storedMarks);\n        if (\n          storedFontSize &&\n          !isSameBlockFontSize(storedFontSize, cursorBlock.node.attrs.fontSize)\n        ) {\n          tr.setNodeAttribute(cursorBlock.pos, 'fontSize', storedFontSize);\n        }\n      }\n\n      // Attribute steps keep positions, so the block can be re-read after `sizeEmptiedBlocks`\n      const blockFontSize = cursorBlock && tr.doc.nodeAt(cursorBlock.pos)!.attrs.fontSize;\n      const fontSizeMarkType = newState.schema.marks[Mark_Type.FONT_SIZE];\n      if (blockFontSize && fontSizeMarkType && !fontSizeMarkType.isInSet(storedMarks ?? [])) {\n        storedMarks = [...(storedMarks ?? []), fontSizeMarkType.create(blockFontSize)];\n      }\n\n      // Steps reset the transaction's stored marks; put back the ones the state already had.\n      if (storedMarks && (tr.steps.length || storedMarks !== newState.storedMarks)) {\n        tr.setStoredMarks(storedMarks);\n      }\n\n      return tr.steps.length || tr.storedMarksSet ? tr : undefined;\n    },\n  });\n};\n\n// Text renders at its own sizes, so only an empty block is styled with its own size\nconst buildEmptyBlockDecorations = (\n  doc: ProseMirrorNode,\n  config?: FontSizeCommonConfig\n): DecorationSet => {\n  const decorations: Decoration[] = [];\n  doc.descendants((node, pos) => {\n    const fontSize: FontSizeData | null = node.attrs.fontSize;\n    if (isSizedTextblock(node) && !node.content.size && fontSize) {\n      decorations.push(\n        Decoration.node(pos, pos + node.nodeSize, {\n          // No trailing `;` — see indentation-styling.ts.\n          style: `font-size: ${formatFontSize({ value: fontSize.value, unit: fontSize.unit?.toLowerCase() }, config)}`,\n        })\n      );\n    }\n    return !node.isTextblock;\n  });\n  return DecorationSet.create(doc, decorations);\n};\n\n// A block whose text was all deleted keeps the size its first character had; the block is looked up\n// from the old side, since a new empty block can sit where an old one started.\nconst sizeEmptiedBlocks = (\n  tr: Transaction,\n  oldState: EditorState,\n  newState: EditorState,\n  transform: Transform\n) => {\n  const sized = new Set<number>();\n  getChangedRanges(transform).forEach(({ oldRange }) => {\n    oldState.doc.nodesBetween(oldRange.from, oldRange.to, (oldNode, oldPos) => {\n      if (isSizedTextblock(oldNode) && oldNode.content.size) {\n        const pos = transform.mapping.map(oldPos);\n        const node = newState.doc.nodeAt(pos);\n        if (node?.type === oldNode.type && !node.content.size && !sized.has(pos)) {\n          sized.add(pos);\n          const fontSize = toBlockFontSize(oldNode.firstChild?.marks);\n          if (!isSameBlockFontSize(fontSize, node.attrs.fontSize)) {\n            tr.setNodeAttribute(pos, 'fontSize', fontSize);\n          }\n        }\n      }\n      return !oldNode.isTextblock;\n    });\n  });\n};\n\n// Enter into a block of another type (heading → paragraph, blockquote → paragraph) starts at the\n// default size. The block the cursor left maps onto itself, so a toolbar toggle of the same block\n// or a split into the block's own type keeps the size.\nconst leftBlockType = (\n  oldState: EditorState,\n  cursorBlock: Block,\n  transform: Transform\n): boolean => {\n  const { $from } = oldState.selection;\n  return (\n    $from.depth > 0 &&\n    transform.mapping.map($from.before()) !== cursorBlock.pos &&\n    $from.parent.type !== cursorBlock.node.type\n  );\n};\n\nexport const findEmptyCursorBlock = ({\n  selection,\n}: Pick<EditorState, 'selection'>): Block | undefined => {\n  if (!selection.empty) {\n    return undefined;\n  }\n  const { parent } = selection.$from;\n  if (!isSizedTextblock(parent) || parent.content.size !== 0) {\n    return undefined;\n  }\n  return { node: parent, pos: selection.$from.before() };\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/ricos-common-plugins/font-size/block-font-size.js

@@ -0,0 +1,67 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var block_font_size_exports = {};
+__export(block_font_size_exports, {
+  SIZED_TEXTBLOCK_TYPES: () => SIZED_TEXTBLOCK_TYPES,
+  isSameBlockFontSize: () => isSameBlockFontSize,
+  isSizedTextblock: () => isSizedTextblock,
+  mergeBlockFontSize: () => mergeBlockFontSize,
+  setSelectedEmptyBlocksFontSize: () => setSelectedEmptyBlocksFontSize,
+  splitBlockFontSize: () => splitBlockFontSize,
+  toBlockFontSize: () => toBlockFontSize
+});
+module.exports = __toCommonJS(block_font_size_exports);
+var import_v1 = require("./../../ricos-schema/legacy/wix/rich_content/v1/index.js");
+var import_next_schema = require("./../../ricos-schema/next-schema/index.js");
+var import_ricos_types = require("./../../ricos-types/index.js");
+var import_get_px_font_size = require("./../../_shared/get-px-font-size.js");
+const SIZED_TEXTBLOCK_TYPES = [
+  import_v1.Node_Type.PARAGRAPH,
+  import_v1.Node_Type.HEADING,
+  import_v1.Node_Type.CODE_BLOCK,
+  import_v1.Node_Type.BLOCKQUOTE
+];
+const isSizedTextblock = (node) => SIZED_TEXTBLOCK_TYPES.includes(node.type.name);
+const toBlockFontSize = (marks) => {
+  const value = (0, import_get_px_font_size.getPxFontSize)(marks?.find((mark) => mark.type.name === import_ricos_types.Mark_Type.FONT_SIZE)?.attrs);
+  return value ? { value, unit: import_next_schema.FontSizeData_fontType.PX } : null;
+};
+const isSameBlockFontSize = (a, b) => a?.value === b?.value && (a?.unit ?? "PX") === (b?.unit ?? "PX");
+const setSelectedEmptyBlocksFontSize = (tr, fontSize) => {
+  if (tr.selection.empty) {
+    return;
+  }
+  tr.selection.ranges.forEach(({ $from, $to }) => {
+    tr.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+      if (isSizedTextblock(node) && !node.content.size && !isSameBlockFontSize(fontSize, node.attrs.fontSize)) {
+        tr.setNodeAttribute(pos, "fontSize", fontSize);
+      }
+      return !node.isTextblock;
+    });
+  });
+};
+const splitBlockFontSize = (textStyle, content) => {
+  const { fontSize = null, ...rest } = textStyle ?? {};
+  return { textStyle: textStyle ? rest : null, fontSize: content?.length ? null : fontSize };
+};
+const mergeBlockFontSize = (textStyle, fontSize, content) => {
+  const blockFontSize = content?.length ? null : fontSize;
+  return textStyle || blockFontSize ? { ...textStyle, ...blockFontSize ? { fontSize: blockFontSize } : {} } : void 0;
+};
+//# sourceMappingURL=block-font-size.js.map

package/dist/cjs/ricos-common-plugins/font-size/block-font-size.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/ricos-common-plugins/font-size/block-font-size.ts"],
+  "sourcesContent": ["import { Node_Type } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport {\n  type FontSizeData,\n  FontSizeData_fontType,\n  type TextStyle,\n} from './../../ricos-schema/next-schema/index.js';\nimport { Mark_Type } from './../../ricos-types/index.js';\nimport { getPxFontSize } from './../../_shared/get-px-font-size.js';\nimport type { Mark, Node as ProseMirrorNode } from './../../tiptap/pm/model.js';\nimport type { Transaction } from './../../tiptap/pm/state.js';\n\n// Every ProseMirror textblock whose document node carries a `textStyle` the size can be saved to.\nexport const SIZED_TEXTBLOCK_TYPES: readonly string[] = [\n  Node_Type.PARAGRAPH,\n  Node_Type.HEADING,\n  Node_Type.CODE_BLOCK,\n  Node_Type.BLOCKQUOTE,\n];\n\nexport const isSizedTextblock = (node: ProseMirrorNode): boolean =>\n  SIZED_TEXTBLOCK_TYPES.includes(node.type.name);\n\n// Only an absolute size can become the block's: a relative one is relative to the block's parent on\n// the empty block, but to the block on the text typed into it, so the two would render differently.\nexport const toBlockFontSize = (marks: readonly Mark[] | null | undefined): FontSizeData | null => {\n  const value = getPxFontSize(marks?.find(mark => mark.type.name === Mark_Type.FONT_SIZE)?.attrs);\n  return value ? { value, unit: FontSizeData_fontType.PX } : null;\n};\n\nexport const isSameBlockFontSize = (a: FontSizeData | null, b: FontSizeData | null): boolean =>\n  a?.value === b?.value && (a?.unit ?? 'PX') === (b?.unit ?? 'PX');\n\n// The mark reaches text only, so setting or clearing it on a selection does the same to the empty\n// blocks in it through their block attribute.\nexport const setSelectedEmptyBlocksFontSize = (tr: Transaction, fontSize: FontSizeData | null) => {\n  if (tr.selection.empty) {\n    return;\n  }\n  tr.selection.ranges.forEach(({ $from, $to }) => {\n    tr.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {\n      if (\n        isSizedTextblock(node) &&\n        !node.content.size &&\n        !isSameBlockFontSize(fontSize, node.attrs.fontSize)\n      ) {\n        tr.setNodeAttribute(pos, 'fontSize', fontSize);\n      }\n      return !node.isTextblock;\n    });\n  });\n};\n\n// The block's own size only means something while the block is empty: once it has text, the text's\n// sizes are what render. So it is loaded and saved for empty blocks only, and only an empty block is\n// styled with it (see block-font-size-plugin), though ProseMirror keeps it on a block with text.\nexport const splitBlockFontSize = (\n  textStyle: TextStyle | null | undefined,\n  content: readonly unknown[] | undefined\n): { textStyle: TextStyle | null; fontSize: FontSizeData | null } => {\n  const { fontSize = null, ...rest } = textStyle ?? {};\n  return { textStyle: textStyle ? rest : null, fontSize: content?.length ? null : fontSize };\n};\n\nexport const mergeBlockFontSize = (\n  textStyle: TextStyle | null | undefined,\n  fontSize: FontSizeData | null | undefined,\n  content: readonly unknown[] | undefined\n): TextStyle | undefined => {\n  const blockFontSize = content?.length ? null : fontSize;\n  return textStyle || blockFontSize\n    ? { ...textStyle, ...(blockFontSize ? { fontSize: blockFontSize } : {}) }\n    : undefined;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA0B;AAC1B,yBAIO;AACP,yBAA0B;AAC1B,8BAA8B;AAKvB,MAAM,wBAA2C;AAAA,EACtD,oBAAU;AAAA,EACV,oBAAU;AAAA,EACV,oBAAU;AAAA,EACV,oBAAU;AACZ;AAEO,MAAM,mBAAmB,CAAC,SAC/B,sBAAsB,SAAS,KAAK,KAAK,IAAI;AAIxC,MAAM,kBAAkB,CAAC,UAAmE;AACjG,QAAM,YAAQ,uCAAc,OAAO,KAAK,UAAQ,KAAK,KAAK,SAAS,6BAAU,SAAS,GAAG,KAAK;AAC9F,SAAO,QAAQ,EAAE,OAAO,MAAM,yCAAsB,GAAG,IAAI;AAC7D;AAEO,MAAM,sBAAsB,CAAC,GAAwB,MAC1D,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,WAAW,GAAG,QAAQ;AAItD,MAAM,iCAAiC,CAAC,IAAiB,aAAkC;AAChG,MAAI,GAAG,UAAU,OAAO;AACtB;AAAA,EACF;AACA,KAAG,UAAU,OAAO,QAAQ,CAAC,EAAE,OAAO,IAAI,MAAM;AAC9C,OAAG,IAAI,aAAa,MAAM,KAAK,IAAI,KAAK,CAAC,MAAM,QAAQ;AACrD,UACE,iBAAiB,IAAI,KACrB,CAAC,KAAK,QAAQ,QACd,CAAC,oBAAoB,UAAU,KAAK,MAAM,QAAQ,GAClD;AACA,WAAG,iBAAiB,KAAK,YAAY,QAAQ;AAAA,MAC/C;AACA,aAAO,CAAC,KAAK;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AACH;AAKO,MAAM,qBAAqB,CAChC,WACA,YACmE;AACnE,QAAM,EAAE,WAAW,MAAM,GAAG,KAAK,IAAI,aAAa,CAAC;AACnD,SAAO,EAAE,WAAW,YAAY,OAAO,MAAM,UAAU,SAAS,SAAS,OAAO,SAAS;AAC3F;AAEO,MAAM,qBAAqB,CAChC,WACA,UACA,YAC0B;AAC1B,QAAM,gBAAgB,SAAS,SAAS,OAAO;AAC/C,SAAO,aAAa,gBAChB,EAAE,GAAG,WAAW,GAAI,gBAAgB,EAAE,UAAU,cAAc,IAAI,CAAC,EAAG,IACtE;AACN;",
+  "names": []
+}

package/dist/cjs/ricos-common-plugins/font-size/dropdown/font-size-dropdown-scss.js

@@ -22,6 +22,6 @@ __export(font_size_dropdown_exports, {
 });
 module.exports = __toCommonJS(font_size_dropdown_exports);
 var font_size_dropdown_default = {
-  "dropdown": "mPKGX"
+  "dropdown": "sBOK0"
 };
 //# sourceMappingURL=font-size-dropdown-scss.js.map

package/dist/cjs/ricos-common-plugins/font-size/dropdown/font-size-dropdown-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/ricos-common-plugins/font-size/dropdown/font-size-dropdown.scss"],
-  "sourcesContent": ["export default {\n  \"dropdown\": \"mPKGX\"\n};"],
+  "sourcesContent": ["export default {\n  \"dropdown\": \"sBOK0\"\n};"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAO,6BAAQ;AAAA,EACb,YAAY;AACd;",
   "names": []
 }

package/dist/cjs/ricos-common-plugins/font-size/extension.js

@@ -22,7 +22,11 @@ __export(extension_exports, {
 });
 module.exports = __toCommonJS(extension_exports);
 var import_v1 = require("./../../ricos-schema/legacy/wix/rich_content/v1/index.js");
+var import_next_schema = require("./../../ricos-schema/next-schema/index.js");
+var import_format_font_size = require("./../../_shared/format-font-size.js");
 var import_plugin_commons = require("./../../plugin-commons/index.js");
+var import_block_font_size_plugin = require("./block-font-size-plugin.js");
+var import_block_font_size = require("./block-font-size.js");
 const fontSize = (config) => (0, import_plugin_commons.createRicosMarkExtension)({
   type: "mark",
   groups: [],
@@ -43,13 +47,33 @@ const fontSize = (config) => (0, import_plugin_commons.createRicosMarkExtension)
       addAttributes() {
         return { unit: "PX", value: null };
       },
+      addGlobalAttributes() {
+        return [
+          {
+            types: [...import_block_font_size.SIZED_TEXTBLOCK_TYPES],
+            attributes: {
+              // `textStyle.fontSize` in the document, but its own attribute here: `textStyle` is
+              // copied to every split-off block, while the split-off block has to take the size
+              // carried by the cursor marks instead (see block-font-size-plugin).
+              fontSize: {
+                default: null,
+                keepOnSplit: false,
+                parseHTML: parseBlockFontSize,
+                // Carries the size through clipboard HTML. The `font-size` style is a decoration
+                // of empty blocks only (see block-font-size-plugin), as a rendered block is not
+                // redrawn when text is typed into it.
+                renderHTML: (attributes) => attributes.fontSize ? { "data-block-font-size": JSON.stringify(attributes.fontSize) } : {}
+              }
+            }
+          }
+        ];
+      },
+      addProseMirrorPlugins() {
+        return [(0, import_block_font_size_plugin.createBlockFontSizePlugin)(config)];
+      },
       renderHTML({ HTMLAttributes }) {
-        const fontSize2 = config?.overrideInlineFontSize?.(
-          HTMLAttributes.value,
-          HTMLAttributes.unit?.toLowerCase()
-        ) ?? `${HTMLAttributes.value}${HTMLAttributes.unit?.toLowerCase()}`;
         const htmlAttrs = {
-          style: `font-size: ${fontSize2}`,
+          style: `font-size: ${(0, import_format_font_size.formatFontSize)({ value: Number(HTMLAttributes.value), unit: HTMLAttributes.unit?.toLowerCase() }, config)}`,
           "data-font-size": HTMLAttributes.value
         };
         return ["span", mergeAttributes(htmlAttrs), 0];
@@ -73,14 +97,22 @@ const fontSize = (config) => (0, import_plugin_commons.createRicosMarkExtension)
       },
       addCommands() {
         return {
-          setFontSize: (size) => ({ commands }) => {
+          setFontSize: (size) => ({ tr, commands }) => {
             if (!isValidSizeValue(size)) {
               return false;
             }
-            return commands.setMark(this.name, {
-              value: size,
-              unit: "PX"
-            });
+            const blockFontSize = { value: size, unit: "PX" };
+            if (!commands.setMark(this.name, blockFontSize)) {
+              return false;
+            }
+            (0, import_block_font_size.setSelectedEmptyBlocksFontSize)(tr, blockFontSize);
+            const { storedMarks } = tr;
+            const cursorBlock = (0, import_block_font_size_plugin.findEmptyCursorBlock)(tr);
+            if (cursorBlock && !(0, import_block_font_size.isSameBlockFontSize)(blockFontSize, cursorBlock.node.attrs.fontSize)) {
+              tr.setNodeAttribute(cursorBlock.pos, "fontSize", blockFontSize);
+              tr.setStoredMarks(storedMarks);
+            }
+            return true;
           }
         };
       }
@@ -91,4 +123,14 @@ const isValidSizeValue = (size) => {
   const n = Number(size);
   return Number.isInteger(n) && n > 0 && n <= 900;
 };
+const parseBlockFontSize = (element) => {
+  try {
+    const { value, unit = import_next_schema.FontSizeData_fontType.PX } = JSON.parse(
+      element.getAttribute("data-block-font-size") ?? "{}"
+    );
+    return isValidSizeValue(value) && unit in import_next_schema.FontSizeData_fontType ? { value: Number(value), unit } : null;
+  } catch {
+    return null;
+  }
+};
 //# sourceMappingURL=extension.js.map

package/dist/cjs/ricos-common-plugins/font-size/extension.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ricos-common-plugins/font-size/extension.ts"],
-  "sourcesContent": ["import { Decoration_Type } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport type { DOMOutputSpec } from './../../ricos-types/index.js';\nimport { createRicosMarkExtension } from './../../plugin-commons/index.js';\nimport type { TiptapAdapterServices } from './../../tiptap-editor/initialize-tiptap-adapter.js';\n\nimport type { FontSizeCommonConfig } from './types.js';\n\ndeclare module './../../tiptap/core' {\n  interface Commands<ReturnType> {\n    fontSize: {\n      /**\n       * Set a font mark\n       */\n      setFontSize: (size: number) => ReturnType;\n    };\n  }\n}\n\nexport const fontSize = (config?: FontSizeCommonConfig) =>\n  createRicosMarkExtension<{ services: TiptapAdapterServices }>({\n    type: 'mark',\n    groups: [],\n    name: Decoration_Type.FONT_SIZE,\n    reconfigure: (config, extensions, ricosProps, settings, services) => {\n      return {\n        ...config,\n        addOptions: () => {\n          return {\n            services,\n          };\n        },\n      };\n    },\n    createExtensionConfig({ mergeAttributes }) {\n      return {\n        name: this.name,\n        addAttributes() {\n          return { unit: 'PX', value: null };\n        },\n\n        renderHTML({ HTMLAttributes }) {\n          const fontSize =\n            config?.overrideInlineFontSize?.(\n              HTMLAttributes.value,\n              HTMLAttributes.unit?.toLowerCase()\n            ) ?? `${HTMLAttributes.value}${HTMLAttributes.unit?.toLowerCase()}`;\n\n          const htmlAttrs = {\n            style: `font-size: ${fontSize}`,\n            'data-font-size': HTMLAttributes.value,\n          };\n          return ['span', mergeAttributes(htmlAttrs), 0] as DOMOutputSpec;\n        },\n        parseHTML() {\n          // Like in draft we parse only internal copy/pasted fontSize values\n          return [\n            {\n              tag: 'span',\n              getAttrs: (element: HTMLElement) => {\n                const attribute = element.attributes.getNamedItem('data-font-size');\n                if (!isValidSizeValue(attribute?.value)) {\n                  return false;\n                }\n                return {\n                  value: Math.min(Math.max(1, Number(attribute?.value)), 900),\n                  unit: 'PX',\n                };\n              },\n            },\n          ];\n        },\n        addCommands() {\n          return {\n            setFontSize:\n              (size: number) =>\n              ({ commands }) => {\n                if (!isValidSizeValue(size)) {\n                  return false;\n                }\n\n                return commands.setMark(this.name, {\n                  value: size,\n                  unit: 'PX',\n                });\n              },\n          };\n        },\n      };\n    },\n  });\n\nconst isValidSizeValue = (size: unknown): boolean => {\n  const n = Number(size);\n  return Number.isInteger(n) && n > 0 && n <= 900;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAgC;AAEhC,4BAAyC;AAgBlC,MAAM,WAAW,CAAC,eACvB,gDAA8D;AAAA,EAC5D,MAAM;AAAA,EACN,QAAQ,CAAC;AAAA,EACT,MAAM,0BAAgB;AAAA,EACtB,aAAa,CAACA,SAAQ,YAAY,YAAY,UAAU,aAAa;AACnE,WAAO;AAAA,MACL,GAAGA;AAAA,MACH,YAAY,MAAM;AAChB,eAAO;AAAA,UACL;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,sBAAsB,EAAE,gBAAgB,GAAG;AACzC,WAAO;AAAA,MACL,MAAM,KAAK;AAAA,MACX,gBAAgB;AACd,eAAO,EAAE,MAAM,MAAM,OAAO,KAAK;AAAA,MACnC;AAAA,MAEA,WAAW,EAAE,eAAe,GAAG;AAC7B,cAAMC,YACJ,QAAQ;AAAA,UACN,eAAe;AAAA,UACf,eAAe,MAAM,YAAY;AAAA,QACnC,KAAK,GAAG,eAAe,KAAK,GAAG,eAAe,MAAM,YAAY,CAAC;AAEnE,cAAM,YAAY;AAAA,UAChB,OAAO,cAAcA,SAAQ;AAAA,UAC7B,kBAAkB,eAAe;AAAA,QACnC;AACA,eAAO,CAAC,QAAQ,gBAAgB,SAAS,GAAG,CAAC;AAAA,MAC/C;AAAA,MACA,YAAY;AAEV,eAAO;AAAA,UACL;AAAA,YACE,KAAK;AAAA,YACL,UAAU,CAAC,YAAyB;AAClC,oBAAM,YAAY,QAAQ,WAAW,aAAa,gBAAgB;AAClE,kBAAI,CAAC,iBAAiB,WAAW,KAAK,GAAG;AACvC,uBAAO;AAAA,cACT;AACA,qBAAO;AAAA,gBACL,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,OAAO,WAAW,KAAK,CAAC,GAAG,GAAG;AAAA,gBAC1D,MAAM;AAAA,cACR;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,cAAc;AACZ,eAAO;AAAA,UACL,aACE,CAAC,SACD,CAAC,EAAE,SAAS,MAAM;AAChB,gBAAI,CAAC,iBAAiB,IAAI,GAAG;AAC3B,qBAAO;AAAA,YACT;AAEA,mBAAO,SAAS,QAAQ,KAAK,MAAM;AAAA,cACjC,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,UACH;AAAA,QACJ;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEH,MAAM,mBAAmB,CAAC,SAA2B;AACnD,QAAM,IAAI,OAAO,IAAI;AACrB,SAAO,OAAO,UAAU,CAAC,KAAK,IAAI,KAAK,KAAK;AAC9C;",
-  "names": ["config", "fontSize"]
+  "sourcesContent": ["import { Decoration_Type } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport { type FontSizeData, FontSizeData_fontType } from './../../ricos-schema/next-schema/index.js';\nimport type { DOMOutputSpec } from './../../ricos-types/index.js';\nimport { type FontSizeCommonConfig, formatFontSize } from './../../_shared/format-font-size.js';\nimport { createRicosMarkExtension } from './../../plugin-commons/index.js';\nimport type { TiptapAdapterServices } from './../../tiptap-editor/initialize-tiptap-adapter.js';\n\nimport { createBlockFontSizePlugin, findEmptyCursorBlock } from './block-font-size-plugin.js';\nimport {\n  SIZED_TEXTBLOCK_TYPES,\n  isSameBlockFontSize,\n  setSelectedEmptyBlocksFontSize,\n} from './block-font-size.js';\n\ndeclare module './../../tiptap/core' {\n  interface Commands<ReturnType> {\n    fontSize: {\n      /**\n       * Set a font mark\n       */\n      setFontSize: (size: number) => ReturnType;\n    };\n  }\n}\n\nexport const fontSize = (config?: FontSizeCommonConfig) =>\n  createRicosMarkExtension<{ services: TiptapAdapterServices }>({\n    type: 'mark',\n    groups: [],\n    name: Decoration_Type.FONT_SIZE,\n    reconfigure: (config, extensions, ricosProps, settings, services) => {\n      return {\n        ...config,\n        addOptions: () => {\n          return {\n            services,\n          };\n        },\n      };\n    },\n    createExtensionConfig({ mergeAttributes }) {\n      return {\n        name: this.name,\n        addAttributes() {\n          return { unit: 'PX', value: null };\n        },\n\n        addGlobalAttributes() {\n          return [\n            {\n              types: [...SIZED_TEXTBLOCK_TYPES],\n              attributes: {\n                // `textStyle.fontSize` in the document, but its own attribute here: `textStyle` is\n                // copied to every split-off block, while the split-off block has to take the size\n                // carried by the cursor marks instead (see block-font-size-plugin).\n                fontSize: {\n                  default: null,\n                  keepOnSplit: false,\n                  parseHTML: parseBlockFontSize,\n                  // Carries the size through clipboard HTML. The `font-size` style is a decoration\n                  // of empty blocks only (see block-font-size-plugin), as a rendered block is not\n                  // redrawn when text is typed into it.\n                  renderHTML: attributes =>\n                    attributes.fontSize\n                      ? { 'data-block-font-size': JSON.stringify(attributes.fontSize) }\n                      : {},\n                },\n              },\n            },\n          ];\n        },\n\n        addProseMirrorPlugins() {\n          return [createBlockFontSizePlugin(config)];\n        },\n\n        renderHTML({ HTMLAttributes }) {\n          const htmlAttrs = {\n            style: `font-size: ${formatFontSize({ value: Number(HTMLAttributes.value), unit: HTMLAttributes.unit?.toLowerCase() }, config)}`,\n            'data-font-size': HTMLAttributes.value,\n          };\n          return ['span', mergeAttributes(htmlAttrs), 0] as DOMOutputSpec;\n        },\n        parseHTML() {\n          // Like in draft we parse only internal copy/pasted fontSize values\n          return [\n            {\n              tag: 'span',\n              getAttrs: (element: HTMLElement) => {\n                const attribute = element.attributes.getNamedItem('data-font-size');\n                if (!isValidSizeValue(attribute?.value)) {\n                  return false;\n                }\n                return {\n                  value: Math.min(Math.max(1, Number(attribute?.value)), 900),\n                  unit: 'PX',\n                };\n              },\n            },\n          ];\n        },\n        addCommands() {\n          return {\n            setFontSize:\n              (size: number) =>\n              ({ tr, commands }) => {\n                if (!isValidSizeValue(size)) {\n                  return false;\n                }\n\n                const blockFontSize: FontSizeData = { value: size, unit: 'PX' };\n                if (!commands.setMark(this.name, blockFontSize)) {\n                  return false;\n                }\n\n                setSelectedEmptyBlocksFontSize(tr, blockFontSize);\n\n                // block-font-size-plugin would size the block too, but in an appended transaction,\n                // and the editor emits `update` (so `onChange`) only when the dispatched one changes\n                // the document. The attribute step drops the stored marks `setMark` just set.\n                const { storedMarks } = tr;\n                const cursorBlock = findEmptyCursorBlock(tr);\n                if (\n                  cursorBlock &&\n                  !isSameBlockFontSize(blockFontSize, cursorBlock.node.attrs.fontSize)\n                ) {\n                  tr.setNodeAttribute(cursorBlock.pos, 'fontSize', blockFontSize);\n                  tr.setStoredMarks(storedMarks);\n                }\n                return true;\n              },\n          };\n        },\n      };\n    },\n  });\n\nconst isValidSizeValue = (size: unknown): boolean => {\n  const n = Number(size);\n  return Number.isInteger(n) && n > 0 && n <= 900;\n};\n\nconst parseBlockFontSize = (element: HTMLElement): FontSizeData | null => {\n  try {\n    const { value, unit = FontSizeData_fontType.PX }: Partial<FontSizeData> = JSON.parse(\n      element.getAttribute('data-block-font-size') ?? '{}'\n    );\n    return isValidSizeValue(value) && unit in FontSizeData_fontType\n      ? { value: Number(value), unit }\n      : null;\n  } catch {\n    return null;\n  }\n};\n"],
+  "mappings": "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",
+  "names": ["config"]
 }

package/dist/cjs/ricos-common-plugins/font-size/font-size.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/ricos-common-plugins/font-size/font-size.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nimport { RICOS_FONT_SIZE_TYPE } from './../../ricos-content/index.js';\nimport { Decoration_Type } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport type { EditorPlugin, PublicCommands } from './../../ricos-types/index.js';\nimport { createShortcut } from './../../ricos-types/index.js';\nimport { createTextButton } from './../../_shared/create-text-button.js';\nimport { getFontSizeInSelection } from './../../_shared/resolvers/get-font-size-in-selection.js';\nimport { isAlwaysVisible } from './../../_shared/resolvers/is-always-visible.js';\nimport { isNodeSelected } from './../../_shared/resolvers/is-node-selected.js';\nimport { FontSizeButton } from './../../toolbars-v3/components/buttons/FontSizeButton/font-size-button.js';\n\nimport { TEXT_BUTTON_FONT_SIZE } from './data-hooks.js';\nimport { fontSize } from './extension.js';\nimport { fontSizeConverter } from './font-size-converter.js';\nimport { FontSizePanelComponent } from './font-size-panel-component.js';\nimport type { FontSizeCommonConfig } from './types.js';\n\nconst FONT_SIZE_MODAL_ID = `${Decoration_Type.FONT_SIZE}.modal`;\n\nconst MAX_FONT_SIZE = 900;\nconst MIN_FONT_SIZE = 1;\n\nexport const DEFAULT_FONTSIZE_DROPDOWN_OPTIONS = [\n  '6',\n  '8',\n  '10',\n  '12',\n  '14',\n  '16',\n  '18',\n  '20',\n  '24',\n  '30',\n  '36',\n  '48',\n  '64',\n  '72',\n  '96',\n];\n\nconst getFontSize = ({\n  publicCommands,\n}: {\n  publicCommands: PublicCommands;\n}): ((props: $TSFixMe) => JSX.Element) => {\n  const currentFontSize = publicCommands.getFontSize() || '';\n  return () => <div>{currentFontSize}</div>;\n};\n\nexport const pluginFontSize = (config?: FontSizeCommonConfig): EditorPlugin => ({\n  type: Decoration_Type.FONT_SIZE,\n  config: {},\n  pmNodeConverters: [],\n  pmMarkConverters: [fontSizeConverter],\n  tiptapExtensions: [fontSize(config)],\n  shortcuts: [\n    createShortcut({\n      name: `${Decoration_Type.FONT_SIZE}.increase`,\n      description: 'ShortcutsSheet_Formatting_IncreaseFontSize',\n      keys: { macOs: 'Meta+Alt+.', windows: 'Ctrl+Alt+.' },\n      command({ publicCommands }) {\n        const currentFontSize = publicCommands.getFontSize();\n        const newFontSize = currentFontSize && parseInt(currentFontSize, 10) + 1;\n        if (newFontSize) {\n          publicCommands.insertDecoration(RICOS_FONT_SIZE_TYPE, {\n            fontSize: newFontSize.toString(),\n          });\n        }\n        return 'continue';\n      },\n      group: 'ShortcutsSheet_Section_Formatting',\n      enabled: true,\n      showInShortcutSheet: true,\n    }),\n    createShortcut({\n      name: `${Decoration_Type.FONT_SIZE}.decrease`,\n      description: 'ShortcutsSheet_Formatting_DecreaseFontSize',\n      keys: { macOs: 'Meta+Alt+,', windows: 'Ctrl+Alt+,' },\n      command({ publicCommands }) {\n        const currentFontSize = publicCommands.getFontSize();\n        const newFontSize = currentFontSize && parseInt(currentFontSize, 10) - 1;\n        if (newFontSize) {\n          publicCommands.insertDecoration(RICOS_FONT_SIZE_TYPE, {\n            fontSize: newFontSize.toString(),\n          });\n        }\n        return 'continue';\n      },\n      group: 'ShortcutsSheet_Section_Formatting',\n      enabled: true,\n      showInShortcutSheet: true,\n    }),\n  ],\n  textButtons: [\n    createTextButton({\n      id: Decoration_Type.FONT_SIZE,\n      type: 'dropdown',\n      presentation: {\n        id: FONT_SIZE_MODAL_ID,\n        dataHook: TEXT_BUTTON_FONT_SIZE,\n        tooltip: 'FormattingToolbar_CustomFontSizeButton_Tooltip',\n        getIcon: getFontSize,\n        renderer: toolbarItem => <FontSizeButton toolbarItem={toolbarItem} />,\n        Component: FontSizePanelComponent,\n        getComponentProps: ({ publicCommands, modals }) => {\n          const selectedFontSize = publicCommands?.getFontSize() ?? '';\n          const dropdownOptions = insertSorted(\n            [...DEFAULT_FONTSIZE_DROPDOWN_OPTIONS],\n            selectedFontSize\n          );\n\n          return {\n            dropdownOptions: dropdownOptions.map(fontSize => ({\n              id: fontSize,\n              dataHook: `font-size-dropdown-option-${fontSize}`,\n              label: fontSize,\n            })),\n            onSelect: (fontSize: any) => {\n              const fontSizeValue = Math.min(\n                Math.max(MIN_FONT_SIZE, parseInt(fontSize)),\n                MAX_FONT_SIZE\n              );\n              publicCommands.insertDecoration(RICOS_FONT_SIZE_TYPE, {\n                fontSize: `${fontSizeValue}`,\n              });\n            },\n            selectedId: selectedFontSize,\n            closeModal: () => modals.closeModal(FONT_SIZE_MODAL_ID),\n          };\n        },\n      },\n      command:\n        ({\n          modalService: modals,\n          referenceElement,\n          focusReturnElement,\n          isMobile,\n          componentProps,\n        }) =>\n        () => {\n          if (!componentProps) {\n            return false;\n          }\n\n          modals.isModalOpen(FONT_SIZE_MODAL_ID)\n            ? modals.closeModal(FONT_SIZE_MODAL_ID)\n            : modals.openModal({\n                id: FONT_SIZE_MODAL_ID,\n                Component: FontSizePanelComponent,\n                componentProps,\n                positioning: {\n                  placement: 'bottom',\n                  referenceElement,\n                },\n                layout: isMobile ? 'drawer' : referenceElement ? 'floating' : 'dialog',\n                returnFocusToEditor: true,\n                // The positioning reference element is the button's wrapper div, which isn't\n                // focusable — without this, closing by keyboard would drop focus to <body>.\n                focusReturnElement: focusReturnElement ?? undefined,\n              });\n          return true;\n        },\n      attributes: {\n        visible: isAlwaysVisible,\n        selectedFontSize: getFontSizeInSelection,\n        disabled: isNodeSelected,\n      },\n    }),\n  ],\n});\n\nconst insertSorted = (array: string[], value: string) => {\n  if (!array.includes(value) && value !== '') {\n    array.push(value);\n    array.sort((a, b) => parseInt(a) - parseInt(b));\n  }\n  return array;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\n\nimport { RICOS_FONT_SIZE_TYPE } from './../../ricos-content/index.js';\nimport { Decoration_Type } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport type { EditorPlugin, PublicCommands } from './../../ricos-types/index.js';\nimport { createShortcut } from './../../ricos-types/index.js';\nimport { createTextButton } from './../../_shared/create-text-button.js';\nimport type { FontSizeCommonConfig } from './../../_shared/format-font-size.js';\nimport { getFontSizeInSelection } from './../../_shared/resolvers/get-font-size-in-selection.js';\nimport { isAlwaysVisible } from './../../_shared/resolvers/is-always-visible.js';\nimport { isNodeSelected } from './../../_shared/resolvers/is-node-selected.js';\nimport { FontSizeButton } from './../../toolbars-v3/components/buttons/FontSizeButton/font-size-button.js';\n\nimport { TEXT_BUTTON_FONT_SIZE } from './data-hooks.js';\nimport { fontSize } from './extension.js';\nimport { fontSizeConverter } from './font-size-converter.js';\nimport { FontSizePanelComponent } from './font-size-panel-component.js';\n\nconst FONT_SIZE_MODAL_ID = `${Decoration_Type.FONT_SIZE}.modal`;\n\nconst MAX_FONT_SIZE = 900;\nconst MIN_FONT_SIZE = 1;\n\nexport const DEFAULT_FONTSIZE_DROPDOWN_OPTIONS = [\n  '6',\n  '8',\n  '10',\n  '12',\n  '14',\n  '16',\n  '18',\n  '20',\n  '24',\n  '30',\n  '36',\n  '48',\n  '64',\n  '72',\n  '96',\n];\n\nconst getFontSize = ({\n  publicCommands,\n}: {\n  publicCommands: PublicCommands;\n}): ((props: $TSFixMe) => JSX.Element) => {\n  const currentFontSize = publicCommands.getFontSize() || '';\n  return () => <div>{currentFontSize}</div>;\n};\n\nexport const pluginFontSize = (config?: FontSizeCommonConfig): EditorPlugin => ({\n  type: Decoration_Type.FONT_SIZE,\n  config: {},\n  pmNodeConverters: [],\n  pmMarkConverters: [fontSizeConverter],\n  tiptapExtensions: [fontSize(config)],\n  shortcuts: [\n    createShortcut({\n      name: `${Decoration_Type.FONT_SIZE}.increase`,\n      description: 'ShortcutsSheet_Formatting_IncreaseFontSize',\n      keys: { macOs: 'Meta+Alt+.', windows: 'Ctrl+Alt+.' },\n      command({ publicCommands }) {\n        const currentFontSize = publicCommands.getFontSize();\n        const newFontSize = currentFontSize && parseInt(currentFontSize, 10) + 1;\n        if (newFontSize) {\n          publicCommands.insertDecoration(RICOS_FONT_SIZE_TYPE, {\n            fontSize: newFontSize.toString(),\n          });\n        }\n        return 'continue';\n      },\n      group: 'ShortcutsSheet_Section_Formatting',\n      enabled: true,\n      showInShortcutSheet: true,\n    }),\n    createShortcut({\n      name: `${Decoration_Type.FONT_SIZE}.decrease`,\n      description: 'ShortcutsSheet_Formatting_DecreaseFontSize',\n      keys: { macOs: 'Meta+Alt+,', windows: 'Ctrl+Alt+,' },\n      command({ publicCommands }) {\n        const currentFontSize = publicCommands.getFontSize();\n        const newFontSize = currentFontSize && parseInt(currentFontSize, 10) - 1;\n        if (newFontSize) {\n          publicCommands.insertDecoration(RICOS_FONT_SIZE_TYPE, {\n            fontSize: newFontSize.toString(),\n          });\n        }\n        return 'continue';\n      },\n      group: 'ShortcutsSheet_Section_Formatting',\n      enabled: true,\n      showInShortcutSheet: true,\n    }),\n  ],\n  textButtons: [\n    createTextButton({\n      id: Decoration_Type.FONT_SIZE,\n      type: 'dropdown',\n      presentation: {\n        id: FONT_SIZE_MODAL_ID,\n        dataHook: TEXT_BUTTON_FONT_SIZE,\n        tooltip: 'FormattingToolbar_CustomFontSizeButton_Tooltip',\n        getIcon: getFontSize,\n        renderer: toolbarItem => <FontSizeButton toolbarItem={toolbarItem} />,\n        Component: FontSizePanelComponent,\n        getComponentProps: ({ publicCommands, modals }) => {\n          const selectedFontSize = publicCommands?.getFontSize() ?? '';\n          const dropdownOptions = insertSorted(\n            [...DEFAULT_FONTSIZE_DROPDOWN_OPTIONS],\n            selectedFontSize\n          );\n\n          return {\n            dropdownOptions: dropdownOptions.map(fontSize => ({\n              id: fontSize,\n              dataHook: `font-size-dropdown-option-${fontSize}`,\n              label: fontSize,\n            })),\n            onSelect: (fontSize: any) => {\n              const fontSizeValue = Math.min(\n                Math.max(MIN_FONT_SIZE, parseInt(fontSize)),\n                MAX_FONT_SIZE\n              );\n              publicCommands.insertDecoration(RICOS_FONT_SIZE_TYPE, {\n                fontSize: `${fontSizeValue}`,\n              });\n            },\n            selectedId: selectedFontSize,\n            closeModal: () => modals.closeModal(FONT_SIZE_MODAL_ID),\n          };\n        },\n      },\n      command:\n        ({\n          modalService: modals,\n          referenceElement,\n          focusReturnElement,\n          isMobile,\n          componentProps,\n        }) =>\n        () => {\n          if (!componentProps) {\n            return false;\n          }\n\n          modals.isModalOpen(FONT_SIZE_MODAL_ID)\n            ? modals.closeModal(FONT_SIZE_MODAL_ID)\n            : modals.openModal({\n                id: FONT_SIZE_MODAL_ID,\n                Component: FontSizePanelComponent,\n                componentProps,\n                positioning: {\n                  placement: 'bottom',\n                  referenceElement,\n                },\n                layout: isMobile ? 'drawer' : referenceElement ? 'floating' : 'dialog',\n                returnFocusToEditor: true,\n                // The positioning reference element is the button's wrapper div, which isn't\n                // focusable — without this, closing by keyboard would drop focus to <body>.\n                focusReturnElement: focusReturnElement ?? undefined,\n              });\n          return true;\n        },\n      attributes: {\n        visible: isAlwaysVisible,\n        selectedFontSize: getFontSizeInSelection,\n        disabled: isNodeSelected,\n      },\n    }),\n  ],\n});\n\nconst insertSorted = (array: string[], value: string) => {\n  if (!array.includes(value) && value !== '') {\n    array.push(value);\n    array.sort((a, b) => parseInt(a) - parseInt(b));\n  }\n  return array;\n};\n"],
+  "mappings": "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",
   "names": ["React", "fontSize"]
 }

package/dist/cjs/ricos-common-plugins/font-size/viewer.js

@@ -33,9 +33,9 @@ __export(viewer_exports, {
 module.exports = __toCommonJS(viewer_exports);
 var import_react = __toESM(require("react"));
 var import_v1 = require("./../../ricos-schema/legacy/wix/rich_content/v1/index.js");
+var import_format_font_size = require("./../../_shared/format-font-size.js");
 const decorator = (element, fontSizeDecoration, config) => {
-  const { unit, value } = fontSizeDecoration.fontSizeData || {};
-  const fontSize = config?.overrideInlineFontSize && value ? config.overrideInlineFontSize(value?.toString() ?? "", unit) : `${value}${unit ? unit.toLowerCase() : "px"}`;
+  const fontSize = (0, import_format_font_size.formatFontSize)(fontSizeDecoration.fontSizeData || {}, config);
   return /* @__PURE__ */ import_react.default.createElement(
     "span",
     {