fix: ensure one arrow key press to move out of sdt (#2972)

* fix: ensure one arrow key press to move out of sdt

* fix: use \ufffc for inline leaf nodes

Author: VladaHarbour

packages/layout-engine/painters/dom/src/styles.ts

@@ -517,6 +517,8 @@ const SDT_CONTAINER_STYLES = `
   border: 1px solid transparent;
   position: relative;
   display: inline;
+  font-size: initial;
+  line-height: normal;
   z-index: 10;
 }
 

packages/super-editor/src/editors/v1/extensions/structured-content/structured-content-select-plugin.js

@@ -2,6 +2,8 @@ import { Plugin, TextSelection } from 'prosemirror-state';
 
 import { applyEditableSlotAtInlineBoundary } from '@helpers/ensure-editable-slot-inline-boundary.js';
 
+const INLINE_LEAF_TEXT = '\ufffc';
+
 /**
  * Select-all-on-click plugin for inline StructuredContent nodes.
  *
@@ -24,6 +26,7 @@ export function createStructuredContentSelectPlugin(editor) {
 
         const { state } = view;
         const { selection } = state;
+        const isEditableSlotText = (text) => text.replace(/\u200B/g, '').length === 0;
 
         const resolveBoundaryExit = ($pos) => {
           for (let depth = $pos.depth; depth > 0; depth -= 1) {
@@ -38,10 +41,18 @@ export function createStructuredContentSelectPlugin(editor) {
 
             // Empty selection: exit only at exact boundaries.
             if (selection.empty) {
+              const trailingSlice = state.doc.textBetween(selection.from, contentTo, '', INLINE_LEAF_TEXT);
+              const leadingSlice = state.doc.textBetween(contentFrom, selection.from, '', INLINE_LEAF_TEXT);
+              const onlyTrailingEditableSlots = trailingSlice.length > 0 && isEditableSlotText(trailingSlice);
+              const onlyLeadingEditableSlots = leadingSlice.length > 0 && isEditableSlotText(leadingSlice);
               // Be tolerant by 1 position to avoid requiring a second key press
               // when PM lands just inside boundary positions.
-              if (event.key === 'ArrowRight' && selection.from >= contentTo - 1) return afterPos;
-              if (event.key === 'ArrowLeft' && selection.from <= contentFrom + 1) return beforePos;
+              if (event.key === 'ArrowRight' && (selection.from >= contentTo - 1 || onlyTrailingEditableSlots)) {
+                return afterPos;
+              }
+              if (event.key === 'ArrowLeft' && (selection.from <= contentFrom + 1 || onlyLeadingEditableSlots)) {
+                return beforePos;
+              }
               return null;
             }
 

packages/super-editor/src/editors/v1/extensions/structured-content/structured-content-select-plugin.test.js

@@ -40,6 +40,16 @@ describe('StructuredContentSelectPlugin', () => {
     );
   }
 
+  function pressArrow(key) {
+    const event = new KeyboardEvent('keydown', { key, bubbles: true });
+    let handled = false;
+    editor.view.someProp('handleKeyDown', (handler) => {
+      handled = handler(editor.view, event);
+      return handled;
+    });
+    return handled;
+  }
+
   it('selects inline SDT content on first click in editing mode', () => {
     const inlineSdt = schema.nodes.structuredContent.create({ id: 'inline-1' }, schema.text('Field'));
     const paragraph = schema.nodes.paragraph.create(null, [schema.text('A '), inlineSdt, schema.text(' Z')]);
@@ -161,6 +171,63 @@ describe('StructuredContentSelectPlugin', () => {
     expect((text.match(/\u200B/g) ?? []).length).toBe(1);
   });
 
+  it('exits inline SDT with one ArrowRight when only trailing ZWSP slots remain', () => {
+    const inlineSdt = schema.nodes.structuredContent.create({ id: 'inline-1' }, schema.text('Field\u200B\u200B'));
+    const paragraph = schema.nodes.paragraph.create(null, [schema.text('A '), inlineSdt, schema.text(' Z')]);
+    applyDoc(schema.nodes.doc.create(null, [paragraph]));
+
+    const sdt = findNode(editor.state.doc, 'structuredContent');
+    expect(sdt).not.toBeNull();
+
+    const contentFrom = sdt.pos + 1;
+    const afterVisibleText = contentFrom + 'Field'.length;
+    const afterSdt = sdt.pos + sdt.node.nodeSize;
+    editor.view.dispatch(editor.state.tr.setSelection(TextSelection.create(editor.state.doc, afterVisibleText)));
+
+    const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true });
+    editor.view.someProp('handleKeyDown', (handler) => handler(editor.view, event));
+
+    expect(editor.state.selection.empty).toBe(true);
+    expect(editor.state.selection.from).toBe(afterSdt);
+    expect(editor.state.selection.to).toBe(afterSdt);
+  });
+
+  it('does not exit inline SDT with ArrowRight when a trailing inline leaf remains before ZWSP slots', () => {
+    const image = schema.nodes.image.create({ src: 'image.png' });
+    const inlineSdt = schema.nodes.structuredContent.create({ id: 'inline-1' }, [image, schema.text('\u200B')]);
+    const paragraph = schema.nodes.paragraph.create(null, [schema.text('A '), inlineSdt, schema.text(' Z')]);
+    applyDoc(schema.nodes.doc.create(null, [paragraph]));
+
+    const sdt = findNode(editor.state.doc, 'structuredContent');
+    expect(sdt).not.toBeNull();
+
+    const contentFrom = sdt.pos + 1;
+    editor.view.dispatch(editor.state.tr.setSelection(TextSelection.create(editor.state.doc, contentFrom)));
+    const beforePos = editor.state.selection.from;
+
+    expect(pressArrow('ArrowRight')).toBe(false);
+    expect(editor.state.selection.empty).toBe(true);
+    expect(editor.state.selection.from).toBe(beforePos);
+  });
+
+  it('does not exit inline SDT with ArrowLeft when a leading inline leaf remains after ZWSP slots', () => {
+    const image = schema.nodes.image.create({ src: 'image.png' });
+    const inlineSdt = schema.nodes.structuredContent.create({ id: 'inline-1' }, [schema.text('\u200B'), image]);
+    const paragraph = schema.nodes.paragraph.create(null, [schema.text('A '), inlineSdt, schema.text(' Z')]);
+    applyDoc(schema.nodes.doc.create(null, [paragraph]));
+
+    const sdt = findNode(editor.state.doc, 'structuredContent');
+    expect(sdt).not.toBeNull();
+
+    const contentTo = sdt.pos + sdt.node.nodeSize - 1;
+    editor.view.dispatch(editor.state.tr.setSelection(TextSelection.create(editor.state.doc, contentTo)));
+    const beforePos = editor.state.selection.from;
+
+    expect(pressArrow('ArrowLeft')).toBe(false);
+    expect(editor.state.selection.empty).toBe(true);
+    expect(editor.state.selection.from).toBe(beforePos);
+  });
+
   it('ArrowLeft exit does not insert zero-width text before inline SDT', () => {
     const inlineSdt = schema.nodes.structuredContent.create({ id: 'inline-1' }, schema.text('Field'));
     const paragraph = schema.nodes.paragraph.create(null, [schema.text('A '), inlineSdt, schema.text(' Z')]);