rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Added "Highlight" option to Super formatting toolbars

Browse Source
This commit is contained in:
Aman Harwara
2023-10-05 17:32:05 +05:30
parent eb1a066381
commit 22b9f5cb58
4 changed files with 148 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx
View File

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

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

@@ -38,6 +38,7 @@ import {
SubscriptIcon, SubscriptIcon,
ListBulleted, ListBulleted,
ListNumbered, ListNumbered,
DrawIcon,
} from '@standardnotes/icons' } from '@standardnotes/icons'
import { IconComponent } from '../../Lexical/Theme/IconComponent' import { IconComponent } from '../../Lexical/Theme/IconComponent'
import { classNames } from '@standardnotes/snjs' import { classNames } from '@standardnotes/snjs'
@@ -49,6 +50,7 @@ import LinkTextEditor, { $isLinkTextNode } from '../LinkEditor/LinkTextEditor'
import { URL_REGEX } from '@/Constants/Constants' import { URL_REGEX } from '@/Constants/Constants'
import { useSelectedTextFormatInfo } from './useSelectedTextFormatInfo' import { useSelectedTextFormatInfo } from './useSelectedTextFormatInfo'
import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery' import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
const IconSize = 15 const IconSize = 15
@@ -84,6 +86,7 @@ function TextFormatFloatingToolbar({
isSuperscript, isSuperscript,
isBulletedList, isBulletedList,
isNumberedList, isNumberedList,
isHighlighted,
}: { }: {
editor: LexicalEditor editor: LexicalEditor
anchorElem: HTMLElement anchorElem: HTMLElement
@@ -100,6 +103,7 @@ function TextFormatFloatingToolbar({
isUnderline: boolean isUnderline: boolean
isBulletedList: boolean isBulletedList: boolean
isNumberedList: boolean isNumberedList: boolean
isHighlighted: boolean
}) { }) {
const toolbarRef = useRef<HTMLDivElement | null>(null) const toolbarRef = useRef<HTMLDivElement | null>(null)
@@ -312,7 +316,7 @@ function TextFormatFloatingToolbar({
return ( return (
<div <div
ref={toolbarRef} 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 && ( {isLinkText && !isAutoLink && (
<> <>
@@ -338,100 +342,133 @@ function TextFormatFloatingToolbar({
)} )}
{isText && ( {isText && (
<div className="flex gap-1"> <div className="flex gap-1">
<ToolbarButton <StyledTooltip label="Bold">
active={isBold} <ToolbarButton
onClick={() => { active={isBold}
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold') onClick={() => {
}} editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')
aria-label="Format text as bold" }}
> aria-label="Format text as bold"
<IconComponent size={IconSize}> >
<BoldIcon /> <IconComponent size={IconSize}>
</IconComponent> <BoldIcon />
</ToolbarButton> </IconComponent>
<ToolbarButton </ToolbarButton>
onClick={() => { </StyledTooltip>
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic') <StyledTooltip label="Italicize">
}} <ToolbarButton
active={isItalic} onClick={() => {
aria-label="Format text as italics" editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')
> }}
<IconComponent size={IconSize}> active={isItalic}
<ItalicIcon /> aria-label="Format text as italics"
</IconComponent> >
</ToolbarButton> <IconComponent size={IconSize}>
<ToolbarButton <ItalicIcon />
onClick={() => { </IconComponent>
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline') </ToolbarButton>
}} </StyledTooltip>
active={isUnderline} <StyledTooltip label="Underline">
aria-label="Format text to underlined" <ToolbarButton
> onClick={() => {
<IconComponent size={IconSize + 1}> editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')
<UnderlineIcon /> }}
</IconComponent> active={isUnderline}
</ToolbarButton> aria-label="Format text to underlined"
<ToolbarButton >
onClick={() => { <IconComponent size={IconSize + 1}>
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough') <UnderlineIcon />
}} </IconComponent>
active={isStrikethrough} </ToolbarButton>
aria-label="Format text with a strikethrough" </StyledTooltip>
> <StyledTooltip label="Strikethrough">
<IconComponent size={IconSize}> <ToolbarButton
<StrikethroughIcon /> onClick={() => {
</IconComponent> editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')
</ToolbarButton> }}
<ToolbarButton active={isStrikethrough}
onClick={() => { aria-label="Format text with a strikethrough"
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript') >
}} <IconComponent size={IconSize}>
active={isSubscript} <StrikethroughIcon />
title="Subscript" </IconComponent>
aria-label="Format Subscript" </ToolbarButton>
> </StyledTooltip>
<IconComponent paddingTop={4} size={IconSize - 2}> <StyledTooltip label="Subscript">
<SubscriptIcon /> <ToolbarButton
</IconComponent> onClick={() => {
</ToolbarButton> editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript')
<ToolbarButton }}
onClick={() => { active={isSubscript}
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript') title="Subscript"
}} aria-label="Format Subscript"
active={isSuperscript} >
title="Superscript" <IconComponent paddingTop={4} size={IconSize - 2}>
aria-label="Format Superscript" <SubscriptIcon />
> </IconComponent>
<IconComponent paddingTop={1} size={IconSize - 2}> </ToolbarButton>
<SuperscriptIcon /> </StyledTooltip>
</IconComponent> <StyledTooltip label="Superscript">
</ToolbarButton> <ToolbarButton
<ToolbarButton onClick={() => {
onClick={() => { editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript')
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code') }}
}} active={isSuperscript}
active={isCode} title="Superscript"
aria-label="Insert code block" aria-label="Format Superscript"
> >
<IconComponent size={IconSize}> <IconComponent paddingTop={1} size={IconSize - 2}>
<CodeIcon /> <SuperscriptIcon />
</IconComponent> </IconComponent>
</ToolbarButton> </ToolbarButton>
<ToolbarButton onClick={insertLink} active={isLink} aria-label="Insert link"> </StyledTooltip>
<IconComponent size={IconSize}> <StyledTooltip label="Code">
<LinkIcon /> <ToolbarButton
</IconComponent> onClick={() => {
</ToolbarButton> editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')
<ToolbarButton onClick={formatBulletList} active={isBulletedList} aria-label="Insert bulleted list"> }}
<IconComponent size={IconSize}> active={isCode}
<ListBulleted /> aria-label="Insert code block"
</IconComponent> >
</ToolbarButton> <IconComponent size={IconSize}>
<ToolbarButton onClick={formatNumberedList} active={isNumberedList} aria-label="Insert numbered list"> <CodeIcon />
<IconComponent size={IconSize}> </IconComponent>
<ListNumbered /> </ToolbarButton>
</IconComponent> </StyledTooltip>
</ToolbarButton> <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>
)} )}
</div> </div>
@@ -451,6 +488,7 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
isSuperscript, isSuperscript,
isUnderline, isUnderline,
isCode, isCode,
isHighlighted,
blockType, blockType,
} = useSelectedTextFormatInfo() } = useSelectedTextFormatInfo()
@@ -479,6 +517,7 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
isSuperscript={isSuperscript} isSuperscript={isSuperscript}
isUnderline={isUnderline} isUnderline={isUnderline}
isCode={isCode} isCode={isCode}
isHighlighted={isHighlighted}
isBulletedList={blockType === 'bullet'} isBulletedList={blockType === 'bullet'}
isNumberedList={blockType === 'number'} isNumberedList={blockType === 'number'}
/>, />,

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

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

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

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