From dedff4adb36f79675d09e1245ed9d174ec8ca2ec Mon Sep 17 00:00:00 2001 From: Sibiraj <20282546+sibiraj-s@users.noreply.github.com> Date: Tue, 14 May 2024 08:50:19 +0530 Subject: [PATCH] feat: add undo, redo menu items --- docs/src/content/docs/configuration.md | 6 ++++ docs/src/content/docs/menu.md | 5 ++++ projects/ngx-editor/src/lib/Locals.ts | 2 ++ .../ngx-editor/src/lib/commands/History.ts | 30 +++++++++++++++++++ projects/ngx-editor/src/lib/commands/index.ts | 3 ++ projects/ngx-editor/src/lib/icons/index.ts | 4 +++ projects/ngx-editor/src/lib/icons/redo.ts | 1 + projects/ngx-editor/src/lib/icons/undo.ts | 1 + .../src/lib/modules/menu/MenuCommands.ts | 2 ++ .../src/lib/modules/menu/menu.component.ts | 3 ++ projects/ngx-editor/src/lib/types.ts | 4 ++- 11 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 projects/ngx-editor/src/lib/commands/History.ts create mode 100644 projects/ngx-editor/src/lib/icons/redo.ts create mode 100644 projects/ngx-editor/src/lib/icons/undo.ts diff --git a/docs/src/content/docs/configuration.md b/docs/src/content/docs/configuration.md index 7128f7d7..9d0b24e7 100644 --- a/docs/src/content/docs/configuration.md +++ b/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', diff --git a/docs/src/content/docs/menu.md b/docs/src/content/docs/menu.md index ef32a671..39dd05aa 100644 --- a/docs/src/content/docs/menu.md +++ b/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" diff --git a/projects/ngx-editor/src/lib/Locals.ts b/projects/ngx-editor/src/lib/Locals.ts index 5455bb13..b599c0d3 100644 --- a/projects/ngx-editor/src/lib/Locals.ts +++ b/projects/ngx-editor/src/lib/Locals.ts @@ -32,6 +32,8 @@ export const defaults: Record> = { outdent: 'Decrease Indent', superscript: 'Superscript', subscript: 'Subscript', + undo: 'Undo', + redo: 'Redo', // pupups, forms, others... url: 'URL', diff --git a/projects/ngx-editor/src/lib/commands/History.ts b/projects/ngx-editor/src/lib/commands/History.ts new file mode 100644 index 00000000..18dfa3cd --- /dev/null +++ b/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; diff --git a/projects/ngx-editor/src/lib/commands/index.ts b/projects/ngx-editor/src/lib/commands/index.ts index b80ea307..95481ee4 100644 --- a/projects/ngx-editor/src/lib/commands/index.ts +++ b/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'); diff --git a/projects/ngx-editor/src/lib/icons/index.ts b/projects/ngx-editor/src/lib/icons/index.ts index 708b5150..5cffe30a 100644 --- a/projects/ngx-editor/src/lib/icons/index.ts +++ b/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 = { outdent, superscript, subscript, + undo, + redo, path: '', }; diff --git a/projects/ngx-editor/src/lib/icons/redo.ts b/projects/ngx-editor/src/lib/icons/redo.ts new file mode 100644 index 00000000..b9291eba --- /dev/null +++ b/projects/ngx-editor/src/lib/icons/redo.ts @@ -0,0 +1 @@ +export default ''; diff --git a/projects/ngx-editor/src/lib/icons/undo.ts b/projects/ngx-editor/src/lib/icons/undo.ts new file mode 100644 index 00000000..abdabb95 --- /dev/null +++ b/projects/ngx-editor/src/lib/icons/undo.ts @@ -0,0 +1 @@ +export default ''; diff --git a/projects/ngx-editor/src/lib/modules/menu/MenuCommands.ts b/projects/ngx-editor/src/lib/modules/menu/MenuCommands.ts index 65f1dec7..4728ce3f 100644 --- a/projects/ngx-editor/src/lib/modules/menu/MenuCommands.ts +++ b/projects/ngx-editor/src/lib/modules/menu/MenuCommands.ts @@ -30,6 +30,8 @@ export const InsertCommands: Record = { format_clear: Commands.FORMAT_CLEAR, indent: Commands.INDENT, outdent: Commands.OUTDENT, + undo: Commands.UNDO, + redo: Commands.REDO, }; export const Link = Commands.LINK; diff --git a/projects/ngx-editor/src/lib/modules/menu/menu.component.ts b/projects/ngx-editor/src/lib/modules/menu/menu.component.ts index e1b3170b..7a6943c6 100644 --- a/projects/ngx-editor/src/lib/modules/menu/menu.component.ts +++ b/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']; diff --git a/projects/ngx-editor/src/lib/types.ts b/projects/ngx-editor/src/lib/types.ts index f94b01e3..4e174e93 100644 --- a/projects/ngx-editor/src/lib/types.ts +++ b/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;