@jant/core 0.6.12 → 0.6.13

package/src/client/components/compose-types.ts

@@ -149,6 +149,14 @@ export interface ComposeLabels {
   imageNotRehosted?: string;
   /** Toast when several pasted remote images couldn't be rehosted (uses a {count} placeholder). */
   imagesNotRehosted?: string;
+  /** Inline editor label shown when an image node cannot load. */
+  brokenImageUnavailable?: string;
+  /** Button label for removing a broken inline image. */
+  brokenImageDelete?: string;
+  /** Button label for replacing a broken inline image. */
+  brokenImageReplace?: string;
+  /** Button label for opening the original broken image URL. */
+  brokenImageOpen?: string;
   loadingPost: string;
   loadPostFailed: string;
   published: string;

package/src/client/components/inline-image-issues.ts

@@ -0,0 +1,17 @@
+import type { ImageNodeLabels } from "../tiptap/image-node.js";
+import type { ComposeLabels } from "./compose-types.js";
+
+export function getInlineImageNodeLabels(
+  labels: ComposeLabels,
+): Partial<ImageNodeLabels> {
+  const imageLabels: Partial<ImageNodeLabels> = {};
+  if (labels.brokenImageUnavailable) {
+    imageLabels.unavailable = labels.brokenImageUnavailable;
+  }
+  if (labels.brokenImageDelete) imageLabels.delete = labels.brokenImageDelete;
+  if (labels.brokenImageReplace) {
+    imageLabels.replace = labels.brokenImageReplace;
+  }
+  if (labels.brokenImageOpen) imageLabels.open = labels.brokenImageOpen;
+  return imageLabels;
+}

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

@@ -1321,6 +1321,7 @@ export class JantComposeDialog extends LitElement {
     index: number,
     status: "published" | "draft",
   ): ComposeSubmitDetail {
+    editor.promoteLeadingH1Title({ force: true });
     const editorData = editor.getData();
     const mediaAttachments = new Map(
       (editorData.attachments ?? []).map((a) => [a.clientId, a]),
@@ -1389,6 +1390,7 @@ export class JantComposeDialog extends LitElement {
     const editor = this._editor;
     if (!editor) return null;
 
+    editor.promoteLeadingH1Title({ force: true });
     const editorData = editor.getData();
     const mediaAttachments = new Map(
       (editorData.attachments ?? []).map((attachment) => [

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;