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 = ( + setAnchorEl(null)}> + handleItemClick("1.0")}>1.0 + handleItemClick("1.1")}>1.1 + handleItemClick("1.2")}>1.2 + handleItemClick("1.3")}>1.3 + handleItemClick("1.4")}>1.4 + handleItemClick("1.5")}>1.5 + handleItemClick("1.6")}>1.6 (default) + handleItemClick("2.0")}>2.0 + handleItemClick("2.5")}>2.5 + handleItemClick("3.0")}>3.0 + + ) + + 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 => { +