@actualwave/react-native-codeditor 1.2.1 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 1.2.2
+
+### Fixed
+- A `content` change that arrives while the WebView is still booting is now applied on initialization instead of being dropped.
+- `resetValue()` and `historyClear()` now really empty the undo history (they rebuild the editor
+  state, keeping the live extensions). Before, they only dispatched an unrecorded transaction, so
+  earlier undo steps survived and were applied on top of the new document.
+
+### Added
+- `saveState()` / `restoreState(snapshot)`: JSON snapshot of document, selection, undo/redo history
+  and scroll offset, so a document can leave and re-enter an editor without losing its history.
+  `restoreState` keeps the live extensions (language, theme, shortcuts, completions) and fires the
+  content / history-size callbacks. Exports the `EditorStateSnapshot` type.
+  If a snapshot's undo history does not match its document (undo/redo would throw "Applying change
+  set to a document with the wrong length"), `restoreState` logs a warning and restores the text,
+  selection and scroll only, with an empty history.
+
 ## 1.2.1
 
 ### Changed

package/README.md

@@ -384,6 +384,8 @@ api.editor.historyClear(): Promise<void>
 // Clears the undo/redo history without changing the document.
 
 api.editor.historySize(): Promise<HistorySize>
+api.editor.saveState(): Promise<EditorStateSnapshot>   // doc + selection + undo/redo history + scroll (plain JSON)
+api.editor.restoreState(snapshot): Promise<void>      // keeps live language/theme/shortcuts; set language/theme first
 // Returns the current { undo, redo } depth.
 // Note: history size is also reported automatically via onHistorySizeUpdate.
 ```

package/SKILL.md

@@ -266,6 +266,8 @@ api.editor.historyUndo(): Promise<boolean>
 api.editor.historyRedo(): Promise<boolean>
 api.editor.historyClear(): Promise<void>
 api.editor.historySize(): Promise<HistorySize>  // { undo, redo }
+api.editor.saveState(): Promise<EditorStateSnapshot>   // doc + selection + undo/redo history + scroll (plain JSON)
+api.editor.restoreState(snapshot): Promise<void>      // keeps live language/theme/shortcuts; set language/theme first
 ```
 
 ### Editing commands

package/lib/module/CodeEditor.js

