Merge pull request #19 from AtomGraph/feature/nested-drag-drop

Extend drag-and-drop to nested blocks via the content model

Author: namedgraph

CLAUDE.md

@@ -7,9 +7,10 @@ RDFa extraction and the document canonicalization are all XSLT.
 
 - **Structured-block editing** of any number of `.rdfa-editor-content` regions (p, h1–h3, lists, blockquote,
   pre, figure): Enter splits, Backspace merges, toolbar for block types / inline
-  formatting / links / figures, drag-handle and Alt+Arrow reordering, HTML paste through
-  a sanitizing canonicalization pipeline, unified snapshot undo/redo with caret
-  restoration.
+  formatting / links / figures, drag-handle and Alt+Arrow reordering — nested blocks
+  carry their own handles and drop wherever the XHTML content model admits them (out of
+  a list item or quote, into a table cell) — HTML paste through a sanitizing
+  canonicalization pipeline, unified snapshot undo/redo with caret restoration.
 - **RDFa annotation**: right-click a selection to assert a statement (S/P/O framing,
   vocabulary dropdowns fed by plain ontology RDF/XML files); right-click an annotation
   to edit or remove it.

README.md

@@ -244,7 +244,10 @@ <h2>Try it yourself</h2>
                 <li>Type a sentence, then press <strong>Enter</strong> to start a new block.</li>
                 <li>Select a few words, then <strong>right-click</strong> to tag them with meaning.</li>
                 <li>Use the toolbar to add a heading, list, image or table.</li>
-                <li>Hover a block and drag the <strong>⠿</strong> handle to reorder it.</li>
+                <li>Hover a block and drag the <strong>⠿</strong> handle to reorder it —
+                    even into a table cell.</li>
+                <li>Hover the quote above: the paragraph <em>inside</em> it has its own
+                    handle, so you can drag it out of the quote.</li>
             </ol>
 
             <h2>Learn more</h2>
@@ -314,7 +317,11 @@ <h4>Adding meaning (RDFa)</h4>
 
                 <h4>Reordering</h4>
                 <p>Hover over a block and drag the <strong>⠿</strong> handle that appears in
-                    the left margin to move it.</p>
+                    the left margin to move it. Blocks nested inside a list item, a quote or
+                    a table cell have handles of their own, at their own indent — a drop
+                    lands wherever the document structure allows it: next to another block,
+                    <strong>into a table cell</strong>, or — dropped in the page's left
+                    gutter — out at the top level.</p>
 
                 <h4>Seeing the result</h4>
                 <p><strong>Source</strong> (in the toolbar) shows the clean, canonical

index.html

@@ -74,6 +74,12 @@
                 position: relative;
             }
 
+/* nested draggable blocks position their own handle (chrome is their first
+   child); handles stack per nesting level, each at its block's own indent */
+            .rdfa-editor-content *:has(> [data-role="chrome"]) {
+                position: relative;
+            }
+
 /* invisible gutter strip: keeps the block hovered while the pointer
                travels to the drag handle, which sits outside the block box */
             .rdfa-editor-content > *::before {
@@ -85,6 +91,27 @@
                 width: 2.25em;
             }
 
+/* nested blocks get a narrower gutter, inside the parent's indentation */
+            .rdfa-editor-content > * *:has(> [data-role="chrome"])::before {
+                content: '';
+                position: absolute;
+                left: -1.5em;
+                top: 0;
+                bottom: 0;
+                width: 1.5em;
+            }
+
+/* a blockquote has no intrinsic child indentation, so its handle and its first
+   block's handle would coincide; the editing view indents quote content to give
+   each nesting level its own gutter column (lists and cells indent natively).
+   The quote bar (Markdown/Bootstrap convention) makes the container visible -
+   a normalized blockquote > p would otherwise read as a plain paragraph */
+            .rdfa-editor-content blockquote {
+                padding-left: 2em;
+                border-left: 4px solid #e0e0e0;
+                color: #616161;
+            }
+
 /* the editing-DOM run wrapper (mixed flow content, e.g. <li>text<ul>...) renders
    like the bare inline run it stands for; unwrapped again at canonicalization */
             .rdfa-editor-content p.rdfa-editor-run {
@@ -156,23 +183,28 @@
                 border: none;
             }
 
-.rdfa-editor-content > *:hover > [data-role="chrome"] {
+.rdfa-editor-content *:hover > [data-role="chrome"] {
                 visibility: visible;
             }
 
-/* Drag-and-drop feedback (v6 conventions) */
-            .rdfa-editor-content > .dragging {
+/* Drag-and-drop feedback (v6 conventions) - any nesting depth */
+            .rdfa-editor-content .dragging {
                 opacity: 0.4;
             }
 
-.rdfa-editor-content > .drop-before {
+.rdfa-editor-content .drop-before {
                 box-shadow: 0 -3px 0 0 #2196f3;
             }
 
-.rdfa-editor-content > .drop-after {
+.rdfa-editor-content .drop-after {
                 box-shadow: 0 3px 0 0 #2196f3;
             }
 
+/* dropping INTO a cell highlights the cell itself, not an edge */
+            .rdfa-editor-content .drop-into {
+                box-shadow: inset 0 0 0 2px #2196f3;
+            }
+
 /* Editor toolbar (injected into the navbar) */
             #edit-toolbar {
                 order: -1;