Added fix for cybersemics#2060 button formatting issues

src/@types/Shortcut.ts

@@ -49,7 +49,7 @@ interface Shortcut {
   id: ShortcutId
 
   /** A function that returns true if the shortcut should be highlighted in the Toolbar. */
-  isActive?: (getState: () => State) => boolean
+  isActive?: (getState: () => State, getCommandState?: () => Record<string, boolean | undefined>) => boolean
 
   /** When true, a small open dropdown indicator will be rendered beneath the icon. */
   isDropdownOpen?: (getState: () => State) => boolean

src/components/ToolbarButton.tsx

@@ -54,11 +54,18 @@ const ToolbarButtonComponent: FC<DraggableToolbarButtonProps> = ({
     throw new Error('The svg property is required to render a shortcut in the Toolbar. ' + shortcutId)
   }
 
-  const commandState = commandStateStore.useSelector(state => state[shortcutId])
+  const commandState = commandStateStore.useSelector(state => state)
   const isDraggingAny = useSelector(state => !!state.dragShortcut)
   const dragShortcutZone = useSelector(state => state.dragShortcutZone)
-  const isButtonActive =
-    useSelector(state => (customize ? selected : !isActive || isActive(() => state))) || (!customize && commandState)
+  const isButtonActive = useSelector(state => {
+    customize
+      ? selected
+      : !isActive ||
+        isActive(
+          () => state,
+          () => commandState,
+        )
+  })
   const buttonError = useSelector(state => (!customize && shortcut.error ? shortcut.error(() => state) : null))
   const isButtonExecutable = useSelector(state => customize || !canExecute || canExecute(() => state))
   const dropToRemove = isDragging && dragShortcutZone === DragShortcutZone.Remove

src/shortcuts/bold.ts

@@ -17,11 +17,9 @@ const bold: Shortcut = {
   exec: dispatch => {
     dispatch(formatSelection('bold'))
   },
-  isActive: getState => {
-    const state = getState()
-    if (!state.cursor) return false
-    const thought = getThoughtById(state, head(state.cursor))
-    return thought.value.includes('<b>') || thought.value.includes('<strong>')
+  isActive: (getState, getCommandState) => {
+    const commandState = getCommandState()
+    return commandState.bold === true
   },
 }
 

src/shortcuts/italic.ts

@@ -17,11 +17,9 @@ const italic: Shortcut = {
   exec: dispatch => {
     dispatch(formatSelection('italic'))
   },
-  isActive: getState => {
-    const state = getState()
-    if (!state.cursor) return false
-    const thought = getThoughtById(state, head(state.cursor))
-    return thought.value.includes('<i>') || thought.value.includes('<em>')
+  isActive: (getState, getCommandState) => {
+    const commandState = getCommandState()
+    return commandState.italic === true
   },
 }
 

src/shortcuts/strikethrough.ts

@@ -18,11 +18,9 @@ const strikethrough: Shortcut = {
     e.preventDefault()
     dispatch(formatSelection('strikethrough'))
   },
-  isActive: getState => {
-    const state = getState()
-    if (!state.cursor) return false
-    const thought = getThoughtById(state, head(state.cursor))
-    return thought.value.includes('<strike>')
+  isActive: (getState, getCommandState) => {
+    const commandState = getCommandState()
+    return commandState.strikethrough === true
   },
 }
 

src/shortcuts/underline.ts

@@ -17,11 +17,9 @@ const underline: Shortcut = {
   exec: dispatch => {
     dispatch(formatSelection('underline'))
   },
-  isActive: getState => {
-    const state = getState()
-    if (!state.cursor) return false
-    const thought = getThoughtById(state, head(state.cursor))
-    return thought.value.includes('<u>')
+  isActive: (getState, getCommandState) => {
+    const commandState = getCommandState()
+    return commandState.underline === true
   },
 }