nebula-cms 0.1.0

package/src/client/components/editor/EditorPane.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+  import { EditorView, keymap } from '@codemirror/view';
+  import { Compartment, EditorState } from '@codemirror/state';
+  import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+  import { getEditorFile, updateBody } from '../../js/editor/editor.svelte';
+  import {
+    getTypeForFilename,
+    stripExtension,
+  } from '../../js/utils/file-types';
+  import { getLanguageExtension } from '../../js/editor/languages';
+  import { linkWrapPlugin } from '../../js/editor/link-wrap';
+  import {
+    markdownShortcutsKeymap,
+    markdownShortcutsExtensions,
+  } from '../../js/editor/markdown-shortcuts';
+  import Toolbar from './Toolbar.svelte';
+
+  // Container element for CodeMirror
+  let container: HTMLDivElement;
+  // The CodeMirror EditorView instance
+  let view: EditorView | undefined;
+  // Compartment isolating the language extension for runtime reconfiguration
+  const langCompartment = new Compartment();
+
+  // Base editor theme matching the admin color scheme
+  const editorTheme = EditorView.theme({
+    '&': {
+      fontSize: '1rem',
+    },
+    '.cm-content': {
+      fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+      caretColor: 'var(--editor-caret)',
+      padding: '1rem',
+    },
+    '.cm-scroller': {
+      overflow: 'auto',
+    },
+    '&.cm-focused': {
+      outline: 'none',
+    },
+    '.cm-line': {
+      padding: '0 0.25rem',
+    },
+    '.cm-cursor': {
+      borderLeftColor: 'var(--editor-caret)',
+    },
+    '.cm-selectionBackground': {
+      background: 'var(--plum) !important',
+    },
+    '&.cm-focused .cm-selectionBackground': {
+      background: 'var(--plum) !important',
+    },
+    '.cm-activeLine': {
+      backgroundColor: 'var(--editor-active-line)',
+    },
+    '.cm-gutters': {
+      display: 'none',
+    },
+  });
+
+  /**
+   * Creates the full set of CodeMirror extensions. The language extension
+   * is wrapped in a Compartment so it can be swapped at runtime without
+   * rebuilding the entire editor state.
+   * @param {string} fileType - The file type identifier for language selection
+   * @return {import('@codemirror/state').Extension[]} The array of CodeMirror extensions
+   */
+  function createExtensions(fileType: string) {
+    return [
+      editorTheme,
+      history(),
+      keymap.of([
+        ...markdownShortcutsKeymap,
+        ...defaultKeymap,
+        ...historyKeymap,
+      ]),
+      langCompartment.of(getLanguageExtension(fileType)),
+      EditorView.lineWrapping,
+      linkWrapPlugin,
+      ...markdownShortcutsExtensions,
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          updateBody(update.state.doc.toString());
+        }
+      }),
+      EditorView.contentAttributes.of({ 'aria-label': 'Content editor' }),
+    ];
+  }
+
+  // Track the last loaded file identity to detect file changes
+  let lastFileKey = '';
+  // Track the last configured language type to avoid redundant compartment reconfigures
+  let lastLangType = '';
+
+  $effect(() => {
+    const file = getEditorFile();
+
+    if (!file) {
+      // No file open — destroy editor if it exists
+      if (view) {
+        view.destroy();
+        view = undefined;
+        lastFileKey = '';
+      }
+      return;
+    }
+
+    // Wait for body to load before creating/updating CodeMirror
+    if (!file.bodyLoaded) return;
+
+    // Use slug (without extension) so format changes don't trigger a rebuild
+    const fileKey = file.draftId ?? stripExtension(file.filename);
+
+    if (!view && container) {
+      // First mount — create the editor
+      const fileType = getTypeForFilename(file.filename) ?? 'md';
+      lastFileKey = fileKey;
+      lastLangType = fileType;
+      const state = EditorState.create({
+        doc: file.body,
+        extensions: createExtensions(fileType),
+      });
+      view = new EditorView({ state, parent: container });
+    } else if (view && fileKey !== lastFileKey) {
+      // Different file selected — replace document
+      const fileType = getTypeForFilename(file.filename) ?? 'md';
+      lastFileKey = fileKey;
+      lastLangType = fileType;
+      view.setState(
+        EditorState.create({
+          doc: file.body,
+          extensions: createExtensions(fileType),
+        }),
+      );
+    }
+  });
+
+  // Reconfigure the language compartment when the file type changes
+  $effect(() => {
+    if (!view) return;
+    const file = getEditorFile();
+    if (!file?.filename) return;
+    const fileType = getTypeForFilename(file.filename) ?? 'md';
+    // Skip if the language is already configured (avoids redundant reconfigure on initial mount)
+    if (fileType === lastLangType) return;
+    lastLangType = fileType;
+    view.dispatch({
+      effects: langCompartment.reconfigure(getLanguageExtension(fileType)),
+    });
+  });
+
+  // Cleanup on component destroy
+  $effect(() => {
+    return () => {
+      view?.destroy();
+      view = undefined;
+    };
+  });
+</script>
+
+<div class="editor-wrapper">
+  <div class="editor-box">
+    <Toolbar />
+    <div class="editor-pane" bind:this={container}></div>
+  </div>
+</div>
+
+<style>
+  .editor-wrapper {
+    padding: 1.5rem;
+    max-width: 80ch;
+    margin: 0 auto;
+  }
+
+  .editor-box {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    border: 1px solid var(--cms-border);
+    border-radius: 4px;
+    overflow: hidden;
+    /* Subtract the toolbar, tabs, and wrapper padding from viewport height */
+    height: calc(100dvh - 9rem);
+  }
+
+  .editor-pane {
+    height: 100%;
+    overflow: auto;
+  }
+
+  /*
+   * Fill the entire editor box so clicking anywhere starts editing, even on empty documents.
+   * cm-editor uses display:flex column by default — min-height stretches the container,
+   * and flex-grow on cm-scroller makes the scrollable/clickable area fill it.
+   */
+  .editor-pane :global(.cm-editor) {
+    min-height: 100%;
+  }
+
+  .editor-pane :global(.cm-scroller) {
+    flex-grow: 1;
+    /*
+     * CodeMirror sets align-items: flex-start which prevents cm-content from stretching
+     * vertically. Override to stretch so the editable area fills the entire scroller.
+     */
+    align-items: stretch !important;
+  }
+
+  /*
+   * Forces .cm-content to shrink below its longest word so overflow-wrap can break long URLs.
+   * min-height fills the scroller so the entire editor area is clickable on empty documents.
+   * Both need !important to override CodeMirror's inline theme styles.
+   */
+  .editor-pane :global(.cm-content) {
+    min-width: 0 !important;
+    min-height: 100% !important;
+  }
+
+  /* Wraps long URLs at word boundaries where possible, breaking mid-word only when necessary */
+  .editor-pane :global(.cm-link-wrap) {
+    overflow-wrap: break-word;
+    word-break: break-all;
+  }
+
+  .editor-pane :global(.cm-link-wrap span:nth-of-type(2)) {
+    word-break: break-word;
+  }
+</style>

