From ab97336e89919fd2890db7a28f49633b9bfda43e Mon Sep 17 00:00:00 2001
From: Ran Luo <ransixi@gmail.com>
Date: Sun, 27 Oct 2019 00:38:22 +0800
Subject: [PATCH] Feat: add highlight menu item (#1532)

---
 docs/KEYBINDINGS.md                     |  1 +
 src/main/keyboard/shortcutHandler.js    |  1 +
 src/main/menu/templates/format.js       |  8 ++++
 src/muya/lib/assets/styles/index.css    | 55 ++++++++++++++++++-------
 src/muya/lib/config/index.js            |  4 ++
 src/muya/lib/contentState/formatCtrl.js |  3 +-
 6 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/docs/KEYBINDINGS.md b/docs/KEYBINDINGS.md
index da425498..f7b49e23 100644
--- a/docs/KEYBINDINGS.md
+++ b/docs/KEYBINDINGS.md
@@ -110,6 +110,7 @@ Here is an example:
 | `formatStrong`      | <kbd>CmdOrCtrl</kbd>+<kbd>B</kbd>                  | Set the font of the selected text to bold   |
 | `formatEmphasis`    | <kbd>CmdOrCtrl</kbd>+<kbd>I</kbd>                  | Set the font of the selected text to italic |
 | `formatUnderline`   | <kbd>CmdOrCtrl</kbd>+<kbd>U</kbd>                  | Change the selected text to underline       |
+| `highlight`         | <kbd>CmdOrCtrl</kbd>+<kbd>Shift</kbd>+<kbd>H</kbd> | Highlight the selected text by <mark> tag   |
 | `formatInlineCode`  | <kbd>CmdOrCtrl</kbd>+<kbd>`</kbd>                  | Change the selected text to inline code     |
 | `formatInlineMath`  | <kbd>CmdOrCtrl</kbd>+<kbd>Shift</kbd>+<kbd>M</kbd> | Change the selected text to inline math     |
 | `formatStrike`      | <kbd>CmdOrCtrl</kbd>+<kbd>D</kbd>                  | Strike through the selected text            |
diff --git a/src/main/keyboard/shortcutHandler.js b/src/main/keyboard/shortcutHandler.js
index 5fa4db99..2c8fc5a9 100644
--- a/src/main/keyboard/shortcutHandler.js
+++ b/src/main/keyboard/shortcutHandler.js
@@ -84,6 +84,7 @@ class Keybindings {
       ['formatStrong', 'CmdOrCtrl+B'],
       ['formatEmphasis', 'CmdOrCtrl+I'],
       ['formatUnderline', 'CmdOrCtrl+U'],
+      ['highlight', 'Shift+CmdOrCtrl+H'],
       ['formatInlineCode', 'CmdOrCtrl+`'],
       ['formatInlineMath', 'Shift+CmdOrCtrl+M'],
       ['formatStrike', 'CmdOrCtrl+D'],
diff --git a/src/main/menu/templates/format.js b/src/main/menu/templates/format.js
index be65ad3d..fddd1718 100644
--- a/src/main/menu/templates/format.js
+++ b/src/main/menu/templates/format.js
@@ -44,6 +44,14 @@ export default function (keybindings) {
       click (menuItem, browserWindow) {
         actions.format(browserWindow, 'sub')
       }
+    }, {
+      id: 'highlightMenuItem',
+      label: 'Highlight',
+      type: 'checkbox',
+      accelerator: keybindings.getAccelerator('highlight'),
+      click (menuItem, browserWindow) {
+        actions.format(browserWindow, 'mark')
+      }
     }, {
       type: 'separator'
     }, {
diff --git a/src/muya/lib/assets/styles/index.css b/src/muya/lib/assets/styles/index.css
index 2bc5ff32..c8d11b02 100644
--- a/src/muya/lib/assets/styles/index.css
+++ b/src/muya/lib/assets/styles/index.css
@@ -1,9 +1,12 @@
-html {
-  -webkit-font-smoothing: antialiased;
-}
-
-pre {
-  -webkit-font-smoothing: auto;
+@keyframes loading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes highlight {
@@ -18,15 +21,37 @@ pre {
   }
 }
 
-@keyframes loading {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
+html {
+  -webkit-font-smoothing: antialiased;
+}
+
+pre {
+  -webkit-font-smoothing: auto;
+}
+
+mark {
+  display: inline-block;
+  height: 1.2em;
+  line-height: 1.2;
+}
+
+mark::before, 
+mark::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+mark::before {
+  content: " [highlight start] ";
+}
+
+mark::after {
+  content: " [highlight end] ";
 }
 
 #ag-editor-id summary {
diff --git a/src/muya/lib/config/index.js b/src/muya/lib/config/index.js
index 34f66ce0..8112c98c 100644
--- a/src/muya/lib/config/index.js
+++ b/src/muya/lib/config/index.js
@@ -206,6 +206,10 @@ export const FORMAT_MARKER_MAP = {
   sup: {
     open: '<sup>',
     close: '</sup>'
+  },
+  mark: {
+    open: '<mark>',
+    close: '</mark>'
   }
 }
 
diff --git a/src/muya/lib/contentState/formatCtrl.js b/src/muya/lib/contentState/formatCtrl.js
index c94390e5..5027138d 100644
--- a/src/muya/lib/contentState/formatCtrl.js
+++ b/src/muya/lib/contentState/formatCtrl.js
@@ -104,6 +104,7 @@ const addFormat = (type, block, { start, end }) => {
     }
     case 'sub':
     case 'sup':
+    case 'mark':
     case 'u': {
       const MARKER = FORMAT_MARKER_MAP[type]
       const oldText = block.text
@@ -133,7 +134,7 @@ const addFormat = (type, block, { start, end }) => {
 const checkTokenIsInlineFormat = token => {
   const { type, tag } = token
   if (FORMAT_TYPES.includes(type)) return true
-  if (type === 'html_tag' && /^(?:u|sub|sup)$/i.test(tag)) return true
+  if (type === 'html_tag' && /^(?:u|sub|sup|mark)$/i.test(tag)) return true
   return false
 }