editor bugfixes, RTL text support

Cargo.lock

···
  "tokio",
  "tokio-util",
  "tracing",
+ "unicode-bidi",
  "unicode-normalization",
  "url",
  "weaver-api",

crates/weaver-app/assets/styling/cards-base.css

···
     font-size: 0.875rem;
     font-weight: 600;
     margin-top: 0;
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
 }
 
 .card-preview p {
···
    ========================================================================== */
 
 .card-hover-border:hover {
-    border-left-color: var(--color-secondary);
+    border-inline-start-color: var(--color-secondary);
 }
 
 .card-hover-title:hover .card-title {

crates/weaver-app/assets/styling/editor.css

···
     background: var(--color-base);
     border: 1px solid var(--color-overlay);
     color: var(--color-text);
+    /* break-spaces ensures trailing whitespace takes up space and allows cursor placement */
+    white-space-collapse: break-spaces;
 }
 
 .editor-content:focus {
···
 
 .editor-debug {
     padding: 8px;
-    padding-right: 0;
+    padding-inline-end: 0;
     background: var(--color-base);
     font-family: var(--font-mono);
     font-size: 12px;
···
 
 /* Editor page header with report button */
 .editor-header {
-    padding-left: 6rem;
+    padding-inline-start: 6rem;
     background: var(--color-base);
 }
 
···
 
 .report-dialog-overlay {
     position: fixed;
+    inset-inline: 0;
     top: 0;
-    left: 0;
-    right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.6);
     display: flex;
···
     display: flex;
     align-items: center;
     gap: 12px;
-    margin-left: auto;
+    margin-inline-start: auto;
     flex-shrink: 0;
 }
 
···
 
 .publish-dialog-overlay {
     position: fixed;
+    inset-inline: 0;
     top: 0;
-    left: 0;
-    right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.6);
     display: flex;
···
     font-weight: 500;
     font-family: var(--font-mono);
     text-transform: uppercase;
-    margin-left: -6px;
+    margin-inline-start: -6px;
     position: relative;
     overflow: hidden;
 }
···
 }
 
 .collab-avatar:first-child {
-    margin-left: 0;
+    margin-inline-start: 0;
 }
 
 .collab-avatar.collab-overflow {
···
 /* Collaborators panel overlay */
 .collaborators-overlay {
     position: fixed;
+    inset-inline: 0;
     top: 0;
-    left: 0;
-    right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.4);
     display: flex;
···
 
 .invite-dialog-overlay {
     position: fixed;
+    inset-inline: 0;
     top: 0;
-    left: 0;
-    right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.4);
     display: flex;
···
     margin: 6px 0 0 0;
     padding: 8px;
     background: var(--color-overlay);
-    border-left: 2px solid var(--color-border);
+    border-inline-start: 2px solid var(--color-border);
 }
 
 .invite-actions,
···
 
 .remote-cursors-overlay {
     position: absolute;
+    inset-inline: 0;
     top: 0;
-    left: 0;
-    right: 0;
     bottom: 0;
     pointer-events: none;
     z-index: 10;
···
         opacity: 0.5;
     }
 }
+
+/* ==========================================================================
+   Footnotes (Editor Mode) - styled but visible, no reordering
+   ========================================================================== */
+
+/* Inline footnote reference [^name] */
+.footnote-ref {
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    color: var(--color-subtle);
+    background: color-mix(in srgb, var(--color-surface) 10%, transparent);
+    padding: 0 2px;
+}
+
+/* Footnote definition wrapper - stays in place, no reordering */
+.footnote-def-editor {
+    margin-bottom: 1rem;
+    margin-top: -1rem;
+    margin-inline-start: 2rem;
+    padding: 0 0.5rem;
+    border-inline-start: 2px solid var(--color-border);
+}
+
+/* The [^name]: prefix in definitions */
+.footnote-def-syntax {
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    color: var(--color-subtle);
+}
+
+/* Inner paragraphs in footnote defs */
+.footnote-def-editor p {
+    margin: 0;
+    display: inline;
+}

crates/weaver-app/assets/styling/entry-actions.css

···
     display: block;
     width: 100%;
     padding: 0.5rem 0.75rem;
-    text-align: left;
+    text-align: start;
     background: none;
     border: none;
     cursor: pointer;

crates/weaver-app/assets/styling/entry-card.css

···
     display: block;
     background: var(--color-surface);
     box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent);
-    border-left: 2px solid transparent;
+    border-inline-start: 2px solid transparent;
     padding: 1.25rem;
     text-decoration: none;
     color: var(--color-text);
···
 
 .entry-card-link:hover {
     box-shadow: 0 2px 4px color-mix(in srgb, var(--color-text) 10%, transparent);
-    border-left-color: var(--color-secondary);
+    border-inline-start-color: var(--color-secondary);
 }
 
 .entry-card-link:hover .entry-card-title {
···
 }
 
 .feed-entry-card:hover {
-    border-left: 2px solid var(--color-secondary);
-    margin-left: -1px;
+    border-inline-start: 2px solid var(--color-secondary);
+    margin-inline-start: -1px;
 }
 
 .feed-entry-card:hover .entry-card-title {
···
 }
 
 .feed-entry-card .entry-card-byline .entry-card-date {
-    margin-left: auto;
+    margin-inline-start: auto;
 }
 
 /* Date in header (no author) aligns right */
 .feed-entry-card .entry-card-header .entry-card-date {
-    margin-left: auto;
+    margin-inline-start: auto;
 }
 
 .entry-card-stats {
···
 
 .entry-card-stats .word-count::after {
     content: "·";
-    margin-left: 0.5rem;
+    margin-inline-start: 0.5rem;
 }
 
 .entry-card-tags {
···
     font-size: 0.875rem;
     font-weight: 600;
     margin-top: 0.5rem;
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
 }
 
 .entry-card-preview p {
···
     .feed-entry-card {
         box-shadow: none;
         border-top: 1px solid var(--color-border);
-        border-right: 1px solid var(--color-border);
+        border-inline-end: 1px solid var(--color-border);
         border-bottom: 1px solid var(--color-border);
 
-        border-left: 1px solid var(--color-border);
-        /* Keep border-left as accent */
+        border-inline-start: 1px solid var(--color-border);
+        /* Keep border-inline-start as accent */
     }
 }

crates/weaver-app/assets/styling/entry.css

···
 
 .entry-footer-nav .nav-button-prev {
     align-items: flex-start;
-    text-align: left;
+    text-align: start;
 }
 
 .entry-footer-nav .nav-button-next {
     align-items: flex-end;
-    text-align: right;
-    margin-left: auto;
+    text-align: end;
+    margin-inline-start: auto;
 }
 
 .entry-footer-nav .nav-arrow {
···
 
 .entry-reading-stats {
     color: var(--color-subtle);
-    margin-left: auto;
+    margin-inline-start: auto;
     margin-top: 0.25rem;
 }
 
 .entry-reading-stats .word-count::after {
     content: "·";
-    margin-left: 0.5rem;
+    margin-inline-start: 0.5rem;
 }
 
 .entry-date {
-    margin-left: auto;
+    margin-inline-start: auto;
     font-weight: 400;
     align-items: last baseline;
     color: var(--color-subtle);
···
 }
 
 .entry-content-main blockquote {
-    border-left-color: var(--color-secondary);
+    border-inline-start-color: var(--color-secondary);
     background: var(--color-surface);
 }
 
···
 
     .entry-header .nav-button-next {
         order: 1;
-        margin-left: auto;
+        margin-inline-start: auto;
     }
 }
 

crates/weaver-app/assets/styling/home.css

···
 .pinned-items .entry-card,
 .pinned-items .feed-entry-card,
 .pinned-items .notebook-card {
-    border-left: 3px solid var(--color-primary) !important;
+    border-inline-start: 3px solid var(--color-primary) !important;
 }
 
 .pinned-items .feed-entry-card:hover {
-    border-left: 3px solid var(--color-secondary) !important;
-    margin-left: 0;
+    border-inline-start: 3px solid var(--color-secondary) !important;
+    margin-inline-start: 0;
 }
 
 .feed-section {

crates/weaver-app/assets/styling/invites.css

···
     margin: 0.5rem 0 0 0;
     padding: 0.5rem;
     background: var(--color-background);
-    border-left: 3px solid var(--color-primary);
+    border-inline-start: 3px solid var(--color-primary);
     font-style: italic;
 }
 

crates/weaver-app/assets/styling/navbar.css

···
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding-left: 1rem;
+    padding-inline-start: 1rem;
     padding-top: 1rem;
-    padding-right: 1rem;
+    padding-inline-end: 1rem;
 }
 
 .breadcrumbs {
···
     display: flex;
     align-items: center;
     gap: 1rem;
-    margin-left: auto;
-    margin-right: 1rem;
+    margin-inline-start: auto;
+    margin-inline-end: 1rem;
 }
 
 .nav-tool-link {

crates/weaver-app/assets/styling/notebook-card.css

···
     display: block;
     text-decoration: none;
     color: var(--color-text);
-    border-left: 3px solid transparent;
-    padding-left: 0.75rem;
-    margin-left: -0.75rem;
+    border-inline-start: 3px solid transparent;
+    padding-inline-start: 0.75rem;
+    margin-inline-start: -0.75rem;
     transition: border-color 0.2s ease;
 }
 
 .notebook-card-header-link:hover {
-    border-left-color: var(--color-primary);
+    border-inline-start-color: var(--color-primary);
 }
 
 .notebook-card-header-link:hover .notebook-card-title {
···
 .notebook-card-date {
     color: var(--color-muted);
     font-size: 0.85rem;
-    margin-left: 0.25rem;
+    margin-inline-start: 0.25rem;
 }
 
 .notebook-card-authors {
···
     display: block;
     text-decoration: none;
     color: var(--color-text);
-    border-left: 2px solid transparent;
+    border-inline-start: 2px solid transparent;
     border-top: 1px solid var(--color-border);
-    padding-left: 0.625rem; /* 0.5 grid */
+    padding-inline-start: 0.625rem; /* 0.5 grid */
     padding-top: 1.25rem;
-    margin-left: -0.625rem;
-    transition: border-left-color 0.2s ease;
+    margin-inline-start: -0.625rem;
+    transition: border-inline-start-color 0.2s ease;
 }
 
 .notebook-entry-preview-link:first-child {
···
 }
 
 .notebook-entry-preview-link:hover {
-    border-left-color: var(--color-secondary);
+    border-inline-start-color: var(--color-secondary);
 }
 
 .notebook-entry-preview-link:hover .entry-preview-title {
···
     font-size: 0.875rem;
     font-weight: 600;
     margin-top: 0;
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
 }
 
 .entry-preview-content code {

crates/weaver-app/assets/styling/notebook-cover.css

···
 @media (min-width: 1400px) {
     .notebook-cover {
         border-top: 1px solid var(--color-border);
-        border-right: 1px solid var(--color-border);
+        border-inline-end: 1px solid var(--color-border);
         border-bottom: 1px solid var(--color-border);
         padding: 1.25rem;
     }
···
 
 .notebook-cover-actions .button {
     width: 100%;
-    text-align: left;
+    text-align: start;
     border-radius: 0;
 }

crates/weaver-app/assets/styling/profile-actions.css

···
 
 .profile-actions-container {
     padding-top: 2.25rem;
-    padding-right: 5rem;
+    padding-inline-end: 5rem;
 }
 
 .profile-actions-title {
···
 /* Match notebook-add-entry styling */
 .profile-actions-list .button {
     width: 100%;
-    text-align: left;
+    text-align: start;
     font-size: 0.85rem;
     color: var(--color-primary);
     background: transparent;

crates/weaver-app/assets/styling/profile.css

···
     }
 
     .profile-extras {
-        padding-left: 1rem;
-        border-left: 1.5px dashed var(--color-border);
+        padding-inline-start: 1rem;
+        border-inline-start: 1.5px dashed var(--color-border);
     }
 
     .profile-block {
···
     }
 
     .profile-name-section {
-        margin-left: 1rem;
+        margin-inline-start: 1rem;
         margin-top: -0.5rem;
     }
 }
···
 @media (min-width: 1400px) {
     .profile-display {
         border-top: 1.5px solid var(--color-border);
-        border-right: 1.5px solid var(--color-border);
+        border-inline-end: 1.5px solid var(--color-border);
     }
 }
 

crates/weaver-app/assets/styling/record-view.css

···
 .metadata-label::after {
     content: ":";
     font-size: 0.8rem;
-    margin-left: 0.25rem;
+    margin-inline-start: 0.25rem;
 }
 
 .metadata-value {
···
 }
 
 .tab-button.edit-button {
-    margin-left: auto;
+    margin-inline-start: auto;
 }
 
 .action-buttons-group {
-    margin-left: auto;
+    margin-inline-start: auto;
     display: flex;
     gap: 0;
     align-items: center;
···
     padding: 0.5rem 1rem;
     background: transparent;
     border: none;
-    text-align: left;
+    text-align: start;
     cursor: pointer;
     color: var(--color-text);
     font-family: var(--font-mono);
···
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    border-left: 1px dashed var(--color-subtle);
+    border-inline-start: 1px dashed var(--color-subtle);
 }
 
 .record-field {
     display: flex;
     flex-direction: column;
     padding: 0rem 0 0rem 1rem;
-    padding-right: 1rem;
-    margin-left: -1px;
-    border-left: 2px solid var(--color-secondary);
+    padding-inline-end: 1rem;
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid var(--color-secondary);
     border-bottom: 1px dashed var(--color-subtle);
     z-index: 1;
 }
 
 .record-field.field-error {
-    border-left-color: var(--color-error);
+    border-inline-start-color: var(--color-error);
     background-color: rgba(255, 107, 107, 0.05);
 }
 
···
     font-size: 0.85rem;
     color: var(--color-error);
     padding: 0.25rem 0;
-    border-left: 2px solid var(--color-error);
+    border-inline-start: 2px solid var(--color-error);
     border-bottom: 1px dashed var(--color-error);
-    padding-left: 0.5rem;
+    padding-inline-start: 0.5rem;
     word-wrap: break-word;
-    margin-left: -1px;
+    margin-inline-start: -1px;
     word-break: break-word;
     overflow-wrap: break-word;
 }
···
     color: var(--color-subtle);
     font-size: 0.9rem;
     font-weight: 400;
-    padding-left: 0.125rem;
+    padding-inline-start: 0.125rem;
     padding-top: 0.5rem;
 }
 
···
 
 .record-section {
     position: relative;
-    margin-left: 1.5rem;
-    border-left: 1px dashed var(--color-border);
+    margin-inline-start: 1.5rem;
+    border-inline-start: 1px dashed var(--color-border);
 }
 
 .section-content .record-section {
     position: relative;
-    border-left: 1px dashed var(--color-border);
+    border-inline-start: 1px dashed var(--color-border);
 }
 
 .array-item .record-section {
     position: relative;
-    border-left: 1px dashed var(--color-border);
+    border-inline-start: 1px dashed var(--color-border);
 }
 
 .section-label {
···
     color: var(--color-primary);
     font-size: 1rem;
     font-weight: 600;
-    padding-left: 1rem;
+    padding-inline-start: 1rem;
     padding-top: 0.5rem;
     padding-bottom: 0.25rem;
-    margin-left: -1px;
-    border-left: 2px solid var(--color-primary);
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid var(--color-primary);
     border-bottom: 1px dashed var(--color-muted);
 }
 
···
     color: var(--color-tertiary);
     font-size: 0.9rem;
     font-weight: 600;
-    padding-left: 1rem;
+    padding-inline-start: 1rem;
     padding-top: 0.5rem;
-    margin-left: -1px;
-    border-left: 2px solid var(--color-secondary);
+    margin-inline-start: -1px;
+    border-inline-start: 2px solid var(--color-secondary);
 }
 
 .section-content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    padding-right: 1rem;
