nebula-cms 0.1.0

package/src/client/js/editor/markdown-shortcuts.ts

@@ -0,0 +1,261 @@
+import { syntaxTree } from '@codemirror/language';
+import { EditorSelection, type EditorState } from '@codemirror/state';
+import { EditorView, type KeyBinding } from '@codemirror/view';
+import { isURL } from '../utils/url-utils';
+
+/*
+//////////////////////////////
+// Bracket/Quote Pair Map
+//////////////////////////////
+*/
+
+// Maps opening characters to their closing counterparts for selection wrapping
+const wrapPairs: Record<string, string> = {
+  '[': ']',
+  '{': '}',
+  '(': ')',
+  "'": "'",
+  '"': '"',
+};
+
+/*
+//////////////////////////////
+// Formatting Toggle Helpers
+//////////////////////////////
+*/
+
+/**
+ * Finds the innermost syntax tree node of the given type that contains the
+ * given position. Returns the node's from/to range, or null if not found.
+ * @param {EditorState} state - The current editor state
+ * @param {number} pos - The document position to check
+ * @param {string} nodeType - The syntax tree node name to search for
+ * @return {{ from: number, to: number } | null} The node range, or null
+ */
+function findWrappingNode(
+  state: EditorState,
+  pos: number,
+  nodeType: string,
+): { from: number; to: number } | null {
+  let result: { from: number; to: number } | null = null;
+  syntaxTree(state).iterate({
+    from: pos,
+    to: pos,
+    enter(node) {
+      if (node.name === nodeType) {
+        result = { from: node.from, to: node.to };
+      }
+    },
+  });
+  return result;
+}
+
+/**
+ * Creates a CodeMirror command that toggles a markdown formatting marker
+ * (e.g., ** for bold, _ for italic) using syntax tree detection.
+ * When inside the target node type, it unwraps. Otherwise, it wraps
+ * the selection or inserts empty markers with the cursor between them.
+ * @param {string} marker - The markdown marker string (e.g., "**" or "_")
+ * @param {string} nodeType - The syntax tree node name (e.g., "StrongEmphasis" or "Emphasis")
+ * @return {(view: EditorView) => boolean} A CodeMirror command function
+ */
+function toggleMarker(
+  marker: string,
+  nodeType: string,
+): (view: EditorView) => boolean {
+  return (view: EditorView): boolean => {
+    const { state } = view;
+    const changes = state.changeByRange((range) => {
+      // Check if cursor/selection is inside the target node
+      const node = findWrappingNode(state, range.from, nodeType);
+
+      if (node) {
+        /*
+         * Unwrap — remove markers from both ends of the node.
+         * Post-change coordinates: removing the opening marker shifts everything
+         * left by len, and removing the closing marker doesn't affect earlier positions.
+         * So the inner text spans from node.from to node.to - len * 2.
+         */
+        const len = marker.length;
+        /*
+         * Preserve cursor vs selection: if the user had a cursor (no selection),
+         * keep it as a cursor inside the unwrapped text rather than selecting all of it.
+         * Clamp the post-change cursor: if the cursor was at or before the opening marker,
+         * it lands at the start of the unwrapped text (node.from).
+         */
+        const innerEnd = node.to - len * 2;
+        const postRange = range.empty
+          ? EditorSelection.cursor(
+              Math.max(node.from, Math.min(range.from - len, innerEnd)),
+            )
+          : EditorSelection.range(node.from, innerEnd);
+        return {
+          range: postRange,
+          changes: [
+            { from: node.from, to: node.from + len, insert: '' },
+            { from: node.to - len, to: node.to, insert: '' },
+          ],
+        };
+      }
+
+      if (range.empty) {
+        // No selection — insert empty markers and place cursor between them
+        const insert = marker + marker;
+        return {
+          range: EditorSelection.cursor(range.from + marker.length),
+          changes: { from: range.from, insert },
+        };
+      }
+
+      // Wrap selection in markers, keep text selected
+      return {
+        range: EditorSelection.range(
+          range.from + marker.length,
+          range.to + marker.length,
+        ),
+        changes: [
+          { from: range.from, insert: marker },
+          { from: range.to, insert: marker },
+        ],
+      };
+    });
+
+    view.dispatch(changes);
+    return true;
+  };
+}
+
+/*
+//////////////////////////////
+// Link Insertion Command
+//////////////////////////////
+*/
+
+/**
+ * Inserts a markdown link. With a selection, wraps as [text]() and places the
+ * cursor in the URL parentheses. Without a selection, inserts []() and places
+ * the cursor in the link text brackets. Does nothing inside existing Link nodes.
+ * @param {EditorView} view - The CodeMirror editor view
+ * @return {boolean} True if the command was handled
+ */
+function insertLink(view: EditorView): boolean {
+  const { state } = view;
+
+  // Don't re-wrap existing links — check the primary selection
+  if (findWrappingNode(state, state.selection.main.from, 'Link')) return false;
+
+  const changes = state.changeByRange((range) => {
+    if (range.empty) {
+      // No selection — insert []() with cursor inside []
+      return {
+        range: EditorSelection.cursor(range.from + 1),
+        changes: { from: range.from, insert: '[]()' },
+      };
+    }
+
+    // Wrap selection as [text]() with cursor inside ()
+    const selectedText = state.sliceDoc(range.from, range.to);
+    const replacement = `[${selectedText}]()`;
+    return {
+      // Cursor between the parentheses: [text](|)
+      range: EditorSelection.cursor(range.from + selectedText.length + 3),
+      changes: { from: range.from, to: range.to, insert: replacement },
+    };
+  });
+
+  view.dispatch(changes);
+  return true;
+}
+
+/*
+//////////////////////////////
+// Keymap Export
+//////////////////////////////
+*/
+
+// Keymap bindings for markdown formatting shortcuts (bold, italic, link)
+export const markdownShortcutsKeymap: KeyBinding[] = [
+  { key: 'Mod-b', run: toggleMarker('**', 'StrongEmphasis') },
+  { key: 'Mod-i', run: toggleMarker('_', 'Emphasis') },
+  { key: 'Mod-k', run: insertLink },
+];
+
+/*
+//////////////////////////////
+// Smart Paste Handler
+//////////////////////////////
+*/
+
+/*
+ * Intercepts paste events to wrap selected text as a markdown link when
+ * the clipboard contains a URL. Only activates when text is selected.
+ */
+const smartPasteHandler = EditorView.domEventHandlers({
+  paste(event: ClipboardEvent, view: EditorView) {
+    const { from, to, empty } = view.state.selection.main;
+    if (empty) return false;
+
+    const clipboardText = event.clipboardData?.getData('text/plain') ?? '';
+    if (!isURL(clipboardText)) return false;
+
+    const url = clipboardText.trim();
+    const selectedText = view.state.sliceDoc(from, to);
+    const replacement = `[${selectedText}](${url})`;
+
+    event.preventDefault();
+    view.dispatch({
+      changes: { from, to, insert: replacement },
+      selection: EditorSelection.cursor(from + replacement.length),
+    });
+
+    return true;
+  },
+});
+
+/*
+//////////////////////////////
+// Bracket/Quote Wrap Handler
+//////////////////////////////
+*/
+
+/*
+ * Intercepts single-character input to wrap selected text in matching
+ * bracket or quote pairs. Only activates when text is selected and
+ * the typed character is a recognized opening bracket or quote.
+ */
+const bracketWrapHandler = EditorView.inputHandler.of(
+  (view: EditorView, from: number, to: number, text: string) => {
+    const closing = wrapPairs[text];
+    if (!closing) return false;
+
+    const { main } = view.state.selection;
+    if (main.empty) return false;
+
+    const selectedText = view.state.sliceDoc(main.from, main.to);
+    view.dispatch({
+      changes: {
+        from: main.from,
+        to: main.to,
+        insert: text + selectedText + closing,
+      },
+      selection: EditorSelection.range(
+        main.from + 1,
+        main.from + 1 + selectedText.length,
+      ),
+    });
+
+    return true;
+  },
+);
+
+/*
+//////////////////////////////
+// Extensions Export
+//////////////////////////////
+*/
+
+// Non-keymap extensions: smart paste URL handler and bracket/quote wrapping
+export const markdownShortcutsExtensions = [
+  smartPasteHandler,
+  bracketWrapHandler,
+];

