Action history

.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": ["eslint:recommended", "prettier"],
   "parser": "@babel/eslint-parser",
+  "ignorePatterns": ["examples/demo/build/**"],
   "parserOptions": {
     "ecmaVersion": 13,
     "sourceType": "module",
@@ -72,7 +73,6 @@
     "no-extend-native": ["error"],
     "no-extra-bind": ["error"],
     "no-extra-boolean-cast": ["error"],
-    "no-inline-comments": ["error"],
     "no-implicit-coercion": ["error"],
     "no-implied-eval": ["error"],
     "no-inner-declarations": ["off"],

README.md

@@ -145,6 +145,33 @@ For use in containers bound to annotations e.g. as children of `<AnnotationAccor
 * `connectShapeToLayout( Container )`: returns a wrapped container component that can be bound to a shape such that its children are bound to that shape's figure entry under the `layout.shapes` key, e.g. the `<Fold>`s in `<ShapeAccordion />` above.
 * `connectImagesToLayout( Container )`: returns a wrapped container component that can be bound to an image such that its children are bound to that image's figure entry under the `layout.image` key, e.g. the `<Fold>`s in `<ImageAccordion />` above.
 
+### Action History
+
+You can show/hide undo/redo buttons via `showUndoRedo` prop of `<PlotlyEditor />`.
+
+You can trigger undo/redo actions programmatically by passing a ref to `PlotlyEditor` or `EditorControls` and calling `undo` or `redo` methods on the ref. E.g.:
+
+```javascript
+const rceRef = useRef(null);
+...
+<EditModeController
+  ref={rceRef}
+  ...
+/>
+...
+rceRef.current.undo()
+```
+
+Use `onAddToUndo` and `onAddToRedo` hooks to trigger events when an action is added to undo or redo history in the `<PlotlyEditor />` component.
+
+```javascript
+<PlotlyEditor
+  ...
+  onAddToUndo={() => { console.log('action added to undo') }}
+  onAddToRedo={() => { console.log('action added to redo') }}
+/>
+```
+
 ## Mapbox Access Tokens
 
 To use Satellite Maps in the Editor, [Mapbox access tokens](https://www.mapbox.com/help/how-access-tokens-work/) are required.

babel.config.json

@@ -14,6 +14,7 @@
   "plugins": [
     "react-hot-loader/babel",
     "@babel/plugin-transform-object-rest-spread",
+    "@babel/plugin-proposal-export-default-from",
     [
       "module-resolver",
       {

dev/App.js

@@ -1,16 +1,19 @@
-import {Component} from 'react';
+import {Component, createRef} from 'react';
 import {hot} from 'react-hot-loader/root';
 import plotly from 'plotly.js/dist/plotly-with-meta';
 import '../src/styles/main.scss';
 import AceEditor from 'react-ace';
 import Select from 'react-select';
-import PlotlyEditor, {DefaultEditor, Panel} from '../src';
+import PlotlyEditor, {Button, DefaultEditor, Panel} from '../src';
 import Inspector from 'react-inspector';
 import dataSources from './dataSources';
 
 // https://github.com/plotly/react-chart-editor#mapbox-access-tokens
 import ACCESS_TOKENS from '../accessTokens';
 
+// Have actual buttons outside the component for testing undo/redo
+const SHOW_EXTERNAL_UNDO_REDO = false;
+
 // import {customConfigTest} from '../src/__stories__';
 
 const dataSourceOptions = Object.keys(dataSources).map((name) => ({
@@ -117,6 +120,8 @@ class App extends Component {
     this.loadMock = this.loadMock.bind(this);
     this.loadJSON = this.loadJSON.bind(this);
     this.updateState = this.updateState.bind(this);
+
+    this.PlotlyEditor = createRef();
   }
 
   UNSAFE_componentWillMount() {
@@ -167,7 +172,24 @@ class App extends Component {
   render() {
     return (
       <div className="app">
+        {SHOW_EXTERNAL_UNDO_REDO && (
+          <div>
+            <Button
+              label="Undo"
+              onClick={() => {
+                this.PlotlyEditor.current.undo();
+              }}
+            />
+            <Button
+              label="Redo"
+              onClick={() => {
+                this.PlotlyEditor.current.redo();
+              }}
+            />
+          </div>
+        )}
         <PlotlyEditor
+          ref={this.PlotlyEditor}
           data={this.state.data}
           layout={this.state.layout}
           frames={this.state.frames}
@@ -181,6 +203,7 @@ class App extends Component {
           debug
           advancedTraceTypeSelector
           showFieldTooltips
+          // showUndoRedo
           // glByDefault
           // traceTypesConfig={traceTypesConfig}
           // makeDefaultTrace={() => ({type: 'scattergl', mode: 'markers'})}

jestSetup.js

@@ -0,0 +1,3 @@
+global.structuredClone = function (obj) {
+  return JSON.parse(JSON.stringify(obj));
+};

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@figlinq/react-chart-editor",
   "description": "plotly.js chart editor react component UI",
-  "version": "0.50.2",
+  "version": "0.51.0",
   "author": "Figlinq",
   "bugs": {
     "url": "https://github.com/figlinq/react-chart-editor/issues"
@@ -26,13 +26,14 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@appigram/react-rangeslider": "^2.2.19",
     "@figlinq/plotly-icons": "^3.0.2",
+    "@figlinq/react-rangeslider": "^3.0.1",
     "@hello-pangea/color-picker": "^3.2.2",
-    "@mdi/js": "^7.2.96",
+    "@mdi/js": "^7.3.67",
     "@mdi/react": "^1.6.1",
     "@plotly/draft-js-export-html": "^1.2.0",
     "classnames": "^2.3.2",
+    "deep-object-diff": "^1.1.9",
     "draft-js": "^0.11.7",
     "draft-js-import-html": "^1.4.1",
     "draft-js-utils": "^1.4.1",
@@ -45,37 +46,39 @@
     "react-dropzone": "^14.2.3",
     "react-plotly.js": "^2.6.0",
     "react-resizable-rotatable-draggable": "^0.2.0",
-    "react-select": "^5.7.7",
+    "react-select": "^5.8.0",
     "react-tabs": "^4.2.1",
     "styled-components": "^5.3.8",
     "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.23.0",
-    "@babel/core": "7.23.0",
-    "@babel/eslint-parser": "7.22.15",
+    "@babel/cli": "7.23.4",
+    "@babel/core": "7.23.5",
+    "@babel/eslint-parser": "7.23.3",
     "@babel/node": "7.22.19",
-    "@babel/plugin-transform-object-rest-spread": "7.22.15",
-    "@babel/preset-env": "7.22.20",
-    "@babel/preset-react": "7.22.15",
-    "@babel/traverse": "7.23.0",
+    "@babel/plugin-proposal-export-default-from": "^7.23.3",
+    "@babel/plugin-transform-object-rest-spread": "7.23.4",
+    "@babel/preset-env": "7.23.5",
+    "@babel/preset-react": "7.23.3",
+    "@babel/traverse": "7.23.5",
     "@hot-loader/react-dom": "16.14.0",
-    "@percy/cli": "1.26.1",
+    "@percy/cli": "1.27.5",
     "@percy/storybook": "4.3.6",
     "@storybook/builder-webpack5": "^6.5.14",
     "@storybook/manager-webpack5": "^6.5.14",
     "@storybook/react": "6.5.16",
     "autoprefixer": "10.4.16",
     "babel-jest": "26.6.3",
     "babel-loader": "9.1.3",
-    "babel-plugin-module-resolver": "5.0.0",
+    "babel-plugin-module-resolver": "4.1.0",
+    "caniuse-lite": "^1.0.30001566",
     "css-loader": "6.8.1",
     "cssnano": "6.0.1",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.7",
-    "eslint": "8.50.0",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-import": "2.28.1",
+    "eslint": "8.55.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "2.29.0",
     "eslint-plugin-jsx": "0.1.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-percy": "0.2.4",
@@ -84,12 +87,12 @@
     "jest": "26.6.3",
     "jest-cli": "26.6.3",
     "mkdirp": "3.0.1",
-    "plotly.js": "2.26.2",
-    "postcss": "8.4.31",
+    "plotly.js": "2.27.1",
+    "postcss": "8.4.32",
     "postcss-cli": "10.1.0",
     "postcss-combine-duplicated-selectors": "10.0.3",
     "postcss-import": "15.1.0",
-    "postcss-preset-env": "8.5.1",
+    "postcss-preset-env": "9.3.0",
     "prettier": "2.8.8",
     "react": "16.14.0",
     "react-ace": "7.0.5",
@@ -99,10 +102,10 @@
     "react-test-renderer": "16.14.0",
     "request": "2.88.2",
     "rimraf": "5.0.5",
-    "sass": "1.68.0",
+    "sass": "1.69.5",
     "sass-loader": "13.3.2",
     "style-loader": "3.3.3",
-    "webpack": "5.88.2",
+    "webpack": "5.89.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1"
   },
@@ -124,6 +127,9 @@
     },
     "transformIgnorePatterns": [
       "@figlink/plotly-icons"
+    ],
+    "setupFiles": [
+      "<rootDir>/jestSetup.js"
     ]
   },
   "keywords": [