+    padding-inline-end: 1rem;
 }
 
 .section-content .record-field {
-    border-left-color: var(--color-secondary);
+    border-inline-start-color: var(--color-secondary);
     opacity: 0.95;
     align-self: stretch;
     width: 100%;
···
 
 .validation-errors .error {
     padding: 0.25rem 0;
-    border-left: 2px solid var(--color-error);
-    padding-left: 0.5rem;
+    border-inline-start: 2px solid var(--color-error);
+    padding-inline-start: 0.5rem;
     margin: 0.25rem 0;
     word-wrap: break-word;
     word-break: break-word;
···
     width: 100%;
     display: flex;
     flex-direction: column;
-    margin-left: 1.48rem;
+    margin-inline-start: 1.48rem;
 }
 
 /* Pretty Editor Input Fields */
···
 .record-field textarea::-webkit-resizer {
     background: transparent;
     border: 2px solid var(--color-border);
-    border-left: none;
+    border-inline-start: none;
     border-bottom: none;
     border-top: none;
 }
···
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     padding: 0.25rem 0.25rem;
-    margin-right: 0.5rem;
+    margin-inline-end: 0.5rem;
     margin-bottom: 0.2rem;
     cursor: pointer;
     transition:
···
     align-items: center;
     padding: 0.75rem 0 0rem 0rem;
     margin-bottom: 1rem;
-    margin-left: 1.5rem;
-    border-left: 1px solid var(--color-border);
+    margin-inline-start: 1.5rem;
+    border-inline-start: 1px solid var(--color-border);
 }
 
 .add-field-widget input[type="text"] {
···
     background: var(--color-background-alt, rgba(0, 0, 0, 0.2));
     border: 1px solid var(--color-border);
     padding: 0.3rem 0.5rem;
-    margin-left: -1px;
+    margin-inline-start: -1px;
     outline: none;
 }
 
···
     text-transform: uppercase;
     letter-spacing: 0.05em;
     padding: 0.3rem 0.75rem;
-    margin-left: -1px;
+    margin-inline-start: -1px;
     background: transparent;
     border: 1px solid var(--color-border);
     color: var(--color-primary);
···
     text-transform: uppercase;
     letter-spacing: 0.05em;
     padding: 0.36rem 0.75rem;
-    margin-left: -1px;
+    margin-inline-start: -1px;
     background: transparent;
     border: 1px solid var(--color-primary);
     color: var(--color-primary);
···
     background: var(--color-surface);
     border: 1px dashed var(--color-border);
     padding: 0.25rem 0.5rem;
-    margin-right: 0.5rem;
+    margin-inline-end: 0.5rem;
     margin-bottom: -0.2rem;
     cursor: pointer;
     transition:
···
 
 .accordion-content {
     grid-template-rows: 1fr;
-    padding-left: 46px;
+    padding-inline-start: 46px;
 }
 
 .accordion-content .section-content {
-    margin-left: -1px;
+    margin-inline-start: -1px;
 }
 
 .accordion-content .record-field {
-    margin-left: 0px;
+    margin-inline-start: 0px;
 }
 
 .accordion-content .array-item {
-    margin-left: 0px;
+    margin-inline-start: 0px;
 }
 
 .accordion-content .array-item .section-content {
···
 }
 
 .accordion-content .array-item .record-section {
-    margin-left: 1.5rem;
+    margin-inline-start: 1.5rem;
 }
 
 .accordion-content .array-item .record-section .record-field {
-    margin-left: -1px;
+    margin-inline-start: -1px;
 }
 
 .accordion-content .array-item .record-section .accordion-trigger .section-label {
-    margin-left: -2px;
+    margin-inline-start: -2px;
 }
 
 .accordion-trigger {
···
 }
 
 .accordion {
-    margin-left: -46px;
+    margin-inline-start: -46px;
 }

crates/weaver-app/src/components/editor/beforeinput.rs

···
         // === Insertion ===
         InputType::InsertText => {
             if let Some(text) = ctx.data {
-                // Simple text insert - update model, let browser handle DOM
-                // This mirrors the simple delete handling: we track in model,
-                // browser handles visual update, DOM sync skips innerHTML for
-                // cursor paragraph when syntax is unchanged
+                use super::FORCE_INNERHTML_UPDATE;
+
                 let action = EditorAction::Insert {
                     text: text.clone(),
                     range,
                 };
                 execute_action(doc, &action);
-                tracing::trace!(
-                    text_len = text.len(),
-                    range_start = range.start,
-                    range_end = range.end,
-                    cursor_after = doc.cursor.read().offset,
-                    "insertText: updated model, PassThrough to browser"
-                );
-                BeforeInputResult::PassThrough
+
+                // Log model content after insert to detect ZWC contamination
+                if tracing::enabled!(tracing::Level::TRACE) {
+                    let content = doc.content();
+                    tracing::trace!(
+                        text_len = text.len(),
+                        range_start = range.start,
+                        range_end = range.end,
+                        cursor_after = doc.cursor.read().offset,
+                        model_len = content.len(),
+                        model_chars = content.chars().count(),
+                        model_content = %content.escape_debug(),
+                        force_innerhtml = FORCE_INNERHTML_UPDATE,
+                        "insertText: updated model"
+                    );
+                }
+
+                // When FORCE_INNERHTML_UPDATE is true, dom_sync will always replace
+                // innerHTML. We must preventDefault to avoid browser's default action
+                // racing with our innerHTML update and causing double-insertion.
+                if FORCE_INNERHTML_UPDATE {
+                    BeforeInputResult::Handled
+                } else {
+                    // PassThrough: browser handles DOM, we just track in model.
+                    // dom_sync will skip innerHTML for cursor paragraph when syntax unchanged.
+                    BeforeInputResult::PassThrough
+                }
             } else {
                 BeforeInputResult::PassThrough
             }
···
             };
 
             if needs_special_handling {
-                // Complex delete - we handle everything, prevent browser default
+                // Handle fully when: complex delete OR when dom_sync will replace innerHTML
+                // (FORCE_INNERHTML_UPDATE). PassThrough + innerHTML causes double-deletion.
                 let action = EditorAction::DeleteBackward { range };
                 execute_action(doc, &action);
                 BeforeInputResult::Handled
···
                     doc.selection.set(None);
                 }
                 tracing::debug!("deleteContentBackward: after model update, returning PassThrough");
-                BeforeInputResult::PassThrough
+                if super::FORCE_INNERHTML_UPDATE {
+                    BeforeInputResult::Handled
+                } else {
+                    BeforeInputResult::PassThrough
+                }
             }
         }
 
···
             };
 
             if needs_special_handling {
+                // Handle fully when: complex delete OR when dom_sync will replace innerHTML
                 let action = EditorAction::DeleteForward { range };
                 execute_action(doc, &action);
                 BeforeInputResult::Handled
···
                     let _ = doc.remove_tracked(range.start, 1);
                     doc.selection.set(None);
                 }
-                BeforeInputResult::PassThrough
+                if super::FORCE_INNERHTML_UPDATE {
+                    BeforeInputResult::Handled
+                } else {
+                    BeforeInputResult::PassThrough
+                }
             }
         }
 

crates/weaver-app/src/components/editor/dom_sync.rs