package/src/client/js/handlers/admin.ts

@@ -0,0 +1,246 @@
+/*
+ * Admin action handlers for save, publish, delete, and sidebar data construction.
+ */
+import {
+  clearEditor,
+  getEditorFile,
+  setFilename,
+  editor,
+} from '../editor/editor.svelte';
+import {
+  saveDraftToIDB,
+  publishFile,
+  deleteCurrentDraft,
+} from '../drafts/ops.svelte';
+import {
+  collections,
+  reloadCollection,
+  refreshDrafts,
+  updateContentItem,
+  type ContentItem,
+} from '../state/state.svelte';
+import { navigate, adminPath, type AdminRoute } from '../state/router.svelte';
+import {
+  getCollectionTitle,
+  getCollectionDescription,
+} from '../state/schema.svelte';
+import type { Draft } from '../drafts/storage';
+import { toSortDate } from '../utils/sort';
+import { stripExtension } from '../utils/file-types';
+import type { SidebarItem } from '../utils/sort';
+
+/**
+ * Builds the content sidebar item list by merging live content with draft data.
+ * @param {ContentItem[]} contentList - Live content items from the storage worker
+ * @param {Draft[]} drafts - All drafts for the active collection
+ * @param {Record<string, boolean>} outdatedMap - Map of draft ID to outdated status
+ * @param {string | null} activeCollection - The currently active collection name
+ * @return {SidebarItem[]} Merged list of live and draft sidebar items
+ */
+export function buildContentItems(
+  contentList: ContentItem[],
+  drafts: Draft[],
+  outdatedMap: Record<string, boolean>,
+  activeCollection: string | null,
+): SidebarItem[] {
+  // Build a filename → draft lookup map for O(1) access per content item
+  const draftByFile = new Map(
+    drafts.filter((d) => !d.isNew && d.filename).map((d) => [d.filename, d]),
+  );
+  const liveItems = contentList.map((item) => {
+    const title =
+      typeof item.data.title === 'string' ? item.data.title : item.filename;
+    const slug = stripExtension(item.filename);
+    const draft = draftByFile.get(item.filename);
+    const date = toSortDate(item.data.published);
+    return {
+      label: title,
+      href: adminPath(activeCollection!, slug),
+      subtitle: item.filename,
+      ...(date ? { date } : {}),
+      ...(draft
+        ? {
+            draftId: draft.id,
+            isDraft: true,
+            isOutdated: outdatedMap[draft.id] ?? false,
+          }
+        : {}),
+    };
+  });
+  const newDraftItems = drafts
+    .filter((d) => d.isNew)
+    .map((d) => {
+      const date = toSortDate(d.formData.published);
+      return {
+        label:
+          typeof d.formData.title === 'string'
+            ? d.formData.title
+            : 'Untitled Draft',
+        href: adminPath(activeCollection!, `draft-${d.id}`),
+        draftId: d.id,
+        isDraft: true as const,
+        isOutdated: false,
+        ...(date ? { date } : {}),
+      };
+    });
+  return [...liveItems, ...newDraftItems];
+}
+
+/**
+ * Builds the collection sidebar items from collection names, using schema title/description when available.
+ * @return {SidebarItem[]} Collection sidebar items with hrefs under the configured basePath
+ */
+export function buildCollectionItems(): SidebarItem[] {
+  return collections.map((name) => ({
+    label:
+      getCollectionTitle(name) ?? name.charAt(0).toUpperCase() + name.slice(1),
+    href: adminPath(name),
+    subtitle: getCollectionDescription(name) ?? undefined,
+  }));
+}
+
+/**
+ * Derives the active file/draft href for sidebar highlighting from the current route.
+ * @param {AdminRoute} route - The current admin route
+ * @return {string | undefined} The href of the active file or draft, or undefined if not in a file/draft view
+ */
+export function buildActiveFileHref(route: AdminRoute): string | undefined {
+  if (route.view === 'file') {
+    return adminPath(route.collection, route.slug);
+  }
+  if (route.view === 'draft') {
+    return adminPath(route.collection, `draft-${route.draftId}`);
+  }
+  return undefined;
+}
+
+/**
+ * Saves the current editor content as a draft to IndexedDB and refreshes the sidebar's draft list so changes appear immediately.
+ * @param {string | null} activeCollection - The active collection for refreshing the draft list
+ * @return {Promise<void>}
+ */
+export async function handleSave(
+  activeCollection: string | null,
+): Promise<void> {
+  await saveDraftToIDB();
+  if (activeCollection) {
+    await refreshDrafts(activeCollection);
+  }
+}
+
+// Result of attempting a publish operation.
+export type PublishResult =
+  | { status: 'ok' }
+  | { status: 'no-file' }
+  | { status: 'needs-filename' };
+
+/**
+ * Publishes the current editor content via StorageClient. If the file has no filename, returns a status indicating the filename dialog should be shown.
+ * @param {string | null} activeCollection - The currently active collection name
+ * @return {Promise<PublishResult>} The result of the publish attempt
+ */
+export async function handlePublish(
+  activeCollection: string | null,
+): Promise<PublishResult> {
+  const file = getEditorFile();
+  if (!file) return { status: 'no-file' };
+  if (!file.filename) return { status: 'needs-filename' };
+  if (!activeCollection) return { status: 'no-file' };
+
+  // Pass originalFilename so publishFile can delete the old file when format changes
+  const originalFn = editor.originalFilename;
+  await publishFile(
+    activeCollection,
+    file.filename,
+    originalFn !== file.filename ? originalFn : undefined,
+  );
+
+  // Determine if the filename changed (format conversion or new file)
+  const filenameChanged = originalFn && originalFn !== file.filename;
+
+  if (file.isNewDraft || filenameChanged) {
+    // New file or renamed file — not in contentList under this name, need a full refresh
+    reloadCollection(activeCollection);
+  } else {
+    /*
+     * Existing file, same name — optimistically update sidebar with current formData
+     * so the title reflects edits instantly without re-fetching all files.
+     */
+    updateContentItem(file.filename, file.formData);
+  }
+  await refreshDrafts(activeCollection);
+  return { status: 'ok' };
+}
+
+/**
+ * Deletes the current draft. For drafts of live content, navigates to the live file's URL so the live version reloads in-place. For new drafts, navigates back to the collection list.
+ * @param {string | null} activeCollection - The collection to navigate within
+ * @return {Promise<void>}
+ */
+export async function handleDeleteDraft(
+  activeCollection: string | null,
+): Promise<void> {
+  const file = getEditorFile();
+  const wasNewDraft = file?.isNewDraft ?? true;
+  const liveFilename = file?.filename;
+
+  await deleteCurrentDraft();
+
+  if (!activeCollection) return;
+  // Capture narrowed value before awaits (TS can't narrow across async boundaries)
+  const collection = activeCollection;
+
+  /*
+   * Refresh drafts list only — live content hasn't changed, so no need to
+   * reload the full collection (which re-reads all files and causes a flash).
+   */
+  await refreshDrafts(collection);
+
+  /*
+   * Clear editor so the route change triggers a fresh load (preloadFile has
+   * an early return if the same filename is already open).
+   */
+  clearEditor();
+
+  if (!wasNewDraft && liveFilename) {
+    // Draft of live content — navigate to the live file so it reloads from disk
+    const slug = stripExtension(liveFilename);
+    navigate(adminPath(collection, slug));
+  } else {
+    // New draft — no live file to return to, go to collection list
+    navigate(adminPath(collection));
+  }
+}
+
+/**
+ * Handles the filename dialog confirmation: sets the filename on the editor and triggers publish.
+ * @param {string} filename - The chosen filename (with extension)
+ * @param {string | null} activeCollection - The active collection name
+ * @return {Promise<void>}
+ */
+export async function handleFilenameConfirm(
+  filename: string,
+  activeCollection: string | null,
+): Promise<void> {
+  setFilename(filename);
+  await handlePublish(activeCollection);
+}
+
+/**
+ * Checks whether the publish button should be disabled by verifying required schema fields are populated.
+ * @param {Record<string, unknown> | null} schema - The active JSON schema
+ * @param {Record<string, unknown>} formData - The current form data
+ * @return {boolean} True if publish should be disabled
+ */
+export function computePublishDisabled(
+  schema: Record<string, unknown> | null,
+  formData: Record<string, unknown>,
+): boolean {
+  if (!schema) return true;
+  const required = schema['required'] as string[] | undefined;
+  if (!required) return false;
+  return required.some((key) => {
+    const val = formData[key];
+    return val === undefined || val === null || val === '';
+  });
+}

