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

packages/super-editor/src/extensions/structured-content/structured-content-commands.js

@@ -2,6 +2,7 @@ import { DOMParser as PMDOMParser } from 'prosemirror-model';
 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 +135,27 @@ 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;
+            if (runType && !options.json && content.isText) {
+              const formattingState = getFormattingStateAtPos(state, from, editor);
+              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 +179,37 @@ 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);
+            if (runType && $from.parent.type === runType) {
+              const runDepth = $from.depth;
+              const runStart = $from.before(runDepth);
+              const runEnd = $from.after(runDepth);
+              const parentRun = $from.parent;
+              const startOffset = $from.parentOffset;
+
+              // When the user has a ranged selection, cut the right half from
+              // the end of the selection so the selected text is removed.
+              const $to = state.doc.resolve(to);
+              const endOffset = $to.parent === parentRun ? $to.parentOffset : startOffset;
+
+              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);
+            } else {
+              tr.replaceWith(from, to, node);
+            }
           }
 
           return true;

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,122 @@ 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('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');
+  });
+});
+
 describe('StructuredContent ID Validation', () => {
   let editor;