···
             }
 
             if needs_update {
-                // TESTING: Force innerHTML update to measure timing cost
-                // TODO: Remove this flag after benchmarking
-                const FORCE_INNERHTML_UPDATE: bool = true;
+                use super::FORCE_INNERHTML_UPDATE;
 
                 // For cursor paragraph: only update if syntax/formatting changed
                 // This prevents destroying browser selection during fast typing
···
                     // Update hash - browser native editing has the correct content
                     let _ = existing_elem.set_attribute("data-hash", &new_hash);
                 } else {
+                    // Log old innerHTML before replacement to see what browser did
+                    if tracing::enabled!(tracing::Level::TRACE) {
+                        let old_inner = existing_elem.inner_html();
+                        tracing::trace!(
+                            para_id = %para_id,
+                            old_inner = %old_inner.escape_debug(),
+                            new_html = %new_para.html.escape_debug(),
+                            "update_paragraph_dom: replacing innerHTML"
+                        );
+                    }
+
                     // Timing instrumentation for innerHTML update cost
                     let start = web_sys::window()
                         .and_then(|w| w.performance())

crates/weaver-app/src/components/editor/mod.rs

···
 #[cfg(test)]
 mod tests;
 
+/// When true, always update innerHTML even for cursor paragraph during typing.
+/// This ensures syntax/formatting changes are immediately visible, but requires
+/// using `Handled` (preventDefault) for InsertText to avoid double-insertion
+/// from browser's default action racing with our innerHTML update.
+///
+/// TODO: Replace with granular detection of syntax/formatting changes to allow
+/// PassThrough optimization when only text content changes.
+pub(crate) const FORCE_INNERHTML_UPDATE: bool = true;
+
 // Main component
 pub use component::MarkdownEditor;
 

crates/weaver-app/src/components/editor/publish.rs

···
             .title(doc.title())
             .path(path)
             .created_at(Datetime::now())
+            .updated_at(Datetime::now())
             .maybe_tags(tags)
             .maybe_embeds(entry_embeds)
             .build();
···
             .title(doc.title())
             .path(path)
             .created_at(Datetime::now())
+            .updated_at(Datetime::now())
             .maybe_tags(tags)
             .maybe_embeds(entry_embeds)
             .build();

crates/weaver-app/src/components/editor/render.rs

···
     let fn_start = crate::perf::now();
     let source = text.to_string();
 
+    // Log source entering renderer to detect ZWC/space issues
+    if tracing::enabled!(target: "weaver::render", tracing::Level::TRACE) {
+        tracing::trace!(
+            target: "weaver::render",
+            source_len = source.len(),
+            source_chars = source.chars().count(),
+            source_content = %source.escape_debug(),
+            "render_paragraphs: source entering renderer"
+        );
+    }
+
     // Handle empty document
     if source.is_empty() {
         let empty_node_id = "n0".to_string();

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__blockquote.snap

···
   char_range:
     - 0
     - 18
-  html: "<blockquote>\n<p id=\"n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"1\">&gt;</span> This is a quote\n</p>\n</blockquote>\n"
+  html: "<blockquote>\n<p id=\"p-0-n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"1\">&gt;</span> This is a quote\n</p>\n"
   offset_map:
     - byte_range:
         - 2
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 1
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 1
         - 2
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 1
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 2
         - 17
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 2
       child_index: ~
       utf16_len: 15
···
       char_range:
         - 17
         - 18
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 17
       child_index: ~
       utf16_len: 1
···
   char_range:
     - 22
     - 41
-  html: "<p id=\"n1\">With multiple lines</p>\n"
+  html: "<span id=\"p-1-n0\" class=\"md-syntax-block\" data-syn-id=\"s1\" data-char-start=\"18\" data-char-end=\"22\">&gt;\n&gt; </span></span>\n<p id=\"p-1-n1\" dir=\"ltr\">With multiple lines</p>\n"
   offset_map:
     - byte_range:
-        - 0
-        - 0
+        - 18
+        - 22
       char_range:
+        - 18
         - 22
+      node_id: p-1-n0
+      char_offset_in_node: 0
+      child_index: ~
+      utf16_len: 4
+    - byte_range:
         - 22
-      node_id: n1
+        - 22
+      char_range:
+        - 22
+        - 22
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
     - byte_range:
-        - 0
-        - 19
+        - 22
+        - 41
       char_range:
         - 22
         - 41
-      node_id: n1
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 19

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__bold.snap

···
   char_range:
     - 0
     - 18
-  html: "<p id=\"n0\">Some <span class=\"md-syntax-inline\" data-syn-id=\"s0\" data-char-start=\"5\" data-char-end=\"7\">**</span><strong>bold</strong><span class=\"md-syntax-inline\" data-syn-id=\"s1\" data-char-start=\"11\" data-char-end=\"13\">**</span> text</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">Some <span class=\"md-syntax-inline\" data-syn-id=\"s0\" data-char-start=\"5\" data-char-end=\"7\">**</span><strong>bold</strong><span class=\"md-syntax-inline\" data-syn-id=\"s1\" data-char-start=\"11\" data-char-end=\"13\">**</span> text</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 5
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 5
···
       char_range:
         - 5
         - 7
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 5
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 7
         - 11
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 7
       child_index: ~
       utf16_len: 4
···
       char_range:
         - 11
         - 13
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 11
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 13
         - 18
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 13
       child_index: ~
       utf16_len: 5

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__bold_italic.snap

···
   char_range:
     - 0
     - 27
-  html: "<p id=\"n0\">Some <span class=\"md-syntax-inline\" data-syn-id=\"s0\" data-char-start=\"5\" data-char-end=\"6\">*</span><em><span class=\"md-syntax-inline\" data-syn-id=\"s1\" data-char-start=\"6\" data-char-end=\"8\">**</span><strong>bold italic</strong><span class=\"md-syntax-inline\" data-syn-id=\"s2\" data-char-start=\"19\" data-char-end=\"21\">**</span></em><span class=\"md-syntax-inline\" data-syn-id=\"s3\" data-char-start=\"21\" data-char-end=\"22\">*</span> text</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">Some <span class=\"md-syntax-inline\" data-syn-id=\"s0\" data-char-start=\"5\" data-char-end=\"6\">*</span><em><span class=\"md-syntax-inline\" data-syn-id=\"s1\" data-char-start=\"6\" data-char-end=\"8\">**</span><strong>bold italic</strong><span class=\"md-syntax-inline\" data-syn-id=\"s2\" data-char-start=\"19\" data-char-end=\"21\">**</span></em><span class=\"md-syntax-inline\" data-syn-id=\"s3\" data-char-start=\"21\" data-char-end=\"22\">*</span> text</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 5
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 5
···
       char_range:
         - 5
         - 6
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 5
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 6
         - 8
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 6
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 8
         - 19
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 8
       child_index: ~
       utf16_len: 11
···
       char_range:
         - 19
         - 21
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 19
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 21
         - 22
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 21
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 22
         - 27
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 22
       child_index: ~
       utf16_len: 5

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__code_block_fenced.snap

···
   char_range:
     - 0
     - 24
-  html: "<span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"8\" spellcheck=\"false\">```rust</span>\n<pre data-node-id=\"n0\"><code class=\"wvc-code language-Rust\"><span class=\"wvc-source wvc-rust\"><span class=\"wvc-meta wvc-function wvc-rust\"><span class=\"wvc-meta wvc-function wvc-rust\"><span class=\"wvc-storage wvc-type wvc-function wvc-rust\">fn</span> </span><span class=\"wvc-entity wvc-name wvc-function wvc-rust\">main</span></span><span class=\"wvc-meta wvc-function wvc-rust\"><span class=\"wvc-meta wvc-function wvc-parameters wvc-rust\"><span class=\"wvc-punctuation wvc-section wvc-parameters wvc-begin wvc-rust\">(</span></span><span class=\"wvc-meta wvc-function wvc-rust\"><span class=\"wvc-meta wvc-function wvc-parameters wvc-rust\"><span class=\"wvc-punctuation wvc-section wvc-parameters wvc-end wvc-rust\">)</span></span></span></span><span class=\"wvc-meta wvc-function wvc-rust\"> </span><span class=\"wvc-meta wvc-function wvc-rust\"><span class=\"wvc-meta wvc-block wvc-rust\"><span class=\"wvc-punctuation wvc-section wvc-block wvc-begin wvc-rust\">{</span></span><span class=\"wvc-meta wvc-block wvc-rust\"><span class=\"wvc-punctuation wvc-section wvc-block wvc-end wvc-rust\">}</span></span></span>\n</span></code></pre><span class=\"md-syntax-block\" data-syn-id=\"s1\" data-char-start=\"21\" data-char-end=\"24\" spellcheck=\"false\">```</span>"
+  html: "<span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"8\" spellcheck=\"false\">```rust</span>\n<pre data-node-id=\"p-0-n0\"><code class=\"wvc-code language-Rust\"><span class=\"wvc-source wvc-rust\"><span class=\"wvc-meta wvc-function wvc-rust\"><span class=\"wvc-meta wvc-function wvc-rust\"><span class=\"wvc-storage wvc-type wvc-function wvc-rust\">fn</span> </span><span class=\"wvc-entity wvc-name wvc-function wvc-rust\">main</span></span><span class=\"wvc-meta wvc-function wvc-rust\"><span class=\"wvc-meta wvc-function wvc-parameters wvc-rust\"><span class=\"wvc-punctuation wvc-section wvc-parameters wvc-begin wvc-rust\">(</span></span><span class=\"wvc-meta wvc-function wvc-rust\"><span class=\"wvc-meta wvc-function wvc-parameters wvc-rust\"><span class=\"wvc-punctuation wvc-section wvc-parameters wvc-end wvc-rust\">)</span></span></span></span><span class=\"wvc-meta wvc-function wvc-rust\"> </span><span class=\"wvc-meta wvc-function wvc-rust\"><span class=\"wvc-meta wvc-block wvc-rust\"><span class=\"wvc-punctuation wvc-section wvc-block wvc-begin wvc-rust\">{</span></span><span class=\"wvc-meta wvc-block wvc-rust\"><span class=\"wvc-punctuation wvc-section wvc-block wvc-end wvc-rust\">}</span></span></span>\n</span></code></pre><span class=\"md-syntax-block\" data-syn-id=\"s1\" data-char-start=\"21\" data-char-end=\"24\" spellcheck=\"false\">```</span>"
   offset_map:
     - byte_range:
         - 8
···
       char_range:
         - 8
         - 21
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 13

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__gap_between_blocks.snap

···
   char_range:
     - 0
     - 10
-  html: "<h1 data-node-id=\"n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"2\"># </span>Heading\n</h1>\n"
+  html: "<h1 data-node-id=\"p-0-n0\" dir=\"ltr\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"2\"># </span>Heading\n</h1>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 2
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 2
         - 9
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 2
       child_index: ~
       utf16_len: 7
···
       char_range:
         - 9
         - 10
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 9
       child_index: ~
       utf16_len: 1
···
   char_range:
     - 11
     - 26
-  html: "<p id=\"n1\">Paragraph below</p>\n"
+  html: "<span id=\"p-1-n0\">\n</span>\n<p id=\"p-1-n1\" dir=\"ltr\">Paragraph below</p>\n"
   offset_map:
     - byte_range:
-        - 0
-        - 0
+        - 10
+        - 11
+      char_range:
+        - 10
+        - 11
+      node_id: p-1-n0
+      char_offset_in_node: 0
+      child_index: ~
+      utf16_len: 1
+    - byte_range:
+        - 11
+        - 11
       char_range:
         - 11
         - 11
-      node_id: n1
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
     - byte_range:
-        - 0
-        - 15
+        - 11
+        - 26
       char_range:
         - 11
         - 26
-      node_id: n1
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 15

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__hard_break.snap

···
   char_range:
     - 0
     - 19
-  html: "<p id=\"n0\">Line one<span class=\"md-placeholder\" data-syn-id=\"s0\" data-char-start=\"8\" data-char-end=\"10\">  </span><br /> Line two</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">Line one<span class=\"md-placeholder\" data-syn-id=\"s0\" data-char-start=\"8\" data-char-end=\"10\">  </span><br />​Line two</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 8
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 8
···
       char_range:
         - 8
         - 10
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 8
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 10
         - 11
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 10
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 11
         - 19
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 11
       child_index: ~
       utf16_len: 8

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__heading_h1.snap

···
   char_range:
     - 0
     - 11
-  html: "<h1 data-node-id=\"n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"2\"># </span>Heading 1</h1>\n"
+  html: "<h1 data-node-id=\"p-0-n0\" dir=\"ltr\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"2\"># </span>Heading 1</h1>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 2
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 2
         - 11
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 2
       child_index: ~
       utf16_len: 9

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__heading_levels.snap

···
   char_range:
     - 0
     - 5
-  html: "<h1 data-node-id=\"n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"2\"># </span>H1\n</h1>\n"
+  html: "<h1 data-node-id=\"p-0-n0\" dir=\"ltr\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"2\"># </span>H1\n</h1>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 2
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 2
         - 4
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 2
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 4
         - 5
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 4
       child_index: ~
       utf16_len: 1
···
   char_range:
     - 6
     - 12
-  html: "<h2 data-node-id=\"n1\"><span class=\"md-syntax-block\" data-syn-id=\"s1\" data-char-start=\"6\" data-char-end=\"9\">## </span>H2\n</h2>\n"
+  html: "<span id=\"p-1-n0\">\n</span>\n<h2 data-node-id=\"p-1-n1\" dir=\"ltr\"><span class=\"md-syntax-block\" data-syn-id=\"s1\" data-char-start=\"6\" data-char-end=\"9\">## </span>H2\n</h2>\n"
   offset_map:
     - byte_range:
-        - 0
-        - 0
+        - 5
+        - 6
       char_range:
+        - 5
         - 6
+      node_id: p-1-n0
+      char_offset_in_node: 0
+      child_index: ~
+      utf16_len: 1
+    - byte_range:
+        - 6
+        - 6
+      char_range:
         - 6
-      node_id: n1
+        - 6
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
     - byte_range:
-        - 0
-        - 3
+        - 6
+        - 9
       char_range:
         - 6
         - 9
-      node_id: n1
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 3
     - byte_range:
-        - 3
-        - 5
+        - 9
+        - 11
       char_range:
         - 9
         - 11
-      node_id: n1
+      node_id: p-1-n1
       char_offset_in_node: 3
       child_index: ~
       utf16_len: 2
     - byte_range:
-        - 5
-        - 6
+        - 11
+        - 12
       char_range:
         - 11
         - 12
-      node_id: n1
+      node_id: p-1-n1
       char_offset_in_node: 5
       child_index: ~
       utf16_len: 1
···
   char_range:
     - 13
     - 20
-  html: "<h3 data-node-id=\"n2\"><span class=\"md-syntax-block\" data-syn-id=\"s2\" data-char-start=\"13\" data-char-end=\"17\">### </span>H3\n</h3>\n"
+  html: "<span id=\"p-2-n0\">\n</span>\n<h3 data-node-id=\"p-2-n1\" dir=\"ltr\"><span class=\"md-syntax-block\" data-syn-id=\"s2\" data-char-start=\"13\" data-char-end=\"17\">### </span>H3\n</h3>\n"
   offset_map:
     - byte_range:
-        - 0
-        - 0
+        - 12
+        - 13
       char_range:
+        - 12
         - 13
+      node_id: p-2-n0
+      char_offset_in_node: 0
+      child_index: ~
+      utf16_len: 1
+    - byte_range:
         - 13
-      node_id: n2
+        - 13
+      char_range:
+        - 13
+        - 13
+      node_id: p-2-n1
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
     - byte_range:
-        - 0
-        - 4
+        - 13
+        - 17
       char_range:
         - 13
         - 17
-      node_id: n2
+      node_id: p-2-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 4
     - byte_range:
-        - 4
-        - 6
+        - 17
+        - 19
       char_range:
         - 17
         - 19
-      node_id: n2
+      node_id: p-2-n1
       char_offset_in_node: 4
       child_index: ~
       utf16_len: 2
     - byte_range:
-        - 6
-        - 7
+        - 19
+        - 20
       char_range:
         - 19
         - 20
-      node_id: n2
+      node_id: p-2-n1
       char_offset_in_node: 6
       child_index: ~
       utf16_len: 1
···
   char_range:
     - 21
     - 28
-  html: "<h4 data-node-id=\"n3\"><span class=\"md-syntax-block\" data-syn-id=\"s3\" data-char-start=\"21\" data-char-end=\"26\">#### </span>H4</h4>\n"
+  html: "<span id=\"p-3-n0\">\n</span>\n<h4 data-node-id=\"p-3-n1\" dir=\"ltr\"><span class=\"md-syntax-block\" data-syn-id=\"s3\" data-char-start=\"21\" data-char-end=\"26\">#### </span>H4</h4>\n"
   offset_map:
     - byte_range:
-        - 0
-        - 0
+        - 20
+        - 21
       char_range:
+        - 20
+        - 21
+      node_id: p-3-n0
+      char_offset_in_node: 0
+      child_index: ~
+      utf16_len: 1
+    - byte_range:
         - 21
         - 21
-      node_id: n3
+      char_range:
+        - 21
+        - 21
+      node_id: p-3-n1
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
     - byte_range:
-        - 0
-        - 5
+        - 21
+        - 26
       char_range:
         - 21
         - 26
-      node_id: n3
+      node_id: p-3-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 5
     - byte_range:
-        - 5
-        - 7
+        - 26
+        - 28
       char_range:
         - 26
         - 28
-      node_id: n3
+      node_id: p-3-n1
       char_offset_in_node: 5
       child_index: ~
       utf16_len: 2

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__inline_code.snap

···
   char_range:
     - 0
     - 16
-  html: "<p id=\"n0\">Some <span class=\"md-syntax-inline\" data-syn-id=\"s0\" data-char-start=\"5\" data-char-end=\"6\" spellcheck=\"false\">`</span><code>code</code><span class=\"md-syntax-inline\" data-syn-id=\"s1\" data-char-start=\"10\" data-char-end=\"11\" spellcheck=\"false\">`</span> here</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">Some <span class=\"md-syntax-inline\" data-syn-id=\"s0\" data-char-start=\"5\" data-char-end=\"6\" spellcheck=\"false\">`</span><code>code</code><span class=\"md-syntax-inline\" data-syn-id=\"s1\" data-char-start=\"10\" data-char-end=\"11\" spellcheck=\"false\">`</span> here</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 5
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 5
···
       char_range:
         - 6
         - 10
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 5
       child_index: ~
       utf16_len: 6
···
       char_range:
         - 11
         - 16
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 11
       child_index: ~
       utf16_len: 5

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__italic.snap

···
   char_range:
     - 0
     - 18
-  html: "<p id=\"n0\">Some <span class=\"md-syntax-inline\" data-syn-id=\"s0\" data-char-start=\"5\" data-char-end=\"6\">*</span><em>italic</em><span class=\"md-syntax-inline\" data-syn-id=\"s1\" data-char-start=\"12\" data-char-end=\"13\">*</span> text</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">Some <span class=\"md-syntax-inline\" data-syn-id=\"s0\" data-char-start=\"5\" data-char-end=\"6\">*</span><em>italic</em><span class=\"md-syntax-inline\" data-syn-id=\"s1\" data-char-start=\"12\" data-char-end=\"13\">*</span> text</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 5
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 5
···
       char_range:
         - 5
         - 6
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 5
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 6
         - 12
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 6
       child_index: ~
       utf16_len: 6
···
       char_range:
         - 12
         - 13
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 12
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 13
         - 18
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 13
       child_index: ~
       utf16_len: 5

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__mixed_unicode_ascii.snap

···
   char_range:
     - 0
     - 16
-  html: "<p id=\"n0\">Hello 你好 world 🎉</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">Hello 你好 world 🎉</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 16
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 17

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__multiple_blank_lines.snap

···
   char_range:
     - 0
     - 6
-  html: "<p id=\"n0\">First\n</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">First\n</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 5
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 5
···
       char_range:
         - 5
         - 6
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 5
       child_index: ~
       utf16_len: 1
···
   char_range:
     - 9
     - 15
-  html: "<p id=\"n1\">Second</p>\n"
+  html: "<span id=\"p-1-n0\">\n\n\n</span>\n<p id=\"p-1-n1\" dir=\"ltr\">Second</p>\n"
   offset_map:
     - byte_range:
-        - 0
-        - 0
+        - 6
+        - 9
       char_range:
+        - 6
         - 9
+      node_id: p-1-n0
+      char_offset_in_node: 0
+      child_index: ~
+      utf16_len: 3
+    - byte_range:
         - 9
-      node_id: n1
+        - 9
+      char_range:
+        - 9
+        - 9
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
     - byte_range:
-        - 0
-        - 6
+        - 9
+        - 15
       char_range:
         - 9
         - 15
-      node_id: n1
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 6

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__multiple_inline_formats.snap

···
   char_range:
     - 0
     - 32
-  html: "<p id=\"n0\"><span class=\"md-syntax-inline\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"2\">**</span><strong>Bold</strong><span class=\"md-syntax-inline\" data-syn-id=\"s1\" data-char-start=\"6\" data-char-end=\"8\">**</span> and <span class=\"md-syntax-inline\" data-syn-id=\"s2\" data-char-start=\"13\" data-char-end=\"14\">*</span><em>italic</em><span class=\"md-syntax-inline\" data-syn-id=\"s3\" data-char-start=\"20\" data-char-end=\"21\">*</span> and <span class=\"md-syntax-inline\" data-syn-id=\"s4\" data-char-start=\"26\" data-char-end=\"27\" spellcheck=\"false\">`</span><code>code</code><span class=\"md-syntax-inline\" data-syn-id=\"s5\" data-char-start=\"31\" data-char-end=\"32\" spellcheck=\"false\">`</span></p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\"><span class=\"md-syntax-inline\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"2\">**</span><strong>Bold</strong><span class=\"md-syntax-inline\" data-syn-id=\"s1\" data-char-start=\"6\" data-char-end=\"8\">**</span> and <span class=\"md-syntax-inline\" data-syn-id=\"s2\" data-char-start=\"13\" data-char-end=\"14\">*</span><em>italic</em><span class=\"md-syntax-inline\" data-syn-id=\"s3\" data-char-start=\"20\" data-char-end=\"21\">*</span> and <span class=\"md-syntax-inline\" data-syn-id=\"s4\" data-char-start=\"26\" data-char-end=\"27\" spellcheck=\"false\">`</span><code>code</code><span class=\"md-syntax-inline\" data-syn-id=\"s5\" data-char-start=\"31\" data-char-end=\"32\" spellcheck=\"false\">`</span></p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 2
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 2
         - 6
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 2
       child_index: ~
       utf16_len: 4
···
       char_range:
         - 6
         - 8
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 6
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 8
         - 13
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 8
       child_index: ~
       utf16_len: 5
···
       char_range:
         - 13
         - 14
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 13
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 14
         - 20
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 14
       child_index: ~
       utf16_len: 6
···
       char_range:
         - 20
         - 21
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 20
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 21
         - 26
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 21
       child_index: ~
       utf16_len: 5
···
       char_range:
         - 27
         - 31
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 26
       child_index: ~
       utf16_len: 6

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__nested_list.snap

···
   char_range:
     - 11
     - 33
-  html: "<ul>\n<li data-node-id=\"n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"11\" data-char-end=\"13\" spellcheck=\"false\">- </span>Child 1\n  \n<ul>\n<li data-node-id=\"n1\"><span class=\"md-syntax-block\" data-syn-id=\"s1\" data-char-start=\"23\" data-char-end=\"25\" spellcheck=\"false\">- </span>Child 2\n</li>\n</ul>\n</li>\n</ul>\n"
+  html: "<ul>\n<li data-node-id=\"p-0-n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"2\" spellcheck=\"false\">- </span>Parent\n  \n<ul>\n<li data-node-id=\"p-0-n1\"><span class=\"md-syntax-block\" data-syn-id=\"s1\" data-char-start=\"11\" data-char-end=\"13\" spellcheck=\"false\">- </span>Child 1\n</li>\n<span id=\"p-0-n2\">  </span>\n<li data-node-id=\"p-0-n3\"><span class=\"md-syntax-block\" data-syn-id=\"s2\" data-char-start=\"23\" data-char-end=\"25\" spellcheck=\"false\">- </span>Child 2\n</li>\n</ul>\n"
   offset_map:
     - byte_range:
         - 0
         - 2
       char_range:
+        - 0
+        - 2
+      node_id: p-0-n0
+      char_offset_in_node: 0
+      child_index: ~
+      utf16_len: 2
+    - byte_range:
+        - 2
+        - 8
+      char_range:
+        - 2
+        - 8
+      node_id: p-0-n0
+      char_offset_in_node: 2
+      child_index: ~
+      utf16_len: 6
+    - byte_range:
+        - 8
+        - 11
+      char_range:
+        - 8
+        - 11
+      node_id: p-0-n0
+      char_offset_in_node: 8
+      child_index: ~
+      utf16_len: 3
+    - byte_range:
         - 11
         - 13
-      node_id: n0
+      char_range:
+        - 11
+        - 13
+      node_id: p-0-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 2
     - byte_range:
-        - 2
-        - 9
+        - 13
+        - 20
       char_range:
         - 13
         - 20
-      node_id: n0
+      node_id: p-0-n1
       char_offset_in_node: 2
       child_index: ~
       utf16_len: 7
     - byte_range:
-        - 9
-        - 12
+        - 20
+        - 21
       char_range:
         - 20
-        - 23
-      node_id: n0
+        - 21
+      node_id: p-0-n1
       char_offset_in_node: 9
       child_index: ~
-      utf16_len: 3
+      utf16_len: 1
+    - byte_range:
+        - 21
+        - 23
+      char_range:
+        - 21
+        - 23
+      node_id: p-0-n2
+      char_offset_in_node: 0
+      child_index: ~
+      utf16_len: 2
     - byte_range:
-        - 12
-        - 14
+        - 23
+        - 25
       char_range:
         - 23
         - 25
-      node_id: n1
+      node_id: p-0-n3
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 2
     - byte_range:
-        - 14
-        - 21
+        - 25
+        - 32
       char_range:
         - 25
         - 32
-      node_id: n1
+      node_id: p-0-n3
       char_offset_in_node: 2
       child_index: ~
       utf16_len: 7
     - byte_range:
-        - 21
-        - 22
+        - 32
+        - 33
       char_range:
         - 32
         - 33
-      node_id: n1
+      node_id: p-0-n3
       char_offset_in_node: 9
       child_index: ~
       utf16_len: 1

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__ordered_list.snap

···
   char_range:
     - 0
     - 27
-  html: "<ol>\n<li data-node-id=\"n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"3\" spellcheck=\"false\">1. </span>First\n</li>\n<li data-node-id=\"n1\"><span class=\"md-syntax-block\" data-syn-id=\"s1\" data-char-start=\"9\" data-char-end=\"12\" spellcheck=\"false\">2. </span>Second\n</li>\n<li data-node-id=\"n2\"><span class=\"md-syntax-block\" data-syn-id=\"s2\" data-char-start=\"19\" data-char-end=\"22\" spellcheck=\"false\">3. </span>Third</li>\n</ol>\n"
+  html: "<ol>\n<li data-node-id=\"p-0-n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"3\" spellcheck=\"false\">1. </span>First\n</li>\n<li data-node-id=\"p-0-n1\"><span class=\"md-syntax-block\" data-syn-id=\"s1\" data-char-start=\"9\" data-char-end=\"12\" spellcheck=\"false\">2. </span>Second\n</li>\n<li data-node-id=\"p-0-n2\"><span class=\"md-syntax-block\" data-syn-id=\"s2\" data-char-start=\"19\" data-char-end=\"22\" spellcheck=\"false\">3. </span>Third</li>\n</ol>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 3
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 3
···
       char_range:
         - 3
         - 8
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 3
       child_index: ~
       utf16_len: 5
···
       char_range:
         - 8
         - 9
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 8
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 9
         - 12
-      node_id: n1
+      node_id: p-0-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 3
···
       char_range:
         - 12
         - 18
-      node_id: n1
+      node_id: p-0-n1
       char_offset_in_node: 3
       child_index: ~
       utf16_len: 6
···
       char_range:
         - 18
         - 19
-      node_id: n1
+      node_id: p-0-n1
       char_offset_in_node: 9
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 19
         - 22
-      node_id: n2
+      node_id: p-0-n2
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 3
···
       char_range:
         - 22
         - 27
-      node_id: n2
+      node_id: p-0-n2
       char_offset_in_node: 3
       child_index: ~
       utf16_len: 5

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__single_paragraph.snap

···
   char_range:
     - 0
     - 11
-  html: "<p id=\"n0\">Hello world</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">Hello world</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 11
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 11

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__three_paragraphs.snap

···
   char_range:
     - 0
     - 5
-  html: "<p id=\"n0\">One.\n</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">One.\n</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 4
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 4
···
       char_range:
         - 4
         - 5
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 4
       child_index: ~
       utf16_len: 1
···
   char_range:
     - 6
     - 11
-  html: "<p id=\"n1\">Two.\n</p>\n"
+  html: "<span id=\"p-1-n0\">\n</span>\n<p id=\"p-1-n1\" dir=\"ltr\">Two.\n</p>\n"
   offset_map:
     - byte_range:
-        - 0
-        - 0
+        - 5
+        - 6
+      char_range:
+        - 5
+        - 6
+      node_id: p-1-n0
+      char_offset_in_node: 0
+      child_index: ~
+      utf16_len: 1
+    - byte_range:
+        - 6
+        - 6
       char_range:
         - 6
         - 6
-      node_id: n1
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
     - byte_range:
-        - 0
-        - 4
+        - 6
+        - 10
       char_range:
         - 6
         - 10
-      node_id: n1
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 4
     - byte_range:
-        - 4
-        - 5
+        - 10
+        - 11
       char_range:
         - 10
         - 11
-      node_id: n1
+      node_id: p-1-n1
       char_offset_in_node: 4
       child_index: ~
       utf16_len: 1
···
   char_range:
     - 12
     - 18
-  html: "<p id=\"n2\">Three.</p>\n"
+  html: "<span id=\"p-2-n0\">\n</span>\n<p id=\"p-2-n1\" dir=\"ltr\">Three.</p>\n"
   offset_map:
     - byte_range:
-        - 0
-        - 0
+        - 11
+        - 12
+      char_range:
+        - 11
+        - 12
+      node_id: p-2-n0
+      char_offset_in_node: 0
+      child_index: ~
+      utf16_len: 1
+    - byte_range:
+        - 12
+        - 12
       char_range:
         - 12
         - 12
-      node_id: n2
+      node_id: p-2-n1
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
     - byte_range:
-        - 0
-        - 6
+        - 12
+        - 18
       char_range:
         - 12
         - 18
-      node_id: n2
+      node_id: p-2-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 6

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__trailing_double_newline.snap

···
   char_range:
     - 0
     - 6
-  html: "<p id=\"n0\">Hello\n</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">Hello\n</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 5
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 5
···
       char_range:
         - 5
         - 6
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 5
       child_index: ~
       utf16_len: 1

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__trailing_single_newline.snap

···
   char_range:
     - 0
     - 6
-  html: "<p id=\"n0\">Hello\n</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">Hello\n</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 5
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 5
···
       char_range:
         - 5
         - 6
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 5
       child_index: ~
       utf16_len: 1

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__two_paragraphs.snap

···
   char_range:
     - 0
     - 17
-  html: "<p id=\"n0\">First paragraph.\n</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">First paragraph.\n</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 16
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 16
···
       char_range:
         - 16
         - 17
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 16
       child_index: ~
       utf16_len: 1
···
   char_range:
     - 18
     - 35
-  html: "<p id=\"n1\">Second paragraph.</p>\n"
+  html: "<span id=\"p-1-n0\">\n</span>\n<p id=\"p-1-n1\" dir=\"ltr\">Second paragraph.</p>\n"
   offset_map:
     - byte_range:
-        - 0
-        - 0
+        - 17
+        - 18
       char_range:
+        - 17
         - 18
+      node_id: p-1-n0
+      char_offset_in_node: 0
+      child_index: ~
+      utf16_len: 1
+    - byte_range:
         - 18
-      node_id: n1
+        - 18
+      char_range:
+        - 18
+        - 18
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
     - byte_range:
-        - 0
-        - 17
+        - 18
+        - 35
       char_range:
         - 18
         - 35
-      node_id: n1
+      node_id: p-1-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 17

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__unicode_cjk.snap

···
   char_range:
     - 0
     - 4
-  html: "<p id=\"n0\">你好世界</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">你好世界</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 4
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 4

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__unicode_emoji.snap

···
   char_range:
     - 0
     - 13
-  html: "<p id=\"n0\">Hello 🎉 world</p>\n"
+  html: "<p id=\"p-0-n0\" dir=\"ltr\">Hello 🎉 world</p>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 0
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: 0
       utf16_len: 0
···
       char_range:
         - 0
         - 13
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 14

crates/weaver-app/src/components/editor/snapshots/weaver_app__components__editor__tests__unordered_list.snap

···
   char_range:
     - 0
     - 26
-  html: "<ul>\n<li data-node-id=\"n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"2\" spellcheck=\"false\">- </span>Item 1\n</li>\n<li data-node-id=\"n1\"><span class=\"md-syntax-block\" data-syn-id=\"s1\" data-char-start=\"9\" data-char-end=\"11\" spellcheck=\"false\">- </span>Item 2\n</li>\n<li data-node-id=\"n2\"><span class=\"md-syntax-block\" data-syn-id=\"s2\" data-char-start=\"18\" data-char-end=\"20\" spellcheck=\"false\">- </span>Item 3</li>\n</ul>\n"
+  html: "<ul>\n<li data-node-id=\"p-0-n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"2\" spellcheck=\"false\">- </span>Item 1\n</li>\n<li data-node-id=\"p-0-n1\"><span class=\"md-syntax-block\" data-syn-id=\"s1\" data-char-start=\"9\" data-char-end=\"11\" spellcheck=\"false\">- </span>Item 2\n</li>\n<li data-node-id=\"p-0-n2\"><span class=\"md-syntax-block\" data-syn-id=\"s2\" data-char-start=\"18\" data-char-end=\"20\" spellcheck=\"false\">- </span>Item 3</li>\n</ul>\n"
   offset_map:
     - byte_range:
         - 0
···
       char_range:
         - 0
         - 2
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 2
         - 8
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 2
       child_index: ~
       utf16_len: 6
···
       char_range:
         - 8
         - 9
-      node_id: n0
+      node_id: p-0-n0
       char_offset_in_node: 8
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 9
         - 11
-      node_id: n1
+      node_id: p-0-n1
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 11
         - 17
-      node_id: n1
+      node_id: p-0-n1
       char_offset_in_node: 2
       child_index: ~
       utf16_len: 6
···
       char_range:
         - 17
         - 18
-      node_id: n1
+      node_id: p-0-n1
       char_offset_in_node: 8
       child_index: ~
       utf16_len: 1
···
       char_range:
         - 18
         - 20
-      node_id: n2
+      node_id: p-0-n2
       char_offset_in_node: 0
       child_index: ~
       utf16_len: 2
···
       char_range:
         - 20
         - 26
-      node_id: n2
+      node_id: p-0-n2
       char_offset_in_node: 2
       child_index: ~
       utf16_len: 6

crates/weaver-app/src/components/editor/tests.rs

···
       char_range:
         - 0
         - 6
-      html: "<blockquote>\n<p id=\"n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"1\">&gt;</span>quote</p>\n</blockquote>\n"
+      html: "<blockquote>\n<p id=\"p-0-n0\"><span class=\"md-syntax-block\" data-syn-id=\"s0\" data-char-start=\"0\" data-char-end=\"1\">&gt;</span>quote</p>\n"
       offset_map:
         - byte_range:
             - 1
···
           char_range:
             - 0
             - 0
-          node_id: n0
+          node_id: p-0-n0
           char_offset_in_node: 0
           child_index: 0
           utf16_len: 0
···
           char_range:
             - 0
             - 1
-          node_id: n0
+          node_id: p-0-n0
           char_offset_in_node: 0
           child_index: ~
           utf16_len: 1
···
           char_range:
             - 1
             - 6
-          node_id: n0
+          node_id: p-0-n0
           char_offset_in_node: 1
           child_index: ~
           utf16_len: 5
···
         );
     }
 }