package/src/client/js/state/dialogs.svelte.ts

@@ -0,0 +1,35 @@
+/*
+ * Reactive state for dialog visibility. Lives here rather than in Admin.svelte
+ * so that EditorToolbar (and other components) can trigger dialogs without
+ * callback drilling through intermediate components.
+ */
+
+// Which dialog is currently open, or null if none
+let active = $state<'filename' | 'delete' | null>(null);
+
+// The dialog type union, exported for type-safe consumers
+export type DialogType = 'filename' | 'delete';
+
+export const dialog = {
+  // The currently open dialog, or null if none.
+  get active(): DialogType | null {
+    return active;
+  },
+
+  /**
+   * Opens a dialog by type. Only one dialog can be open at a time.
+   * @param {DialogType} type - The dialog to open
+   * @return {void}
+   */
+  open(type: DialogType): void {
+    active = type;
+  },
+
+  /**
+   * Closes whichever dialog is currently open.
+   * @return {void}
+   */
+  close(): void {
+    active = null;
+  },
+};

package/src/client/js/state/router.svelte.ts

@@ -0,0 +1,156 @@
+/*
+ * Parsed route state for the admin SPA.
+ * The base path is set at build time via virtual:nebula/config so both
+ * client-side code and the Vite dev server share the same value.
+ */
+
+import config from 'virtual:nebula/config';
+
+export type AdminRoute =
+  | { view: 'home' }
+  | { view: 'collection'; collection: string }
+  | { view: 'file'; collection: string; slug: string }
+  | { view: 'draft'; collection: string; draftId: string };
+
+// Build-time constant — configured via the Astro integration
+const basePath = config.basePath;
+
+// Current route, reactive via Svelte 5 runes
+let route = $state<AdminRoute>(parsePathname(location.pathname));
+
+export const nav = {
+  // Current parsed admin route.
+  get route(): AdminRoute {
+    return route;
+  },
+};
+
+/**
+ * Builds an absolute path under the configured basePath by joining segments.
+ * Handles the root basePath case ('/') without producing double slashes.
+ * @param {...string} segments - Path segments to append (e.g. 'authors', 'my-post')
+ * @return {string} The joined path (e.g. '/admin/authors/my-post' or '/authors/my-post')
+ */
+export function adminPath(...segments: string[]): string {
+  if (segments.length === 0) return basePath;
+  const prefix = basePath === '/' ? '' : basePath;
+  return prefix + '/' + segments.join('/');
+}
+
+/**
+ * Checks whether a pathname falls under the configured basePath.
+ * Matches the basePath exactly or as a prefix followed by '/'.
+ * @param {string} pathname - The URL pathname to test
+ * @return {boolean} True if the pathname is within the basePath
+ */
+function isUnderBasePath(pathname: string): boolean {
+  // When basePath is '/', every absolute path is under it
+  if (basePath === '/') return pathname.startsWith('/');
+  return pathname === basePath || pathname.startsWith(basePath + '/');
+}
+
+/**
+ * Parses a pathname into an AdminRoute by stripping the basePath prefix.
+ * @param {string} pathname - The URL pathname to parse
+ * @return {AdminRoute} The route corresponding to the given pathname
+ */
+function parsePathname(pathname: string): AdminRoute {
+  /*
+   * Strip the basePath prefix at a segment boundary, then split the remainder.
+   * Must mirror isUnderBasePath's boundary check to avoid false matches
+   * (e.g. basePath '/cms' should not match pathname '/cmsextra/posts').
+   */
+  const underBase = isUnderBasePath(pathname);
+  const rest = underBase ? pathname.slice(basePath.length) : pathname;
+  const segments = rest.split('/').filter(Boolean);
+  /*
+   * Draft URLs use a 2-segment pattern: {basePath}/{collection}/draft-{draftId}
+   * This keeps the same URL depth as regular files so Astro static paths work.
+   */
+  if (segments.length >= 2 && segments[1].startsWith('draft-')) {
+    return {
+      view: 'draft',
+      collection: segments[0],
+      draftId: segments[1].slice('draft-'.length),
+    };
+  }
+  if (segments.length >= 2) {
+    return { view: 'file', collection: segments[0], slug: segments[1] };
+  }
+  if (segments.length === 1) {
+    return { view: 'collection', collection: segments[0] };
+  }
+  return { view: 'home' };
+}
+
+/**
+ * Navigates to a path within the admin SPA using the Navigation API.
+ * @param {string} path - The path to navigate to (e.g., '/admin/posts')
+ * @return {void}
+ */
+export function navigate(path: string): void {
+  navigation.navigate(path);
+}
+
+// Callback to check if the editor has unsaved changes
+let dirtyChecker: (() => boolean) | null = null;
+
+/**
+ * Registers a function that returns whether the editor has unsaved changes.
+ * @param {() => boolean} checker - Function returning true if there are unsaved changes
+ * @return {void}
+ */
+export function registerDirtyChecker(checker: () => boolean): void {
+  dirtyChecker = checker;
+}
+
+// Guard against duplicate listener registration (e.g., HMR remount)
+let initialized = false;
+
+/**
+ * Initializes the Navigation API listener, intercepting navigations under the
+ * configured basePath and updating reactive route state.
+ * Safe to call multiple times — registers the listener only once.
+ * @return {void}
+ */
+export function initRouter(): void {
+  if (initialized) return;
+  initialized = true;
+
+  navigation.addEventListener('navigate', (event) => {
+    const url = new URL(event.destination.url);
+
+    // Only intercept navigations within the configured basePath
+    if (!isUnderBasePath(url.pathname)) return;
+
+    // Don't intercept downloads or hash-only changes
+    if (event.hashChange || event.downloadRequest) return;
+
+    if (!event.canIntercept) return;
+
+    /*
+     * Block navigation if editor has unsaved changes and user cancels.
+     * This check must happen before event.intercept() — if it were inside the
+     * handler, the URL would already be updated by the time the user cancels.
+     */
+    if (
+      dirtyChecker?.() &&
+      !confirm('You have unsaved changes. Leave without saving?')
+    ) {
+      event.preventDefault();
+      return;
+    }
+
+    event.intercept({
+      handler() {
+        route = parsePathname(url.pathname);
+      },
+    });
+  });
+
+  window.addEventListener('beforeunload', (event) => {
+    if (dirtyChecker?.()) {
+      event.preventDefault();
+    }
+  });
+}