fix: structured content renders correct on hover and select (#1843)

* fix: working selection logic for inline std

* fix: std block hover and border

* fix: do not select all text inside block content

* chore: fix types

* feat: add structured content tests for inline and block selections

* chore: branch cleanup

* test: update mocks

* feat: add applyContainerSdtDataset function to enhance table rendering

* chore: resolve merge conflicts and fix lint scope for demos

* fix: align SDT selection, hover, and cache behavior with SD-1584 spec

* chore: fix smoke test

* chore: fix vue smoke

Author: palmer-cl

.github/scripts/risk-assess.mjs

@@ -18,14 +18,11 @@
  */
 
 import { execSync } from 'node:child_process';
-import { writeFileSync, readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname, resolve } from 'node:path';
+import { writeFileSync } from 'node:fs';
 
 // Allow running inside a Claude Code session
 delete process.env.CLAUDECODE;
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
 const REPO = process.env.REPO || 'superdoc-dev/superdoc';
 
 /** Extract the first valid JSON object containing "level" from text. */
@@ -62,11 +59,6 @@ function run(cmd) {
   return execSync(cmd, { encoding: 'utf-8', maxBuffer: 10 * 1024 * 1024 }).trim();
 }
 
-function getPRInfo(pr) {
-  const json = run(`gh pr view ${pr} --repo ${REPO} --json title,files,changedFiles`);
-  return JSON.parse(json);
-}
-
 function getPRDiff(pr) {
   return run(`gh pr diff ${pr} --repo ${REPO}`);
 }
@@ -353,7 +345,6 @@ async function main() {
   }
 
   const forceDeep = flags.has('--deep');
-  const dryRun = flags.has('--dry-run');
   const repoRoot = process.env.REPO_ROOT || run('git rev-parse --show-toplevel');
 
   const results = [];

demos/__tests__/smoke.spec.ts

@@ -8,8 +8,11 @@ test('demo loads without errors', async ({ page }) => {
     if (msg.type() === 'error') errors.push(msg.text());
   });
 
-  // Block telemetry requests during tests
-  await page.route('**/ingest.superdoc.dev/**', (route) => route.abort());
+  // Disable telemetry during tests by stubbing the ingest endpoint.
+  // Using fulfill (instead of abort) avoids browser console errors.
+  await page.route('**/ingest.superdoc.dev/**', (route) =>
+    route.fulfill({ status: 204, contentType: 'application/json', body: '{}' }),
+  );
 
   await page.goto('/');
   await expect(page.locator('body')).toBeVisible();

demos/grading-papers/app/grading/[id]/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import 'superdoc/style.css'
-import { useState, useEffect, useRef } from "react"
+import { useState, useEffect, useRef, use  } from "react"
 import { useRouter } from "next/navigation"
 import { ChevronLeft, Save, Send, Download, Printer, Menu, Bell, Search } from "lucide-react"
 import { Button } from "@/components/ui/button"
@@ -13,7 +13,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Slider } from "@/components/ui/slider"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { SuperDoc } from "superdoc"
-import { use } from 'react';
 import { docMap } from './_doc-links';
 
 export default function GradingPage({ params }: { params: Promise<{ id: string }> }) {

demos/slack-redlining/cloud-function/server.js

@@ -2,9 +2,8 @@ import fs from "fs";
 import { readFile, unlink } from "fs/promises";
 import express from "express";
 import https from "https";
-import path from "path";
+import path, { dirname } from "path";
 import { fileURLToPath } from "url";
-import { dirname } from "path";
 import {
   getAIResponse,
   generateUploadDownloadUrls,

demos/vue/src/components/DocumentEditor.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="document-editor">
-    <div :key="documentKey" class="editor-container">
+    <div class="editor-container">
       <div id="superdoc-toolbar" class="toolbar"></div>
       <div id="superdoc" class="editor"></div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { SuperDoc } from 'superdoc';
 import 'superdoc/style.css';
 
@@ -27,23 +27,23 @@ const emit = defineEmits(['editor-ready', 'editor-error']);
 
 // Use ref to track the editor instance
 const editor = ref(null);
-const documentKey = ref(0);
 
 // Function to safely destroy editor
 const destroyEditor = () => {
   if (editor.value) {
+    editor.value.destroy();
     editor.value = null;
   }
 };
 
 // Function to initialize editor
 const initializeEditor = async () => {
   try {
-    // Ensure cleanup of previous instance
+    // Ensure cleanup of previous instance before re-initializing.
     destroyEditor();
-    
-    // Increment key to force re-render
-    documentKey.value++;
+
+    // Wait one tick so the container refs stay stable during remount scenarios.
+    await nextTick();
 
     // Create new editor instance
     editor.value = new SuperDoc({
@@ -68,14 +68,14 @@ const initializeEditor = async () => {
 
 // Watch for changes in props that should trigger re-initialization
 watch(
-  () => [props.documentId, props.initialData, props.readOnly],
+  () => [props.initialData, props.readOnly],
   () => {
-    initializeEditor();
+    void initializeEditor();
   }
 );
 
 onMounted(() => {
-  initializeEditor();
+  void initializeEditor();
 });
 
 onUnmounted(() => {
@@ -110,4 +110,4 @@ onUnmounted(() => {
   margin-top: 10px;
   min-height: 400px; /* Ensure editor has minimum height */
 }
-</style>
+</style>

demos/word-addin/src/taskpane/taskpane.js

@@ -5,7 +5,7 @@
 
 /* eslint-disable prettier/prettier */
 /* global document, Office, Word */
-/* eslint-disable no-use-before-define */
+ 
 
 import SERVER_DOMAIN from '../server-domain.js';
 

e2e-tests/test-data/structured-content/sdt-basic.docx

@@ -42,5 +42,70 @@ if (!shouldRun) {
         });
       });
     });
+
+    const loadStructuredContentDocument = async (page) => {
+      const superEditor = await goToPageAndWaitForEditor(page, { layout: 1 });
+      const fileInput = page.locator('input[type="file"]');
+
+      await fileInput.setInputFiles('./test-data/structured-content/sdt-basic.docx');
+
+      await page.waitForFunction(() => window.superdoc !== undefined && window.editor !== undefined, null, {
+        polling: 100,
+        timeout: 10_000,
+      });
+
+      await page.waitForFunction(() => {
+        const toolbar = document.querySelector('#toolbar');
+        return toolbar && toolbar.children.length > 0;
+      });
+
+      return superEditor;
+    };
+
+    test('structured content: inline selection (sdt-basic.docx)', async ({ page }) => {
+      const superEditor = await loadStructuredContentDocument(page);
+      const inlineStructuredContent = page.locator('.superdoc-structured-content-inline').first();
+
+      await expect(inlineStructuredContent).toBeVisible();
+      await inlineStructuredContent.scrollIntoViewIfNeeded();
+      await inlineStructuredContent.hover();
+      await inlineStructuredContent.click({ force: true });
+      await expect(inlineStructuredContent).toHaveClass(/ProseMirror-selectednode/);
+      await page.waitForFunction(() => {
+        return document.querySelectorAll('.superdoc-structured-content-block.sdt-group-hover').length === 0;
+      });
+      const inlineEditorBox = await superEditor.boundingBox();
+      if (inlineEditorBox) {
+        await page.mouse.move(inlineEditorBox.x - 10, inlineEditorBox.y - 10);
+      }
+
+      await expect(superEditor).toHaveScreenshot();
+    });
+
+    test('structured content: block selection (sdt-basic.docx)', async ({ page }) => {
+      const superEditor = await loadStructuredContentDocument(page);
+      const blockStructuredContent = page.locator('.superdoc-structured-content-block').first();
+
+      await expect(blockStructuredContent).toBeVisible();
+      await blockStructuredContent.scrollIntoViewIfNeeded();
+      await blockStructuredContent.hover();
+      await blockStructuredContent.click({ force: true });
+      await expect(blockStructuredContent).toHaveClass(/ProseMirror-selectednode/);
+      const blockEditorBox = await superEditor.boundingBox();
+      if (blockEditorBox) {
+        await page.mouse.move(blockEditorBox.x - 10, blockEditorBox.y - 10);
+      }
+      await page.waitForFunction(
+        () => {
+          const block = document.querySelector('.superdoc-structured-content-block');
+          if (block?.matches(':hover')) return false;
+          return document.querySelectorAll('.superdoc-structured-content-block.sdt-group-hover').length === 0;
+        },
+        null,
+        { timeout: 2_000 },
+      );
+
+      await expect(superEditor).toHaveScreenshot();
+    });
   });
 }