fix: apply linked style to selected range only (#2704)

* fix: apply linked style to selected range only

* fix: address review comments

* test: add coverage for character style branch and cross-paragraph linked style fallthrough

* test: add behavior tests for linked style partial selection (SD-2425)

* refactor: extract isLinkedCharacterStyleId helper and simplify boolean condition

* fix: handle character style with collapsed cursor via stored marks instead of paragraph path

---------

Co-authored-by: Caio Pizzol <caio@harbourshare.com>
Co-authored-by: Caio Pizzol <97641911+caio-pizzol@users.noreply.github.com>

Author: VladaHarbour

packages/super-editor/src/editors/v1/core/commands/linkedStyleSplitHelpers.js

@@ -8,6 +8,14 @@ export const isLinkedParagraphStyleId = (editor, styleId) => {
   return Boolean(styleDefinition?.type === 'paragraph' && styleDefinition?.link);
 };
 
+export const isLinkedCharacterStyleId = (editor, styleId) => {
+  if (!styleId) return false;
+
+  const translatedStyles = readTranslatedLinkedStyles(editor)?.styles;
+  if (!translatedStyles) return false;
+  return Object.values(translatedStyles).some((def) => def?.type === 'paragraph' && def?.link === styleId);
+};
+
 export const clearInheritedLinkedStyleId = (attrs, editor, { emptyParagraph = false } = {}) => {
   if (!emptyParagraph) return attrs;
   if (!attrs || typeof attrs !== 'object') return attrs;

packages/super-editor/src/editors/v1/core/commands/linkedStyleSplitHelpers.test.js

@@ -1,5 +1,9 @@
 import { describe, expect, it } from 'vitest';
-import { clearInheritedLinkedStyleId, isLinkedParagraphStyleId } from './linkedStyleSplitHelpers.js';
+import {
+  clearInheritedLinkedStyleId,
+  isLinkedCharacterStyleId,
+  isLinkedParagraphStyleId,
+} from './linkedStyleSplitHelpers.js';
 
 describe('linkedStyleSplitHelpers', () => {
   describe('isLinkedParagraphStyleId', () => {
@@ -65,6 +69,40 @@ describe('linkedStyleSplitHelpers', () => {
     });
   });
 
+  describe('isLinkedCharacterStyleId', () => {
+    it('returns true when the styleId is the linked character counterpart of a paragraph style', () => {
+      const editor = {
+        converter: {
+          translatedLinkedStyles: {
+            styles: {
+              Heading1: { styleId: 'Heading1', type: 'paragraph', link: 'Heading1Char' },
+            },
+          },
+        },
+      };
+
+      expect(isLinkedCharacterStyleId(editor, 'Heading1Char')).toBe(true);
+    });
+
+    it('returns false for paragraph style ids, unknown ids, and missing data', () => {
+      const editor = {
+        converter: {
+          translatedLinkedStyles: {
+            styles: {
+              Heading1: { styleId: 'Heading1', type: 'paragraph', link: 'Heading1Char' },
+              BodyText: { styleId: 'BodyText', type: 'paragraph' },
+            },
+          },
+        },
+      };
+
+      expect(isLinkedCharacterStyleId(editor, 'Heading1')).toBe(false);
+      expect(isLinkedCharacterStyleId(editor, 'Unknown')).toBe(false);
+      expect(isLinkedCharacterStyleId(editor, null)).toBe(false);
+      expect(isLinkedCharacterStyleId({}, 'Heading1Char')).toBe(false);
+    });
+  });
+
   describe('clearInheritedLinkedStyleId', () => {
     it('removes styleId when it belongs to a linked paragraph style', () => {
       const editor = {

packages/super-editor/src/editors/v1/core/super-converter/docx-helpers/get-default-style-definition.js

@@ -99,6 +99,8 @@ export const getDefaultStyleDefinition = (defaultStyleId, docx) => {
     .find((el) => el.elements.some((inner) => inner.name === 'w:basedOn'))
     ?.elements.find((inner) => inner.name === 'w:basedOn')?.attributes['w:val'];
 
+  const linkToCharacterStyle = firstMatch.elements.find((el) => el.name === 'w:link')?.attributes?.['w:val'] ?? null;
+
   const parsedAttrs = {
     name,
     qFormat: qFormat ? true : false,
@@ -108,6 +110,8 @@ export const getDefaultStyleDefinition = (defaultStyleId, docx) => {
     pageBreakBefore: pageBreakBeforeVal ? true : false,
     pageBreakAfter: pageBreakAfterVal ? true : false,
     basedOn: basedOn ?? null,
+    /** Linked character style id (w:link); used when applying paragraph style to a partial selection */
+    link: linkToCharacterStyle,
   };
 
   // rPr

packages/super-editor/src/editors/v1/core/super-converter/docx-helpers/get-default-style-definition.test.js

@@ -106,6 +106,7 @@ describe('getDefaultStyleDefinition', () => {
       pageBreakBefore: true,
       pageBreakAfter: false,
       basedOn: 'Base',
+      link: null,
     });
 
     // styles -> spacing and indent converted, textAlign propagated from justify when indent present
@@ -160,6 +161,31 @@ describe('getDefaultStyleDefinition', () => {
     ]);
   });
 
+  it('parses w:link to linked character style id', () => {
+    const docx = {
+      'word/styles.xml': {
+        elements: [
+          {
+            elements: [
+              {
+                name: 'w:style',
+                attributes: { 'w:styleId': 'Heading1', 'w:type': 'paragraph' },
+                elements: [
+                  { name: 'w:name', attributes: { 'w:val': 'Heading 1' } },
+                  { name: 'w:link', attributes: { 'w:val': 'Heading1Char' } },
+                  { name: 'w:rPr', elements: [] },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    };
+
+    const res = getDefaultStyleDefinition('Heading1', docx);
+    expect(res.attrs.link).toBe('Heading1Char');
+  });
+
   it('handles w:tabs element with no children gracefully', () => {
     const docx = {
       'word/styles.xml': {

packages/super-editor/src/editors/v1/extensions/linked-styles/helpers.js

@@ -2,6 +2,7 @@
 import { CustomSelectionPluginKey } from '@core/selection-state.js';
 import { getLineHeightValueString } from '@core/super-converter/helpers.js';
 import { findParentNode } from '../../core/helpers/findParentNode.js';
+import { findParentNodeClosestToPos } from '../../core/helpers/findParentNodeClosestToPos.js';
 import { kebabCase } from '@superdoc/common';
 import { getUnderlineCssString } from './index.js';
 import { twipsToLines, twipsToPixels, halfPointToPixels } from '@converter/helpers.js';
@@ -308,6 +309,33 @@ export const generateLinkedStyleString = (linkedStyle, basedOnStyle, node, paren
   return final;
 };
 
+/**
+ * @param {import('prosemirror-model').Node} doc
+ * @param {number} paragraphPos
+ * @param {import('prosemirror-model').Node} paragraphNode
+ * @returns {{ from: number; to: number } | null} Half-span [from, to) covering all text in the paragraph
+ */
+const getParagraphTextBounds = (doc, paragraphPos, paragraphNode) => {
+  let minPos = null;
+  let maxPos = null;
+  const innerStart = paragraphPos + 1;
+  const innerEnd = paragraphPos + paragraphNode.nodeSize - 1;
+  doc.nodesBetween(innerStart, innerEnd, (node, pos) => {
+    if (node.isText) {
+      if (minPos === null || pos < minPos) minPos = pos;
+      maxPos = pos + node.nodeSize;
+    }
+    return true;
+  });
+  if (minPos === null || maxPos === null) return null;
+  return { from: minPos, to: maxPos };
+};
+
+const applyCharacterStyleMarkToRange = (tr, textStyleType, from, to, styleId) => {
+  tr.removeMark(from, to, textStyleType);
+  tr.addMark(from, to, textStyleType.create({ styleId }));
+};
+
 /**
  * Apply a linked style to a transaction
  * @category Helper
@@ -325,6 +353,7 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
 
   let selection = tr.selection;
   const state = editor.state;
+  const textStyleType = editor.schema.marks.textStyle;
 
   // Check for preserved selection from custom selection plugin
   const focusState = CustomSelectionPluginKey.getState(state);
@@ -351,16 +380,24 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
     };
   };
 
-  // Function to clear formatting marks from text content
-  const clearFormattingMarks = (startPos, endPos) => {
-    tr.doc.nodesBetween(startPos, endPos, (node, pos) => {
-      if (node.isText && node.marks.length > 0) {
-        node.marks.forEach((mark) => {
-          if (FORMATTING_MARK_NAMES.has(mark.type.name)) {
-            tr.removeMark(pos, pos + node.nodeSize, mark);
-          }
-        });
+  // Clear FORMATTING_MARK_NAMES only inside [rangeFrom, rangeTo), not across whole text nodes
+  // (selection can split mid-node; removeMark must use the intersection with each text slice).
+  const clearFormattingMarks = (rangeFrom, rangeTo) => {
+    tr.doc.nodesBetween(rangeFrom, rangeTo, (node, pos) => {
+      if (!node.isText || node.marks.length === 0) {
+        return true;
       }
+      const nodeEnd = pos + node.nodeSize;
+      const clearFrom = Math.max(pos, rangeFrom);
+      const clearTo = Math.min(nodeEnd, rangeTo);
+      if (clearFrom >= clearTo) {
+        return true;
+      }
+      node.marks.forEach((mark) => {
+        if (FORMATTING_MARK_NAMES.has(mark.type.name)) {
+          tr.removeMark(clearFrom, clearTo, mark);
+        }
+      });
       return true;
     });
   };
@@ -377,7 +414,23 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
     }
   };
 
-  // Handle cursor position (no selection)
+  // Character styles: only affect the selected range (or stored marks for collapsed cursor)
+  if (style.type === 'character') {
+    if (!textStyleType) return false;
+    if (from === to) {
+      // Collapsed cursor: set stored marks for subsequent typing
+      const sourceMarks = tr.storedMarks ?? state.storedMarks ?? selection.$from.marks();
+      const filtered = sourceMarks.filter((mark) => mark.type !== textStyleType);
+      tr.setStoredMarks([...filtered, textStyleType.create({ styleId: style.id })]);
+      return true;
+    }
+    clearFormattingMarks(from, to);
+    applyCharacterStyleMarkToRange(tr, textStyleType, from, to, style.id);
+    clearStoredFormattingMarks();
+    return true;
+  }
+
+  // Handle cursor position (no selection) — paragraph styles only
   if (from === to) {
     let pos = from;
     let paragraphNode = tr.doc.nodeAt(from);
@@ -398,7 +451,29 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
     return true;
   }
 
-  // Handle selection spanning multiple nodes
+  // Paragraph style + partial selection in a single paragraph: apply linked character style to range only (Word behavior)
+  if (style.type === 'paragraph' && textStyleType) {
+    const linkedCharStyleId = style.definition?.attrs?.link;
+    if (linkedCharStyleId) {
+      const $fromPos = tr.doc.resolve(from);
+      const $toPos = tr.doc.resolve(to);
+      const startPara = findParentNodeClosestToPos($fromPos, (n) => n.type.name === 'paragraph');
+      const endPara = findParentNodeClosestToPos($toPos, (n) => n.type.name === 'paragraph');
+      if (startPara && endPara && startPara.pos === endPara.pos) {
+        const bounds = getParagraphTextBounds(tr.doc, startPara.pos, startPara.node);
+        const coversFullParagraphText = bounds && from <= bounds.from && to >= bounds.to;
+        // No text (empty / image-only): cannot do linked character range apply; use paragraph path below.
+        if (bounds && !coversFullParagraphText) {
+          clearFormattingMarks(from, to);
+          applyCharacterStyleMarkToRange(tr, textStyleType, from, to, linkedCharStyleId);
+          clearStoredFormattingMarks();
+          return true;
+        }
+      }
+    }
+  }
+
+  // Handle selection spanning multiple nodes / full paragraph(s)
   const paragraphPositions = [];
 
   tr.doc.nodesBetween(from, to, (node, pos) => {
@@ -408,6 +483,18 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
     return true;
   });
 
+  // nodesBetween often skips block parents when the range only covers inline content (e.g. image-only).
+  if (paragraphPositions.length === 0 && from !== to) {
+    const seen = new Set();
+    const pushParagraph = (info) => {
+      if (!info || seen.has(info.pos)) return;
+      seen.add(info.pos);
+      paragraphPositions.push({ node: info.node, pos: info.pos });
+    };
+    pushParagraph(findParentNodeClosestToPos(tr.doc.resolve(from), (n) => n.type.name === 'paragraph'));
+    pushParagraph(findParentNodeClosestToPos(tr.doc.resolve(to), (n) => n.type.name === 'paragraph'));
+  }
+
   // Apply style to all paragraphs in selection (with clean attributes and cleared marks)
   paragraphPositions.forEach(({ node, pos }) => {
     // Clear formatting marks within this paragraph