feat: Added "Highlight" option to Super formatting toolbars

packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx

@@ -87,6 +87,7 @@ export const IconNameToSvgMapping = {
   diamond: icons.DiamondIcon,
   download: icons.DownloadIcon,
   drag: icons.DragIcon,
+  draw: icons.DrawIcon,
   editor: icons.EditorIcon,
   email: icons.EmailIcon,
   evernote: icons.EvernoteIcon,

packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugins/FloatingTextFormatToolbarPlugin.tsx

@@ -38,6 +38,7 @@ import {
   SubscriptIcon,
   ListBulleted,
   ListNumbered,
+  DrawIcon,
 } from '@standardnotes/icons'
 import { IconComponent } from '../../Lexical/Theme/IconComponent'
 import { classNames } from '@standardnotes/snjs'
@@ -49,6 +50,7 @@ import LinkTextEditor, { $isLinkTextNode } from '../LinkEditor/LinkTextEditor'
 import { URL_REGEX } from '@/Constants/Constants'
 import { useSelectedTextFormatInfo } from './useSelectedTextFormatInfo'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
 
 const IconSize = 15
 
@@ -84,6 +86,7 @@ function TextFormatFloatingToolbar({
   isSuperscript,
   isBulletedList,
   isNumberedList,
+  isHighlighted,
 }: {
   editor: LexicalEditor
   anchorElem: HTMLElement
@@ -100,6 +103,7 @@ function TextFormatFloatingToolbar({
   isUnderline: boolean
   isBulletedList: boolean
   isNumberedList: boolean
+  isHighlighted: boolean
 }) {
   const toolbarRef = useRef<HTMLDivElement | null>(null)
 
@@ -312,7 +316,7 @@ function TextFormatFloatingToolbar({
   return (
     <div
       ref={toolbarRef}
-      className="absolute left-0 top-0 rounded-lg border border-border bg-contrast translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)] translucent-ui:border-[--popover-border-color] px-2 py-1 shadow-sm shadow-contrast"
+      className="absolute left-0 top-0 rounded-lg border border-border bg-contrast px-2 py-1 shadow-sm shadow-contrast translucent-ui:border-[--popover-border-color] translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)]"
     >
       {isLinkText && !isAutoLink && (
         <>
@@ -338,6 +342,7 @@ function TextFormatFloatingToolbar({
       )}
       {isText && (
         <div className="flex gap-1">
+          <StyledTooltip label="Bold">
             <ToolbarButton
               active={isBold}
               onClick={() => {
@@ -349,6 +354,8 @@ function TextFormatFloatingToolbar({
                 <BoldIcon />
               </IconComponent>
             </ToolbarButton>
+          </StyledTooltip>
+          <StyledTooltip label="Italicize">
             <ToolbarButton
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')
@@ -360,6 +367,8 @@ function TextFormatFloatingToolbar({
                 <ItalicIcon />
               </IconComponent>
             </ToolbarButton>
+          </StyledTooltip>
+          <StyledTooltip label="Underline">
             <ToolbarButton
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')
@@ -371,6 +380,8 @@ function TextFormatFloatingToolbar({
                 <UnderlineIcon />
               </IconComponent>
             </ToolbarButton>
+          </StyledTooltip>
+          <StyledTooltip label="Strikethrough">
             <ToolbarButton
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')
@@ -382,6 +393,8 @@ function TextFormatFloatingToolbar({
                 <StrikethroughIcon />
               </IconComponent>
             </ToolbarButton>
+          </StyledTooltip>
+          <StyledTooltip label="Subscript">
             <ToolbarButton
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript')
@@ -394,6 +407,8 @@ function TextFormatFloatingToolbar({
                 <SubscriptIcon />
               </IconComponent>
             </ToolbarButton>
+          </StyledTooltip>
+          <StyledTooltip label="Superscript">
             <ToolbarButton
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript')
@@ -406,6 +421,8 @@ function TextFormatFloatingToolbar({
                 <SuperscriptIcon />
               </IconComponent>
             </ToolbarButton>
+          </StyledTooltip>
+          <StyledTooltip label="Code">
             <ToolbarButton
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')
@@ -417,21 +434,41 @@ function TextFormatFloatingToolbar({
                 <CodeIcon />
               </IconComponent>
             </ToolbarButton>
+          </StyledTooltip>
+          <StyledTooltip label="Highlight">
+            <ToolbarButton
+              onClick={() => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'highlight')
+              }}
+              active={isHighlighted}
+              aria-label="Highlight text"
+            >
+              <IconComponent size={IconSize}>
+                <DrawIcon />
+              </IconComponent>
+            </ToolbarButton>
+          </StyledTooltip>
+          <StyledTooltip label="Insert link">
             <ToolbarButton onClick={insertLink} active={isLink} aria-label="Insert link">
               <IconComponent size={IconSize}>
                 <LinkIcon />
               </IconComponent>
             </ToolbarButton>
+          </StyledTooltip>
+          <StyledTooltip label="Insert bulleted list">
             <ToolbarButton onClick={formatBulletList} active={isBulletedList} aria-label="Insert bulleted list">
               <IconComponent size={IconSize}>
                 <ListBulleted />
               </IconComponent>
             </ToolbarButton>
+          </StyledTooltip>
+          <StyledTooltip label="Insert numbered list">
             <ToolbarButton onClick={formatNumberedList} active={isNumberedList} aria-label="Insert numbered list">
               <IconComponent size={IconSize}>
                 <ListNumbered />
               </IconComponent>
             </ToolbarButton>
+          </StyledTooltip>
         </div>
       )}
     </div>
@@ -451,6 +488,7 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
     isSuperscript,
     isUnderline,
     isCode,
+    isHighlighted,
     blockType,
   } = useSelectedTextFormatInfo()
 
@@ -479,6 +517,7 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
       isSuperscript={isSuperscript}
       isUnderline={isUnderline}
       isCode={isCode}
+      isHighlighted={isHighlighted}
       isBulletedList={blockType === 'bullet'}
       isNumberedList={blockType === 'number'}
     />,

packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugins/MobileToolbarPlugin.tsx

@@ -77,7 +77,7 @@ const MobileToolbarPlugin = () => {
     }
   }, [editor])
 
-  const { isBold, isItalic, isUnderline, isSubscript, isSuperscript, isStrikethrough, blockType } =
+  const { isBold, isItalic, isUnderline, isSubscript, isSuperscript, isStrikethrough, blockType, isHighlighted } =
     useSelectedTextFormatInfo()
   const [isSelectionLink, setIsSelectionLink] = useState(false)
 
@@ -153,6 +153,14 @@ const MobileToolbarPlugin = () => {
         },
         active: isUnderline,
       },
+      {
+        name: 'Highlight',
+        iconName: 'draw',
+        onSelect: () => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'highlight')
+        },
+        active: isHighlighted,
+      },
       {
         name: 'Strikethrough',
         iconName: 'strikethrough',
@@ -223,6 +231,7 @@ const MobileToolbarPlugin = () => {
       editor,
       insertLink,
       isBold,
+      isHighlighted,
       isItalic,
       isSelectionLink,
       isStrikethrough,

packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugins/useSelectedTextFormatInfo.ts

@@ -41,6 +41,7 @@ export function useSelectedTextFormatInfo() {
   const [isBold, setIsBold] = useState(false)
   const [isItalic, setIsItalic] = useState(false)
   const [isUnderline, setIsUnderline] = useState(false)
+  const [isHighlighted, setIsHighlighted] = useState(false)
   const [isStrikethrough, setIsStrikethrough] = useState(false)
   const [isSubscript, setIsSubscript] = useState(false)
   const [isSuperscript, setIsSuperscript] = useState(false)
@@ -108,6 +109,7 @@ export function useSelectedTextFormatInfo() {
       setIsSubscript(selection.hasFormat('subscript'))
       setIsSuperscript(selection.hasFormat('superscript'))
       setIsCode(selection.hasFormat('code'))
+      setIsHighlighted(selection.hasFormat('highlight'))
 
       // Update links
       const parent = node.getParent()
@@ -171,6 +173,7 @@ export function useSelectedTextFormatInfo() {
     isStrikethrough,
     isSubscript,
     isSuperscript,
+    isHighlighted,
     isCode,
     blockType,
   }