package/src/client/components/editor/EditorTabs.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { SchemaNode } from '../../js/utils/schema-utils';
+  import { extractTabs } from '../../js/utils/schema-utils';
+  import { toTitleCase } from '../../js/utils/format';
+  import {
+    editor,
+    setActiveTab,
+    getEditorFile,
+  } from '../../js/editor/editor.svelte';
+  import { hasBodyEditor } from '../../js/utils/file-types';
+
+  // Props for the EditorTabs component, which renders the tab bar above the editor, including the default Metadata and Body tabs plus any custom schema-defined tabs.
+  interface Props {
+    // The JSON Schema for the current collection (null if not loaded yet)
+    schema: SchemaNode | null;
+  }
+
+  let { schema }: Props = $props();
+
+  // Custom tab names derived from schema, sorted alphabetically
+  const customTabs = $derived(schema ? extractTabs(schema) : []);
+
+  // Current open file — null when no file is loaded
+  const file = $derived(getEditorFile());
+
+  /*
+   * Show the Body tab for files that have a body editor (markdown, MDX, Markdoc).
+   * Defaults to true when no file is open to preserve the prior behavior.
+   */
+  const showBody = $derived(file ? hasBodyEditor(file.filename) : true);
+
+  // All tabs: Metadata, conditionally Body, then custom tabs
+  const allTabs = $derived([
+    'metadata',
+    ...(showBody ? ['body'] : []),
+    ...customTabs,
+  ]);
+</script>
+
+<nav class="tabs" aria-label="Editor tabs">
+  {#each allTabs as tab}
+    <button
+      class="tabs__tab"
+      class:tabs__tab--active={editor.tab === tab}
+      type="button"
+      onclick={() => setActiveTab(tab)}
+      aria-selected={editor.tab === tab}
+      role="tab"
+    >
+      {toTitleCase(tab)}
+    </button>
+  {/each}
+</nav>
+
+<style>
+  /* Tab bar sits below the editor toolbar, separated by a border */
+  .tabs {
+    display: flex;
+    border-bottom: 1px solid var(--cms-border);
+  }
+
+  .tabs__tab {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    color: var(--cms-muted);
+    background: none;
+    border: none;
+    /* Bottom border reserves space to avoid layout shift on active state */
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--cms-fg);
+    }
+  }
+
+  .tabs__tab--active {
+    color: var(--cms-fg);
+    border-bottom-color: var(--plum);
+  }
+</style>

