feat: add line spacing button to editor toolbar

fix #128

src/components/editor/PageEditor.js

@@ -35,6 +35,7 @@ import { AlignmentNode } from "./plugins/alignment"
 import { DividerNode } from "./plugins/divider"
 import { H1Node, H2Node, H3Node } from "./plugins/heading"
 import { ImageNode } from "./plugins/image"
+import { LineSpacingNode } from "./plugins/linespacing"
 import { LinkNode } from "./plugins/link"
 import {
   ListItemNode,
@@ -153,6 +154,8 @@ export const renderNode = (props: nodeProps) => {
       return <H3Node {...props} />
     case "image":
       return <ImageNode {...props} />
+    case "line-spacing":
+      return <LineSpacingNode {...props} />
     case "link":
       return <LinkNode {...props} />
     case "list-item":

src/components/editor/plugins/linespacing.js

@@ -0,0 +1,80 @@
+// @flow
+import React from "react"
+import Tooltip from "@material-ui/core/Tooltip"
+import Menu from "@material-ui/core/Menu"
+import MenuItem from "@material-ui/core/MenuItem"
+import ToolbarButton from "../toolbar/ToolbarButton"
+import LineSpacingIcon from "@material-ui/icons/FormatLineSpacing"
+
+/**
+ * Functions to set the line spacing blocks.
+ */
+const lineSpacingNodeStrategy = (value, size) =>
+  value
+    .change()
+    .unwrapBlock("line-spacing")
+    .wrapBlock({
+      type: "line-spacing",
+      data: { size },
+    })
+
+/**
+ * Rendering components that provide the actual HTML to use inside the editor.
+ */
+const LineSpacingNode = ({ children, attributes, node: { data } }) => (
+  <div style={{ lineHeight: `${data.get("size")}` }} {...attributes}>
+    {children}
+  </div>
+)
+
+/**
+ * Dropdown component that connects to the editor.
+ */
+const LineSpacingButton = ({ value, onChange }) => {
+  const [anchorEl, setAnchorEl] = React.useState(null)
+
+  const handleMenuOpen = event => {
+    setAnchorEl(event.currentTarget)
+  }
+  const handleItemClick = size => {
+    setAnchorEl(null)
+    onChange(lineSpacingNodeStrategy(value, size))
+  }
+
+  const renderMenu = (
+    <Menu
+      anchorEl={anchorEl}
+      open={Boolean(anchorEl)}
+      onClose={() => setAnchorEl(null)}>
+      <MenuItem onClick={() => handleItemClick("1.0")}>1.0</MenuItem>
+      <MenuItem onClick={() => handleItemClick("1.1")}>1.1</MenuItem>
+      <MenuItem onClick={() => handleItemClick("1.2")}>1.2</MenuItem>
+      <MenuItem onClick={() => handleItemClick("1.3")}>1.3</MenuItem>
+      <MenuItem onClick={() => handleItemClick("1.4")}>1.4</MenuItem>
+      <MenuItem onClick={() => handleItemClick("1.5")}>1.5</MenuItem>
+      <MenuItem onClick={() => handleItemClick("1.6")}>1.6 (default)</MenuItem>
+      <MenuItem onClick={() => handleItemClick("2.0")}>2.0</MenuItem>
+      <MenuItem onClick={() => handleItemClick("2.5")}>2.5</MenuItem>
+      <MenuItem onClick={() => handleItemClick("3.0")}>3.0</MenuItem>
+    </Menu>
+  )
+
+  return (
+    <>
+      <Tooltip title="Line Spacing" placement="bottom">
+        <ToolbarButton
+          onClick={handleMenuOpen}
+          aria-owns={anchorEl ? "line-spacing-menu" : undefined}
+          aria-haspopup="true">
+          <LineSpacingIcon />
+        </ToolbarButton>
+      </Tooltip>
+      {renderMenu}
+    </>
+  )
+}
+
+/**
+ * Export everything needed for the editor.
+ */
+export { LineSpacingNode, LineSpacingButton }

src/components/editor/toolbar/EditorToolbar.js

@@ -31,6 +31,7 @@ import { FontFamilyDropdown } from "../plugins/fontfamily"
 import { FontSizeDropdown } from "../plugins/fontsize"
 import { H1Button, H2Button, H3Button } from "../plugins/heading"
 import { ImageButton } from "../plugins/image"
+import { LineSpacingButton } from "../plugins/linespacing"
 import { LinkButton } from "../plugins/link"
 import { OrderedListButton, UnorderedListButton } from "../plugins/list"
 import {
@@ -120,6 +121,7 @@ export const EditorToolbar = props => {
               <DividerButton {...props} />
               <UnorderedListButton {...props} />
               <OrderedListButton {...props} />
+              <LineSpacingButton {...props} />
               <H1Button {...props} />
               <H2Button {...props} />
               <H3Button {...props} />