@jant/core 0.6.11 → 0.6.13

package/src/client/components/compose-title-from-heading.ts

@@ -0,0 +1,66 @@
+import type { JSONContent } from "@tiptap/core";
+
+export interface LeadingH1TitlePromotion {
+  title: string;
+  bodyJson: JSONContent | null;
+  headingIndex: number;
+}
+
+function textFromNode(node: JSONContent): string {
+  if (typeof node.text === "string") return node.text;
+  if (!node.content) return node.type === "hardBreak" ? " " : "";
+  return node.content.map(textFromNode).join("");
+}
+
+function hasOnlyEmptyInlineContent(node: JSONContent): boolean {
+  if (!node.content || node.content.length === 0) return true;
+  return node.content.every((child) => {
+    if (child.type === "text") return !child.text?.trim();
+    if (child.type === "hardBreak") return true;
+    return false;
+  });
+}
+
+function isIgnorableLeadingBlock(node: JSONContent): boolean {
+  return (
+    (node.type === "paragraph" || node.type === "heading") &&
+    hasOnlyEmptyInlineContent(node)
+  );
+}
+
+function normalizeTitleText(text: string): string {
+  return text.replace(/\s+/g, " ").trim();
+}
+
+export function promoteLeadingH1Title(
+  bodyJson: JSONContent | null,
+): LeadingH1TitlePromotion | null {
+  const content = bodyJson?.content;
+  if (!bodyJson || !content?.length) return null;
+
+  const headingIndex = content.findIndex((node) => {
+    return !isIgnorableLeadingBlock(node);
+  });
+
+  if (headingIndex < 0) return null;
+
+  const heading = content[headingIndex];
+  if (heading?.type !== "heading" || heading.attrs?.level !== 1) return null;
+
+  const title = normalizeTitleText(textFromNode(heading));
+  if (!title) return null;
+
+  const nextContent = content.slice(headingIndex + 1);
+  if (nextContent.length === 0) {
+    return { title, bodyJson: null, headingIndex };
+  }
+
+  return {
+    title,
+    bodyJson: {
+      ...bodyJson,
+      content: nextContent,
+    },
+    headingIndex,
+  };
+}

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-command-palette.ts

@@ -5,6 +5,7 @@
  *   - Navigate (default): filter preloaded posts, collections, system pages
  *   - Command (`>` prefix): run actions like New Post
  *   - Search (`?` prefix): redirects to /search?q=... on Enter
+ *   - Path (`/` prefix): opens a local path, with search as the second option
  */
 
 import { LitElement, html, nothing } from "lit";
@@ -45,10 +46,24 @@ const ICONS = {
   system: `<svg ${ICON_ATTRS}><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
   // zap/lightning for commands
   command: `<svg ${ICON_ATTRS}><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>`,
+  // corner-down-right for local path navigation
+  path: `<svg ${ICON_ATTRS}><polyline points="15 10 20 15 15 20"/><path d="M4 4v7a4 4 0 0 0 4 4h12"/></svg>`,
   // search
   search: `<svg ${ICON_ATTRS}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`,
 };
 
+export function getPathCommandTarget(query: string): string {
+  const stripped = query.trim().replace(/^[/／]+/, "");
+  return stripped ? `/${stripped}` : "/";
+}
+
+export function getPathCommandSearchQuery(query: string): string {
+  return query
+    .trim()
+    .replace(/^[/／]+/, "")
+    .trim();
+}
+
 // ---------------------------------------------------------------------------
 // History helpers
 // ---------------------------------------------------------------------------
@@ -208,12 +223,13 @@ export class JantCommandPalette extends LitElement {
   // Mode detection
   // -----------------------------------------------------------------------
 
-  get #mode(): "navigate" | "command" | "search" {
-    // Accept both halfwidth (>, ?) and fullwidth (＞, ？) prefixes so CJK
+  get #mode(): "navigate" | "command" | "search" | "path" {
+    // Accept both halfwidth and fullwidth prefixes so CJK
     // users don't have to toggle their IME to enter command/search mode.
     const first = this._query.charAt(0);
     if (first === ">" || first === "＞") return "command";
     if (first === "?" || first === "？") return "search";
+    if (first === "/" || first === "／") return "path";
     return "navigate";
   }
 
@@ -270,6 +286,8 @@ export class JantCommandPalette extends LitElement {
     icon: string;
     /** For search-mode items: the query to execute */
     searchQuery?: string;
+    /** For path-mode items: the local path to open */
+    pathTarget?: string;
   }> {
     const mode = this.#mode;
 
@@ -299,12 +317,41 @@ export class JantCommandPalette extends LitElement {
       ];
     }
 
+    if (mode === "path") {
+      const target = getPathCommandTarget(this._query);
+      const searchQuery = getPathCommandSearchQuery(this._query);
+      const items: Array<{
+        label: string;
+        secondary?: string;
+        icon: string;
+        searchQuery?: string;
+        pathTarget?: string;
+      }> = [
+        {
+          label: `Go to ${target}`,
+          icon: ICONS.path,
+          pathTarget: target,
+        },
+      ];
+
+      if (searchQuery) {
+        items.push({
+          label: `Search for "${searchQuery}"`,
+          icon: ICONS.search,
+          searchQuery,
+        });
+      }
+
+      return items;
+    }
+
     // Navigate mode — show all items when no query (autocomplete)
     const navItems: Array<{
       label: string;
       secondary?: string;
       icon: string;
       searchQuery?: string;
+      pathTarget?: string;
     }> = this.#navigateItems.map((item) => ({
       label: item.title,
       secondary: item.type === "system" ? item.path : item.path,
@@ -351,6 +398,24 @@ export class JantCommandPalette extends LitElement {
       return;
     }
 
+    if (mode === "path") {
+      const displayItem = this.#displayItems[index];
+      if (displayItem?.pathTarget) {
+        saveHistory(NAV_HISTORY_KEY, displayItem.pathTarget);
+        this.close();
+        window.location.href = displayItem.pathTarget;
+        return;
+      }
+
+      if (displayItem?.searchQuery) {
+        const q = displayItem.searchQuery;
+        saveHistory(SEARCH_HISTORY_KEY, q);
+        this.close();
+        window.location.href = `/search?q=${encodeURIComponent(q)}`;
+      }
+      return;
+    }
+
     // Navigate mode — check if the selected item is a search fallback
     const displayItem = this.#displayItems[index];
     if (displayItem?.searchQuery) {

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) => [
@@ -5432,7 +5434,11 @@ export class JantComposeDialog extends LitElement {
 
     return html`
       <div
-        class="compose-thread-layout compose-thread-compose-layout"
+        class=${classMap({
+          "compose-thread-layout": true,
+          "compose-thread-compose-layout": true,
+          "compose-reply-compose-layout": isReply,
+        })}
         @jant:compose-content-changed=${() => this._scheduleDraftSave()}
       >
         ${isReply ? this._renderReplyContext() : nothing}
@@ -5502,7 +5508,9 @@ export class JantComposeDialog extends LitElement {
             ? this._renderThreadComposeLayout()
             : isReply
               ? html`
-                  <div class="compose-thread-layout">
+                  <div
+                    class="compose-thread-layout compose-reply-compose-layout"
+                  >
                     ${this._renderReplyContext()}
                     <div
                       class="compose-editor-row"

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;