@jant/core 0.3.35 → 0.3.36

package/src/client/tiptap/slash-commands.ts

@@ -0,0 +1,328 @@
+/**
+ * Slash Commands Extension
+ *
+ * Provides a "/" command menu for block formatting.
+ * Built on @tiptap/suggestion for cursor tracking and filtering.
+ */
+
+import { Extension } from "@tiptap/core";
+import Suggestion, {
+  type SuggestionOptions,
+  type SuggestionProps,
+  type SuggestionKeyDownProps,
+} from "@tiptap/suggestion";
+import type { Editor, Range } from "@tiptap/core";
+
+interface SlashCommandItem {
+  label: string;
+  icon: string;
+  command: (editor: Editor, range: Range) => void;
+}
+
+const SLASH_COMMANDS: SlashCommandItem[] = [
+  {
+    label: "Heading 1",
+    icon: "H1",
+    command: (editor, range) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .toggleHeading({ level: 1 })
+        .run();
+    },
+  },
+  {
+    label: "Heading 2",
+    icon: "H2",
+    command: (editor, range) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .toggleHeading({ level: 2 })
+        .run();
+    },
+  },
+  {
+    label: "Heading 3",
+    icon: "H3",
+    command: (editor, range) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .toggleHeading({ level: 3 })
+        .run();
+    },
+  },
+  {
+    label: "Bullet List",
+    icon: "•",
+    command: (editor, range) => {
+      editor.chain().focus().deleteRange(range).toggleBulletList().run();
+    },
+  },
+  {
+    label: "Ordered List",
+    icon: "1.",
+    command: (editor, range) => {
+      editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+    },
+  },
+  {
+    label: "Blockquote",
+    icon: '"',
+    command: (editor, range) => {
+      editor.chain().focus().deleteRange(range).toggleBlockquote().run();
+    },
+  },
+  {
+    label: "Code Block",
+    icon: "</>",
+    command: (editor, range) => {
+      editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+    },
+  },
+  {
+    label: "Horizontal Rule",
+    icon: "—",
+    command: (editor, range) => {
+      editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+    },
+  },
+  {
+    label: "Image",
+    icon: "🖼",
+    command: (editor, range) => {
+      editor.chain().focus().deleteRange(range).run();
+      document.dispatchEvent(
+        new CustomEvent("jant:slash-image", { bubbles: true }),
+      );
+    },
+  },
+  {
+    label: "Table",
+    icon: "▦",
+    command: (editor, range) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+        .run();
+    },
+  },
+  {
+    label: "Read More",
+    icon: "↓",
+    command: (editor, range) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .insertContent({ type: "moreBreak" })
+        .run();
+    },
+  },
+];
+
+/**
+ * Returns the slash commands list, used by both the extension and the + menu.
+ */
+export function getSlashCommands(): SlashCommandItem[] {
+  return SLASH_COMMANDS;
+}
+
+// Popup element management
+let popupEl: HTMLElement | null = null;
+let selectedIndex = 0;
+let filteredItems: SlashCommandItem[] = [];
+let commandFn: ((item: { index: number }) => void) | null = null;
+
+function createPopup(): HTMLElement {
+  const el = document.createElement("div");
+  el.className = "tiptap-slash-menu";
+  el.style.position = "fixed";
+  return el;
+}
+
+function renderPopup(
+  items: SlashCommandItem[],
+  onSelect: (index: number) => void,
+) {
+  if (!popupEl) return;
+
+  filteredItems = items;
+  if (selectedIndex >= items.length) selectedIndex = 0;
+
+  popupEl.innerHTML = items
+    .map(
+      (item, i) =>
+        `<div class="tiptap-slash-item${i === selectedIndex ? " is-selected" : ""}" data-index="${i}">
+          <span class="tiptap-slash-item-icon">${item.icon}</span>
+          <span class="tiptap-slash-item-label">${item.label}</span>
+        </div>`,
+    )
+    .join("");
+
+  // Click handlers
+  popupEl.querySelectorAll<HTMLElement>(".tiptap-slash-item").forEach((el) => {
+    el.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      const idx = parseInt(el.dataset.index ?? "0", 10);
+      onSelect(idx);
+    });
+    el.addEventListener("mouseenter", () => {
+      selectedIndex = parseInt(el.dataset.index ?? "0", 10);
+      popupEl
+        ?.querySelectorAll(".tiptap-slash-item")
+        .forEach((item, i) =>
+          item.classList.toggle("is-selected", i === selectedIndex),
+        );
+    });
+  });
+}
+
+function destroyPopup() {
+  popupEl?.remove();
+  popupEl = null;
+  selectedIndex = 0;
+  filteredItems = [];
+  commandFn = null;
+}
+
+/**
+ * Position the popup relative to the cursor, accounting for dialog containing block.
+ * When a `<dialog>` has CSS animation, it creates a containing block that makes
+ * `position: fixed` relative to the dialog instead of the viewport.
+ */
+function positionPopup(
+  rect: globalThis.DOMRect,
+  container: HTMLElement | null,
+) {
+  if (!popupEl) return;
+  const offsetX = container?.getBoundingClientRect().left ?? 0;
+  const offsetY = container?.getBoundingClientRect().top ?? 0;
+  popupEl.style.left = `${rect.left - offsetX}px`;
+  popupEl.style.top = `${rect.bottom + 4 - offsetY}px`;
+}
+
+/**
+ * Slash commands Tiptap extension.
+ */
+export const SlashCommands = Extension.create({
+  name: "slashCommands",
+
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        startOfLine: false,
+        items: ({ query }: { query: string }) => {
+          const q = query.toLowerCase();
+          return SLASH_COMMANDS.filter((item) =>
+            item.label.toLowerCase().includes(q),
+          );
+        },
+        render: () => {
+          function getEditorElement(editor: Editor): globalThis.Element | null {
+            const el = editor.options.element;
+            return el instanceof globalThis.Element ? el : null;
+          }
+
+          return {
+            onStart: (
+              props: SuggestionProps<SlashCommandItem, { index: number }>,
+            ) => {
+              popupEl = createPopup();
+              selectedIndex = 0;
+              commandFn = props.command;
+              renderPopup(props.items, (index) => props.command({ index }));
+
+              // Append inside the closest dialog (top-layer) or body
+              const editorEl = getEditorElement(props.editor);
+              const dialog = editorEl?.closest("dialog") ?? null;
+              (dialog ?? document.body).appendChild(popupEl);
+
+              const rect = props.clientRect?.();
+              if (rect) {
+                positionPopup(rect, dialog);
+              }
+            },
+            onUpdate: (
+              props: SuggestionProps<SlashCommandItem, { index: number }>,
+            ) => {
+              commandFn = props.command;
+              renderPopup(props.items, (index) => props.command({ index }));
+              const rect = props.clientRect?.();
+              if (rect) {
+                const editorEl = getEditorElement(props.editor);
+                const dialog = editorEl?.closest("dialog") ?? null;
+                positionPopup(rect, dialog);
+              }
+            },
+            onKeyDown: (props: SuggestionKeyDownProps) => {
+              const { event } = props;
+              if (event.key === "ArrowDown") {
+                selectedIndex = (selectedIndex + 1) % filteredItems.length;
+                popupEl
+                  ?.querySelectorAll(".tiptap-slash-item")
+                  .forEach((item, i) =>
+                    item.classList.toggle("is-selected", i === selectedIndex),
+                  );
+                return true;
+              }
+              if (event.key === "ArrowUp") {
+                selectedIndex =
+                  (selectedIndex - 1 + filteredItems.length) %
+                  filteredItems.length;
+                popupEl
+                  ?.querySelectorAll(".tiptap-slash-item")
+                  .forEach((item, i) =>
+                    item.classList.toggle("is-selected", i === selectedIndex),
+                  );
+                return true;
+              }
+              if (event.key === "Enter") {
+                commandFn?.({ index: selectedIndex });
+                return true;
+              }
+              if (event.key === "Escape") {
+                destroyPopup();
+                return true;
+              }
+              return false;
+            },
+            onExit: () => {
+              destroyPopup();
+            },
+          };
+        },
+        command: ({
+          editor,
+          range,
+          props,
+        }: {
+          editor: Editor;
+          range: Range;
+          props: { index: number };
+        }) => {
+          const item = filteredItems[props.index];
+          if (item) {
+            item.command(editor, range);
+          }
+        },
+      } satisfies Partial<SuggestionOptions>,
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+      }),
+    ];
+  },
+});