+
+// =============================================================================
+// Text Direction Tests
+// =============================================================================
+
+#[test]
+fn test_paragraph_dir_ltr() {
+    let result = render_test("Hello world");
+    // Verify HTML contains dir="ltr"
+    assert!(result[0].html.contains("dir=\"ltr\""));
+}
+
+#[test]
+fn test_paragraph_dir_rtl_hebrew() {
+    let result = render_test("שלום עולם");
+    // Verify HTML contains dir="rtl"
+    assert!(result[0].html.contains("dir=\"rtl\""));
+}
+
+#[test]
+fn test_paragraph_dir_rtl_arabic() {
+    let result = render_test("مرحبا بالعالم");
+    // Verify HTML contains dir="rtl"
+    assert!(result[0].html.contains("dir=\"rtl\""));
+}
+
+#[test]
+fn test_paragraph_dir_mixed_leading_neutrals() {
+    // Leading numbers and punctuation should be skipped, Hebrew should be detected
+    let result = render_test("123... שלום");
+    assert!(result[0].html.contains("dir=\"rtl\""));
+}
+
+#[test]
+fn test_heading_dir_rtl() {
+    let result = render_test("# שלום");
+    // Verify heading has dir="rtl"
+    assert!(result[0].html.contains("dir=\"rtl\""));
+}
+
+#[test]
+fn test_heading_dir_ltr() {
+    let result = render_test("# Hello");
+    // Verify heading has dir="ltr"
+    assert!(result[0].html.contains("dir=\"ltr\""));
+}
+
+#[test]
+fn test_multiple_paragraphs_different_directions() {
+    let result = render_test("Hello world\n\nשלום עולם\n\nBack to English");
+    // First paragraph should be LTR
+    assert!(result[0].html.contains("dir=\"ltr\""));
+    // Second paragraph should be RTL
+    assert!(result[1].html.contains("dir=\"rtl\""));
+    // Third paragraph should be LTR
+    assert!(result[2].html.contains("dir=\"ltr\""));
+}

