feat: add undo, redo menu items

docs/src/content/docs/configuration.md

@@ -49,11 +49,17 @@ NgxEditorModule.forRoot({
     align_justify: 'Justify',
     text_color: 'Text Color',
     background_color: 'Background Color',
+    horizontal_rule: 'Horizontal rule',
+    format_clear: 'Clear Formatting',
     insertLink: 'Insert Link',
     removeLink: 'Remove Link',
     insertImage: 'Insert Image',
+    indent: 'Increase Indent',
+    outdent: 'Decrease Indent',
     superscript: 'Superscript',
     subscript: 'Subscript',
+    undo: 'Undo',
+    redo: 'Redo',
 
     // pupups, forms, others...
     url: 'URL',

docs/src/content/docs/menu.md

@@ -30,6 +30,7 @@ export class AppComponent implements OnInit, OnDestroy {
     ['align_left', 'align_center', 'align_right', 'align_justify'],
     ['horizontal_rule', 'format_clear', 'indent', 'outdent'],
     ['superscript', 'subscript'],
+    ['undo', 'redo'],
   ];
   colorPresets = ['red', '#FF0000', 'rgb(255, 0, 0)'];
 
@@ -43,6 +44,10 @@ export class AppComponent implements OnInit, OnDestroy {
 }
 ```
 
+:::note
+For undo/redo, the `history` option should be enabled in the Editor. history is enabled by default.
+:::
+
 **component.html**
 
 ```html title="app.component.html"

projects/ngx-editor/src/lib/Locals.ts

@@ -32,6 +32,8 @@ export const defaults: Record<string, string | Observable<string>> = {
   outdent: 'Decrease Indent',
   superscript: 'Superscript',
   subscript: 'Subscript',
+  undo: 'Undo',
+  redo: 'Redo',
 
   // pupups, forms, others...
   url: 'URL',

projects/ngx-editor/src/lib/commands/History.ts

@@ -0,0 +1,30 @@
+import type { EditorState, Transaction, Command } from 'prosemirror-state';
+
+import { InsertCommand } from './types';
+import { redo, undo } from 'prosemirror-history';
+
+type HistoryMode = 'undo' | 'redo';
+
+class History implements InsertCommand {
+  mode: HistoryMode = 'undo';
+
+  constructor(mode: HistoryMode) {
+    this.mode = mode;
+  }
+
+  insert(): Command {
+    return (state: EditorState, dispatch?: (tr: Transaction) => void): boolean => {
+      if (this.mode === 'undo') {
+        return undo(state, dispatch);
+      }
+
+      return redo(state, dispatch);
+    };
+  }
+
+  canExecute(state: EditorState): boolean {
+    return this.insert()(state);
+  }
+}
+
+export default History;

projects/ngx-editor/src/lib/commands/index.ts

@@ -9,6 +9,7 @@ import Image from './Image';
 import TextColor from './TextColor';
 import FormatClear from './FormatClear';
 import Indent from './Indent';
+import History from './History';
 
 export const STRONG = new Mark('strong');
 export const EM = new Mark('em');
@@ -38,3 +39,5 @@ export const INDENT = new Indent('increase');
 export const OUTDENT = new Indent('decrease');
 export const SUPERSCRIPT = new Mark('sup');
 export const SUBSCRIPT = new Mark('sub');
+export const UNDO = new History('undo');
+export const REDO = new History('redo');

projects/ngx-editor/src/lib/icons/index.ts

@@ -24,6 +24,8 @@ import indent from './indent';
 import outdent from './outdent';
 import superscript from './superscript';
 import subscript from './subscript';
+import undo from './undo';
+import redo from './redo';
 
 const DEFAULT_ICON_HEIGHT = 20;
 const DEFAULT_ICON_WIDTH = 20;
@@ -53,6 +55,8 @@ export const icons: Record<string, any> = {
   outdent,
   superscript,
   subscript,
+  undo,
+  redo,
   path: '<path></path>',
 };
 

projects/ngx-editor/src/lib/icons/redo.ts

@@ -0,0 +1 @@
+export default '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/>';

projects/ngx-editor/src/lib/icons/undo.ts

@@ -0,0 +1 @@
+export default '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>';

projects/ngx-editor/src/lib/modules/menu/MenuCommands.ts

@@ -30,6 +30,8 @@ export const InsertCommands: Record<string, InsertCommand> = {
   format_clear: Commands.FORMAT_CLEAR,
   indent: Commands.INDENT,
   outdent: Commands.OUTDENT,
+  undo: Commands.UNDO,
+  redo: Commands.REDO,
 };
 
 export const Link = Commands.LINK;

projects/ngx-editor/src/lib/modules/menu/menu.component.ts

@@ -38,6 +38,7 @@ export const TOOLBAR_FULL: Toolbar = [
   ['align_left', 'align_center', 'align_right', 'align_justify'],
   ['horizontal_rule', 'format_clear', 'indent', 'outdent'],
   ['superscript', 'subscript'],
+  ['undo', 'redo'],
 ];
 
 const DEFAULT_COLOR_PRESETS = [
@@ -96,6 +97,8 @@ export class MenuComponent implements OnInit {
     'format_clear',
     'indent',
     'outdent',
+    'undo',
+    'redo',
   ];
 
   iconContainerClass = ['NgxEditor__MenuItem', 'NgxEditor__MenuItem--IconContainer'];

projects/ngx-editor/src/lib/types.ts

@@ -33,7 +33,9 @@ export type TBItems = 'bold'
 | 'indent'
 | 'outdent'
 | 'superscript'
-| 'subscript';
+| 'subscript'
+| 'undo'
+| 'redo';
 
 export type ToolbarDropdown = { heading?: TBHeadingItems[] };
 export type ToolbarLinkOptions = Partial<LinkOptions>;