docs(structured-content): add live SDT fields to interactive demo

Use onReady callback to auto-insert inline and block sdtLocked fields
into the example document on load, replacing placeholder text with
real structured content fields. Reorganize buttons into logical groups:
update actions, lock mode actions, and delete.

Author: tupizz

apps/docs/snippets/extensions/structured-content.mdx

@@ -10,68 +10,69 @@ Native Word SDT (w:sdt) fields for documents. Supports inline and block structur
 import { SuperDocEditor } from '/snippets/components/superdoc-editor.jsx'
 
 <SuperDocEditor
-  html={`<p><b>Service Agreement</b></p><p>This agreement is entered into by and between <i>Acme Corp</i> ("Company") and the client named below. The Company agrees to provide consulting services as outlined in the attached statement of work.</p><p><b>Client Information</b></p><p>Name: ________&nbsp;&nbsp;&nbsp;&nbsp;Date: January 1, 2026</p><p><b>Terms</b></p><p>Payment is due within 30 days of invoice date. All work products remain property of the Company until final payment is received.</p>`}
-  height="300px"
+  html={`<p><b>Service Agreement</b></p><p>This agreement is entered into by and between <i>Acme Corp</i> ("Company") and the client identified below.</p><p>Client name: ________</p><p>The Company agrees to provide consulting services under the following terms:</p><p>________</p>`}
+  height="350px"
+  onReady={(superdoc) => {
+    const editor = superdoc?.activeEditor || superdoc?.editor
+    if (!editor?.commands) return
+
+    // Find "________" in "Client name:" paragraph and replace with inline sdtLocked field
+    let inlinePos = null
+    editor.state.doc.descendants((node, pos) => {
+      if (node.isText && node.text.includes('________') && inlinePos === null) {
+        inlinePos = pos + node.text.indexOf('________')
+      }
+    })
+    if (inlinePos !== null) {
+      editor.commands.setTextSelection({ from: inlinePos, to: inlinePos + 8 })
+      editor.commands.insertStructuredContentInline({
+        attrs: { id: '1', alias: 'Client Name', lockMode: 'sdtLocked' },
+        text: 'John Doe',
+      })
+    }
+
+    // Find the second "________" paragraph and replace with block sdtLocked field
+    let blockPos = null
+    editor.state.doc.descendants((node, pos) => {
+      if (node.isText && node.text.includes('________')) {
+        blockPos = pos + node.text.indexOf('________')
+      }
+    })
+    if (blockPos !== null) {
+      editor.commands.setTextSelection({ from: blockPos, to: blockPos + 8 })
+      editor.commands.insertStructuredContentBlock({
+        attrs: { id: '2', alias: 'Payment Terms', lockMode: 'sdtLocked' },
+        json: { type: 'paragraph', content: [{ type: 'text', text: 'Payment is due within 30 days of invoice date. Late payments incur a 1.5% monthly fee.' }] },
+      })
+    }
+  }}
   customButtons={[
     [
       {
-        label: 'Insert inline (sdtLocked)',
+        label: 'Update client name',
         onClick: (superdoc) => {
           const editor = superdoc?.activeEditor || superdoc?.editor
           if (!editor?.commands) return
-
-          editor.commands.insertStructuredContentInline({
-            attrs: {
-             id: '1',
-             alias: 'Client Name',
-             lockMode: 'sdtLocked',
-            },
-            text: 'John Doe',
-          });
-        }
-      },
-      {
-        label: 'Insert block (sdtLocked)',
-        onClick: (superdoc) => {
-          const editor = superdoc?.activeEditor || superdoc?.editor
-          if (!editor?.commands) return
-
-          editor.commands.insertStructuredContentBlock({
-            attrs: {
-              id: '2',
-              alias: 'Payment Terms',
-              lockMode: 'sdtLocked',
-            },
-            json: { type: 'paragraph', content: [{ type: 'text', text: 'Payment is due within 30 days of invoice date. Late payments incur a 1.5% monthly fee. All disputes must be submitted in writing within 10 business days.' }] }
-          });
-        },
-      },
-      {
-        label: 'Update inline field',
-        onClick: (superdoc) => {
-          const editor = superdoc?.activeEditor || superdoc?.editor
-          if (!editor?.commands) return
-
           editor.commands.updateStructuredContentById('1', { text: 'Jane Smith' });
         }
       },
       {
-        label: 'Update block field',
+        label: 'Update payment terms',
         onClick: (superdoc) => {
           const editor = superdoc?.activeEditor || superdoc?.editor
           if (!editor?.commands) return
-
           editor.commands.updateStructuredContentById('2', {
             json: { type: 'paragraph', content: [{ type: 'text', text: 'Net-15 payment terms apply. A 2% early payment discount is available for invoices settled within 7 days.' }] }
           });
         }
       },
+    ],
+    [
       {
         label: 'Lock inline (sdtContentLocked)',
         onClick: (superdoc) => {
           const editor = superdoc?.activeEditor || superdoc?.editor
           if (!editor?.commands) return
-
           editor.commands.updateStructuredContentById('1', {
             attrs: { lockMode: 'sdtContentLocked' },
           });
@@ -82,32 +83,27 @@ import { SuperDocEditor } from '/snippets/components/superdoc-editor.jsx'
         onClick: (superdoc) => {
           const editor = superdoc?.activeEditor || superdoc?.editor
           if (!editor?.commands) return
-
           editor.commands.updateStructuredContentById('2', {
             attrs: { lockMode: 'sdtContentLocked' },
           });
         }
       },
       {
-        label: 'Unlock all fields',
+        label: 'Unlock all',
         onClick: (superdoc) => {
           const editor = superdoc?.activeEditor || superdoc?.editor
           if (!editor?.commands) return
-
-          editor.commands.updateStructuredContentById('1', {
-            attrs: { lockMode: 'unlocked' },
-          });
-          editor.commands.updateStructuredContentById('2', {
-            attrs: { lockMode: 'unlocked' },
-          });
+          editor.commands.updateStructuredContentById('1', { attrs: { lockMode: 'unlocked' } });
+          editor.commands.updateStructuredContentById('2', { attrs: { lockMode: 'unlocked' } });
         }
       },
+    ],
+    [
       {
         label: 'Delete all fields',
         onClick: (superdoc) => {
           const editor = superdoc?.activeEditor || superdoc?.editor
           if (!editor?.commands) return
-
           const fields = editor.helpers.structuredContentCommands.getStructuredContentTags(editor.state);
           editor.commands.deleteStructuredContent(fields);
         }
@@ -119,12 +115,12 @@ import { SuperDocEditor } from '/snippets/components/superdoc-editor.jsx'
 ## Quick start
 
 ```javascript
-// Insert inline field for customer name
+// Insert inline field with sdtLocked — users can edit content but not delete the field
 editor.commands.insertStructuredContentInline({
   attrs: {
     id: '1',
     alias: 'Customer Name',
-    lockMode: 'sdtLocked', // users can edit the value but not delete the field
+    lockMode: 'sdtLocked',
   },
   text: 'John Doe'
 });
@@ -139,11 +135,12 @@ editor.commands.insertStructuredContentInline({
   text: 'ACC-00042'
 });
 
-// Insert block field for terms section
+// Insert block field with sdtLocked — content is editable, wrapper is protected
 editor.commands.insertStructuredContentBlock({
   attrs: {
     id: '2',
     alias: 'Terms & Conditions',
+    lockMode: 'sdtLocked',
   },
   html: '<p>Please review the terms...</p>'
 });