@jant/core 0.6.14 → 0.6.15

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

@@ -891,7 +891,7 @@ export class JantComposeDialog extends LitElement {
         if (requestId !== this._openEditRequestId) return;
       }
 
-      if (post.collectionIds?.length) {
+      if (!post.replyToId && post.collectionIds?.length) {
         this._collectionIds = post.collectionIds;
       }
 
@@ -1008,6 +1008,9 @@ export class JantComposeDialog extends LitElement {
     if (options?.restoreDraft !== false) {
       await this.restoreLocalDraft({ expectedReplyToId: id });
     }
+    // Collection membership belongs to the existing Thread. Reply compose
+    // must not restore or submit stale per-compose Collection state.
+    this._collectionIds = [];
 
     this.closest("dialog")?.showModal();
     await this.updateComplete;
@@ -1371,9 +1374,10 @@ export class JantComposeDialog extends LitElement {
           : this._visibility
         : undefined,
       rating: editorData.rating,
-      collectionIds: isRoot ? [...this._collectionIds] : [],
+      collectionIds: isRoot && !this._replyToId ? [...this._collectionIds] : [],
       attachments: orderedAttachments,
       replyToId: isRoot ? (this._replyToId ?? undefined) : undefined,
+      quietReply: isRoot ? this._quietReply || undefined : undefined,
       replyThreadRootId: isRoot
         ? (this._replyThreadRootId ?? undefined)
         : undefined,
@@ -1441,7 +1445,7 @@ export class JantComposeDialog extends LitElement {
       status,
       visibility: this._visibilityLocked ? undefined : this._visibility,
       rating: editorData.rating,
-      collectionIds: [...this._collectionIds],
+      collectionIds: this._replyToId ? [] : [...this._collectionIds],
       attachments: orderedAttachments,
       editPostId: this._editPostId ?? this._draftSourceId ?? undefined,
       replyToId: this._replyToId ?? undefined,
@@ -2437,15 +2441,7 @@ export class JantComposeDialog extends LitElement {
       this._handleConfirmSave();
     } else if ((ke.metaKey || ke.ctrlKey) && ke.key === "Enter") {
       e.preventDefault();
-      if (this._attachedPanelOpen) {
-        this._doneAttachedPanel();
-        return;
-      }
-      if (!this._canPublish()) {
-        this._focusBlockedSubmitField("published");
-        return;
-      }
-      void this._submit("published");
+      this._publishFromShortcut();
     } else if (
       (ke.metaKey || ke.ctrlKey) &&
       !ke.altKey &&
@@ -2471,6 +2467,18 @@ export class JantComposeDialog extends LitElement {
     }
   };
 
+  private _publishFromShortcut() {
+    if (this._attachedPanelOpen) {
+      this._doneAttachedPanel();
+      return;
+    }
+    if (!this._canPublish()) {
+      this._focusBlockedSubmitField("published");
+      return;
+    }
+    void this._submit("published");
+  }
+
   private _handleAltPanelOpen = (e: Event) => {
     const detail = (e as CustomEvent<{ index: number }>).detail;
     this._altPanelIndex = detail.index;
@@ -2500,7 +2508,10 @@ export class JantComposeDialog extends LitElement {
   private _handleFullscreenClose = (
     e: CustomEvent<ComposeFullscreenCloseDetail>,
   ) => {
-    const editor = this._editor;
+    const editors = Array.from(
+      this.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+    );
+    const editor = editors[e.detail.editorIndex ?? 0] ?? this._editor;
     if (editor) {
       editor.setEditorState(
         e.detail.json as import("@tiptap/core").JSONContent,
@@ -2511,9 +2522,16 @@ export class JantComposeDialog extends LitElement {
       // Adopt any in-flight inline image uploads from the fullscreen editor
       // so blob: placeholder URLs get replaced when uploads complete.
       editor.adoptPendingUploads();
-      this.updateComplete.then(() => editor.focusSelection(e.detail.selection));
+      if (e.detail.intent !== "publish") {
+        this.updateComplete.then(() =>
+          editor.focusSelection(e.detail.selection),
+        );
+      }
     }
     this._replyExpanded = e.detail.replyExpanded;
+    if (e.detail.intent === "publish") {
+      this._publishFromShortcut();
+    }
   };
 
   private _buildFullscreenReplyContext(): ComposeFullscreenReplyContext | null {
@@ -2530,6 +2548,11 @@ export class JantComposeDialog extends LitElement {
     e: CustomEvent<ComposeFullscreenOpenDetail>,
   ) => {
     e.detail.replyContext = this._buildFullscreenReplyContext();
+    const editors = Array.from(
+      this.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+    );
+    const editorIndex = editors.indexOf(e.target as JantComposeEditor);
+    e.detail.editorIndex = editorIndex >= 0 ? editorIndex : 0;
   };
 
   private _handleAttachedPanelOpen = (e: Event) => {
@@ -2551,6 +2574,7 @@ export class JantComposeDialog extends LitElement {
         placeholder: this.labels.attachedTextPlaceholder,
         content,
         toolbarMode: "compose",
+        tableControlLabels: this.labels.tableControls,
       });
       this._focusAttachedEditorBoundary(content);
     });
@@ -2638,6 +2662,7 @@ export class JantComposeDialog extends LitElement {
       const allDraftItems = (posts as Record<string, unknown>[]).map(
         (p): DraftItem => ({
           id: p.id as string,
+          slug: p.slug as string,
           format: p.format as ComposeFormat,
           title:
             ((p.format as ComposeFormat) === "quote"
@@ -2744,7 +2769,7 @@ export class JantComposeDialog extends LitElement {
     this._visibility = post.visibility ?? "public";
     this._visibilityLocked = Boolean(post.replyToId);
 
-    if (post.collectionIds?.length) {
+    if (!post.replyToId && post.collectionIds?.length) {
       this._collectionIds = post.collectionIds;
     }
 
@@ -3168,7 +3193,9 @@ export class JantComposeDialog extends LitElement {
       return;
     }
 
-    this._collectionIds = [...(draft.collectionIds ?? [])];
+    this._collectionIds = draft.replyToId
+      ? []
+      : [...(draft.collectionIds ?? [])];
     this._slug = draft.slug ?? "";
     this._slugTaken = false;
     this._slugCheckLoading = false;
@@ -3309,7 +3336,9 @@ export class JantComposeDialog extends LitElement {
 
     // Restore metadata
     this._format = draft.format;
-    this._collectionIds = [...(draft.collectionIds ?? [])];
+    this._collectionIds = this._replyToId
+      ? []
+      : [...(draft.collectionIds ?? [])];
     this._slug = draft.slug ?? "";
     this._publishedAtInput = draft.publishedAtInput ?? "";
     this._publishedAtTimeMinutes = draft.publishedAtTimeMinutes ?? null;
@@ -3426,6 +3455,8 @@ export class JantComposeDialog extends LitElement {
 
   private _renderDraftItem(draft: DraftItem) {
     const preview = this._getDraftPreview(draft);
+    const menuId = `draft-actions-${draft.id}`;
+    const menuOpen = this._draftMenuOpenId === draft.id;
 
     return html`
       <div class="compose-draft-item" @click=${() => this._loadDraft(draft.id)}>
@@ -3442,7 +3473,7 @@ export class JantComposeDialog extends LitElement {
           </div>
         </div>
         <div class="relative">
-          ${this._draftMenuOpenId === draft.id
+          ${menuOpen
             ? html`<div
                 class="compose-dropdown-backdrop"
                 @click=${(e: Event) => {
@@ -3454,6 +3485,10 @@ export class JantComposeDialog extends LitElement {
           <button
             type="button"
             class="compose-draft-more"
+            aria-label=${this.labels.draftActions}
+            aria-haspopup="menu"
+            aria-expanded=${menuOpen ? "true" : "false"}
+            aria-controls=${menuId}
             @click=${(e: Event) => {
               e.stopPropagation();
               this._draftMenuOpenId =
@@ -3466,12 +3501,34 @@ export class JantComposeDialog extends LitElement {
               <circle cx="12" cy="8" r="1.2" />
             </svg>
           </button>
-          ${this._draftMenuOpenId === draft.id
+          ${menuOpen
             ? html`
-                <div class="compose-dropdown compose-dropdown-right">
+                <div
+                  id=${menuId}
+                  class="compose-dropdown compose-dropdown-right"
+                  role="menu"
+                >
+                  <a
+                    class="compose-dropdown-item"
+                    href=${publicPath(`/preview/${draft.slug}`)}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    role="menuitem"
+                    @click=${(e: Event) => {
+                      e.stopPropagation();
+                      this._draftMenuOpenId = null;
+                    }}
+                  >
+                    ${this.labels.previewDraft}
+                  </a>
+                  <div
+                    class="compose-dropdown-separator"
+                    role="separator"
+                  ></div>
                   <button
                     type="button"
                     class="compose-dropdown-item compose-dropdown-item-danger"
+                    role="menuitem"
                     @click=${(e: Event) => {
                       e.stopPropagation();
                       this._deleteDraft(draft.id);
@@ -5254,6 +5311,12 @@ export class JantComposeDialog extends LitElement {
         "jant-compose-editor",
       );
       editors[this._focusedThreadIndex]?.focusInput();
+      const threadLayout = this.querySelector<HTMLElement>(
+        ".compose-thread-compose-layout",
+      );
+      if (threadLayout) {
+        threadLayout.scrollTop = threadLayout.scrollHeight;
+      }
     });
   }
 
@@ -5535,11 +5598,12 @@ export class JantComposeDialog extends LitElement {
           : html`<div
                 class=${classMap({
                   "compose-action-row": true,
+                  "compose-action-row-without-collection": !!this._replyToId,
                   "compose-action-row-overlay-open":
                     this._showPublishPanel || this._showCollection,
                 })}
               >
-                ${this._renderCollectionSelector()}
+                ${this._replyToId ? nothing : this._renderCollectionSelector()}
                 ${this._renderPublishButton()}
               </div>
               ${this._renderQuickActionsRow()}`}

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

@@ -1006,6 +1006,7 @@ export class JantComposeEditor extends LitElement {
         rehost: (src) => this.#rehostInlineImage(src),
       },
       imageNodeLabels: getInlineImageNodeLabels(this.labels),
+      tableControlLabels: this.labels.tableControls,
     });
     this._lastEditorSelection = this._readEditorSelection();
 
@@ -1709,6 +1710,16 @@ export class JantComposeEditor extends LitElement {
     this._lastFocusedField = target;
   }
 
+  private _handleTitleKeydown(e: globalThis.KeyboardEvent) {
+    if (e.isComposing || e.keyCode === 229) return;
+    if (e.key !== "Enter" || e.metaKey || e.ctrlKey || e.altKey) {
+      return;
+    }
+
+    e.preventDefault();
+    this._editor?.commands.focus("start");
+  }
+
   private _toggleEmojiPicker() {
     if (this._showEmojiPicker) {
       this.closeEmojiPicker();
@@ -1974,13 +1985,7 @@ export class JantComposeEditor extends LitElement {
                   .value=${this._title}
                   @input=${(e: Event) => this._onInput("_title", e)}
                   @focus=${(e: Event) => this._onFieldFocus(e)}
-                  @keydown=${(e: globalThis.KeyboardEvent) => {
-                    if (e.isComposing || e.keyCode === 229) return;
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      this._editor?.commands.focus("start");
-                    }
-                  }}
+                  @keydown=${this._handleTitleKeydown}
                   class="compose-input compose-note-title"
                   placeholder=${this.labels.titlePlaceholder}
                 />
@@ -2053,6 +2058,7 @@ export class JantComposeEditor extends LitElement {
           .value=${this._title}
           @input=${(e: Event) => this._onInput("_title", e)}
           @focus=${(e: Event) => this._onFieldFocus(e)}
+          @keydown=${this._handleTitleKeydown}
           @blur=${() => {
             this._showLinkTitleValidation = true;
           }}

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

@@ -23,7 +23,8 @@ 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";
+const ESCAPE_OVERLAY_SELECTOR =
+  ".tiptap-slash-menu, .tiptap-link-input, .tiptap-table-size-picker, .tiptap-table-options:not([hidden])";
 
 export class JantComposeFullscreen extends LitElement {
   static properties = {
@@ -45,6 +46,7 @@ export class JantComposeFullscreen extends LitElement {
   private _editor: Editor | null = null;
   private _content: JSONContent | null = null;
   private _selection: ComposeEditorSelection | null = null;
+  private _editorIndex = 0;
   private _fileInput: HTMLInputElement | null = null;
   #inlineImageUploadPromises = new Set<Promise<void>>();
 
@@ -130,6 +132,7 @@ export class JantComposeFullscreen extends LitElement {
     this._showTitle = e.detail.showTitle || e.detail.title.trim().length > 0;
     this._replyContext = e.detail.replyContext ?? null;
     this._replyExpanded = e.detail.replyContext?.expanded ?? false;
+    this._editorIndex = e.detail.editorIndex ?? 0;
     this._open = true;
     this.updateComplete.then(() => {
       const dialog = this.querySelector<HTMLDialogElement>(
@@ -161,6 +164,7 @@ export class JantComposeFullscreen extends LitElement {
         uploadInlineImage: (file) => this._uploadAndInsertImage(file),
       },
       imageNodeLabels: getInlineImageNodeLabels(this.labels),
+      tableControlLabels: this.labels.tableControls,
     });
 
     const selection = this._selection;
@@ -189,9 +193,18 @@ export class JantComposeFullscreen extends LitElement {
   };
 
   private _onDocumentKeydown = (e: globalThis.KeyboardEvent) => {
-    if (!this._open || e.key !== "Escape") return;
-    // Let IME consume Escape during composition (e.g. CJK candidate dismiss).
+    if (!this._open) return;
+    // Let IME consume keys during composition (e.g. CJK candidate selection).
     if (e.isComposing || e.keyCode === 229) return;
+
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      this._publish();
+      return;
+    }
+
+    if (e.key !== "Escape") return;
     if (this._hasActiveEscapeOverlay()) return;
 
     e.preventDefault();
@@ -210,7 +223,7 @@ export class JantComposeFullscreen extends LitElement {
     ).some((el) => getComputedStyle(el).display !== "none");
   }
 
-  private _finishClose() {
+  private _finishClose(intent?: "publish") {
     const json = this._editor?.getJSON() ?? this._content;
     const selection = this._editor
       ? {
@@ -238,6 +251,8 @@ export class JantComposeFullscreen extends LitElement {
           showTitle: this._showTitle || this._title.trim().length > 0,
           selection,
           replyExpanded: this._replyExpanded,
+          intent,
+          editorIndex: this._editorIndex,
         },
       }),
     );
@@ -248,6 +263,11 @@ export class JantComposeFullscreen extends LitElement {
     this._finishClose();
   }
 
+  private _publish() {
+    if (!this._open) return;
+    this._finishClose("publish");
+  }
+
   private _revealTitle() {
     this._showTitle = true;
     this.updateComplete.then(() => {