Hide air popover in code view (summernote#3609)

* feature: hide popover when codeview activated * feature: add codeView escape
hibratt · Feb 22, 2020 · 4be52ec · 4be52ec
1 parent f5113a5
commit 4be52ec
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 1 deletion.
diff --git a/src/js/base/core/key.js b/src/js/base/core/key.js
@@ -5,6 +5,7 @@ const KEY_MAP = {
   'BACKSPACE': 8,
   'TAB': 9,
   'ENTER': 13,
+  'ESCAPE': 27,
   'SPACE': 32,
   'DELETE': 46,
 

diff --git a/src/js/base/module/AirPopover.js b/src/js/base/module/AirPopover.js
@@ -92,6 +92,13 @@ export default class AirPopover {
     }
   }
 
+  updateCodeview(isCodeview) {
+    this.ui.toggleBtnActive(this.$popover.find('.btn-codeview'), isCodeview);
+    if (isCodeview) {
+      this.hide();
+    } 
+  }
+
   hide() {
     if (this.hidable) {
       this.$popover.hide();

diff --git a/src/js/base/module/Codeview.js b/src/js/base/module/Codeview.js
@@ -1,5 +1,6 @@
-import env from '../core/env';
 import dom from '../core/dom';
+import env from '../core/env';
+import key from '../core/key';
 
 let CodeMirror;
 if (env.hasCodeMirror) {
@@ -25,6 +26,14 @@ export default class CodeView {
     }
   }
 
+  initialize() {
+    this.$codable.on('keyup', (event) => {
+      if (event.keyCode === key.code.ESCAPE) {
+        this.deactivate();
+      } 
+    });
+  }
+
   /**
    * @return {Boolean}
    */
@@ -82,6 +91,8 @@ export default class CodeView {
     this.$codable.height(this.$editable.height());
 
     this.context.invoke('toolbar.updateCodeview', true);
+    this.context.invoke('airPopover.updateCodeview', true);
+
     this.$editor.addClass('codeview');
     this.$codable.focus();
 
@@ -143,6 +154,7 @@ export default class CodeView {
     this.$editable.focus();
 
     this.context.invoke('toolbar.updateCodeview', false);
+    this.context.invoke('airPopover.updateCodeview', false);
   }
 
   destroy() {

diff --git a/src/js/base/module/Editor.js b/src/js/base/module/Editor.js
@@ -37,6 +37,7 @@ export default class Editor {
     this.bullet = new Bullet();
     this.history = new History(context);
 
+    this.context.memo('help.escape', this.lang.help.escape);
     this.context.memo('help.undo', this.lang.help.undo);
     this.context.memo('help.redo', this.lang.help.redo);
     this.context.memo('help.tab', this.lang.help.tab);

diff --git a/src/js/base/settings.js b/src/js/base/settings.js
@@ -246,6 +246,7 @@ $.summernote = $.extend($.summernote, {
 
     keyMap: {
       pc: {
+        'ESC': 'escape',
         'ENTER': 'insertParagraph',
         'CTRL+Z': 'undo',
         'CTRL+Y': 'redo',
@@ -276,6 +277,7 @@ $.summernote = $.extend($.summernote, {
       },
 
       mac: {
+        'ESC': 'escape',
         'ENTER': 'insertParagraph',
         'CMD+Z': 'undo',
         'CMD+SHIFT+Z': 'redo',

diff --git a/src/js/base/summernote-en-US.js b/src/js/base/summernote-en-US.js
@@ -123,6 +123,7 @@ $.extend($.summernote.lang, {
       extraKeys: 'Extra keys',
     },
     help: {
+      'escape': 'Escape',
       'insertParagraph': 'Insert Paragraph',
       'undo': 'Undoes the last command',
       'redo': 'Redoes the last command',