crates/weaver-app/src/components/editor/writer.rs

···
 pub mod syntax;
 pub mod tags;
 
+use super::offset_map::OffsetMapping;
 use crate::components::editor::writer::segmented::SegmentedWriter;
 pub use embed::{EditorImageResolver, EmbedContentProvider, ImageResolver};
-pub use syntax::{SyntaxSpanInfo, SyntaxType};
-
-#[allow(unused_imports)]
-use super::offset_map::{OffsetMapping, RenderResult};
 use loro::LoroText;
 use markdown_weaver::{Alignment, CowStr, Event, WeaverAttributes};
 use markdown_weaver_escape::{StrWrite, escape_html, escape_html_body_text_with_char_count};
 use std::collections::HashMap;
 use std::fmt;
 use std::ops::Range;
+pub use syntax::{SyntaxSpanInfo, SyntaxType};
 use weaver_common::EntryIndex;
 
 /// Result of rendering with the EditorWriter.
···
     paragraph_ranges: Vec<(Range<usize>, Range<usize>)>, // (byte_range, char_range)
     current_paragraph_start: Option<(usize, usize)>,     // (byte_offset, char_offset)
     list_depth: usize, // Track nesting depth to avoid paragraph boundary override inside lists
+    in_footnote_def: bool, // Suppress inner paragraph boundaries in footnote definitions
 
     // Syntax span tracking for conditional visibility - current paragraph
     syntax_spans: Vec<SyntaxSpanInfo>,
···
 {
     pub fn new(source: &'a str, source_text: &'a LoroText, events: I) -> Self {
         Self::new_with_all_offsets(source, source_text, events, 0, 0, 0, 0)
-    }
-
-    pub fn new_with_all_offsets(
-        source: &'a str,
-        source_text: &'a LoroText,
-        events: I,
-        node_id_offset: usize,
-        syn_id_offset: usize,
-        char_offset_base: usize,
-        byte_offset_base: usize,
-    ) -> Self {
-        Self {
-            source,
-            source_text,
-            events,
-            writer: SegmentedWriter::new(),
-            last_byte_offset: byte_offset_base,
-            last_char_offset: char_offset_base,
-            end_newline: true,
-            in_non_writing_block: false,
-            table_state: TableState::Head,
-            table_alignments: vec![],
-            table_cell_index: 0,
-            numbers: HashMap::new(),
-            embed_provider: None,
-            image_resolver: None,
-            entry_index: None,
-            code_buffer: None,
-            code_buffer_byte_range: None,
-            code_buffer_char_range: None,
-            code_block_char_start: None,
-            code_block_opening_span_idx: None,
-            pending_blockquote_range: None,
-            render_tables_as_markdown: true,
-            table_start_offset: None,
-            offset_maps: Vec::new(),
-            node_id_prefix: None,
-            auto_increment_prefix: None,
-            static_prefix_override: None,
-            current_paragraph_index: 0,
-            next_node_id: node_id_offset,
-            current_node_id: None,
-            current_node_char_offset: 0,
-            current_node_child_count: 0,
-            utf16_checkpoints: vec![(0, 0)],
-            paragraph_ranges: Vec::new(),
-            current_paragraph_start: None,
-            list_depth: 0,
-            syntax_spans: Vec::new(),
-            next_syn_id: syn_id_offset,
-            pending_inline_formats: Vec::new(),
-            ref_collector: weaver_common::RefCollector::new(),
-            offset_maps_by_para: Vec::new(),
-            syntax_spans_by_para: Vec::new(),
-            refs_by_para: Vec::new(),
-            pending_block_attrs: None,
-            active_wrapper: None,
-            weaver_block_buffer: String::new(),
-            weaver_block_char_start: None,
-            footnote_ref_spans: HashMap::new(),
-            current_footnote_def: None,
-            _phantom: std::marker::PhantomData,
-        }
-    }
-
-    /// Add an embed content provider
-    pub fn with_embed_provider(mut self, provider: E) -> EditorWriter<'a, I, E, R> {
-        self.embed_provider = Some(provider);
-        self
-    }
-
-    /// Add an image resolver for mapping markdown image URLs to CDN URLs
-    pub fn with_image_resolver<R2: ImageResolver>(
-        self,
-        resolver: R2,
-    ) -> EditorWriter<'a, I, E, R2> {
-        EditorWriter {
-            source: self.source,
-            source_text: self.source_text,
-            events: self.events,
-            writer: self.writer,
-            last_byte_offset: self.last_byte_offset,
-            last_char_offset: self.last_char_offset,
-            end_newline: self.end_newline,
-            in_non_writing_block: self.in_non_writing_block,
-            table_state: self.table_state,
-            table_alignments: self.table_alignments,
-            table_cell_index: self.table_cell_index,
-            numbers: self.numbers,
-            embed_provider: self.embed_provider,
-            image_resolver: Some(resolver),
-            entry_index: self.entry_index,
-            code_buffer: self.code_buffer,
-            code_buffer_byte_range: self.code_buffer_byte_range,
-            code_buffer_char_range: self.code_buffer_char_range,
-            code_block_char_start: self.code_block_char_start,
-            code_block_opening_span_idx: self.code_block_opening_span_idx,
-            pending_blockquote_range: self.pending_blockquote_range,
-            render_tables_as_markdown: self.render_tables_as_markdown,
-            table_start_offset: self.table_start_offset,
-            offset_maps: self.offset_maps,
-            node_id_prefix: self.node_id_prefix,
-            auto_increment_prefix: self.auto_increment_prefix,
-            static_prefix_override: self.static_prefix_override,
-            current_paragraph_index: self.current_paragraph_index,
-            next_node_id: self.next_node_id,
-            current_node_id: self.current_node_id,
-            current_node_char_offset: self.current_node_char_offset,
-            current_node_child_count: self.current_node_child_count,
-            utf16_checkpoints: self.utf16_checkpoints,
-            paragraph_ranges: self.paragraph_ranges,
-            current_paragraph_start: self.current_paragraph_start,
-            list_depth: self.list_depth,
-            syntax_spans: self.syntax_spans,
-            next_syn_id: self.next_syn_id,
-            pending_inline_formats: self.pending_inline_formats,
-            ref_collector: self.ref_collector,
-            offset_maps_by_para: self.offset_maps_by_para,
-            syntax_spans_by_para: self.syntax_spans_by_para,
-            refs_by_para: self.refs_by_para,
-            pending_block_attrs: self.pending_block_attrs,
-            active_wrapper: self.active_wrapper,
-            weaver_block_buffer: self.weaver_block_buffer,
-            weaver_block_char_start: self.weaver_block_char_start,
-            footnote_ref_spans: self.footnote_ref_spans,
-            current_footnote_def: self.current_footnote_def,
-            _phantom: std::marker::PhantomData,
-        }
-    }
-
-    /// Add an entry index for wikilink resolution feedback
-    pub fn with_entry_index(mut self, index: &'a EntryIndex) -> Self {
-        self.entry_index = Some(index);
-        self
-    }
-
-    /// Set a prefix for node IDs (typically the paragraph ID).
-    /// This makes node IDs paragraph-scoped and stable across re-renders.
-    /// Use this for single-paragraph renders where the paragraph ID is known.
-    pub fn with_node_id_prefix(mut self, prefix: &str) -> Self {
-        self.node_id_prefix = Some(prefix.to_string());
-        self.next_node_id = 0; // Reset counter since each paragraph is independent
-        self
-    }
-
-    /// Enable auto-incrementing paragraph prefixes for multi-paragraph renders.
-    /// Each paragraph gets prefix "p-{N}" where N starts at `start_id` and increments.
-    /// Node IDs reset to 0 for each paragraph, giving "p-{N}-n0", "p-{N}-n1", etc.
-    pub fn with_auto_incrementing_prefix(mut self, start_id: usize) -> Self {
-        self.auto_increment_prefix = Some(start_id);
-        self.node_id_prefix = Some(format!("p-{}", start_id));
-        self.next_node_id = 0;
-        self
     }
 
     /// Get the next paragraph ID that would be assigned (for tracking allocations).
···
 
                 // Emit space for cursor positioning - this gives the browser somewhere
                 // to place the cursor when navigating to this line
-                self.write(" ")?;
+                self.write("\u{200B}")?;
                 self.current_node_child_count += 1;
 
                 // Map the space to the newline position - cursor landing here means
···
                     self.current_node_child_count += 1;
 
                     // After <br>, emit plain zero-width space for cursor positioning
-                    self.write(" ")?;
+                    self.write("\u{200B}")?;
 
                     // Count the zero-width space text node as a child
                     self.current_node_child_count += 1;
···
                         self.current_node_char_offset += 1;
                     }
 
-                    // DO NOT increment last_char_offset - zero-width space is not in source
-                    // The \n itself IS in source, so we already accounted for it
                     self.last_char_offset = char_start + spaces_char_len + 1; // +1 for \n
                 } else {
                     // Fallback: just <br>
···
                 self.write("<div class=\"toggle-block\"><hr /></div>\n")?;
             }
             FootnoteReference(name) => {
-                // Get/create footnote number
-                let len = self.numbers.len() + 1;
-                let number = *self.numbers.entry(name.to_string()).or_insert(len);
-
-                // Emit the [^name] syntax as a hideable syntax span
+                // Emit [^name] as styled (but NOT hidden) inline span
                 let raw_text = &self.source[range.clone()];
                 let char_start = self.last_char_offset;
                 let syntax_char_len = raw_text.chars().count();
                 let char_end = char_start + syntax_char_len;
-                let syn_id = self.gen_syn_id();
 
+                // Use footnote-ref class for styling, not md-syntax-inline (which hides)
                 write!(
                     &mut self.writer,
-                    "<span class=\"md-syntax-inline\" data-syn-id=\"{}\" data-char-start=\"{}\" data-char-end=\"{}\" spellcheck=\"false\">",
-                    syn_id, char_start, char_end
+                    "<span class=\"footnote-ref\" data-char-start=\"{}\" data-char-end=\"{}\" data-footnote=\"{}\">",
+                    char_start, char_end, name
                 )?;
                 escape_html(&mut self.writer, raw_text)?;
                 self.write("</span>")?;
 
-                // Track this span for linking with the footnote definition later
-                let span_index = self.syntax_spans.len();
-                self.syntax_spans.push(SyntaxSpanInfo {
-                    syn_id,
-                    char_range: char_start..char_end,
-                    syntax_type: SyntaxType::Inline,
-                    formatted_range: None, // Set when we see the definition
-                });
-                self.footnote_ref_spans
-                    .insert(name.to_string(), (span_index, char_start));
-
-                // Record offset mapping for the syntax span content
+                // Record offset mapping
                 self.record_mapping(range.clone(), char_start..char_end);
 
                 // Count as child
                 self.current_node_child_count += 1;
-
-                // Emit the visible footnote reference (superscript number)
-                write!(
-                    &mut self.writer,
-                    "<sup class=\"footnote-reference\"><a href=\"#fn-{}\">{}</a></sup>",
-                    name, number
-                )?;
 
                 // Update tracking
                 self.last_char_offset = char_end;
···
             }
         }
         Ok(())
+    }
+
+    pub fn new_with_all_offsets(
+        source: &'a str,
+        source_text: &'a LoroText,
+        events: I,
+        node_id_offset: usize,
+        syn_id_offset: usize,
+        char_offset_base: usize,
+        byte_offset_base: usize,
+    ) -> Self {
+        Self {
+            source,
+            source_text,
+            events,
+            writer: SegmentedWriter::new(),
+            last_byte_offset: byte_offset_base,
+            last_char_offset: char_offset_base,
+            end_newline: true,
+            in_non_writing_block: false,
+            table_state: TableState::Head,
+            table_alignments: vec![],
+            table_cell_index: 0,
+            numbers: HashMap::new(),
+            embed_provider: None,
+            image_resolver: None,
+            entry_index: None,
+            code_buffer: None,
+            code_buffer_byte_range: None,
+            code_buffer_char_range: None,
+            code_block_char_start: None,
+            code_block_opening_span_idx: None,
+            pending_blockquote_range: None,
+            render_tables_as_markdown: true,
+            table_start_offset: None,
+            offset_maps: Vec::new(),
+            node_id_prefix: None,
+            auto_increment_prefix: None,
+            static_prefix_override: None,
+            current_paragraph_index: 0,
+            next_node_id: node_id_offset,
+            current_node_id: None,
+            current_node_char_offset: 0,
+            current_node_child_count: 0,
+            utf16_checkpoints: vec![(0, 0)],
+            paragraph_ranges: Vec::new(),
+            current_paragraph_start: None,
+            list_depth: 0,
+            in_footnote_def: false,
+            syntax_spans: Vec::new(),
+            next_syn_id: syn_id_offset,
+            pending_inline_formats: Vec::new(),
+            ref_collector: weaver_common::RefCollector::new(),
+            offset_maps_by_para: Vec::new(),
+            syntax_spans_by_para: Vec::new(),
+            refs_by_para: Vec::new(),
+            pending_block_attrs: None,
+            active_wrapper: None,
+            weaver_block_buffer: String::new(),
+            weaver_block_char_start: None,
+            footnote_ref_spans: HashMap::new(),
+            current_footnote_def: None,
+            _phantom: std::marker::PhantomData,
+        }
+    }
+
+    /// Add an embed content provider
+    pub fn with_embed_provider(mut self, provider: E) -> EditorWriter<'a, I, E, R> {
+        self.embed_provider = Some(provider);
+        self
+    }
+
+    /// Add an image resolver for mapping markdown image URLs to CDN URLs
+    pub fn with_image_resolver<R2: ImageResolver>(
+        self,
+        resolver: R2,
+    ) -> EditorWriter<'a, I, E, R2> {
+        EditorWriter {
+            source: self.source,
+            source_text: self.source_text,
+            events: self.events,
+            writer: self.writer,
+            last_byte_offset: self.last_byte_offset,
+            last_char_offset: self.last_char_offset,
+            end_newline: self.end_newline,
+            in_non_writing_block: self.in_non_writing_block,
+            table_state: self.table_state,
+            table_alignments: self.table_alignments,
+            table_cell_index: self.table_cell_index,
+            numbers: self.numbers,
+            embed_provider: self.embed_provider,
+            image_resolver: Some(resolver),
+            entry_index: self.entry_index,
+            code_buffer: self.code_buffer,
+            code_buffer_byte_range: self.code_buffer_byte_range,
+            code_buffer_char_range: self.code_buffer_char_range,
+            code_block_char_start: self.code_block_char_start,
+            code_block_opening_span_idx: self.code_block_opening_span_idx,
+            pending_blockquote_range: self.pending_blockquote_range,
+            render_tables_as_markdown: self.render_tables_as_markdown,
+            table_start_offset: self.table_start_offset,
+            offset_maps: self.offset_maps,
+            node_id_prefix: self.node_id_prefix,
+            auto_increment_prefix: self.auto_increment_prefix,
+            static_prefix_override: self.static_prefix_override,
+            current_paragraph_index: self.current_paragraph_index,
+            next_node_id: self.next_node_id,
+            current_node_id: self.current_node_id,
+            current_node_char_offset: self.current_node_char_offset,
+            current_node_child_count: self.current_node_child_count,
+            utf16_checkpoints: self.utf16_checkpoints,
+            paragraph_ranges: self.paragraph_ranges,
+            current_paragraph_start: self.current_paragraph_start,
+            list_depth: self.list_depth,
+            in_footnote_def: self.in_footnote_def,
+            syntax_spans: self.syntax_spans,
+            next_syn_id: self.next_syn_id,
+            pending_inline_formats: self.pending_inline_formats,
+            ref_collector: self.ref_collector,
+            offset_maps_by_para: self.offset_maps_by_para,
+            syntax_spans_by_para: self.syntax_spans_by_para,
+            refs_by_para: self.refs_by_para,
+            pending_block_attrs: self.pending_block_attrs,
+            active_wrapper: self.active_wrapper,
+            weaver_block_buffer: self.weaver_block_buffer,
+            weaver_block_char_start: self.weaver_block_char_start,
+            footnote_ref_spans: self.footnote_ref_spans,
+            current_footnote_def: self.current_footnote_def,
+            _phantom: std::marker::PhantomData,
+        }
+    }
+
+    /// Add an entry index for wikilink resolution feedback
+    pub fn with_entry_index(mut self, index: &'a EntryIndex) -> Self {
+        self.entry_index = Some(index);
+        self
+    }
+
+    /// Set a prefix for node IDs (typically the paragraph ID).
+    /// This makes node IDs paragraph-scoped and stable across re-renders.
+    /// Use this for single-paragraph renders where the paragraph ID is known.
+    pub fn with_node_id_prefix(mut self, prefix: &str) -> Self {
+        self.node_id_prefix = Some(prefix.to_string());
+        self.next_node_id = 0; // Reset counter since each paragraph is independent
+        self
+    }
+
+    /// Enable auto-incrementing paragraph prefixes for multi-paragraph renders.
+    /// Each paragraph gets prefix "p-{N}" where N starts at `start_id` and increments.
+    /// Node IDs reset to 0 for each paragraph, giving "p-{N}-n0", "p-{N}-n1", etc.
+    pub fn with_auto_incrementing_prefix(mut self, start_id: usize) -> Self {
+        self.auto_increment_prefix = Some(start_id);
+        self.node_id_prefix = Some(format!("p-{}", start_id));
+        self.next_node_id = 0;
+        self
     }
 }

