Merge pull request #91 from unicef/feature/change-icon-in-click-control

PR to change link icon when active link

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicef/material-slate",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Material UI rich text editor based on Slate for react",
   "main": "./dist/index.js",
   "homepage": "https://unicef.github.io/material-slate",

src/components/Buttons/LinkButton.jsx

@@ -4,7 +4,7 @@ import { useSlate } from 'slate-react'
 import ToolbarButton from './ToolbarButton'
 import LinkIcon from '@material-ui/icons/Link'
 import SimpleDialog from '../SimpleDialog'
-
+import LinkOff from '@material-ui/icons/LinkOff'
 /**
  * Toolbar button for adding links
  *
@@ -16,6 +16,8 @@ export default function LinkButton({ ref, onMouseDown, ...props }) {
     console.error('withLinks() is not initialized')
   // Handles the dialog that is opened upon clicking the Link Toolbar/HoveringBar button
   const [openLinkDialog, setOpenLinkDialog] = useState(false)
+  // Check if a link is active in the current selection
+  const isLinkActive = editor.isNodeTypeActive('link')
 
   // Handles custom buttons click
   const onLinkButtonDown = ({ editor, ...props }) => {
@@ -39,9 +41,9 @@ export default function LinkButton({ ref, onMouseDown, ...props }) {
   return (
     <React.Fragment>
       <ToolbarButton
-        icon={<LinkIcon />}
+        icon={isLinkActive ? <LinkOff /> : <LinkIcon />}
         type="link"
-        tooltip="Add link"
+        tooltip={isLinkActive ? 'Remove link' : 'Add link'}
         format="link"
         ref={ref}
         onMouseDown={event => onLinkButtonDown(event)}