From b5f11ca25bd027eeda5f1147afa528f66fc41077 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Tue, 26 Nov 2024 13:07:29 +0100
Subject: [PATCH] feat: keep history when switching mode (#504)

---
 src/lib/components/JSONEditor.svelte          |   5 +-
 .../components/modals/JSONEditorModal.svelte  |   2 +-
 .../components/modals/TransformModal.svelte   |  15 ++
 .../components/modes/JSONEditorRoot.svelte    |  91 +++++++-
 .../modes/tablemode/TableMode.svelte          |  45 ++--
 .../modes/tablemode/menu/TableMenu.svelte     |   9 +-
 .../components/modes/textmode/TextMode.svelte | 211 +++++++++++++-----
 .../components/modes/treemode/TreeMode.svelte |  43 ++--
 .../modes/treemode/menu/TreeMenu.svelte       |  15 +-
 src/lib/logic/history.ts                      |  57 ++---
 src/lib/typeguards.ts                         |  24 +-
 src/lib/types.ts                              |  48 +++-
 12 files changed, 423 insertions(+), 142 deletions(-)

diff --git a/src/lib/components/JSONEditor.svelte b/src/lib/components/JSONEditor.svelte
index ff7e8315..3fb4d5a1 100644
--- a/src/lib/components/JSONEditor.svelte
+++ b/src/lib/components/JSONEditor.svelte
@@ -287,6 +287,9 @@
         case 'content':
           content = props[name] ?? contentDefault
           break
+        case 'selection':
+          selection = props[name] ?? selectionDefault
+          break
         case 'readOnly':
           readOnly = props[name] ?? readOnlyDefault
           break
@@ -527,7 +530,7 @@
     {#key instanceId}
       <JSONEditorRoot
         bind:this={refJSONEditorRoot}
-        {mode}
+        externalMode={mode}
         {content}
         {selection}
         {readOnly}
diff --git a/src/lib/components/modals/JSONEditorModal.svelte b/src/lib/components/modals/JSONEditorModal.svelte
index e3373810..b9ec7a70 100644
--- a/src/lib/components/modals/JSONEditorModal.svelte
+++ b/src/lib/components/modals/JSONEditorModal.svelte
@@ -245,7 +245,7 @@
         <div class="jse-modal-inline-editor">
           <JSONEditorRoot
             bind:this={refEditor}
-            mode={currentState.mode}
+            externalMode={currentState.mode}
             content={currentState.content}
             selection={currentState.selection}
             {readOnly}
diff --git a/src/lib/components/modals/TransformModal.svelte b/src/lib/components/modals/TransformModal.svelte
index a02b1c31..9e1bb42e 100644
--- a/src/lib/components/modals/TransformModal.svelte
+++ b/src/lib/components/modals/TransformModal.svelte
@@ -17,6 +17,8 @@
   import TreeMode from '../modes/treemode/TreeMode.svelte'
   import type {
     Content,
+    HistoryItem,
+    History,
     JSONParser,
     JSONPathParser,
     OnChangeQueryLanguage,
@@ -31,6 +33,7 @@
   import { readonlyProxy } from '$lib/utils/readonlyProxy.js'
   import Modal from './Modal.svelte'
   import { onMount } from 'svelte'
+  import { createHistoryInstance } from '$lib/logic/history'
 
   const debug = createDebug('jsoneditor:TransformModal')
 
@@ -60,6 +63,12 @@
 
   let refQueryInput: HTMLTextAreaElement
 
+  const historyInstance = createHistoryInstance<HistoryItem>({
+    onChange: (updatedHistory) => (history = updatedHistory)
+  })
+
+  let history: History<HistoryItem> = historyInstance.get()
+
   let selectedJson: unknown | undefined
   $: selectedJson = readonlyProxy(getIn(json, rootPath))
   let selectedContent: Content
@@ -316,6 +325,7 @@
                 <TreeMode
                   externalContent={selectedContent}
                   externalSelection={undefined}
+                  {history}
                   readOnly={true}
                   mainMenuBar={false}
                   navigationBar={false}
@@ -331,6 +341,8 @@
                   onChange={noop}
                   onChangeMode={noop}
                   onSelect={noop}
+                  onUndo={noop}
+                  onRedo={noop}
                   onFocus={noop}
                   onBlur={noop}
                   onSortModal={noop}
@@ -351,6 +363,7 @@
                 <TreeMode
                   externalContent={previewContent}
                   externalSelection={undefined}
+                  {history}
                   readOnly={true}
                   mainMenuBar={false}
                   navigationBar={false}
@@ -366,6 +379,8 @@
                   onChange={noop}
                   onChangeMode={noop}
                   onSelect={noop}
+                  onUndo={noop}
+                  onRedo={noop}
                   onFocus={noop}
                   onBlur={noop}
                   onSortModal={noop}
diff --git a/src/lib/components/modes/JSONEditorRoot.svelte b/src/lib/components/modes/JSONEditorRoot.svelte
index dd15f050..01dd19ac 100644
--- a/src/lib/components/modes/JSONEditorRoot.svelte
+++ b/src/lib/components/modes/JSONEditorRoot.svelte
@@ -3,6 +3,8 @@
     Content,
     ContentErrors,
     ContextMenuItem,
+    HistoryItem,
+    History,
     JSONEditorSelection,
     JSONParser,
     JSONPatchResult,
@@ -26,15 +28,18 @@
     OnSortModal,
     OnTransformModal,
     TransformModalOptions,
-    Validator
+    Validator,
+    ModeHistoryItem
   } from '$lib/types'
   import { Mode } from '$lib/types.js'
   import TextMode from './textmode/TextMode.svelte'
   import TableMode from './tablemode/TableMode.svelte'
   import TreeMode from './treemode/TreeMode.svelte'
   import type { JSONPatchDocument, JSONPath } from 'immutable-json-patch'
-  import { isMenuSpace } from '$lib/typeguards.js'
+  import { isMenuSpace, isModeHistoryItem } from '$lib/typeguards.js'
   import { cloneDeep } from 'lodash-es'
+  import { createHistoryInstance } from '$lib/logic/history'
+  import { createDebug } from '$lib/utils/debug'
 
   export let content: Content
   export let selection: JSONEditorSelection | undefined
@@ -42,7 +47,7 @@
   export let readOnly: boolean
   export let indentation: number | string
   export let tabSize: number
-  export let mode: Mode
+  export let externalMode: Mode
   export let mainMenuBar: boolean
   export let navigationBar: boolean
   export let statusBar: boolean
@@ -75,6 +80,75 @@
   let refTableMode: TableMode | undefined
   let refTextMode: TextMode | undefined
 
+  const debug = createDebug('jsoneditor:JSONEditorRoot')
+
+  const historyInstance = createHistoryInstance<HistoryItem>({
+    onChange: (updatedHistory) => (history = updatedHistory)
+  })
+
+  let history: History<HistoryItem> = historyInstance.get()
+
+  let mode = externalMode
+
+  function applyExternalMode(externalMode: Mode) {
+    if (externalMode === mode) {
+      return
+    }
+
+    const item: ModeHistoryItem = {
+      type: 'mode',
+      undo: { mode, selection: undefined },
+      redo: { mode: externalMode, selection: undefined }
+    }
+
+    if (mode === 'text' && refTextMode) {
+      // flush pending changes before adding a new history item
+      refTextMode.flush()
+    }
+
+    debug('add history item', item)
+    history.add(item)
+
+    mode = externalMode
+  }
+
+  $: applyExternalMode(externalMode)
+
+  function handleUndo(item: HistoryItem | undefined) {
+    if (isModeHistoryItem(item)) {
+      mode = item.undo.mode // important to prevent a new history item from being created
+
+      // find the selection of the previous history item (if any), and use that as initial selection
+      const items = history.items()
+      const index = items.findIndex((i) => i === item)
+      const prevItem = index !== -1 ? items[index - 1] : undefined
+      debug('handleUndo', { index, item, items, prevItem })
+      if (prevItem) {
+        selection = prevItem.redo.selection
+      }
+
+      onChangeMode(mode)
+    }
+  }
+
+  function handleRedo(item: HistoryItem | undefined) {
+    if (isModeHistoryItem(item)) {
+      // prevent a new history item from being created
+      mode = item.redo.mode
+
+      // find the selection of the next history item (if any), and use that as initial selection
+      const items = history.items()
+      const index = items.findIndex((i) => i === item)
+      const nextItem = index !== -1 ? items[index + 1] : undefined
+      debug('handleRedo', { index, item, items, nextItem })
+      if (nextItem) {
+        selection = nextItem.undo.selection
+      }
+
+      onChangeMode(mode)
+    }
+  }
+
   let modeMenuItems: MenuItem[]
   $: modeMenuItems = [
     {
@@ -268,6 +342,7 @@
     bind:this={refTextMode}
     externalContent={content}
     externalSelection={selection}
+    {history}
     {readOnly}
     {indentation}
     {tabSize}
@@ -279,8 +354,10 @@
     {validator}
     {validationParser}
     {onChange}
-    {onSelect}
     {onChangeMode}
+    {onSelect}
+    onUndo={handleUndo}
+    onRedo={handleRedo}
     {onError}
     {onFocus}
     {onBlur}
@@ -293,6 +370,7 @@
     bind:this={refTableMode}
     externalContent={content}
     externalSelection={selection}
+    {history}
     {readOnly}
     {mainMenuBar}
     {escapeControlCharacters}
@@ -306,6 +384,8 @@
     {onChange}
     {onChangeMode}
     {onSelect}
+    onUndo={handleUndo}
+    onRedo={handleRedo}
     {onRenderValue}
     {onFocus}
     {onBlur}
@@ -321,6 +401,7 @@
     bind:this={refTreeMode}
     externalContent={content}
     externalSelection={selection}
+    {history}
     {readOnly}
     {indentation}
     {mainMenuBar}
@@ -336,6 +417,8 @@
     {onChange}
     {onChangeMode}
     {onSelect}
+    onUndo={handleUndo}
+    onRedo={handleRedo}
     {onRenderValue}
     {onClassName}
     {onFocus}
diff --git a/src/lib/components/modes/tablemode/TableMode.svelte b/src/lib/components/modes/tablemode/TableMode.svelte
index b139776c..405ee182 100644
--- a/src/lib/components/modes/tablemode/TableMode.svelte
+++ b/src/lib/components/modes/tablemode/TableMode.svelte
@@ -9,33 +9,36 @@
     ContentErrors,
     ContextMenuItem,
     DocumentState,
+    History,
     HistoryItem,
     JSONEditorContext,
     JSONEditorSelection,
     JSONParser,
     JSONPatchResult,
+    JSONRepairModalProps,
     JSONSelection,
     OnBlur,
     OnChange,
     OnChangeMode,
     OnFocus,
     OnJSONEditorModal,
+    OnRedo,
     OnRenderContextMenuInternal,
     OnRenderMenuInternal,
     OnRenderValue,
     OnSelect,
     OnSortModal,
     OnTransformModal,
+    OnUndo,
     ParseError,
     PastedJson,
-    SearchResults,
     SearchResultDetails,
+    SearchResults,
     SortedColumn,
     TransformModalOptions,
     ValidationError,
     Validator,
-    ValueNormalization,
-    JSONRepairModalProps
+    ValueNormalization
   } from '$lib/types'
   import { Mode, SortDirection, ValidationSeverity } from '$lib/types.js'
   import TableMenu from './menu/TableMenu.svelte'
@@ -105,7 +108,6 @@
     pathStartsWith,
     removeEditModeFromSelection
   } from '$lib/logic/selection.js'
-  import { createHistory } from '$lib/logic/history.js'
   import ColumnHeader from './ColumnHeader.svelte'
   import { sortJson } from '$lib/logic/sort.js'
   import { keyComboFromEvent } from '$lib/utils/keyBindings.js'
@@ -150,6 +152,7 @@
   import ContextMenu from '../../controls/contextmenu/ContextMenu.svelte'
   import { flattenSearchResults, toRecursiveSearchResults } from '$lib/logic/search.js'
   import JSONValue from '../treemode/JSONValue.svelte'
+  import { isTreeHistoryItem } from 'svelte-jsoneditor'
 
   const debug = createDebug('jsoneditor:TableMode')
   const { openAbsolutePopup, closeAbsolutePopup } =
@@ -164,6 +167,7 @@
   export let readOnly: boolean
   export let externalContent: Content
   export let externalSelection: JSONEditorSelection | undefined
+  export let history: History<HistoryItem>
   export let mainMenuBar: boolean
   export let escapeControlCharacters: boolean
   export let escapeUnicodeCharacters: boolean
@@ -176,6 +180,8 @@
   export let onChange: OnChange
   export let onChangeMode: OnChangeMode
   export let onSelect: OnSelect
+  export let onUndo: OnUndo
+  export let onRedo: OnRedo
   export let onRenderValue: OnRenderValue
   export let onRenderMenu: OnRenderMenuInternal
   export let onRenderContextMenu: OnRenderContextMenuInternal
@@ -338,10 +344,18 @@
 
   let documentState: DocumentState | undefined =
     json !== undefined ? createDocumentState({ json }) : undefined
-  let selection: JSONSelection | undefined
+  let selection: JSONSelection | undefined = isJSONSelection(externalSelection)
+    ? externalSelection
+    : undefined
   let sortedColumn: SortedColumn | undefined
   let textIsRepaired = false
 
+  onMount(() => {
+    if (selection) {
+      scrollIntoView(getFocusPath(selection))
+    }
+  })
+
   function onSortByHeader(newSortedColumn: SortedColumn) {
     if (readOnly) {
       return
@@ -360,13 +374,6 @@
     })
   }
 
-  const history = createHistory<HistoryItem>({
-    onChange: (state) => {
-      historyState = state
-    }
-  })
-  let historyState = history.getState()
-
   let context: JSONEditorContext
   $: context = {
     // eslint-disable-next-line svelte/no-unused-svelte-ignore
@@ -481,6 +488,7 @@
     const canPatch = json !== undefined && previous.json !== undefined
 
     history.add({
+      type: 'tree',
       undo: {
         patch: canPatch ? [{ op: 'replace', path: '', value: previous.json }] : undefined,
         json: previous.json,
@@ -608,6 +616,7 @@
     parseError = undefined
 
     history.add({
+      type: 'tree',
       undo: {
         patch: undo,
         ...previousState
@@ -1586,12 +1595,13 @@
       return
     }
 
-    if (!history.getState().canUndo) {
+    if (!history.canUndo) {
       return
     }
 
     const item = history.undo()
-    if (!item) {
+    if (!isTreeHistoryItem(item)) {
+      onUndo(item)
       return
     }
 
@@ -1630,12 +1640,13 @@
       return
     }
 
-    if (!history.getState().canRedo) {
+    if (!history.canRedo) {
       return
     }
 
     const item = history.redo()
-    if (!item) {
+    if (!isTreeHistoryItem(item)) {
+      onRedo(item)
       return
     }
 
@@ -1695,7 +1706,7 @@
       {containsValidArray}
       {readOnly}
       bind:showSearch
-      {historyState}
+      {history}
       onSort={handleSortAll}
       onTransform={handleTransformAll}
       onUndo={handleUndo}
diff --git a/src/lib/components/modes/tablemode/menu/TableMenu.svelte b/src/lib/components/modes/tablemode/menu/TableMenu.svelte
index 2143e024..c3c31fa9 100644
--- a/src/lib/components/modes/tablemode/menu/TableMenu.svelte
+++ b/src/lib/components/modes/tablemode/menu/TableMenu.svelte
@@ -1,7 +1,7 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import type { MenuItem, OnRenderMenuInternal } from '$lib/types'
+  import type { HistoryItem, History, MenuItem, OnRenderMenuInternal } from '$lib/types'
   import Menu from '../../../controls/Menu.svelte'
   import {
     faEllipsisV,
@@ -11,13 +11,12 @@
     faSortAmountDownAlt,
     faUndo
   } from '@fortawesome/free-solid-svg-icons'
-  import type { HistoryState } from '$lib/logic/history'
   import { CONTEXT_MENU_EXPLANATION } from '$lib/constants.js'
 
   export let containsValidArray: boolean
   export let readOnly: boolean
   export let showSearch = false
-  export let historyState: HistoryState
+  export let history: History<HistoryItem>
   export let onSort: () => void
   export let onTransform: () => void
   export let onContextMenu: (event: MouseEvent) => void
@@ -72,7 +71,7 @@
           title: 'Undo (Ctrl+Z)',
           className: 'jse-undo',
           onClick: onUndo,
-          disabled: !historyState.canUndo
+          disabled: !history.canUndo
         },
         {
           type: 'button',
@@ -80,7 +79,7 @@
           title: 'Redo (Ctrl+Shift+Z)',
           className: 'jse-redo',
           onClick: onRedo,
-          disabled: !historyState.canRedo
+          disabled: !history.canRedo
         },
         {
           type: 'space'
diff --git a/src/lib/components/modes/textmode/TextMode.svelte b/src/lib/components/modes/textmode/TextMode.svelte
index d8393fab..ea609f3a 100644
--- a/src/lib/components/modes/textmode/TextMode.svelte
+++ b/src/lib/components/modes/textmode/TextMode.svelte
@@ -32,7 +32,14 @@
   import Message from '../../controls/Message.svelte'
   import ValidationErrorsOverview from '../../controls/ValidationErrorsOverview.svelte'
   import TextMenu from './menu/TextMenu.svelte'
-  import { Compartment, EditorSelection, EditorState, type Extension } from '@codemirror/state'
+  import {
+    Annotation,
+    ChangeSet,
+    Compartment,
+    EditorSelection,
+    EditorState,
+    type Extension
+  } from '@codemirror/state'
   import {
     crosshairCursor,
     drawSelection,
@@ -43,18 +50,10 @@
     highlightSpecialChars,
     keymap,
     lineNumbers,
-    rectangularSelection
+    rectangularSelection,
+    type ViewUpdate
   } from '@codemirror/view'
-  import {
-    defaultKeymap,
-    history,
-    historyKeymap,
-    indentWithTab,
-    redo,
-    redoDepth,
-    undo,
-    undoDepth
-  } from '@codemirror/commands'
+  import { defaultKeymap, indentWithTab } from '@codemirror/commands'
   import type { Diagnostic } from '@codemirror/lint'
   import { linter, lintGutter, lintKeymap } from '@codemirror/lint'
   import { json as jsonLang } from '@codemirror/lang-json'
@@ -88,6 +87,8 @@
   import type {
     Content,
     ContentErrors,
+    History,
+    HistoryItem,
     JSONEditorSelection,
     JSONParser,
     JSONPatchResult,
@@ -96,18 +97,26 @@
     OnChangeMode,
     OnError,
     OnFocus,
+    OnRedo,
     OnRenderMenuInternal,
     OnSelect,
     OnSortModal,
     OnTransformModal,
+    OnUndo,
     ParseError,
     RichValidationError,
+    TextHistoryItem,
+    TextSelection,
     TransformModalOptions,
     ValidationError,
     Validator
   } from '$lib/types.js'
   import { Mode, SelectionType, ValidationSeverity } from '$lib/types.js'
-  import { isContentParseError, isContentValidationErrors } from '$lib/typeguards.js'
+  import {
+    isContentParseError,
+    isContentValidationErrors,
+    isTextHistoryItem
+  } from '$lib/typeguards.js'
   import memoizeOne from 'memoize-one'
   import { validateText } from '$lib/logic/validation.js'
   import { truncate } from '$lib/utils/stringUtils.js'
@@ -122,6 +131,7 @@
   export let askToFormat: boolean
   export let externalContent: Content
   export let externalSelection: JSONEditorSelection | undefined
+  export let history: History<HistoryItem>
   export let indentation: number | string
   export let tabSize: number
   export let escapeUnicodeCharacters: boolean
@@ -131,6 +141,8 @@
   export let onChange: OnChange
   export let onChangeMode: OnChangeMode
   export let onSelect: OnSelect
+  export let onUndo: OnUndo
+  export let onRedo: OnRedo
   export let onError: OnError
   export let onFocus: OnFocus
   export let onBlur: OnBlur
@@ -169,6 +181,44 @@
   let content: Content = externalContent
   let text = getText(content, indentation, parser) // text is just a cached version of content.text or parsed content.json
 
+  let historyAnnotation = Annotation.define()
+
+  let historyUpdatesQueue: ViewUpdate[] | null = null
+
+  function addHistoryItem(): boolean {
+    if (!historyUpdatesQueue || historyUpdatesQueue.length === 0) {
+      return false
+    }
+
+    // merge changes and create the inverse changes
+    const startState = historyUpdatesQueue[0].startState
+    const endState = historyUpdatesQueue[historyUpdatesQueue.length - 1].state
+    const mergedChanges = historyUpdatesQueue
+      .map((update) => update.changes)
+      .reduce((mergedChanges, change) => mergedChanges.compose(change))
+    const inverseChanges = mergedChanges.invert(startState.doc)
+
+    // create a history item with undo/redo actions
+    const item: TextHistoryItem = {
+      type: 'text',
+      undo: {
+        changes: inverseChanges.toJSON(),
+        selection: toTextSelection(startState.selection)
+      },
+      redo: {
+        changes: mergedChanges.toJSON(),
+        selection: toTextSelection(endState.selection)
+      }
+    }
+
+    debug('add history item', item)
+
+    history.add(item)
+
+    historyUpdatesQueue = null
+    return true
+  }
+
   $: normalization = createNormalizationFunctions({
     escapeControlCharacters: false,
     escapeUnicodeCharacters
@@ -211,15 +261,14 @@
   })
 
   onDestroy(() => {
+    flush()
+
     if (codeMirrorView) {
       debug('Destroy CodeMirror editor')
       codeMirrorView.destroy()
     }
   })
 
-  let canUndo = false
-  let canRedo = false
-
   const sortModalId = uniqueId()
   const transformModalId = uniqueId()
 
@@ -234,10 +283,6 @@
   // This is used to track whether the editor still has focus
   let modalOpen = false
 
-  onDestroy(() => {
-    flush()
-  })
-
   createFocusTracker({
     onMount,
     onDestroy,
@@ -437,26 +482,62 @@
     }
   }
 
-  function handleUndo() {
+  function handleUndo(): boolean {
     if (readOnly) {
-      return
+      return false
     }
 
-    if (codeMirrorView) {
-      undo(codeMirrorView)
-      focus()
+    // first undo any pending changes
+    const added = addHistoryItem()
+    if (added) {
+      handleUndo()
     }
+
+    const item = history.undo()
+    debug('undo', item)
+    if (!isTextHistoryItem(item)) {
+      onUndo(item)
+
+      return false
+    }
+
+    codeMirrorView.dispatch({
+      annotations: historyAnnotation.of('undo'),
+      changes: ChangeSet.fromJSON(item.undo.changes),
+      selection: EditorSelection.fromJSON(item.undo.selection),
+      scrollIntoView: true
+    })
+
+    return true
   }
 
-  function handleRedo() {
+  function handleRedo(): boolean {
     if (readOnly) {
-      return
+      return false
     }
 
-    if (codeMirrorView) {
-      redo(codeMirrorView)
-      focus()
+    // first undo any pending changes
+    const added = addHistoryItem()
+    if (added) {
+      handleUndo()
     }
+
+    const item = history.redo()
+    debug('redo', item)
+    if (!isTextHistoryItem(item)) {
+      onRedo(item)
+
+      return false
+    }
+
+    codeMirrorView.dispatch({
+      annotations: historyAnnotation.of('redo'),
+      changes: ChangeSet.fromJSON(item.redo.changes),
+      selection: EditorSelection.fromJSON(item.redo.selection),
+      scrollIntoView: true
+    })
+
+    return true
   }
 
   function handleAcceptTooLarge() {
@@ -517,7 +598,7 @@
     }
   }
 
-  function handleDoubleClick(event: MouseEvent, view: EditorView) {
+  function handleDoubleClick(_event: MouseEvent, view: EditorView) {
     // When the user double-clicked right from a bracket [ or {,
     // select the contents of the array or object
     if (view.state.selection.ranges.length === 1) {
@@ -558,11 +639,13 @@
   }): EditorView {
     debug('Create CodeMirror editor', { readOnly, indentation })
 
+    const selection = isValidSelection(externalSelection, initialText)
+      ? fromTextSelection(externalSelection)
+      : undefined
+
     const state = EditorState.create({
       doc: initialText,
-      selection: isValidSelection(externalSelection, initialText)
-        ? toCodeMirrorSelection(externalSelection)
-        : undefined,
+      selection,
       extensions: [
         keymap.of([indentWithTab, formatCompactKeyBinding]),
         linterCompartment.of(createLinter()),
@@ -570,7 +653,6 @@
         lineNumbers(),
         highlightActiveLineGutter(),
         highlightSpecialChars(),
-        history(),
         foldGutter(),
         drawSelection(),
         dropCursor(),
@@ -588,7 +670,9 @@
           ...closeBracketsKeymap,
           ...defaultKeymap,
           ...searchKeymap,
-          ...historyKeymap,
+          { key: 'Mod-z', run: handleUndo, preventDefault: true },
+          { key: 'Mod-y', mac: 'Mod-Shift-z', run: handleRedo, preventDefault: true },
+          { key: 'Ctrl-Shift-z', run: handleRedo, preventDefault: true },
           ...foldKeymap,
           ...completionKeymap,
           ...lintKeymap
@@ -602,8 +686,18 @@
           editorState = update.state
 
           if (update.docChanged) {
+            const isCustomHistoryEvent = update.transactions.some(
+              (transaction) => !!transaction.annotation(historyAnnotation)
+            )
+
+            if (!isCustomHistoryEvent) {
+              historyUpdatesQueue = [...(historyUpdatesQueue ?? []), update]
+            }
+
             onChangeCodeMirrorValueDebounced()
-          } else if (update.selectionSet) {
+          }
+
+          if (update.selectionSet) {
             // note that emitOnSelect is invoked in onChangeCodeMirrorValue too,
             // right after firing onChange. Hence, the else if here, we do not want to fire it twice.
             emitOnSelect()
@@ -626,6 +720,17 @@
       parent: target
     })
 
+    if (selection) {
+      // important to do via dispatch, since that is executed on the next tick.
+      // Otherwise, the editor is not scrolled down enough when the statusbar is rendered on the next tick
+      codeMirrorView.dispatch(
+        codeMirrorView.state.update({
+          selection: selection.main,
+          scrollIntoView: true // FIXME: scrollIntoView also affects scroll of the main page, possibly causing the main page to scroll when jsoneditor has an initial selection
+        })
+      )
+    }
+
     return codeMirrorView
   }
 
@@ -722,8 +827,6 @@
       })
     }
 
-    updateCanUndoRedo()
-
     if (isChanged && emitChange) {
       emitOnChange(content, previousContent)
     }
@@ -734,7 +837,7 @@
       return
     }
 
-    const selection = toCodeMirrorSelection(externalSelection)
+    const selection = fromTextSelection(externalSelection)
     if (codeMirrorView && selection && (!editorState || !editorState.selection.eq(selection))) {
       debug('applyExternalSelection', selection)
 
@@ -743,7 +846,7 @@
     }
   }
 
-  function toCodeMirrorSelection(
+  function fromTextSelection(
     selection: JSONEditorSelection | undefined
   ): EditorSelection | undefined {
     return isTextSelection(selection) ? EditorSelection.fromJSON(selection) : undefined
@@ -792,7 +895,8 @@
     text = codeMirrorText
     content = { text }
 
-    updateCanUndoRedo()
+    addHistoryItem()
+
     emitOnChange(content, previousContent)
 
     // We emit OnSelect on the next tick to cater for the case where
@@ -870,13 +974,6 @@
     return indentation === '\t' ? [indent] : [indent, wrappedLineIndent]
   }
 
-  function updateCanUndoRedo() {
-    canUndo = undoDepth(codeMirrorView.state) > 0
-    canRedo = redoDepth(codeMirrorView.state) > 0
-
-    debug({ canUndo, canRedo })
-  }
-
   // debounce the input: when pressing Enter at the end of a line, two change
   // events are fired: one with the new Return character, and a second with
   // indentation added on the new line. This causes a race condition when used
@@ -888,7 +985,7 @@
     TEXT_MODE_ONCHANGE_DELAY
   )
 
-  function flush() {
+  export function flush() {
     onChangeCodeMirrorValueDebounced.flush()
   }
 
@@ -902,10 +999,14 @@
   }
 
   function emitOnSelect() {
-    onSelect({
+    onSelect(toTextSelection(editorState.selection))
+  }
+
+  function toTextSelection(selection: EditorSelection): TextSelection {
+    return {
       type: SelectionType.text,
-      ...editorState.selection.toJSON()
-    })
+      ...selection.toJSON()
+    }
   }
 
   function disableTextEditor(text: string, acceptTooLarge: boolean): boolean {
@@ -1012,8 +1113,8 @@
       canCompact={!isNewDocument}
       canSort={!isNewDocument}
       canTransform={!isNewDocument}
-      {canUndo}
-      {canRedo}
+      canUndo={history.canUndo}
+      canRedo={history.canRedo}
       {onRenderMenu}
     />
   {/if}
diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
index fe9f6799..af6864f2 100644
--- a/src/lib/components/modes/treemode/TreeMode.svelte
+++ b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -38,7 +38,6 @@
     setInDocumentState,
     syncDocumentState
   } from '$lib/logic/documentState.js'
-  import { createHistory } from '$lib/logic/history.js'
   import { duplicate, extract, revertJSONPatchWithMoveOperations } from '$lib/logic/operations.js'
   import {
     canConvert,
@@ -112,6 +111,7 @@
     ContextMenuItem,
     ConvertType,
     DocumentState,
+    History,
     HistoryItem,
     InsertType,
     JSONEditorSelection,
@@ -128,12 +128,14 @@
     OnExpand,
     OnFocus,
     OnJSONEditorModal,
+    OnRedo,
     OnRenderContextMenuInternal,
     OnRenderMenuInternal,
     OnRenderValue,
     OnSelect,
     OnSortModal,
     OnTransformModal,
+    OnUndo,
     ParseError,
     PastedJson,
     SearchResultDetails,
@@ -161,6 +163,7 @@
   import ContextMenu from '../../controls/contextmenu/ContextMenu.svelte'
   import createTreeContextMenuItems from './contextmenu/createTreeContextMenuItems'
   import { toRecursiveSearchResults as toRecursiveSearchResults } from 'svelte-jsoneditor/logic/search.js'
+  import { isTreeHistoryItem } from 'svelte-jsoneditor'
 
   const debug = createDebug('jsoneditor:TreeMode')
 
@@ -182,6 +185,7 @@
   export let readOnly: boolean
   export let externalContent: Content
   export let externalSelection: JSONEditorSelection | undefined
+  export let history: History<HistoryItem>
   export let mainMenuBar: boolean
   export let navigationBar: boolean
   export let escapeControlCharacters: boolean
@@ -196,6 +200,8 @@
   export let onChange: OnChange
   export let onChangeMode: OnChangeMode
   export let onSelect: OnSelect
+  export let onUndo: OnUndo
+  export let onRedo: OnRedo
   export let onRenderValue: OnRenderValue
   export let onRenderMenu: OnRenderMenuInternal
   export let onRenderContextMenu: OnRenderContextMenuInternal
@@ -237,7 +243,17 @@
 
   let documentStateInitialized = false
   let documentState: DocumentState | undefined = createDocumentState({ json })
-  let selection: JSONSelection | undefined
+  let selection: JSONSelection | undefined = isJSONSelection(externalSelection)
+    ? externalSelection
+    : undefined
+
+  onMount(() => {
+    if (selection) {
+      const path = getFocusPath(selection)
+      documentState = expandPath(json, documentState, path, expandNone)
+      setTimeout(() => scrollIntoView(path))
+    }
+  })
 
   function handleSelect(updatedSelection: JSONSelection | undefined) {
     selection = updatedSelection
@@ -308,13 +324,6 @@
     scrollTo(error.path)
   }
 
-  const history = createHistory<HistoryItem>({
-    onChange: (state) => {
-      historyState = state
-    }
-  })
-  let historyState = history.getState()
-
   export function expand(path: JSONPath, callback: OnExpand = expandSelf) {
     debug('expand')
 
@@ -546,6 +555,7 @@
     const canPatch = json !== undefined && previous.json !== undefined
 
     history.add({
+      type: 'tree',
       undo: {
         patch: canPatch ? [{ op: 'replace', path: '', value: previous.json }] : undefined,
         json: previous.json,
@@ -620,6 +630,7 @@
     clearSelectionWhenNotExisting(json)
 
     history.add({
+      type: 'tree',
       undo: {
         patch: undo,
         ...previousState
@@ -947,12 +958,14 @@
       return
     }
 
-    if (!history.getState().canUndo) {
+    if (!history.canUndo) {
       return
     }
 
     const item = history.undo()
-    if (!item) {
+    if (!isTreeHistoryItem(item)) {
+      onUndo(item)
+
       return
     }
 
@@ -990,12 +1003,14 @@
       return
     }
 
-    if (!history.getState().canRedo) {
+    if (!history.canRedo) {
       return
     }
 
     const item = history.redo()
-    if (!item) {
+    if (!isTreeHistoryItem(item)) {
+      onRedo(item)
+
       return
     }
 
@@ -1859,7 +1874,7 @@
       {json}
       {selection}
       {readOnly}
-      {historyState}
+      {history}
       bind:showSearch
       onExpandAll={handleExpandAll}
       onCollapseAll={handleCollapseAll}
diff --git a/src/lib/components/modes/treemode/menu/TreeMenu.svelte b/src/lib/components/modes/treemode/menu/TreeMenu.svelte
index 5324a39d..425e30d4 100644
--- a/src/lib/components/modes/treemode/menu/TreeMenu.svelte
+++ b/src/lib/components/modes/treemode/menu/TreeMenu.svelte
@@ -14,16 +14,21 @@
   import { faJSONEditorCollapse, faJSONEditorExpand } from '$lib/img/customFontawesomeIcons.js'
   import { isObjectOrArray } from '$lib/utils/typeUtils.js'
   import Menu from '../../../controls/Menu.svelte'
-  import type { JSONSelection, MenuItem, OnRenderMenuInternal } from '$lib/types'
+  import type {
+    HistoryItem,
+    History,
+    JSONSelection,
+    MenuItem,
+    OnRenderMenuInternal
+  } from '$lib/types'
   import { isKeySelection, isMultiSelection, isValueSelection } from '$lib/logic/selection.js'
-  import type { HistoryState } from '$lib/logic/history.js'
 
   export let json: unknown
   export let selection: JSONSelection | undefined
 
   export let readOnly: boolean
   export let showSearch = false
-  export let historyState: HistoryState
+  export let history: History<HistoryItem>
 
   export let onExpandAll: () => void
   export let onCollapseAll: () => void
@@ -115,7 +120,7 @@
           title: 'Undo (Ctrl+Z)',
           className: 'jse-undo',
           onClick: onUndo,
-          disabled: !historyState.canUndo
+          disabled: !history.canUndo
         },
         {
           type: 'button',
@@ -123,7 +128,7 @@
           title: 'Redo (Ctrl+Shift+Z)',
           className: 'jse-redo',
           onClick: onRedo,
-          disabled: !historyState.canRedo
+          disabled: !history.canRedo
         },
         {
           type: 'space'
diff --git a/src/lib/logic/history.ts b/src/lib/logic/history.ts
index 29d9506a..644c15d8 100644
--- a/src/lib/logic/history.ts
+++ b/src/lib/logic/history.ts
@@ -1,70 +1,55 @@
 import { createDebug } from '../utils/debug.js'
+import type { HistoryInstance, History } from 'svelte-jsoneditor'
 
 const MAX_HISTORY_ITEMS = 1000
 
 const debug = createDebug('jsoneditor:History')
 
-/**
- * @typedef {*} HistoryItem
- * @property {Object} undo
- * @property {Object} redo
- */
-
-export interface HistoryOptions {
+export interface HistoryOptions<T> {
   maxItems?: number
-  onChange?: (props: { canUndo: boolean; canRedo: boolean; length: number }) => void
-}
-
-export interface HistoryState {
-  canUndo: boolean
-  canRedo: boolean
-  length: number
-}
-
-export interface History<T> {
-  add: (item: T) => void
-  clear: () => void
-  getState: () => HistoryState
-  undo: () => T | undefined
-  redo: () => T | undefined
+  onChange?: (state: History<T>) => void
 }
 
-export function createHistory<T>(options: HistoryOptions = {}): History<T> {
+export function createHistoryInstance<T>(options: HistoryOptions<T> = {}): HistoryInstance<T> {
   const maxItems = options.maxItems || MAX_HISTORY_ITEMS
 
   /**
    * items in history are sorted from newest first to oldest last
    */
-  let items: T[] = []
+  let reverseItems: T[] = []
 
   let index = 0
 
   function canUndo(): boolean {
-    return index < items.length
+    return index < reverseItems.length
   }
 
   function canRedo(): boolean {
     return index > 0
   }
 
-  function getState(): HistoryState {
+  function get(): History<T> {
     return {
       canUndo: canUndo(),
       canRedo: canRedo(),
-      length: items.length
+      items: () => reverseItems.slice().reverse(),
+      add,
+      undo,
+      redo,
+      clear
     }
   }
 
   function handleChange() {
     if (options.onChange) {
-      options.onChange(getState())
+      options.onChange(get())
     }
   }
 
   function add(item: T) {
     debug('add', item)
 
-    items = [item].concat(items.slice(index)).slice(0, maxItems)
+    reverseItems = [item].concat(reverseItems.slice(index)).slice(0, maxItems)
 
     index = 0
 
@@ -74,7 +59,7 @@ export function createHistory<T>(options: HistoryOptions = {}): History<T> {
   function clear() {
     debug('clear')
 
-    items = []
+    reverseItems = []
     index = 0
 
     handleChange()
@@ -82,7 +67,7 @@ export function createHistory<T>(options: HistoryOptions = {}): History<T> {
 
   function undo(): T | undefined {
     if (canUndo()) {
-      const item = items[index]
+      const item = reverseItems[index]
       index += 1
 
       debug('undo', item)
@@ -99,21 +84,17 @@ export function createHistory<T>(options: HistoryOptions = {}): History<T> {
     if (canRedo()) {
       index -= 1
 
-      debug('redo', items[index])
+      debug('redo', reverseItems[index])
 
       handleChange()
 
-      return items[index]
+      return reverseItems[index]
     }
 
     return undefined
   }
 
   return {
-    add,
-    clear,
-    getState,
-    undo,
-    redo
+    get
   }
 }
diff --git a/src/lib/typeguards.ts b/src/lib/typeguards.ts
index 38776edd..fb90d8d2 100644
--- a/src/lib/typeguards.ts
+++ b/src/lib/typeguards.ts
@@ -17,7 +17,11 @@ import type {
   ObjectRecursiveState,
   ValueRecursiveState,
   SearchResults,
-  WithSearchResults
+  WithSearchResults,
+  TreeHistoryItem,
+  HistoryItem,
+  TextHistoryItem,
+  ModeHistoryItem
 } from './types.js'
 import { isObject } from '$lib/utils/typeUtils.js'
 
@@ -135,3 +139,21 @@ export function hasSearchResults(state: SearchResults | undefined): state is Wit
     Array.isArray((state as unknown as Record<string, unknown>).searchResults)
   )
 }
+
+export function isTreeHistoryItem(
+  historyItem: HistoryItem | undefined
+): historyItem is TreeHistoryItem {
+  return historyItem ? historyItem.type === 'tree' : false
+}
+
+export function isTextHistoryItem(
+  historyItem: HistoryItem | undefined
+): historyItem is TextHistoryItem {
+  return historyItem ? historyItem.type === 'text' : false
+}
+
+export function isModeHistoryItem(
+  historyItem: HistoryItem | undefined
+): historyItem is ModeHistoryItem {
+  return historyItem ? historyItem.type === 'mode' : false
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
index cd71bdcc..b1ea8a12 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -384,6 +384,8 @@ export type OnChange =
   | undefined
 export type OnJSONSelect = (selection: JSONSelection) => void
 export type OnSelect = (selection: JSONEditorSelection | undefined) => void
+export type OnUndo = (item: HistoryItem | undefined) => void
+export type OnRedo = (item: HistoryItem | undefined) => void
 export type OnPatch = (
   operations: JSONPatchDocument,
   afterPatch?: AfterPatchCallback
@@ -487,7 +489,8 @@ export interface RenderedItem {
   height: number
 }
 
-export interface HistoryItem {
+export interface TreeHistoryItem {
+  type: 'tree'
   undo: {
     patch: JSONPatchDocument | undefined
     json: unknown | undefined
@@ -508,6 +511,48 @@ export interface HistoryItem {
   }
 }
 
+export type TextChanges = Array<number | [number, ...string[]]>
+
+export interface TextHistoryItem {
+  type: 'text'
+  undo: {
+    changes: TextChanges
+    selection: TextSelection
+  }
+  redo: {
+    changes: TextChanges
+    selection: TextSelection
+  }
+}
+
+export interface ModeHistoryItem {
+  type: 'mode'
+  undo: {
+    mode: Mode
+    selection: undefined // selection can be restored used the corresponding sibling HistoryItem
+  }
+  redo: {
+    mode: Mode
+    selection: undefined // selection can be restored used the corresponding sibling HistoryItem
+  }
+}
+
+export type HistoryItem = TreeHistoryItem | TextHistoryItem | ModeHistoryItem
+
+export interface HistoryInstance<T> {
+  get: () => History<T>
+}
+
+export interface History<T> {
+  canUndo: boolean
+  canRedo: boolean
+  items: () => T[]
+  add: (item: T) => void
+  clear: () => void
+  undo: () => T | undefined
+  redo: () => T | undefined
+}
+
 export type ConvertType = 'value' | 'object' | 'array'
 export type InsertType = ConvertType | 'structure'
 
@@ -543,6 +588,7 @@ export interface AbsolutePopupContext {
 
 export interface JSONEditorPropsOptional {
   content?: Content
+  selection?: JSONEditorSelection
   readOnly?: boolean
   indentation?: number | string
   tabSize?: number