crates/weaver-app/src/components/editor/writer/tags.rs

···
 impl<'a, I: Iterator<Item = (Event<'a>, Range<usize>)>, E: EmbedContentProvider, R: ImageResolver>
     EditorWriter<'a, I, E, R>
 {
+    /// Detect text direction by scanning source from a byte offset.
+    /// Looks for the first strong directional character.
+    /// Returns Some("rtl") for RTL scripts, Some("ltr") for LTR, None if no strong char found.
+    fn detect_paragraph_direction(&self, start_byte: usize) -> Option<&'static str> {
+        if start_byte >= self.source.len() {
+            return None;
+        }
+
+        // Scan from start_byte through the source looking for first strong directional char
+        let text = &self.source[start_byte..];
+        weaver_renderer::utils::detect_text_direction(text)
+    }
+
     pub(crate) fn start_tag(
         &mut self,
         tag: Tag<'_>,
···
             // HTML blocks get their own paragraph to try and corral them better
             Tag::HtmlBlock => {
                 // Record paragraph start for boundary tracking
-                // BUT skip if inside a list - list owns the paragraph boundary
-                if self.list_depth == 0 {
+                // Skip if inside a list or footnote def - they own their paragraph boundary
+                if self.list_depth == 0 && !self.in_footnote_def {
                     self.current_paragraph_start =
                         Some((self.last_byte_offset, self.last_char_offset));
                 }
···
                 self.emit_wrapper_start()?;
 
                 // Record paragraph start for boundary tracking
-                // BUT skip if inside a list - list owns the paragraph boundary
-                if self.list_depth == 0 {
+                // Skip if inside a list or footnote def - they own their paragraph boundary
+                if self.list_depth == 0 && !self.in_footnote_def {
                     self.current_paragraph_start =
                         Some((self.last_byte_offset, self.last_char_offset));
                 }
 
                 let node_id = self.gen_node_id();
+
+                // Detect text direction for this paragraph
+                let dir = self.detect_paragraph_direction(self.last_byte_offset);
+
                 if self.end_newline {
-                    write!(&mut self.writer, "<p id=\"{}\">", node_id)?;
+                    if let Some(dir_value) = dir {
+                        write!(&mut self.writer, "<p id=\"{}\" dir=\"{}\">", node_id, dir_value)?;
+                    } else {
+                        write!(&mut self.writer, "<p id=\"{}\">", node_id)?;
+                    }
                 } else {
-                    write!(&mut self.writer, "\n<p id=\"{}\">", node_id)?;
+                    if let Some(dir_value) = dir {
+                        write!(&mut self.writer, "\n<p id=\"{}\" dir=\"{}\">", node_id, dir_value)?;
+                    } else {
+                        write!(&mut self.writer, "\n<p id=\"{}\">", node_id)?;
+                    }
                 }
                 self.begin_node(node_id.clone());
 
···
                 // Generate node ID for offset tracking
                 let node_id = self.gen_node_id();
 
+                // Detect text direction for this heading
+                let dir = self.detect_paragraph_direction(self.last_byte_offset);
+
                 self.write("<")?;
                 write!(&mut self.writer, "{}", level)?;
 
···
                     }
                     self.write("\"")?;
                 }
+
+                // Add dir attribute if text direction was detected
+                if let Some(dir_value) = dir {
+                    self.write(" dir=\"")?;
+                    self.write(dir_value)?;
+                    self.write("\"")?;
+                }
+
                 for (attr, value) in attrs {
                     self.write(" ")?;
                     escape_html(&mut self.writer, &attr)?;
···
                 Ok(())
             }
             Tag::FootnoteDefinition(name) => {
-                // Emit the [^name]: prefix as a hideable syntax span
-                // The source should have "[^name]: " at the start
-                let prefix = format!("[^{}]: ", name);
-                let char_start = self.last_char_offset;
-                let prefix_char_len = prefix.chars().count();
-                let char_end = char_start + prefix_char_len;
-                let syn_id = self.gen_syn_id();
+                // Track as paragraph-level block for incremental rendering
+                self.current_paragraph_start = Some((self.last_byte_offset, self.last_char_offset));
+                // Suppress inner paragraph boundaries (footnote def owns its paragraph)
+                self.in_footnote_def = true;
 
                 if !self.end_newline {
                     self.write("\n")?;
                 }
 
+                // Generate node ID for cursor tracking
+                let node_id = self.gen_node_id();
+
+                // Emit wrapper div with NEW class (not footnote-definition which has order:9999)
+                // This keeps footnotes in-place instead of reordering to bottom
                 write!(
                     &mut self.writer,
-                    "<span class=\"md-syntax-block\" data-syn-id=\"{}\" data-char-start=\"{}\" data-char-end=\"{}\" spellcheck=\"false\">",
-                    syn_id, char_start, char_end
+                    "<div class=\"footnote-def-editor\" data-node-id=\"{}\">",
+                    node_id
+                )?;
+
+                // Begin node tracking BEFORE emitting prefix
+                self.begin_node(node_id.clone());
+
+                // Map the start position (before any content)
+                let fn_start_char = self.last_char_offset;
+                let mapping = OffsetMapping {
+                    byte_range: range.start..range.start,
+                    char_range: fn_start_char..fn_start_char,
+                    node_id,
+                    char_offset_in_node: 0,
+                    child_index: Some(0),
+                    utf16_len: 0,
+                };
+                self.offset_maps.push(mapping);
+
+                // Extract ACTUAL prefix from source (not constructed string)
+                // This ensures byte offsets match reality
+                let raw_text = &self.source[range.clone()];
+                let prefix_end = raw_text
+                    .find("]:")
+                    .map(|p| {
+                        // Include ]: and any single trailing space
+                        let after_colon = p + 2;
+                        if raw_text.get(after_colon..after_colon + 1) == Some(" ") {
+                            after_colon + 1
+                        } else {
+                            after_colon
+                        }
+                    })
+                    .unwrap_or(0);
+                let prefix = &raw_text[..prefix_end];
+                let prefix_byte_len = prefix.len();
+                let prefix_char_len = prefix.chars().count();
+
+                let char_start = self.last_char_offset;
+                let char_end = char_start + prefix_char_len;
+
+                write!(
+                    &mut self.writer,
+                    "<span class=\"footnote-def-syntax\" data-char-start=\"{}\" data-char-end=\"{}\">",
+                    char_start, char_end
                 )?;
-                escape_html(&mut self.writer, &prefix)?;
+                escape_html(&mut self.writer, prefix)?;
                 self.write("</span>")?;
 
-                // Track this span for linking with the footnote reference
-                let def_span_index = self.syntax_spans.len();
-                self.syntax_spans.push(SyntaxSpanInfo {
-                    syn_id,
-                    char_range: char_start..char_end,
-                    syntax_type: SyntaxType::Block,
-                    formatted_range: None, // Set at FootnoteDefinition end
-                });
-
-                // Store the definition info for linking at end
-                self.current_footnote_def = Some((name.to_string(), def_span_index, char_start));
+                // Store the definition info (no longer tracking syntax spans for hide/show)
+                self.current_footnote_def = Some((name.to_string(), 0, char_start));
 
-                // Record offset mapping for the syntax span
+                // Record offset mapping for the prefix
                 self.record_mapping(
-                    range.start..range.start + prefix.len(),
+                    range.start..range.start + prefix_byte_len,
                     char_start..char_end,
                 );
 
                 // Update tracking for the prefix
                 self.last_char_offset = char_end;
-                self.last_byte_offset = range.start + prefix.len();
-
-                // Emit the definition container
-                write!(
-                    &mut self.writer,
-                    "<div class=\"footnote-definition\" id=\"fn-{}\">",
-                    name
-                )?;
-
-                // Get/create footnote number for the label
-                let len = self.numbers.len() + 1;
-                let number = *self.numbers.entry(name.to_string()).or_insert(len);
-                write!(
-                    &mut self.writer,
-                    "<sup class=\"footnote-definition-label\">{}</sup>",
-                    number
-                )?;
+                self.last_byte_offset = range.start + prefix_byte_len;
 
                 Ok(())
             }
···
         let result = match tag {
             TagEnd::HtmlBlock => {
                 // Capture paragraph boundary info BEFORE writing closing HTML
-                // Skip if inside a list - list owns the paragraph boundary
-                let para_boundary = if self.list_depth == 0 {
+                // Skip if inside a list or footnote def - they own their paragraph boundary
+                let para_boundary = if self.list_depth == 0 && !self.in_footnote_def {
                     self.current_paragraph_start
                         .take()
                         .map(|(byte_start, char_start)| {
···
             }
             TagEnd::Paragraph(_) => {
                 // Capture paragraph boundary info BEFORE writing closing HTML
-                // Skip if inside a list - list owns the paragraph boundary
-                let para_boundary = if self.list_depth == 0 {
+                // Skip if inside a list or footnote def - they own their paragraph boundary
+                let para_boundary = if self.list_depth == 0 && !self.in_footnote_def {
                     self.current_paragraph_start
                         .take()
                         .map(|(byte_start, char_start)| {
···
                 Ok(())
             }
             TagEnd::FootnoteDefinition => {
+                // End node tracking (inner paragraphs may have already cleared it)
+                self.end_node();
                 self.write("</div>\n")?;
 
-                // Link the footnote definition span with its reference span
-                if let Some((name, def_span_index, _def_char_start)) =
-                    self.current_footnote_def.take()
-                {
-                    let def_char_end = self.last_char_offset;
+                // Clear footnote tracking
+                self.current_footnote_def.take();
+                self.in_footnote_def = false;
 
-                    // Look up the reference span
-                    if let Some(&(ref_span_index, ref_char_start)) =
-                        self.footnote_ref_spans.get(&name)
-                    {
-                        // Create formatted_range spanning from ref start to def end
-                        let formatted_range = ref_char_start..def_char_end;
-
-                        // Update both spans with the same formatted_range
-                        // so they show/hide together based on cursor proximity
-                        if let Some(ref_span) = self.syntax_spans.get_mut(ref_span_index) {
-                            ref_span.formatted_range = Some(formatted_range.clone());
-                        }
-                        if let Some(def_span) = self.syntax_spans.get_mut(def_span_index) {
-                            def_span.formatted_range = Some(formatted_range);
-                        }
-                    }
+                // Finalize paragraph boundary for incremental rendering
+                if let Some((byte_start, char_start)) = self.current_paragraph_start.take() {
+                    let byte_range = byte_start..self.last_byte_offset;
+                    let char_range = char_start..self.last_char_offset;
+                    self.finalize_paragraph(byte_range, char_range);
                 }
 
                 Ok(())

crates/weaver-app/src/lib.rs

···
 //! Weaver App library.
-
 #[allow(unused)]
 use dioxus::{CapturedError, prelude::*};
 

crates/weaver-app/src/main.rs

···
         use tracing_subscriber::layer::SubscriberExt;
 
         let console_level = if cfg!(debug_assertions) {
-            Level::DEBUG
+            Level::TRACE
         } else {
             Level::INFO
         };
···
         );
 
         // Filter out noisy crates
+        // Use weaver_app=trace for detailed editor debugging
         let filter = EnvFilter::new(
-            "debug,loro_internal=warn,jacquard_identity=info,jacquard_common=info,iroh=info",
+            "debug,weaver_app=trace,loro_internal=warn,jacquard_identity=info,jacquard_common=info,iroh=info",
         );
 
         let reg = Registry::default()

crates/weaver-common/src/agent.rs

···
 use jacquard::prelude::*;
 use jacquard::smol_str::SmolStr;
 use jacquard::types::blob::{BlobRef, MimeType};
-use jacquard::types::string::{AtUri, Did, RecordKey, Rkey};
+use jacquard::types::string::{AtUri, Datetime, Did, RecordKey, Rkey};
 #[allow(unused_imports)]
 use jacquard::types::tid::Tid;
 use jacquard::types::uri::Uri;
···
         async move {
             use weaver_api::sh_weaver::notebook::book::Book;
 
-            let at_uri = AtUri::new(uri)
-                .map_err(|e| WeaverError::InvalidNotebook(format!("Invalid notebook URI: {}", e)))?;
+            let at_uri = AtUri::new(uri).map_err(|e| {
+                WeaverError::InvalidNotebook(format!("Invalid notebook URI: {}", e))
+            })?;
 
             let response = match self.get_record::<Book>(&at_uri).await {
                 Ok(r) => r,
···
                                 e.content = entry.content.clone();
                                 e.embeds = entry.embeds.clone();
                                 e.tags = entry.tags.clone();
+                                e.updated_at = Some(Datetime::now());
                             })
                             .await?;
                         let updated_ref = StrongRef::new()

crates/weaver-index/src/clickhouse/queries/edit.rs

···
     ///
     /// Compares edit_heads to draft_titles to find drafts where the current
     /// head doesn't match the head used for title extraction.
-    pub async fn get_stale_draft_titles(&self, limit: i64) -> Result<Vec<StaleDraftRow>, IndexError> {
+    pub async fn get_stale_draft_titles(
+        &self,
+        limit: i64,
+    ) -> Result<Vec<StaleDraftRow>, IndexError> {
         // Join drafts -> edit_heads (for current head) -> draft_titles (to check staleness)
         // edit_heads uses resource_type='draft' and resource_did/resource_rkey to link
         let query = r#"
             SELECT
-                d.did,
-                d.rkey,
-                h.head_did,
-                h.head_rkey,
-                h.head_cid,
-                h.root_did,
-                h.root_rkey,
-                h.root_cid
+                d.did as did,
+                d.rkey as rkey,
+                h.head_did as head_did,
+                h.head_rkey as head_rkey,
+                h.head_cid as head_cid,
+                h.root_did as root_did,
+                h.root_rkey as root_rkey,
+                h.root_cid as root_cid
             FROM drafts d FINAL
             INNER JOIN edit_heads h FINAL
                 ON h.resource_did = d.did

crates/weaver-renderer/Cargo.toml

···
 tracing.workspace = true
 miette.workspace = true
 unicode-normalization = "0.1.24"
+unicode-bidi = "0.3"
 yaml-rust2 = { version = "0.10.2" }
 bitflags = "2.9.1"
 dashmap = "6.1.0"

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__blockquote_rendering.snap

···
 expression: output
 ---
 <blockquote>
-<p>This is a quote</p>
-<p>With multiple lines</p>
+<p dir="ltr">This is a quote</p>
+<p dir="ltr">With multiple lines</p>
 </blockquote>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__footnote_in_blockquote.snap

···
 expression: output
 ---
 <blockquote>
-<p>Quote with footnote<sup class="footnote-reference"><a href="#q">1</a></sup>.</p>
+<p dir="ltr">Quote with footnote<sup class="footnote-reference"><a href="#q">1</a></sup>.</p>
 </blockquote>
 <div class="footnote-definition" id="q"><sup class="footnote-definition-label">1</sup>
-<p>Footnote for quote.</p>
+<p dir="ltr">Footnote for quote.</p>
 </div>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__footnote_multiple.snap

···
 source: crates/weaver-renderer/src/atproto/tests.rs
 expression: output
 ---
-<p>First<sup class="footnote-reference"><a href="#1">1</a></sup> and second<sup class="footnote-reference"><a href="#2">2</a></sup> footnotes.</p>
+<p dir="ltr">First<sup class="footnote-reference"><a href="#1">1</a></sup> and second<sup class="footnote-reference"><a href="#2">2</a></sup> footnotes.</p>
 <div class="footnote-definition" id="1"><sup class="footnote-definition-label">1</sup>
-<p>First note.</p>
+<p dir="ltr">First note.</p>
 </div>
 <div class="footnote-definition" id="2"><sup class="footnote-definition-label">2</sup>
-<p>Second note.</p>
+<p dir="ltr">Second note.</p>
 </div>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__footnote_named.snap

···
 source: crates/weaver-renderer/src/atproto/tests.rs
 expression: output
 ---
-<p>Reference<label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Named footnote content.</span>.</p>
+<p dir="ltr">Reference<label for="sn-1" class="sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Named footnote content.</span>.</p>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__footnote_sidenote_inline.snap

···
 source: crates/weaver-renderer/src/atproto/tests.rs
 expression: output
 ---
-<p>Here is text<label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Sidenote content.</span></p>
+<p dir="ltr">Here is text<label for="sn-1" class="sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Sidenote content.</span></p>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__footnote_traditional.snap

···
 source: crates/weaver-renderer/src/atproto/tests.rs
 expression: output
 ---
-<p>Here is some text<label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">This is the footnote definition.</span>.</p>
+<p dir="ltr">Here is some text<label for="sn-1" class="sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">This is the footnote definition.</span>.</p>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__footnote_with_inline_formatting.snap

···
 source: crates/weaver-renderer/src/atproto/tests.rs
 expression: output
 ---
-<p>Text with footnote<label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Note with <strong>bold</strong> and <em>italic</em>.</span>.</p>
+<p dir="ltr">Text with footnote<label for="sn-1" class="sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Note with <strong>bold</strong> and <em>italic</em>.</span>.</p>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__math_rendering.snap

···
 source: crates/weaver-renderer/src/atproto/tests.rs
 expression: output
 ---
-<p>Inline <span class="math math-inline"><math display="inline"><msup><mi>x</mi><mn>2</mn></msup></math></span> and display:</p>
-<p><span class="math math-display"><math display="block"><mi>y</mi><mo>=</mo><mi>m</mi><mi>x</mi><mo>+</mo><mi>b</mi></math></span></p>
+<p dir="ltr">Inline <span class="math math-inline"><math display="inline"><msup><mi>x</mi><mn>2</mn></msup></math></span> and display:</p>
+<span class="math math-display"><math display="block"><mi>y</mi><mo>=</mo><mi>m</mi><mi>x</mi><mo>+</mo><mi>b</mi></math></span><p></p>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__paragraph_rendering.snap

···
 source: crates/weaver-renderer/src/atproto/tests.rs
 expression: output
 ---
-<p>This is a paragraph.</p>
-<p>This is another paragraph.</p>
+<p dir="ltr">This is a paragraph.</p>
+<p dir="ltr">This is another paragraph.</p>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__weaver_block_aside_class.snap

···
 expression: output
 ---
 <aside>
-<p>This paragraph should be in an aside.</p>
+<p dir="ltr">This paragraph should be in an aside.</p>
 </aside>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__weaver_block_before_blockquote.snap

···
 ---
 <aside>
 <blockquote>
-<p>This blockquote is in an aside.</p>
+<p dir="ltr">This blockquote is in an aside.</p>
 </aside>
 </blockquote>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__weaver_block_before_heading.snap

···
 ---
 <aside>
 <h2>Heading in aside</h2>
-<p>Paragraph also in aside.</p>
+<p dir="ltr">Paragraph also in aside.</p>
 </aside>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__weaver_block_custom_attributes.snap

···
 expression: output
 ---
 <div class="foo" width="300px" data-test="value">
-<p>Paragraph with class and attributes.</p>
+<p dir="ltr">Paragraph with class and attributes.</p>
 </div>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__weaver_block_custom_class.snap

···
 expression: output
 ---
 <div class="highlight">
-<p>This paragraph has a custom class.</p>
+<p dir="ltr">This paragraph has a custom class.</p>
 </div>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__weaver_block_multiple_classes.snap

···
 expression: output
 ---
 <aside class="highlight important">
-<p>Multiple classes applied.</p>
+<p dir="ltr">Multiple classes applied.</p>
 </aside>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__weaver_block_no_effect_on_following.snap

···
 expression: output
 ---
 <aside>
-<p>First paragraph in aside.</p>
+<p dir="ltr">First paragraph in aside.</p>
 </aside>
-<p>Second paragraph NOT in aside.</p>
+<p dir="ltr">Second paragraph NOT in aside.</p>

crates/weaver-renderer/src/atproto/snapshots/weaver_renderer__atproto__tests__weaver_block_with_footnote.snap

···
 expression: output
 ---
 <aside>
-<p>Aside with a footnote<label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Footnote in aside context.</span>.</p>
+<p dir="ltr">Aside with a footnote<label for="sn-1" class="sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Footnote in aside context.</span>.</p>
 </aside>

crates/weaver-renderer/src/atproto/writer.rs

···
     in_sidenote: bool,
     /// Whether we're deferring paragraph close for sidenote handling
     defer_paragraph_close: bool,
+    /// Buffered paragraph opening tag (without closing `>`) for dir attribute emission
+    pending_paragraph_open: Option<String>,
 
     _phantom: std::marker::PhantomData<&'a ()>,
 }
···
             pending_footnote_content: self.pending_footnote_content,
             in_sidenote: self.in_sidenote,
             defer_paragraph_close: self.defer_paragraph_close,
+            pending_paragraph_open: self.pending_paragraph_open,
             _phantom: std::marker::PhantomData,
         }
     }
···
             pending_footnote_content: String::new(),
             in_sidenote: false,
             defer_paragraph_close: false,
+            pending_paragraph_open: None,
             _phantom: std::marker::PhantomData,
         }
     }
···
     /// Close deferred paragraph if we're in that state.
     /// Called when a non-paragraph block element starts.
     fn close_deferred_paragraph(&mut self) -> Result<(), W::Error> {
+        // Also flush any pending paragraph open (shouldn't happen in normal flow, but be defensive)
+        if let Some(opening) = self.pending_paragraph_open.take() {
+            self.write(&opening)?;
+            self.write(">")?;
+        }
         if self.defer_paragraph_close {
             // Flush pending footnote as traditional before closing
             self.flush_pending_footnote()?;
···
                     // Buffer text while waiting to see if footnote def follows
                     self.pending_footnote_content.push_str(&text);
                 } else if !self.in_non_writing_block {
+                    // Flush pending paragraph with dir attribute if needed
+                    if let Some(opening) = self.pending_paragraph_open.take() {
+                        if let Some(dir) = crate::utils::detect_text_direction(&text) {
+                            self.write(&opening)?;
+                            self.write(" dir=\"")?;
+                            self.write(dir)?;
+                            self.write("\">")?;
+                        } else {
+                            self.write(&opening)?;
+                            self.write(">")?;
+                        }
+                    }
                     escape_html_body_text(&mut self.writer, &text)?;
                     self.end_newline = text.ends_with('\n');
                 }
···
                 } else {
                     self.flush_pending_footnote()?;
                     self.emit_wrapper_start()?;
-                    if self.end_newline {
-                        self.write("<p>")
+                    // Buffer paragraph opening for dir attribute detection
+                    let opening = if self.end_newline {
+                        String::from("<p")
                     } else {
-                        self.write("\n<p>")
-                    }
+                        String::from("\n<p")
+                    };
+                    self.pending_paragraph_open = Some(opening);
+                    Ok(())
                 }
             }
             Tag::Heading {
···
                     self.defer_paragraph_close = false;
                     Ok(())
                 } else {
+                    // Flush any pending paragraph open (for empty paragraphs)
+                    if let Some(opening) = self.pending_paragraph_open.take() {
+                        self.write(&opening)?;
+                        self.write(">")?;
+                    }
                     self.write("</p>\n")?;
                     self.close_wrapper()
                 }

crates/weaver-renderer/src/base_html.rs

···
     table_alignments: Vec<Alignment>,
     table_cell_index: usize,
     numbers: HashMap<CowStr<'a>, usize>,
+    /// Buffered paragraph opening tag (without closing `>`) for dir attribute emission
+    pending_paragraph_open: Option<String>,
 }
 
 impl<'a, I, W> HtmlWriter<'a, I, W>
···
             table_alignments: vec![],
             table_cell_index: 0,
             numbers: HashMap::new(),
+            pending_paragraph_open: None,
         }
     }
 
···
                 }
                 Text(text) => {
                     if !self.in_non_writing_block {
+                        // Flush pending paragraph with dir attribute if needed
+                        if let Some(opening) = self.pending_paragraph_open.take() {
+                            if let Some(dir) = crate::utils::detect_text_direction(&text) {
+                                self.write(&opening)?;
+                                self.write(" dir=\"")?;
+                                self.write(dir)?;
+                                self.write("\">")?;
+                            } else {
+                                self.write(&opening)?;
+                                self.write(">")?;
+                            }
+                        }
                         escape_html_body_text(&mut self.writer, &text)?;
                         self.end_newline = text.ends_with('\n');
                     }
···
         match tag {
             Tag::HtmlBlock => Ok(()),
             Tag::Paragraph(_) => {
-                if self.end_newline {
-                    self.write("<p>")
+                // Buffer paragraph opening for dir attribute detection
+                let opening = if self.end_newline {
+                    String::from("<p")
                 } else {
-                    self.write("\n<p>")
-                }
+                    String::from("\n<p")
+                };
+                self.pending_paragraph_open = Some(opening);
+                Ok(())
             }
             Tag::Heading {
                 level,
···
         match tag {
             TagEnd::HtmlBlock => {}
             TagEnd::Paragraph(_) => {
+                // Flush any pending paragraph open (for empty paragraphs)
+                if let Some(opening) = self.pending_paragraph_open.take() {
+                    self.write(&opening)?;
+                    self.write(">")?;
+                }
                 self.write("</p>\n")?;
             }
             TagEnd::Heading(level) => {

crates/weaver-renderer/src/css.rs

···
 /* When sidenotes exist, body padding creates the gutter */
 /* Left padding shrinks first as viewport narrows, right stays for sidenotes */
 body:has(.sidenote) {{
-    padding-left: clamp(0rem, calc((100vw - 95ch - 15.5rem - 2rem) / 2), 15.5rem);
-    padding-right: 15.5rem;
+    padding-inline-start: clamp(0rem, calc((100vw - 95ch - 15.5rem - 2rem) / 2), 15.5rem);
+    padding-inline-end: 15.5rem;
 }}
 
 /* Typography */
···
 
 /* Lists */
 ul, ol {{
-    margin-left: 1rem;
+    margin-inline-start: 1rem;
     margin-bottom: 1rem;
 }}
 
···
 
 /* Blockquotes */
 blockquote {{
-    border-left: 2px solid var(--color-secondary);
+    border-inline-start: 2px solid var(--color-secondary);
     background: var(--color-surface);
-    padding-left: 1rem;
-    padding-right: 1rem;
+    padding-inline-start: 1rem;
+    padding-inline-end: 1rem;
     padding-top: 0.5rem;
     padding-bottom: 0.04rem;
     margin: 1rem 0;
···
 th, td {{
     border: 1px solid var(--color-border);
     padding: 0.5rem;
-    text-align: left;
+    text-align: start;
 }}
 
 th {{
···
 
 .footnote-definition-label {{
     font-weight: 600;
-    margin-right: 0.5rem;
+    margin-inline-end: 0.5rem;
     color: var(--color-primary);
 }}
 
 /* Aside blocks (via WeaverBlock prefix) - scoped to notebook content */
 .notebook-content aside,
 .notebook-content .aside {{
-    float: left;
+    float: inline-start;
     width: 40%;
     margin: 0 1.5rem 1rem 0;
     padding: 1rem;
     background: var(--color-surface);
-    border-right: 3px solid var(--color-primary);
+    border-inline-end: 3px solid var(--color-primary);
     font-size: 0.9em;
-    clear: left;
+    clear: inline-start;
 }}
 
 .notebook-content aside > *:first-child,
···
 /* Reset blockquote styling inside asides */
 .notebook-content aside > blockquote,
 .notebook-content .aside > blockquote {{
-    border-left: none;
+    border-inline-start: none;
     background: transparent;
     padding: 0;
     margin: 0;
···
 }}
 
 /* Indent utilities */
-.indent-1 {{ margin-left: 1em; }}
-.indent-2 {{ margin-left: 2em; }}
-.indent-3 {{ margin-left: 3em; }}
+.indent-1 {{ margin-inline-start: 1em; }}
+.indent-2 {{ margin-inline-start: 2em; }}
+.indent-3 {{ margin-inline-start: 3em; }}
 
 /* Tufte-style Sidenotes */
 /* Hide checkbox for sidenote toggle */
···
     position: relative;
     top: -0.5em;
     color: var(--color-primary);
-    padding-left: 0.1em;
+    padding-inline-start: 0.1em;
 }}
 
 /* Sidenote content (margin notes on wide screens) */
 .sidenote {{
-    float: right;
-    clear: right;
-    margin-right: -15.5rem;
+    float: inline-end;
+    clear: inline-end;
+    margin-inline-end: -15.5rem;
     width: 14rem;
     margin-top: 0.3rem;
     margin-bottom: 1rem;
···
 @media (max-width: 900px) {{
     /* Reset sidenote gutter on mobile */
     body:has(.sidenote) {{
-        padding-right: 0;
+        padding-inline-end: 0;
     }}
 
     aside, .aside {{
···
         margin: 0.5rem 2.5%;
         padding: 0.5rem;
         background: var(--color-surface);
-        border-left: 2px solid var(--color-primary);
+        border-inline-start: 2px solid var(--color-primary);
     }}
 
     label.sidenote-number {{
···
     margin: 1rem 0;
     padding: 1rem;
     background: var(--color-surface);
-    border-left: 2px solid var(--color-secondary);
+    border-inline-start: 2px solid var(--color-secondary);
     box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 8%, transparent);
 }}
 
 .atproto-embed:hover {{
-    border-left-color: var(--color-primary);
+    border-inline-start-color: var(--color-primary);
 }}
 
 @media (prefers-color-scheme: dark) {{
     .atproto-embed {{
         box-shadow: none;
         border: 1px solid var(--color-border);
-        border-left: 2px solid var(--color-secondary);
+        border-inline-start: 2px solid var(--color-secondary);
     }}
 }}
 
···
 }}
 
 .embed-external:hover {{
-    border-left: 2px solid var(--color-primary);
-    margin-left: -1px;
+    border-inline-start: 2px solid var(--color-primary);
+    margin-inline-start: -1px;
 }}
 
 @media (prefers-color-scheme: dark) {{
···
     }}
 
     .embed-external:hover {{
-        border-left: 2px solid var(--color-primary);
-        margin-left: -1px;
+        border-inline-start: 2px solid var(--color-primary);
+        margin-inline-start: -1px;
     }}
 }}
 
···
     margin-top: 0.5rem;
     padding: 0.75rem;
     background: var(--color-overlay);
-    border-left: 2px solid var(--color-tertiary);
+    border-inline-start: 2px solid var(--color-tertiary);
 }}
 
 @media (prefers-color-scheme: dark) {{
     .embed-quote {{
         border: 1px solid var(--color-border);
-        border-left: 2px solid var(--color-tertiary);
+        border-inline-start: 2px solid var(--color-tertiary);
     }}
 }}
 
···
     display: block;
     padding: 1rem;
     background: var(--color-overlay);
-    border-left: 2px solid var(--color-border);
+    border-inline-start: 2px solid var(--color-border);
     color: var(--color-muted);
     font-style: italic;
     margin-top: 0.5rem;
···
     margin-top: 0.5rem;
     padding: 0.75rem;
     background: var(--color-overlay);
-    border-left: 2px solid var(--color-tertiary);
+    border-inline-start: 2px solid var(--color-tertiary);
 }}
 
 .embed-record-card > .embed-author-name {{
···
 .embed-fields .embed-fields {{
     display: block;
     margin-top: 0.5rem;
-    margin-left: 1rem;
-    padding-left: 0.5rem;
-    border-left: 1px solid var(--color-border);
+    margin-inline-start: 1rem;
+    padding-inline-start: 0.5rem;
+    border-inline-start: 1px solid var(--color-border);
 }}
 
 /* Type label inside fields should be block with spacing */
···
     padding: 0;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-left: 1px solid var(--color-border);
+    border-inline-start: 1px solid var(--color-border);
     box-shadow: none;
     overflow: hidden;
 }}
 
 .atproto-entry:hover {{
-    border-left-color: var(--color-border);
+    border-inline-start-color: var(--color-border);
 }}
 
 @media (prefers-color-scheme: dark) {{
     .atproto-entry {{
         border: 1px solid var(--color-border);
-        border-left: 1px solid var(--color-border);
+        border-inline-start: 1px solid var(--color-border);
     }}
 }}
 
···
     h3 {{ font-size: 1.2rem; }}
 
     blockquote {{
-        margin-left: 0;
-        margin-right: 0;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
     }}
 }}
 
···
     h3 {{ font-size: 1.1rem; }}
 
     blockquote {{
-        padding-left: 0.75rem;
-        padding-right: 0.75rem;
+        padding-inline-start: 0.75rem;
+        padding-inline-end: 0.75rem;
     }}
 }}
 "#,

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__blockquote_rendering.snap

···
 expression: output
 ---
 <blockquote>
-<p>This is a quote</p>
-<p>With multiple lines</p>
+<p dir="ltr">This is a quote</p>
+<p dir="ltr">With multiple lines</p>
 </blockquote>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__footnote_in_blockquote.snap

···
 expression: output
 ---
 <blockquote>
-<p>Quote with footnote<sup class="footnote-reference"><a href="#q">1</a></sup>.</p>
+<p dir="ltr">Quote with footnote<sup class="footnote-reference"><a href="#q">1</a></sup>.</p>
 </blockquote>
 <div class="footnote-definition" id="q"><sup class="footnote-definition-label">1</sup>
-<p>Footnote for quote.</p>
+<p dir="ltr">Footnote for quote.</p>
 </div>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__footnote_multiple.snap

···
 source: crates/weaver-renderer/src/static_site/tests.rs
 expression: output
 ---
-<p>First<sup class="footnote-reference"><a href="#1">1</a></sup> and second<sup class="footnote-reference"><a href="#2">2</a></sup> footnotes.</p>
+<p dir="ltr">First<sup class="footnote-reference"><a href="#1">1</a></sup> and second<sup class="footnote-reference"><a href="#2">2</a></sup> footnotes.</p>
 <div class="footnote-definition" id="1"><sup class="footnote-definition-label">1</sup>
-<p>First note.</p>
+<p dir="ltr">First note.</p>
 </div>
 <div class="footnote-definition" id="2"><sup class="footnote-definition-label">2</sup>
-<p>Second note.</p>
+<p dir="ltr">Second note.</p>
 </div>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__footnote_named.snap

···
 source: crates/weaver-renderer/src/static_site/tests.rs
 expression: output
 ---
-<p>Reference<label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Named footnote content.</span>.</p>
+<p dir="ltr">Reference<label for="sn-1" class="sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Named footnote content.</span>.</p>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__footnote_sidenote_inline.snap

···
 source: crates/weaver-renderer/src/static_site/tests.rs
 expression: output
 ---
-<p>Here is text<label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Sidenote content.</span></p>
+<p dir="ltr">Here is text<label for="sn-1" class="sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Sidenote content.</span></p>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__footnote_traditional.snap

···
 source: crates/weaver-renderer/src/static_site/tests.rs
 expression: output
 ---
-<p>Here is some text<label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">This is the footnote definition.</span>.</p>
+<p dir="ltr">Here is some text<label for="sn-1" class="sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">This is the footnote definition.</span>.</p>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__footnote_with_inline_formatting.snap

···
 source: crates/weaver-renderer/src/static_site/tests.rs
 expression: output
 ---
-<p>Text with footnote<label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Note with <strong>bold</strong> and <em>italic</em>.</span>.</p>
+<p dir="ltr">Text with footnote<label for="sn-1" class="sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Note with <strong>bold</strong> and <em>italic</em>.</span>.</p>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__math_rendering.snap

···
 source: crates/weaver-renderer/src/static_site/tests.rs
 expression: output
 ---
-<p>Inline <span class="math math-inline">x^2</span> and display:</p>
-<p><span class="math math-display">
+<p dir="ltr">Inline <span class="math math-inline">x^2</span> and display:</p>
+<span class="math math-display">
 y = mx + b
-</span></p>
+</span><p></p>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__paragraph_rendering.snap

···
 source: crates/weaver-renderer/src/static_site/tests.rs
 expression: output
 ---
-<p>This is a paragraph.</p>
-<p>This is another paragraph.</p>
+<p dir="ltr">This is a paragraph.</p>
+<p dir="ltr">This is another paragraph.</p>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__weaver_block_aside_class.snap

···
 expression: output
 ---
 <aside>
-<p>This paragraph should be in an aside.</p>
+<p dir="ltr">This paragraph should be in an aside.</p>
 </aside>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__weaver_block_before_blockquote.snap

···
 ---
 <aside>
 <blockquote>
-<p>This blockquote is in an aside.</p>
+<p dir="ltr">This blockquote is in an aside.</p>
 </blockquote>
 </aside>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__weaver_block_before_heading.snap

···
 ---
 <aside>
 <h2>Heading in aside</h2>
-<p>Paragraph also in aside.</p>
+<p dir="ltr">Paragraph also in aside.</p>
 </aside>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__weaver_block_custom_attributes.snap

···
 expression: output
 ---
 <div class="foo" width="300px" data-test="value">
-<p>Paragraph with class and attributes.</p>
+<p dir="ltr">Paragraph with class and attributes.</p>
 </div>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__weaver_block_custom_class.snap

···
 expression: output
 ---
 <div class="highlight">
-<p>This paragraph has a custom class.</p>
+<p dir="ltr">This paragraph has a custom class.</p>
 </div>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__weaver_block_multiple_classes.snap

···
 expression: output
 ---
 <aside class="highlight important">
-<p>Multiple classes applied.</p>
+<p dir="ltr">Multiple classes applied.</p>
 </aside>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__weaver_block_no_effect_on_following.snap

···
 expression: output
 ---
 <aside>
-<p>First paragraph in aside.</p>
+<p dir="ltr">First paragraph in aside.</p>
 </aside>
-<p>Second paragraph NOT in aside.</p>
+<p dir="ltr">Second paragraph NOT in aside.</p>

crates/weaver-renderer/src/static_site/snapshots/weaver_renderer__static_site__tests__weaver_block_with_footnote.snap

···
 expression: output
 ---
 <aside>
-<p>Aside with a footnote<label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Footnote in aside context.</span>.</p>
+<p dir="ltr">Aside with a footnote<label for="sn-1" class="sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">Footnote in aside context.</span>.</p>
 </aside>

crates/weaver-renderer/src/static_site/writer.rs

···
     in_sidenote: bool,
     /// Whether we're deferring paragraph close for sidenote handling
     defer_paragraph_close: bool,
+    /// Buffered paragraph opening tag (without closing `>`) for dir attribute emission
+    pending_paragraph_open: Option<String>,
 }
 
 impl<'input, I: Iterator<Item = Event<'input>>, A: AgentSession, W: StrWrite>
···
             pending_footnote_content: String::new(),
             in_sidenote: false,
             defer_paragraph_close: false,
+            pending_paragraph_open: None,
         }
     }
 
