fix: apply linked style to selected range only

Author: VladaHarbour

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);
@@ -398,7 +427,37 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
     return true;
   }
 
-  // Handle selection spanning multiple nodes
+  // Character styles: only affect the selected range (including across paragraphs)
+  if (style.type === 'character') {
+    if (!textStyleType) return false;
+    clearFormattingMarks(from, to);
+    applyCharacterStyleMarkToRange(tr, textStyleType, from, to, style.id);
+    clearStoredFormattingMarks();
+    return true;
+  }
+
+  // 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;
+        if (!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) => {

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

@@ -132,6 +132,52 @@ describe('LinkedStyles Extension', () => {
         });
         expect(boldTextNodes).toHaveLength(0);
       });
+
+      it('applies linked character style to a partial selection without restyling the whole paragraph', () => {
+        const firstParagraph = findParagraphInfo(editor.state.doc, 0);
+        let innerFrom;
+        let innerTo;
+        editor.state.doc.nodesBetween(
+          firstParagraph.pos,
+          firstParagraph.pos + firstParagraph.node.nodeSize,
+          (node, pos) => {
+            if (node.isText && node.text.length >= 4) {
+              innerFrom = pos + 1;
+              innerTo = pos + node.text.length - 1;
+              return false;
+            }
+            return true;
+          },
+        );
+        expect(innerFrom).toBeDefined();
+        expect(innerTo).toBeGreaterThan(innerFrom);
+
+        const prevParaStyleId = getParagraphProps(firstParagraph.node).styleId;
+
+        const styleWithLink = {
+          ...headingStyle,
+          type: 'paragraph',
+          definition: {
+            ...headingStyle.definition,
+            attrs: { ...headingStyle.definition.attrs, link: 'Emphasis' },
+          },
+        };
+
+        editor.view.dispatch(editor.state.tr.setSelection(TextSelection.create(editor.state.doc, innerFrom, innerTo)));
+        const result = editor.commands.setLinkedStyle(styleWithLink);
+        expect(result).toBe(true);
+
+        const paraAfter = findParagraphInfo(editor.state.doc, 0);
+        expect(getParagraphProps(paraAfter.node).styleId).toBe(prevParaStyleId);
+
+        let sawEmphasisInSelection = false;
+        editor.state.doc.nodesBetween(innerFrom, innerTo, (node) => {
+          if (!node.isText) return;
+          const ts = node.marks.find((m) => m.type.name === 'textStyle');
+          if (ts?.attrs?.styleId === 'Emphasis') sawEmphasisInSelection = true;
+        });
+        expect(sawEmphasisInSelection).toBe(true);
+      });
     });
 
     describe('toggleLinkedStyle', () => {

packages/super-editor/src/editors/v1/extensions/run/commands/split-run.js

@@ -3,7 +3,7 @@ import { NodeSelection, TextSelection, AllSelection } from 'prosemirror-state';
 import { canSplit } from 'prosemirror-transform';
 import { defaultBlockAt } from '@core/helpers/defaultBlockAt.js';
 import { getSplitRunProperties, syncSplitParagraphRunProperties } from '@core/helpers/splitParagraphRunProperties.js';
-import { clearInheritedLinkedStyleId } from '@core/commands/linkedStyleSplitHelpers.js';
+import { clearInheritedLinkedStyleId, isLinkedParagraphStyleId } from '@core/commands/linkedStyleSplitHelpers.js';
 import { resolveRunProperties, encodeMarksFromRPr } from '@core/super-converter/styles.js';
 import { extractTableInfo } from '../calculateInlineRunPropertiesPlugin.js';
 
@@ -89,6 +89,7 @@ export function splitBlockPatch(state, dispatch, editor) {
         atEnd = $from.end(d) == $from.pos + ($from.depth - d);
         atStart = $from.start(d) == $from.pos - ($from.depth - d);
         deflt = defaultBlockAt($from.node(d - 1).contentMatchAt($from.indexAfter(d - 1)));
+        const sourceParagraphStyleId = node.attrs?.paragraphProperties?.styleId;
         paragraphAttrs = /** @type {Record<string, unknown>} */ ({
           ...node.attrs,
           // Ensure newly created block gets a fresh ID (block-node plugin assigns one)
@@ -104,7 +105,25 @@ export function splitBlockPatch(state, dispatch, editor) {
         // current run's runProperties on the new paragraph so the toolbar and
         // wrapTextInRunsPlugin know which inline formatting to inherit.
         if (atEnd && $from.parent.type.name === 'run') {
-          paragraphAttrs = syncSplitParagraphRunProperties(paragraphAttrs, getSplitRunProperties(state, $from));
+          if (!isLinkedParagraphStyleId(editor, sourceParagraphStyleId)) {
+            paragraphAttrs = syncSplitParagraphRunProperties(paragraphAttrs, getSplitRunProperties(state, $from));
+          }
+          const pp = paragraphAttrs?.paragraphProperties;
+          const styles = editor?.converter?.translatedLinkedStyles?.styles;
+          const rp = pp?.runProperties;
+          const runStyleIsLinkedCharacter =
+            rp?.styleId &&
+            styles &&
+            Object.values(styles).some((def) => def?.type === 'paragraph' && def?.link === rp.styleId);
+          if (
+            pp &&
+            (isLinkedParagraphStyleId(editor, sourceParagraphStyleId) ||
+              (runStyleIsLinkedCharacter && !isLinkedParagraphStyleId(editor, sourceParagraphStyleId)))
+          ) {
+            const nextPp = { ...pp };
+            delete nextPp.runProperties;
+            paragraphAttrs = { ...paragraphAttrs, paragraphProperties: nextPp };
+          }
         }
         types.unshift({ type: deflt || node.type, attrs: paragraphAttrs });
         splitDepth = d;
@@ -234,7 +253,10 @@ function applyStyleMarks(state, tr, editor, paragraphAttrs, tableInfo) {
         )
       : [];
 
-    const selectionMarks = state.selection?.$from?.marks ? state.selection.$from.marks() : [];
+    // Use the post-split selection on `tr`. `state.selection` still points at the pre-split
+    // cursor (e.g. end of styled text), which would incorrectly re-apply marks like textStyle
+    // onto a new empty paragraph after Enter.
+    const selectionMarks = tr.selection?.$from?.marks ? tr.selection.$from.marks() : [];
     const selectionMarkDefs = selectionMarks.map((mark) => ({ type: mark.type.name, attrs: mark.attrs }));
 
     /** @type {Array<{type: string, attrs: Record<string, unknown>}>} */

packages/super-editor/src/editors/v1/extensions/run/commands/split-run.test.js

@@ -220,6 +220,22 @@ describe('splitRunToParagraph with style marks', () => {
     ],
   };
 
+  /** Paragraph without a linked paragraph style — simulates applying only the linked character part to a selection. */
+  const NORMAL_BODY_PARAGRAPH_DOC = {
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'run',
+            content: [{ type: 'text', text: 'Hello world' }],
+          },
+        ],
+      },
+    ],
+  };
+
   const STYLED_TABLE_DOC = {
     type: 'doc',
     content: [
@@ -513,6 +529,38 @@ describe('splitRunToParagraph with style marks', () => {
     expect(markTypes).not.toContain('textStyle');
   });
 
+  it('does not carry linked character style to a new line when only a selection had the linked char style', () => {
+    const linkedStyleConverter = createHeadingLinkedStyleConverter();
+    editor.converter = linkedStyleConverter;
+    loadDoc(NORMAL_BODY_PARAGRAPH_DOC);
+
+    const start = findTextPos('Hello world');
+    expect(start).not.toBeNull();
+    const textStyle = editor.schema.marks.textStyle;
+    const textStart = start ?? 0;
+    editor.view.dispatch(
+      editor.view.state.tr.addMark(textStart + 6, textStart + 11, textStyle.create({ styleId: 'Heading1Char' })),
+    );
+
+    updateSelection(textStart + 'Hello world'.length);
+    expect(editor.commands.splitRunToParagraph()).toBe(true);
+
+    editor.commands.insertContent('X');
+
+    let insertedTextNode = null;
+    editor.view.state.doc.descendants((node) => {
+      if (node.type.name === 'text' && node.text === 'X') {
+        insertedTextNode = node;
+        return false;
+      }
+      return true;
+    });
+
+    expect(insertedTextNode).toBeTruthy();
+    const markTypes = (insertedTextNode?.marks || []).map((mark) => mark.type?.name);
+    expect(markTypes).not.toContain('textStyle');
+  });
+
   it('does not carry linked style marks into an empty paragraph created from a previously split linked-style paragraph', () => {
     const linkedStyleConverter = createHeadingLinkedStyleConverter({
       runProperties: {