Cannot get history depth and serialized historyField

Can anyone help me with getting an access to history data?

Currently I’m trying to serialize historyField in update method of ViewPlugin class… so far I have some TS issues like this one (which I successfully ignore), when I tried to pass {history: historyField} into toJSON() method:

Type 'StateField\<unknown>' is not assignable to type 'StateField\<any>'. Types have separate declarations of a private property 'createF'.

That’s what I tried to do so far:

As seen on screenshot below, history depth is always about to be 0, and I’m not sure what serialization supposed to do with provided object, but I assumed to get some history info:

image

My overall goal is to easily understand with existing methods when I should change UI for undo/redo buttons: so if undoDepth / redoDepth = 0, I’d like to make buttons look disabled respectively.

P.S. I also tried to get this data in EditorView.updateListener, and it didn’t work out…

It allows you to later call fromJSON to deserialize the state again. It’s unclear what you were expecting here.

undoDepth is tested in the test suite and known to work. If it’s returning 0 for your state, I suspect that state has no undo events.

thanks for reply

can you please clarify how I can achieve having it in the state?
I thought it comes from basicSetup (which I currently use)

undoDepth gives you the amount of undoable edits in the state. So after some changes have been made, it will yield a non-zero value.

that’s exactly what I expected to get (according to docs) when I made some changes, but still getting 0 all the time…

as I understand, history extension comes from basicSetup, so I don’t need to add it myself, so all I need to do is to provide current state to undo / redoDepth functions. Even when I tried to add extension myself, I got this error:

Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

do you have any idea why it still yields 0?

The error probably points at the problem — you’re loading multiple versions of the packages, causing the undoDepth function you’re calling to try and read another instance of the state field than the one that’s actually on your state, causing it to return 0. Check your dependency tree for duplicates (npm ls -a | grep @codemirror).

Thanks for reply.

I checked the tree, and got this:

+-- @codemirror/lang-css@6.0.1
| +-- @codemirror/autocomplete@6.4.0
| | +-- @codemirror/language@6.4.0 deduped
| | +-- @codemirror/state@6.2.0 deduped
| | +-- @codemirror/view@6.7.3 deduped
| +-- @codemirror/language@6.4.0
| | +-- @codemirror/state@6.2.0 deduped
| | +-- @codemirror/view@6.7.3 deduped
| +-- @codemirror/state@6.2.0
+-- @codemirror/lang-html@6.4.1
| +-- @codemirror/autocomplete@6.4.0 deduped
| +-- @codemirror/lang-css@6.0.1 deduped
| +-- @codemirror/lang-javascript@6.1.2 deduped
| +-- @codemirror/language@6.4.0 deduped
| +-- @codemirror/state@6.2.0 deduped
| +-- @codemirror/view@6.7.3
| | +-- @codemirror/state@6.2.0 deduped
+-- @codemirror/lang-javascript@6.1.2
| +-- @codemirror/autocomplete@6.4.0 deduped
| +-- @codemirror/language@6.4.0 deduped
| +-- @codemirror/lint@6.1.0
| | +-- @codemirror/state@6.2.0 deduped
| | +-- @codemirror/view@6.7.3 deduped
| +-- @codemirror/state@6.2.0 deduped
| +-- @codemirror/view@6.7.3 deduped
+-- @codemirror/lang-json@6.0.1
| +-- @codemirror/language@6.4.0 deduped
+-- @emmetio/codemirror6-plugin@0.2.0
| +-- @codemirror/autocomplete@6.4.0 deduped
| +-- @codemirror/commands@6.2.0
| | +-- @codemirror/language@6.4.0 deduped
| | +-- @codemirror/state@6.2.0 deduped
| | +-- @codemirror/view@6.7.3 deduped
| +-- @codemirror/highlight@0.19.8
| | +-- @codemirror/language@0.19.10
| | | +-- @codemirror/state@0.19.9 deduped
| | | +-- @codemirror/text@0.19.6
| | | +-- @codemirror/view@0.19.48 deduped
| | +-- @codemirror/rangeset@0.19.9
| | | `-- @codemirror/state@0.19.9
| | |   `-- @codemirror/text@0.19.6 deduped
| | +-- @codemirror/state@0.19.9
| | | `-- @codemirror/text@0.19.6 deduped
| | +-- @codemirror/view@0.19.48
| | | +-- @codemirror/rangeset@0.19.9 deduped
| | | +-- @codemirror/state@0.19.9 deduped
| | | +-- @codemirror/text@0.19.6 deduped
| +-- @codemirror/history@0.19.2
| | +-- @codemirror/state@0.19.9
| | | `-- @codemirror/text@0.19.6 deduped
| | `-- @codemirror/view@0.19.48
| +-- @codemirror/lint@6.1.0 deduped
| +-- @codemirror/search@6.2.3
| | +-- @codemirror/state@6.2.0 deduped
| | +-- @codemirror/view@6.7.3 deduped
| +-- @codemirror/state@6.2.0 deduped
| `-- @codemirror/view@6.7.3 deduped