···
     /// Close deferred paragraph if we're in that state.
     /// Called when a non-paragraph block element starts.
     fn close_deferred_paragraph(&mut self) -> Result<(), W::Error> {
+        // Also flush any pending paragraph open (shouldn't happen in normal flow, but be defensive)
+        if let Some(opening) = self.pending_paragraph_open.take() {
+            self.write(&opening)?;
+            self.write(">")?;
+        }
         if self.defer_paragraph_close {
             // Flush pending footnote as traditional before closing
             self.flush_pending_footnote()?;
···
                     self.close_wrapper()?;
                     self.defer_paragraph_close = false;
                 } else {
+                    // Flush any pending paragraph open (for empty paragraphs)
+                    if let Some(opening) = self.pending_paragraph_open.take() {
+                        self.write(&opening)?;
+                        self.write(">")?;
+                    }
                     self.write("</p>\n")?;
                     self.block_depth -= 1;
                     self.close_wrapper()?;
···
                     // Buffer text while waiting to see if footnote def follows
                     self.pending_footnote_content.push_str(&text);
                 } else if !self.in_non_writing_block {
+                    // Flush pending paragraph with dir attribute if needed
+                    if let Some(opening) = self.pending_paragraph_open.take() {
+                        if let Some(dir) = crate::utils::detect_text_direction(&text) {
+                            self.write(&opening)?;
+                            self.write(" dir=\"")?;
+                            self.write(dir)?;
+                            self.write("\">")?;
+                        } else {
+                            self.write(&opening)?;
+                            self.write(">")?;
+                        }
+                    }
                     escape_html_body_text(&mut self.writer, &text)?;
                     self.end_newline = text.ends_with('\n');
                 }
···
                     self.flush_pending_footnote()?;
                     self.emit_wrapper_start()?;
                     self.block_depth += 1;
-                    if self.end_newline {
-                        self.write("<p>")
+                    // Buffer paragraph opening for dir attribute detection
+                    let opening = if self.end_newline {
+                        String::from("<p")
                     } else {
-                        self.write("\n<p>")
-                    }
+                        String::from("\n<p")
+                    };
+                    self.pending_paragraph_open = Some(opening);
+                    Ok(())
                 }
             }
             Tag::Heading {

crates/weaver-renderer/src/utils.rs

···
-use markdown_weaver::{CodeBlockKind, CowStr, Event, Tag};
+use markdown_weaver::CowStr;
 use miette::IntoDiagnostic;
 use n0_future::TryFutureExt;
 use std::{path::Path, sync::OnceLock};
···
 use markdown_weaver::BrokenLink;
 use std::path::PathBuf;
 use std::sync::Arc;
+use unicode_bidi::{get_base_direction, Direction};
 use unicode_normalization::UnicodeNormalization;
 
 #[cfg(not(all(target_family = "wasm", target_os = "unknown")))]
···
         }
     }
 }
