feat: add subscript button to editor toolbar

#122

src/components/editor/PageEditor.js

@@ -25,6 +25,7 @@ import { FontColorMark } from "./plugins/fontcolor"
 import { FontFamilyMark } from "./plugins/fontfamily"
 import { FontSizeMark } from "./plugins/fontsize"
 import { ItalicMark } from "./plugins/italic"
+import { SubscriptMark } from "./plugins/subscript"
 import { StrikethroughMark } from "./plugins/strikethrough"
 import { UnderlineMark } from "./plugins/underline"
 
@@ -52,6 +53,7 @@ import { ItalicPlugin } from "./plugins/italic"
 import { LinkPlugin } from "./plugins/link"
 import { ListPlugin } from "./plugins/list"
 import { StrikethroughPlugin } from "./plugins/strikethrough"
+import { SubscriptPlugin } from "./plugins/subscript"
 import { TablePlugin } from "./plugins/table"
 import { UnderlinePlugin } from "./plugins/underline"
 
@@ -83,6 +85,7 @@ const plugins = [
   LinkPlugin(),
   ListPlugin,
   StrikethroughPlugin(),
+  SubscriptPlugin(),
   TablePlugin,
   UnderlinePlugin(),
 ]
@@ -111,6 +114,8 @@ export const renderMark = (props: markProps) => {
       return <ItalicMark {...props} />
     case "strikethrough":
       return <StrikethroughMark {...props} />
+    case "subscript":
+      return <SubscriptMark {...props} />
     case "underline":
       return <UnderlineMark {...props} />
 

src/components/editor/plugins/subscript.js

@@ -0,0 +1,53 @@
+import React from "react"
+import Tooltip from "@material-ui/core/Tooltip"
+import FontAwesome from "react-fontawesome"
+
+import ToolbarButton from "../toolbar/ToolbarButton"
+import { isMod } from "../utils/utils"
+
+/**
+ * Function that toggles the mark type.
+ */
+const subscriptMarkStrategy = change => change.toggleMark("subscript")
+
+/**
+ * Rendering component that provides the actual HTML to use inside the editor.
+ */
+const SubscriptMark = ({ children }) => <sub>{children}</sub>
+
+/**
+ * Subscript button that uses a click handler to connect the button to the editor.
+ */
+const SubscriptButton = ({ value, onChange }) => (
+  <Tooltip title="subscript (ctrl+=)" placement="bottom">
+    <ToolbarButton
+      onClick={e => {
+        onChange(subscriptMarkStrategy(value.change()))
+      }}>
+      <FontAwesome name="subscript" />
+    </ToolbarButton>
+  </Tooltip>
+)
+
+/**
+ * Function that specifies the keyboard shortcut to use for subscript.
+ * It accepts event and change as arguments.
+ */
+const SubscriptKeyboardShortcut = (event, change) => {
+  if (isMod(event) && event.key === "=") {
+    return subscriptMarkStrategy(change)
+  }
+  return
+}
+
+/**
+ * Function that represents our actual plugin.
+ * It takes options in case we want to add more to it in the future.
+ */
+const SubscriptPlugin = options => ({
+  onKeyDown(...args) {
+    return SubscriptKeyboardShortcut(...args)
+  },
+})
+
+export { SubscriptPlugin, SubscriptMark, SubscriptButton }

src/components/editor/toolbar/EditorToolbar.js

@@ -15,6 +15,7 @@ import { showHelpModal, showTableOptions } from "actions/editorToolbar"
 import { BoldButton } from "../plugins/bold"
 import { ItalicButton } from "../plugins/italic"
 import { StrikethroughButton } from "../plugins/strikethrough"
+import { SubscriptButton } from "../plugins/subscript"
 import { UnderlineButton } from "../plugins/underline"
 
 import {
@@ -102,6 +103,7 @@ export const EditorToolbar = props => {
               <ItalicButton {...props} />
               <UnderlineButton {...props} />
               <StrikethroughButton {...props} />
+              <SubscriptButton {...props} />
               <AlignmentLeftButton {...props} />
               <AlignmentCenterButton {...props} />
               <AlignmentRightButton {...props} />