@bendyline/squisq-editor-react 1.5.2 → 1.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",

package/src/RawEditor.tsx

@@ -7,29 +7,30 @@
  */
 
 import { useRef, useCallback, useEffect } from 'react';
-import Editor, {
-  loader,
-  type OnMount,
-  type OnChange,
-  type BeforeMount,
-} from '@monaco-editor/react';
-import * as monaco from 'monaco-editor';
+import Editor, { type OnMount, type OnChange, type BeforeMount } from '@monaco-editor/react';
+import type * as monaco from 'monaco-editor';
 import { useEditorContext } from './EditorContext';
 import { getAvailableTemplates } from '@bendyline/squisq/doc';
 import { suggestIcons, resolveIcon, iconGlyph } from '@bendyline/squisq/icons';
 import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
-
-// Use locally installed monaco-editor instead of CDN.
+import { useMonacoLoader } from './useMonacoLoader';
+
+// Monaco is loaded lazily through `useMonacoLoader` (see the hook for the
+// rationale). The type-only `import type * as monaco from 'monaco-editor'`
+// above gives us `monaco.editor.IStandaloneCodeEditor`, `monaco.Range`,
+// etc. for typing without pulling the package into the static module
+// graph — which is the whole point: a consumer importing `JsonEditor` or
+// a type from the package barrel no longer drags ~9MB of language
+// services into the resolver.
 //
-// NOTE: By default this imports the full monaco-editor with all 80+ languages
-// and workers (~9MB). Consumers can dramatically reduce bundle size by aliasing
-// 'monaco-editor' to a slim entry in their bundler config. For example with Vite:
+// Consumers that *do* want the raw editor can still slim the bundle by
+// aliasing `monaco-editor` to a custom entry in their bundler config.
+// For example with Vite:
 //
 //   resolve: { alias: [{ find: /^monaco-editor$/, replacement: './monaco-slim.ts' }] }
 //
-// Where monaco-slim.ts re-exports 'monaco-editor/esm/vs/editor/editor.api' plus
-// only the language contributions needed (e.g. markdown, javascript, etc.).
-loader.config({ monaco });
+// Where monaco-slim.ts re-exports 'monaco-editor/esm/vs/editor/editor.api'
+// plus only the language contributions needed (e.g. markdown, javascript).
 
 // Squisq Monaco themes: same syntax highlighting as vs / vs-dark, but with
 // Monaco's internal gutter (line numbers + folding margin) and overview
