note-type-registry

apps/server/src/commands/note-type-commands.ts

@@ -1,4 +1,5 @@
-import { markdownNoteType, NoteTypeRegistry, type CommandBus } from "@notes/core";
+import { NoteTypeRegistry, type CommandBus } from "@notes/core";
+import { markdownNoteType } from "@notes/editor";
 import { boardNoteType } from "@notes/note-boards";
 import { calendarNoteType } from "@notes/note-calendar";
 import { canvasNoteType } from "@notes/note-canvas";

apps/web/src/app.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { formatCombo } from "@notes/core";
-import { emptyCanvas } from "@notes/note-canvas";
-import { emptyBoard } from "@notes/note-boards";
-import { emptyCalendar } from "@notes/note-calendar";
-import { emptyGrid } from "@notes/note-grid";
-import { emptyMermaid } from "@notes/note-mermaid";
-import { emptyTableMarkdown } from "@notes/note-tables";
+import { NoteTypeRegistry, formatCombo } from "@notes/core";
+import { type NoteTypeDescriptor, markdownNoteType } from "@notes/editor";
+import { canvasNoteType, emptyCanvas } from "@notes/note-canvas";
+import { boardNoteType, emptyBoard } from "@notes/note-boards";
+import { calendarNoteType, emptyCalendar } from "@notes/note-calendar";
+import { emptyGrid, gridNoteType } from "@notes/note-grid";
+import { emptyMermaid, mermaidNoteType } from "@notes/note-mermaid";
+import { emptyTableMarkdown, tableNoteType } from "@notes/note-tables";
 import type { PluginManifest } from "@notes/plugin-host";
 import type { ThemeMeta } from "@notes/shared";
 import { api, type FileEntry } from "./api/client";
@@ -118,7 +119,23 @@ export function App() {
   const [noteTypes, setNoteTypes] = useState<Record<string, string>>({});
   const [externalThemes, setExternalThemes] = useState<ThemeMeta[]>([]);
   const [pendingRestartPlugins, setPendingRestartPlugins] = useState<PluginManifest[]>([]);
-  const plugins = usePlugins();
+
+  // Create the NoteTypeRegistry once and register all built-in note types.
+  // Kept here (not in usePlugins) so the registry is an explicit app-level
+  // concern; plugins extend it via PluginContext.registerNoteType.
+  const noteTypeRegistry = useMemo(() => {
+    const registry = new NoteTypeRegistry<NoteTypeDescriptor>();
+    registry.register(markdownNoteType, { fallback: true });
+    registry.register(canvasNoteType);
+    registry.register(boardNoteType);
+    registry.register(tableNoteType);
+    registry.register(mermaidNoteType);
+    registry.register(calendarNoteType);
+    registry.register(gridNoteType);
+    return registry;
+  }, []);
+
+  const plugins = usePlugins(noteTypeRegistry);
   // Paths of freshly-created notes not yet modified/named (discarded on close).
   const [provisional, setProvisional] = useState<Set<string>>(new Set());
 
@@ -837,6 +854,7 @@ export function App() {
       setActiveDocument: (doc: { path: string; content: string; type: string } | null) =>
         plugins.documentSignal.set(doc),
       fileHandlers: plugins.fileHandlers,
+      noteTypeRegistry,
       settings: settingsProps,
       undoableFileOps,
     }),
@@ -855,6 +873,7 @@ export function App() {
       noteTypes,
       plugins.documentSignal,
       plugins.fileHandlers,
+      noteTypeRegistry,
       settingsProps,
       undoableFileOps,
     ],

apps/web/src/components/embed-widget.tsx

@@ -173,11 +173,11 @@ export function EmbedWidget({ target }: { target: string }) {
       case "image":
         return <img className="embed-image" src={api.fileRawUrl(path)} alt={title} />;
       case "mermaid":
-        return <MermaidView value={content} onChange={save} />;
+        return <MermaidView value={content} onChange={save} path={path} />;
       case "grid":
-        return <GridView value={content} onChange={save} />;
+        return <GridView value={content} onChange={save} path={path} />;
       case "table":
-        return <TableGrid value={content} onChange={save} />;
+        return <TableGrid value={content} onChange={save} path={path} />;
       case "board":
       case "calendar":
         return (

apps/web/src/components/mode-toggle.tsx

@@ -25,11 +25,18 @@ export function ModeToggle(props: {
   splitScrollSync: boolean;
   onToggleSyncScroll: () => void;
   saveState: SaveState;
+  /** Which editor modes are available for the current note type. Defaults to all three. */
+  supportedModes?: EditorMode[];
+  /** Whether to show the scroll sync toggle in split mode. Defaults to true. */
+  supportsScrollSync?: boolean;
 }) {
+  const visibleModes = props.supportedModes ?? EDITOR_MODES;
+  const showSyncToggle = props.supportsScrollSync ?? true;
+
   return (
     <div className="mode-float">
       <div className="mode-switch mode-switch--floating" role="tablist">
-        {EDITOR_MODES.map((mode) => (
+        {visibleModes.map((mode) => (
           <button
             key={mode}
             role="tab"
@@ -43,7 +50,7 @@ export function ModeToggle(props: {
           </button>
         ))}
       </div>
-      {props.mode === "split" && (
+      {showSyncToggle && props.mode === "split" && (
         <button
           type="button"
           className={`mode-sync-toggle ${props.splitScrollSync ? "mode-sync-toggle--on" : ""}`}