fix: disable sdt hover in view mode for web layout (#2661)

* fix: disable sdt hover in view mode for web layout

* fix: prevent cursor issue for block sdt

* fix: update tests

Author: VladaHarbour

packages/super-editor/src/editors/v1/assets/styles/extensions/structured-content.css

@@ -72,10 +72,19 @@
   border: none;
 }
 
+.super-editor .ProseMirror.view-mode .sd-structured-content:hover,
+.super-editor .ProseMirror.view-mode .sd-structured-content-block:hover {
+  background: none;
+}
+
 .super-editor .ProseMirror.view-mode .sd-structured-content-draggable {
   display: none;
 }
 
+.super-editor .ProseMirror.view-mode .sd-structured-content-block.ProseMirror-selectednode {
+  outline: none;
+}
+
 .presentation-editor--viewing .sd-structured-content,
 .presentation-editor--viewing .sd-structured-content-block {
   padding: 0;

packages/super-editor/src/editors/v1/core/Editor.ts

@@ -83,6 +83,7 @@ import { initPartsRuntime } from './parts/init-parts-runtime.js';
 import { syncPackageMetadata } from './opc/sync-package-metadata.js';
 import { readSettingsRoot, parseProtectionState } from '../document-api-adapters/document-settings.js';
 import { applyEffectiveEditability, getProtectionStorage } from '../extensions/protection/editability.js';
+import { getViewModeSelectionWithoutStructuredContent } from './helpers/getViewModeSelectionWithoutStructuredContent.js';
 
 declare const __APP_VERSION__: string | undefined;
 declare const version: string | undefined;
@@ -1612,6 +1613,10 @@ export class Editor extends EventEmitter<EditorEventMap> {
     // Viewing mode: Not editable, no tracked changes, no comments
     if (cleanedMode === 'viewing') {
       this.commands.toggleTrackChangesShowOriginal?.();
+      const normalizedSelection = getViewModeSelectionWithoutStructuredContent(this.state);
+      if (normalizedSelection) {
+        this.view?.dispatch(this.state.tr.setSelection(normalizedSelection));
+      }
       this.setEditable(false, false);
       this.setOptions({ documentMode: 'viewing' });
       if (pm) pm.classList.add('view-mode');

packages/super-editor/src/editors/v1/core/helpers/getViewModeSelectionWithoutStructuredContent.js

@@ -0,0 +1,34 @@
+import { NodeSelection, Selection } from 'prosemirror-state';
+
+const STRUCTURED_CONTENT_NODE_TYPES = new Set(['structuredContent', 'structuredContentBlock']);
+
+function findEnclosingStructuredContentPosition($pos) {
+  for (let depth = $pos.depth; depth > 0; depth--) {
+    const node = $pos.node(depth);
+    if (STRUCTURED_CONTENT_NODE_TYPES.has(node.type.name)) {
+      return $pos.before(depth);
+    }
+  }
+
+  return null;
+}
+
+export function getViewModeSelectionWithoutStructuredContent(state) {
+  const { selection, doc } = state;
+
+  if (selection instanceof NodeSelection && STRUCTURED_CONTENT_NODE_TYPES.has(selection.node.type.name)) {
+    const candidate = Selection.near(doc.resolve(selection.from), -1);
+    const candidatePos = findEnclosingStructuredContentPosition(candidate.$from);
+    if (candidatePos !== null) return null;
+    return candidate;
+  }
+
+  if (selection.empty) return null;
+
+  const startPos = findEnclosingStructuredContentPosition(selection.$from);
+  const endPos = findEnclosingStructuredContentPosition(selection.$to);
+
+  if (startPos === null || endPos === null || startPos !== endPos) return null;
+
+  return Selection.near(doc.resolve(startPos), -1);
+}

packages/super-editor/src/editors/v1/core/helpers/getViewModeSelectionWithoutStructuredContent.test.js

@@ -0,0 +1,109 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { EditorState, NodeSelection, Selection, TextSelection } from 'prosemirror-state';
+import { initTestEditor } from '@tests/helpers/helpers.js';
+import { getViewModeSelectionWithoutStructuredContent } from './getViewModeSelectionWithoutStructuredContent.js';
+
+function findNode(doc, nodeType) {
+  let result = null;
+
+  doc.descendants((node, pos) => {
+    if (node.type.name === nodeType) {
+      result = { node, pos };
+      return false;
+    }
+  });
+
+  return result;
+}
+
+describe('getViewModeSelectionWithoutStructuredContent', () => {
+  let editor;
+  let schema;
+
+  beforeEach(() => {
+    ({ editor } = initTestEditor());
+    ({ schema } = editor);
+  });
+
+  afterEach(() => {
+    editor?.destroy();
+    editor = null;
+    schema = null;
+  });
+
+  function createState(doc, selection) {
+    return EditorState.create({
+      schema,
+      doc,
+      selection,
+      plugins: editor.state.plugins,
+    });
+  }
+
+  it('normalizes structured content node selections', () => {
+    const blockSdt = schema.nodes.structuredContentBlock.create({ id: 'block-1' }, [
+      schema.nodes.paragraph.create(null, schema.text('Block field')),
+    ]);
+    const doc = schema.nodes.doc.create(null, [schema.nodes.paragraph.create(null, schema.text('Before')), blockSdt]);
+    const sdt = findNode(doc, 'structuredContentBlock');
+    const state = createState(doc, NodeSelection.create(doc, sdt.pos));
+
+    const result = getViewModeSelectionWithoutStructuredContent(state);
+    const expected = Selection.near(doc.resolve(sdt.pos), -1);
+
+    expect(result?.eq(expected)).toBe(true);
+  });
+
+  it('returns null for block structured content node selections when no outside selection exists', () => {
+    const blockSdt = schema.nodes.structuredContentBlock.create({ id: 'block-1' }, [
+      schema.nodes.paragraph.create(null, schema.text('Block field')),
+    ]);
+    const doc = schema.nodes.doc.create(null, [blockSdt]);
+    const sdt = findNode(doc, 'structuredContentBlock');
+    const state = createState(doc, NodeSelection.create(doc, sdt.pos));
+
+    expect(getViewModeSelectionWithoutStructuredContent(state)).toBeNull();
+  });
+
+  it('normalizes non-empty text selections fully inside the same inline structured content', () => {
+    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')]);
+    const doc = schema.nodes.doc.create(null, [paragraph]);
+    const sdt = findNode(doc, 'structuredContent');
+    const selection = TextSelection.create(doc, sdt.pos + 2, sdt.pos + inlineSdt.nodeSize - 1);
+    const state = createState(doc, selection);
+
+    const result = getViewModeSelectionWithoutStructuredContent(state);
+    const expected = Selection.near(doc.resolve(sdt.pos), -1);
+
+    expect(result?.eq(expected)).toBe(true);
+  });
+
+  it('returns null for collapsed cursor selections inside structured content', () => {
+    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')]);
+    const doc = schema.nodes.doc.create(null, [paragraph]);
+    const sdt = findNode(doc, 'structuredContent');
+    const state = createState(doc, TextSelection.create(doc, sdt.pos + 2));
+
+    expect(getViewModeSelectionWithoutStructuredContent(state)).toBeNull();
+  });
+
+  it('returns null for selections outside structured content', () => {
+    const paragraph = schema.nodes.paragraph.create(null, schema.text('Plain text'));
+    const doc = schema.nodes.doc.create(null, [paragraph]);
+    const state = createState(doc, TextSelection.create(doc, 1, 5));
+
+    expect(getViewModeSelectionWithoutStructuredContent(state)).toBeNull();
+  });
+
+  it('returns null when a selection crosses structured content boundaries', () => {
+    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')]);
+    const doc = schema.nodes.doc.create(null, [paragraph]);
+    const sdt = findNode(doc, 'structuredContent');
+    const state = createState(doc, TextSelection.create(doc, sdt.pos - 1, sdt.pos + 3));
+
+    expect(getViewModeSelectionWithoutStructuredContent(state)).toBeNull();
+  });
+});

packages/super-editor/src/editors/v1/core/helpers/index.js

@@ -29,3 +29,4 @@ export * from './importMarkdown.js';
 export * from './contentProcessor.js';
 export * from './updateDOMAttributes.js';
 export * from './applyPatch.js';
+export * from './getViewModeSelectionWithoutStructuredContent.js';

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

@@ -84,6 +84,7 @@ export class StructuredContentViewBase {
     const isPasteEvent = event.type === 'paste';
     const isCutEvent = event.type === 'cut';
     const isClickEvent = event.type === 'mousedown';
+    const isViewingMode = this.editor?.options?.documentMode === 'viewing';
 
     // ProseMirror tries to drag selectable nodes
     // even if `draggable` is set to `false`
@@ -97,6 +98,12 @@ export class StructuredContentViewBase {
       return false;
     }
 
+    // In viewing mode, suppress node-wrapper clicks so SDTs don't become
+    // selected when the PM fallback is used.
+    if (isViewingMode && isClickEvent && isSelectable) {
+      return true;
+    }
+
     // we have to store that dragging started
     if (isDraggable && isEditable && !isDragging && isClickEvent) {
       const dragHandle = target.closest('[data-drag-handle]');

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

@@ -11,9 +11,11 @@ import { Plugin, TextSelection } from 'prosemirror-state';
  * Uses appendTransaction so it works in both editing mode (PM DOM clicks) and
  * presentation mode (PresentationEditor dispatched selections).
  */
-export function createStructuredContentSelectPlugin() {
+export function createStructuredContentSelectPlugin(editor) {
   return new Plugin({
     appendTransaction(transactions, oldState, newState) {
+      if (editor?.options?.documentMode === 'viewing') return null;
+
       const { selection } = newState;
 
       // Only for collapsed selections (cursor placement, not range selections)

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

@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { EditorState, NodeSelection, TextSelection } from 'prosemirror-state';
+import { initTestEditor } from '@tests/helpers/helpers.js';
+
+function findNode(doc, nodeType) {
+  let result = null;
+
+  doc.descendants((node, pos) => {
+    if (node.type.name === nodeType) {
+      result = { node, pos };
+      return false;
+    }
+  });
+
+  return result;
+}
+
+describe('StructuredContentSelectPlugin', () => {
+  let editor;
+  let schema;
+
+  beforeEach(() => {
+    ({ editor } = initTestEditor());
+    ({ schema } = editor);
+  });
+
+  afterEach(() => {
+    editor?.destroy();
+    editor = null;
+    schema = null;
+  });
+
+  function applyDoc(doc) {
+    editor.setState(
+      EditorState.create({
+        schema,
+        doc,
+        plugins: editor.state.plugins,
+      }),
+    );
+  }
+
+  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')]);
+    applyDoc(schema.nodes.doc.create(null, [paragraph]));
+
+    const sdt = findNode(editor.state.doc, 'structuredContent');
+    expect(sdt).not.toBeNull();
+
+    const contentFrom = sdt.pos + 1;
+    const contentTo = sdt.pos + sdt.node.nodeSize - 1;
+
+    editor.view.dispatch(editor.state.tr.setSelection(TextSelection.create(editor.state.doc, contentFrom + 1)));
+
+    expect(editor.state.selection.empty).toBe(false);
+    expect(editor.state.selection.from).toBe(contentFrom);
+    expect(editor.state.selection.to).toBe(contentTo);
+  });
+
+  it('does not auto-select inline SDT content in viewing 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')]);
+    applyDoc(schema.nodes.doc.create(null, [paragraph]));
+
+    editor.setDocumentMode('viewing');
+
+    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 + 1)));
+
+    expect(editor.state.selection.empty).toBe(true);
+    expect(editor.state.selection.from).toBe(contentFrom + 1);
+    expect(editor.state.selection.to).toBe(contentFrom + 1);
+  });
+
+  it('clears an existing SDT node selection when switching to viewing mode if an outside selection exists', () => {
+    const innerParagraph = schema.nodes.paragraph.create(null, schema.text('Block field'));
+    const blockSdt = schema.nodes.structuredContentBlock.create({ id: 'block-1' }, [innerParagraph]);
+    const beforeParagraph = schema.nodes.paragraph.create(null, schema.text('Before'));
+    applyDoc(schema.nodes.doc.create(null, [beforeParagraph, blockSdt]));
+
+    const sdt = findNode(editor.state.doc, 'structuredContentBlock');
+    expect(sdt).not.toBeNull();
+
+    editor.view.dispatch(editor.state.tr.setSelection(NodeSelection.create(editor.state.doc, sdt.pos)));
+    expect(editor.state.selection).toBeInstanceOf(NodeSelection);
+
+    editor.setDocumentMode('viewing');
+
+    expect(editor.state.selection).not.toBeInstanceOf(NodeSelection);
+    expect(editor.state.selection.empty).toBe(true);
+    expect(editor.options.documentMode).toBe('viewing');
+  });
+
+  it('keeps an SDT node selection when switching to viewing mode if the block SDT is the whole document', () => {
+    const innerParagraph = schema.nodes.paragraph.create(null, schema.text('Block field'));
+    const blockSdt = schema.nodes.structuredContentBlock.create({ id: 'block-1' }, [innerParagraph]);
+    applyDoc(schema.nodes.doc.create(null, [blockSdt]));
+
+    const sdt = findNode(editor.state.doc, 'structuredContentBlock');
+    expect(sdt).not.toBeNull();
+
+    editor.view.dispatch(editor.state.tr.setSelection(NodeSelection.create(editor.state.doc, sdt.pos)));
+    expect(editor.state.selection).toBeInstanceOf(NodeSelection);
+
+    editor.setDocumentMode('viewing');
+
+    expect(editor.state.selection).toBeInstanceOf(NodeSelection);
+    expect(editor.options.documentMode).toBe('viewing');
+  });
+});

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

@@ -145,7 +145,7 @@ export const StructuredContent = Node.create({
   },
 
   addPmPlugins() {
-    return [createStructuredContentLockPlugin(), createStructuredContentSelectPlugin()];
+    return [createStructuredContentLockPlugin(), createStructuredContentSelectPlugin(this.editor)];
   },
 
   addNodeView() {

packages/super-editor/src/editors/v1/tests/css-scoping-regressions.test.js

@@ -9,6 +9,7 @@ const __dirname = dirname(__filename);
 
 const NODE_RESIZER_CSS_PATH = resolve(__dirname, '../assets/styles/extensions/noderesizer.css');
 const PROSEMIRROR_CSS_PATH = resolve(__dirname, '../assets/styles/elements/prosemirror.css');
+const STRUCTURED_CONTENT_CSS_PATH = resolve(__dirname, '../assets/styles/extensions/structured-content.css');
 
 function extractTopLevelSelectors(cssText) {
   const selectors = [];
@@ -216,4 +217,12 @@ describe('CSS Scoping Regressions', () => {
     expect(proseMirrorListSelectors.some((selector) => !selector.includes('.super-editor'))).toBe(true);
     expect(proseMirrorSelectedNodeSelectors.some((selector) => !selector.includes('.super-editor'))).toBe(true);
   });
+
+  it('structured content stylesheet should disable hover affordances in ProseMirror view mode', () => {
+    const cssText = readFileSync(STRUCTURED_CONTENT_CSS_PATH, 'utf8');
+    const selectors = extractTopLevelSelectors(cssText);
+
+    expect(selectors).toContain('.super-editor .ProseMirror.view-mode .sd-structured-content:hover');
+    expect(selectors).toContain('.super-editor .ProseMirror.view-mode .sd-structured-content-block:hover');
+  });
 });