feat: undo redo - menu

examples/index.html

@@ -7,7 +7,7 @@
   <style>
     #editor-container {
         border:  1px solid #ccc;
-        width: 600px;
+        width: 800px;
     }
   </style>
   <link href="../packages/editor/dist/css/style.css" rel="stylesheet">

packages/basic/src/index.ts

@@ -17,6 +17,7 @@ import fontSizeAndFamily from './modules/font-size-family'
 import indent from './modules/indent'
 import justify from './modules/justify'
 import lineHeight from './modules/line-height'
+import undoRedo from './modules/undo-redo'
 
 export {
   simpleStyle,
@@ -31,4 +32,5 @@ export {
   indent,
   justify,
   lineHeight,
+  undoRedo,
 }

packages/basic/src/modules/_helpers/icon-svg.ts

@@ -102,3 +102,11 @@ export const JUSTIFY_CENTER_SVG =
 // 行高
 export const LINE_HEIGHT_SVG =
   '<svg viewBox="0 0 1024 1024"><path d="M964 788a8 8 0 0 1 8 8v98a8 8 0 0 1-8 8H438a8 8 0 0 1-8-8v-98a8 8 0 0 1 8-8h526zM198.93 144.306c6.668-5.798 16.774-5.094 22.573 1.574l122.26 140.582a16 16 0 0 1 3.927 10.5c0 8.836-7.164 16-16 16h-61.8a8 8 0 0 0-8 8v390.077h69.819a16 16 0 0 1 10.502 3.928c6.666 5.8 7.37 15.906 1.57 22.573L221.476 878.123a16 16 0 0 1-1.57 1.57c-6.668 5.8-16.774 5.097-22.574-1.57L75.051 737.538a16 16 0 0 1-3.928-10.5c0-8.837 7.163-16 16-16h69.822V312.96H87.127a16 16 0 0 1-10.502-3.928c-6.666-5.8-7.37-15.906-1.57-22.573l122.303-140.582a16 16 0 0 1 1.572-1.572zM964 465a8 8 0 0 1 8 8v98a8 8 0 0 1-8 8H438a8 8 0 0 1-8-8v-98a8 8 0 0 1 8-8h526z m0-323a8 8 0 0 1 8 8v98a8 8 0 0 1-8 8H438a8 8 0 0 1-8-8v-98a8 8 0 0 1 8-8h526z"></path></svg>'
+
+// 撤销
+export const UNDO_SVG =
+  '<svg viewBox="0 0 1024 1024"><path d="M512 64A510.272 510.272 0 0 0 149.984 213.984L0.032 64v384h384L240.512 304.48A382.784 382.784 0 0 1 512.032 192c212.064 0 384 171.936 384 384 0 114.688-50.304 217.632-130.016 288l84.672 96a510.72 510.72 0 0 0 173.344-384c0-282.784-229.216-512-512-512z"></path></svg>'
+
+// 重做
+export const REDO_SVG =
+  '<svg viewBox="0 0 1024 1024"><path d="M0.00032 576a510.72 510.72 0 0 0 173.344 384l84.672-96A383.136 383.136 0 0 1 128.00032 576C128.00032 363.936 299.93632 192 512.00032 192c106.048 0 202.048 42.976 271.52 112.48L640.00032 448h384V64l-149.984 149.984A510.272 510.272 0 0 0 512.00032 64C229.21632 64 0.00032 293.216 0.00032 576z"></path></svg>'

packages/basic/src/modules/undo-redo/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @description undo redo
+ * @author wangfupeng
+ */
+
+import { IModuleConf } from '@wangeditor/core'
+import { redoMenuConf, undoMenuConf } from './menu/index'
+
+const undoRedo: IModuleConf = {
+  menus: [redoMenuConf, undoMenuConf],
+}
+
+export default undoRedo

packages/basic/src/modules/undo-redo/menu/RedoMenu.ts

@@ -0,0 +1,36 @@
+/**
+ * @description redo menu
+ * @author wangfupeng
+ */
+
+import { IButtonMenu, IDomEditor } from '@wangeditor/core'
+import { REDO_SVG } from '../../_helpers/icon-svg'
+
+class RedoMenu implements IButtonMenu {
+  title = '重做'
+  iconSvg = REDO_SVG
+  tag = 'button'
+
+  getValue(editor: IDomEditor): string | boolean {
+    return ''
+  }
+
+  isActive(editor: IDomEditor): boolean {
+    return false
+  }
+
+  isDisabled(editor: IDomEditor): boolean {
+    if (editor.selection == null) return true
+    return false
+  }
+
+  exec(editor: IDomEditor, value: string | boolean) {
+    // @ts-ignore
+    if (typeof editor.redo === 'function') {
+      // @ts-ignore
+      editor.redo()
+    }
+  }
+}
+
+export default RedoMenu

packages/basic/src/modules/undo-redo/menu/UndoMenu.ts

@@ -0,0 +1,36 @@
+/**
+ * @description undo menu
+ * @author wangfupeng
+ */
+
+import { IButtonMenu, IDomEditor } from '@wangeditor/core'
+import { UNDO_SVG } from '../../_helpers/icon-svg'
+
+class UndoMenu implements IButtonMenu {
+  title = '撤销'
+  iconSvg = UNDO_SVG
+  tag = 'button'
+
+  getValue(editor: IDomEditor): string | boolean {
+    return ''
+  }
+
+  isActive(editor: IDomEditor): boolean {
+    return false
+  }
+
+  isDisabled(editor: IDomEditor): boolean {
+    if (editor.selection == null) return true
+    return false
+  }
+
+  exec(editor: IDomEditor, value: string | boolean) {
+    // @ts-ignore
+    if (typeof editor.undo === 'function') {
+      // @ts-ignore
+      editor.undo()
+    }
+  }
+}
+
+export default UndoMenu

packages/basic/src/modules/undo-redo/menu/index.ts

@@ -0,0 +1,21 @@
+/**
+ * @description menu entry
+ * @author wangfupeng
+ */
+
+import RedoMenu from './RedoMenu'
+import UndoMenu from './UndoMenu'
+
+export const undoMenuConf = {
+  key: 'undo',
+  factory() {
+    return new UndoMenu()
+  },
+}
+
+export const redoMenuConf = {
+  key: 'redo',
+  factory() {
+    return new RedoMenu()
+  },
+}

packages/editor/src/index.ts

@@ -29,6 +29,7 @@ import {
   indent,
   justify,
   lineHeight,
+  undoRedo,
 } from '@wangeditor/basic'
 import { INDENT_RIGHT_SVG, JUSTIFY_LEFT_SVG } from './constants/svg'
 
@@ -139,6 +140,11 @@ if (lineHeight.menus && lineHeight.menus.length) {
   lineHeight.menus.forEach(menuConf => registerMenu(menuConf))
 }
 
+// --------------------- 注册 undoRedo module ---------------------
+if (undoRedo.menus && undoRedo.menus.length) {
+  undoRedo.menus.forEach(menuConf => registerMenu(menuConf))
+}
+
 // --------------------- 创建 editor 实例 ---------------------
 let editor = createEditor(
   'editor-container',
@@ -182,6 +188,9 @@ let editor = createEditor(
       'deleteImage',
       'editImage',
       'viewImageLink',
+      '|',
+      'undo',
+      'redo',
     ],
 
     // hover bar