@@ -108,6 +108,13 @@ const CodeEditor = ({
       onInitialized: api => {
         initializedRef.current = true;
         setInitialized(true);
+        // `content` may have changed while the WebView was still booting (the content effect
+        // skips pushing then), so the editor would keep the stale initial document.
+        const latest = propsRef.current.content;
+        if (latest !== currentContentRef.current) {
+          currentContentRef.current = latest;
+          void api.editor.setValue(latest);
+        }
         callbacksRef.current.onInitialized(api);
       },
       onContentUpdate: value => {

package/lib/typescript/src/EditorAPI.d.ts

@@ -44,6 +44,12 @@ export interface EmbedsConfig {
     taggedTemplates?: string[];
     supportExtensions?: Array<string | [string, Record<string, unknown>]>;
 }
+/** Opaque, JSON-serializable snapshot produced by `saveState()`. */
+export interface EditorStateSnapshot {
+    state: unknown;
+    scrollTop: number;
+    scrollLeft: number;
+}
 export interface EditorAPI {
     getValue(): Promise<string>;
     setValue(value: string): Promise<void>;
@@ -72,6 +78,17 @@ export interface EditorAPI {
     historyRedo(): Promise<boolean>;
     historyClear(): Promise<void>;
     historySize(): Promise<HistorySize>;
+    /**
+     * Snapshot of document, selection, undo/redo history and scroll offset. Plain JSON, so it
+     * can be kept in memory or persisted. Restore with `restoreState()`.
+     */
+    saveState(): Promise<EditorStateSnapshot>;
+    /**
+     * Replaces the editor state with a `saveState()` snapshot, keeping the live extensions
+     * (language, theme, shortcuts, completions). Set language/theme first. The content and
+     * history-size callbacks fire afterwards.
+     */
+    restoreState(snapshot: EditorStateSnapshot): Promise<void>;
     scrollToCursor(margin?: number): Promise<void>;
     startCompletion(): Promise<void>;
     setCompletions(items: CompletionItem[]): Promise<void>;

package/lib/typescript/src/index.d.ts

@@ -3,5 +3,5 @@ export { default as CodeEditor } from './CodeEditor';
 export type { CodeEditorProps } from './CodeEditor';
 export { default as WebViewAPI } from './WebViewAPI';
 export type { WebViewAPIHandlers, WebViewRef, InitialConfig } from './WebViewAPI';
-export type { EditorAPI, ExtensionSpec, ViewportSettings, CursorPosition, HistorySize, CompletionItem, EmbedsConfig, } from './EditorAPI';
+export type { EditorAPI, ExtensionSpec, ViewportSettings, CursorPosition, HistorySize, EditorStateSnapshot, CompletionItem, EmbedsConfig, } from './EditorAPI';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actualwave/react-native-codeditor",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "CodeMirror 6 code editor for React Native, embedded in a WebView with a full bidirectional RPC bridge. Offline, no CDN required.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/assets/editor.html

@@ -228,6 +228,40 @@
     // setExtensions, loadExtension, destroy — then add methods not in EditorController.
     const { getValue, setValue, setLanguage, setExtensions, loadExtension, destroy } = editor;
 
+    // Rebuilds the editor state around `doc` with an empty undo history (an unrecorded transaction
+    // only hides a change from the history — earlier entries stay and get mapped over it, so Undo
+    // would still walk back into the previous document). The live extension set is kept: the new
+    // state is built from the current config and the compartments' contents are re-applied.
+    const _replaceStateFresh = (doc, selection) => {
+      const view = editor.view;
+      const old = view.state;
+      view.setState(EditorState.create({ doc, selection, extensions: old.config.base }));
+      const effects = [];
+      old.config.compartments.forEach((ext, comp) => effects.push(comp.reconfigure(ext)));
+      if (effects.length) view.dispatch({ effects });
+      const state = view.state;
+      _rnPost('__contentChange__', {
+        value: state.doc.toString(),
+        undo: undoDepth(state),
+        redo: redoDepth(state),
+      });
+    };
+
+    // Dry-runs every undo and redo step on a throw-away copy of `state`. A history that does not
+    // match its document makes CodeMirror throw "Applying change set to a document with the wrong
+    // length" on the user's first Undo; catching that here keeps it from ever reaching the user.
+    const _historyConsistent = (state) => {
+      try {
+        let s = state;
+        const step = (tr) => { s = tr.state; };
+        for (let i = 0; i < 1000 && undo({ state: s, dispatch: step }); i++);
+        for (let i = 0; i < 1000 && redo({ state: s, dispatch: step }); i++);
+        return s.doc.eq(state.doc);
+      } catch (e) {
+        return false;
+      }
+    };
+
     Object.assign(editorTarget, {
       getValue,
       setValue: (value) => {
@@ -245,6 +279,51 @@
       loadExtension,
       destroy,
 
+      // Serializable snapshot of the whole editor state: document, selection, undo/redo
+      // history and scroll offset. Pair with restoreState() to move a document in and out
+      // of this editor without losing its history.
+      saveState: async () => {
+        const { historyField } = await requireAsyncModule('@codemirror/commands');
+        return {
+          state: editor.view.state.toJSON({ history: historyField }),
+          scrollTop: editor.view.scrollDOM.scrollTop,
+          scrollLeft: editor.view.scrollDOM.scrollLeft,
+        };
+      },
+
+      // Replaces the editor's state with a snapshot from saveState(). The live extension set
+      // (language, theme, shortcuts, completions...) is kept: the new state is built from the
+      // current config and the compartments' current contents are re-applied. Set the desired
+      // language/theme BEFORE calling this. Notifies the host like a regular content change.
+      restoreState: async (snapshot) => {
+        const { historyField } = await requireAsyncModule('@codemirror/commands');
+        const old = editor.view.state;
+        const next = EditorState.fromJSON(
+          snapshot.state,
+          { extensions: old.config.base },
+          { history: historyField }
+        );
+        if (!_historyConsistent(next)) {
+          console.warn('restoreState: snapshot history does not match its document, restoring text only');
+          _replaceStateFresh(next.doc, next.selection);
+          editor.view.scrollDOM.scrollTop = snapshot.scrollTop ?? 0;
+          editor.view.scrollDOM.scrollLeft = snapshot.scrollLeft ?? 0;
+          return;
+        }
+        editor.view.setState(next);
+        const effects = [];
+        old.config.compartments.forEach((ext, comp) => effects.push(comp.reconfigure(ext)));
+        if (effects.length) editor.view.dispatch({ effects });
+        editor.view.scrollDOM.scrollTop = snapshot.scrollTop ?? 0;
+        editor.view.scrollDOM.scrollLeft = snapshot.scrollLeft ?? 0;
+        const state = editor.view.state;
+        _rnPost('__contentChange__', {
+          value: state.doc.toString(),
+          undo: undoDepth(state),
+          redo: redoDepth(state),
+        });
+      },
+
       // Maps a language name to a package that doesn't follow the
       // @codemirror/lang-{name} convention. Takes effect on the next setLanguage().
       registerLanguage: (name, packageName) => registerLanguage(name, packageName),
@@ -258,13 +337,8 @@
       registerSupportExtension: (packageName, supportConfig) =>
         registerSupportExtension(packageName, supportConfig),
 
-      resetValue: (value) => {
-        const view = editor.view;
-        view.dispatch({
-          changes: { from: 0, to: view.state.doc.length, insert: value ?? '' },
-          annotations: Transaction.addToHistory.of(false),
-        });
-      },
+      // Replaces the document AND empties the undo history.
+      resetValue: (value) => _replaceStateFresh(value ?? ''),
 
       setTheme: (themeName) => _applyTheme(themeName),
 
@@ -358,11 +432,10 @@
 
       historyRedo: () => redo(editor.view),
 
+      // Empties the undo/redo history, keeping the document and selection.
       historyClear: () => {
-        // clearHistory StateEffect was removed from @codemirror/commands 6.7+.
-        // Dispatch a no-doc-change transaction marked as not-in-history so
-        // callers don't crash, though the undo stack is not actually emptied.
-        editor.view.dispatch({ annotations: Transaction.addToHistory.of(false) });
+        const { doc, selection } = editor.view.state;
+        _replaceStateFresh(doc, selection);
       },
 
       startCompletion: () => startCompletion(editor.view),