Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: support editor default shortcuts (#4943)

Browse Source 
fix: pasted bugs
This commit is contained in:
Kilu.He 2024-03-21 21:52:48 +08:00 committed by GitHub
parent 98876b149f
commit 4e99952b0e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
45 changed files with 1077 additions and 659 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/appflowy_tauri/src/appflowy_app/application/document/document.service.ts
View File

@ -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],

7
frontend/appflowy_tauri/src/appflowy_app/components/_shared/popover/Popover.hooks.ts
View File

@ -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;
}

2
frontend/appflowy_tauri/src/appflowy_app/components/_shared/view_title/ViewBanner.tsx
View File

@ -19,7 +19,7 @@ function ViewBanner({
onUpdateCover?: (cover?: PageCover) => void;
}) {
return (
<div className={'view-banner flex w-full flex-col items-center overflow-hidden'}>
<div className={'view-banner flex w-full flex-col overflow-hidden'}>
{showCover && cover && <ViewCover cover={cover} onUpdateCover={onUpdateCover} />}
<div className={`relative min-h-[65px] ${showCover ? 'w-[964px] min-w-0 max-w-full px-16' : ''} pt-12`}>

2
frontend/appflowy_tauri/src/appflowy_app/components/_shared/view_title/ViewTitleInput.tsx
View File

@ -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`}
/>
);
}

2
frontend/appflowy_tauri/src/appflowy_app/components/database/DatabaseTitle.tsx
View File

@ -22,7 +22,7 @@ export const DatabaseTitle = () => {
return (
<div className='mb-6 h-[70px] px-16 pt-8'>
<input
className='text-3xl font-semibold'
className='text-4xl font-semibold'
value={pageName}
placeholder={t('grid.title.placeholder')}
onInput={handleInput}

4
frontend/appflowy_tauri/src/appflowy_app/components/database/components/database_settings/FilterSettings.tsx
View File

@ -30,6 +30,10 @@ function FilterSettings({ onToggleCollection }: { onToggleCollection: (forceOpen
open={open}
anchorEl={filterAnchorEl}
onClose={() => setFilterAnchorEl(null)}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',

4
frontend/appflowy_tauri/src/appflowy_app/components/database/components/database_settings/SortSettings.tsx
View File

@ -39,6 +39,10 @@ function SortSettings({ onToggleCollection }: Props) {
open={open}
anchorEl={sortAnchorEl}
onClose={handleClose}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',

2
frontend/appflowy_tauri/src/appflowy_app/components/database/components/edit_record/EditRecord.tsx
View File

@ -60,4 +60,4 @@ function EditRecord({ rowId }: Props) {
);
}
export default React.memo(EditRecord);
export default EditRecord;

6
frontend/appflowy_tauri/src/appflowy_app/components/database/components/edit_record/ExpandRecordModal.tsx
View File

@ -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',
}}
>
<DialogContent className={'appflowy-scroll-container relative p-0'}>
<AFScroller overflowXHidden className={'appflowy-scroll-container relative p-0'}>
<EditRecord rowId={rowId} />
</DialogContent>
</AFScroller>
<IconButton
aria-label='close'
className={'absolute right-[8px] top-[8px] text-text-caption'}

2
frontend/appflowy_tauri/src/appflowy_app/components/database/components/edit_record/RecordDocument.tsx
View File

@ -9,4 +9,4 @@ function RecordDocument({ documentId }: Props) {
return <Editor disableFocus={true} id={documentId} showTitle={false} />;
}
export default React.memo(RecordDocument);
export default RecordDocument;

44
frontend/appflowy_tauri/src/appflowy_app/components/editor/command/index.ts
View File

@ -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');
},
};

7
frontend/appflowy_tauri/src/appflowy_app/components/editor/command/mark.ts
View File

@ -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 [];

2
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/blocks/page/Page.tsx
View File

@ -4,7 +4,7 @@ import { EditorElementProps, PageNode } from '$app/application/document/document
export const Page = memo(
forwardRef<HTMLDivElement, EditorElementProps<PageNode>>(({ 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 (

18
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/editor/CustomEditable.tsx
View File

@ -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<ComponentProps<typeof Editable>, 'renderElement' | 'renderLeaf'> &
Partial<Pick<ComponentProps<typeof Editable>, '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<HTMLDivElement>) => {
withInlineKeyDown(event);
onShortcutsKeyDown(event);
},
[onShortcutsKeyDown, withInlineKeyDown]
);
return (
<Editable
{...props}
onKeyDown={onKeyDown}
autoCorrect={'off'}
autoComplete={'off'}
autoFocus={!disableFocus}

11
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/editor/Editor.hooks.ts
View File

@ -1,6 +1,6 @@
import { KeyboardEvent, useCallback, useEffect, useMemo } from 'react';
import { BaseRange, createEditor, Editor, NodeEntry, Range, Transforms, Element } from 'slate';
import { BaseRange, createEditor, Editor, Element, NodeEntry, Range, Transforms } from 'slate';
import { ReactEditor, withReact } from 'slate-react';
import { withBlockPlugins } from '$app/components/editor/plugins/withBlockPlugins';
import { withInlines } from '$app/components/editor/components/inline_nodes';
@ -9,8 +9,8 @@ import * as Y from 'yjs';
import { CustomEditor } from '$app/components/editor/command';
import { CodeNode, EditorNodeType } from '$app/application/document/document.types';
import { decorateCode } from '$app/components/editor/components/blocks/code/utils';
import isHotkey from 'is-hotkey';
import { withMarkdown } from '$app/components/editor/plugins/shortcuts';
import { createHotkey, HOT_KEY_NAME } from '$app/utils/hotkeys';
export function useEditor(sharedType: Y.XmlText) {
const editor = useMemo(() => {
@ -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;

19
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/editor/Editor.tsx
View File

@ -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<HTMLDivElement>) => {
withInlineKeyDown(event);
onShortcutsKeyDown(event);
},
[onShortcutsKeyDown, withInlineKeyDown]
);
if (editor.sharedRoot.length === 0) {
return <CircularProgress className='m-auto' />;
}
@ -72,7 +58,6 @@ function Editor({ sharedType, disableFocus, caretColor = 'var(--text-title)' }:
<CustomEditable
{...props}
disableFocus={disableFocus}
onKeyDown={onKeyDown}
decorate={decorate}
style={{
caretColor,

3
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/SelectionActions.tsx
View File

@ -14,7 +14,7 @@ import { Quote } from '$app/components/editor/components/tools/selection_toolbar
import { ToggleList } from '$app/components/editor/components/tools/selection_toolbar/actions/toggle_list';
import { BulletedList } from '$app/components/editor/components/tools/selection_toolbar/actions/bulleted_list';
import { NumberedList } from '$app/components/editor/components/tools/selection_toolbar/actions/numbered_list';
import { Href } from '$app/components/editor/components/tools/selection_toolbar/actions/href';
import { Href, LinkActions } from '$app/components/editor/components/tools/selection_toolbar/actions/href';
import { Align } from '$app/components/editor/components/tools/selection_toolbar/actions/align';
import { Color } from '$app/components/editor/components/tools/selection_toolbar/actions/color';
@ -65,6 +65,7 @@ function SelectionActions({
{!isAcrossBlocks && <Href />}
<Align />
<Color onClose={restoreSelection} onOpen={storeSelection} />
<LinkActions />
</div>
);
}

35
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/align/Align.tsx
View File

@ -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 (
<Tooltip
placement={'bottom'}

26
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/bold/Bold.tsx
View File

@ -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 BoldSvg } from '$app/assets/bold.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 Bold() {
const { t } = useTranslation();
@ -20,26 +20,6 @@ export function Bold() {
});
}, [editor]);
useEffect(() => {
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 (
<ActionButton
onClick={onClick}

75
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/href/Href.tsx
View File

@ -1,14 +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 LinkSvg } from '$app/assets/link.svg';
import { Editor, Range } from 'slate';
import { EditorMarkFormat } from '$app/application/document/document.types';
import { useDecorateDispatch, useDecorateState } from '$app/components/editor/stores';
import { LinkEditPopover } from '$app/components/editor/components/inline_nodes/link';
import isHotkey from 'is-hotkey';
import { useDecorateDispatch } from '$app/components/editor/stores';
import { getModifier } from '$app/utils/hotkeys';
export function Href() {
@ -17,35 +14,7 @@ export function Href() {
const isActivatedInline = CustomEditor.isInlineActive(editor);
const isActivated = !isActivatedInline && CustomEditor.isMarkActive(editor, EditorMarkFormat.Href);
const decorateState = useDecorateState('link');
const openEditPopover = !!decorateState;
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 { 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() {
<ActionButton disabled={isActivatedInline} onClick={onClick} active={isActivated} tooltip={tooltip}>
<LinkSvg />
</ActionButton>
{openEditPopover && (
<LinkEditPopover
open={openEditPopover}
anchorPosition={anchorPosition}
anchorReference={'anchorPosition'}
onClose={handleEditPopoverClose}
defaultHref={defaultHref}
/>
)}
</>
);
}

59
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/href/LinkActions.tsx Normal file
View File

@ -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 (
<LinkEditPopover
open={openEditPopover}
anchorPosition={anchorPosition}
anchorReference={'anchorPosition'}
onClose={handleEditPopoverClose}
defaultHref={defaultHref}
/>
);
}

1
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/href/index.ts
View File

@ -1 +1,2 @@
export * from './Href';
export * from './LinkActions';

26
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/inline_code/InlineCode.tsx
View File

@ -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 (
<ActionButton
onClick={onClick}

25
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/italic/Italic.tsx
View File

@ -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 ItalicSvg } from '$app/assets/italic.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 Italic() {
const { t } = useTranslation();
@ -20,25 +20,6 @@ export function Italic() {
});
}, [editor]);
useEffect(() => {
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 (
<ActionButton
onClick={onClick}

26
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/strikethrough/StrikeThrough.tsx
View File

@ -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 StrikeThroughSvg } from '$app/assets/strikethrough.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 StrikeThrough() {
const { t } = useTranslation();
@ -20,26 +20,6 @@ export function StrikeThrough() {
});
}, [editor]);
useEffect(() => {
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 (
<ActionButton
onClick={onClick}

26
frontend/appflowy_tauri/src/appflowy_app/components/editor/components/tools/selection_toolbar/actions/underline/Underline.tsx
View File

@ -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 UnderlineSvg } from '$app/assets/underline.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 Underline() {
const { t } = useTranslation();
@ -20,26 +20,6 @@ export function Underline() {
});
}, [editor]);
useEffect(() => {
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 (
<ActionButton
onClick={onClick}

28
frontend/appflowy_tauri/src/appflowy_app/components/editor/editor.scss
View File

@ -16,10 +16,9 @@
}
}
.block-element.block-align-right {
> 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 {

2
frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './withCopy';
export * from './withPasted';

311
frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/utils.ts Normal file
View File

@ -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<Element>;
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));
}

40
frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/withCopy.ts Normal file
View File

@ -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;
}

59
frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/copyPasted/withPasted.ts Normal file
View File

@ -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;
}

4
frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/markdown.ts
View File

@ -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,})$/,
},
],

380
frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/shortcuts.hooks.ts
View File

@ -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<HTMLDivElement>) => {
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 {

19
frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/shortcuts/withMarkdown.ts
View File

@ -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<Element>;
const prevPath = Path.previous(path);
const prev = editor.node(prevPath) as NodeEntry<Element>;
const prevIsNumberedList = prev && prev[0].type === EditorNodeType.NumberedListBlock;
let prevIsNumberedList = false;
try {
const prevPath = Path.previous(path);
const prev = editor.node(prevPath) as NodeEntry<Element>;
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);

4
frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withBlockPlugins.ts
View File

@ -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))))));
}

287
frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withPasted.ts
View File

@ -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<Element>;
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<Element>;
// 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));
}

10
frontend/appflowy_tauri/src/appflowy_app/components/editor/plugins/withSplitNodes.ts
View File

@ -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;
}

2
frontend/appflowy_tauri/src/appflowy_app/components/editor/provider/utils/action.ts
View File

@ -161,6 +161,8 @@ function blockOps2BlockActions(
ids: [deletedId],
})
);
} else {
Log.error('blockOps2BlockActions', 'deletedId is not exist');
}
}
}

54
frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.hooks.ts Normal file
View File

@ -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]
);
}

11
frontend/appflowy_tauri/src/appflowy_app/components/layout/Layout.tsx
View File

@ -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) {

21
frontend/appflowy_tauri/src/appflowy_app/components/layout/collapse_menu_button/CollapseMenuButton.tsx
View File

@ -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 (
<div className={'flex flex-col gap-1 text-xs'}>
<div>{isCollapsed ? t('sideBar.openSidebar') : t('sideBar.closeSidebar')}</div>
<div>{`${getModifier()} + \\`}</div>
<div>{createHotKeyLabel(HOT_KEY_NAME.TOGGLE_SIDEBAR)}</div>
</div>
);
}, [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 (
<Tooltip title={title}>
<IconButton size={'small'} className={'h-[20px] w-[20px] font-bold text-text-title'} onClick={handleClick}>

8
frontend/appflowy_tauri/src/appflowy_app/components/layout/layout.scss
View File

@ -72,4 +72,10 @@
.theme-mode-item {
background: linear-gradient(150.74deg, rgba(128, 125, 125, 0) 17.95%, #4d4d4d 95.51%);
}
}
}
.document-header {
.view-banner {
@apply items-center;
}
}

4
frontend/appflowy_tauri/src/appflowy_app/components/layout/nested_page/NestedPage.hooks.ts
View File

@ -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;
}

1
frontend/appflowy_tauri/src/appflowy_app/components/layout/top_bar/DeletePageSnackbar.tsx
View File

@ -73,7 +73,6 @@ function DeletePageSnackbar() {
horizontal: 'center',
}}
open={showTrashSnackbar}
onClose={() => handleClose()}
TransitionComponent={SlideTransition}
>
<Alert

51
frontend/appflowy_tauri/src/appflowy_app/utils/hotkeys.ts
View File

@ -14,6 +14,10 @@ export const getModifier = () => {
};
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) => {