feat: add check icon to indicate current line spacing of selection

src/components/buttons/LineSpacingButton.tsx

@@ -1,12 +1,28 @@
 import React, { MouseEvent } from "react"
 import { Transforms } from "slate"
 import { useSlate } from "slate-react"
+import { makeStyles } from "@material-ui/core/styles"
 import Menu from "@material-ui/core/Menu"
 import MenuItem from "@material-ui/core/MenuItem"
 import IconButton from "@material-ui/core/IconButton"
 import Tooltip from "@material-ui/core/Tooltip"
+import CheckIcon from "../icons/CheckIcon"
 import { types } from "../../constants/types"
 import { LineSpacingList } from "../../utils/dropdownValues"
+import getLineSpacing from "../../utils/getLineSpacing"
+
+const useStyles = makeStyles(() => ({
+  menuItem: {
+    display: "flex",
+    justifyContent: "flex-end",
+    width: "75px",
+  },
+  icon: {
+    "&:hover": {
+      backgroundColor: "transparent",
+    },
+  },
+}))
 
 type Props = {
   /** Icon to display in button */
@@ -19,6 +35,7 @@ type Props = {
  */
 const LineSpacingButton = ({ icon }: Props) => {
   const editor = useSlate()
+  const classes = useStyles()
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
 
   const handleItemClick = (item: string) => {
@@ -50,11 +67,20 @@ const LineSpacingButton = ({ icon }: Props) => {
         open={Boolean(anchorEl)}
         MenuListProps={{ disablePadding: true }}
         onClose={() => setAnchorEl(null)}>
-        {LineSpacingList.map((item: string, index: number) => (
-          <MenuItem key={index} onClick={() => handleItemClick(item)}>
-            {item}
-          </MenuItem>
-        ))}
+        {LineSpacingList.map((item: string, index: number) => {
+          const currentLineSpacing = getLineSpacing(editor)
+          return (
+            <MenuItem
+              key={index}
+              onClick={() => handleItemClick(item)}
+              className={classes.menuItem}>
+              <IconButton size="small" className={classes.icon}>
+                {currentLineSpacing === item && <CheckIcon />}
+              </IconButton>
+              {item}
+            </MenuItem>
+          )
+        })}
       </Menu>
     </React.Fragment>
   )

src/components/icons/CheckIcon.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import SvgIcon from "@material-ui/core/SvgIcon"
+
+const CheckIcon = () => {
+  return (
+    <SvgIcon>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+    </SvgIcon>
+  )
+}
+
+export default CheckIcon

src/utils/dropdownValues.ts

@@ -21,6 +21,6 @@ const FontSizeList = [
   "2rem",
 ]
 
-const LineSpacingList = ["1.0", "1.15", "1.5", "2.0", "2.5", "3.0"]
+const LineSpacingList = ["1.0", "1.2", "1.5", "2.0", "2.5", "3.0"]
 
 export { FontFamilyList, FontSizeList, LineSpacingList }

src/utils/getLineSpacing.ts

@@ -0,0 +1,20 @@
+import { Editor, Path, Node } from "slate"
+
+/**
+ * getLineSpacing is a helper function that finds the line spacing for the currently
+ * selected node.
+ */
+const getLineSpacing = (editor: Editor) => {
+  if (!editor.selection) {
+    return "1.5"
+  }
+
+  // need to get the parent path in order to get the parent node above this selection
+  const currentPath = editor.selection.anchor.path
+  const parentPath = Path.parent(currentPath)
+  const node = Node.get(editor, parentPath)
+
+  return node.lineSpacing || "1.5"
+}
+
+export default getLineSpacing