fix: inherit run formatting when inserting inline structured content (SD-1421) (#2501)

luccas-harbour · caio-pizzol · web-flow · commit a8c8586b4d17 · 2026-03-25T17:36:19.000Z
* fix: inherit formatting when inserting inline structured content inside a run

* fix: do not wrap inline sdt in runs

* fix: handle cross-run selections and stored marks when inserting inline SDT

- Fall back to plain replaceWith when the selection spans multiple runs,
  instead of only replacing the first run and leaving the rest untouched
- Pass state.storedMarks to getFormattingStateAtPos so pending toolbar
  formatting (e.g. toggling bold before inserting) is respected

* docs: clarify why options.json skips formatting inference in inline SDT insertion

* fix: place cursor after inserted SDT when splitting a run

* test: add case for inline SDT insertion at the start of a run

* test: add end-of-run and cursor position tests for inline SDT insertion

---------

Co-authored-by: Caio Pizzol &lt;caio@harbourshare.com&gt;
Co-authored-by: Caio Pizzol &lt;97641911+caio-pizzol@users.noreply.github.com&gt;
diff --git a/packages/super-editor/src/extensions/structured-content/structured-content-commands.js b/packages/super-editor/src/extensions/structured-content/structured-content-commands.js
@@ -1,7 +1,9 @@
 import { DOMParser as PMDOMParser } from 'prosemirror-model';
+import { TextSelection } from 'prosemirror-state';
 import { Extension } from '@core/Extension.js';
 import { htmlHandler } from '@core/InputRule.js';
 import { findParentNode } from '@helpers/findParentNode.js';
+import { getFormattingStateAtPos } from '@core/helpers/getMarksFromSelection.js';
 import { generateRandomSigned32BitIntStrId } from '@core/helpers/generateDocxRandomId.js';
 import { getStructuredContentTagsById } from './structuredContentHelpers/getStructuredContentTagsById.js';
 import { getStructuredContentByGroup } from './structuredContentHelpers/getStructuredContentByGroup.js';
@@ -134,6 +136,31 @@ export const StructuredContentCommands = Extension.create({
               content = schema.text(' ');
             }
 
+            // When content was not provided as structured JSON, wrap the text
+            // in a formatted run inside the SDT so it visually matches the
+            // surrounding text. The run-split logic below prevents an outer run
+            // from wrapping the SDT itself.
+            const runType = schema.nodes.run;
+            // When `options.json` is used the caller already controls the full
+            // node structure, so we skip formatting inference intentionally.
+            if (runType && !options.json && content.isText) {
+              const formattingState = getFormattingStateAtPos(state, from, editor, {
+                storedMarks: state.storedMarks || null,
+              });
+              const runProperties = formattingState.inlineRunProperties || null;
+
+              // Apply resolved marks so calculateInlineRunPropertiesPlugin can diff correctly
+              if (formattingState.resolvedMarks?.length) {
+                const mergedMarks = formattingState.resolvedMarks.reduce(
+                  (set, mark) => mark.addToSet(set),
+                  content.marks,
+                );
+                content = content.mark(mergedMarks);
+              }
+
+              content = runType.create({ runProperties }, content);
+            }
+
             // Handle group parameter: convert to JSON tag
             let tag = options.attrs?.tag || 'inline_text_sdt';
             if (options.attrs?.group) {
@@ -157,7 +184,42 @@ export const StructuredContentCommands = Extension.create({
               from = to = insertPos;
             }
 
-            tr.replaceWith(from, to, node);
+            // If the cursor is inside a run, split the run first so the SDT
+            // is inserted at paragraph level rather than becoming a child of the run.
+            const $from = state.doc.resolve(from);
+            const $to = from === to ? $from : state.doc.resolve(to);
+            const selectionWithinSameRun = runType && $from.parent.type === runType && $from.parent === $to.parent;
+
+            if (selectionWithinSameRun) {
+              const runDepth = $from.depth;
+              const runStart = $from.before(runDepth);
+              const runEnd = $from.after(runDepth);
+              const parentRun = $from.parent;
+              const startOffset = $from.parentOffset;
+              const endOffset = $to.parentOffset;
+
+              const leftContent = parentRun.content.cut(0, startOffset);
+              const rightContent = parentRun.content.cut(endOffset);
+
+              const fragments = [];
+              if (leftContent.size > 0) {
+                fragments.push(runType.create(parentRun.attrs, leftContent, parentRun.marks));
+              }
+              fragments.push(node);
+              if (rightContent.size > 0) {
+                fragments.push(runType.create(parentRun.attrs, rightContent, parentRun.marks));
+              }
+
+              tr.replaceWith(runStart, runEnd, fragments);
+
+              // Place the cursor right after the inserted SDT so subsequent
+              // typing lands in the correct position.
+              const sdtStart = runStart + (leftContent.size > 0 ? leftContent.size + 2 : 0);
+              const cursorPos = sdtStart + node.nodeSize;
+              tr.setSelection(TextSelection.create(tr.doc, cursorPos));
+            } else {
+              tr.replaceWith(from, to, node);
+            }
           }
 
           return true;
diff --git a/packages/super-editor/src/extensions/structured-content/structured-content-commands.test.js b/packages/super-editor/src/extensions/structured-content/structured-content-commands.test.js
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { EditorState } from 'prosemirror-state';
+import { EditorState, TextSelection } from 'prosemirror-state';
 import { initTestEditor } from '@tests/helpers/helpers.js';
 import { createTable } from '../table/tableHelpers/createTable.js';
 
@@ -556,6 +556,263 @@ describe('updateStructuredContentByGroup', () => {
   });
 });
 
+describe('insertStructuredContentInline formatting', () => {
+  let editor;
+  let schema;
+
+  beforeEach(() => {
+    ({ editor } = initTestEditor());
+    ({ schema } = editor);
+  });
+
+  afterEach(() => {
+    editor?.destroy();
+    editor = null;
+    schema = null;
+  });
+
+  it('does not wrap structuredContent in a run when inserted inside a run', () => {
+    const fontFamily = {
+      ascii: 'Courier New',
+      eastAsia: 'Courier New',
+      hAnsi: 'Courier New',
+      cs: 'Courier New',
+    };
+    const textStyleMark = schema.marks.textStyle.create({
+      fontFamily: 'Courier New',
+      fontSize: '12pt',
+    });
+    const styledText = schema.text('This is some text', [textStyleMark]);
+    const run = schema.nodes.run.create({ runProperties: { fontFamily } }, styledText);
+    const paragraph = schema.nodes.paragraph.create(null, [run]);
+    const doc = schema.nodes.doc.create(null, [paragraph]);
+
+    // run content starts at position 2 (doc > paragraph > run), so cursor after "This is " is at 2 + 8 = 10
+    const cursorPos = 2 + 'This is '.length; // 10
+    const nextState = EditorState.create({
+      schema,
+      doc,
+      plugins: editor.state.plugins,
+      selection: TextSelection.create(doc, cursorPos),
+    });
+    editor.setState(nextState);
+
+    editor.commands.insertStructuredContentInline({
+      text: 'Inline Header',
+      attrs: { group: 'header' },
+    });
+
+    const updatedParagraph = editor.state.doc.firstChild;
+
+    // The paragraph's direct children should be: run, structuredContent, run
+    // The structuredContent must NOT be wrapped in a run
+    const childTypes = [];
+    updatedParagraph.forEach((child) => {
+      childTypes.push(child.type.name);
+
+      // If a run contains a structuredContent as a child, that's the bug
+      if (child.type.name === 'run') {
+        child.forEach((grandchild) => {
+          if (grandchild.type.name === 'structuredContent') {
+            throw new Error('structuredContent should not be wrapped inside a run');
+          }
+        });
+      }
+    });
+
+    expect(childTypes).toContain('structuredContent');
+    expect(updatedParagraph.textContent).toBe('This is Inline Headersome text');
+
+    // The SDT's inner content should be a run with the inherited formatting
+    let sdt = null;
+    updatedParagraph.forEach((child) => {
+      if (child.type.name === 'structuredContent') sdt = child;
+    });
+    const innerRun = sdt.firstChild;
+    expect(innerRun.type.name).toBe('run');
+    expect(innerRun.attrs.runProperties).toMatchObject({ fontFamily });
+  });
+
+  it('does not produce an empty left run when cursor is at the start of a run', () => {
+    const fontFamily = {
+      ascii: 'Courier New',
+      eastAsia: 'Courier New',
+      hAnsi: 'Courier New',
+      cs: 'Courier New',
+    };
+    const textStyleMark = schema.marks.textStyle.create({
+      fontFamily: 'Courier New',
+      fontSize: '12pt',
+    });
+    const styledText = schema.text('Hello', [textStyleMark]);
+    const run = schema.nodes.run.create({ runProperties: { fontFamily } }, styledText);
+    const paragraph = schema.nodes.paragraph.create(null, [run]);
+    const doc = schema.nodes.doc.create(null, [paragraph]);
+
+    // Cursor at the very start of the run content: doc(1) + paragraph(1) = 2
+    const cursorPos = 2;
+    const nextState = EditorState.create({
+      schema,
+      doc,
+      plugins: editor.state.plugins,
+      selection: TextSelection.create(doc, cursorPos),
+    });
+    editor.setState(nextState);
+
+    editor.commands.insertStructuredContentInline({
+      text: 'Field',
+      attrs: { group: 'header' },
+    });
+
+    const updatedParagraph = editor.state.doc.firstChild;
+
+    // Should be: structuredContent, run — no empty run before the SDT
+    const childTypes = [];
+    updatedParagraph.forEach((child) => {
+      childTypes.push(child.type.name);
+      if (child.type.name === 'run') {
+        expect(child.content.size).toBeGreaterThan(0);
+      }
+    });
+
+    expect(childTypes).toEqual(['structuredContent', 'run']);
+    expect(updatedParagraph.textContent).toBe('FieldHello');
+  });
+
+  it('removes selected text when inserting with a ranged selection inside a run', () => {
+    const fontFamily = {
+      ascii: 'Courier New',
+      eastAsia: 'Courier New',
+      hAnsi: 'Courier New',
+      cs: 'Courier New',
+    };
+    const textStyleMark = schema.marks.textStyle.create({
+      fontFamily: 'Courier New',
+      fontSize: '12pt',
+    });
+    const styledText = schema.text('This is some text', [textStyleMark]);
+    const run = schema.nodes.run.create({ runProperties: { fontFamily } }, styledText);
+    const paragraph = schema.nodes.paragraph.create(null, [run]);
+    const doc = schema.nodes.doc.create(null, [paragraph]);
+
+    // Select "some" (positions 10..14 inside run content starting at 2: "some" = chars 8..12)
+    const selFrom = 2 + 'This is '.length; // 10
+    const selTo = 2 + 'This is some'.length; // 14
+    const nextState = EditorState.create({
+      schema,
+      doc,
+      plugins: editor.state.plugins,
+      selection: TextSelection.create(doc, selFrom, selTo),
+    });
+    editor.setState(nextState);
+
+    editor.commands.insertStructuredContentInline({
+      text: 'Inline Header',
+      attrs: { group: 'header' },
+    });
+
+    const updatedParagraph = editor.state.doc.firstChild;
+
+    // "some" should be removed; remaining text is "This is " + "Inline Header" + " text"
+    expect(updatedParagraph.textContent).toBe('This is Inline Header text');
+  });
+
+  it('does not produce an empty right run when cursor is at the end of a run', () => {
+    const fontFamily = {
+      ascii: 'Courier New',
+      eastAsia: 'Courier New',
+      hAnsi: 'Courier New',
+      cs: 'Courier New',
+    };
+    const textStyleMark = schema.marks.textStyle.create({
+      fontFamily: 'Courier New',
+      fontSize: '12pt',
+    });
+    const styledText = schema.text('Hello', [textStyleMark]);
+    const run = schema.nodes.run.create({ runProperties: { fontFamily } }, styledText);
+    const paragraph = schema.nodes.paragraph.create(null, [run]);
+    const doc = schema.nodes.doc.create(null, [paragraph]);
+
+    // Cursor at the very end of the run content: doc(1) + paragraph(1) + "Hello"(5) = 7
+    const cursorPos = 2 + 'Hello'.length; // 7
+    const nextState = EditorState.create({
+      schema,
+      doc,
+      plugins: editor.state.plugins,
+      selection: TextSelection.create(doc, cursorPos),
+    });
+    editor.setState(nextState);
+
+    editor.commands.insertStructuredContentInline({
+      text: 'Field',
+      attrs: { group: 'header' },
+    });
+
+    const updatedParagraph = editor.state.doc.firstChild;
+
+    // Should be: run, structuredContent — no empty run after the SDT
+    const childTypes = [];
+    updatedParagraph.forEach((child) => {
+      childTypes.push(child.type.name);
+      if (child.type.name === 'run') {
+        expect(child.content.size).toBeGreaterThan(0);
+      }
+    });
+
+    expect(childTypes).toEqual(['run', 'structuredContent']);
+    expect(updatedParagraph.textContent).toBe('HelloField');
+  });
+
+  it('places the cursor right after the inserted SDT', () => {
+    const fontFamily = {
+      ascii: 'Courier New',
+      eastAsia: 'Courier New',
+      hAnsi: 'Courier New',
+      cs: 'Courier New',
+    };
+    const textStyleMark = schema.marks.textStyle.create({
+      fontFamily: 'Courier New',
+      fontSize: '12pt',
+    });
+    const styledText = schema.text('Hello World', [textStyleMark]);
+    const run = schema.nodes.run.create({ runProperties: { fontFamily } }, styledText);
+    const paragraph = schema.nodes.paragraph.create(null, [run]);
+    const doc = schema.nodes.doc.create(null, [paragraph]);
+
+    // Cursor after "Hello " (6 chars): doc(1) + paragraph(1) + 6 = 8
+    const cursorPos = 2 + 'Hello '.length; // 8
+    const nextState = EditorState.create({
+      schema,
+      doc,
+      plugins: editor.state.plugins,
+      selection: TextSelection.create(doc, cursorPos),
+    });
+    editor.setState(nextState);
+
+    editor.commands.insertStructuredContentInline({
+      text: 'Field',
+      attrs: { group: 'header' },
+    });
+
+    const updatedState = editor.state;
+    const updatedParagraph = updatedState.doc.firstChild;
+
+    // Find the SDT node and compute where the cursor should be (right after it)
+    let sdtEnd = null;
+    let offset = 1; // paragraph opens at pos 1
+    updatedParagraph.forEach((child) => {
+      if (child.type.name === 'structuredContent') {
+        sdtEnd = offset + child.nodeSize;
+      }
+      offset += child.nodeSize;
+    });
+
+    expect(sdtEnd).not.toBeNull();
+    expect(updatedState.selection.from).toBe(sdtEnd);
+    expect(updatedState.selection.to).toBe(sdtEnd);
+  });
+});
+
 describe('StructuredContent ID Validation', () => {
   let editor;
 