package/src/{types → client/types}/sortablejs.d.ts

@@ -1,7 +1,7 @@
 /**
  * Minimal type declarations for sortablejs
  *
- * Only covers the API surface used by jant-nav-manager and collections-reorder.
+ * Only covers the API surface used by jant-nav-manager and jant-collection-sidebar.
  */
 
 declare module "sortablejs" {

package/src/client.ts

@@ -9,21 +9,28 @@
 
 import "./vendor/datastar.js";
 import "basecoat-css/all";
-import "./lib/image-processor.js";
-import "./lib/media-upload.js";
-import "./lib/avatar-upload.js";
-import "./lib/collections-reorder.js";
+import "./client/image-processor.js";
+import "./client/media-upload.js";
+import "./client/avatar-upload.js";
 
-// Lit Web Components
-import "./ui/components/jant-compose-dialog.js";
-import "./ui/components/jant-compose-editor.js";
-import "./lib/compose-bridge.js";
-import "./ui/components/jant-settings-general.js";
-import "./ui/components/jant-settings-avatar.js";
-import "./lib/settings-bridge.js";
-import "./ui/components/jant-collection-form.js";
-import "./lib/collection-form-bridge.js";
-import "./ui/components/jant-post-form.js";
-import "./lib/post-form-bridge.js";
-import "./ui/components/jant-nav-manager.js";
-import "./lib/nav-manager-bridge.js";
+// Lit Web Components (and their bridge modules)
+import "./client/components/jant-compose-dialog.js";
+import "./client/components/jant-compose-editor.js";
+import "./client/components/jant-compose-fullscreen.js";
+
+// Mount fullscreen overlay at body level to escape the dialog's containing block
+// (dialog animation creates a containing block that traps position:fixed descendants)
+document.body.appendChild(document.createElement("jant-compose-fullscreen"));
+import "./client/compose-bridge.js";
+import "./client/components/jant-settings-general.js";
+import "./client/components/jant-settings-avatar.js";
+import "./client/settings-bridge.js";
+import "./client/components/jant-collection-form.js";
+import "./client/components/jant-collection-sidebar.js";
+import "./client/collection-form-bridge.js";
+import "./client/components/jant-post-form.js";
+import "./client/post-form-bridge.js";
+import "./client/page-slug-bridge.js";
+import "./client/components/jant-nav-manager.js";
+import "./client/nav-manager-bridge.js";
+import "./client/components/jant-media-lightbox.js";

package/src/db/migrations/0012_add_tiptap_columns.sql

@@ -0,0 +1,2 @@
+-- Add summary column for Tiptap-based excerpt storage
+ALTER TABLE posts ADD COLUMN summary TEXT;

package/src/db/migrations/0013_replace_featured_with_visibility.sql

@@ -0,0 +1,8 @@
+-- Replace binary `featured` flag with three-value `visibility` text column.
+-- Values: 'listed' (default), 'featured', 'unlisted'.
+
+ALTER TABLE posts ADD COLUMN visibility TEXT NOT NULL DEFAULT 'listed';
+--> statement-breakpoint
+UPDATE posts SET visibility = 'featured' WHERE featured = 1;
+--> statement-breakpoint
+ALTER TABLE posts DROP COLUMN featured;

package/src/db/schema.ts

@@ -20,7 +20,11 @@ export const posts = sqliteTable("posts", {
   })
     .notNull()
     .default("published"),
-  featured: integer("featured").notNull().default(0),
+  visibility: text("visibility", {
+    enum: ["listed", "featured", "unlisted"],
+  })
+    .notNull()
+    .default("listed"),
   pinned: integer("pinned").notNull().default(0),
   path: text("path").unique(),
   title: text("title"),
@@ -28,6 +32,7 @@ export const posts = sqliteTable("posts", {
   body: text("body"),
   bodyHtml: text("body_html"),
   quoteText: text("quote_text"),
+  summary: text("summary"),
   rating: integer("rating"),
   replyToId: integer("reply_to_id"),
   threadId: integer("thread_id"),