@jant/core 0.3.36 → 0.3.38

package/src/client/components/jant-post-form.ts

@@ -1,5 +1,5 @@
 /**
- * Dashboard Post Form
+ * Post Form
  *
  * Light DOM Lit component that manages post create/edit form state.
  * Dispatches `jant:post-submit` for the bridge to handle networking.
@@ -23,11 +23,12 @@ import { createTiptapEditor } from "../tiptap/create-editor.js";
 const DEFAULT_INITIAL: PostFormInitial = {
   format: "note",
   title: "",
+  slug: "",
   body: "",
   url: "",
   quoteText: "",
   status: "published",
-  visibility: "listed",
+  visibility: "public",
   pinned: false,
   rating: 0,
   collectionIds: [],
@@ -41,6 +42,9 @@ const EMPTY_LABELS: PostFormLabels = {
   quoteOption: "",
   titleLabel: "",
   titlePlaceholder: "",
+  slugLabel: "",
+  slugPlaceholder: "",
+  slugHelp: "",
   bodyLabel: "",
   bodyPlaceholder: "",
   urlLabel: "",
@@ -55,8 +59,7 @@ const EMPTY_LABELS: PostFormLabels = {
   statusPublished: "",
   statusDraft: "",
   visibilityLabel: "",
-  visibilityListed: "",
-  visibilityFeatured: "",
+  visibilityPublic: "",
   visibilityUnlisted: "",
   pinnedLabel: "",
   collectionsLabel: "",
@@ -67,6 +70,7 @@ const EMPTY_LABELS: PostFormLabels = {
   mediaDialogLoading: "",
   submitSuccessMessage: "",
   submitErrorMessage: "",
+  draftFallbackMessage: "",
 };
 
 function parseJson<T>(value: unknown, fallback: T): T {
@@ -92,9 +96,12 @@ export class JantPostForm extends LitElement {
     action: { type: String },
     cancelHref: { type: String, attribute: "cancel-href" },
     mediaPickerUrl: { type: String, attribute: "media-picker-url" },
+    siteUrl: { type: String, attribute: "site-url" },
     isEdit: { type: Boolean, attribute: "is-edit" },
     _format: { state: true },
     _title: { state: true },
+    _slug: { state: true },
+    _slugManuallyEdited: { state: true },
     _body: { state: true },
     _url: { state: true },
     _quoteText: { state: true },
@@ -114,9 +121,12 @@ export class JantPostForm extends LitElement {
   declare action: string;
   declare cancelHref: string;
   declare mediaPickerUrl: string;
+  declare siteUrl: string;
   declare isEdit: boolean;
   declare _format: PostFormat;
   declare _title: string;
+  declare _slug: string;
+  declare _slugManuallyEdited: boolean;
   declare _body: string;
   declare _url: string;
   declare _quoteText: string;
@@ -131,6 +141,13 @@ export class JantPostForm extends LitElement {
   _editor: Editor | null = null;
   _bodyJson: JSONContent | null = null;
   #initialized = false;
+  #dirty = false;
+  #onBeforeUnload = (e: globalThis.BeforeUnloadEvent) => {
+    if (this.#dirty) {
+      e.preventDefault();
+      e.returnValue = "";
+    }
+  };
 
   createRenderRoot() {
     this.innerHTML = "";
@@ -144,16 +161,19 @@ export class JantPostForm extends LitElement {
     this.collections = [];
     this.media = [];
     this.action = "";
-    this.cancelHref = "/dash/posts";
-    this.mediaPickerUrl = "/dash/media/picker";
+    this.cancelHref = "/";
+    this.mediaPickerUrl = "";
+    this.siteUrl = "";
     this.isEdit = false;
     this._format = "note";
     this._title = "";
+    this._slug = "";
+    this._slugManuallyEdited = false;
     this._body = "";
     this._url = "";
     this._quoteText = "";
     this._status = "published";
-    this._visibility = "listed";
+    this._visibility = "public";
     this._pinned = false;
     this._rating = 0;
     this._collectionIds = [];
@@ -203,8 +223,14 @@ export class JantPostForm extends LitElement {
     return this.querySelector("#post-media-picker");
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("beforeunload", this.#onBeforeUnload);
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
+    window.removeEventListener("beforeunload", this.#onBeforeUnload);
     this._editor?.destroy();
     this._editor = null;
     this.closeMediaPicker();
@@ -214,11 +240,13 @@ export class JantPostForm extends LitElement {
     const init = this.initial ?? DEFAULT_INITIAL;
     this._format = init.format ?? "note";
     this._title = init.title ?? "";
+    this._slug = init.slug ?? "";
+    this._slugManuallyEdited = Boolean(init.slug);
     this._body = init.body ?? "";
     this._url = init.url ?? "";
     this._quoteText = init.quoteText ?? "";
     this._status = init.status ?? "published";
-    this._visibility = init.visibility ?? "listed";
+    this._visibility = init.visibility ?? "public";
     this._pinned = !!init.pinned;
     this._rating = init.rating ?? 0;
     this._collectionIds = [...(init.collectionIds ?? [])];
@@ -253,18 +281,69 @@ export class JantPostForm extends LitElement {
     });
   }
 
+  /** Content-relevant properties for dirty tracking */
+  static #CONTENT_PROPS = new Set([
+    "_format",
+    "_title",
+    "_slug",
+    "_body",
+    "_url",
+    "_quoteText",
+    "_status",
+    "_visibility",
+    "_pinned",
+    "_rating",
+    "_collectionIds",
+    "_mediaIds",
+  ]);
+
   protected updated(changed: Map<string, unknown>) {
     super.updated(changed);
     if (!this._editor) {
       this.initEditor();
     }
+
+    // Mark dirty when user changes content after initial load
+    if (this.#initialized && !changed.has("initial")) {
+      for (const key of changed.keys()) {
+        if (JantPostForm.#CONTENT_PROPS.has(key as string)) {
+          this.#dirty = true;
+          break;
+        }
+      }
+    }
   }
 
-  handleInput(field: "_title" | "_body" | "_url" | "_quoteText", e: Event) {
+  clearDirty() {
+    this.#dirty = false;
+  }
+
+  handleInput(
+    field: "_title" | "_slug" | "_body" | "_url" | "_quoteText",
+    e: Event,
+  ) {
     const target = e.target as HTMLInputElement | HTMLTextAreaElement;
     (this as unknown as Record<string, string>)[field] = target.value;
   }
 
+  handleTitleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this._title = target.value;
+    // Auto-generate slug from title if user hasn't manually edited it
+    if (!this._slugManuallyEdited) {
+      this._slug = target.value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
+    }
+  }
+
+  handleSlugInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this._slug = target.value;
+    this._slugManuallyEdited = true;
+  }
+
   toggleCollection(id: number) {
     this._collectionIds = this._collectionIds.includes(id)
       ? this._collectionIds.filter((cid) => cid !== id)
@@ -308,6 +387,7 @@ export class JantPostForm extends LitElement {
       data: {
         format: this._format,
         title: this._title.trim(),
+        slug: this._slug.trim() || undefined,
         body: bodyValue,
         status: this._status,
         visibility: this._visibility,