From ba8cbe170cf71c8fd5c559926adc1028376212a3 Mon Sep 17 00:00:00 2001 From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com> Date: Mon, 8 May 2023 10:31:35 +0800 Subject: [PATCH] Support divider block and callout block (#2457) * feat: divider block * feat: callout block --- frontend/appflowy_tauri/package.json | 3 ++ frontend/appflowy_tauri/pnpm-lock.yaml | 24 +++++++++ .../BlockHorizontalToolbar/FormatButton.tsx | 2 +- .../BlockHorizontalToolbar/index.hooks.ts | 2 +- .../BlockSelection/BlockSelection.hooks.tsx | 14 ++--- .../CalloutBlock/CalloutBlock.hooks.ts | 48 +++++++++++++++++ .../document/CalloutBlock/index.tsx | 51 +++++++++++++++++++ .../document/DividerBlock/index.tsx | 7 +++ .../components/document/Node/index.tsx | 8 +++ .../document/TextBlock/events/Events.hooks.ts | 2 +- .../TextBlock/events/TurnIntoEvents.hooks.ts | 51 ++++++++++++------- .../components/document/TextBlock/index.tsx | 2 +- .../document/_shared/TextInput.hooks.ts | 5 +- .../appflowy_app/constants/document/config.ts | 35 ++++++++++--- .../constants/document/text_block.ts | 1 + .../src/appflowy_app/interfaces/document.ts | 14 ++++- .../async-actions/blocks/text/insert.ts | 22 +++++--- .../reducers/document/async-actions/cursor.ts | 28 +++++----- .../document/async-actions/turn_to.ts | 29 ++++++++++- .../utils/document/blocks/common.ts | 2 +- .../utils/document/blocks/index.ts | 26 +++++++++- .../utils/document/blocks/text.ts | 16 ------ .../{slate/text.ts => blocks/text/delta.ts} | 12 ++++- .../document/{slate => blocks/text}/format.ts | 0 .../document/{slate => blocks/text}/hotkey.ts | 2 +- .../{slate => blocks/text}/toolbar.ts | 0 26 files changed, 328 insertions(+), 78 deletions(-) create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/document/CalloutBlock/CalloutBlock.hooks.ts create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/document/CalloutBlock/index.tsx create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/document/DividerBlock/index.tsx delete mode 100644 frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text.ts rename frontend/appflowy_tauri/src/appflowy_app/utils/document/{slate/text.ts => blocks/text/delta.ts} (92%) rename frontend/appflowy_tauri/src/appflowy_app/utils/document/{slate => blocks/text}/format.ts (100%) rename frontend/appflowy_tauri/src/appflowy_app/utils/document/{slate => blocks/text}/hotkey.ts (99%) rename frontend/appflowy_tauri/src/appflowy_app/utils/document/{slate => blocks/text}/toolbar.ts (100%) diff --git a/frontend/appflowy_tauri/package.json b/frontend/appflowy_tauri/package.json index b718bfd7c5..9d94c7d366 100644 --- a/frontend/appflowy_tauri/package.json +++ b/frontend/appflowy_tauri/package.json @@ -15,6 +15,8 @@ "tauri:dev": "tauri dev" }, "dependencies": { + "@emoji-mart/data": "^1.1.2", + "@emoji-mart/react": "^1.1.1", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@mui/icons-material": "^5.11.11", @@ -24,6 +26,7 @@ "@tanstack/react-virtual": "3.0.0-beta.54", "@tauri-apps/api": "^1.2.0", "dayjs": "^1.11.7", + "emoji-mart": "^5.5.2", "events": "^3.3.0", "google-protobuf": "^3.21.2", "i18next": "^22.4.10", diff --git a/frontend/appflowy_tauri/pnpm-lock.yaml b/frontend/appflowy_tauri/pnpm-lock.yaml index 71505bc604..55f228f229 100644 --- a/frontend/appflowy_tauri/pnpm-lock.yaml +++ b/frontend/appflowy_tauri/pnpm-lock.yaml @@ -1,6 +1,8 @@ lockfileVersion: 5.4 specifiers: + '@emoji-mart/data': ^1.1.2 + '@emoji-mart/react': ^1.1.1 '@emotion/react': ^11.10.6 '@emotion/styled': ^11.10.6 '@mui/icons-material': ^5.11.11 @@ -23,6 +25,7 @@ specifiers: '@vitejs/plugin-react': ^3.0.0 autoprefixer: ^10.4.13 dayjs: ^1.11.7 + emoji-mart: ^5.5.2 eslint: ^8.34.0 eslint-plugin-react: ^7.32.2 eslint-plugin-react-hooks: ^4.6.0 @@ -60,6 +63,8 @@ specifiers: yjs: ^13.5.51 dependencies: + '@emoji-mart/data': 1.1.2 + '@emoji-mart/react': 1.1.1_kyrnz3vmphzqyjjk2ivrm6bcsu '@emotion/react': 11.10.6_pmekkgnqduwlme35zpnqhenc34 '@emotion/styled': 11.10.6_oouaibmszuch5k64ms7uxp2aia '@mui/icons-material': 5.11.11_ao76n7r2cajsoyr3cbwrn7geoi @@ -69,6 +74,7 @@ dependencies: '@tanstack/react-virtual': 3.0.0-beta.54_react@18.2.0 '@tauri-apps/api': 1.2.0 dayjs: 1.11.7 + emoji-mart: 5.5.2 events: 3.3.0 google-protobuf: 3.21.2 i18next: 22.4.10 @@ -467,6 +473,20 @@ packages: resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} dev: false + /@emoji-mart/data/1.1.2: + resolution: {integrity: sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg==} + dev: false + + /@emoji-mart/react/1.1.1_kyrnz3vmphzqyjjk2ivrm6bcsu: + resolution: {integrity: sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==} + peerDependencies: + emoji-mart: ^5.2 + react: ^16.8 || ^17 || ^18 + dependencies: + emoji-mart: 5.5.2 + react: 18.2.0 + dev: false + /@emotion/babel-plugin/11.10.6: resolution: {integrity: sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==} dependencies: @@ -2308,6 +2328,10 @@ packages: engines: {node: '>=12'} dev: false + /emoji-mart/5.5.2: + resolution: {integrity: sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==} + dev: false + /emoji-regex/8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} dev: false diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockHorizontalToolbar/FormatButton.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockHorizontalToolbar/FormatButton.tsx index 174af2e1ef..0c0d44416c 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockHorizontalToolbar/FormatButton.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockHorizontalToolbar/FormatButton.tsx @@ -1,4 +1,4 @@ -import { toggleFormat, isFormatActive } from '$app/utils/document/slate/format'; +import { toggleFormat, isFormatActive } from '$app/utils/document/blocks/text/format'; import IconButton from '@mui/material/IconButton'; import Tooltip from '@mui/material/Tooltip'; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockHorizontalToolbar/index.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockHorizontalToolbar/index.hooks.ts index 3347d398f6..faaf40ea99 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockHorizontalToolbar/index.hooks.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockHorizontalToolbar/index.hooks.ts @@ -1,6 +1,6 @@ import { useEffect, useRef } from 'react'; import { useFocused, useSlate } from 'slate-react'; -import { calcToolbarPosition } from '$app/utils/document/slate/toolbar'; +import { calcToolbarPosition } from '$app/utils/document/blocks/text/toolbar'; export function useHoveringToolbar(id: string) { const editor = useSlate(); const inFocus = useFocused(); diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockSelection.hooks.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockSelection.hooks.tsx index 6015440964..9c6ce23085 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockSelection.hooks.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockSelection.hooks.tsx @@ -133,14 +133,16 @@ export function useBlockSelection({ useEffect(() => { if (!ref.current) return; - document.addEventListener('mousedown', handleDragStart); - document.addEventListener('mousemove', handleDraging); - document.addEventListener('mouseup', handleDragEnd); + const doc = document.getElementById('appflowy-block-doc'); + if (!doc) return; + doc.addEventListener('mousedown', handleDragStart); + doc.addEventListener('mousemove', handleDraging); + doc.addEventListener('mouseup', handleDragEnd); return () => { - document.removeEventListener('mousedown', handleDragStart); - document.removeEventListener('mousemove', handleDraging); - document.removeEventListener('mouseup', handleDragEnd); + doc.removeEventListener('mousedown', handleDragStart); + doc.removeEventListener('mousemove', handleDraging); + doc.removeEventListener('mouseup', handleDragEnd); }; }, [handleDragStart, handleDragEnd, handleDraging]); diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/CalloutBlock/CalloutBlock.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/CalloutBlock/CalloutBlock.hooks.ts new file mode 100644 index 0000000000..609df9d754 --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/CalloutBlock/CalloutBlock.hooks.ts @@ -0,0 +1,48 @@ +import { useCallback, useContext, useMemo, useState } from 'react'; +import emojiData, { EmojiMartData, Emoji } from '@emoji-mart/data'; +import { useAppDispatch } from '$app/stores/store'; +import { DocumentControllerContext } from '$app/stores/effects/document/document_controller'; +import { updateNodeDataThunk } from '$app_reducers/document/async-actions'; + +export function useCalloutBlock(nodeId: string) { + const [anchorEl, setAnchorEl] = useState(null); + const open = useMemo(() => Boolean(anchorEl), [anchorEl]); + const id = useMemo(() => (open ? 'emoji-popover' : undefined), [open]); + const dispatch = useAppDispatch(); + const controller = useContext(DocumentControllerContext); + + const closeEmojiSelect = useCallback(() => { + setAnchorEl(null); + }, []); + + const openEmojiSelect = useCallback((event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }, []); + + const onEmojiSelect = useCallback( + (emoji: { native: string }) => { + if (!controller) return; + console.log('emoji', emoji.native); + void dispatch( + updateNodeDataThunk({ + id: nodeId, + controller, + data: { + icon: emoji.native, + }, + }) + ); + closeEmojiSelect(); + }, + [controller, dispatch, nodeId, closeEmojiSelect] + ); + + return { + anchorEl, + closeEmojiSelect, + openEmojiSelect, + open, + id, + onEmojiSelect, + }; +} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/CalloutBlock/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/CalloutBlock/index.tsx new file mode 100644 index 0000000000..feaa568e35 --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/CalloutBlock/index.tsx @@ -0,0 +1,51 @@ +import { BlockType, NestedBlock } from '$app/interfaces/document'; +import TextBlock from '$app/components/document/TextBlock'; +import NodeChildren from '$app/components/document/Node/NodeChildren'; +import { IconButton, Popover } from '@mui/material'; +import emojiData from '@emoji-mart/data'; +import Picker from '@emoji-mart/react'; +import { useCalloutBlock } from '$app/components/document/CalloutBlock/CalloutBlock.hooks'; + +export default function CalloutBlock({ + node, + childIds, +}: { + node: NestedBlock; + childIds?: string[]; +}) { + const { openEmojiSelect, open, closeEmojiSelect, id, anchorEl, onEmojiSelect } = useCalloutBlock(node.id); + + return ( +
+
+
+ + {node.data.icon} + + + + +
+
+
+
+ +
+ +
+
+ ); +} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/DividerBlock/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/DividerBlock/index.tsx new file mode 100644 index 0000000000..691af951ed --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/DividerBlock/index.tsx @@ -0,0 +1,7 @@ +export default function DividerBlock() { + 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 59152f5570..ebaed0e264 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 @@ -13,6 +13,8 @@ import QuoteBlock from '$app/components/document/QuoteBlock'; import BulletedListBlock from '$app/components/document/BulletedListBlock'; import NumberedListBlock from '$app/components/document/NumberedListBlock'; import ToggleListBlock from '$app/components/document/ToggleListBlock'; +import DividerBlock from '$app/components/document/DividerBlock'; +import CalloutBlock from '$app/components/document/CalloutBlock'; function NodeComponent({ id, ...props }: { id: string } & React.HTMLAttributes) { const { node, childIds, isSelected, ref } = useNode(id); @@ -40,6 +42,12 @@ function NodeComponent({ id, ...props }: { id: string } & React.HTMLAttributes; } + case BlockType.DividerBlock: { + return ; + } + case BlockType.CalloutBlock: { + return ; + } default: return ( diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/events/Events.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/events/Events.hooks.ts index 2c8b324685..241d96db92 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/events/Events.hooks.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/events/Events.hooks.ts @@ -12,7 +12,7 @@ import { canHandleUpKey, onHandleEnterKey, triggerHotkey, -} from '$app/utils/document/slate/hotkey'; +} from '$app/utils/document/blocks/text/hotkey'; import { TextBlockKeyEventHandlerParams } from '$app/interfaces/document'; import { useActions } from './Actions.hooks'; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/events/TurnIntoEvents.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/events/TurnIntoEvents.hooks.ts index d9ffced9df..e35290ddeb 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/events/TurnIntoEvents.hooks.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/events/TurnIntoEvents.hooks.ts @@ -3,10 +3,10 @@ import { BlockData, BlockType, TextBlockKeyEventHandlerParams } from '$app/inter import { keyBoardEventKeyMap } from '$app/constants/document/text_block'; import { useAppDispatch } from '$app/stores/store'; import { DocumentControllerContext } from '$app/stores/effects/document/document_controller'; -import { turnToBlockThunk } from '$app_reducers/document/async-actions'; +import { turnToBlockThunk, turnToDividerBlockThunk } from '$app_reducers/document/async-actions'; import { blockConfig } from '$app/constants/document/config'; import { Editor } from 'slate'; -import { getBeforeRangeAt } from '$app/utils/document/slate/text'; +import { getBeforeRangeAt } from '$app/utils/document/blocks/text/delta'; import { getHeadingDataFromEditor, getQuoteDataFromEditor, @@ -14,27 +14,29 @@ import { getBulletedDataFromEditor, getNumberedListDataFromEditor, getToggleListDataFromEditor, + getCalloutDataFromEditor, } from '$app/utils/document/blocks'; - -const blockDataFactoryMap: Record BlockData | undefined> = { - [BlockType.HeadingBlock]: getHeadingDataFromEditor, - [BlockType.TodoListBlock]: getTodoListDataFromEditor, - [BlockType.QuoteBlock]: getQuoteDataFromEditor, - [BlockType.BulletedListBlock]: getBulletedDataFromEditor, - [BlockType.NumberedListBlock]: getNumberedListDataFromEditor, - [BlockType.ToggleListBlock]: getToggleListDataFromEditor, -}; +import { getDeltaAfterSelection } from '$app/utils/document/blocks/common'; export function useTurnIntoBlock(id: string) { const controller = useContext(DocumentControllerContext); const dispatch = useAppDispatch(); const turnIntoBlockEvents = useMemo(() => { - return Object.entries(blockDataFactoryMap).map(([type, getData]) => { + const spaceTriggerEvents = Object.entries({ + [BlockType.HeadingBlock]: getHeadingDataFromEditor, + [BlockType.TodoListBlock]: getTodoListDataFromEditor, + [BlockType.QuoteBlock]: getQuoteDataFromEditor, + [BlockType.BulletedListBlock]: getBulletedDataFromEditor, + [BlockType.NumberedListBlock]: getNumberedListDataFromEditor, + [BlockType.ToggleListBlock]: getToggleListDataFromEditor, + [BlockType.CalloutBlock]: getCalloutDataFromEditor, + }).map(([type, getData]) => { const blockType = type as BlockType; + const triggerKey = keyBoardEventKeyMap.Space; return { triggerEventKey: keyBoardEventKeyMap.Space, - canHandle: canHandle(blockType), + canHandle: canHandle(blockType, triggerKey), handler: (...args: TextBlockKeyEventHandlerParams) => { if (!controller) return; const [_event, editor] = args; @@ -43,7 +45,20 @@ export function useTurnIntoBlock(id: string) { dispatch(turnToBlockThunk({ id, data, type: blockType, controller })); }, }; - }, []); + }); + return [ + ...spaceTriggerEvents, + { + triggerEventKey: keyBoardEventKeyMap.Reduce, + canHandle: canHandle(BlockType.DividerBlock, keyBoardEventKeyMap.Reduce), + handler: (...args: TextBlockKeyEventHandlerParams) => { + if (!controller) return; + const [_event, editor] = args; + const delta = getDeltaAfterSelection(editor) || []; + dispatch(turnToDividerBlockThunk({ id, controller, delta })); + }, + }, + ]; }, [controller, dispatch, id]); return { @@ -51,7 +66,7 @@ export function useTurnIntoBlock(id: string) { }; } -function canHandle(type: BlockType) { +function canHandle(type: BlockType, triggerKey: string) { const config = blockConfig[type]; const regex = config.markdownRegexps; @@ -62,16 +77,16 @@ function canHandle(type: BlockType) { return (...args: TextBlockKeyEventHandlerParams) => { const [event, editor] = args; - const isSpaceKey = event.key === keyBoardEventKeyMap.Space; + const isTrigger = event.key === triggerKey; const selection = editor.selection; - if (!isSpaceKey || !selection) { + if (!isTrigger || !selection) { return false; } const flag = Editor.string(editor, getBeforeRangeAt(editor, selection)).trim(); if (flag === null) return false; - return regex.some((r) => r.test(flag)); + return regex.some((r) => r.test(`${flag}${triggerKey}`)); }; } diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/index.tsx index 01a4326e38..4b5cd0bae4 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/index.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/index.tsx @@ -3,7 +3,7 @@ import Leaf from './Leaf'; import { useTextBlock } from './TextBlock.hooks'; import BlockHorizontalToolbar from '../BlockHorizontalToolbar'; import React from 'react'; -import { NestedBlock } from '$app/interfaces/document'; +import { BlockType, NestedBlock } from '$app/interfaces/document'; import NodeChildren from '$app/components/document/Node/NodeChildren'; function TextBlock({ diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/TextInput.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/TextInput.hooks.ts index 483ae2bf8a..bc25098839 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/TextInput.hooks.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/TextInput.hooks.ts @@ -11,7 +11,8 @@ import { useAppDispatch, useAppSelector } from '@/appflowy_app/stores/store'; import { updateNodeDeltaThunk } from '$app_reducers/document/async-actions/blocks/text/update'; import { deltaToSlateValue, getDeltaFromSlateNodes } from '$app/utils/document/blocks/common'; import { documentActions } from '@/appflowy_app/stores/reducers/document/slice'; -import { isSameDelta } from '$app/utils/document/blocks/text'; + +import { isSameDelta } from '$app/utils/document/blocks/text/delta'; export function useTextInput(id: string) { const dispatch = useAppDispatch(); @@ -175,7 +176,7 @@ function setSelection(editor: ReactEditor, currentSelection: TextSelection) { const children = getDeltaFromSlateNodes(editor.children); // the path always has 2 elements, - // because the slate node is a two-dimensional array + // because the text node is a two-dimensional array const index = path[1]; // It is possible that the current selection is out of range if (children[index].insert.length < offset) { diff --git a/frontend/appflowy_tauri/src/appflowy_app/constants/document/config.ts b/frontend/appflowy_tauri/src/appflowy_app/constants/document/config.ts index 1495b8c141..5f12cdf05a 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/constants/document/config.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/constants/document/config.ts @@ -58,7 +58,7 @@ export const blockConfig: Record< /** * # or ## or ### */ - markdownRegexps: [/^(#{1,3})$/], + markdownRegexps: [/^(#{1,3})(\s)+$/], }, [BlockType.TodoListBlock]: { canAddChild: true, @@ -73,7 +73,7 @@ export const blockConfig: Record< /** * -[] or -[x] or -[ ] or [] or [x] or [ ] */ - markdownRegexps: [/^((-)?\[(x|\s)?\])$/], + markdownRegexps: [/^((-)?\[(x|\s)?\])(\s)+$/], }, [BlockType.BulletedListBlock]: { canAddChild: true, @@ -88,7 +88,7 @@ export const blockConfig: Record< /** * - or + or * */ - markdownRegexps: [/^(\s*[-+*])$/], + markdownRegexps: [/^(\s*[-+*])(\s)+$/], }, [BlockType.NumberedListBlock]: { canAddChild: true, @@ -104,7 +104,7 @@ export const blockConfig: Record< * 1. or 2. or 3. * a. or b. or c. */ - markdownRegexps: [/^(\s*[\d|a-zA-Z]+\.)$/], + markdownRegexps: [/^(\s*[\d|a-zA-Z]+\.)(\s)+$/], }, [BlockType.QuoteBlock]: { canAddChild: true, @@ -119,7 +119,22 @@ export const blockConfig: Record< /** * " or “ or ” */ - markdownRegexps: [/^("|“|”)$/], + markdownRegexps: [/^("|“|”)(\s)+$/], + }, + [BlockType.CalloutBlock]: { + canAddChild: true, + defaultData: { + delta: [], + icon: 'bulb', + }, + splitProps: { + nextLineRelationShip: SplitRelationship.NextSibling, + nextLineBlockType: BlockType.TextBlock, + }, + /** + * [!TIP] or [!INFO] or [!WARNING] or [!DANGER] + */ + markdownRegexps: [/^(\[!)(TIP|INFO|WARNING|DANGER)(\])(\s)+$/], }, [BlockType.ToggleListBlock]: { canAddChild: true, @@ -134,8 +149,16 @@ export const blockConfig: Record< /** * > */ - markdownRegexps: [/^(>)$/], + markdownRegexps: [/^(>)(\s)+$/], }, + [BlockType.DividerBlock]: { + canAddChild: false, + /** + * --- + */ + markdownRegexps: [/^(-{3,})$/], + }, + [BlockType.CodeBlock]: { canAddChild: false, /** diff --git a/frontend/appflowy_tauri/src/appflowy_app/constants/document/text_block.ts b/frontend/appflowy_tauri/src/appflowy_app/constants/document/text_block.ts index fbe973b69c..609c5f82c0 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/constants/document/text_block.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/constants/document/text_block.ts @@ -7,4 +7,5 @@ export const keyBoardEventKeyMap = { Left: 'ArrowLeft', Right: 'ArrowRight', Space: ' ', + Reduce: '-', }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/interfaces/document.ts b/frontend/appflowy_tauri/src/appflowy_app/interfaces/document.ts index 42b0ad6b86..a13388f476 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/interfaces/document.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/interfaces/document.ts @@ -42,10 +42,16 @@ export interface QuoteBlockData extends TextBlockData { size: 'default' | 'large'; } +export interface CalloutBlockData extends TextBlockData { + icon: string; +} + export interface TextBlockData { delta: TextDelta[]; } +export interface DividerBlockData {} + export type PageBlockData = TextBlockData; export type BlockData = Type extends BlockType.HeadingBlock @@ -62,7 +68,13 @@ export type BlockData = Type extends BlockType.HeadingBlock ? NumberedListBlockData : Type extends BlockType.ToggleListBlock ? ToggleListBlockData - : TextBlockData; + : Type extends BlockType.DividerBlock + ? DividerBlockData + : Type extends BlockType.CalloutBlock + ? CalloutBlockData + : Type extends BlockType.TextBlock + ? TextBlockData + : any; export interface NestedBlock { id: string; diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/blocks/text/insert.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/blocks/text/insert.ts index 398046b467..0a7a6a3fdb 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/blocks/text/insert.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/blocks/text/insert.ts @@ -1,22 +1,28 @@ -import { DocumentState } from '$app/interfaces/document'; +import { BlockData, BlockType, DocumentState } from '$app/interfaces/document'; import { DocumentController } from '$app/stores/effects/document/document_controller'; import { createAsyncThunk } from '@reduxjs/toolkit'; -import { newTextBlock } from '$app/utils/document/blocks/text'; +import { newBlock } from '$app/utils/document/blocks/common'; export const insertAfterNodeThunk = createAsyncThunk( 'document/insertAfterNode', - async (payload: { id: string; controller: DocumentController }, thunkAPI) => { - const { controller } = payload; - const { dispatch, getState } = thunkAPI; + async (payload: { id: string; controller: DocumentController; data?: BlockData; type?: BlockType }, thunkAPI) => { + const { + controller, + type = BlockType.TextBlock, + data = { + delta: [], + }, + } = payload; + const { getState } = thunkAPI; const state = getState() as { document: DocumentState }; const node = state.document.nodes[payload.id]; if (!node) return; const parentId = node.parent; if (!parentId) return; // create new node - const newNode = newTextBlock(parentId, { - delta: [], - }); + const newNode = newBlock(type, parentId, data); await controller.applyActions([controller.getInsertAction(newNode, node.id)]); + + return newNode.id; } ); diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/cursor.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/cursor.ts index 00b994ee2d..46d4111b69 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/cursor.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/cursor.ts @@ -9,7 +9,7 @@ import { getNodeBeginSelection, getNodeEndSelection, getStartLineSelectionByOffset, -} from '$app/utils/document/slate/text'; +} from '$app/utils/document/blocks/text/delta'; import { getNextLineId, getPrevLineId } from '$app/utils/document/blocks/common'; export const setCursorBeforeThunk = createAsyncThunk( @@ -43,13 +43,15 @@ export const setCursorPreLineThunk = createAsyncThunk( const state = (getState() as { document: DocumentState }).document; const prevId = getPrevLineId(state, id); if (!prevId) return; - const prevLineNode = state.nodes[prevId]; - // if prev line have no delta, just set block is selected - if (!prevLineNode.data.delta) { - dispatch(documentActions.setSelectionById(prevId)); - return; + let prevLineNode = state.nodes[prevId]; + // Find the prev line that has delta + while (prevLineNode && !prevLineNode.data.delta) { + const id = getPrevLineId(state, prevLineNode.id); + if (!id) return; + prevLineNode = state.nodes[id]; } + if (!prevLineNode) return; // whatever the selection is, set cursor to the end of prev line when focusEnd is true if (focusEnd) { @@ -76,14 +78,16 @@ export const setCursorNextLineThunk = createAsyncThunk( const node = state.nodes[id]; const nextId = getNextLineId(state, id); if (!nextId) return; - const nextLineNode = state.nodes[nextId]; - const delta = nextLineNode.data.delta; - // if next line have no delta, just set block is selected - if (!delta) { - dispatch(documentActions.setSelectionById(nextId)); - return; + let nextLineNode = state.nodes[nextId]; + // Find the next line that has delta + while (nextLineNode && !nextLineNode.data.delta) { + const id = getNextLineId(state, nextLineNode.id); + if (!id) return; + nextLineNode = state.nodes[id]; } + if (!nextLineNode) return; + const delta = nextLineNode.data.delta; // whatever the selection is, set cursor to the start of next line when focusStart is true if (focusStart) { await dispatch(setCursorBeforeThunk({ id: nextLineNode.id })); diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/turn_to.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/turn_to.ts index 470a0c2f56..69d112d244 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/turn_to.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/stores/reducers/document/async-actions/turn_to.ts @@ -1,9 +1,10 @@ import { createAsyncThunk } from '@reduxjs/toolkit'; import { DocumentController } from '$app/stores/effects/document/document_controller'; -import { BlockData, BlockType, DocumentState, NestedBlock } from '$app/interfaces/document'; +import { BlockData, BlockType, DocumentState, NestedBlock, TextDelta } from '$app/interfaces/document'; import { setCursorBeforeThunk } from '$app_reducers/document/async-actions/cursor'; import { blockConfig } from '$app/constants/document/config'; import { newBlock } from '$app/utils/document/blocks/common'; +import { insertAfterNodeThunk } from '$app_reducers/document/async-actions/blocks'; /** * transform to block @@ -47,3 +48,29 @@ export const turnToBlockThunk = createAsyncThunk( await dispatch(setCursorBeforeThunk({ id: block.id })); } ); + +/** + * turn to divider block + * 1. insert text block with delta after current block + * 2. turn current block to divider block + */ +export const turnToDividerBlockThunk = createAsyncThunk( + 'document/turnToDividerBlock', + async (payload: { id: string; controller: DocumentController; delta: TextDelta[] }, thunkAPI) => { + const { id, controller, delta } = payload; + const { dispatch } = thunkAPI; + const { payload: newNodeId } = await dispatch( + insertAfterNodeThunk({ + id, + controller, + type: BlockType.TextBlock, + data: { + delta, + }, + }) + ); + if (!newNodeId) return; + await dispatch(turnToBlockThunk({ id, type: BlockType.DividerBlock, controller, data: {} })); + dispatch(setCursorBeforeThunk({ id: newNodeId as string })); + } +); diff --git a/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/common.ts b/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/common.ts index 97a5e9251f..4fe8a64ff1 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/common.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/common.ts @@ -3,7 +3,7 @@ import { Descendant, Editor, Element, Text } from 'slate'; import { BlockPB } from '@/services/backend'; import { Log } from '$app/utils/log'; import { nanoid } from 'nanoid'; -import { getAfterRangeAt } from '$app/utils/document/slate/text'; +import { getAfterRangeAt } from '$app/utils/document/blocks/text/delta'; export function deltaToSlateValue(delta: TextDelta[]) { const slateNode = { diff --git a/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/index.ts b/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/index.ts index e42d280c0d..e2ca7886c6 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/index.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/index.ts @@ -1,12 +1,13 @@ import { Editor } from 'slate'; import { BulletListBlockData, + CalloutBlockData, HeadingBlockData, NumberedListBlockData, TodoListBlockData, ToggleListBlockData, } from '$app/interfaces/document'; -import { getBeforeRangeAt } from '$app/utils/document/slate/text'; +import { getBeforeRangeAt } from '$app/utils/document/blocks/text/delta'; import { getDeltaAfterSelection } from '$app/utils/document/blocks/common'; /** @@ -94,3 +95,26 @@ export function getToggleListDataFromEditor(editor: Editor): ToggleListBlockData collapsed: false, }; } + +/** + * get callout data from editor, only support markdown + */ +export function getCalloutDataFromEditor(editor: Editor): CalloutBlockData | undefined { + const delta = getDeltaAfterSelection(editor); + if (!delta) return; + const selection = editor.selection; + if (!selection) return; + const hashTags = Editor.string(editor, getBeforeRangeAt(editor, selection)); + const tag = hashTags.match(/(TIP|INFO|WARNING|DANGER)/g)?.[0]; + if (!tag) return; + const iconMap: Record = { + TIP: '💡', + INFO: '❗', + WARNING: '⚠️', + DANGER: '‼️', + }; + return { + delta, + icon: iconMap[tag], + }; +} diff --git a/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text.ts b/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text.ts deleted file mode 100644 index 3fa667611b..0000000000 --- a/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { BlockType, NestedBlock, TextBlockData, TextDelta } from '$app/interfaces/document'; -import { newBlock } from '$app/utils/document/blocks/common'; -import * as Y from 'yjs'; - -export function newTextBlock(parentId: string, data: TextBlockData): NestedBlock { - return newBlock(BlockType.TextBlock, parentId, data); -} - -export function isSameDelta(referDelta: TextDelta[], delta: TextDelta[]) { - const ydoc = new Y.Doc(); - const yText = ydoc.getText('1'); - const yTextRefer = ydoc.getText('2'); - yText.applyDelta(delta); - yTextRefer.applyDelta(referDelta); - return JSON.stringify(yText.toDelta()) === JSON.stringify(yTextRefer.toDelta()); -} diff --git a/frontend/appflowy_tauri/src/appflowy_app/utils/document/slate/text.ts b/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text/delta.ts similarity index 92% rename from frontend/appflowy_tauri/src/appflowy_app/utils/document/slate/text.ts rename to frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text/delta.ts index a643cfc6b0..7ca518875b 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/utils/document/slate/text.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text/delta.ts @@ -1,5 +1,6 @@ -import { Editor, Element, Text, Location } from 'slate'; +import { Editor, Element, Location, Text } from 'slate'; import { SelectionPoint, TextDelta, TextSelection } from '$app/interfaces/document'; +import * as Y from 'yjs'; export function getDelta(editor: Editor, at: Location): TextDelta[] { const baseElement = Editor.fragment(editor, at)[0] as Element; @@ -198,3 +199,12 @@ export function clonePoint(point: SelectionPoint): SelectionPoint { offset: point.offset, }; } + +export function isSameDelta(referDelta: TextDelta[], delta: TextDelta[]) { + const ydoc = new Y.Doc(); + const yText = ydoc.getText('1'); + const yTextRefer = ydoc.getText('2'); + yText.applyDelta(delta); + yTextRefer.applyDelta(referDelta); + return JSON.stringify(yText.toDelta()) === JSON.stringify(yTextRefer.toDelta()); +} diff --git a/frontend/appflowy_tauri/src/appflowy_app/utils/document/slate/format.ts b/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text/format.ts similarity index 100% rename from frontend/appflowy_tauri/src/appflowy_app/utils/document/slate/format.ts rename to frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text/format.ts diff --git a/frontend/appflowy_tauri/src/appflowy_app/utils/document/slate/hotkey.ts b/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text/hotkey.ts similarity index 99% rename from frontend/appflowy_tauri/src/appflowy_app/utils/document/slate/hotkey.ts rename to frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text/hotkey.ts index 70f5b764f8..df39fce3d8 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/utils/document/slate/hotkey.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text/hotkey.ts @@ -1,7 +1,7 @@ import isHotkey from 'is-hotkey'; import { toggleFormat } from './format'; import { Editor, Range } from 'slate'; -import { clonePoint, getAfterRangeAt, getBeforeRangeAt, getDelta, pointInBegin, pointInEnd } from './text'; +import { clonePoint, getAfterRangeAt, getBeforeRangeAt, getDelta, pointInBegin, pointInEnd } from './delta'; import { SelectionPoint, TextDelta, TextSelection } from '$app/interfaces/document'; import { keyBoardEventKeyMap } from '$app/constants/document/text_block'; diff --git a/frontend/appflowy_tauri/src/appflowy_app/utils/document/slate/toolbar.ts b/frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text/toolbar.ts similarity index 100% rename from frontend/appflowy_tauri/src/appflowy_app/utils/document/slate/toolbar.ts rename to frontend/appflowy_tauri/src/appflowy_app/utils/document/blocks/text/toolbar.ts