diff --git a/src/components/editor/PageEditor.js b/src/components/editor/PageEditor.js
index 9ea953337..0517d1d09 100644
--- a/src/components/editor/PageEditor.js
+++ b/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
case "image":
return
+ case "line-spacing":
+ return
case "link":
return
case "list-item":
diff --git a/src/components/editor/plugins/linespacing.js b/src/components/editor/plugins/linespacing.js
new file mode 100644
index 000000000..1092a7748
--- /dev/null
+++ b/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 } }) => (
+
+ {children}
+
+)
+
+/**
+ * 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 = (
+
+ )
+
+ return (
+ <>
+
+
+
+
+
+ {renderMenu}
+ >
+ )
+}
+
+/**
+ * Export everything needed for the editor.
+ */
+export { LineSpacingNode, LineSpacingButton }
diff --git a/src/components/editor/toolbar/EditorToolbar.js b/src/components/editor/toolbar/EditorToolbar.js
index 25ea18425..2301443fe 100644
--- a/src/components/editor/toolbar/EditorToolbar.js
+++ b/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 => {
+