feat: add superscript button to editor toolbar

fix #122

src/components/editor/PageEditor.js

@@ -25,8 +25,9 @@ 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 { SubscriptMark } from "./plugins/subscript"
+import { SuperscriptMark } from "./plugins/superscript"
 import { UnderlineMark } from "./plugins/underline"
 
 /** Import node renderers */
@@ -54,6 +55,7 @@ import { LinkPlugin } from "./plugins/link"
 import { ListPlugin } from "./plugins/list"
 import { StrikethroughPlugin } from "./plugins/strikethrough"
 import { SubscriptPlugin } from "./plugins/subscript"
+import { SuperscriptPlugin } from "./plugins/superscript"
 import { TablePlugin } from "./plugins/table"
 import { UnderlinePlugin } from "./plugins/underline"
 
@@ -86,6 +88,7 @@ const plugins = [
   ListPlugin,
   StrikethroughPlugin(),
   SubscriptPlugin(),
+  SuperscriptPlugin(),
   TablePlugin,
   UnderlinePlugin(),
 ]
@@ -116,6 +119,8 @@ export const renderMark = (props: markProps) => {
       return <StrikethroughMark {...props} />
     case "subscript":
       return <SubscriptMark {...props} />
+    case "superscript":
+      return <SuperscriptMark {...props} />
     case "underline":
       return <UnderlineMark {...props} />
 

src/components/editor/plugins/superscript.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 superscriptMarkStrategy = change => change.toggleMark("superscript")
+
+/**
+ * Rendering component that provides the actual HTML to use inside the editor.
+ */
+const SuperscriptMark = ({ children }) => <sup>{children}</sup>
+
+/**
+ * Superscript button that uses a click handler to connect the button to the editor.
+ */
+const SuperscriptButton = ({ value, onChange }) => (
+  <Tooltip title="superscript (ctrl+/)" placement="bottom">
+    <ToolbarButton
+      onClick={e => {
+        onChange(superscriptMarkStrategy(value.change()))
+      }}>
+      <FontAwesome name="superscript" />
+    </ToolbarButton>
+  </Tooltip>
+)
+
+/**
+ * Function that specifies the keyboard shortcut to use for superscript.
+ * It accepts event and change as arguments.
+ */
+const SuperscriptKeyboardShortcut = (event, change) => {
+  if (isMod(event) && event.key === "/") {
+    return superscriptMarkStrategy(change)
+  }
+  return
+}
+
+/**
+ * Function that represents our actual plugin.
+ * It takes options in case we want to add more to it in the future.
+ */
+const SuperscriptPlugin = options => ({
+  onKeyDown(...args) {
+    return SuperscriptKeyboardShortcut(...args)
+  },
+})
+
+export { SuperscriptPlugin, SuperscriptMark, SuperscriptButton }

src/components/editor/toolbar/EditorToolbar.js

@@ -16,6 +16,7 @@ import { BoldButton } from "../plugins/bold"
 import { ItalicButton } from "../plugins/italic"
 import { StrikethroughButton } from "../plugins/strikethrough"
 import { SubscriptButton } from "../plugins/subscript"
+import { SuperscriptButton } from "../plugins/superscript"
 import { UnderlineButton } from "../plugins/underline"
 
 import {
@@ -104,6 +105,7 @@ export const EditorToolbar = props => {
               <UnderlineButton {...props} />
               <StrikethroughButton {...props} />
               <SubscriptButton {...props} />
+              <SuperscriptButton {...props} />
               <AlignmentLeftButton {...props} />
               <AlignmentCenterButton {...props} />
               <AlignmentRightButton {...props} />