+
+/// Detect text direction from first strong directional character.
+/// Returns Some("rtl") for Hebrew/Arabic/etc, Some("ltr") for Latin, None if no strong char found.
+pub fn detect_text_direction(text: &str) -> Option<&'static str> {
+    match get_base_direction(text) {
+        Direction::Ltr => Some("ltr"),
+        Direction::Rtl => Some("rtl"),
+        Direction::Mixed => None, // neutral/unknown - let browser decide
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_detect_text_direction_ltr() {
+        assert_eq!(detect_text_direction("Hello World"), Some("ltr"));
+        assert_eq!(detect_text_direction("Привет мир"), Some("ltr"));
+        assert_eq!(detect_text_direction("你好世界"), Some("ltr"));
+        assert_eq!(detect_text_direction("Γειά σου κόσμε"), Some("ltr"));
+    }
+
+    #[test]
+    fn test_detect_text_direction_rtl() {
+        // Hebrew
+        assert_eq!(detect_text_direction("שלום עולם"), Some("rtl"));
+        // Arabic
+        assert_eq!(detect_text_direction("مرحبا بالعالم"), Some("rtl"));
+        // Mixed with leading whitespace and punctuation
+        assert_eq!(detect_text_direction("   123... שלום"), Some("rtl"));
+        assert_eq!(detect_text_direction("   456!!! مرحبا"), Some("rtl"));
+    }
+
+    #[test]
+    fn test_detect_text_direction_neutral_only() {
+        assert_eq!(detect_text_direction("   "), None);
+        assert_eq!(detect_text_direction("123456"), None);
+        assert_eq!(detect_text_direction("!!!..."), None);
+        assert_eq!(detect_text_direction(""), None);
+    }
+
+    #[test]
+    fn test_detect_text_direction_leading_neutrals() {
+        assert_eq!(detect_text_direction("   123... Hello"), Some("ltr"));
+        assert_eq!(detect_text_direction("!!!456 שלום"), Some("rtl"));
+    }
+}

weaver_notes/test-sidenotes.md

···
 
 {.aside}
 > **On Platform Decay**
->
 > Through all of this I was never really satisfied with the options that were out there for long-form writing. Wordpress required too much setup. Tumblr's system for comments remains insane. Hosting my own seemed like too much money to burn on something nobody might read.
 
 But at the same time, Substack's success proves that there is very much a desire for long-form writing, enough that people will pay for it, and that investors will back it. There are thoughts and forms of writing that you simply cannot fit into a post or even a thread of posts.