#3762: Add keyboard shortcuts for toolbar

NCI-Agency · Oct 14, 2021 · ad75e30 · ad75e30
1 parent d3d8411
commit ad75e30
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 7 deletions.
diff --git a/client/src/components/RichTextEditor.js b/client/src/components/RichTextEditor.js
@@ -1,7 +1,7 @@
 import LinkAnet from "components/editor/LinkAnet"
 import LinkAnetEntity from "components/editor/LinkAnetEntity"
 import "components/editor/RichTextEditor.css"
-import Toolbar from "components/editor/Toolbar"
+import Toolbar, { handleOnKeyDown } from "components/editor/Toolbar"
 import escapeHtml from "escape-html"
 import { debounce } from "lodash"
 import _isEmpty from "lodash/isEmpty"
@@ -21,6 +21,7 @@ import {
 import { getUrlFromEntityInfo } from "utils_links"
 
 const RichTextEditor = ({ value, onChange, onHandleBlur, className }) => {
+  const [showLinksModal, setShowLinksModal] = useState(false)
   const editor = useMemo(
     () => withHtml(withReact(withHistory(withAnetLink(createEditor())))),
     []
@@ -45,11 +46,15 @@ const RichTextEditor = ({ value, onChange, onHandleBlur, className }) => {
         }}
       >
         <div className="editor-container">
-          <Toolbar />
+          <Toolbar
+            showLinksModal={showLinksModal}
+            setShowLinksModal={setShowLinksModal}
+          />
           <Editable
             renderElement={renderElement}
             renderLeaf={renderLeaf}
             onBlur={onHandleBlur}
+            onKeyDown={e => handleOnKeyDown(e, editor, setShowLinksModal)}
             className="editable"
           />
         </div>

diff --git a/client/src/components/editor/Toolbar.js b/client/src/components/editor/Toolbar.js
@@ -1,6 +1,6 @@
 import { Icon } from "@blueprintjs/core"
 import PropTypes from "prop-types"
-import React, { useRef, useState } from "react"
+import React, { useRef } from "react"
 import { Editor, Transforms } from "slate"
 import { useSlate } from "slate-react"
 import LinkSourceAnet from "./LinkSourceAnet"
@@ -13,10 +13,9 @@ const BUTTON_TYPES = {
   MODAL: "modal"
 }
 
-const Toolbar = () => {
+const Toolbar = ({ showLinksModal, setShowLinksModal }) => {
   const editor = useSlate()
   const selectionRef = useRef(editor.selection)
-  const [showLinksModal, setShowLinksModal] = useState(false)
 
   return (
     <>
@@ -104,7 +103,13 @@ const Toolbar = () => {
   )
 }
 
-function toggleBlock(editor, format) {
+Toolbar.propTypes = {
+  showLinksModal: PropTypes.bool.isRequired,
+  setShowLinksModal: PropTypes.func.isRequired
+}
+
+function toggleBlock(editor, format, event) {
+  event?.preventDefault?.()
   const isActive = isBlockActive(editor, format)
   const isList = LIST_TYPES.includes(format)
 
@@ -131,7 +136,8 @@ function isBlockActive(editor, format) {
   return !!match
 }
 
-function toggleMark(editor, format) {
+function toggleMark(editor, format, event) {
+  event?.preventDefault?.()
   if (isMarkActive(editor, format)) {
     Editor.removeMark(editor, format)
   } else {
@@ -205,4 +211,63 @@ EditorToggleButton.propTypes = {
   onClick: PropTypes.func
 }
 
+export const handleOnKeyDown = (event, editor, setShowLinksModal) => {
+  const key = event.key
+  if (event.altKey) {
+    switch (key) {
+      case "1":
+        toggleBlock(editor, "heading-one", event)
+        break
+      case "2":
+        toggleBlock(editor, "heading-two", event)
+        break
+      case "3":
+        toggleBlock(editor, "heading-three", event)
+        break
+      case "n":
+        toggleBlock(editor, "numbered-list", event)
+        break
+      case "b":
+        toggleBlock(editor, "bulleted-list", event)
+        break
+      case "q":
+        toggleBlock(editor, "block-quote", event)
+        break
+      default:
+        break
+    }
+  }
+  if (event.ctrlKey) {
+    switch (key) {
+      case "b":
+        toggleMark(editor, "bold", event)
+        break
+      case "i":
+        toggleMark(editor, "italic", event)
+        break
+      case "u":
+        toggleMark(editor, "underline", event)
+        break
+      case "X":
+        toggleMark(editor, "strikethrough", event)
+        break
+      case "K":
+        event.preventDefault()
+        setShowLinksModal(true)
+        break
+      case "y":
+      case "Z":
+        event.preventDefault()
+        editor.redo()
+        break
+      case "z":
+        event.preventDefault()
+        editor.undo()
+        break
+      default:
+        break
+    }
+  }
+}
+
 export default Toolbar