@@ -83,6 +84,7 @@ export function RawEditor({
 }: RawEditorProps) {
   const { markdownSource, setMarkdownSource, setMonacoEditor, language, mentionProvider } =
     useEditorContext();
+  const { monaco: monacoNs, ready: monacoReady } = useMonacoLoader();
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const isExternalUpdate = useRef(false);
   const completionDisposable = useRef<monaco.IDisposable | null>(null);
@@ -439,7 +441,10 @@ export function RawEditor({
   // and weight; the codepoint character is the decoration's content.
   useEffect(() => {
     const editor = editorRef.current;
-    if (!editor) return;
+    // `monacoNs` is read from the lazy loader's state rather than a
+    // top-level import. Re-run when it transitions from null → loaded
+    // so decorations show up the moment monaco is in hand.
+    if (!editor || !monacoNs) return;
     if (language !== 'markdown') return;
     const model = editor.getModel();
     if (!model) return;
@@ -461,7 +466,7 @@ export function RawEditor({
         // glyph as content prepended visually to that position.
         const col = match.index + 1; // Monaco columns are 1-based
         decorations.push({
-          range: new monaco.Range(line, col, line, col),
+          range: new monacoNs.Range(line, col, line, col),
           options: {
             before: {
               content: glyph,
@@ -477,10 +482,36 @@ export function RawEditor({
     } else {
       iconGlyphDecorations.current.set(decorations);
     }
-  }, [markdownSource, language]);
+  }, [markdownSource, language, monacoNs]);
 
   const effectiveTheme = SQUISQ_THEMES[theme] ?? theme;
 
+  // Wait for the lazy monaco namespace + `loader.config()` to settle
+  // before mounting `<Editor>`. Without this gate, the @monaco-editor/
+  // react singleton loader would fall back to its built-in CDN fetch
+  // for any consumer that hasn't aliased monaco-editor — which is the
+  // exact regression the lazy-loading move is meant to avoid.
+  if (!monacoReady) {
+    return (
+      <div
+        className={className}
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'var(--squisq-editor-muted-foreground, #6a6258)',
+          fontSize: 13,
+        }}
+        data-testid="raw-editor"
+        data-monaco-loading
+      >
+        Loading editor…
+      </div>
+    );
+  }
+
   return (
     <div className={className} style={{ width: '100%', height: '100%' }} data-testid="raw-editor">
       <Editor

package/src/VersionHistoryPanel.tsx

@@ -11,10 +11,67 @@
  * a provider that has `allowVersioning` and a `container`.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
 import { DiffEditor } from '@monaco-editor/react';
 import type { Version } from '@bendyline/squisq/versions';
 import { useEditorContext } from './EditorContext';
+import { useMonacoLoader } from './useMonacoLoader';
+
+interface LazyDiffEditorProps {
+  original: string;
+  modified: string;
+  theme: 'vs' | 'vs-dark';
+}
+
+const lazyLoadingStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+  color: 'var(--squisq-editor-muted-foreground, #6a6258)',
+  fontSize: 12,
+};
+
+/**
+ * Defers the `<DiffEditor>` mount until the lazy monaco namespace +
+ * `loader.config()` are in place. Without the gate, the
+ * `@monaco-editor/react` singleton loader would fall back to its CDN
+ * default for any consumer that hasn't already mounted `<RawEditor>`.
+ *
+ * This wrapper is what makes `useMonacoLoader` worth using here —
+ * VersionHistoryPanel itself is always present in the toolbar, so
+ * subscribing at its level would defeat the lazy-load. The hook only
+ * fires when a snapshot is actually selected.
+ */
+function LazyDiffEditor({ original, modified, theme }: LazyDiffEditorProps) {
+  const { ready } = useMonacoLoader();
+  if (!ready) {
+    return <div style={lazyLoadingStyle}>Loading diff…</div>;
+  }
+  return (
+    <DiffEditor
+      original={original}
+      modified={modified}
+      language="markdown"
+      theme={theme}
+      options={{
+        readOnly: true,
+        renderSideBySide: true,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        wordWrap: 'on',
+        automaticLayout: true,
+        fontSize: 12,
+        lineNumbers: 'off',
+        glyphMargin: false,
+        folding: false,
+        overviewRulerLanes: 0,
+        renderOverviewRuler: false,
+      }}
+    />
+  );
+}
 
 interface PanelState {
   loading: boolean;
@@ -206,25 +263,10 @@ export function VersionHistoryPanel() {
                 </span>
               </div>
               <div className="squisq-version-history-diff-body">
-                <DiffEditor
+                <LazyDiffEditor
                   original={state.selected.content}
                   modified={markdownSource}
-                  language="markdown"
                   theme={diffTheme}
-                  options={{
-                    readOnly: true,
-                    renderSideBySide: true,
-                    minimap: { enabled: false },
-                    scrollBeyondLastLine: false,
-                    wordWrap: 'on',
-                    automaticLayout: true,
-                    fontSize: 12,
-                    lineNumbers: 'off',
-                    glyphMargin: false,
-                    folding: false,
-                    overviewRulerLanes: 0,
-                    renderOverviewRuler: false,
-                  }}
                 />
               </div>
             </div>

package/src/recorder/hooks/useMediaRecorder.ts

@@ -344,7 +344,15 @@ export function useMediaRecorder(options: UseMediaRecorderOptions): UseMediaReco
 
   // Final unmount cleanup — make sure we don't leak the camera light /
   // screen-capture indicator if the component disappears mid-recording.
+  //
+  // `stopResolversRef.current` is captured at effect-run time into a
+  // local. That ref is initialized once at construction and never
+  // reassigned, so the local handle stays a live view onto the same
+  // mutable array — entries pushed by later `stop()` calls still
+  // appear here on cleanup. Capturing keeps `react-hooks/exhaustive-deps`
+  // satisfied without changing the runtime behavior.
   useEffect(() => {
+    const pendingResolvers = stopResolversRef.current;
     return () => {
       const rec = recorderRef.current;
       if (rec && rec.state !== 'inactive') {
@@ -356,7 +364,7 @@ export function useMediaRecorder(options: UseMediaRecorderOptions): UseMediaReco
       }
       releaseStream();
       clearTicker();
-      stopResolversRef.current.splice(0).forEach((resolve) => resolve(null));
+      pendingResolvers.splice(0).forEach((resolve) => resolve(null));
     };
   }, [releaseStream, clearTicker]);
 

package/src/useMonacoLoader.ts

@@ -0,0 +1,83 @@
+/**
+ * useMonacoLoader
+ *
+ * Idempotently dynamic-imports `monaco-editor` and points the
+ * `@monaco-editor/react` singleton loader at the bundled copy. Replaces
+ * the historical top-of-module `import * as monaco from 'monaco-editor';
+ * loader.config({ monaco })` pattern, which forced every consumer of
+ * `@bendyline/squisq-editor-react` — including ones that only import
+ * `JsonEditor` or a type — to drag in monaco's ~9MB worth of language
+ * services and workers at module evaluation time.
+ *
+ * Hosts that want the smallest possible bundle can keep aliasing
+ * `monaco-editor` to a slim entry as before; the behavior is identical
+ * once the dynamic import settles.
+ *
+ * The promise is cached at module scope so the first subscriber
+ * anywhere in the app pays the import cost and every later subscriber
+ * reuses the same settled value.
+ */
+
+import { useEffect, useState } from 'react';
+import { loader } from '@monaco-editor/react';
+
+/** In-flight (or settled) dynamic import shared across all callers. */
+let monacoPromise: Promise<typeof import('monaco-editor')> | null = null;
+
+/** Settled namespace once the promise resolves — read synchronously by mount-time consumers. */
+let monacoNamespace: typeof import('monaco-editor') | null = null;
+
+export interface UseMonacoLoaderResult {
+  /** The monaco namespace once loaded, or `null` while the import is in flight. */
+  monaco: typeof import('monaco-editor') | null;
+  /** Flips to `true` after the import settles. Gate `<Editor>` / `<DiffEditor>` renders on this. */
+  ready: boolean;
+}
+
+/**
+ * Subscribe to the lazy-loaded monaco namespace. The first caller
+ * triggers `import('monaco-editor')` and configures the
+ * `@monaco-editor/react` loader; subsequent callers receive the same
+ * cached value.
+ */
+export function useMonacoLoader(): UseMonacoLoaderResult {
+  const [state, setState] = useState<UseMonacoLoaderResult>(() => ({
+    monaco: monacoNamespace,
+    ready: monacoNamespace !== null,
+  }));
+
+  useEffect(() => {
+    if (state.ready) return;
+    if (!monacoPromise) {
+      // Import the explicit ESM entry file rather than the bare
+      // package specifier `'monaco-editor'`. The package's
+      // `package.json` has no `main` / no `exports` (only `module`),
+      // which trips Vite's strict resolver on both static and
+      // dynamic imports of the bare name. Pointing at the file
+      // directly — the same path monaco's `module` field points at —
+      // turns this into a regular file-path resolve that doesn't
+      // care about the manifest's entry fields. Works identically
+      // in Vite dev / build, vitest's transform pipeline, and any
+      // bundler-using downstream consumer.
+      monacoPromise = (
+        import('monaco-editor/esm/vs/editor/editor.api.js') as unknown as Promise<
+          typeof import('monaco-editor')
+        >
+      ).then((m) => {
+        loader.config({ monaco: m });
+        monacoNamespace = m;
+        return m;
+      });
+    }
+    let cancelled = false;
+    void monacoPromise.then((m) => {
+      if (cancelled) return;
+      setState({ monaco: m, ready: true });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [state.ready]);
+
+  return state;
+}