From 4e99952b0e9c29920cac9ff8929179565193a382 Mon Sep 17 00:00:00 2001 From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com> Date: Thu, 21 Mar 2024 21:52:48 +0800 Subject: [PATCH] feat: support editor default shortcuts (#4943) fix: pasted bugs --- .../application/document/document.service.ts | 6 +- .../_shared/popover/Popover.hooks.ts | 7 +- .../_shared/view_title/ViewBanner.tsx | 2 +- .../_shared/view_title/ViewTitleInput.tsx | 2 +- .../components/database/DatabaseTitle.tsx | 2 +- .../database_settings/FilterSettings.tsx | 4 + .../database_settings/SortSettings.tsx | 4 + .../components/edit_record/EditRecord.tsx | 2 +- .../edit_record/ExpandRecordModal.tsx | 6 +- .../components/edit_record/RecordDocument.tsx | 2 +- .../components/editor/command/index.ts | 44 +- .../components/editor/command/mark.ts | 7 +- .../editor/components/blocks/page/Page.tsx | 2 +- .../components/editor/CustomEditable.tsx | 18 +- .../editor/components/editor/Editor.hooks.ts | 11 +- .../editor/components/editor/Editor.tsx | 19 +- .../selection_toolbar/SelectionActions.tsx | 3 +- .../selection_toolbar/actions/align/Align.tsx | 35 +- .../selection_toolbar/actions/bold/Bold.tsx | 26 +- .../selection_toolbar/actions/href/Href.tsx | 75 +--- .../actions/href/LinkActions.tsx | 59 +++ .../selection_toolbar/actions/href/index.ts | 1 + .../actions/inline_code/InlineCode.tsx | 26 +- .../actions/italic/Italic.tsx | 25 +- .../actions/strikethrough/StrikeThrough.tsx | 26 +- .../actions/underline/Underline.tsx | 26 +- .../components/editor/editor.scss | 28 +- .../editor/plugins/copyPasted/index.ts | 2 + .../editor/plugins/copyPasted/utils.ts | 311 ++++++++++++++ .../editor/plugins/copyPasted/withCopy.ts | 40 ++ .../editor/plugins/copyPasted/withPasted.ts | 59 +++ .../editor/plugins/shortcuts/markdown.ts | 4 +- .../plugins/shortcuts/shortcuts.hooks.ts | 380 +++++++++++++++--- .../editor/plugins/shortcuts/withMarkdown.ts | 19 +- .../editor/plugins/withBlockPlugins.ts | 4 +- .../components/editor/plugins/withPasted.ts | 287 ------------- .../editor/plugins/withSplitNodes.ts | 10 +- .../editor/provider/utils/action.ts | 2 + .../components/layout/Layout.hooks.ts | 54 +++ .../appflowy_app/components/layout/Layout.tsx | 11 +- .../CollapseMenuButton.tsx | 21 +- .../components/layout/layout.scss | 8 +- .../layout/nested_page/NestedPage.hooks.ts | 4 +- .../layout/top_bar/DeletePageSnackbar.tsx | 1 - .../src/appflowy_app/utils/hotkeys.ts | 51 +++ 45 files changed, 1077 insertions(+), 659 deletions(-) create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/href/LinkActions.tsx create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/index.ts create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/utils.ts create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/withCopy.ts create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/withPasted.ts delete mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withPasted.ts create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.hooks.ts diff --git a/frontend/appflowy_tauri/src/appflowy_app/application/document/document.service.ts b/frontend/appflowy_tauri/src/appflowy_app/application/document/document.service.ts index 3b85063604..0db128ec7a 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/application/document/document.service.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/application/document/document.service.ts @@ -262,9 +262,11 @@ function flattenBlockJson(block: BlockJSON) { slateNode.children = block.children.map((child) => traverse(child)); if (textNode) { - if (!LIST_TYPES.includes(block.type as EditorNodeType) && slateNode.type !== EditorNodeType.Page) { + const texts = CustomEditor.getNodeTextContent(textNode); + + if (texts && !LIST_TYPES.includes(block.type as EditorNodeType) && slateNode.type !== EditorNodeType.Page) { slateNode.children.unshift(textNode); - } else { + } else if (texts) { slateNode.children.unshift({ type: EditorNodeType.Paragraph, children: [textNode], diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/popover/Popover.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/popover/Popover.hooks.ts index 7554c21bb0..0fc1b5e61e 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/popover/Popover.hooks.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/popover/Popover.hooks.ts @@ -202,7 +202,12 @@ const usePopoverAutoPosition = ({ newPosition.anchorPosition.top += anchorRect.height; } - if (newPosition.anchorOrigin.vertical === 'top' && newPosition.transformOrigin.vertical === 'bottom') { + if ( + isExceedViewportTop && + isExceedViewportBottom && + newPosition.anchorOrigin.vertical === 'top' && + newPosition.transformOrigin.vertical === 'bottom' + ) { newPosition.paperHeight = newPaperHeight - anchorRect.height; } diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/view_title/ViewBanner.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/view_title/ViewBanner.tsx index 8cb2b16b12..95e44ae9c2 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/view_title/ViewBanner.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/view_title/ViewBanner.tsx @@ -19,7 +19,7 @@ function ViewBanner({ onUpdateCover?: (cover?: PageCover) => void; }) { return ( -
+
{showCover && cover && }
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/view_title/ViewTitleInput.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/view_title/ViewTitleInput.tsx index ff3923109e..2c69bb4d76 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/view_title/ViewTitleInput.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/view_title/ViewTitleInput.tsx @@ -23,7 +23,7 @@ function ViewTitleInput({ value, onChange }: { value: string; onChange?: (value: autoFocus value={value} onInput={onTitleChange} - className={`min-h-[40px] resize-none text-4xl font-bold leading-[50px] caret-text-title`} + className={`min-h-[40px] resize-none text-5xl font-bold leading-[50px] caret-text-title`} /> ); } diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/DatabaseTitle.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/DatabaseTitle.tsx index 793e14c2e0..cd94947d8d 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/database/DatabaseTitle.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/DatabaseTitle.tsx @@ -22,7 +22,7 @@ export const DatabaseTitle = () => { return (
setFilterAnchorEl(null)} + transformOrigin={{ + vertical: 'top', + horizontal: 'right', + }} anchorOrigin={{ vertical: 'bottom', horizontal: 'right', diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/database_settings/SortSettings.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/database_settings/SortSettings.tsx index 09a0f48129..7f978120df 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/database_settings/SortSettings.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/database_settings/SortSettings.tsx @@ -39,6 +39,10 @@ function SortSettings({ onToggleCollection }: Props) { open={open} anchorEl={sortAnchorEl} onClose={handleClose} + transformOrigin={{ + vertical: 'top', + horizontal: 'right', + }} anchorOrigin={{ vertical: 'bottom', horizontal: 'right', diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/edit_record/EditRecord.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/edit_record/EditRecord.tsx index b14a3a9783..13f29a7dfc 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/edit_record/EditRecord.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/edit_record/EditRecord.tsx @@ -60,4 +60,4 @@ function EditRecord({ rowId }: Props) { ); } -export default React.memo(EditRecord); +export default EditRecord; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/edit_record/ExpandRecordModal.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/edit_record/ExpandRecordModal.tsx index cf3b1878dd..7056cd353d 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/database/components/edit_record/ExpandRecordModal.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/database/components/edit_record/ExpandRecordModal.tsx @@ -1,10 +1,10 @@ import React, { useState } from 'react'; import { DialogProps, IconButton, Portal } from '@mui/material'; -import DialogContent from '@mui/material/DialogContent'; import Dialog from '@mui/material/Dialog'; import { ReactComponent as DetailsIcon } from '$app/assets/details.svg'; import RecordActions from '$app/components/database/components/edit_record/RecordActions'; import EditRecord from '$app/components/database/components/edit_record/EditRecord'; +import { AFScroller } from '$app/components/_shared/scroller'; interface Props extends DialogProps { rowId: string; @@ -25,9 +25,9 @@ function ExpandRecordModal({ open, onClose, rowId }: Props) { className: 'h-[calc(100%-144px)] w-[80%] max-w-[960px] overflow-visible', }} > - + - + ; } -export default React.memo(RecordDocument); +export default RecordDocument; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/command/index.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/command/index.ts index 3fa48ffa5a..557b91f936 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/command/index.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/command/index.ts @@ -11,9 +11,10 @@ import { Path, EditorBeforeOptions, Text, + addMark, } from 'slate'; import { LIST_TYPES, tabBackward, tabForward } from '$app/components/editor/command/tab'; -import { isMarkActive, removeMarks, toggleMark } from '$app/components/editor/command/mark'; +import { getAllMarks, isMarkActive, removeMarks, toggleMark } from '$app/components/editor/command/mark'; import { deleteFormula, insertFormula, @@ -31,6 +32,7 @@ import { inlineNodeTypes, FormulaNode, ImageNode, + EditorMarkFormat, } from '$app/application/document/document.types'; import cloneDeep from 'lodash-es/cloneDeep'; import { generateId } from '$app/components/editor/provider/utils/convert'; @@ -235,6 +237,10 @@ export const CustomEditor = { }, toggleAlign(editor: ReactEditor, format: string) { + const isIncludeRoot = CustomEditor.selectionIncludeRoot(editor); + + if (isIncludeRoot) return; + const matchNodes = Array.from( Editor.nodes(editor, { // Note: we need to select the text node instead of the element node, otherwise the parent node will be selected @@ -670,4 +676,40 @@ export const CustomEditor = { return level; }, + + getLinks(editor: ReactEditor): string[] { + const marks = getAllMarks(editor); + + if (!marks) return []; + + return Object.entries(marks) + .filter(([key]) => key === 'href') + .map(([_, val]) => val as string); + }, + + extendLineBackward(editor: ReactEditor) { + Transforms.move(editor, { + unit: 'line', + edge: 'focus', + reverse: true, + }); + }, + + extendLineForward(editor: ReactEditor) { + Transforms.move(editor, { unit: 'line', edge: 'focus' }); + }, + + insertPlainText(editor: ReactEditor, text: string) { + const [appendText, ...lines] = text.split('\n'); + + editor.insertText(appendText); + lines.forEach((line) => { + editor.insertBreak(); + editor.insertText(line); + }); + }, + + highlight(editor: ReactEditor) { + addMark(editor, EditorMarkFormat.BgColor, 'appflowy_them_color_tint5'); + }, }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/command/mark.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/command/mark.ts index 45f3362f53..649eaca564 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/command/mark.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/command/mark.ts @@ -1,6 +1,7 @@ import { ReactEditor } from 'slate-react'; import { Editor, Text, Range, Element } from 'slate'; import { EditorInlineNodeType, EditorMarkFormat } from '$app/application/document/document.types'; +import { CustomEditor } from '$app/components/editor/command/index'; export function toggleMark( editor: ReactEditor, @@ -9,6 +10,10 @@ export function toggleMark( value: string | boolean; } ) { + if (CustomEditor.selectionIncludeRoot(editor)) { + return; + } + const { key, value } = mark; const isActive = isMarkActive(editor, key); @@ -48,7 +53,7 @@ export function isMarkActive(editor: ReactEditor, format: EditorMarkFormat | Edi return marks ? !!marks[format] : false; } -function getSelectionTexts(editor: ReactEditor) { +export function getSelectionTexts(editor: ReactEditor) { const selection = editor.selection; if (!selection) return []; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/blocks/page/Page.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/blocks/page/Page.tsx index 6d04a77c2e..f93cb897ba 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/blocks/page/Page.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/blocks/page/Page.tsx @@ -4,7 +4,7 @@ import { EditorElementProps, PageNode } from '$app/application/document/document export const Page = memo( forwardRef>(({ node: _, children, ...attributes }, ref) => { const className = useMemo(() => { - return `${attributes.className ?? ''} document-title pb-3 text-4xl font-bold`; + return `${attributes.className ?? ''} document-title pb-3 text-5xl font-bold`; }, [attributes.className]); return ( diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/editor/CustomEditable.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/editor/CustomEditable.tsx index 0f077b82d8..b0bbe0eb28 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/editor/CustomEditable.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/editor/CustomEditable.tsx @@ -1,7 +1,9 @@ -import React, { ComponentProps } from 'react'; -import { Editable } from 'slate-react'; +import React, { ComponentProps, useCallback } from 'react'; +import { Editable, useSlate } from 'slate-react'; import Element from './Element'; import { Leaf } from './Leaf'; +import { useShortcuts } from '$app/components/editor/plugins/shortcuts'; +import { useInlineKeyDown } from '$app/components/editor/components/editor/Editor.hooks'; type CustomEditableProps = Omit, 'renderElement' | 'renderLeaf'> & Partial, 'renderElement' | 'renderLeaf'>> & { @@ -14,9 +16,21 @@ export function CustomEditable({ renderLeaf = Leaf, ...props }: CustomEditableProps) { + const editor = useSlate(); + const { onKeyDown: onShortcutsKeyDown } = useShortcuts(editor); + const withInlineKeyDown = useInlineKeyDown(editor); + const onKeyDown = useCallback( + (event: React.KeyboardEvent) => { + withInlineKeyDown(event); + onShortcutsKeyDown(event); + }, + [onShortcutsKeyDown, withInlineKeyDown] + ); + return ( { @@ -112,7 +112,7 @@ export function useInlineKeyDown(editor: ReactEditor) { const { nativeEvent } = e; if ( - isHotkey('left', nativeEvent) && + createHotkey(HOT_KEY_NAME.LEFT)(nativeEvent) && CustomEditor.beforeIsInlineNode(editor, selection, { unit: 'offset', }) @@ -122,7 +122,10 @@ export function useInlineKeyDown(editor: ReactEditor) { return; } - if (isHotkey('right', nativeEvent) && CustomEditor.afterIsInlineNode(editor, selection, { unit: 'offset' })) { + if ( + createHotkey(HOT_KEY_NAME.RIGHT)(nativeEvent) && + CustomEditor.afterIsInlineNode(editor, selection, { unit: 'offset' }) + ) { e.preventDefault(); Transforms.move(editor, { unit: 'offset' }); return; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/editor/Editor.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/editor/Editor.tsx index 7b85a36bec..d87dbe3f35 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/editor/Editor.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/editor/Editor.tsx @@ -1,13 +1,8 @@ import React, { useCallback } from 'react'; -import { - useDecorateCodeHighlight, - useEditor, - useInlineKeyDown, -} from '$app/components/editor/components/editor/Editor.hooks'; +import { useDecorateCodeHighlight, useEditor } from '$app/components/editor/components/editor/Editor.hooks'; import { Slate } from 'slate-react'; import { CustomEditable } from '$app/components/editor/components/editor/CustomEditable'; import { SelectionToolbar } from '$app/components/editor/components/tools/selection_toolbar'; -import { useShortcuts } from 'src/appflowy_app/components/editor/plugins/shortcuts'; import { BlockActionsToolbar } from '$app/components/editor/components/tools/block_actions'; import { CircularProgress } from '@mui/material'; @@ -26,8 +21,7 @@ import { LocalEditorProps } from '$app/application/document/document.types'; function Editor({ sharedType, disableFocus, caretColor = 'var(--text-title)' }: LocalEditorProps) { const { editor, initialValue, handleOnClickEnd, ...props } = useEditor(sharedType); const decorateCodeHighlight = useDecorateCodeHighlight(editor); - const { onKeyDown: onShortcutsKeyDown } = useShortcuts(editor); - const withInlineKeyDown = useInlineKeyDown(editor); + const { selectedBlocks, decorate: decorateCustomRange, @@ -47,14 +41,6 @@ function Editor({ sharedType, disableFocus, caretColor = 'var(--text-title)' }: [decorateCodeHighlight, decorateCustomRange] ); - const onKeyDown = useCallback( - (event: React.KeyboardEvent) => { - withInlineKeyDown(event); - onShortcutsKeyDown(event); - }, - [onShortcutsKeyDown, withInlineKeyDown] - ); - if (editor.sharedRoot.length === 0) { return ; } @@ -72,7 +58,6 @@ function Editor({ sharedType, disableFocus, caretColor = 'var(--text-title)' }: } +
); } diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/align/Align.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/align/Align.tsx index 66d2839a96..23917e146b 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/align/Align.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/align/Align.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import Tooltip from '@mui/material/Tooltip'; import { ReactComponent as AlignLeftSvg } from '$app/assets/align-left.svg'; import { ReactComponent as AlignCenterSvg } from '$app/assets/align-center.svg'; @@ -6,10 +6,9 @@ import { ReactComponent as AlignRightSvg } from '$app/assets/align-right.svg'; import ActionButton from '$app/components/editor/components/tools/selection_toolbar/actions/_shared/ActionButton'; import { useTranslation } from 'react-i18next'; import { CustomEditor } from '$app/components/editor/command'; -import { ReactEditor, useSlateStatic } from 'slate-react'; +import { useSlateStatic } from 'slate-react'; import { IconButton } from '@mui/material'; import { ReactComponent as MoreSvg } from '$app/assets/more.svg'; -import { createHotkey, HOT_KEY_NAME } from '$app/utils/hotkeys'; export function Align() { const { t } = useTranslation(); @@ -61,36 +60,6 @@ export function Align() { } }, []); - useEffect(() => { - const editorDom = ReactEditor.toDOMNode(editor, editor); - const handleShortcut = (e: KeyboardEvent) => { - if (createHotkey(HOT_KEY_NAME.ALIGN_LEFT)(e)) { - e.preventDefault(); - e.stopPropagation(); - CustomEditor.toggleAlign(editor, 'left'); - return; - } - - if (createHotkey(HOT_KEY_NAME.ALIGN_CENTER)(e)) { - e.preventDefault(); - e.stopPropagation(); - CustomEditor.toggleAlign(editor, 'center'); - return; - } - - if (createHotkey(HOT_KEY_NAME.ALIGN_RIGHT)(e)) { - e.preventDefault(); - e.stopPropagation(); - CustomEditor.toggleAlign(editor, 'right'); - return; - } - }; - - editorDom.addEventListener('keydown', handleShortcut); - return () => { - editorDom.removeEventListener('keydown', handleShortcut); - }; - }, [editor]); return ( { - const editorDom = ReactEditor.toDOMNode(editor, editor); - const handleShortcut = (e: KeyboardEvent) => { - if (createHotkey(HOT_KEY_NAME.BOLD)(e)) { - e.preventDefault(); - e.stopPropagation(); - CustomEditor.toggleMark(editor, { - key: EditorMarkFormat.Bold, - value: true, - }); - return; - } - }; - - editorDom.addEventListener('keydown', handleShortcut); - return () => { - editorDom.removeEventListener('keydown', handleShortcut); - }; - }, [editor]); - return ( { - const range = decorateState?.range; - - if (!range) return; - - const domRange = ReactEditor.toDOMRange(editor, range); - - const rect = domRange.getBoundingClientRect(); - - return { - top: rect.top, - left: rect.left, - height: rect.height, - }; - }, [decorateState?.range, editor]); - - const defaultHref = useMemo(() => { - const range = decorateState?.range; - - if (!range) return ''; - - const marks = Editor.marks(editor); - - return marks?.href || Editor.string(editor, range); - }, [decorateState?.range, editor]); - - const { add: addDecorate, clear: clearDecorate } = useDecorateDispatch(); + const { add: addDecorate } = useDecorateDispatch(); const onClick = useCallback(() => { if (!editor.selection) return; addDecorate({ @@ -55,33 +24,6 @@ export function Href() { }); }, [addDecorate, editor]); - const handleEditPopoverClose = useCallback(() => { - const range = decorateState?.range; - - clearDecorate(); - if (range) { - ReactEditor.focus(editor); - editor.select(range); - } - }, [clearDecorate, decorateState?.range, editor]); - - useEffect(() => { - const editorDom = ReactEditor.toDOMNode(editor, editor); - const handleShortcut = (e: KeyboardEvent) => { - if (isHotkey('mod+k', e)) { - if (editor.selection && Range.isCollapsed(editor.selection)) return; - e.preventDefault(); - e.stopPropagation(); - onClick(); - } - }; - - editorDom.addEventListener('keydown', handleShortcut); - return () => { - editorDom.removeEventListener('keydown', handleShortcut); - }; - }, [editor, onClick]); - const tooltip = useMemo(() => { const modifier = getModifier(); @@ -98,15 +40,6 @@ export function Href() { - {openEditPopover && ( - - )} ); } diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/href/LinkActions.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/href/LinkActions.tsx new file mode 100644 index 0000000000..b77a249051 --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/href/LinkActions.tsx @@ -0,0 +1,59 @@ +import React, { useCallback, useMemo } from 'react'; +import { useDecorateDispatch, useDecorateState } from '$app/components/editor/stores'; +import { ReactEditor, useSlateStatic } from 'slate-react'; +import { Editor } from 'slate'; +import { LinkEditPopover } from '$app/components/editor/components/inline_nodes/link'; + +export function LinkActions() { + const editor = useSlateStatic(); + const decorateState = useDecorateState('link'); + const openEditPopover = !!decorateState; + const { clear: clearDecorate } = useDecorateDispatch(); + + const anchorPosition = useMemo(() => { + const range = decorateState?.range; + + if (!range) return; + + const domRange = ReactEditor.toDOMRange(editor, range); + + const rect = domRange.getBoundingClientRect(); + + return { + top: rect.top, + left: rect.left, + height: rect.height, + }; + }, [decorateState?.range, editor]); + + const defaultHref = useMemo(() => { + const range = decorateState?.range; + + if (!range) return ''; + + const marks = Editor.marks(editor); + + return marks?.href || Editor.string(editor, range); + }, [decorateState?.range, editor]); + + const handleEditPopoverClose = useCallback(() => { + const range = decorateState?.range; + + clearDecorate(); + if (range) { + ReactEditor.focus(editor); + editor.select(range); + } + }, [clearDecorate, decorateState?.range, editor]); + + if (!openEditPopover) return null; + return ( + + ); +} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/href/index.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/href/index.ts index 758b3b39d3..9a7210c140 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/href/index.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/href/index.ts @@ -1 +1,2 @@ export * from './Href'; +export * from './LinkActions'; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/inline_code/InlineCode.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/inline_code/InlineCode.tsx index 39b48ad525..3cf9c7ed85 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/inline_code/InlineCode.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/inline_code/InlineCode.tsx @@ -1,11 +1,11 @@ -import React, { useCallback, useEffect, useMemo } from 'react'; +import React, { useCallback, useMemo } from 'react'; import ActionButton from '$app/components/editor/components/tools/selection_toolbar/actions/_shared/ActionButton'; import { useTranslation } from 'react-i18next'; -import { ReactEditor, useSlateStatic } from 'slate-react'; +import { useSlateStatic } from 'slate-react'; import { CustomEditor } from '$app/components/editor/command'; import { ReactComponent as CodeSvg } from '$app/assets/inline-code.svg'; import { EditorMarkFormat } from '$app/application/document/document.types'; -import { createHotkey, createHotKeyLabel, HOT_KEY_NAME } from '$app/utils/hotkeys'; +import { createHotKeyLabel, HOT_KEY_NAME } from '$app/utils/hotkeys'; export function InlineCode() { const { t } = useTranslation(); @@ -20,26 +20,6 @@ export function InlineCode() { }); }, [editor]); - useEffect(() => { - const editorDom = ReactEditor.toDOMNode(editor, editor); - const handleShortcut = (e: KeyboardEvent) => { - if (createHotkey(HOT_KEY_NAME.CODE)(e)) { - e.preventDefault(); - e.stopPropagation(); - CustomEditor.toggleMark(editor, { - key: EditorMarkFormat.Code, - value: true, - }); - return; - } - }; - - editorDom.addEventListener('keydown', handleShortcut); - return () => { - editorDom.removeEventListener('keydown', handleShortcut); - }; - }, [editor]); - return ( { - const editorDom = ReactEditor.toDOMNode(editor, editor); - const handleShortcut = (e: KeyboardEvent) => { - if (createHotkey(HOT_KEY_NAME.ITALIC)(e)) { - e.preventDefault(); - e.stopPropagation(); - CustomEditor.toggleMark(editor, { - key: EditorMarkFormat.Italic, - value: true, - }); - return; - } - }; - - editorDom.addEventListener('keydown', handleShortcut); - return () => { - editorDom.removeEventListener('keydown', handleShortcut); - }; - }, [editor]); return ( { - const editorDom = ReactEditor.toDOMNode(editor, editor); - const handleShortcut = (e: KeyboardEvent) => { - if (createHotkey(HOT_KEY_NAME.STRIKETHROUGH)(e)) { - e.preventDefault(); - e.stopPropagation(); - CustomEditor.toggleMark(editor, { - key: EditorMarkFormat.StrikeThrough, - value: true, - }); - return; - } - }; - - editorDom.addEventListener('keydown', handleShortcut); - return () => { - editorDom.removeEventListener('keydown', handleShortcut); - }; - }, [editor]); - return ( { - const editorDom = ReactEditor.toDOMNode(editor, editor); - const handleShortcut = (e: KeyboardEvent) => { - if (createHotkey(HOT_KEY_NAME.UNDERLINE)(e)) { - e.preventDefault(); - e.stopPropagation(); - CustomEditor.toggleMark(editor, { - key: EditorMarkFormat.Underline, - value: true, - }); - return; - } - }; - - editorDom.addEventListener('keydown', handleShortcut); - return () => { - editorDom.removeEventListener('keydown', handleShortcut); - }; - }, [editor]); - return ( div > .text-element { + > div > .text-element { text-align: right; justify-content: flex-end; - } } .block-element.block-align-center { @@ -40,6 +39,15 @@ display: none !important; } +[role=textbox] { + .text-element { + &::selection { + @apply bg-transparent; + } + } +} + + span[data-slate-placeholder="true"]:not(.inline-block-content) { @apply text-text-placeholder; @@ -47,9 +55,6 @@ span[data-slate-placeholder="true"]:not(.inline-block-content) { } - - - [role="textbox"] { ::selection { @apply bg-content-blue-100; @@ -90,6 +95,7 @@ span[data-slate-placeholder="true"]:not(.inline-block-content) { } } + .text-content, [data-dark-mode="true"] .text-content { @apply min-w-[1px]; &.empty-text { @@ -108,7 +114,7 @@ span[data-slate-placeholder="true"]:not(.inline-block-content) { } .text-placeholder { - @apply absolute left-[5px] w-full transform -translate-y-1/2 pointer-events-none select-none whitespace-nowrap; + @apply absolute left-[5px] transform -translate-y-1/2 pointer-events-none select-none whitespace-nowrap; &:after { @apply text-text-placeholder absolute top-0; content: (attr(placeholder)); @@ -117,13 +123,15 @@ span[data-slate-placeholder="true"]:not(.inline-block-content) { .block-align-center { .text-placeholder { + @apply left-[calc(50%+1px)]; &:after { - @apply left-[calc(50%-5px)] + @apply left-0; } } .has-start-icon .text-placeholder { + @apply left-[calc(50%+13px)]; &:after { - @apply left-[calc(50%+7px)]; + @apply left-0; } } @@ -146,9 +154,9 @@ span[data-slate-placeholder="true"]:not(.inline-block-content) { .text-placeholder { - @apply relative w-fit order-2; + @apply relative w-fit h-0 order-2; &:after { - @apply relative top-1/2 left-[-6px]; + @apply relative w-fit top-1/2 left-[-6px]; } } .text-content { diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/index.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/index.ts new file mode 100644 index 0000000000..bf2b09a1c3 --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/index.ts @@ -0,0 +1,2 @@ +export * from './withCopy'; +export * from './withPasted'; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/utils.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/utils.ts new file mode 100644 index 0000000000..cb377fece4 --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/utils.ts @@ -0,0 +1,311 @@ +import { ReactEditor } from 'slate-react'; +import { Editor, Node, Location, Range, Path, Element, Text, Transforms, NodeEntry } from 'slate'; +import { EditorNodeType } from '$app/application/document/document.types'; +import { CustomEditor } from '$app/components/editor/command'; +import { LIST_TYPES } from '$app/components/editor/command/tab'; + +/** + * Rewrite the insertFragment function to avoid the empty node(doesn't have text node) in the fragment + + * @param editor + * @param fragment + * @param options + */ +export function insertFragment( + editor: ReactEditor, + fragment: (Text | Element)[], + options: { + at?: Location; + hanging?: boolean; + voids?: boolean; + } = {} +) { + Editor.withoutNormalizing(editor, () => { + const { hanging = false, voids = false } = options; + let { at = getDefaultInsertLocation(editor) } = options; + + if (!fragment.length) { + return; + } + + if (Range.isRange(at)) { + if (!hanging) { + at = Editor.unhangRange(editor, at, { voids }); + } + + if (Range.isCollapsed(at)) { + at = at.anchor; + } else { + const [, end] = Range.edges(at); + + if (!voids && Editor.void(editor, { at: end })) { + return; + } + + const pointRef = Editor.pointRef(editor, end); + + Transforms.delete(editor, { at }); + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + at = pointRef.unref()!; + } + } else if (Path.isPath(at)) { + at = Editor.start(editor, at); + } + + if (!voids && Editor.void(editor, { at })) { + return; + } + + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const blockMatch = Editor.above(editor, { + match: (n) => Element.isElement(n) && Editor.isBlock(editor, n) && n.blockId !== undefined, + at, + voids, + })!; + const [block, blockPath] = blockMatch as NodeEntry; + + const isEmbedBlock = Element.isElement(block) && editor.isEmbed(block); + const isPageBlock = Element.isElement(block) && block.type === EditorNodeType.Page; + const isBlockStart = Editor.isStart(editor, at, blockPath); + const isBlockEnd = Editor.isEnd(editor, at, blockPath); + const isBlockEmpty = isBlockStart && isBlockEnd; + + if (isEmbedBlock) { + insertOnEmbedBlock(editor, fragment, blockPath); + return; + } + + if (isBlockEmpty && !isPageBlock) { + const node = fragment[0] as Element; + + if (block.type !== EditorNodeType.Paragraph) { + node.type = block.type; + node.data = { + ...(node.data || {}), + ...(block.data || {}), + }; + } + + insertOnEmptyBlock(editor, fragment, blockPath); + return; + } + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + const fragmentRoot: Node = { + children: fragment, + }; + const [, firstPath] = Node.first(fragmentRoot, []); + const [, lastPath] = Node.last(fragmentRoot, []); + const sameBlock = Path.equals(firstPath.slice(0, -1), lastPath.slice(0, -1)); + + if (sameBlock) { + insertTexts( + editor, + isPageBlock + ? ({ + children: [ + { + text: CustomEditor.getNodeTextContent(fragmentRoot), + }, + ], + } as Node) + : fragmentRoot, + at + ); + return; + } + + const isListTypeBlock = LIST_TYPES.includes(block.type as EditorNodeType); + const [, ...blockChildren] = block.children; + + const blockEnd = editor.end([...blockPath, 0]); + const afterRange: Range = { anchor: at, focus: blockEnd }; + + const afterTexts = getTexts(editor, { + children: editor.fragment(afterRange), + } as Node) as (Text | Element)[]; + + Transforms.delete(editor, { at: afterRange }); + + const { startTexts, startChildren, middles } = getFragmentGroup(editor, fragment); + + insertNodes( + editor, + isPageBlock + ? [ + { + text: CustomEditor.getNodeTextContent({ + children: startTexts, + } as Node), + }, + ] + : startTexts, + { + at, + } + ); + + if (isPageBlock) { + insertNodes(editor, [...startChildren, ...middles], { + at: Path.next(blockPath), + select: true, + }); + } else { + if (blockChildren.length > 0) { + const path = [...blockPath, 1]; + + insertNodes(editor, [...startChildren, ...middles], { + at: path, + select: true, + }); + } else { + const newMiddle = [...middles]; + + if (isListTypeBlock) { + const path = [...blockPath, 1]; + + insertNodes(editor, startChildren, { + at: path, + select: newMiddle.length === 0, + }); + } else { + newMiddle.unshift(...startChildren); + } + + insertNodes(editor, newMiddle, { + at: Path.next(blockPath), + select: true, + }); + } + } + + const { selection } = editor; + + if (!selection) return; + + insertNodes(editor, afterTexts, { + at: selection, + }); + }); +} + +function getFragmentGroup(editor: ReactEditor, fragment: Node[]) { + const startTexts = []; + const startChildren = []; + const middles = []; + + const [firstNode, ...otherNodes] = fragment; + const [firstNodeText, ...firstNodeChildren] = (firstNode as Element).children as Element[]; + + startTexts.push(...firstNodeText.children); + startChildren.push(...firstNodeChildren); + + for (const node of otherNodes) { + if (Element.isElement(node) && node.blockId !== undefined) { + middles.push(node); + } + } + + return { + startTexts, + startChildren, + middles, + }; +} + +function getTexts(editor: ReactEditor, fragment: Node) { + const matches = []; + const matcher = ([n]: NodeEntry) => Text.isText(n) || (Element.isElement(n) && editor.isInline(n)); + + for (const entry of Node.nodes(fragment, { pass: matcher })) { + if (matcher(entry)) { + matches.push(entry[0]); + } + } + + return matches; +} + +function insertTexts(editor: ReactEditor, fragmentRoot: Node, at: Location) { + const matches = getTexts(editor, fragmentRoot); + + insertNodes(editor, matches, { + at, + select: true, + }); +} + +function insertOnEmptyBlock(editor: ReactEditor, fragment: Node[], blockPath: Path) { + editor.removeNodes({ + at: blockPath, + }); + + insertNodes(editor, fragment, { + at: blockPath, + select: true, + }); +} + +function insertOnEmbedBlock(editor: ReactEditor, fragment: Node[], blockPath: Path) { + insertNodes(editor, fragment, { + at: Path.next(blockPath), + select: true, + }); +} + +function insertNodes(editor: ReactEditor, nodes: Node[], options: { at?: Location; select?: boolean } = {}) { + try { + Transforms.insertNodes(editor, nodes, options); + } catch (e) { + try { + editor.move({ + distance: 1, + unit: 'line', + }); + } catch (e) { + // do nothing + } + } +} + +/** + * Copy Code from slate/src/utils/get-default-insert-location.ts + * Get the default location to insert content into the editor. + * By default, use the selection as the target location. But if there is + * no selection, insert at the end of the document since that is such a + * common use case when inserting from a non-selected state. + */ +export const getDefaultInsertLocation = (editor: Editor): Location => { + if (editor.selection) { + return editor.selection; + } else if (editor.children.length > 0) { + return Editor.end(editor, []); + } else { + return [0]; + } +}; + +export function transFragment(editor: ReactEditor, fragment: Node[]) { + // flatten the fragment to avoid the empty node(doesn't have text node) in the fragment + const flatMap = (node: Node): Node[] => { + const isInputElement = + !Editor.isEditor(node) && Element.isElement(node) && node.blockId !== undefined && !editor.isEmbed(node); + + if ( + isInputElement && + node.children?.length > 0 && + Element.isElement(node.children[0]) && + node.children[0].type !== EditorNodeType.Text + ) { + return node.children.flatMap((child) => flatMap(child)); + } + + return [node]; + }; + + const fragmentFlatMap = fragment?.flatMap(flatMap); + + // clone the node to avoid the duplicated block id + return fragmentFlatMap.map((item) => CustomEditor.cloneBlock(editor, item as Element)); +} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/withCopy.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/withCopy.ts new file mode 100644 index 0000000000..c0daab0a8f --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/withCopy.ts @@ -0,0 +1,40 @@ +import { ReactEditor } from 'slate-react'; +import { Editor, Element, Range } from 'slate'; + +export function withCopy(editor: ReactEditor) { + const { setFragmentData } = editor; + + editor.setFragmentData = (...args) => { + if (!editor.selection) { + setFragmentData(...args); + return; + } + + // selection is collapsed and the node is an embed, we need to set the data manually + if (Range.isCollapsed(editor.selection)) { + const match = Editor.above(editor, { + match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.blockId !== undefined, + }); + const node = match ? (match[0] as Element) : undefined; + + if (node && editor.isEmbed(node)) { + const fragment = editor.getFragment(); + + if (fragment.length > 0) { + const data = args[0]; + const string = JSON.stringify(fragment); + const encoded = window.btoa(encodeURIComponent(string)); + + const dom = ReactEditor.toDOMNode(editor, node); + + data.setData(`application/x-slate-fragment`, encoded); + data.setData(`text/html`, dom.innerHTML); + } + } + } + + setFragmentData(...args); + }; + + return editor; +} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/withPasted.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/withPasted.ts new file mode 100644 index 0000000000..2266ff41c7 --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/withPasted.ts @@ -0,0 +1,59 @@ +import { ReactEditor } from 'slate-react'; +import { insertFragment, transFragment } from './utils'; +import { convertBlockToJson } from '$app/application/document/document.service'; +import { InputType } from '@/services/backend'; +import { CustomEditor } from '$app/components/editor/command'; +import { Log } from '$app/utils/log'; + +export function withPasted(editor: ReactEditor) { + const { insertData } = editor; + + editor.insertData = (data) => { + const fragment = data.getData('application/x-slate-fragment'); + + if (fragment) { + insertData(data); + return; + } + + const html = data.getData('text/html'); + const text = data.getData('text/plain'); + + if (!html && !text) { + insertData(data); + return; + } + + void (async () => { + try { + const nodes = await convertBlockToJson(html, InputType.Html); + + const htmlTransNoText = nodes.every((node) => { + return CustomEditor.getNodeTextContent(node).length === 0; + }); + + if (!htmlTransNoText) { + return editor.insertFragment(nodes); + } + } catch (e) { + Log.warn('pasted html error', e); + // ignore + } + + if (text) { + const nodes = await convertBlockToJson(text, InputType.PlainText); + + editor.insertFragment(nodes); + return; + } + })(); + }; + + editor.insertFragment = (fragment, options = {}) => { + const clonedFragment = transFragment(editor, fragment); + + insertFragment(editor, clonedFragment, options); + }; + + return editor; +} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/markdown.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/markdown.ts index 65072017e4..59ff0a8593 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/markdown.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/markdown.ts @@ -73,7 +73,7 @@ const defaultMarkdownRegex: MarkdownRegex = { ], [MarkdownShortcuts.CodeBlock]: [ { - pattern: /^(`{3,})$/, + pattern: /^(`{2,})$/, data: { language: 'json', }, @@ -81,7 +81,7 @@ const defaultMarkdownRegex: MarkdownRegex = { ], [MarkdownShortcuts.Divider]: [ { - pattern: /^(([-*]){3,})$/, + pattern: /^(([-*]){2,})$/, }, ], diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/shortcuts.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/shortcuts.hooks.ts index eb4cf8078f..45d61f847c 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/shortcuts.hooks.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/shortcuts.hooks.ts @@ -1,94 +1,346 @@ import { ReactEditor } from 'slate-react'; import { useCallback, KeyboardEvent } from 'react'; -import { EditorNodeType, ToggleListNode } from '$app/application/document/document.types'; -import isHotkey from 'is-hotkey'; +import { EditorMarkFormat, EditorNodeType, ToggleListNode } from '$app/application/document/document.types'; import { getBlock } from '$app/components/editor/plugins/utils'; import { SOFT_BREAK_TYPES } from '$app/components/editor/plugins/constants'; import { CustomEditor } from '$app/components/editor/command'; import { createHotkey, HOT_KEY_NAME } from '$app/utils/hotkeys'; +import { openUrl } from '$app/utils/open_url'; +import { Range } from 'slate'; +import { readText } from '@tauri-apps/api/clipboard'; +import { useDecorateDispatch } from '$app/components/editor/stores'; -/** - * Hotkeys shortcuts - * @description [getHotKeys] is defined in [hotkey.ts] - * - indent: Tab - * - outdent: Shift+Tab - * - split block: Enter - * - insert \n: Shift+Enter - * - toggle todo or toggle: Mod+Enter (toggle todo list or toggle list) - */ +function getScrollContainer(editor: ReactEditor) { + const editorDom = ReactEditor.toDOMNode(editor, editor); + + return editorDom.closest('.appflowy-scroll-container') as HTMLDivElement; +} export function useShortcuts(editor: ReactEditor) { + const { add: addDecorate } = useDecorateDispatch(); + + const formatLink = useCallback(() => { + const { selection } = editor; + + if (!selection || Range.isCollapsed(selection)) return; + + const isIncludeRoot = CustomEditor.selectionIncludeRoot(editor); + + if (isIncludeRoot) return; + + const isActivatedInline = CustomEditor.isInlineActive(editor); + + if (isActivatedInline) return; + + addDecorate({ + range: selection, + class_name: 'bg-content-blue-100 rounded', + type: 'link', + }); + }, [addDecorate, editor]); + const onKeyDown = useCallback( (e: KeyboardEvent) => { + const event = e.nativeEvent; + const hasEditableTarget = ReactEditor.hasEditableTarget(editor, event.target); + + if (!hasEditableTarget) return; + const node = getBlock(editor); - if (isHotkey('Escape', e)) { - e.preventDefault(); + const { selection } = editor; + const isExpanded = selection && Range.isExpanded(selection); - editor.deselect(); + switch (true) { + /** + * Select all: Mod+A + * Default behavior: Select all text in the editor + * Special case for select all in code block: Only select all text in code block + */ + case createHotkey(HOT_KEY_NAME.SELECT_ALL)(event): + if (node && node.type === EditorNodeType.CodeBlock) { + e.preventDefault(); + const path = ReactEditor.findPath(editor, node); - return; - } + editor.select(path); + } - if (isHotkey('Tab', e)) { - e.preventDefault(); - if (SOFT_BREAK_TYPES.includes(node?.type as EditorNodeType)) { - editor.insertText('\t'); - return; - } - - return CustomEditor.tabForward(editor); - } - - if (isHotkey('shift+Tab', e)) { - e.preventDefault(); - return CustomEditor.tabBackward(editor); - } - - if (isHotkey('Enter', e)) { - if (SOFT_BREAK_TYPES.includes(node?.type as EditorNodeType)) { + break; + /** + * Escape: Esc + * Default behavior: Deselect editor + */ + case createHotkey(HOT_KEY_NAME.ESCAPE)(event): + editor.deselect(); + break; + /** + * Indent block: Tab + * Default behavior: Indent block + */ + case createHotkey(HOT_KEY_NAME.INDENT_BLOCK)(event): e.preventDefault(); - editor.insertText('\n'); - return; - } - } + if (SOFT_BREAK_TYPES.includes(node?.type as EditorNodeType)) { + editor.insertText('\t'); + break; + } - if (isHotkey('shift+Enter', e) && node) { - e.preventDefault(); - if (SOFT_BREAK_TYPES.includes(node.type as EditorNodeType)) { - editor.splitNodes({ - always: true, + CustomEditor.tabForward(editor); + break; + /** + * Outdent block: Shift+Tab + * Default behavior: Outdent block + */ + case createHotkey(HOT_KEY_NAME.OUTDENT_BLOCK)(event): + e.preventDefault(); + CustomEditor.tabBackward(editor); + break; + /** + * Split block: Enter + * Default behavior: Split block + * Special case for soft break types: Insert \n + */ + case createHotkey(HOT_KEY_NAME.SPLIT_BLOCK)(event): + if (SOFT_BREAK_TYPES.includes(node?.type as EditorNodeType)) { + e.preventDefault(); + editor.insertText('\n'); + } + + break; + /** + * Insert soft break: Shift+Enter + * Default behavior: Insert \n + * Special case for soft break types: Split block + */ + case createHotkey(HOT_KEY_NAME.INSERT_SOFT_BREAK)(event): + e.preventDefault(); + if (node && SOFT_BREAK_TYPES.includes(node.type as EditorNodeType)) { + editor.splitNodes({ + always: true, + }); + } else { + editor.insertText('\n'); + } + + break; + /** + * Toggle todo: Shift+Enter + * Default behavior: Toggle todo + * Special case for toggle list block: Toggle collapse + */ + case createHotkey(HOT_KEY_NAME.TOGGLE_TODO)(event): + case createHotkey(HOT_KEY_NAME.TOGGLE_COLLAPSE)(event): + e.preventDefault(); + if (node && node.type === EditorNodeType.ToggleListBlock) { + CustomEditor.toggleToggleList(editor, node as ToggleListNode); + } else { + CustomEditor.toggleTodo(editor); + } + + break; + /** + * Backspace: Backspace / Shift+Backspace + * Default behavior: Delete backward + */ + case createHotkey(HOT_KEY_NAME.BACKSPACE)(event): + e.stopPropagation(); + break; + /** + * Open link: Alt + enter + * Default behavior: Open one link in selection + */ + case createHotkey(HOT_KEY_NAME.OPEN_LINK)(event): { + if (!isExpanded) break; + e.preventDefault(); + const links = CustomEditor.getLinks(editor); + + if (links.length === 0) break; + openUrl(links[0]); + break; + } + + /** + * Open links: Alt + Shift + enter + * Default behavior: Open all links in selection + */ + case createHotkey(HOT_KEY_NAME.OPEN_LINKS)(event): { + if (!isExpanded) break; + e.preventDefault(); + const links = CustomEditor.getLinks(editor); + + if (links.length === 0) break; + links.forEach((link) => openUrl(link)); + break; + } + + /** + * Extend line backward: Opt + Shift + right + * Default behavior: Extend line backward + */ + case createHotkey(HOT_KEY_NAME.EXTEND_LINE_BACKWARD)(event): + e.preventDefault(); + CustomEditor.extendLineBackward(editor); + break; + /** + * Extend line forward: Opt + Shift + left + */ + case createHotkey(HOT_KEY_NAME.EXTEND_LINE_FORWARD)(event): + e.preventDefault(); + CustomEditor.extendLineForward(editor); + break; + + /** + * Paste: Mod + Shift + V + * Default behavior: Paste plain text + */ + case createHotkey(HOT_KEY_NAME.PASTE_PLAIN_TEXT)(event): + e.preventDefault(); + void (async () => { + const text = await readText(); + + if (!text) return; + CustomEditor.insertPlainText(editor, text); + })(); + + break; + /** + * Highlight: Mod + Shift + H + * Default behavior: Highlight selected text + */ + case createHotkey(HOT_KEY_NAME.HIGH_LIGHT)(event): + e.preventDefault(); + CustomEditor.highlight(editor); + break; + /** + * Extend document backward: Mod + Shift + Up + * Don't prevent default behavior + * Default behavior: Extend document backward + */ + case createHotkey(HOT_KEY_NAME.EXTEND_DOCUMENT_BACKWARD)(event): + editor.collapse({ edge: 'start' }); + break; + /** + * Extend document forward: Mod + Shift + Down + * Don't prevent default behavior + * Default behavior: Extend document forward + */ + case createHotkey(HOT_KEY_NAME.EXTEND_DOCUMENT_FORWARD)(event): + editor.collapse({ edge: 'end' }); + break; + + /** + * Scroll to top: Home + * Default behavior: Scroll to top + */ + case createHotkey(HOT_KEY_NAME.SCROLL_TO_TOP)(event): { + const scrollContainer = getScrollContainer(editor); + + scrollContainer.scrollTo({ + top: 0, }); - } else { - editor.insertText('\n'); + break; } - return; - } + /** + * Scroll to bottom: End + * Default behavior: Scroll to bottom + */ + case createHotkey(HOT_KEY_NAME.SCROLL_TO_BOTTOM)(event): { + const scrollContainer = getScrollContainer(editor); - if (createHotkey(HOT_KEY_NAME.TOGGLE_TODO)(e.nativeEvent)) { - e.preventDefault(); - CustomEditor.toggleTodo(editor); - } + scrollContainer.scrollTo({ + top: scrollContainer.scrollHeight, + }); + break; + } - if ( - createHotkey(HOT_KEY_NAME.TOGGLE_COLLAPSE)(e.nativeEvent) && - node && - node.type === EditorNodeType.ToggleListBlock - ) { - e.preventDefault(); - CustomEditor.toggleToggleList(editor, node as ToggleListNode); - } + /** + * Align left: Control + Shift + L + * Default behavior: Align left + */ + case createHotkey(HOT_KEY_NAME.ALIGN_LEFT)(event): + e.preventDefault(); + CustomEditor.toggleAlign(editor, 'left'); + break; + /** + * Align center: Control + Shift + E + */ + case createHotkey(HOT_KEY_NAME.ALIGN_CENTER)(event): + e.preventDefault(); + CustomEditor.toggleAlign(editor, 'center'); + break; + /** + * Align right: Control + Shift + R + */ + case createHotkey(HOT_KEY_NAME.ALIGN_RIGHT)(event): + e.preventDefault(); + CustomEditor.toggleAlign(editor, 'right'); + break; + /** + * Bold: Mod + B + */ + case createHotkey(HOT_KEY_NAME.BOLD)(event): + e.preventDefault(); + CustomEditor.toggleMark(editor, { + key: EditorMarkFormat.Bold, + value: true, + }); + break; + /** + * Italic: Mod + I + */ + case createHotkey(HOT_KEY_NAME.ITALIC)(event): + e.preventDefault(); + CustomEditor.toggleMark(editor, { + key: EditorMarkFormat.Italic, + value: true, + }); + break; + /** + * Underline: Mod + U + */ + case createHotkey(HOT_KEY_NAME.UNDERLINE)(event): + e.preventDefault(); + CustomEditor.toggleMark(editor, { + key: EditorMarkFormat.Underline, + value: true, + }); + break; + /** + * Strikethrough: Mod + Shift + S / Mod + Shift + X + */ + case createHotkey(HOT_KEY_NAME.STRIKETHROUGH)(event): + e.preventDefault(); + CustomEditor.toggleMark(editor, { + key: EditorMarkFormat.StrikeThrough, + value: true, + }); + break; + /** + * Code: Mod + E + */ + case createHotkey(HOT_KEY_NAME.CODE)(event): + e.preventDefault(); + CustomEditor.toggleMark(editor, { + key: EditorMarkFormat.Code, + value: true, + }); + break; + /** + * Format link: Mod + K + */ + case createHotkey(HOT_KEY_NAME.FORMAT_LINK)(event): + formatLink(); + break; - if (isHotkey('shift+backspace', e)) { - e.preventDefault(); - e.stopPropagation(); + case createHotkey(HOT_KEY_NAME.FIND_REPLACE)(event): + console.log('find replace'); + break; - editor.deleteBackward('character'); - return; + default: + break; } }, - [editor] + [formatLink, editor] ); return { diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/withMarkdown.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/withMarkdown.ts index 51115986be..fd7801204c 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/withMarkdown.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/withMarkdown.ts @@ -1,6 +1,7 @@ import { Range, Element, Editor, NodeEntry, Path } from 'slate'; import { ReactEditor } from 'slate-react'; import { + defaultTriggerChar, getRegex, MarkdownShortcuts, whatShortcutsMatch, @@ -29,9 +30,17 @@ export const withMarkdown = (editor: ReactEditor) => { const match = CustomEditor.getBlock(editor); const [node, path] = match as NodeEntry; - const prevPath = Path.previous(path); - const prev = editor.node(prevPath) as NodeEntry; - const prevIsNumberedList = prev && prev[0].type === EditorNodeType.NumberedListBlock; + + let prevIsNumberedList = false; + + try { + const prevPath = Path.previous(path); + const prev = editor.node(prevPath) as NodeEntry; + + prevIsNumberedList = prev && prev[0].type === EditorNodeType.NumberedListBlock; + } catch (e) { + // do nothing + } const start = Editor.start(editor, path); const beforeRange = { anchor: start, focus: selection.anchor }; @@ -51,7 +60,7 @@ export const withMarkdown = (editor: ReactEditor) => { // if the block shortcut is matched, remove the before text and turn to the block // then return - if (block) { + if (block && defaultTriggerChar[shortcut].includes(char)) { // Don't turn to the block condition // 1. Heading should be able to co-exist with number list if (block.type === EditorNodeType.NumberedListBlock && node.type === EditorNodeType.HeadingBlock) { @@ -105,7 +114,7 @@ export const withMarkdown = (editor: ReactEditor) => { const removeText = execArr ? execArr[0] : ''; - const text = execArr ? execArr[2].replaceAll(char, '') : ''; + const text = execArr ? execArr[2]?.replaceAll(char, '') : ''; if (text) { const index = rangeText.indexOf(removeText); diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withBlockPlugins.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withBlockPlugins.ts index ee7489b8bf..1e9fc7f105 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withBlockPlugins.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withBlockPlugins.ts @@ -3,7 +3,7 @@ import { ReactEditor } from 'slate-react'; import { withBlockDelete } from '$app/components/editor/plugins/withBlockDelete'; import { withBlockInsertBreak } from '$app/components/editor/plugins/withBlockInsertBreak'; import { withSplitNodes } from '$app/components/editor/plugins/withSplitNodes'; -import { withPasted } from '$app/components/editor/plugins/withPasted'; +import { withPasted, withCopy } from '$app/components/editor/plugins/copyPasted'; import { withBlockMove } from '$app/components/editor/plugins/withBlockMove'; import { CustomEditor } from '$app/components/editor/command'; @@ -26,5 +26,5 @@ export function withBlockPlugins(editor: ReactEditor) { return !CustomEditor.isEmbedNode(element) && isEmpty(element); }; - return withBlockMove(withSplitNodes(withBlockInsertBreak(withBlockDelete(withPasted(editor))))); + return withPasted(withBlockMove(withSplitNodes(withBlockInsertBreak(withBlockDelete(withCopy(editor)))))); } diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withPasted.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withPasted.ts deleted file mode 100644 index 105f995a27..0000000000 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withPasted.ts +++ /dev/null @@ -1,287 +0,0 @@ -import { ReactEditor } from 'slate-react'; -import { convertBlockToJson } from '$app/application/document/document.service'; -import { Editor, Element, NodeEntry, Path, Node, Text, Location, Range } from 'slate'; -import { EditorNodeType } from '$app/application/document/document.types'; -import { InputType } from '@/services/backend'; -import { CustomEditor } from '$app/components/editor/command'; -import { generateId } from '$app/components/editor/provider/utils/convert'; -import { LIST_TYPES } from '$app/components/editor/command/tab'; -import { Log } from '$app/utils/log'; - -export function withPasted(editor: ReactEditor) { - const { insertData, insertFragment, setFragmentData } = editor; - - editor.setFragmentData = (...args) => { - if (!editor.selection) { - setFragmentData(...args); - return; - } - - // selection is collapsed and the node is an embed, we need to set the data manually - if (Range.isCollapsed(editor.selection)) { - const match = Editor.above(editor, { - match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.blockId !== undefined, - }); - const node = match ? (match[0] as Element) : undefined; - - if (node && editor.isEmbed(node)) { - const fragment = editor.getFragment(); - - if (fragment.length > 0) { - const data = args[0]; - const string = JSON.stringify(fragment); - const encoded = window.btoa(encodeURIComponent(string)); - - const dom = ReactEditor.toDOMNode(editor, node); - - data.setData(`application/x-slate-fragment`, encoded); - data.setData(`text/html`, dom.innerHTML); - } - } - } - - setFragmentData(...args); - }; - - editor.insertData = (data) => { - const fragment = data.getData('application/x-slate-fragment'); - - if (fragment) { - insertData(data); - return; - } - - const html = data.getData('text/html'); - const text = data.getData('text/plain'); - - if (!html && !text) { - insertData(data); - return; - } - - void (async () => { - try { - const nodes = await convertBlockToJson(html, InputType.Html); - - const htmlTransNoText = nodes.every((node) => { - return CustomEditor.getNodeTextContent(node).length === 0; - }); - - if (!htmlTransNoText) { - return editor.insertFragment(nodes); - } - } catch (e) { - Log.warn('pasted html error', e); - // ignore - } - - if (text) { - const nodes = await convertBlockToJson(text, InputType.PlainText); - - editor.insertFragment(nodes); - return; - } - })(); - }; - - editor.insertFragment = (fragment, options = {}) => { - Editor.withoutNormalizing(editor, () => { - const { at = getDefaultInsertLocation(editor) } = options; - - if (!fragment.length) { - return; - } - - if (Range.isRange(at) && !Range.isCollapsed(at)) { - editor.delete({ - unit: 'character', - }); - } - - const selection = editor.selection; - - if (!selection) return; - - const [node] = editor.node(selection); - const isText = Text.isText(node); - const parent = Editor.above(editor, { - at: selection, - match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.blockId !== undefined, - }); - - if (isText && parent) { - const [parentNode, parentPath] = parent as NodeEntry; - const pastedNodeIsPage = parentNode.type === EditorNodeType.Page; - const pastedNodeIsNotList = !LIST_TYPES.includes(parentNode.type as EditorNodeType); - const clonedFragment = transFragment(editor, fragment); - - const [firstNode, ...otherNodes] = clonedFragment; - const lastNode = getLastNode(otherNodes[otherNodes.length - 1]); - const firstIsEmbed = editor.isEmbed(firstNode); - const insertNodes: Element[] = [...otherNodes]; - const needMoveChildren = parentNode.children.length > 1 && !pastedNodeIsPage && !pastedNodeIsNotList; - let moveStartIndex = 0; - - if (firstIsEmbed) { - insertNodes.unshift(firstNode); - } else { - // merge the first fragment node with the current text node - const [textNode, ...children] = firstNode.children as Element[]; - - const textElements = textNode.children; - - const end = Editor.end(editor, [...parentPath, 0]); - - // merge text node - editor.insertNodes(textElements, { - at: end, - select: true, - }); - - if (children.length > 0) { - if (pastedNodeIsPage || pastedNodeIsNotList) { - // lift the children of the first fragment node to current node - insertNodes.unshift(...children); - } else { - const lastChild = getLastNode(children[children.length - 1]); - - const lastIsEmbed = lastChild && editor.isEmbed(lastChild); - - // insert the children of the first fragment node to current node - editor.insertNodes(children, { - at: [...parentPath, 1], - select: !lastIsEmbed, - }); - - moveStartIndex += children.length; - } - } - } - - if (insertNodes.length === 0) return; - - // insert a new paragraph if the last node is an embed - if ((!lastNode && firstIsEmbed) || (lastNode && editor.isEmbed(lastNode))) { - insertNodes.push(generateNewParagraph()); - } - - const pastedPath = Path.next(parentPath); - - // insert the sibling of the current node - editor.insertNodes(insertNodes, { - at: pastedPath, - select: true, - }); - - if (!needMoveChildren) return; - - if (!editor.selection) return; - - // current node is the last node of the pasted fragment - const currentPath = editor.selection.anchor.path; - const current = editor.above({ - at: currentPath, - match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.blockId !== undefined, - }); - - if (!current) return; - - const [currentNode, currentNodePath] = current as NodeEntry; - - // split the operation into the next tick to avoid the wrong path - if (LIST_TYPES.includes(currentNode.type as EditorNodeType)) { - const length = currentNode.children.length; - - setTimeout(() => { - // move the children of the current node to the last node of the pasted fragment - for (let i = parentNode.children.length - 1; i > 0; i--) { - editor.moveNodes({ - at: [...parentPath, i + moveStartIndex], - to: [...currentNodePath, length], - }); - } - }, 0); - } else { - // if the current node is not a list, we need to move these children to the next path - setTimeout(() => { - const nextPath = Path.next(currentNodePath); - - for (let i = parentNode.children.length - 1; i > 0; i--) { - editor.moveNodes({ - at: [...parentPath, i + moveStartIndex], - to: nextPath, - }); - } - }, 0); - } - } else { - insertFragment(fragment); - return; - } - }); - }; - - return editor; -} - -export const getDefaultInsertLocation = (editor: Editor): Location => { - if (editor.selection) { - return editor.selection; - } else if (editor.children.length > 0) { - return Editor.end(editor, []); - } else { - return [0]; - } -}; - -export const generateNewParagraph = (): Element => ({ - type: EditorNodeType.Paragraph, - blockId: generateId(), - children: [ - { - type: EditorNodeType.Text, - textId: generateId(), - children: [{ text: '' }], - }, - ], -}); - -function getLastNode(node: Node): Element | undefined { - if (!Element.isElement(node) || node.blockId === undefined) return; - - if (Element.isElement(node) && node.blockId !== undefined && node.children.length > 0) { - const child = getLastNode(node.children[node.children.length - 1]); - - if (!child) { - return node; - } else { - return child; - } - } - - return node; -} - -function transFragment(editor: ReactEditor, fragment: Node[]) { - // flatten the fragment to avoid the empty node(doesn't have text node) in the fragment - const flatMap = (node: Node): Node[] => { - const isInputElement = - !Editor.isEditor(node) && Element.isElement(node) && node.blockId !== undefined && !editor.isEmbed(node); - - if ( - isInputElement && - node.children?.length > 0 && - Element.isElement(node.children[0]) && - node.children[0].type !== EditorNodeType.Text - ) { - return node.children.flatMap((child) => flatMap(child)); - } - - return [node]; - }; - - const fragmentFlatMap = fragment?.flatMap(flatMap); - - // clone the node to avoid the duplicated block id - return fragmentFlatMap.map((item) => CustomEditor.cloneBlock(editor, item as Element)); -} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withSplitNodes.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withSplitNodes.ts index 55c9b8b8f2..eee7dd92d0 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withSplitNodes.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withSplitNodes.ts @@ -30,8 +30,6 @@ export function withSplitNodes(editor: ReactEditor) { const { splitNodes } = editor; editor.splitNodes = (...args) => { - const selection = editor.selection; - const isInsertBreak = args.length === 1 && JSON.stringify(args[0]) === JSON.stringify({ always: true }); if (!isInsertBreak) { @@ -39,6 +37,8 @@ export function withSplitNodes(editor: ReactEditor) { return; } + const selection = editor.selection; + const isCollapsed = selection && Range.isCollapsed(selection); if (!isCollapsed) { @@ -106,10 +106,14 @@ export function withSplitNodes(editor: ReactEditor) { Transforms.insertNodes(editor, newNode, { at: newNodePath, - select: true, }); + editor.select(newNodePath); + CustomEditor.removeMarks(editor); + editor.collapse({ + edge: 'start', + }); return; } diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/editor/provider/utils/action.ts b/frontend/appflowy_tauri/src/appflowy_app/components/editor/provider/utils/action.ts index c2d78c8e2a..447a8f95f9 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/editor/provider/utils/action.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/editor/provider/utils/action.ts @@ -161,6 +161,8 @@ function blockOps2BlockActions( ids: [deletedId], }) ); + } else { + Log.error('blockOps2BlockActions', 'deletedId is not exist'); } } } diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.hooks.ts new file mode 100644 index 0000000000..807c1e6811 --- /dev/null +++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.hooks.ts @@ -0,0 +1,54 @@ +import { useCallback } from 'react'; +import { createHotkey, HOT_KEY_NAME } from '$app/utils/hotkeys'; +import { useAppDispatch, useAppSelector } from '$app/stores/store'; +import { currentUserActions, ThemeMode } from '$app_reducers/current-user/slice'; +import { UserService } from '$app/application/user/user.service'; +import { sidebarActions } from '$app_reducers/sidebar/slice'; + +export function useShortcuts() { + const dispatch = useAppDispatch(); + const userSettingState = useAppSelector((state) => state.currentUser.userSetting); + const { isDark } = userSettingState; + + const switchThemeMode = useCallback(() => { + const newSetting = { + themeMode: isDark ? ThemeMode.Light : ThemeMode.Dark, + isDark: !isDark, + }; + + dispatch(currentUserActions.setUserSetting(newSetting)); + void UserService.setAppearanceSetting({ + theme_mode: newSetting.themeMode, + }); + }, [dispatch, isDark]); + + const toggleSidebar = useCallback(() => { + dispatch(sidebarActions.toggleCollapse()); + }, [dispatch]); + + return useCallback( + (e: KeyboardEvent) => { + switch (true) { + /** + * Toggle theme: Mod+L + * Switch between light and dark theme + */ + case createHotkey(HOT_KEY_NAME.TOGGLE_THEME)(e): + switchThemeMode(); + break; + /** + * Toggle sidebar: Mod+. (period) + * Prevent the default behavior of the browser (Exit full screen) + * Collapse or expand the sidebar + */ + case createHotkey(HOT_KEY_NAME.TOGGLE_SIDEBAR)(e): + e.preventDefault(); + toggleSidebar(); + break; + default: + break; + } + }, + [toggleSidebar, switchThemeMode] + ); +} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.tsx index ad42067631..509aa388cf 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.tsx @@ -6,6 +6,7 @@ import './layout.scss'; import { AFScroller } from '../_shared/scroller'; import { useNavigate } from 'react-router-dom'; import { pageTypeMap } from '$app_reducers/pages/slice'; +import { useShortcuts } from '$app/components/layout/Layout.hooks'; function Layout({ children }: { children: ReactNode }) { const { isCollapsed, width } = useAppSelector((state) => state.sidebar); @@ -20,18 +21,14 @@ function Layout({ children }: { children: ReactNode }) { [currentUser?.workspaceSetting?.latestView] ); - useEffect(() => { - const onKeyDown = (e: KeyboardEvent) => { - if (e.key === 'Backspace' && e.target instanceof HTMLBodyElement) { - e.preventDefault(); - } - }; + const onKeyDown = useShortcuts(); + useEffect(() => { window.addEventListener('keydown', onKeyDown); return () => { window.removeEventListener('keydown', onKeyDown); }; - }, []); + }, [onKeyDown]); useEffect(() => { if (latestOpenViewId) { diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/collapse_menu_button/CollapseMenuButton.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/layout/collapse_menu_button/CollapseMenuButton.tsx index 0dfe7e51f3..87662a99bb 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/collapse_menu_button/CollapseMenuButton.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/collapse_menu_button/CollapseMenuButton.tsx @@ -1,12 +1,11 @@ -import React, { useCallback, useEffect, useMemo } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { IconButton, Tooltip } from '@mui/material'; import { useAppDispatch, useAppSelector } from '$app/stores/store'; import { sidebarActions } from '$app_reducers/sidebar/slice'; import { ReactComponent as ShowMenuIcon } from '$app/assets/show-menu.svg'; import { useTranslation } from 'react-i18next'; -import { getModifier } from '$app/utils/hotkeys'; -import isHotkey from 'is-hotkey'; +import { createHotKeyLabel, HOT_KEY_NAME } from '$app/utils/hotkeys'; function CollapseMenuButton() { const isCollapsed = useAppSelector((state) => state.sidebar.isCollapsed); @@ -21,25 +20,11 @@ function CollapseMenuButton() { return (
{isCollapsed ? t('sideBar.openSidebar') : t('sideBar.closeSidebar')}
-
{`${getModifier()} + \\`}
+
{createHotKeyLabel(HOT_KEY_NAME.TOGGLE_SIDEBAR)}
); }, [isCollapsed, t]); - useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - if (isHotkey('mod+\\', e)) { - e.preventDefault(); - handleClick(); - } - }; - - document.addEventListener('keydown', handleKeyDown); - return () => { - document.removeEventListener('keydown', handleKeyDown); - }; - }, [handleClick]); - return ( diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/layout.scss b/frontend/appflowy_tauri/src/appflowy_app/components/layout/layout.scss index 5b576871a8..43f4f55892 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/layout.scss +++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/layout.scss @@ -72,4 +72,10 @@ .theme-mode-item { background: linear-gradient(150.74deg, rgba(128, 125, 125, 0) 17.95%, #4d4d4d 95.51%); } -} \ No newline at end of file +} + +.document-header { + .view-banner { + @apply items-center; + } +} diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/NestedPage.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/NestedPage.hooks.ts index 05cd79c008..d43499e801 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/NestedPage.hooks.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/NestedPage.hooks.ts @@ -143,7 +143,5 @@ export function usePageActions(pageId: string) { } export function useSelectedPage(pageId: string) { - const id = useParams().id; - - return id === pageId; + return useParams().id === pageId; } diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/top_bar/DeletePageSnackbar.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/layout/top_bar/DeletePageSnackbar.tsx index 02f4bfd2f7..f5638362b9 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/top_bar/DeletePageSnackbar.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/top_bar/DeletePageSnackbar.tsx @@ -73,7 +73,6 @@ function DeletePageSnackbar() { horizontal: 'center', }} open={showTrashSnackbar} - onClose={() => handleClose()} TransitionComponent={SlideTransition} > { }; export enum HOT_KEY_NAME { + LEFT = 'left', + RIGHT = 'right', + SELECT_ALL = 'select-all', + ESCAPE = 'escape', ALIGN_LEFT = 'align-left', ALIGN_CENTER = 'align-center', ALIGN_RIGHT = 'align-right', @@ -24,6 +28,29 @@ export enum HOT_KEY_NAME { CODE = 'code', TOGGLE_TODO = 'toggle-todo', TOGGLE_COLLAPSE = 'toggle-collapse', + INDENT_BLOCK = 'indent-block', + OUTDENT_BLOCK = 'outdent-block', + INSERT_SOFT_BREAK = 'insert-soft-break', + SPLIT_BLOCK = 'split-block', + BACKSPACE = 'backspace', + OPEN_LINK = 'open-link', + OPEN_LINKS = 'open-links', + EXTEND_LINE_BACKWARD = 'extend-line-backward', + EXTEND_LINE_FORWARD = 'extend-line-forward', + PASTE = 'paste', + PASTE_PLAIN_TEXT = 'paste-plain-text', + HIGH_LIGHT = 'high-light', + EXTEND_DOCUMENT_BACKWARD = 'extend-document-backward', + EXTEND_DOCUMENT_FORWARD = 'extend-document-forward', + SCROLL_TO_TOP = 'scroll-to-top', + SCROLL_TO_BOTTOM = 'scroll-to-bottom', + FORMAT_LINK = 'format-link', + FIND_REPLACE = 'find-replace', + /** + * Navigation + */ + TOGGLE_THEME = 'toggle-theme', + TOGGLE_SIDEBAR = 'toggle-sidebar', } const defaultHotKeys = { @@ -37,6 +64,30 @@ const defaultHotKeys = { [HOT_KEY_NAME.CODE]: ['mod+e'], [HOT_KEY_NAME.TOGGLE_TODO]: ['mod+enter'], [HOT_KEY_NAME.TOGGLE_COLLAPSE]: ['mod+enter'], + [HOT_KEY_NAME.SELECT_ALL]: ['mod+a'], + [HOT_KEY_NAME.ESCAPE]: ['esc'], + [HOT_KEY_NAME.INDENT_BLOCK]: ['tab'], + [HOT_KEY_NAME.OUTDENT_BLOCK]: ['shift+tab'], + [HOT_KEY_NAME.SPLIT_BLOCK]: ['enter'], + [HOT_KEY_NAME.INSERT_SOFT_BREAK]: ['shift+enter'], + [HOT_KEY_NAME.BACKSPACE]: ['backspace', 'shift+backspace'], + [HOT_KEY_NAME.OPEN_LINK]: ['opt+enter'], + [HOT_KEY_NAME.OPEN_LINKS]: ['opt+shift+enter'], + [HOT_KEY_NAME.EXTEND_LINE_BACKWARD]: ['opt+shift+left'], + [HOT_KEY_NAME.EXTEND_LINE_FORWARD]: ['opt+shift+right'], + [HOT_KEY_NAME.PASTE]: ['mod+v'], + [HOT_KEY_NAME.PASTE_PLAIN_TEXT]: ['mod+shift+v'], + [HOT_KEY_NAME.HIGH_LIGHT]: ['mod+shift+h'], + [HOT_KEY_NAME.EXTEND_DOCUMENT_BACKWARD]: ['mod+shift+up'], + [HOT_KEY_NAME.EXTEND_DOCUMENT_FORWARD]: ['mod+shift+down'], + [HOT_KEY_NAME.SCROLL_TO_TOP]: ['home'], + [HOT_KEY_NAME.SCROLL_TO_BOTTOM]: ['end'], + [HOT_KEY_NAME.TOGGLE_THEME]: ['mod+shift+l'], + [HOT_KEY_NAME.TOGGLE_SIDEBAR]: ['mod+.'], + [HOT_KEY_NAME.FORMAT_LINK]: ['mod+k'], + [HOT_KEY_NAME.LEFT]: ['left'], + [HOT_KEY_NAME.RIGHT]: ['right'], + [HOT_KEY_NAME.FIND_REPLACE]: ['mod+f'], }; const replaceModifier = (hotkey: string) => {