package/src/client/components/editor/EditorToolbar.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import { getEditorFile } from '../../js/editor/editor.svelte';
+  import { nav } from '../../js/state/router.svelte';
+  import { schema } from '../../js/state/schema.svelte';
+  import {
+    handleSave,
+    handlePublish,
+    computePublishDisabled,
+  } from '../../js/handlers/admin';
+  import { dialog } from '../../js/state/dialogs.svelte';
+
+  // Current editor file state
+  const file = $derived(getEditorFile());
+
+  // Active collection derived from route, needed by save/publish handlers
+  const activeCollection = $derived(
+    nav.route.view !== 'home' ? nav.route.collection : null,
+  );
+
+  // Whether publish is disabled due to missing required fields
+  const publishDisabled = $derived(
+    computePublishDisabled(schema.active, file?.formData ?? {}),
+  );
+
+  // Display title from formData, falling back to filename or "Untitled Draft"
+  const title = $derived(
+    file && typeof file.formData.title === 'string'
+      ? file.formData.title
+      : file?.filename || 'Untitled Draft',
+  );
+
+  /**
+   * Publishes the current file, showing the filename dialog if a filename is needed first.
+   * @return {Promise<void>}
+   */
+  async function onPublish(): Promise<void> {
+    const result = await handlePublish(activeCollection);
+    if (result.status === 'needs-filename') {
+      dialog.open('filename');
+    }
+  }
+</script>
+
+{#if file}
+  <header class="toolbar">
+    <div class="toolbar__info">
+      <h1 class="toolbar__title">
+        {title}
+        <span
+          class="dirty-indicator"
+          class:dirty-indicator--visible={file.dirty}
+          title={file.dirty ? 'Unsaved changes' : ''}>&bull;</span
+        >
+      </h1>
+      {#if file.filename}
+        <p class="toolbar__filename">{file.filename}</p>
+      {/if}
+    </div>
+    <div class="toolbar__actions">
+      {#if file.draftId}
+        <button
+          class="btn btn--danger-outline btn--compact"
+          type="button"
+          onclick={() => dialog.open('delete')}
+        >
+          Delete Draft
+        </button>
+      {/if}
+      <button
+        class="btn btn--save-outline btn--compact"
+        type="button"
+        disabled={!file.dirty || file.saving}
+        onclick={() => handleSave(activeCollection)}
+      >
+        {file.saving ? 'Saving...' : 'Save'}
+      </button>
+      <button
+        class="btn btn--primary btn--compact"
+        type="button"
+        disabled={publishDisabled || file.saving}
+        onclick={onPublish}
+      >
+        Publish
+      </button>
+    </div>
+  </header>
+{/if}
+
+<style>
+  .toolbar {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--cms-border);
+  }
+
+  .toolbar__info {
+    display: grid;
+  }
+
+  .toolbar__title {
+    font-size: 1rem;
+    font-weight: normal;
+    color: var(--cms-fg);
+  }
+
+  .toolbar__filename {
+    font-size: 0.75rem;
+    color: var(--cms-muted);
+  }
+
+  /* Always rendered to reserve space and prevent layout shift when toggling */
+  .dirty-indicator {
+    color: transparent;
+    font-size: 1.25rem;
+    vertical-align: middle;
+    margin-left: 0.25rem;
+  }
+
+  .dirty-indicator--visible {
+    color: var(--gold);
+  }
+
+  .toolbar__actions {
+    display: grid;
+    grid-auto-flow: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+</style>

package/src/client/components/editor/FormatSelector.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import {
+    getDefaultExtension,
+    getTypeForFilename,
+  } from '../../js/utils/file-types';
+  import {
+    changeFileFormat,
+    getEditorFile,
+  } from '../../js/editor/editor.svelte';
+  import { schema } from '../../js/state/schema.svelte';
+
+  // Type identifiers from the schema's files array (e.g. ['md', 'mdx'])
+  const fileTypes = $derived(
+    Array.isArray(schema.active?.['files'])
+      ? (schema.active['files'] as string[])
+      : [],
+  );
+
+  // The type identifier of the currently open file (e.g. 'md', 'mdx')
+  const activeType = $derived.by(() => {
+    const file = getEditorFile();
+    if (!file?.filename) return fileTypes[0] ?? '';
+    return getTypeForFilename(file.filename) ?? fileTypes[0] ?? '';
+  });
+</script>
+
+{#if fileTypes.length > 1}
+  <div class="format-selector">
+    <span class="format-selector__label">Format</span>
+    <select
+      class="format-selector__select"
+      value={activeType}
+      onchange={(e) => changeFileFormat((e.target as HTMLSelectElement).value)}
+    >
+      {#each fileTypes as type}
+        <option value={type}>{getDefaultExtension(type) ?? type}</option>
+      {/each}
+    </select>
+  </div>
+{/if}
+
+<style>
+  /* Inline layout for label + select inside the editor body toolbar */
+  .format-selector {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .format-selector__label {
+    font-size: 0.875rem;
+    color: var(--cms-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .format-selector__select {
+    background: var(--cms-bg);
+    border: 1px solid var(--cms-border);
+    border-radius: 0.25rem;
+    color: var(--cms-fg);
+    font-size: 0.875rem;
+    padding: 0.25rem 0.5rem;
+    max-width: 10rem;
+  }
+</style>

package/src/client/components/editor/Toolbar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import FormatSelector from './FormatSelector.svelte';
+</script>
+
+<div class="editor-body-toolbar">
+  <FormatSelector />
+</div>
+
+<style>
+  .editor-body-toolbar {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    border-bottom: 1px solid var(--cms-border);
+    background: var(--cms-bg);
+  }
+</style>