Then I uninstalled everything related to codemirror (including @uiw react package), removed node_modules, package-lock.json and just installed codemirror package and tried to run it in react environment.

The problem still persists. undoDepth yields 0.

I tried to put history extension explicitly and got this error again:

Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

The dependencies related to @codemirror after reinstallation:

+-- @codemirror/theme-one-dark@6.1.0
| +-- @codemirror/language@6.4.0       
| | +-- @codemirror/state@6.2.0 deduped
| | +-- @codemirror/view@6.7.3 deduped 
| +-- @codemirror/state@6.2.0          
| +-- @codemirror/view@6.7.3           
| | +-- @codemirror/state@6.2.0 deduped
+-- @emmetio/codemirror6-plugin@0.2.0  
| +-- @codemirror/autocomplete@6.4.0
| | +-- @codemirror/language@6.4.0 deduped
| | +-- @codemirror/state@6.2.0 deduped
| | +-- @codemirror/view@6.7.3 deduped
| +-- @codemirror/commands@6.2.0
| | +-- @codemirror/language@6.4.0 deduped
| | +-- @codemirror/state@6.2.0 deduped
| | +-- @codemirror/view@6.7.3 deduped
| +-- @codemirror/highlight@0.19.8
| | +-- @codemirror/language@0.19.10
| | | +-- @codemirror/state@0.19.9 deduped
| | | +-- @codemirror/text@0.19.6
| | | +-- @codemirror/view@0.19.48 deduped
| | +-- @codemirror/rangeset@0.19.9
| | | `-- @codemirror/state@0.19.9
| | |   `-- @codemirror/text@0.19.6 deduped
| | +-- @codemirror/state@0.19.9
| | | `-- @codemirror/text@0.19.6 deduped
| | +-- @codemirror/view@0.19.48
| | | +-- @codemirror/rangeset@0.19.9 deduped
| | | +-- @codemirror/state@0.19.9 deduped
| | | +-- @codemirror/text@0.19.6 deduped
| +-- @codemirror/history@0.19.2
| | +-- @codemirror/state@0.19.9
| | | `-- @codemirror/text@0.19.6 deduped
| | `-- @codemirror/view@0.19.48
| |   +-- @codemirror/rangeset@0.19.9 deduped
| |   +-- @codemirror/state@0.19.9 deduped
| |   +-- @codemirror/text@0.19.6 deduped
| +-- @codemirror/lang-css@6.0.1
| | +-- @codemirror/autocomplete@6.4.0 deduped
| | +-- @codemirror/language@6.4.0 deduped
| | +-- @codemirror/state@6.2.0 deduped
| +-- @codemirror/lang-html@6.4.1
| | +-- @codemirror/autocomplete@6.4.0 deduped
| | +-- @codemirror/lang-css@6.0.1 deduped
| | +-- @codemirror/lang-javascript@6.1.2
| | | +-- @codemirror/autocomplete@6.4.0 deduped
| | | +-- @codemirror/language@6.4.0 deduped
| | | +-- @codemirror/lint@6.1.0 deduped
| | | +-- @codemirror/state@6.2.0 deduped
| | | +-- @codemirror/view@6.7.3 deduped
| | +-- @codemirror/language@6.4.0 deduped
| | +-- @codemirror/state@6.2.0 deduped
| | +-- @codemirror/view@6.7.3 deduped
| +-- @codemirror/language@6.4.0 deduped
| +-- @codemirror/state@6.2.0 deduped
| +-- @codemirror/view@6.7.3 deduped
+-- codemirror@6.0.1
| +-- @codemirror/autocomplete@6.4.0 deduped
| +-- @codemirror/commands@6.2.0 deduped
| +-- @codemirror/language@6.4.0 deduped
| +-- @codemirror/lint@6.1.0
| | +-- @codemirror/state@6.2.0 deduped
| | +-- @codemirror/view@6.7.3 deduped
| +-- @codemirror/search@6.2.3
| | +-- @codemirror/state@6.2.0 deduped
| | +-- @codemirror/view@6.7.3 deduped
| +-- @codemirror/state@6.2.0 deduped
| `-- @codemirror/view@6.7.3 deduped

I’m totally stuck with this problem…

Get rid of all the 0.19 packages. (Also heed the deprecation warnings that your npm emits.)

The problem was that history methods were suggested to be imported from @codemirror/history, which is deprecated package that comes from @emmetio/codemirror6-plugin dependencies.

Thus, I had no clue that this package is deprecated and would conflict with @codemirror/commands imports (where all the history related stuff should be actually imported from).

I should’ve paid more attention… Anyway, thanks a lot for help and patience

1 Like