@jant/core 0.6.12 → 0.6.14

package/src/client/components/jant-compose-editor.ts

@@ -31,6 +31,10 @@ import type {
   ComposeFullscreenOpenDetail,
 } from "./compose-types.js";
 import type { ComposeConvertFields } from "./compose-format-convert.js";
+import {
+  promoteLeadingH1Title as getLeadingH1TitlePromotion,
+  type LeadingH1TitlePromotion,
+} from "./compose-title-from-heading.js";
 import {
   UPLOAD_ACCEPT,
   getMediaCategory,
@@ -59,6 +63,7 @@ import {
   markSlashCommandDiscovered,
   scheduleSlashCommandHint,
 } from "../slash-discovery.js";
+import { getInlineImageNodeLabels } from "./inline-image-issues.js";
 
 interface ComposeFilePickerCloseDetail {
   cancelled: boolean;
@@ -631,6 +636,67 @@ export class JantComposeEditor extends LitElement {
     return this._isEmptyDoc(json) ? null : json;
   }
 
+  private _isSelectionInsideTopLevelBlock(index: number): boolean {
+    const editor = this._editor;
+    if (!editor) return false;
+    return editor.state.selection.$from.index(0) === index;
+  }
+
+  private _removedTopLevelSize(promotion: LeadingH1TitlePromotion): number {
+    const doc = this._editor?.state.doc;
+    if (!doc) return 0;
+
+    let size = 0;
+    for (let index = 0; index <= promotion.headingIndex; index += 1) {
+      size += doc.child(index)?.nodeSize ?? 0;
+    }
+    return size;
+  }
+
+  promoteLeadingH1Title(options: { force?: boolean } = {}): boolean {
+    if (this.format !== "note" || this._title.trim()) return false;
+
+    const currentBodyJson = this._editor?.getJSON() ?? this._bodyJson;
+    const promotion = getLeadingH1TitlePromotion(currentBodyJson);
+    if (!promotion) return false;
+
+    if (
+      !options.force &&
+      this._isSelectionInsideTopLevelBlock(promotion.headingIndex)
+    ) {
+      return false;
+    }
+
+    const editor = this._editor;
+    const wasFocused = Boolean(editor?.isFocused);
+    const previousSelectionFrom = editor?.state.selection.from ?? null;
+    const removedSize = this._removedTopLevelSize(promotion);
+
+    this._title = promotion.title;
+    this._showTitle = true;
+    this._bodyJson = promotion.bodyJson;
+
+    if (editor) {
+      if (promotion.bodyJson) {
+        editor.commands.setContent(promotion.bodyJson);
+      } else {
+        editor.commands.clearContent();
+      }
+
+      if (wasFocused && previousSelectionFrom !== null) {
+        const max = editor.state.doc.content.size;
+        if (max > 0) {
+          editor.commands.setTextSelection(
+            Math.max(1, Math.min(previousSelectionFrom - removedSize, max)),
+          );
+          editor.commands.focus();
+        }
+      }
+    }
+
+    return true;
+  }
+
   getNormalizedBodyJson(): JSONContent | null {
     return this._normalizeDocJson(this._bodyJson);
   }
@@ -913,6 +979,7 @@ export class JantComposeEditor extends LitElement {
       onUpdate: (json) => {
         this._bodyJson = json;
         this._ensureScrollBuffer();
+        this.promoteLeadingH1Title();
         hideSlashCommandHint(this);
       },
       onFocus: () => {
@@ -921,6 +988,9 @@ export class JantComposeEditor extends LitElement {
           scheduleSlashCommandHint(this);
         }
       },
+      onBlur: () => {
+        this.promoteLeadingH1Title({ force: true });
+      },
       onSelectionUpdate: (selection) => {
         this._lastEditorSelection = selection;
       },
@@ -935,6 +1005,7 @@ export class JantComposeEditor extends LitElement {
         shouldRehost: (src) => this.#shouldRehostSrc(src),
         rehost: (src) => this.#rehostInlineImage(src),
       },
+      imageNodeLabels: getInlineImageNodeLabels(this.labels),
     });
     this._lastEditorSelection = this._readEditorSelection();
 
@@ -1851,11 +1922,14 @@ export class JantComposeEditor extends LitElement {
   }
 
   private _renderAttachmentPreviewFallback(category: "image" | "video") {
+    const unavailableLabel =
+      this.labels.brokenImageUnavailable ?? "Image unavailable";
+
     return html`
       <div
         class="compose-attachment-preview-fallback"
         data-preview-failed=${category}
-        aria-hidden="true"
+        aria-label=${unavailableLabel}
       >
         <svg
           width="28"
@@ -1871,6 +1945,9 @@ export class JantComposeEditor extends LitElement {
           <circle cx="9" cy="10" r="1.25" />
           <path d="m7 16 3.4-3.45 2.65 2.45 2.45-3.05 1.95 2.5" />
         </svg>
+        <span class="compose-attachment-preview-fallback-label">
+          ${unavailableLabel}
+        </span>
         ${category === "video"
           ? html`
               <div class="compose-attachment-play-icon">

package/src/client/components/jant-compose-fullscreen.ts

@@ -21,6 +21,7 @@ import type {
 } from "./compose-types.js";
 import { createTiptapEditor } from "../tiptap/create-editor.js";
 import { uploadAndInsertInlineImage } from "../tiptap/inline-image-upload.js";
+import { getInlineImageNodeLabels } from "./inline-image-issues.js";
 
 const ESCAPE_OVERLAY_SELECTOR = ".tiptap-slash-menu, .tiptap-link-input";
 
@@ -159,6 +160,7 @@ export class JantComposeFullscreen extends LitElement {
         shouldInsertInline: (file) => file.type.startsWith("image/"),
         uploadInlineImage: (file) => this._uploadAndInsertImage(file),
       },
+      imageNodeLabels: getInlineImageNodeLabels(this.labels),
     });
 
     const selection = this._selection;