From a8851708696d9e7d891e4352f00e4fe61c6fffaa Mon Sep 17 00:00:00 2001 From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com> Date: Thu, 27 Jul 2023 20:40:18 +0800 Subject: [PATCH] feat: support editor format text color and bg color (#3061) --- frontend/appflowy_tauri/package.json | 2 + frontend/appflowy_tauri/pnpm-lock.yaml | 60 +++++- .../_shared/BlockDraggable/index.tsx | 3 - .../document/BlockSideToolbar/BlockMenu.tsx | 2 +- .../BlockSideToolbar/BlockMenuTurnInto.tsx | 11 +- .../BlockSideToolbar.hooks.tsx | 35 +--- .../document/BlockSideToolbar/index.tsx | 2 +- .../document/BlockSlash/BlockSlashMenu.tsx | 2 +- .../components/document/Node/index.tsx | 2 +- .../document/TextActionMenu/config.ts | 17 +- .../document/TextActionMenu/index.tsx | 2 +- .../TextActionMenu/menu/BgColorPicker.tsx | 101 +++++++++ .../TextActionMenu/menu/ColorPicker.tsx | 197 ++++++++++++++++++ .../TextActionMenu/menu/CustomColorPicker.tsx | 69 ++++++ .../TextActionMenu/menu/FormatButton.tsx | 18 +- .../TextActionMenu/menu/TextColorPicker.tsx | 97 +++++++++ .../document/TextActionMenu/menu/index.tsx | 6 + .../document/VirtualizedList/index.tsx | 2 +- .../components/document/_shared/MenuItem.tsx | 14 +- .../document/_shared/SlateEditor/TextLeaf.tsx | 12 +- .../document/_shared/ToolbarTooltip/index.tsx | 1 + .../document/_shared/TurnInto/index.tsx | 5 +- .../document/_shared/useBindArrowKey.ts | 77 +++++++ .../src/appflowy_app/interfaces/document.ts | 2 + .../reducers/document/async-actions/format.ts | 89 ++++---- .../appflowy_tauri/src/styles/template.css | 15 ++ frontend/resources/translations/en.json | 13 ++ 27 files changed, 750 insertions(+), 106 deletions(-) create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/BgColorPicker.tsx create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/ColorPicker.tsx create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/CustomColorPicker.tsx create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/TextColorPicker.tsx create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/useBindArrowKey.ts diff --git a/frontend/appflowy_tauri/package.json b/frontend/appflowy_tauri/package.json index 6a14e16c17..88ef8ce5b8 100644 --- a/frontend/appflowy_tauri/package.json +++ b/frontend/appflowy_tauri/package.json @@ -46,6 +46,7 @@ "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", "react-calendar": "^4.1.0", + "react-color": "^2.19.3", "react-dom": "^18.2.0", "react-error-boundary": "^3.1.4", "react-i18next": "^12.2.0", @@ -72,6 +73,7 @@ "@types/quill": "^2.0.10", "@types/react": "^18.0.15", "@types/react-beautiful-dnd": "^13.1.3", + "@types/react-color": "^3.0.6", "@types/react-dom": "^18.0.6", "@types/react-katex": "^3.0.0", "@types/react-transition-group": "^4.4.6", diff --git a/frontend/appflowy_tauri/pnpm-lock.yaml b/frontend/appflowy_tauri/pnpm-lock.yaml index 1dc74d0ee0..e1d2bfe99c 100644 --- a/frontend/appflowy_tauri/pnpm-lock.yaml +++ b/frontend/appflowy_tauri/pnpm-lock.yaml @@ -88,6 +88,9 @@ dependencies: react-calendar: specifier: ^4.1.0 version: 4.2.1(react-dom@18.2.0)(react@18.2.0) + react-color: + specifier: ^2.19.3 + version: 2.19.3(react@18.2.0) react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) @@ -162,6 +165,9 @@ devDependencies: '@types/react-beautiful-dnd': specifier: ^13.1.3 version: 13.1.4 + '@types/react-color': + specifier: ^3.0.6 + version: 3.0.6 '@types/react-dom': specifier: ^18.0.6 version: 18.2.4 @@ -960,6 +966,14 @@ packages: resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} dev: true + /@icons/material@0.2.4(react@18.2.0): + resolution: {integrity: sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==} + peerDependencies: + react: '*' + dependencies: + react: 18.2.0 + dev: false + /@istanbuljs/load-nyc-config@1.1.0: resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==} engines: {node: '>=8'} @@ -1701,6 +1715,13 @@ packages: '@types/react': 18.2.6 dev: true + /@types/react-color@3.0.6: + resolution: {integrity: sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==} + dependencies: + '@types/react': 18.2.6 + '@types/reactcss': 1.2.6 + dev: true + /@types/react-dom@18.2.4: resolution: {integrity: sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==} dependencies: @@ -1747,6 +1768,12 @@ packages: '@types/scheduler': 0.16.3 csstype: 3.1.2 + /@types/reactcss@1.2.6: + resolution: {integrity: sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==} + dependencies: + '@types/react': 18.2.6 + dev: true + /@types/scheduler@0.16.3: resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==} @@ -3975,6 +4002,10 @@ packages: p-locate: 5.0.0 dev: true + /lodash-es@4.17.21: + resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} + dev: false + /lodash.clonedeep@4.5.0: resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==} @@ -4035,6 +4066,10 @@ packages: tmpl: 1.0.5 dev: false + /material-colors@1.2.6: + resolution: {integrity: sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==} + dev: false + /memoize-one@5.2.1: resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==} dev: false @@ -4593,6 +4628,21 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /react-color@2.19.3(react@18.2.0): + resolution: {integrity: sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==} + peerDependencies: + react: '*' + dependencies: + '@icons/material': 0.2.4(react@18.2.0) + lodash: 4.17.21 + lodash-es: 4.17.21 + material-colors: 1.2.6 + prop-types: 15.8.1 + react: 18.2.0 + reactcss: 1.2.3(react@18.2.0) + tinycolor2: 1.6.0 + dev: false + /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -4770,6 +4820,15 @@ packages: loose-envify: 1.4.0 dev: false + /reactcss@1.2.3(react@18.2.0): + resolution: {integrity: sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==} + peerDependencies: + react: '*' + dependencies: + lodash: 4.17.21 + react: 18.2.0 + dev: false + /read-cache@1.0.0: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} dependencies: @@ -5230,7 +5289,6 @@ packages: /tinycolor2@1.6.0: resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==} - dev: true /tmpl@1.0.5: resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/BlockDraggable/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/BlockDraggable/index.tsx index 05e0319dce..eaf0530c21 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/BlockDraggable/index.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/BlockDraggable/index.tsx @@ -40,9 +40,6 @@ function BlockDraggable( data-draggable-type={type} onMouseDown={getAnchorEl ? undefined : onDragStart} className={`relative ${className || ''}`} - style={{ - opacity: isDragging ? 0.7 : 1, - }} {...props} > { diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenu.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenu.tsx index 1905a44cf1..cef2c02184 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenu.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenu.tsx @@ -143,7 +143,7 @@ function BlockMenu({ id, onClose }: { id: string; onClose: () => void }) { return ( { setHovered(BlockMenuOption.TurnInto); setSubMenuOpened(true); diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenuTurnInto.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenuTurnInto.tsx index 6f5f380092..74710e30d3 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenuTurnInto.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockMenuTurnInto.tsx @@ -9,14 +9,14 @@ function BlockMenuTurnInto({ onHovered, isHovered, menuOpened, - lable, + label, }: { id: string; onClose: () => void; onHovered: (e: MouseEvent) => void; isHovered: boolean; menuOpened: boolean; - lable?: string; + label?: string; }) { const ref = useRef(null); const [anchorPosition, setAnchorPosition] = React.useState<{ top: number; left: number }>(); @@ -39,7 +39,7 @@ function BlockMenuTurnInto({ <> } extra={} @@ -60,7 +60,10 @@ function BlockMenuTurnInto({ pointerEvents: 'auto', }, }} - onClose={onClose} + onOk={() => onClose()} + onClose={() => { + setAnchorPosition(undefined); + }} anchorReference={'anchorPosition'} anchorPosition={anchorPosition} transformOrigin={{ diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockSideToolbar.hooks.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockSideToolbar.hooks.tsx index 595b18cf39..ec5d75f214 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockSideToolbar.hooks.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/BlockSideToolbar.hooks.tsx @@ -9,9 +9,9 @@ import { getNode } from '$app/utils/document/node'; import { get } from '$app/utils/tool'; const headingBlockTopOffset: Record = { - 1: '1.65rem', - 2: '1.3rem', - 3: '0.25rem', + 1: '0.4rem', + 2: '0.2rem', + 3: '0.15rem', }; export function useBlockSideToolbar(id: string) { @@ -87,35 +87,6 @@ export function useBlockSideToolbar(id: string) { }; } -function getNodeIdByPoint(x: number, y: number) { - const viewportNodes = document.querySelectorAll('[data-block-id]'); - let node: { - el: Element; - rect: DOMRect; - } | null = null; - - viewportNodes.forEach((el) => { - const rect = el.getBoundingClientRect(); - - if (rect.x + rect.width - 1 >= x && rect.y + rect.height - 1 >= y && rect.y <= y) { - if (!node || rect.y > node.rect.y) { - node = { - el, - rect, - }; - } - } - }); - return node - ? ( - node as { - el: Element; - rect: DOMRect; - } - ).el.getAttribute('data-block-id') - : null; -} - const transformOrigin: PopoverOrigin = { vertical: 'bottom', horizontal: 'left', diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/index.tsx index f367e0a013..b48d34516d 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/index.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/index.tsx @@ -29,7 +29,7 @@ export default function BlockSideToolbar({ id }: { id: string }) { opacity: show ? 1 : 0, top: topOffset, }} - className='absolute left-[-50px] inline-flex transition-opacity duration-100' + className='absolute left-[-50px] inline-flex' > {/** Add Block below */} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSlash/BlockSlashMenu.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSlash/BlockSlashMenu.tsx index 10c7bb6922..bbab6dabaa 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSlash/BlockSlashMenu.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSlash/BlockSlashMenu.tsx @@ -292,7 +292,7 @@ function BlockSlashMenu({
{Object.entries(optionsByGroup).map(([group, options]) => (
-
{group}
+
{group}
{options.map((option) => { return ( diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/index.tsx index 46c30cdd93..f157619afe 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/index.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/Node/index.tsx @@ -90,7 +90,7 @@ function NodeComponent({ id, ...props }: { id: string } & React.HTMLAttributes {renderBlock()} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/config.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/config.ts index cfdfe64b71..14a291294c 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/config.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/config.ts @@ -9,6 +9,8 @@ export const defaultTextActionItems = [ TextAction.Strikethrough, TextAction.Code, TextAction.Equation, + TextAction.TextColor, + TextAction.Highlight, ]; const groupKeys = { comment: [], @@ -21,11 +23,20 @@ const groupKeys = { TextAction.Equation, ], link: [TextAction.Link], + color: [TextAction.TextColor, TextAction.Highlight], turn: [TextAction.Turn], }; export const multiLineTextActionProps: TextActionMenuProps = { - customItems: [TextAction.Bold, TextAction.Italic, TextAction.Underline, TextAction.Strikethrough, TextAction.Code], + customItems: [ + TextAction.Bold, + TextAction.Italic, + TextAction.Underline, + TextAction.Strikethrough, + TextAction.Code, + TextAction.TextColor, + TextAction.Highlight, + ], }; -export const multiLineTextActionGroups = [groupKeys.format]; -export const textActionGroups = [groupKeys.turn, groupKeys.format, groupKeys.link]; +export const multiLineTextActionGroups = [groupKeys.format, groupKeys.color]; +export const textActionGroups = [groupKeys.turn, groupKeys.format, groupKeys.color, groupKeys.link]; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.tsx index cc6376784f..2491932409 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.tsx @@ -18,7 +18,7 @@ const TextActionComponent = ({ container }: { container: HTMLDivElement }) => { style={{ opacity: 0, }} - className='absolute mt-[-6px] inline-flex h-[32px] min-w-[100px] items-stretch overflow-hidden rounded-[8px] bg-fill-toolbar leading-tight text-content-on-fill shadow-md transition-opacity duration-100' + className='absolute mt-[-6px] inline-flex h-[32px] min-w-[100px] items-stretch overflow-hidden rounded-[8px] bg-fill-toolbar leading-tight text-content-on-fill shadow-md' onMouseDown={(e) => { // prevent toolbar from taking focus away from editor e.preventDefault(); diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/BgColorPicker.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/BgColorPicker.tsx new file mode 100644 index 0000000000..a8526bdf21 --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/BgColorPicker.tsx @@ -0,0 +1,101 @@ +import React, { useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import ColorPicker from '$app/components/document/TextActionMenu/menu/ColorPicker'; +import { FormatColorFill, FormatColorText } from '@mui/icons-material'; +import { TextAction } from '$app/interfaces/document'; + +function BgColorPicker() { + const { t } = useTranslation(); + + const getColorIcon = useCallback((color: string) => { + return ( +
+ +
+ ); + }, []); + const colors = useMemo( + () => [ + { + name: t('colors.default'), + key: 'default', + color: 'transparent', + }, + { + name: t('colors.custom'), + key: 'custom', + color: 'transparent', + }, + { + key: 'gray', + name: t('colors.gray'), + color: '#78909c', + }, + { + key: 'brown', + name: t('colors.brown'), + color: '#8d6e63', + }, + { + key: 'orange', + name: t('colors.orange'), + color: '#ff9100', + }, + { + key: 'yellow', + name: t('colors.yellow'), + color: '#ffd600', + }, + { + key: 'green', + name: t('colors.green'), + color: '#00e676', + }, + { + key: 'blue', + name: t('colors.blue'), + color: '#448aff', + }, + { + key: 'purple', + name: t('colors.purple'), + color: '#e040fb', + }, + { + key: 'pink', + name: t('colors.pink'), + color: '#ff4081', + }, + { + key: 'red', + name: t('colors.red'), + color: '#ff5252', + }, + ], + [t] + ); + + return ( + + } + colors={colors} + format={TextAction.Highlight} + label={t('toolbar.highlight')} + /> + ); +} + +export default BgColorPicker; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/ColorPicker.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/ColorPicker.tsx new file mode 100644 index 0000000000..a1dfc84b60 --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/ColorPicker.tsx @@ -0,0 +1,197 @@ +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { List } from '@mui/material'; +import MenuItem from '@mui/material/MenuItem'; +import { useBindArrowKey } from '$app/components/document/_shared/useBindArrowKey'; +import Popover from '@mui/material/Popover'; +import Tooltip from '@mui/material/Tooltip'; +import { useAppDispatch } from '$app/stores/store'; +import { formatThunk, getFormatValuesThunk } from '$app_reducers/document/async-actions/format'; +import { TextAction } from '$app/interfaces/document'; +import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks'; +import CustomColorPicker from '$app/components/document/TextActionMenu/menu/CustomColorPicker'; + +export interface ColorItem { + name: string; + key: string; + color: string; +} +function ColorPicker({ + label, + format, + colors, + icon, + getColorIcon, +}: { + format: TextAction; + label: string; + colors: ColorItem[]; + icon: React.ReactNode; + getColorIcon: (color: string) => React.ReactNode; +}) { + const { controller, docId } = useSubscribeDocument(); + const ref = useRef(null); + const [anchorPosition, setAnchorPosition] = useState< + | { + left: number; + top: number; + } + | undefined + >(undefined); + const open = Boolean(anchorPosition); + const dispatch = useAppDispatch(); + const [customPickerAnchorPosition, setCustomPickerAnchorPosition] = useState< + | { + left: number; + top: number; + } + | undefined + >(undefined); + const customOpened = Boolean(customPickerAnchorPosition); + const [selectOption, setSelectOption] = useState(null); + const [activeColor, setActiveColor] = useState(null); + + const openCustomColorPicker = useCallback(() => { + const target = document.querySelector('.color-item-custom') as Element; + + const rect = target.getBoundingClientRect(); + + setCustomPickerAnchorPosition({ + left: rect.left + rect.width + 10, + top: rect.top, + }); + }, []); + + useEffect(() => { + if (selectOption === 'custom') { + openCustomColorPicker(); + } else { + setCustomPickerAnchorPosition(undefined); + } + }, [selectOption, openCustomColorPicker]); + + const onOpen = useCallback(() => { + const rect = ref.current?.getBoundingClientRect(); + + if (!rect) return; + setAnchorPosition({ + left: rect.left, + top: rect.top + rect.height + 10, + }); + }, []); + + const loadActiveColor = useCallback(async () => { + const { payload: formatValues } = (await dispatch(getFormatValuesThunk({ format, docId }))) as { + payload: Record; + }; + const multiLines = Object.keys(formatValues).length > 1; + const firstKey = Object.keys(formatValues)[0]; + const firstValue = formatValues[firstKey].find((item) => item); + + setActiveColor(multiLines ? null : String(firstValue)); + }, [dispatch, docId, format]); + + useEffect(() => { + void (async () => { + await loadActiveColor(); + })(); + }, [loadActiveColor]); + + const formatColor = useCallback( + async (color: string | null) => { + await dispatch(formatThunk({ format, value: color, controller })); + setAnchorPosition(undefined); + await loadActiveColor(); + }, + [format, controller, dispatch, loadActiveColor] + ); + + const onClick = useCallback(async () => { + if (selectOption === 'custom') { + return; + } + + if (selectOption === 'default') { + await formatColor(null); + } else { + const item = colors.find((color) => color.key === selectOption); + + await formatColor(item?.color || null); + } + }, [selectOption, formatColor, colors]); + + useBindArrowKey({ + options: colors.map((item) => item.key), + onChange: (key) => { + setSelectOption(key); + }, + selectOption, + onEnter: () => onClick(), + }); + + return ( + <> +
+ +
{icon}
+ +
+ { + e.stopPropagation(); + }} + disableAutoFocus={true} + disableRestoreFocus={true} + transformOrigin={{ + vertical: 'top', + horizontal: 'left', + }} + open={open} + anchorReference={'anchorPosition'} + anchorPosition={anchorPosition} + onClose={() => setAnchorPosition(undefined)} + > + +
{label}
+ {colors.map((item) => ( + { + setSelectOption(item.key); + }} + style={{ + padding: '4px', + }} + selected={selectOption === item.key} + onClick={onClick} + > +
+ {getColorIcon(item.color)} +
{item.name}
+
+ {item.key === 'custom' && ( + { + setCustomPickerAnchorPosition(undefined); + }} + /> + )} + + ))} + + + + ); +} + +export default ColorPicker; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/CustomColorPicker.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/CustomColorPicker.tsx new file mode 100644 index 0000000000..ed0e4e6cce --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/CustomColorPicker.tsx @@ -0,0 +1,69 @@ +import React, { useState } from 'react'; +import Popover from '@mui/material/Popover'; +import { RGBColor, SketchPicker } from 'react-color'; +import Button from '@mui/material/Button'; +import { useTranslation } from 'react-i18next'; +import { Divider } from '@mui/material'; + +function CustomColorPicker({ + onChange, + open, + onClose, + anchorPosition, +}: { + open: boolean; + onChange: (color: string) => void; + anchorPosition?: { + left: number; + top: number; + }; + onClose: () => void; +}) { + const { t } = useTranslation(); + const [color, setColor] = useState(); + + return ( + e.stopPropagation()} + disableAutoFocus={true} + disableRestoreFocus={true} + sx={{ + pointerEvents: 'none', + }} + PaperProps={{ + style: { + pointerEvents: 'auto', + }, + className: 'p-2', + }} + open={open} + transformOrigin={{ + vertical: 'top', + horizontal: 'left', + }} + anchorReference={'anchorPosition'} + anchorPosition={anchorPosition} + onClose={onClose} + > + { + setColor(color.rgb); + }} + color={color} + /> + +
+ +
+ + ); +} + +export default CustomColorPicker; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/FormatButton.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/FormatButton.tsx index 4633129a79..32acd700d2 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/FormatButton.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/FormatButton.tsx @@ -29,7 +29,7 @@ const FormatButton = ({ format, icon }: { format: TextAction; icon: string }) => const { node: focusNode } = useSubscribeNode(focusId); const [isActive, setIsActive] = React.useState(false); - const color = useMemo(() => (isActive ? 'text-content-on-fill-hover' : ''), [isActive]); + const color = useMemo(() => (isActive ? 'text-fill-hover' : ''), [isActive]); const isFormatActive = useCallback(async () => { if (!focusNode) return false; @@ -125,22 +125,18 @@ const FormatButton = ({ format, icon }: { format: TextAction; icon: string }) => return ; case TextAction.Link: return ( -
- -
{t('toolbar.link')}
-
+ ); case TextAction.Equation: return ; default: return null; } - }, [icon, t]); + }, [icon]); return ( diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/TextColorPicker.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/TextColorPicker.tsx new file mode 100644 index 0000000000..c88664327d --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/TextColorPicker.tsx @@ -0,0 +1,97 @@ +import React, { useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { TextAction } from '$app/interfaces/document'; +import ColorPicker from '$app/components/document/TextActionMenu/menu/ColorPicker'; +import { FormatColorText } from '@mui/icons-material'; + +function TextColorPicker() { + const { t } = useTranslation(); + + const getColorIcon = useCallback((color: string) => { + return ( +
+ +
+ ); + }, []); + + const colors = useMemo( + () => [ + { + name: t('colors.default'), + key: 'default', + color: 'var(--text-title)', + }, + { + name: t('colors.custom'), + key: 'custom', + color: 'var(--text-title)', + }, + { + key: 'gray', + name: t('colors.gray'), + color: '#546e7a', + }, + { + key: 'brown', + name: t('colors.brown'), + color: '#795548', + }, + { + key: 'orange', + name: t('colors.orange'), + color: '#ff5722', + }, + { + key: 'yellow', + name: t('colors.yellow'), + color: '#ffff00', + }, + { + key: 'green', + name: t('colors.green'), + color: '#4caf50', + }, + { + key: 'blue', + name: t('colors.blue'), + color: '#0d47a1', + }, + { + key: 'purple', + name: t('colors.purple'), + color: '#9c27b0', + }, + { + key: 'pink', + name: t('colors.pink'), + color: '#d81b60', + }, + { + key: 'red', + name: t('colors.red'), + color: '#b71c1c', + }, + ], + [t] + ); + + return ( + + } + getColorIcon={getColorIcon} + colors={colors} + format={TextAction.TextColor} + label={t('toolbar.color')} + /> + ); +} + +export default TextColorPicker; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.tsx index ca93d24901..8852ea13e8 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.tsx @@ -3,6 +3,8 @@ import React, { useCallback } from 'react'; import TurnIntoSelect from '$app/components/document/TextActionMenu/menu/TurnIntoSelect'; import FormatButton from '$app/components/document/TextActionMenu/menu/FormatButton'; import { useTextActionMenu } from '$app/components/document/TextActionMenu/menu/index.hooks'; +import TextColorPicker from '$app/components/document/TextActionMenu/menu/TextColorPicker'; +import BgColorPicker from '$app/components/document/TextActionMenu/menu/BgColorPicker'; function TextActionMenuList() { const { groupItems, isSingleLine, focusId } = useTextActionMenu(); @@ -19,6 +21,10 @@ function TextActionMenuList() { case TextAction.Code: case TextAction.Equation: return ; + case TextAction.TextColor: + return ; + case TextAction.Highlight: + return ; default: return null; } diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/VirtualizedList/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/VirtualizedList/index.tsx index 7269133714..e370d62a1f 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/VirtualizedList/index.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/VirtualizedList/index.tsx @@ -49,7 +49,7 @@ export default function VirtualizedList({ const id = childIds[virtualRow.index]; return ( -
+
{virtualRow.index === 0 ? : null} {renderNode(id)}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/MenuItem.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/MenuItem.tsx index e674681b9f..ccdec64580 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/MenuItem.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/MenuItem.tsx @@ -1,5 +1,5 @@ import React, { forwardRef, MouseEvent, useMemo } from 'react'; -import { ListItemButton } from '@mui/material'; +import { MenuItem as MuiMenuItem } from '@mui/material'; const MenuItem = forwardRef(function ( { @@ -34,14 +34,16 @@ const MenuItem = forwardRef(function ( return (
- onHover?.(e)} + onMouseEnter={(e) => { + onHover?.(e); + }} onClick={(e) => { e.preventDefault(); e.stopPropagation(); @@ -53,7 +55,7 @@ const MenuItem = forwardRef(function ( width: imgSize.width, height: imgSize.height, }} - className={`mr-2 flex items-center justify-center rounded border border-shade-5`} + className={`mr-2 flex items-center justify-center rounded border border-line-divider`} > {icon}
@@ -61,7 +63,7 @@ const MenuItem = forwardRef(function (
{title}
{desc && (
{extra}
- +
); }); diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/TextLeaf.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/TextLeaf.tsx index 2844ae56b4..44f4a1408e 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/TextLeaf.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/TextLeaf.tsx @@ -21,6 +21,8 @@ interface Attributes { link_placeholder?: string; temporary?: boolean; formula?: string; + font_color?: string; + bg_color?: string; } interface TextLeafProps extends RenderLeafProps { leaf: BaseText & Attributes; @@ -122,7 +124,15 @@ const TextLeaf = (props: TextLeafProps) => { } return ( - + {newChildren} ); diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/ToolbarTooltip/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/ToolbarTooltip/index.tsx index 11323f2a57..f85d51fb98 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/ToolbarTooltip/index.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/ToolbarTooltip/index.tsx @@ -4,6 +4,7 @@ import Tooltip from '@mui/material/Tooltip'; function ToolbarTooltip({ title, children }: { children: JSX.Element; title?: string }) { return ( void; + onOk?: () => void; } & PopoverProps) => { const { node } = useSubscribeNode(id); const { turnIntoHeading, turnIntoBlock } = useTurnInto({ node, onClose }); @@ -142,8 +144,9 @@ const TurnIntoPopover = ({ const isSelected = getSelected(option); option.onClick ? option.onClick(option.type, isSelected) : turnIntoBlock(option.type, isSelected); + onOk?.(); }, - [getSelected, turnIntoBlock] + [onOk, getSelected, turnIntoBlock] ); const onKeyDown = useCallback( diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/useBindArrowKey.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/useBindArrowKey.ts new file mode 100644 index 0000000000..541f136407 --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/useBindArrowKey.ts @@ -0,0 +1,77 @@ +import { useCallback, useEffect, useState } from 'react'; +import { Keyboard } from '$app/constants/document/keyboard'; + +export const useBindArrowKey = ({ + options, + onLeft, + onRight, + onEnter, + onChange, + selectOption, +}: { + options: string[]; + onLeft?: () => void; + onRight?: () => void; + onEnter?: () => void; + onChange?: (key: string) => void; + selectOption?: string | null; +}) => { + const onUp = useCallback(() => { + const getSelected = () => { + const index = options.findIndex((item) => item === selectOption); + + if (index === -1) return options[0]; + const length = options.length; + + return options[(index + length - 1) % length]; + }; + + onChange?.(getSelected()); + }, [onChange, options, selectOption]); + + const onDown = useCallback(() => { + const getSelected = () => { + const index = options.findIndex((item) => item === selectOption); + + if (index === -1) return options[0]; + const length = options.length; + + return options[(index + 1) % length]; + }; + + onChange?.(getSelected()); + }, [onChange, options, selectOption]); + + const handleArrowKey = useCallback( + (e: KeyboardEvent) => { + if ( + [Keyboard.keys.UP, Keyboard.keys.DOWN, Keyboard.keys.LEFT, Keyboard.keys.RIGHT, Keyboard.keys.ENTER].includes( + e.key + ) + ) { + e.stopPropagation(); + e.preventDefault(); + } + + if (e.key === Keyboard.keys.UP) { + onUp(); + } else if (e.key === Keyboard.keys.DOWN) { + onDown(); + } else if (e.key === Keyboard.keys.LEFT) { + onLeft?.(); + } else if (e.key === Keyboard.keys.RIGHT) { + onRight?.(); + } else if (e.key === Keyboard.keys.ENTER) { + onEnter?.(); + } + }, + [onDown, onEnter, onLeft, onRight, onUp] + ); + + useEffect(() => { + document.addEventListener('keydown', handleArrowKey, true); + return () => { + document.removeEventListener('keydown', handleArrowKey, true); + }; + }, [handleArrowKey]); +}; diff --git a/frontend/appflowy_tauri/src/appflowy_app/interfaces/document.ts b/frontend/appflowy_tauri/src/appflowy_app/interfaces/document.ts index 777ba33231..62459b2892 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/interfaces/document.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/interfaces/document.ts @@ -235,6 +235,8 @@ export enum TextAction { Code = 'code', Equation = 'formula', Link = 'href', + TextColor = 'font_color', + Highlight = 'bg_color', } export interface TextActionMenuProps { /** diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/format.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/format.ts index 885103f46a..69487ea255 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/format.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/format.ts @@ -5,6 +5,35 @@ import { DocumentController } from '$app/stores/effects/document/document_contro import Delta from 'quill-delta'; import { DOCUMENT_NAME, RANGE_NAME } from '$app/constants/document/name'; +type FormatValues = Record; + +export const getFormatValuesThunk = createAsyncThunk( + 'document/getFormatValues', + ({ docId, format }: { docId: string; format: TextAction }, thunkAPI) => { + const { getState } = thunkAPI; + const state = getState() as RootState; + const document = state[DOCUMENT_NAME][docId]; + const documentRange = state[RANGE_NAME][docId]; + const { ranges } = documentRange; + const mapAttrs = (delta: Delta, format: TextAction) => { + return delta.ops.map((op) => op.attributes?.[format] as boolean | string | undefined); + }; + + const formatValues: FormatValues = {}; + + Object.entries(ranges).forEach(([id, range]) => { + const node = document.nodes[id]; + const delta = new Delta(node.data?.delta); + const index = range?.index || 0; + const length = range?.length || 0; + const rangeDelta = delta.slice(index, index + length); + + formatValues[id] = mapAttrs(rangeDelta, format); + }); + return formatValues; + } +); + export const getFormatActiveThunk = createAsyncThunk< boolean, { @@ -12,30 +41,22 @@ export const getFormatActiveThunk = createAsyncThunk< docId: string; } >('document/getFormatActive', async ({ format, docId }, thunkAPI) => { - const { getState } = thunkAPI; - const state = getState() as RootState; - const document = state[DOCUMENT_NAME][docId]; - const documentRange = state[RANGE_NAME][docId]; - const { ranges } = documentRange; - const match = (delta: Delta, format: TextAction) => { - return delta.ops.every((op) => op.attributes?.[format]); + const { dispatch } = thunkAPI; + const { payload } = (await dispatch(getFormatValuesThunk({ docId, format }))) as { + payload: FormatValues; }; - return Object.entries(ranges).every(([id, range]) => { - const node = document.nodes[id]; - const delta = new Delta(node.data?.delta); - const index = range?.index || 0; - const length = range?.length || 0; - const rangeDelta = delta.slice(index, index + length); - - return match(rangeDelta, format); + return Object.values(payload).every((values) => { + return values.every((value) => { + return value !== undefined; + }); }); }); export const toggleFormatThunk = createAsyncThunk( 'document/toggleFormat', async (payload: { format: TextAction; controller: DocumentController; isActive?: boolean }, thunkAPI) => { - const { getState, dispatch } = thunkAPI; + const { dispatch } = thunkAPI; const { format, controller } = payload; const docId = controller.documentId; let isActive = payload.isActive; @@ -51,38 +72,30 @@ export const toggleFormatThunk = createAsyncThunk( isActive = !!active; } - const formatValue = isActive ? undefined : true; + const formatValue = isActive ? null : true; + await dispatch(formatThunk({ format, value: formatValue, controller })); + } +); + +export const formatThunk = createAsyncThunk( + 'document/format', + async (payload: { format: TextAction; value: string | boolean | null; controller: DocumentController }, thunkAPI) => { + const { getState } = thunkAPI; + const { format, controller, value } = payload; + const docId = controller.documentId; const state = getState() as RootState; const document = state[DOCUMENT_NAME][docId]; const documentRange = state[RANGE_NAME][docId]; const { ranges } = documentRange; - const toggle = (delta: Delta, format: TextAction, value: string | boolean | undefined) => { - const newOps = delta.ops.map((op) => { - const attributes = { - ...op.attributes, - [format]: value, - }; - - return { - insert: op.insert, - attributes: attributes, - }; - }); - - return new Delta(newOps); - }; - const actions = Object.entries(ranges).map(([id, range]) => { const node = document.nodes[id]; const delta = new Delta(node.data?.delta); const index = range?.index || 0; const length = range?.length || 0; - const beforeDelta = delta.slice(0, index); - const afterDelta = delta.slice(index + length); - const rangeDelta = delta.slice(index, index + length); - const toggleFormatDelta = toggle(rangeDelta, format, formatValue); - const newDelta = beforeDelta.concat(toggleFormatDelta).concat(afterDelta); + const diffDelta: Delta = new Delta(); + diffDelta.retain(index).retain(length, { [format]: value }); + const newDelta = delta.compose(diffDelta); return controller.getUpdateAction({ ...node, diff --git a/frontend/appflowy_tauri/src/styles/template.css b/frontend/appflowy_tauri/src/styles/template.css index e4239ff9ca..800ae4dc3c 100644 --- a/frontend/appflowy_tauri/src/styles/template.css +++ b/frontend/appflowy_tauri/src/styles/template.css @@ -47,4 +47,19 @@ th { span[data-slate-placeholder="true"]:not(.inline-block-content) { @apply text-text-placeholder; opacity: 1 !important; +} + +.sketch-picker { + background-color: var(--bg-body) !important; + border-color: transparent !important; + box-shadow: none !important; +} +.sketch-picker .flexbox-fix { + border-color: var(--line-divider) !important; +} +.sketch-picker [id^='rc-editable-input'] { + background-color: var(--bg-body) !important; + border-color: var(--line-divider) !important; + color: var(--text-title) !important; + box-shadow: var(--line-border) 0px 0px 0px 1px inset !important; } \ No newline at end of file diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json index fad9d3f1ef..279ca8f1b4 100644 --- a/frontend/resources/translations/en.json +++ b/frontend/resources/translations/en.json @@ -608,5 +608,18 @@ "views": { "deleteContentTitle": "Are you sure want to delete the {pageType}?", "deleteContentCaption": "if you delete this {pageType}, you can restore it from the trash." + }, + "colors": { + "custom": "Custom", + "default": "Default", + "red": "Red", + "orange": "Orange", + "yellow": "Yellow", + "green": "Green", + "blue": "Blue", + "purple": "Purple", + "pink": "Pink", + "brown": "Brown", + "gray": "Gray" } } \ No newline at end of file