diff --git a/README.md b/README.md index 9e2ebc85ff..b9fdf16e0b 100644 --- a/README.md +++ b/README.md @@ -12,17 +12,8 @@ Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Fre
- - - -[all-contributors-badge]: https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square - - - -[![All Contributors][all-contributors-badge]](#contributors) +[![stars](https://img.shields.io/github/stars/toeverything/AFFiNE.svg?style=flat&logo=github&colorB=deeppink&label=stars)](https://github.com/toeverything/AFFiNE) +[![contributors](https://img.shields.io/github/contributors/toeverything/AFFiNE?color=%23fe7230)](https://github.com/toeverything/AFFiNE/graphs/contributors) [![Node](https://img.shields.io/badge/node->=16.0-success)](https://www.typescriptlang.org/) [![React](https://img.shields.io/badge/TypeScript-4.7-3178c6)](https://www.typescriptlang.org/) [![React](https://img.shields.io/badge/React-18-61dafb)](https://reactjs.org/) @@ -45,8 +36,23 @@ See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066 ![952cd7a5-70fe-48ab-b74f-23981d94d2c5](https://user-images.githubusercontent.com/79301703/182365526-df074c64-cee4-45f6-b8e0-b912f17332c6.gif) # How to use +

+🥳🥳🥳 Our web live demo is ready! 🥳🥳🥳 +

-If you have experience in front-end development, you may wish to refer to our [documentation](https://docs.affine.pro/affine/basic-documentation/contribute-to-affine) to learn more about deploying your own version or contributing further to development. For those intersting in trying our latest version, please bear with us as we are planning to launch a web version soon. +

+Start to play with AFFiNE web version on our landing page: +

+ +

+ check_live_demo +

+ +If you have experience in front-end development, you may wish to refer to our [documentation](https://docs.affine.pro/affine/basic-documentation/contribute-to-affine) to learn more about deploying your own version or contributing further to development. Also, thanks to Lee who has made a [desktop build with Tauri](https://github.com/m1911star/affine-client) for you to try out. Please notice that AFFiNE is still under Alpha stage and is not ready for production use. diff --git a/apps/ligo-virgo-e2e/src/integration/app.spec.ts b/apps/ligo-virgo-e2e/src/integration/app.spec.ts index 651bf215f2..0d3bae5e04 100644 --- a/apps/ligo-virgo-e2e/src/integration/app.spec.ts +++ b/apps/ligo-virgo-e2e/src/integration/app.spec.ts @@ -4,11 +4,11 @@ describe('ligo-virgo', () => { beforeEach(() => cy.visit('/')); it('basic load check', () => { - getTitle().contains('Get Started with AFFiNE'); + getTitle().contains('👋 Get Started with AFFINE'); cy.get('.block_container').contains('The Essentials'); getBoard().click(); - cy.get('.tl-inner-div').contains('Graduating'); + cy.get('.tl-inner-div').contains('The Essentials'); }); }); diff --git a/apps/ligo-virgo/src/pages/RoutePrivate.tsx b/apps/ligo-virgo/src/pages/RoutePrivate.tsx index 58dcbe3db5..a7cedac934 100644 --- a/apps/ligo-virgo/src/pages/RoutePrivate.tsx +++ b/apps/ligo-virgo/src/pages/RoutePrivate.tsx @@ -23,7 +23,7 @@ export function RoutePrivate({ return ; } - if (!user) { + if (!user || !pathname.startsWith(`/${user.id}`)) { return ( { viewBox="0 0 71 55" fill="currentcolor" > - + { return ( + ); +}; + +const AFFiNEOnline = (props: { center?: boolean; flat?: boolean }) => { + const matches = useMediaQuery('(max-width: 1024px)'); + + return ( + ); }; @@ -258,7 +300,10 @@ export function App() {
- Copy + Copy
diff --git a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx index 4b861f9376..4ecf47f3b5 100644 --- a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx +++ b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx @@ -261,7 +261,7 @@ const GridContainer = styled('div')<{ display: 'flex', alignItems: 'stretch', borderRadius: '10px', - border: '1px solid #FFF', + border: '1px solid transparent', minWidth: `${gridItemMinWidth}%`, [`&:hover .${GRID_ITEM_CONTENT_CLASS_NAME}`]: { borderColor: theme.affine.palette.borderColor, diff --git a/libs/components/editor-blocks/src/blocks/text/TextView.tsx b/libs/components/editor-blocks/src/blocks/text/TextView.tsx index ea8f14e0de..2a9d77d577 100644 --- a/libs/components/editor-blocks/src/blocks/text/TextView.tsx +++ b/libs/components/editor-blocks/src/blocks/text/TextView.tsx @@ -113,13 +113,18 @@ export const TextView = ({ block.id, 'end' ); - const value = [ - ...preNode.getProperty('text').value, - ...block.getProperty('text').value, - ]; - await preNode.setProperty('text', { - value, - }); + if ( + block.getProperty('text').value[0] && + block.getProperty('text').value[0]?.text !== '' + ) { + const value = [ + ...preNode.getProperty('text').value, + ...block.getProperty('text').value, + ]; + await preNode.setProperty('text', { + value, + }); + } await preNode.append(...children); await block.remove(); editor.suspend(false); diff --git a/libs/components/editor-blocks/src/components/style-container/index.tsx b/libs/components/editor-blocks/src/components/style-container/index.tsx index 28ca5d6aea..b0dfd8dd2f 100644 --- a/libs/components/editor-blocks/src/components/style-container/index.tsx +++ b/libs/components/editor-blocks/src/components/style-container/index.tsx @@ -5,6 +5,7 @@ export const List = styled('div')(({ theme }) => ({ '.checkBoxContainer': { marginRight: '4px', lineHeight: theme.affine.typography.body1.lineHeight, + color: theme.affine.typography.body1.color, }, '.textContainer': { flex: 1, diff --git a/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx index 7928375a32..f433c1fba9 100644 --- a/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx +++ b/libs/components/editor-blocks/src/components/text-manage/TextManage.tsx @@ -42,16 +42,19 @@ const TextBlockContainer = styled(Text)(({ theme }) => ({ fontFamily: theme.affine.typography.body1.fontFamily, color: theme.affine.typography.body1.color, letterSpacing: '0.1px', + a: { + color: '#3e6fdb', + }, })); const findSlice = (arr: string[], p: string, q: string) => { - let should_include = false; + let shouldInclude = false; return arr.filter(block => { if (block === p || block === q) { - should_include = !should_include; + shouldInclude = !shouldInclude; return true; } else { - return should_include; + return shouldInclude; } }); }; @@ -115,11 +118,8 @@ export const TextManage = forwardRef( (ref as MutableRefObject) || defaultRef; const properties = block.getProperties(); - // const [is_select, set_is_select] = useState(); - // useOnSelect(block.id, (is_select: boolean) => { - // set_is_select(is_select); - // }); - const on_text_view_set_selection = (selection: Range | Point) => { + + const onTextViewSetSelection = (selection: Range | Point) => { if (selection instanceof Point) { //do some thing } else { @@ -128,18 +128,18 @@ export const TextManage = forwardRef( }; // block = await editor.commands.blockCommands.createNextBlock(block.id,) - const on_text_view_active = useCallback( + const onTextViewActive = useCallback( (point: CursorTypes) => { // TODO code to be optimized if (textRef.current) { - const end_selection = textRef.current.getEndSelection(); - const start_selection = textRef.current.getStartSelection(); + const endSelection = textRef.current.getEndSelection(); + const startSelection = textRef.current.getStartSelection(); if (point === 'start') { - textRef.current.setSelection(start_selection); + textRef.current.setSelection(startSelection); return; } if (point === 'end') { - textRef.current.setSelection(end_selection); + textRef.current.setSelection(endSelection); return; } try { @@ -154,24 +154,24 @@ export const TextManage = forwardRef( } else { blockTop = blockDomStyle.top + 5; } - const end_position = ReactEditor.toDOMRange( + const endPosition = ReactEditor.toDOMRange( textRef.current.editor, - end_selection + endSelection ) .getClientRects() .item(0); - const start_position = ReactEditor.toDOMRange( + const startPosition = ReactEditor.toDOMRange( textRef.current.editor, - start_selection + startSelection ) .getClientRects() .item(0); - if (end_position.left <= point.x) { - textRef.current.setSelection(end_selection); + if (endPosition.left <= point.x) { + textRef.current.setSelection(endSelection); return; } - if (start_position.left >= point.x) { - textRef.current.setSelection(start_selection); + if (startPosition.left >= point.x) { + textRef.current.setSelection(startSelection); return; } let range: globalThis.Range; @@ -189,7 +189,7 @@ export const TextManage = forwardRef( range = document.createRange(); range.setStart(caret.offsetNode, caret.offset); } - const slate_rang = ReactEditor.toSlateRange( + const slateRang = ReactEditor.toSlateRange( textRef.current.editor, range, { @@ -197,19 +197,19 @@ export const TextManage = forwardRef( suppressThrow: true, } ); - textRef.current.setSelection(slate_rang); + textRef.current.setSelection(slateRang); } } catch (e) { console.log('e: ', e); - textRef.current.setSelection(end_selection); + textRef.current.setSelection(endSelection); } } }, [textRef] ); - useOnSelectActive(block.id, on_text_view_active); - useOnSelectSetSelection<'Range'>(block.id, on_text_view_set_selection); + useOnSelectActive(block.id, onTextViewActive); + useOnSelectSetSelection<'Range'>(block.id, onTextViewSetSelection); useEffect(() => { if (textRef.current) { @@ -235,17 +235,17 @@ export const TextManage = forwardRef( (block.id === lastSelectNodeId && type === 'Range') || (type === 'Range' && info) ) { - on_text_view_active('end'); + onTextViewActive('end'); } else { - on_text_view_active('start'); + onTextViewActive('start'); } } } catch (e) { console.warn('error occured in set active in initialization'); } - }, [block.id, editor.selectionManager, on_text_view_active, textRef]); + }, [block.id, editor.selectionManager, onTextViewActive, textRef]); - const on_text_change: TextProps['handleChange'] = async ( + const onTextChange: TextProps['handleChange'] = async ( value, textStyle ) => { @@ -266,39 +266,34 @@ export const TextManage = forwardRef( }); } }; - const get_now_and_pre_rang_position = () => { - window.getSelection().getRangeAt(0); - // const now_range = - // editor.selectionManager.currentSelectInfo?.browserSelection.getRangeAt( - // 0 - // ); - const now_range = window.getSelection().getRangeAt(0); - let pre_position = null; - const now_position = now_range.getClientRects().item(0); + const getNowAndPreRangPosition = () => { + const nowRange = window.getSelection().getRangeAt(0); + let prePosition = null; + const nowPosition = nowRange.getClientRects().item(0); try { - if (now_range.startOffset !== 0) { - const pre_rang = document.createRange(); - pre_rang.setStart( - now_range.startContainer, - now_range.startOffset + 1 + if (nowRange.startOffset !== 0) { + const preRang = document.createRange(); + preRang.setStart( + nowRange.startContainer, + nowRange.startOffset + 1 ); - pre_rang.setEnd( - now_range.endContainer, - now_range.endOffset + 1 + preRang.setEnd( + nowRange.endContainer, + nowRange.endOffset + 1 ); - pre_position = pre_rang.getClientRects().item(0); + prePosition = preRang.getClientRects().item(0); } } catch (e) { // console.log(e); } - return { nowPosition: now_position, prePosition: pre_position }; + return { nowPosition: nowPosition, prePosition: prePosition }; }; const onKeyboardUp = (event: React.KeyboardEvent) => { // if default event is prevented do noting // if U want to disable up/down/enter use capture event for preventing if (!event.isDefaultPrevented()) { - const positions = get_now_and_pre_rang_position(); + const positions = getNowAndPreRangPosition(); const prePosition = positions.prePosition; const nowPosition = positions.nowPosition; if (prePosition) { @@ -339,7 +334,7 @@ export const TextManage = forwardRef( // editor.selectionManager.activeNextNode(block.id, 'start'); // return; if (!event.isDefaultPrevented()) { - const positions = get_now_and_pre_rang_position(); + const positions = getNowAndPreRangPosition(); const prePosition = positions.prePosition; const nowPosition = positions.nowPosition; // Create the last element range of slate_editor @@ -395,7 +390,7 @@ export const TextManage = forwardRef( return false; } }; - const on_select_all = () => { + const onSelectAll = () => { const isSelectAll = textRef.current.isEmpty() || textRef.current.isSelectAll(); if (isSelectAll) { @@ -405,22 +400,20 @@ export const TextManage = forwardRef( return false; }; - const on_undo = () => { + const onUndo = () => { editor.undo(); }; - const on_redo = () => { + const onRedo = () => { editor.redo(); }; - const on_keyboard_esc = () => { + const onKeyboardEsc = () => { if (editor.selectionManager.getSelectedNodesIds().length === 0) { - const active_node_id = + const activeNodeId = editor.selectionManager.getActivatedNodeId(); - if (active_node_id) { - editor.selectionManager.setSelectedNodesIds([ - active_node_id, - ]); + if (activeNodeId) { + editor.selectionManager.setSelectedNodesIds([activeNodeId]); ReactEditor.blur(textRef.current.editor); } } else { @@ -428,7 +421,7 @@ export const TextManage = forwardRef( } }; - const on_shift_click = async (e: MouseEvent) => { + const onShiftClick = async (e: MouseEvent) => { if (e.shiftKey) { const activeId = editor.selectionManager.getActivatedNodeId(); if (activeId === block.id) { @@ -477,16 +470,16 @@ export const TextManage = forwardRef( className={`${otherOptions.className}`} currentValue={properties.text.value} textStyle={properties.textStyle} - handleChange={on_text_change} + handleChange={onTextChange} handleUp={onKeyboardUp} handleDown={onKeyboardDown} handleLeft={onKeyboardLeft} handleRight={onKeyboardRight} - handleSelectAll={on_select_all} - handleMouseDown={on_shift_click} - handleUndo={on_undo} - handleRedo={on_redo} - handleEsc={on_keyboard_esc} + handleSelectAll={onSelectAll} + handleMouseDown={onShiftClick} + handleUndo={onUndo} + handleRedo={onRedo} + handleEsc={onKeyboardEsc} {...otherOptions} /> ); diff --git a/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx b/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx index f2b2b3652d..f4fdd29240 100644 --- a/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx +++ b/libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx @@ -27,7 +27,7 @@ const defaultConfig: WithChildrenConfig = { const TreeView = forwardRef< HTMLDivElement, { lastItem?: boolean } & ComponentPropsWithRef<'div'> ->(({ lastItem, children, onClick, ...restProps }, ref) => { +>(({ lastItem = false, children, onClick, ...restProps }, ref) => { return ( @@ -155,8 +155,11 @@ const Wrapper = styled('div')({ display: 'flex', flexDirection: 'column' }); const Children = Wrapper; const TREE_COLOR = '#D5DFE6'; -// TODO determine the position of the horizontal line by the type of the item -const ITEM_POINT_HEIGHT = '12.5px'; // '50%' +// adjust left and right margins of the the tree line +const TREE_LINE_LEFT_OFFSET = '-16px'; +// determine the position of the horizontal line by the type of the item +const TREE_LINE_TOP_OFFSET = '20px'; // '50%' +const TREE_LINE_WIDTH = '12px'; const TreeWrapper = styled('div')({ position: 'relative', @@ -164,7 +167,7 @@ const TreeWrapper = styled('div')({ const StyledTreeView = styled('div')({ position: 'absolute', - left: '-21px', + left: TREE_LINE_LEFT_OFFSET, height: '100%', }); @@ -183,7 +186,7 @@ const Line = styled('div')({ const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({ width: '1px', - height: last ? ITEM_POINT_HEIGHT : '100%', + height: last ? TREE_LINE_TOP_OFFSET : '100%', paddingTop: 0, paddingBottom: 0, transform: 'translate(-50%, 0)', @@ -192,11 +195,11 @@ const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({ })); const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({ - width: '16px', + width: TREE_LINE_WIDTH, height: '1px', paddingLeft: 0, paddingRight: 0, - top: ITEM_POINT_HEIGHT, + top: TREE_LINE_TOP_OFFSET, transform: 'translate(0, -50%)', opacity: last ? 0 : 'unset', })); @@ -204,7 +207,8 @@ const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({ const Collapsed = styled('div')({ cursor: 'pointer', display: 'inline-block', - color: '#B9CAD5', + color: '#98ACBD', + padding: '8px', }); const LastItemRadius = styled('div')({ @@ -212,9 +216,9 @@ const LastItemRadius = styled('div')({ position: 'absolute', left: '-0.5px', top: 0, - height: ITEM_POINT_HEIGHT, + height: TREE_LINE_TOP_OFFSET, bottom: '50%', - width: '16px', + width: TREE_LINE_WIDTH, borderWidth: '1px', borderStyle: 'solid', borderLeftColor: TREE_COLOR, diff --git a/libs/components/editor-core/src/RenderRoot.tsx b/libs/components/editor-core/src/RenderRoot.tsx index 101b5f9048..93ae57a6f0 100644 --- a/libs/components/editor-core/src/RenderRoot.tsx +++ b/libs/components/editor-core/src/RenderRoot.tsx @@ -152,6 +152,7 @@ export const RenderRoot = ({ }; const onDrop = (event: React.DragEvent) => { + event.preventDefault(); editor.dragDropManager.handlerEditorDrop(event); editor.getHooks().onRootNodeDrop(event); }; diff --git a/libs/components/editor-core/src/Selection.tsx b/libs/components/editor-core/src/Selection.tsx index 98ad9ccb1f..6317c9ac0c 100644 --- a/libs/components/editor-core/src/Selection.tsx +++ b/libs/components/editor-core/src/Selection.tsx @@ -233,7 +233,8 @@ export const SelectionRect = forwardRef( startPointRef.current && endPointRef.current && scrollManager.scrollContainer && - scrollContainerRect.current + scrollContainerRect.current && + mouseType.current === 'down' ) { const xSign = DIRECTION_VALUE_MAP[direction[0]] || 0; const ySign = DIRECTION_VALUE_MAP[direction[1]] || 0; diff --git a/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx index bbb61be631..ce5dc6cdc9 100644 --- a/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx +++ b/libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx @@ -4,7 +4,11 @@ import { Popover, type PopoverProps, PopperHandler, + Tag, + type PopperProps, } from '@toeverything/components/ui'; +import { TagsIcon } from '@toeverything/components/icons'; + import { CreatePendantPanel } from './pendant-operation-panel'; import { IconButton } from './StyledComponent'; import { AsyncBlock } from '../editor'; @@ -13,17 +17,21 @@ type Props = { block: AsyncBlock; onSure?: () => void; iconStyle?: CSSProperties; + useAddIcon?: boolean; } & Omit; export const AddPendantPopover = ({ block, onSure, iconStyle, + useAddIcon = true, ...popoverProps }: Props) => { const popoverHandlerRef = useRef(); + const popperRef = useRef(); return ( { + popperRef.current?.update?.(); + }} /> } placement="bottom-start" @@ -38,9 +49,25 @@ export const AddPendantPopover = ({ style={{ padding: 0 }} {...popoverProps} > - - - + {useAddIcon ? ( + + + + ) : ( + + } + > + Tag App + + )} ); }; diff --git a/libs/components/editor-core/src/block-pendant/config.ts b/libs/components/editor-core/src/block-pendant/config.ts index 077a795142..74471647d2 100644 --- a/libs/components/editor-core/src/block-pendant/config.ts +++ b/libs/components/editor-core/src/block-pendant/config.ts @@ -98,8 +98,8 @@ export const pendantConfig: { [key: string]: PendantConfig } = { }, [PendantTypes.Status]: { iconName: IconNames.STATUS, - background: ['#C5FBE0', '#FFF5AB', '#FFCECE', '#E3DEFF'], - color: ['#05683D', '#896406', '#AF1212', '#511AAB'], + background: ['#FFCECE', '#FFF5AB', '#C5FBE0', '#E3DEFF'], + color: ['#AF1212', '#896406', '#05683D', '#511AAB'], }, [PendantTypes.Select]: { iconName: IconNames.SINGLE_SELECT, diff --git a/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx index ade7ced37d..3efc36721f 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx @@ -91,7 +91,7 @@ export const PendantHistoryPanel = ({ return ( { + popperHandlerRef={ref => { popoverHandlerRef.current[item.id] = ref; }} placement="bottom-start" diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts index a7ed9e0198..5afbb29ad5 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts +++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts @@ -11,6 +11,7 @@ export type ModifyPanelProps = { iconConfig?: PendantConfig; isStatusSelect?: boolean; property?: RecastMetaProperty; + onTypeChange?: (type: PendantTypes) => void; }; export type ModifyPanelContentProps = { diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx index 42e36e063f..88fd5b039f 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx @@ -24,9 +24,11 @@ import { useOnCreateSure } from './hooks'; export const CreatePendantPanel = ({ block, onSure, + onTypeChange, }: { block: AsyncBlock; onSure?: () => void; + onTypeChange?: (option: PendantOptions) => void; }) => { const [selectedOption, setSelectedOption] = useState(); const [fieldName, setFieldName] = useState(''); @@ -37,6 +39,10 @@ export const CreatePendantPanel = ({ setFieldName(generateRandomFieldName(selectedOption.type)); }, [selectedOption]); + useEffect(() => { + onTypeChange?.(selectedOption); + }, [selectedOption, onTypeChange]); + return ( Add Field diff --git a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx index c0e1080355..b6e066208d 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx @@ -17,7 +17,7 @@ export const PendantPopover = ( const popoverHandlerRef = useRef(); return ( { popoverHandlerRef.current?.setVisible(false); }} offset={[0, -30]} trigger="click" + useAddIcon={false} /> } onClose={() => { diff --git a/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx b/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx index 8de0e9a207..7b3edd2c3f 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx @@ -56,7 +56,7 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => { return ( { + popperHandlerRef={ref => { popoverHandlerRef.current[id] = ref; }} container={blockRenderContainerRef.current} @@ -107,7 +107,7 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => { iconStyle={{ marginTop: 4 }} trigger="click" // trigger={isKanbanView ? 'hover' : 'click'} - container={blockRenderContainerRef.current} + // container={blockRenderContainerRef.current} /> diff --git a/libs/components/editor-core/src/block-pendant/utils.ts b/libs/components/editor-core/src/block-pendant/utils.ts index 63a3344a91..bebdef1925 100644 --- a/libs/components/editor-core/src/block-pendant/utils.ts +++ b/libs/components/editor-core/src/block-pendant/utils.ts @@ -88,7 +88,7 @@ export const generateInitialOptions = ( ) => { if (type === PendantTypes.Status) { return [ - generateBasicOption({ index: 0, iconConfig, name: 'No Started' }), + generateBasicOption({ index: 0, iconConfig, name: 'Not Started' }), generateBasicOption({ index: 1, iconConfig, diff --git a/libs/components/editor-core/src/editor/block/block-helper.ts b/libs/components/editor-core/src/editor/block/block-helper.ts index 1c1ab37dbe..7bd0284ffc 100644 --- a/libs/components/editor-core/src/editor/block/block-helper.ts +++ b/libs/components/editor-core/src/editor/block/block-helper.ts @@ -3,7 +3,13 @@ import type { SlateUtils, TextAlignOptions, } from '@toeverything/components/common'; -import { Point, Selection as SlateSelection } from 'slate'; +import { + BaseRange, + Node, + Path, + Point, + Selection as SlateSelection, +} from 'slate'; import { Editor } from '../editor'; type TextUtilsFunctions = @@ -28,7 +34,10 @@ type TextUtilsFunctions = | 'removeSelection' | 'insertReference' | 'isCollapsed' - | 'blur'; + | 'blur' + | 'setSelection' + | 'insertNodes' + | 'getNodeByPath'; type ExtendedTextUtils = SlateUtils & { setLinkModalVisible: (visible: boolean) => void; @@ -193,6 +202,59 @@ export class BlockHelper { return ''; } + /** + * + * set selection of a text input + * @param {string} blockId + * @param {BaseRange} selection + * @return {*} + * @memberof BlockHelper + */ + public setSelection(blockId: string, selection: BaseRange) { + const text_utils = this._blockTextUtilsMap[blockId]; + if (text_utils) { + return text_utils.setSelection(selection); + } + console.warn('Could find the block text utils'); + } + + /** + * + * insert nodes in text + * @param {string} blockId + * @param {Array} nodes + * @param {Parameters[1]} options + * @return {*} + * @memberof BlockHelper + */ + public insertNodes( + blockId: string, + nodes: Array, + options?: Parameters[1] + ) { + const text_utils = this._blockTextUtilsMap[blockId]; + if (text_utils) { + return text_utils.insertNodes(nodes, options); + } + console.warn('Could find the block text utils'); + } + + /** + * + * get text(slate node) by path + * @param {string} blockId + * @param {Path} path + * @return {*} + * @memberof BlockHelper + */ + public getNodeByPath(blockId: string, path: Path) { + const text_utils = this._blockTextUtilsMap[blockId]; + if (text_utils) { + return text_utils.getNodeByPath(path); + } + console.warn('Could find the block text utils'); + } + public transformPoint( blockId: string, ...restArgs: Parameters diff --git a/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts b/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts index eefca42b0e..64eecbc5ca 100644 --- a/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts +++ b/libs/components/editor-core/src/editor/clipboard/browser-clipboard.ts @@ -14,403 +14,126 @@ import { services, } from '@toeverything/datasource/db-service'; import { MarkdownParser } from './markdown-parse'; - +import { shouldHandlerContinue } from './utils'; +import { Paste } from './paste'; // todo needs to be a switch -const support_markdown_paste = true; enum ClipboardAction { COPY = 'copy', CUT = 'cut', PASTE = 'paste', } -class BrowserClipboard { - private event_target: Element; - private hooks: HooksRunner; - private editor: Editor; - private clipboard_parse: ClipboardParse; - private markdown_parse: MarkdownParser; - private static optimal_mime_type: string[] = [ - OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED, - OFFICE_CLIPBOARD_MIMETYPE.HTML, - OFFICE_CLIPBOARD_MIMETYPE.TEXT, - ]; +//TODO: need to consider the cursor position after inserting the children +class BrowserClipboard { + private _eventTarget: Element; + private _hooks: HooksRunner; + private _editor: Editor; + private _clipboardParse: ClipboardParse; + private _markdownParse: MarkdownParser; + private _paste: Paste; constructor(eventTarget: Element, hooks: HooksRunner, editor: Editor) { - this.event_target = eventTarget; - this.hooks = hooks; - this.editor = editor; - this.clipboard_parse = new ClipboardParse(editor); - this.markdown_parse = new MarkdownParser(); - this.initialize(); + this._eventTarget = eventTarget; + this._hooks = hooks; + this._editor = editor; + this._clipboardParse = new ClipboardParse(editor); + this._markdownParse = new MarkdownParser(); + this._paste = new Paste( + editor, + this._clipboardParse, + this._markdownParse + ); + this._initialize(); } public getClipboardParse() { - return this.clipboard_parse; + return this._clipboardParse; } - private initialize() { - this.handle_copy = this.handle_copy.bind(this); - this.handle_cut = this.handle_cut.bind(this); - this.handle_paste = this.handle_paste.bind(this); + private _initialize() { + this._handleCopy = this._handleCopy.bind(this); + this._handleCut = this._handleCut.bind(this); - document.addEventListener(ClipboardAction.COPY, this.handle_copy); - document.addEventListener(ClipboardAction.CUT, this.handle_cut); - document.addEventListener(ClipboardAction.PASTE, this.handle_paste); - this.event_target.addEventListener( - ClipboardAction.COPY, - this.handle_copy - ); - this.event_target.addEventListener( - ClipboardAction.CUT, - this.handle_cut - ); - this.event_target.addEventListener( + document.addEventListener(ClipboardAction.COPY, this._handleCopy); + document.addEventListener(ClipboardAction.CUT, this._handleCut); + document.addEventListener( ClipboardAction.PASTE, - this.handle_paste + this._paste.handlePaste ); - } - - private handle_copy(e: Event) { - //@ts-ignore - if (e.defaultPrevented || e.target.nodeName === 'INPUT') { - return; - } - - this.dispatch_clipboard_event( + this._eventTarget.addEventListener( ClipboardAction.COPY, - e as ClipboardEvent + this._handleCopy + ); + this._eventTarget.addEventListener( + ClipboardAction.CUT, + this._handleCut + ); + this._eventTarget.addEventListener( + ClipboardAction.PASTE, + this._paste.handlePaste ); } - private handle_cut(e: Event) { - //@ts-ignore - if (e.defaultPrevented || e.target.nodeName === 'INPUT') { - return; - } - this.dispatch_clipboard_event(ClipboardAction.CUT, e as ClipboardEvent); - } - - private handle_paste(e: Event) { - //@ts-ignore TODO should be handled more scientifically here, whether to trigger the paste time, also need some whitelist mechanism - if (e.defaultPrevented || e.target.nodeName === 'INPUT') { + private _handleCopy(e: Event) { + if (!shouldHandlerContinue(e, this._editor)) { return; } - const clipboardData = (e as ClipboardEvent).clipboardData; - - const isPureFile = this.is_pure_file_in_clipboard(clipboardData); - - if (!isPureFile) { - this.paste_content(clipboardData); - } else { - this.paste_file(clipboardData); - } - // this.editor.selectionManager - // .getSelectInfo() - // .then(selectionInfo => console.log(selectionInfo)); - - e.stopPropagation(); + this._dispatchClipboardEvent(ClipboardAction.COPY, e as ClipboardEvent); } - private paste_content(clipboardData: any) { - const originClip: { data: any; type: any } = this.getOptimalClip( - clipboardData - ) as { data: any; type: any }; - const originTextClipData = clipboardData.getData( - OFFICE_CLIPBOARD_MIMETYPE.TEXT - ); - - let clipData = originClip['data']; - - if (originClip['type'] === OFFICE_CLIPBOARD_MIMETYPE.TEXT) { - clipData = this.excape_html(clipData); - } - - switch (originClip['type']) { - /** Protocol paste */ - case OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED: - this.fire_paste_edit_action(clipData); - break; - case OFFICE_CLIPBOARD_MIMETYPE.HTML: - this.paste_html(clipData, originTextClipData); - break; - case OFFICE_CLIPBOARD_MIMETYPE.TEXT: - this.paste_text(clipData, originTextClipData); - break; - - default: - break; - } - } - - private paste_html(clipData: any, originTextClipData: any) { - if (support_markdown_paste) { - const has_markdown = - this.markdown_parse.checkIfTextContainsMd(originTextClipData); - if (has_markdown) { - try { - const convertedDataObj = - this.markdown_parse.md2Html(originTextClipData); - if (convertedDataObj.isConverted) { - clipData = convertedDataObj.text; - } - } catch (e) { - console.error(e); - clipData = originTextClipData; - } - } - } - - const blocks = this.clipboard_parse.html2blocks(clipData); - this.insert_blocks(blocks); - } - - private paste_text(clipData: any, originTextClipData: any) { - const blocks = this.clipboard_parse.text2blocks(clipData); - this.insert_blocks(blocks); - } - - private async paste_file(clipboardData: any) { - const file = this.get_image_file(clipboardData); - if (file) { - const result = await services.api.file.create({ - workspace: this.editor.workspace, - file: file, - }); - const block_info: ClipBlockInfo = { - type: 'image', - properties: { - image: { - value: result.id, - name: file.name, - size: file.size, - type: file.type, - }, - }, - children: [] as ClipBlockInfo[], - }; - this.insert_blocks([block_info]); - } - } - - private get_image_file(clipboardData: any) { - const files = clipboardData.files; - if (files && files[0] && files[0].type.indexOf('image') > -1) { - return files[0]; - } - return; - } - - private excape_html(data: any, onlySpace?: any) { - if (!onlySpace) { - // TODO: - // data = string.htmlEscape(data); - // data = data.replace(/\n/g, '
'); - } - - // data = data.replace(/ /g, ' '); - // data = data.replace(/\t/g, '    '); - return data; - } - - public getOptimalClip(clipboardData: any) { - const mimeTypeArr = BrowserClipboard.optimal_mime_type; - - for (let i = 0; i < mimeTypeArr.length; i++) { - const data = - clipboardData[mimeTypeArr[i]] || - clipboardData.getData(mimeTypeArr[i]); - - if (data) { - return { - type: mimeTypeArr[i], - data: data, - }; - } - } - - return ''; - } - - private is_pure_file_in_clipboard(clipboardData: DataTransfer) { - const types = clipboardData.types; - - const res = - (types.length === 1 && types[0] === 'Files') || - (types.length === 2 && - (types.includes('text/plain') || types.includes('text/html')) && - types.includes('Files')); - - return res; - } - - private async fire_paste_edit_action(clipboardData: any) { - const clip_info: InnerClipInfo = JSON.parse(clipboardData); - clip_info && this.insert_blocks(clip_info.data, clip_info.select); - } - - private can_edit_text(type: BlockFlavorKeys) { - return ( - type === Protocol.Block.Type.page || - type === Protocol.Block.Type.text || - type === Protocol.Block.Type.heading1 || - type === Protocol.Block.Type.heading2 || - type === Protocol.Block.Type.heading3 || - type === Protocol.Block.Type.quote || - type === Protocol.Block.Type.todo || - type === Protocol.Block.Type.code || - type === Protocol.Block.Type.callout || - type === Protocol.Block.Type.numbered || - type === Protocol.Block.Type.bullet - ); - } - - // TODO: cursor positioning problem - private async insert_blocks(blocks: ClipBlockInfo[], select?: SelectInfo) { - if (blocks.length === 0) { + private _handleCut(e: Event) { + if (!shouldHandlerContinue(e, this._editor)) { return; } - const cur_select_info = - await this.editor.selectionManager.getSelectInfo(); - if (cur_select_info.blocks.length === 0) { - return; - } - - let begin_index = 0; - const cur_node_id = - cur_select_info.blocks[cur_select_info.blocks.length - 1].blockId; - let cur_block = await this.editor.getBlockById(cur_node_id); - const block_view = this.editor.getView(cur_block.type); - if ( - cur_select_info.type === 'Range' && - cur_block.type === 'text' && - block_view.isEmpty(cur_block) - ) { - cur_block.setType(blocks[0].type); - cur_block.setProperties(blocks[0].properties); - this.paste_children(cur_block, blocks[0].children); - begin_index = 1; - } else if ( - select?.type === 'Range' && - cur_select_info.type === 'Range' && - this.can_edit_text(cur_block.type) && - this.can_edit_text(blocks[0].type) - ) { - if ( - cur_select_info.blocks.length > 0 && - cur_select_info.blocks[0].startInfo - ) { - const start_info = cur_select_info.blocks[0].startInfo; - const end_info = cur_select_info.blocks[0].endInfo; - const cur_text_value = cur_block.getProperty('text').value; - const pre_cur_text_value = cur_text_value.slice( - 0, - start_info.arrayIndex - ); - const last_cur_text_value = cur_text_value.slice( - end_info.arrayIndex + 1 - ); - const pre_text = cur_text_value[ - start_info.arrayIndex - ].text.substring(0, start_info.offset); - const last_text = cur_text_value[ - end_info.arrayIndex - ].text.substring(end_info.offset); - - let last_block: ClipBlockInfo = blocks[blocks.length - 1]; - if (!this.can_edit_text(last_block.type)) { - last_block = { type: 'text', children: [] }; - blocks.push(last_block); - } - const last_values = last_block.properties?.text?.value; - last_text && last_values.push({ text: last_text }); - last_values.push(...last_cur_text_value); - last_block.properties = { - text: { value: last_values }, - }; - - const insert_info = blocks[0].properties.text; - pre_text && pre_cur_text_value.push({ text: pre_text }); - pre_cur_text_value.push(...insert_info.value); - this.editor.blockHelper.setBlockBlur(cur_node_id); - setTimeout(async () => { - const cur_block = await this.editor.getBlockById( - cur_node_id - ); - cur_block.setProperties({ - text: { value: pre_cur_text_value }, - }); - this.paste_children(cur_block, blocks[0].children); - }, 0); - begin_index = 1; - } - } - - for (let i = begin_index; i < blocks.length; i++) { - const next_block = await this.editor.createBlock(blocks[i].type); - next_block.setProperties(blocks[i].properties); - if (cur_block.type === 'page') { - cur_block.prepend(next_block); - } else { - cur_block.after(next_block); - } - - this.paste_children(next_block, blocks[i].children); - cur_block = next_block; - } + this._dispatchClipboardEvent(ClipboardAction.CUT, e as ClipboardEvent); } - private async paste_children(parent: AsyncBlock, children: any[]) { - for (let i = 0; i < children.length; i++) { - const next_block = await this.editor.createBlock(children[i].type); - next_block.setProperties(children[i].properties); - parent.append(next_block); - await this.paste_children(next_block, children[i].children); - } - } - - private pre_copy_cut(action: ClipboardAction, e: ClipboardEvent) { + private _preCopyCut(action: ClipboardAction, e: ClipboardEvent) { switch (action) { case ClipboardAction.COPY: - this.hooks.beforeCopy(e); + this._hooks.beforeCopy(e); break; case ClipboardAction.CUT: - this.hooks.beforeCut(e); + this._hooks.beforeCut(e); break; } } - private dispatch_clipboard_event( + private _dispatchClipboardEvent( action: ClipboardAction, e: ClipboardEvent ) { - this.pre_copy_cut(action, e); + this._preCopyCut(action, e); } dispose() { - document.removeEventListener(ClipboardAction.COPY, this.handle_copy); - document.removeEventListener(ClipboardAction.CUT, this.handle_cut); - document.removeEventListener(ClipboardAction.PASTE, this.handle_paste); - this.event_target.removeEventListener( - ClipboardAction.COPY, - this.handle_copy - ); - this.event_target.removeEventListener( - ClipboardAction.CUT, - this.handle_cut - ); - this.event_target.removeEventListener( + document.removeEventListener(ClipboardAction.COPY, this._handleCopy); + document.removeEventListener(ClipboardAction.CUT, this._handleCut); + document.removeEventListener( ClipboardAction.PASTE, - this.handle_paste + this._paste.handlePaste ); - this.clipboard_parse.dispose(); - this.clipboard_parse = null; - this.event_target = null; - this.hooks = null; - this.editor = null; + this._eventTarget.removeEventListener( + ClipboardAction.COPY, + this._handleCopy + ); + this._eventTarget.removeEventListener( + ClipboardAction.CUT, + this._handleCut + ); + this._eventTarget.removeEventListener( + ClipboardAction.PASTE, + this._paste.handlePaste + ); + this._clipboardParse.dispose(); + this._clipboardParse = null; + this._eventTarget = null; + this._hooks = null; + this._editor = null; } } diff --git a/libs/components/editor-core/src/editor/clipboard/clipboard-parse.ts b/libs/components/editor-core/src/editor/clipboard/clipboard-parse.ts index a4a59bd2ba..43b72ed6e7 100644 --- a/libs/components/editor-core/src/editor/clipboard/clipboard-parse.ts +++ b/libs/components/editor-core/src/editor/clipboard/clipboard-parse.ts @@ -115,10 +115,8 @@ export default class ClipboardParse { const block_utils = this.editor.getView( ClipboardParse.block_types[i] ); - const blocks = - block_utils && - block_utils.html2block && - block_utils.html2block(el, this.parse_dom); + const blocks = block_utils?.html2block?.(el, this.parse_dom); + if (blocks) { return blocks; } diff --git a/libs/components/editor-core/src/editor/clipboard/clipboard-populator.ts b/libs/components/editor-core/src/editor/clipboard/clipboard-populator.ts index 4d28ce3cf8..2f05866ab9 100644 --- a/libs/components/editor-core/src/editor/clipboard/clipboard-populator.ts +++ b/libs/components/editor-core/src/editor/clipboard/clipboard-populator.ts @@ -46,7 +46,7 @@ class ClipboardPopulator { } // TODO: is not compatible with safari - const success = this.copy_to_cliboard_from_pc(clips); + const success = this._copyToClipboardFromPc(clips); if (!success) { // This way, not compatible with firefox const clipboardData = e.clipboardData; @@ -65,7 +65,7 @@ class ClipboardPopulator { } }; - private copy_to_cliboard_from_pc(clips: any[]) { + private _copyToClipboardFromPc(clips: any[]) { let success = false; const tempElem = document.createElement('textarea'); tempElem.value = 'temp'; @@ -96,56 +96,55 @@ class ClipboardPopulator { return success; } - private async get_clip_block_info(selBlock: SelectBlock) { + private async _getClipBlockInfo(selBlock: SelectBlock) { const block = await this._editor.getBlockById(selBlock.blockId); - const block_view = this._editor.getView(block.type); - assert(block_view); - const block_info: ClipBlockInfo = { + const blockView = this._editor.getView(block.type); + assert(blockView); + const blockInfo: ClipBlockInfo = { type: block.type, - properties: block_view.getSelProperties(block, selBlock), + properties: blockView.getSelProperties(block, selBlock), children: [] as any[], }; for (let i = 0; i < selBlock.children.length; i++) { - const child_info = await this.get_clip_block_info( + const childInfo = await this._getClipBlockInfo( selBlock.children[i] ); - block_info.children.push(child_info); + blockInfo.children.push(childInfo); } - return block_info; + return blockInfo; } - private async get_inner_clip(): Promise { + private async _getInnerClip(): Promise { const clips: ClipBlockInfo[] = []; - const select_info: SelectInfo = + const selectInfo: SelectInfo = await this._selectionManager.getSelectInfo(); - for (let i = 0; i < select_info.blocks.length; i++) { - const sel_block = select_info.blocks[i]; - const clip_block_info = await this.get_clip_block_info(sel_block); - clips.push(clip_block_info); + for (let i = 0; i < selectInfo.blocks.length; i++) { + const selBlock = selectInfo.blocks[i]; + const clipBlockInfo = await this._getClipBlockInfo(selBlock); + clips.push(clipBlockInfo); } - const clipInfo: InnerClipInfo = { - select: select_info, + return { + select: selectInfo, data: clips, }; - return clipInfo; } async getClips() { const clips: any[] = []; - const inner_clip = await this.get_inner_clip(); + const innerClip = await this._getInnerClip(); clips.push( new Clip( OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED, - JSON.stringify(inner_clip) + JSON.stringify(innerClip) ) ); - const html_clip = await this._clipboardParse.generateHtml(); - html_clip && - clips.push(new Clip(OFFICE_CLIPBOARD_MIMETYPE.HTML, html_clip)); + const htmlClip = await this._clipboardParse.generateHtml(); + htmlClip && + clips.push(new Clip(OFFICE_CLIPBOARD_MIMETYPE.HTML, htmlClip)); return clips; } diff --git a/libs/components/editor-core/src/editor/clipboard/paste.ts b/libs/components/editor-core/src/editor/clipboard/paste.ts new file mode 100644 index 0000000000..0c48eee56b --- /dev/null +++ b/libs/components/editor-core/src/editor/clipboard/paste.ts @@ -0,0 +1,455 @@ +/* eslint-disable max-lines */ +import { + OFFICE_CLIPBOARD_MIMETYPE, + InnerClipInfo, + ClipBlockInfo, +} from './types'; +import { Editor } from '../editor'; +import { AsyncBlock } from '../block'; +import ClipboardParse from './clipboard-parse'; +import { SelectInfo } from '../selection'; +import { + Protocol, + BlockFlavorKeys, + services, +} from '@toeverything/datasource/db-service'; +import { MarkdownParser } from './markdown-parse'; +import { shouldHandlerContinue } from './utils'; +const SUPPORT_MARKDOWN_PASTE = true; + +type TextValueItem = { + text: string; + [key: string]: any; +}; + +export class Paste { + private _editor: Editor; + private _markdownParse: MarkdownParser; + private _clipboardParse: ClipboardParse; + + constructor( + editor: Editor, + clipboardParse: ClipboardParse, + markdownParse: MarkdownParser + ) { + this._markdownParse = markdownParse; + this._clipboardParse = clipboardParse; + this._editor = editor; + this.handlePaste = this.handlePaste.bind(this); + } + private static _optimalMimeType: string[] = [ + OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED, + OFFICE_CLIPBOARD_MIMETYPE.HTML, + OFFICE_CLIPBOARD_MIMETYPE.TEXT, + ]; + public handlePaste(e: Event) { + if (!shouldHandlerContinue(e, this._editor)) { + return; + } + e.stopPropagation(); + + const clipboardData = (e as ClipboardEvent).clipboardData; + + const isPureFile = Paste._isPureFileInClipboard(clipboardData); + if (isPureFile) { + this._pasteFile(clipboardData); + } else { + this._pasteContent(clipboardData); + } + } + public getOptimalClip(clipboardData: any) { + const mimeTypeArr = Paste._optimalMimeType; + + for (let i = 0; i < mimeTypeArr.length; i++) { + const data = + clipboardData[mimeTypeArr[i]] || + clipboardData.getData(mimeTypeArr[i]); + + if (data) { + return { + type: mimeTypeArr[i], + data: data, + }; + } + } + + return ''; + } + + private _pasteContent(clipboardData: any) { + const originClip: { data: any; type: any } = this.getOptimalClip( + clipboardData + ) as { data: any; type: any }; + + const originTextClipData = clipboardData.getData( + OFFICE_CLIPBOARD_MIMETYPE.TEXT + ); + + let clipData = originClip['data']; + + if (originClip['type'] === OFFICE_CLIPBOARD_MIMETYPE.TEXT) { + clipData = Paste._excapeHtml(clipData); + } + + switch (originClip['type']) { + /** Protocol paste */ + case OFFICE_CLIPBOARD_MIMETYPE.DOCS_DOCUMENT_SLICE_CLIP_WRAPPED: + this._firePasteEditAction(clipData); + break; + case OFFICE_CLIPBOARD_MIMETYPE.HTML: + this._pasteHtml(clipData, originTextClipData); + break; + case OFFICE_CLIPBOARD_MIMETYPE.TEXT: + this._pasteText(clipData, originTextClipData); + break; + + default: + break; + } + } + private async _firePasteEditAction(clipboardData: any) { + const clipInfo: InnerClipInfo = JSON.parse(clipboardData); + clipInfo && this._insertBlocks(clipInfo.data, clipInfo.select); + } + private async _pasteFile(clipboardData: any) { + const file = Paste._getImageFile(clipboardData); + if (file) { + const result = await services.api.file.create({ + workspace: this._editor.workspace, + file: file, + }); + const blockInfo: ClipBlockInfo = { + type: 'image', + properties: { + image: { + value: result.id, + name: file.name, + size: file.size, + type: file.type, + }, + }, + children: [] as ClipBlockInfo[], + }; + await this._insertBlocks([blockInfo]); + } + } + private static _isPureFileInClipboard(clipboardData: DataTransfer) { + const types = clipboardData.types; + + return ( + (types.length === 1 && types[0] === 'Files') || + (types.length === 2 && + (types.includes('text/plain') || types.includes('text/html')) && + types.includes('Files')) + ); + } + + private static _isTextEditBlock(type: BlockFlavorKeys) { + return ( + type === Protocol.Block.Type.page || + type === Protocol.Block.Type.text || + type === Protocol.Block.Type.heading1 || + type === Protocol.Block.Type.heading2 || + type === Protocol.Block.Type.heading3 || + type === Protocol.Block.Type.quote || + type === Protocol.Block.Type.todo || + type === Protocol.Block.Type.code || + type === Protocol.Block.Type.callout || + type === Protocol.Block.Type.numbered || + type === Protocol.Block.Type.bullet + ); + } + + private async _insertBlocks( + blocks: ClipBlockInfo[], + pasteSelect?: SelectInfo + ) { + if (blocks.length === 0) { + return; + } + const currentSelectInfo = + await this._editor.selectionManager.getSelectInfo(); + + // When the selection is in one of the blocks, select?.type === 'Range' + // Currently the selection does not support cross-blocking, so this case is not considered + if (currentSelectInfo.type === 'Range') { + // 当 currentSelectInfo.type === 'Range' 时，光标选中的block必然只有一个 + const selectedBlock = await this._editor.getBlockById( + currentSelectInfo.blocks[0].blockId + ); + const isSelectedBlockEdit = Paste._isTextEditBlock( + selectedBlock.type + ); + if (isSelectedBlockEdit) { + const shouldSplitBlock = + blocks.length > 1 || + !Paste._isTextEditBlock(blocks[0].type); + const pureText = !shouldSplitBlock + ? blocks[0].properties.text.value + : [{ text: '' }]; + const { startInfo, endInfo } = currentSelectInfo.blocks[0]; + + // Text content of the selected current editable block + const currentTextValue = + selectedBlock.getProperty('text').value; + // When the cursor selection spans different styles of text + if (startInfo?.arrayIndex !== endInfo?.arrayIndex) { + if (shouldSplitBlock) { + // TODO: split block maybe should use slate method to support, like "this._editor.blockHelper.insertNodes" + const newTextValue = currentTextValue.reduce( + ( + newTextValue: TextValueItem[], + textStore: TextValueItem, + i: number + ) => { + if (i < startInfo?.arrayIndex) { + newTextValue.push(textStore); + } + const { text, ...props } = textStore; + + if (i === startInfo?.arrayIndex) { + newTextValue.push({ + text: text.slice(0, startInfo?.offset), + ...props, + }); + } + return newTextValue; + }, + [] + ); + const nextTextValue = currentTextValue.reduce( + ( + newTextValue: TextValueItem[], + textStore: TextValueItem, + i: number + ) => { + if (i > endInfo?.arrayIndex) { + newTextValue.push(textStore); + } + const { text, ...props } = textStore; + + if (i === endInfo?.arrayIndex) { + newTextValue.push({ + text: text.slice(endInfo?.offset), + ...props, + }); + } + return newTextValue; + }, + [] + ); + + selectedBlock.setProperties({ + text: { + value: newTextValue, + }, + }); + const pasteBlocks = await this._createBlocks(blocks); + pasteBlocks.forEach(block => { + selectedBlock.after(block); + }); + const nextBlock = await this._editor.createBlock( + selectedBlock?.type + ); + nextBlock.setProperties({ + text: { + value: nextTextValue, + }, + }); + pasteBlocks[pasteBlocks.length - 1].after(nextBlock); + + this._setEndSelectToBlock( + pasteBlocks[pasteBlocks.length - 1].id + ); + } else { + this._editor.blockHelper.insertNodes( + selectedBlock.id, + pureText, + { select: true } + ); + } + } + // When the cursor selection does not span different styles of text + if (startInfo?.arrayIndex === endInfo?.arrayIndex) { + if (shouldSplitBlock) { + // TODO: split block maybe should use slate method to support, like "this._editor.blockHelper.insertNodes" + const newTextValue = currentTextValue.reduce( + ( + newTextValue: TextValueItem[], + textStore: TextValueItem, + i: number + ) => { + if (i < startInfo?.arrayIndex) { + newTextValue.push(textStore); + } + const { text, ...props } = textStore; + + if (i === startInfo?.arrayIndex) { + newTextValue.push({ + text: `${text.slice( + 0, + startInfo?.offset + )}`, + ...props, + }); + } + return newTextValue; + }, + [] + ); + + const nextTextValue = currentTextValue.reduce( + ( + nextTextValue: TextValueItem[], + textStore: TextValueItem, + i: number + ) => { + if (i > endInfo?.arrayIndex) { + nextTextValue.push(textStore); + } + const { text, ...props } = textStore; + + if (i === endInfo?.arrayIndex) { + nextTextValue.push({ + text: `${text.slice(endInfo?.offset)}`, + ...props, + }); + } + return nextTextValue; + }, + [] + ); + selectedBlock.setProperties({ + text: { + value: newTextValue, + }, + }); + const pasteBlocks = await this._createBlocks(blocks); + pasteBlocks.forEach((block: AsyncBlock) => { + selectedBlock.after(block); + }); + const nextBlock = await this._editor.createBlock( + selectedBlock?.type + ); + nextBlock.setProperties({ + text: { + value: nextTextValue, + }, + }); + pasteBlocks[pasteBlocks.length - 1].after(nextBlock); + + this._setEndSelectToBlock( + pasteBlocks[pasteBlocks.length - 1].id + ); + } else { + this._editor.blockHelper.insertNodes( + selectedBlock.id, + pureText, + { select: true } + ); + } + } + } else { + const pasteBlocks = await this._createBlocks(blocks); + pasteBlocks.forEach(block => { + selectedBlock.after(block); + }); + this._setEndSelectToBlock( + pasteBlocks[pasteBlocks.length - 1].id + ); + } + } + + if (currentSelectInfo.type === 'Block') { + const selectedBlock = await this._editor.getBlockById( + currentSelectInfo.blocks[currentSelectInfo.blocks.length - 1] + .blockId + ); + const pasteBlocks = await this._createBlocks(blocks); + + let groupBlock: AsyncBlock; + if ( + selectedBlock?.type === 'group' || + selectedBlock?.type === 'page' + ) { + groupBlock = await this._editor.createBlock('group'); + pasteBlocks.forEach(block => { + groupBlock.append(block); + }); + await selectedBlock.after(groupBlock); + } else { + pasteBlocks.forEach(block => { + selectedBlock.after(block); + }); + } + this._setEndSelectToBlock(pasteBlocks[pasteBlocks.length - 1].id); + } + } + + private _setEndSelectToBlock(blockId: string) { + setTimeout(() => { + this._editor.selectionManager.activeNodeByNodeId(blockId, 'end'); + }, 100); + } + + private async _createBlocks(blocks: ClipBlockInfo[], parentId?: string) { + return Promise.all( + blocks.map(async clipBlockInfo => { + const block = await this._editor.createBlock( + clipBlockInfo.type + ); + block?.setProperties(clipBlockInfo.properties); + await this._createBlocks(clipBlockInfo.children, block?.id); + return block; + }) + ); + } + + private async _pasteHtml(clipData: any, originTextClipData: any) { + if (SUPPORT_MARKDOWN_PASTE) { + const hasMarkdown = + this._markdownParse.checkIfTextContainsMd(originTextClipData); + if (hasMarkdown) { + try { + const convertedDataObj = + this._markdownParse.md2Html(originTextClipData); + if (convertedDataObj.isConverted) { + clipData = convertedDataObj.text; + } + } catch (e) { + console.error(e); + clipData = originTextClipData; + } + } + } + + const blocks = this._clipboardParse.html2blocks(clipData); + + await this._insertBlocks(blocks); + } + + private async _pasteText(clipData: any, originTextClipData: any) { + const blocks = this._clipboardParse.text2blocks(clipData); + await this._insertBlocks(blocks); + } + + private static _getImageFile(clipboardData: any) { + const files = clipboardData.files; + if (files && files[0] && files[0].type.indexOf('image') > -1) { + return files[0]; + } + return; + } + + private static _excapeHtml(data: any, onlySpace?: any) { + if (!onlySpace) { + // TODO: + // data = string.htmlEscape(data); + // data = data.replace(/\n/g, '
'); + } + + // data = data.replace(/ /g, ' '); + // data = data.replace(/\t/g, '    '); + return data; + } +} diff --git a/libs/components/editor-core/src/editor/clipboard/utils.ts b/libs/components/editor-core/src/editor/clipboard/utils.ts new file mode 100644 index 0000000000..cb5d10241e --- /dev/null +++ b/libs/components/editor-core/src/editor/clipboard/utils.ts @@ -0,0 +1,14 @@ +import { Editor } from '../editor'; + +export const shouldHandlerContinue = (event: Event, editor: Editor) => { + const filterNodes = ['INPUT', 'SELECT', 'TEXTAREA']; + + if (event.defaultPrevented) { + return false; + } + if (filterNodes.includes((event.target as HTMLElement)?.tagName)) { + return false; + } + + return editor.selectionManager.currentSelectInfo.type !== 'None'; +}; diff --git a/libs/components/editor-core/src/editor/commands/block-commands.ts b/libs/components/editor-core/src/editor/commands/block-commands.ts index 5972e9d41d..f156bd627a 100644 --- a/libs/components/editor-core/src/editor/commands/block-commands.ts +++ b/libs/components/editor-core/src/editor/commands/block-commands.ts @@ -32,11 +32,11 @@ export class BlockCommands { ) { const block = await this._editor.getBlockById(blockId); if (block) { - const next_block = await this._editor.createBlock(type); - if (next_block) { - await block.after(next_block); - this._editor.selectionManager.activeNodeByNodeId(next_block.id); - return next_block; + const nextBlock = await this._editor.createBlock(type); + if (nextBlock) { + await block.after(nextBlock); + this._editor.selectionManager.activeNodeByNodeId(nextBlock.id); + return nextBlock; } } return undefined; diff --git a/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts b/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts index be64c07b97..9da0ed55ee 100644 --- a/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts +++ b/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts @@ -101,73 +101,70 @@ export class DragDropManager { if (this._blockDragDirection !== BlockDropPlacement.none) { const blockId = event.dataTransfer.getData(this._blockIdKey); if (!(await this._canBeDrop(event))) return; - if (this._blockDragDirection === BlockDropPlacement.bottom) { - this._editor.commands.blockCommands.moveBlockAfter( - blockId, - this._blockDragTargetId - ); - } - if ( - [BlockDropPlacement.left, BlockDropPlacement.right].includes( - this._blockDragDirection - ) - ) { - const dropType = - this._blockDragDirection === BlockDropPlacement.left - ? GridDropType.left - : GridDropType.right; - // if target is a grid item create grid item - if (targetBlock.type !== Protocol.Block.Type.gridItem) { - await this._editor.commands.blockCommands.createLayoutBlock( + switch (this._blockDragDirection) { + case BlockDropPlacement.bottom: { + this._editor.commands.blockCommands.moveBlockAfter( blockId, - this._blockDragTargetId, - dropType - ); - } else { - await this._editor.commands.blockCommands.moveInNewGridItem( - blockId, - this._blockDragTargetId, - dropType + this._blockDragTargetId ); + break; } - } - if ( - [ - BlockDropPlacement.outerLeft, - BlockDropPlacement.outerRight, - ].includes(this._blockDragDirection) - ) { - if (targetBlock.type !== Protocol.Block.Type.grid) { - await this._editor.commands.blockCommands.createLayoutBlock( - blockId, - this._blockDragTargetId, - this._blockDragDirection === - BlockDropPlacement.outerLeft + case BlockDropPlacement.left: + case BlockDropPlacement.right: { + const dropType = + this._blockDragDirection === BlockDropPlacement.left ? GridDropType.left - : GridDropType.right - ); - } - if (targetBlock.type === Protocol.Block.Type.grid) { - const gridItems = await targetBlock.children(); - if ( - BlockDropPlacement.outerRight === - this._blockDragDirection - ) { + : GridDropType.right; + // if target is a grid item create grid item + if (targetBlock.type !== Protocol.Block.Type.gridItem) { + await this._editor.commands.blockCommands.createLayoutBlock( + blockId, + this._blockDragTargetId, + dropType + ); + } else { await this._editor.commands.blockCommands.moveInNewGridItem( blockId, - gridItems[gridItems.length - 1].id + this._blockDragTargetId, + dropType ); } - if ( - BlockDropPlacement.outerLeft === - this._blockDragDirection - ) { - await this._editor.commands.blockCommands.moveInNewGridItem( + break; + } + case BlockDropPlacement.outerLeft: + case BlockDropPlacement.outerRight: { + if (targetBlock.type !== Protocol.Block.Type.grid) { + await this._editor.commands.blockCommands.createLayoutBlock( blockId, - gridItems[0].id, - GridDropType.right + this._blockDragTargetId, + this._blockDragDirection === + BlockDropPlacement.outerLeft + ? GridDropType.left + : GridDropType.right ); } + if (targetBlock.type === Protocol.Block.Type.grid) { + const gridItems = await targetBlock.children(); + if ( + BlockDropPlacement.outerRight === + this._blockDragDirection + ) { + await this._editor.commands.blockCommands.moveInNewGridItem( + blockId, + gridItems[gridItems.length - 1].id + ); + } + if ( + BlockDropPlacement.outerLeft === + this._blockDragDirection + ) { + await this._editor.commands.blockCommands.moveInNewGridItem( + blockId, + gridItems[0].id, + GridDropType.right + ); + } + } } } } @@ -424,7 +421,6 @@ export class DragDropManager { } public handlerEditorDrop(event: React.DragEvent) { - event.preventDefault(); // IMP: can not use Decorators now may use decorators is right if (this.isEnabled()) { if (this.isDragBlock(event)) { diff --git a/libs/components/editor-core/src/editor/scroll/scroll.ts b/libs/components/editor-core/src/editor/scroll/scroll.ts index 971e2ca471..69b4d85703 100644 --- a/libs/components/editor-core/src/editor/scroll/scroll.ts +++ b/libs/components/editor-core/src/editor/scroll/scroll.ts @@ -207,6 +207,7 @@ export class ScrollManager { } private _getKeepInViewParams(blockRect: Rect) { + if (this.scrollContainer == null) return 0; const { top, bottom } = domToRect(this._scrollContainer); if (blockRect.top <= top + blockRect.height * 3) { return -1; diff --git a/libs/components/editor-core/src/editor/selection/selection.ts b/libs/components/editor-core/src/editor/selection/selection.ts index b66d1b5fd6..406f9adecb 100644 --- a/libs/components/editor-core/src/editor/selection/selection.ts +++ b/libs/components/editor-core/src/editor/selection/selection.ts @@ -30,6 +30,7 @@ import { } from './types'; import { isLikeBlockListIds } from './utils'; import { Protocol } from '@toeverything/datasource/db-service'; +import { Editor } from 'slate'; // IMP: maybe merge active and select into single function export type SelectionInfo = InstanceType< @@ -47,7 +48,7 @@ export class SelectionManager implements VirgoSelection { private _scrollDelay = 150; private _selectEndDelayTime = 500; private _hasEmitEndPending = false; - + private _scrollTimer: number | null = null; /** * * the selection info before current @@ -77,9 +78,6 @@ export class SelectionManager implements VirgoSelection { type: 'None', info: null, }; - // IMP: to delete - // @ts-ignore - window['selectionManager'] = this; this._initWindowSelectionChangeListen(); } @@ -683,6 +681,9 @@ export class SelectionManager implements VirgoSelection { */ public async activeNodeByNodeId(nodeId: string, position?: CursorTypes) { try { + if (this._scrollTimer) { + clearTimeout(this._scrollTimer); + } const node = await this._editor.getBlockById(nodeId); if (node) { this._activatedNodeId = nodeId; @@ -691,8 +692,8 @@ export class SelectionManager implements VirgoSelection { } this.emit(nodeId, SelectEventTypes.active, this.lastPoint); // TODO: Optimize the related logic after implementing the scroll bar - setTimeout(() => { - // this._editor.scrollManager.keepBlockInView(node); + this._scrollTimer = window.setTimeout(() => { + this._editor.scrollManager.keepBlockInView(node); }, this._scrollDelay); } else { console.warn('Can not find node by this id'); @@ -1050,4 +1051,25 @@ export class SelectionManager implements VirgoSelection { this._windowSelectionChangeHandler ); } + /** + * + * move active selection to the new position + * @param {number} index + * @param {string} blockId + * @memberof SelectionManager + */ + public async moveCursor( + nowRange: any, + index: number, + blockId: string + ): Promise { + let preRang = document.createRange(); + preRang.setStart(nowRange.startContainer, index); + preRang.setEnd(nowRange.endContainer, index); + let prePosition = preRang.getClientRects().item(0); + this.activeNodeByNodeId( + blockId, + new Point(prePosition.left, prePosition.bottom) + ); + } } diff --git a/libs/components/editor-core/src/hooks.ts b/libs/components/editor-core/src/hooks.ts index f0af8a0f87..895fe7857b 100644 --- a/libs/components/editor-core/src/hooks.ts +++ b/libs/components/editor-core/src/hooks.ts @@ -1,4 +1,4 @@ -import { noop, Point } from '@toeverything/utils'; +import { Point } from '@toeverything/utils'; import { useCallback, useEffect, useRef, useState } from 'react'; import { useEditor } from './Contexts'; import { @@ -62,7 +62,7 @@ export const useBlock = (blockId: string) => { return undefined; } let valid = true; - let offUpdate = noop; + let offUpdate: () => void | undefined = undefined; editor.getBlockById(blockId).then(node => { if (!valid) { return; @@ -79,7 +79,7 @@ export const useBlock = (blockId: string) => { return () => { valid = false; - offUpdate(); + offUpdate?.(); }; }, [blockId, editor, requestReRender]); diff --git a/libs/components/editor-core/src/render-block/RenderBlock.tsx b/libs/components/editor-core/src/render-block/RenderBlock.tsx index 649150c52f..a7ebc1e2e1 100644 --- a/libs/components/editor-core/src/render-block/RenderBlock.tsx +++ b/libs/components/editor-core/src/render-block/RenderBlock.tsx @@ -1,7 +1,6 @@ import { styled } from '@toeverything/components/ui'; -import { useLayoutEffect, useMemo, useRef } from 'react'; +import { useCallback, useMemo } from 'react'; -// import { RenderChildren } from './RenderChildren'; import { useEditor } from '../Contexts'; import { useBlock } from '../hooks'; @@ -10,19 +9,21 @@ interface RenderBlockProps { hasContainer?: boolean; } -export const RenderBlock = ({ +export function RenderBlock({ blockId, hasContainer = true, -}: RenderBlockProps) => { +}: RenderBlockProps) { const { editor, editorElement } = useEditor(); const { block } = useBlock(blockId); - const blockRef = useRef(null); - useLayoutEffect(() => { - if (block && blockRef.current) { - block.dom = blockRef.current; - } - }); + const setRef = useCallback( + (dom: HTMLElement) => { + if (block != null && dom != null) { + block.dom = dom; + } + }, + [block] + ); const blockView = useMemo(() => { if (block?.type) { @@ -54,17 +55,13 @@ export const RenderBlock = ({ ) : null; return hasContainer ? ( - + {view} ) : ( <> {view} ); -}; +} const BlockContainer = styled('div')(({ theme }) => ({ fontSize: theme.typography.body1.fontSize, diff --git a/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx b/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx index 73ab1fde1c..c6e5d6a9d4 100644 --- a/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx +++ b/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx @@ -54,4 +54,5 @@ const StyledButton = styled('div')({ backgroundColor: 'transparent', width: '100%', height: '100%', + color: '#B9CAD5', }); diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx index 325864b8d9..71e11e4679 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx @@ -264,6 +264,7 @@ const Draggable = styled(Button)({ backgroundColor: 'transparent', width: '16px', height: '22px', + color: '#B9CAD5', '& svg': { fontSize: '20px', marginLeft: '-2px', diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx index 4eda43b55c..3b432167ee 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx @@ -93,7 +93,7 @@ export class LeftMenuPlugin extends BasePlugin { } }; - private _onDrop = () => { + private _onDrop = (e: React.DragEvent) => { this._lineInfo.next(undefined); }; private _handleDragOverBlockNode = async ( diff --git a/libs/components/layout/src/header/FileSystem.tsx b/libs/components/layout/src/header/FileSystem.tsx new file mode 100644 index 0000000000..83c638c5b3 --- /dev/null +++ b/libs/components/layout/src/header/FileSystem.tsx @@ -0,0 +1,115 @@ +/* eslint-disable filename-rules/match */ +import { useCallback, useMemo, useState } from 'react'; + +import { IconButton, MuiSnackbar, styled } from '@toeverything/components/ui'; +import { services } from '@toeverything/datasource/db-service'; +import { useLocalTrigger } from '@toeverything/datasource/state'; +import { CloseIcon } from '@toeverything/components/common'; + +const cleanupWorkspace = (workspace: string) => + new Promise((resolve, reject) => { + const req = indexedDB.deleteDatabase(workspace); + req.addEventListener('error', e => reject(e)); + req.addEventListener('blocked', e => reject(e)); + req.addEventListener('upgradeneeded', e => reject(e)); + req.addEventListener('success', e => resolve(e)); + }); + +const requestPermission = async (workspace: string) => { + await cleanupWorkspace(workspace); + // @ts-ignore + const dirHandler = await window.showDirectoryPicker({ + id: 'AFFiNE_' + workspace, + mode: 'readwrite', + startIn: 'documents', + }); + + const fileHandle = await dirHandler.getFileHandle('affine.db', { + create: true, + }); + const file = await fileHandle.getFile(); + const initialData = new Uint8Array(await file.arrayBuffer()); + + const exporter = async (contents: Uint8Array) => { + try { + const writable = await fileHandle.createWritable(); + await writable.write(contents); + await writable.close(); + } catch (e) { + console.log(e); + } + }; + + await services.api.editorBlock.setupDataExporter( + workspace, + new Uint8Array(initialData), + exporter + ); +}; + +const StyledFileSystem = styled('div')<{ disabled?: boolean }>({ + padding: '10px 12px', + fontWeight: 600, + fontSize: '14px', + color: '#3E6FDB', + textTransform: 'uppercase', + cursor: 'pointer', + '&:hover': { + background: '#F5F7F8', + borderRadius: '5px', + }, +}); + +export const fsApiSupported = () => { + try { + return 'showOpenFilePicker' in window; + } catch (e) { + return false; + } +}; + +export const FileSystem = () => { + const [selected, onSelected] = useLocalTrigger(); + const [error, setError] = useState(false); + + const onError = useCallback(() => { + setError(true); + setTimeout(() => setError(false), 3000); + }, []); + + const apiSupported = useMemo(() => fsApiSupported(), []); + + if (apiSupported && !selected) { + return ( + <> + setError(false)} + > + + + } + /> + { + try { + await requestPermission('AFFiNE'); + onSelected(); + } catch (e) { + onError(); + } + }} + > + Sync to Disk + + + ); + } + return null; +}; diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index 604b6caa6d..5118233907 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -1,19 +1,36 @@ -import { IconButton, styled, MuiButton } from '@toeverything/components/ui'; +import { useMemo } from 'react'; + +import { IconButton, styled } from '@toeverything/components/ui'; import { LogoIcon, SideBarViewIcon, SearchIcon, SideBarViewCloseIcon, } from '@toeverything/components/icons'; -import { useShowSettingsSidebar } from '@toeverything/datasource/state'; +import { + useShowSettingsSidebar, + useLocalTrigger, +} from '@toeverything/datasource/state'; -import { CurrentPageTitle } from './Title'; import { EditorBoardSwitcher } from './EditorBoardSwitcher'; +import { fsApiSupported, FileSystem } from './FileSystem'; +import { CurrentPageTitle } from './Title'; export const LayoutHeader = () => { + const [isLocalWorkspace] = useLocalTrigger(); const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } = useShowSettingsSidebar(); + const warningTips = useMemo(() => { + if (!fsApiSupported()) { + return 'Your browser does not support the local storage feature, please upgrade to the latest version of Chrome or Edge browser'; + } else if (!isLocalWorkspace) { + return 'You are in DEMO mode. Changes will NOT be saved unless you SYNC TO DISK'; + } else { + return 'AFFiNE is under active development and the current version is UNSTABLE. Please DO NOT store information or data'; + } + }, [isLocalWorkspace]); + return ( @@ -25,6 +42,7 @@ export const LayoutHeader = () => { + Share
{ - - AFFiNE now under active development, the version is - UNSTABLE, please DO NOT store important data in this version - + {warningTips} ); diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx index 40991b930c..6db19e3e86 100755 --- a/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx +++ b/libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx @@ -36,19 +36,13 @@ export type DndTreeProps = { indentationWidth?: number; collapsible?: boolean; removable?: boolean; - showDragIndicator?: boolean; }; /** * Currently does not support drag and drop using the keyboard. */ export function DndTree(props: DndTreeProps) { - const { - indentationWidth = 20, - collapsible, - removable, - showDragIndicator, - } = props; + const { indentationWidth = 20, collapsible, removable } = props; const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8 } }) @@ -111,7 +105,6 @@ export function DndTree(props: DndTreeProps) { : depth } indentationWidth={indentationWidth} - indicator={showDragIndicator} childCount={children.length} onCollapse={ collapsible && children.length @@ -129,7 +122,8 @@ export function DndTree(props: DndTreeProps) { )} {activeId && activeItem ? ( ble-node; the ref of the inner dom is often used as draggable-node */ - wrapperRef?(node: HTMLLIElement): void; -} & HTMLAttributes; +} & HTMLAttributes; export const TreeItem = forwardRef( ( @@ -52,13 +48,10 @@ export const TreeItem = forwardRef( ghost, handleProps, indentationWidth, - indicator, collapsed, onCollapse, onRemove, - style, value, - wrapperRef, pageId, ...props }, @@ -71,8 +64,8 @@ export const TreeItem = forwardRef( ); return ( - ( active={pageId === page_id} {...props} > - - - {childCount !== 0 ? ( - collapsed ? ( - - ) : ( - - ) - ) : ( - - )} - + {childCount !== 0 ? ( + collapsed ? ( + + + + ) : ( + + + + ) + ) : ( + + )} - - - {value} - - {BooleanPageTreeItemMoreActions && ( - - )} + + + {value} + + {BooleanPageTreeItemMoreActions && ( + + )} - {/*{!clone && onRemove && }*/} - {clone && childCount && childCount > 1 ? ( - {childCount} - ) : null} - - - + {/*{!clone && onRemove && }*/} + {clone && childCount && childCount > 1 ? ( + {childCount} + ) : null} + + ); } ); diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts index 0040e5bef7..442715229c 100644 --- a/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts +++ b/libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts @@ -1,22 +1,18 @@ import { styled } from '@toeverything/components/ui'; import { Link } from 'react-router-dom'; -export const TreeItemContainer = styled('div')` - box-sizing: border-box; - display: flex; - align-items: center; - color: #4c6275; -`; - -export const Wrapper = styled('li')<{ +export const TreeItemContainer = styled('div')<{ spacing: string; clone?: boolean; ghost?: boolean; - indicator?: boolean; disableSelection?: boolean; disableInteraction?: boolean; active?: boolean; }>` + display: flex; + align-items: center; + color: #4c6275; + box-sizing: border-box; padding-left: ${({ spacing }) => spacing}; list-style: none; @@ -26,21 +22,13 @@ export const Wrapper = styled('li')<{ ${({ clone, disableSelection }) => (clone || disableSelection) && - `width: 100%; - .Text, - .Count { - user-select: none; - -webkit-user-select: none; - }`} - - ${({ indicator }) => - indicator && - `width: 100%; - .Text, - .Count { - user-select: none; - -webkit-user-select: none; - }`} + ` + width: 100%; + user-select: none; + opacity: 0.7; + background: transparent; + cursor: grab; + `} ${({ disableInteraction }) => disableInteraction && `pointer-events: none;`} @@ -48,64 +36,6 @@ export const Wrapper = styled('li')<{ background: #f5f7f8; border-radius: 5px; } - - &.clone { - display: inline-block; - padding: 0; - margin-left: 10px; - margin-top: 5px; - pointer-events: none; - - ${TreeItemContainer} { - padding-right: 20px; - border-radius: 4px; - box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1); - } - } - - &.ghost { - &.indicator { - opacity: 1; - position: relative; - z-index: 1; - margin-bottom: -1px; - - ${TreeItemContainer} { - position: relative; - padding: 0; - height: 8px; - border-color: #2389ff; - background-color: #56a1f8; - - &:before { - position: absolute; - left: -8px; - top: -4px; - display: block; - content: ''; - width: 12px; - height: 12px; - border-radius: 50%; - border: 1px solid #2389ff; - } - - > * { - /* Items are hidden using height and opacity to retain focus */ - opacity: 0; - height: 0; - } - } - } - - &:not(.indicator) { - opacity: 0.5; - } - - ${TreeItemContainer} > * { - box-shadow: none; - background-color: transparent; - } - } `; export const Counter = styled('span')` @@ -138,7 +68,7 @@ export const ActionButton = styled('button')<{ border: none; outline: none; appearance: none; - background-color: transparent; + background: transparent; -webkit-tap-highlight-color: transparent; svg { @@ -151,8 +81,7 @@ export const ActionButton = styled('button')<{ } &:active { - background-color: ${({ background }) => - background ?? 'rgba(0, 0, 0, 0.05)'}; + background: ${({ background }) => background ?? 'rgba(0, 0, 0, 0.05)'}; svg { fill: ${({ fill }) => fill ?? '#788491'}; @@ -170,9 +99,7 @@ export const TreeItemMoreActions = styled('div')` visibility: hidden; `; -export const TextLink = styled(Link, { - shouldForwardProp: (prop: string) => !['active'].includes(prop), -})<{ active?: boolean }>` +export const TextLink = styled(Link)` display: flex; align-items: center; flex-grow: 1; diff --git a/libs/components/ui/src/popover/Popover.tsx b/libs/components/ui/src/popover/Popover.tsx index d03a65f322..c165b45197 100644 --- a/libs/components/ui/src/popover/Popover.tsx +++ b/libs/components/ui/src/popover/Popover.tsx @@ -1,6 +1,6 @@ import type { MuiPopperPlacementType as PopperPlacementType } from '../mui'; -import React, { forwardRef, type PropsWithChildren } from 'react'; -import { type PopperHandler, Popper } from '../popper'; +import React, { type PropsWithChildren } from 'react'; +import { Popper } from '../popper'; import { PopoverContainer } from './Container'; import type { PopoverProps, PopoverDirection } from './interface'; @@ -25,15 +25,11 @@ export const placementToContainerDirection: Record< 'auto-end': 'none', }; -export const Popover = forwardRef< - PopperHandler, - PropsWithChildren ->((props, ref) => { +export const Popover = (props: PropsWithChildren) => { const { popoverDirection, placement, content, children, style } = props; return ( ); -}); +}; diff --git a/libs/components/ui/src/popper/Popper.tsx b/libs/components/ui/src/popper/Popper.tsx index f74cf89980..4cf9f6a78b 100644 --- a/libs/components/ui/src/popper/Popper.tsx +++ b/libs/components/ui/src/popper/Popper.tsx @@ -1,184 +1,180 @@ import React, { - forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react'; -import { - MuiPopper, - MuiClickAwayListener as ClickAwayListener, - MuiGrow as Grow, -} from '../mui'; +/* eslint-disable no-restricted-imports */ +import PopperUnstyled from '@mui/base/PopperUnstyled'; +/* eslint-disable no-restricted-imports */ +import ClickAwayListener from '@mui/base/ClickAwayListener'; +/* eslint-disable no-restricted-imports */ +import Grow from '@mui/material/Grow'; + import { styled } from '../styled'; -import { PopperProps, PopperHandler, VirtualElement } from './interface'; -import { useTheme } from '../theme'; +import { PopperProps, VirtualElement } from './interface'; import { PopperArrow } from './PopoverArrow'; -export const Popper = forwardRef( - ( - { - children, - content, - anchor: propsAnchor, - placement = 'top-start', - defaultVisible = false, - container, - keepMounted = false, - visible: propsVisible, - trigger = 'hover', - pointerEnterDelay = 100, - pointerLeaveDelay = 100, - onVisibleChange, - popoverStyle, - popoverClassName, - anchorStyle, - anchorClassName, - zIndex, - offset = [0, 5], - showArrow = false, - }, - ref - ) => { - const [anchorEl, setAnchorEl] = useState(null); - const [visible, setVisible] = useState(defaultVisible); - const [arrowRef, setArrowRef] = useState(null); +export const Popper = ({ + children, + content, + anchorEl: propsAnchorEl, + placement = 'top-start', + defaultVisible = false, + visible: propsVisible, + trigger = 'hover', + pointerEnterDelay = 100, + pointerLeaveDelay = 100, + onVisibleChange, + popoverStyle, + popoverClassName, + anchorStyle, + anchorClassName, + zIndex, + offset = [0, 5], + showArrow = false, + popperHandlerRef, + ...popperProps +}: PopperProps) => { + const [anchorEl, setAnchorEl] = useState(null); + const [visible, setVisible] = useState(defaultVisible); + const [arrowRef, setArrowRef] = useState(null); + const popperRef = useRef(); + const pointerLeaveTimer = useRef(); + const pointerEnterTimer = useRef(); - const pointerLeaveTimer = useRef(); - const pointerEnterTimer = useRef(); - - const visibleControlledByParent = typeof propsVisible !== 'undefined'; - const isAnchorCustom = typeof propsAnchor !== 'undefined'; - - const hasHoverTrigger = useMemo(() => { - return ( - trigger === 'hover' || - (Array.isArray(trigger) && trigger.includes('hover')) - ); - }, [trigger]); - - const hasClickTrigger = useMemo(() => { - return ( - trigger === 'click' || - (Array.isArray(trigger) && trigger.includes('click')) - ); - }, [trigger]); - - const theme = useTheme(); - - const onPointerEnterHandler = () => { - if (!hasHoverTrigger || visibleControlledByParent) { - return; - } - window.clearTimeout(pointerLeaveTimer.current); - - pointerEnterTimer.current = window.setTimeout(() => { - setVisible(true); - }, pointerEnterDelay); - }; - - const onPointerLeaveHandler = () => { - if (!hasHoverTrigger || visibleControlledByParent) { - return; - } - window.clearTimeout(pointerEnterTimer.current); - pointerLeaveTimer.current = window.setTimeout(() => { - setVisible(false); - }, pointerLeaveDelay); - }; - - useEffect(() => { - onVisibleChange?.(visible); - }, [visible, onVisibleChange]); - - useImperativeHandle(ref, () => { - return { - setVisible: (visible: boolean) => { - !visibleControlledByParent && setVisible(visible); - }, - }; - }); + const visibleControlledByParent = typeof propsVisible !== 'undefined'; + const isAnchorCustom = typeof propsAnchorEl !== 'undefined'; + const hasHoverTrigger = useMemo(() => { return ( - { - setVisible(false); - }} - > - - {isAnchorCustom ? null : ( -
setAnchorEl(dom)} - onClick={() => { - if ( - !hasClickTrigger || - visibleControlledByParent - ) { - return; - } - setVisible(!visible); - }} - onPointerEnter={onPointerEnterHandler} - onPointerLeave={onPointerLeaveHandler} - style={anchorStyle} - className={anchorClassName} - > - {children} -
- )} - - {({ TransitionProps }) => ( - -
- {showArrow && ( - - )} - {content} -
- - )} - - - + trigger === 'hover' || + (Array.isArray(trigger) && trigger.includes('hover')) ); - } -); + }, [trigger]); + + const hasClickTrigger = useMemo(() => { + return ( + trigger === 'click' || + (Array.isArray(trigger) && trigger.includes('click')) + ); + }, [trigger]); + + const onPointerEnterHandler = () => { + if (!hasHoverTrigger || visibleControlledByParent) { + return; + } + window.clearTimeout(pointerLeaveTimer.current); + + pointerEnterTimer.current = window.setTimeout(() => { + setVisible(true); + }, pointerEnterDelay); + }; + + const onPointerLeaveHandler = () => { + if (!hasHoverTrigger || visibleControlledByParent) { + return; + } + window.clearTimeout(pointerEnterTimer.current); + pointerLeaveTimer.current = window.setTimeout(() => { + setVisible(false); + }, pointerLeaveDelay); + }; + + useEffect(() => { + onVisibleChange?.(visible); + }, [visible, onVisibleChange]); + + useImperativeHandle(popperHandlerRef, () => { + return { + setVisible: (visible: boolean) => { + !visibleControlledByParent && setVisible(visible); + }, + }; + }); + + return ( + { + setVisible(false); + }} + > + + {isAnchorCustom ? null : ( +
setAnchorEl(dom)} + onClick={() => { + if (!hasClickTrigger || visibleControlledByParent) { + return; + } + setVisible(!visible); + }} + onPointerEnter={onPointerEnterHandler} + onPointerLeave={onPointerLeaveHandler} + style={anchorStyle} + className={anchorClassName} + > + {children} +
+ )} + + {({ TransitionProps }) => ( + +
+ {showArrow && ( + + )} + {content} +
+ + )} + + + + ); +}; // The children of ClickAwayListener must be a DOM Node to judge whether the click is outside, use node.contains const Container = styled('div')({ display: 'contents', }); + +const BasicStyledPopper = styled(PopperUnstyled)<{ + zIndex?: number; +}>(({ zIndex, theme }) => { + return { + zIndex: zIndex || theme.affine.zIndex.popover, + }; +}); diff --git a/libs/components/ui/src/popper/interface.ts b/libs/components/ui/src/popper/interface.ts index 9f52cf551f..d60fac29f7 100644 --- a/libs/components/ui/src/popper/interface.ts +++ b/libs/components/ui/src/popper/interface.ts @@ -1,6 +1,9 @@ -import type { CSSProperties, ReactNode } from 'react'; -import type { MuiPopperPlacementType as PopperPlacementType } from '../mui'; - +import type { CSSProperties, ReactNode, Ref } from 'react'; +/* eslint-disable no-restricted-imports */ +import { + type PopperUnstyledProps, + type PopperPlacementType, +} from '@mui/base/PopperUnstyled'; export type VirtualElement = { getBoundingClientRect: () => ClientRect | DOMRect; contextElement?: Element; @@ -21,26 +24,12 @@ export type PopperProps = { // Popover trigger children?: ReactNode; - // Position of Popover - placement?: PopperPlacementType; - - // The popover will pop up based on the anchor position - // And if this parameter is passed, children will not be rendered - anchor?: VirtualElement | (() => VirtualElement); - // Whether the default is implicit defaultVisible?: boolean; // Used to manually control the visibility of the Popover visible?: boolean; - // A HTML element or function that returns one. The container will have the portal children appended to it. - // By default, it uses the body of the top-level document object, so it's simply document.body most of the time. - container?: HTMLElement; - - // Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper - keepMounted?: boolean; - // TODO: support focus trigger?: 'hover' | 'click' | 'focus' | ('click' | 'hover' | 'focus')[]; @@ -71,4 +60,6 @@ export type PopperProps = { offset?: [number, number]; showArrow?: boolean; -}; + + popperHandlerRef?: Ref; +} & Omit; diff --git a/libs/components/ui/src/tooltip/Tooltip.tsx b/libs/components/ui/src/tooltip/Tooltip.tsx index 2c896e5c0d..ff0b47262c 100644 --- a/libs/components/ui/src/tooltip/Tooltip.tsx +++ b/libs/components/ui/src/tooltip/Tooltip.tsx @@ -1,5 +1,5 @@ -import { forwardRef, type PropsWithChildren, type CSSProperties } from 'react'; -import { type PopperHandler, type PopperProps, Popper } from '../popper'; +import { type PropsWithChildren, type CSSProperties } from 'react'; +import { type PopperProps, Popper } from '../popper'; import { PopoverContainer, placementToContainerDirection } from '../popover'; import type { TooltipProps } from './interface'; import { useTheme } from '../theme'; @@ -14,17 +14,15 @@ const useTooltipStyle = (): CSSProperties => { }; }; -export const Tooltip = forwardRef< - PopperHandler, - PropsWithChildren ->((props, ref) => { +export const Tooltip = ( + props: PropsWithChildren +) => { const { content, placement = 'top-start' } = props; const style = useTooltipStyle(); // If there is no content, hide forever const visibleProp = content ? {} : { visible: false }; return ( ); -}); +}; diff --git a/libs/datasource/db-service/src/services/database/index.ts b/libs/datasource/db-service/src/services/database/index.ts index 9f97b9a35f..f7b9eb0261 100644 --- a/libs/datasource/db-service/src/services/database/index.ts +++ b/libs/datasource/db-service/src/services/database/index.ts @@ -37,6 +37,11 @@ async function _getCurrentToken() { return undefined; } +const _enabled = { + demo: [], + AFFiNE: ['sqlite'], +} as any; + async function _getBlockDatabase( workspace: string, options?: BlockInitOptions @@ -45,16 +50,10 @@ async function _getBlockDatabase( await waitLoading(workspace); } - // if ( - // options?.userId && - // workspaces[workspace]?.getUserId() !== options?.userId - // ) { - // delete workspaces[workspace]; - // } - if (!workspaces[workspace]) { loading.add(workspace); workspaces[workspace] = await BlockClient.init(workspace, { + enabled: _enabled[workspace] || ['idb'], ...options, token: await _getCurrentToken(), }); diff --git a/libs/datasource/db-service/src/services/editor-block/templates/get-started-group0.json b/libs/datasource/db-service/src/services/editor-block/templates/get-started-group0.json new file mode 100644 index 0000000000..1b58d6c2b3 --- /dev/null +++ b/libs/datasource/db-service/src/services/editor-block/templates/get-started-group0.json @@ -0,0 +1,197 @@ +{ + "type": "group", + "properties": { + "metaProps": [ + { + "id": "JaBsu39eY_tAWjJM", + "type": "information", + "name": "Information#XvIJ", + "emailOptions": [ + { + "id": "flJIydQpaSqr9Mvc", + "name": "Email", + "color": "#8f4400", + "background": "#ffcca7", + "iconName": "email" + } + ], + "phoneOptions": [ + { + "id": "DODf7wtotk-n_-sH", + "name": "Phone", + "color": "#263486", + "background": "#c3dbff", + "iconName": "phone" + } + ], + "locationOptions": [ + { + "id": "aYqpJse4RX2n2tuq", + "name": "Location", + "color": "#263486", + "background": "#c5f1f3", + "iconName": "location" + } + ] + }, + { + "id": "tgbUMhgz0yWEPfKj", + "name": "Select#kWWx", + "type": "select", + "options": [ + { + "id": "fIsk1MI2bCq5mtyE", + "name": "Single Select", + "color": "#896406", + "background": "#FFF5AB", + "iconName": "singleSelect" + } + ] + }, + { + "id": "xZld2XD__Cojniv5", + "name": "MultiSelect#tjdY", + "type": "multiSelect", + "options": [ + { + "id": "pXKGBw3_mPXxXIwV", + "name": "Multiple Select", + "color": "#511AAB", + "background": "#E3DEFF", + "iconName": "multiSelect" + } + ] + } + ] + }, + "blocks": [ + { + "type": "heading1", + "properties": { + "text": { + "value": [ + { + "text": "The Essentials. Check things off in Text view" + } + ] + }, + "textStyle": {} + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { + "text": "Click anywhere and just start typing. Hit `/` to see all the types of content you can add - images, videos, figma files, code blocks, and more." + } + ] + }, + "textStyle": {}, + "collapsed": { "value": false } + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { "text": "Do you see the " }, + { "text": "⋮", "inlinecode": true }, + { + "text": " when you hover over the left of this checkbox? Click and drag the " + }, + { "text": "⋮", "inlinecode": true }, + { + "text": " to move this block, and see more settings inside." + } + ] + }, + "textStyle": {}, + "collapsed": { "value": false } + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { "text": "Find the " }, + { "text": "⋮⋮", "inlinecode": true }, + { + "text": " button while hovering anywhere on this group. Click the " + }, + { + "text": "—— + Add New Group Here + ——", + "inlinecode": true + }, + { "text": " divider to add a new group." } + ] + }, + "textStyle": {}, + "collapsed": { "value": false } + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { "text": "Hover over the " }, + { "text": "——————", "inlinecode": true }, + { + "text": " button at the bottom of every block to evoke Tag App. Click on the " + }, + { "text": "+", "inlinecode": true }, + { + "text": " button following the tagged labels to see more options - status, date, collaborators, text, information, multiple/single select... and you can can expect more options soon!" + } + ] + }, + "textStyle": {}, + "collapsed": { "value": false }, + "recastValues": { + "JaBsu39eY_tAWjJM": { + "id": "JaBsu39eY_tAWjJM", + "type": "information", + "value": { + "email": ["flJIydQpaSqr9Mvc"], + "phone": ["DODf7wtotk-n_-sH"], + "location": ["aYqpJse4RX2n2tuq"] + } + }, + "tgbUMhgz0yWEPfKj": { + "id": "tgbUMhgz0yWEPfKj", + "type": "select", + "value": "fIsk1MI2bCq5mtyE" + }, + "xZld2XD__Cojniv5": { + "id": "xZld2XD__Cojniv5", + "type": "multiSelect", + "value": ["pXKGBw3_mPXxXIwV"] + } + } + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { + "text": "An incredible design! You can check your tasks in different views, switch between Text View and Kanban View on group menu. → try it out!" + } + ] + }, + "textStyle": {} + }, + "blocks": [] + } + ] +} diff --git a/libs/datasource/db-service/src/services/editor-block/templates/get-started-group1.json b/libs/datasource/db-service/src/services/editor-block/templates/get-started-group1.json new file mode 100644 index 0000000000..96c967a08e --- /dev/null +++ b/libs/datasource/db-service/src/services/editor-block/templates/get-started-group1.json @@ -0,0 +1,200 @@ +{ + "type": "group", + "properties": { + "recastCurrentViewId": "vwjI_O0J2CEsHyMW", + "metaProps": [ + { + "id": "bNjVwBq8YLxvmvr7", + "name": "Status#GVsG", + "type": "status", + "options": [ + { + "id": "wusZ8Qht8rsmFD1s", + "name": "No Started", + "color": "#05683D", + "background": "#C5FBE0", + "iconName": "status" + }, + { + "id": "qLJFK5bqYhW8NLtQ", + "name": "In Progress", + "color": "#896406", + "background": "#FFF5AB", + "iconName": "status" + }, + { + "id": "u0ZgY0sRCnqMkxzn", + "name": "Complete", + "color": "#AF1212", + "background": "#FFCECE", + "iconName": "status" + } + ] + }, + { + "id": "DfVMd-EXXO9-WZTO", + "type": "date", + "name": "Date#0neY", + "background": "#6880FF", + "color": "#fff", + "iconName": "date" + }, + { + "id": "UgQQiv9D-72nRyYy", + "type": "mention", + "name": "Mention#Recx", + "background": "#FFD568", + "color": "#FFFFFF", + "iconName": "collaborator" + }, + { + "id": "ICT1AlKCQkwYLjGs", + "type": "text", + "name": "Text#uObM", + "background": "#67dcaa", + "color": "#FFF", + "iconName": "text" + } + ], + "recastViews": [ + { + "id": "qJslh-HAKnf8gGV-", + "name": "Text", + "type": "page" + }, + { + "id": "vwjI_O0J2CEsHyMW", + "name": "Kanban", + "type": "kanban", + "groupBy": "bNjVwBq8YLxvmvr7" + } + ] + }, + "blocks": [ + { + "type": "text", + "properties": { + "text": { + "value": [ + { + "text": "You can customize a Kanban to fit your workflow. Such as by adding/removing columns or changing Tag App labels." + } + ] + }, + "textStyle": {} + }, + "blocks": [] + }, + { + "type": "text", + "properties": { + "text": { + "value": [{ "text": "Add a Due Date to set a reminder" }] + }, + "recastValues": { + "bNjVwBq8YLxvmvr7": { + "id": "bNjVwBq8YLxvmvr7", + "type": "status", + "value": "wusZ8Qht8rsmFD1s" + }, + "DfVMd-EXXO9-WZTO": { + "id": "DfVMd-EXXO9-WZTO", + "type": "date", + "value": 1660233600000 + } + }, + "textStyle": {} + }, + "blocks": [] + }, + { + "type": "text", + "properties": { + "text": { + "value": [{ "text": "Type ＠ to mention people" }] + }, + "recastValues": { + "bNjVwBq8YLxvmvr7": { + "id": "bNjVwBq8YLxvmvr7", + "type": "status", + "value": "wusZ8Qht8rsmFD1s" + }, + "UgQQiv9D-72nRyYy": { + "id": "UgQQiv9D-72nRyYy", + "type": "mention", + "value": "AFFiNE" + } + }, + "textStyle": {} + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { + "value": [ + { + "text": "Check the box to complete the task!" + } + ] + }, + "recastValues": { + "bNjVwBq8YLxvmvr7": { + "id": "bNjVwBq8YLxvmvr7", + "type": "status", + "value": "qLJFK5bqYhW8NLtQ" + } + }, + "textStyle": {}, + "collapsed": { "value": false } + }, + "blocks": [ + { + "type": "todo", + "properties": { + "text": { "value": [{ "text": "Check 01" }] }, + "textStyle": {}, + "collapsed": { "value": false }, + "checked": { "value": true } + }, + "blocks": [] + }, + { + "type": "todo", + "properties": { + "text": { "value": [{ "text": "Check 02" }] }, + "textStyle": {} + }, + "blocks": [] + } + ] + }, + { + "type": "text", + "properties": { + "text": { + "value": [ + { + "text": "The GroupBy button allows you to customise how you want your data grouped just utilize your preferred Tag App settings" + } + ] + }, + "recastValues": { + "bNjVwBq8YLxvmvr7": { + "id": "bNjVwBq8YLxvmvr7", + "type": "status", + "value": "u0ZgY0sRCnqMkxzn" + }, + "ICT1AlKCQkwYLjGs": { + "id": "ICT1AlKCQkwYLjGs", + "type": "text", + "value": "GroupBy others" + } + }, + "textStyle": {} + }, + "blocks": [] + } + ] +} diff --git a/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts b/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts index 88a8d08bbe..10af0eebb9 100644 --- a/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts +++ b/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts @@ -3,14 +3,24 @@ import blogTemplate from './blog.json'; import emptyTemplate from './empty.json'; import gridTemplate from './grid.json'; import todoTemplate from './todo.json'; +import getStartedGroup0 from './get-started-group0.json'; +import getStartedGroup1 from './get-started-group1.json'; -export type GroupTemplateKeys = 'todolist' | 'blog' | 'empty' | 'grid'; -type GroupTemplateMap = Record; +export type GroupTemplateKeys = + | 'todolist' + | 'blog' + | 'empty' + | 'grid' + | 'getStartedGroup0' + | 'getStartedGroup1'; +type GroupTemplateMap = Record; const groupTemplateMap = { empty: emptyTemplate, todolist: todoTemplate, blog: blogTemplate, grid: gridTemplate, + getStartedGroup0, + getStartedGroup1, } as GroupTemplateMap; const defaultTemplateList: Array = [ diff --git a/libs/datasource/jwt/src/adapter/yjs/index.ts b/libs/datasource/jwt/src/adapter/yjs/index.ts index a1497de609..77f1ac4902 100644 --- a/libs/datasource/jwt/src/adapter/yjs/index.ts +++ b/libs/datasource/jwt/src/adapter/yjs/index.ts @@ -18,8 +18,6 @@ import { snapshot, } from 'yjs'; -import { IndexedDBProvider } from '@toeverything/datasource/jwt-rpc'; - import { AsyncDatabaseAdapter, BlockListener, @@ -48,15 +46,17 @@ type ConnectivityListener = ( workspace: string, connectivity: Connectivity ) => void; + type YjsProviders = { awareness: Awareness; - idb: IndexedDBProvider; - binariesIdb: IndexedDBProvider; + binaries: Doc; + doc: Doc; gatekeeper: GateKeeper; connListener: { listeners?: ConnectivityListener }; userId: string; remoteToken?: string; // remote storage token }; + const _yjsDatabaseInstance = new Map(); const _asyncInitLoading = new Set(); @@ -90,13 +90,9 @@ async function _initYjsDatabase( const { userId, token } = options; const doc = new Doc({ autoLoad: true, shouldLoad: true }); - const idb = await new IndexedDBProvider(workspace, doc).whenSynced; + // const idb = await new IndexedDBProvider(workspace, doc).whenSynced; const binaries = new Doc({ autoLoad: true, shouldLoad: true }); - const binariesIdb = await new IndexedDBProvider( - `${workspace}_binaries`, - binaries - ).whenSynced; const awareness = new Awareness(doc); @@ -114,16 +110,24 @@ async function _initYjsDatabase( const emitState = (c: Connectivity) => connListener.listeners?.(workspace, c); await Promise.all( - Object.entries(options.provider).map(async ([, p]) => - p({ awareness, doc, token, workspace, emitState }) - ) + Object.entries(options.provider).flatMap(async ([, p]) => [ + p({ awareness, doc, token, workspace, emitState }), + p({ + awareness, + doc: binaries, + token, + workspace: `${workspace}_binaries`, + emitState, + }), + ]) ); } const newInstance = { awareness, - idb, - binariesIdb, + binaries, + doc, gatekeeper, + connListener, userId, remoteToken: token, @@ -183,7 +187,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter { private constructor(providers: YjsProviders) { this._provider = providers; - this._doc = providers.idb.doc; + this._doc = providers.doc; this._awareness = providers.awareness; this._gatekeeper = providers.gatekeeper; this._reload = () => { @@ -201,7 +205,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter { }); // @ts-ignore this._binaries = new YjsRemoteBinaries( - providers.binariesIdb.doc.getMap(), + providers.binaries.getMap(), providers.remoteToken ); // @ts-ignore @@ -336,7 +340,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter { }); const [file] = (await fromEvent(handles)) as File[]; const binary = await file.arrayBuffer(); - await this._provider.idb.clearData(); + // await this._provider.idb.clearData(); const doc = new Doc({ autoLoad: true, shouldLoad: true }); let updated = 0; let isUpdated = false; @@ -357,8 +361,8 @@ export class YjsAdapter implements AsyncDatabaseAdapter { }; check(); }); - await new IndexedDBProvider(this._provider.idb.name, doc) - .whenSynced; + // await new IndexedDBProvider(this._provider.idb.name, doc) + // .whenSynced; applyUpdate(doc, new Uint8Array(binary)); await update_check; console.log('load success'); diff --git a/libs/datasource/jwt/src/adapter/yjs/provider.ts b/libs/datasource/jwt/src/adapter/yjs/provider.ts index f7068288fd..e4cebd1f01 100644 --- a/libs/datasource/jwt/src/adapter/yjs/provider.ts +++ b/libs/datasource/jwt/src/adapter/yjs/provider.ts @@ -2,6 +2,7 @@ import { Doc } from 'yjs'; import { Awareness } from 'y-protocols/awareness.js'; import { + IndexedDBProvider, SQLiteProvider, WebsocketProvider, } from '@toeverything/datasource/jwt-rpc'; @@ -19,7 +20,10 @@ type YjsDefaultInstances = { export type YjsProvider = (instances: YjsDefaultInstances) => Promise; +type ProviderType = 'idb' | 'sqlite' | 'ws'; + export type YjsProviderOptions = { + enabled: ProviderType[]; backend: typeof BucketBackend[keyof typeof BucketBackend]; params?: Record; importData?: () => Promise | Uint8Array | undefined; @@ -30,53 +34,64 @@ export type YjsProviderOptions = { export const getYjsProviders = ( options: YjsProviderOptions ): Record => { + console.log('getYjsProviders', options); return { + indexeddb: async (instances: YjsDefaultInstances) => { + if (options.enabled.includes('idb')) { + await new IndexedDBProvider(instances.workspace, instances.doc) + .whenSynced; + } + }, sqlite: async (instances: YjsDefaultInstances) => { - const fsHandle = setInterval(async () => { - if (options.hasExporter?.()) { - clearInterval(fsHandle); - const fs = new SQLiteProvider( - instances.workspace, - instances.doc, - await options.importData?.() - ); - if (options.exportData) { - fs.registerExporter(options.exportData); + if (options.enabled.includes('sqlite')) { + const fsHandle = setInterval(async () => { + if (options.hasExporter?.()) { + clearInterval(fsHandle); + const fs = new SQLiteProvider( + instances.workspace, + instances.doc, + await options.importData?.() + ); + if (options.exportData) { + fs.registerExporter(options.exportData); + } + await fs.whenSynced; } - await fs.whenSynced; - } - }, 500); + }, 500); + } }, ws: async (instances: YjsDefaultInstances) => { - if (instances.token) { - const ws = new WebsocketProvider( - instances.token, - options.backend, - instances.workspace, - instances.doc, - { - awareness: instances.awareness, - params: options.params, - } - ) as any; // TODO: type is erased after cascading references + if (options.enabled.includes('ws')) { + if (instances.token) { + const ws = new WebsocketProvider( + instances.token, + options.backend, + instances.workspace, + instances.doc, + { + awareness: instances.awareness, + params: options.params, + } + ) as any; // TODO: type is erased after cascading references - // Wait for ws synchronization to complete, otherwise the data will be modified in reverse, which can be optimized later - return new Promise((resolve, reject) => { - // TODO: synced will also be triggered on reconnection after losing sync - // There needs to be an event mechanism to emit the synchronization state to the upper layer - ws.once('synced', () => resolve()); - ws.once('lost-connection', () => resolve()); - ws.once('connection-error', () => reject()); - ws.on('synced', () => instances.emitState('connected')); - ws.on('lost-connection', () => - instances.emitState('retry') - ); - ws.on('connection-error', () => - instances.emitState('retry') - ); - }); - } else { - return; + // Wait for ws synchronization to complete, otherwise the data will be modified in reverse, which can be optimized later + return new Promise((resolve, reject) => { + // TODO: synced will also be triggered on reconnection after losing sync + // There needs to be an event mechanism to emit the synchronization state to the upper layer + ws.once('synced', () => resolve()); + ws.once('lost-connection', () => resolve()); + ws.once('connection-error', () => reject()); + ws.on('synced', () => instances.emitState('connected')); + ws.on('lost-connection', () => + instances.emitState('retry') + ); + ws.on('connection-error', () => + instances.emitState('retry') + ); + }); + } else { + return; + } } }, }; diff --git a/libs/datasource/jwt/src/index.ts b/libs/datasource/jwt/src/index.ts index ecad7aebf9..38bc11396e 100644 --- a/libs/datasource/jwt/src/index.ts +++ b/libs/datasource/jwt/src/index.ts @@ -618,6 +618,7 @@ export class BlockClient< const instance = await YjsAdapter.init(workspace, { provider: getYjsProviders({ + enabled: [], backend: BucketBackend.YjsWebSocketAffine, importData, exportData, diff --git a/libs/datasource/state/src/user.ts b/libs/datasource/state/src/user.ts index fefb689f0a..d32fef2c56 100644 --- a/libs/datasource/state/src/user.ts +++ b/libs/datasource/state/src/user.ts @@ -1,3 +1,4 @@ +import { useNavigate } from 'react-router'; import { getAuth, onAuthStateChanged, @@ -62,11 +63,17 @@ const BRAND_ID = 'AFFiNE'; const _localTrigger = atom(false); const _useUserAndSpacesForFreeLogin = () => { + const navigate = useNavigate(); const [user, setUser] = useAtom(_userAtom); const [loading, setLoading] = useAtom(_loadingAtom); const [localTrigger] = useAtom(_localTrigger); - useEffect(() => setLoading(false), []); + useEffect(() => { + if (loading) { + navigate('/demo'); + setLoading(false); + } + }, []); useEffect(() => { if (localTrigger) { @@ -77,6 +84,14 @@ const _useUserAndSpacesForFreeLogin = () => { nickname: BRAND_ID, email: '', }); + } else { + setUser({ + photo: '', + id: 'demo', + username: 'demo', + nickname: 'demo', + email: '', + }); } }, [localTrigger, setLoading, setUser]); @@ -86,8 +101,8 @@ const _useUserAndSpacesForFreeLogin = () => { }; export const useLocalTrigger = () => { - const [, setTrigger] = useAtom(_localTrigger); - return () => setTrigger(true); + const [trigger, setTrigger] = useAtom(_localTrigger); + return [trigger, () => setTrigger(true)] as [boolean, () => void]; }; export const useUserAndSpaces = process.env['NX_LOCAL'] diff --git a/libs/utils/src/lodash.ts b/libs/utils/src/lodash.ts index 593d52ba4b..be22a6dd5c 100644 --- a/libs/utils/src/lodash.ts +++ b/libs/utils/src/lodash.ts @@ -12,7 +12,6 @@ export { isFunction, isString, isPlainObject, - noop, lowerFirst, last, first, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dacfe065aa..a632fb99bd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -194,7 +194,7 @@ importers: yjs: ^13.5.41 dependencies: authing-js-sdk: 4.23.35 - firebase-admin: 11.0.1_@firebase+app-types@0.7.0 + firebase-admin: 11.0.1 lib0: 0.2.52 lru-cache: 7.13.2 nanoid: 4.0.0 @@ -571,6 +571,9 @@ importers: dependencies: ffc-js-client-side-sdk: 1.1.5 + libs/datasource/jwst/pkg: + specifiers: {} + libs/datasource/jwt: specifiers: '@types/debug': ^4.1.7 @@ -3291,6 +3294,15 @@ packages: - utf-8-validate dev: true + /@firebase/auth-interop-types/0.1.6_@firebase+util@1.6.3: + resolution: {integrity: sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==} + peerDependencies: + '@firebase/app-types': 0.x + '@firebase/util': 1.x + dependencies: + '@firebase/util': 1.6.3 + dev: false + /@firebase/auth-interop-types/0.1.6_pbfwexsq7uf6mrzcwnikj3g37m: resolution: {integrity: sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==} peerDependencies: @@ -3299,6 +3311,7 @@ packages: dependencies: '@firebase/app-types': 0.7.0 '@firebase/util': 1.6.3 + dev: true /@firebase/auth-types/0.11.0_pbfwexsq7uf6mrzcwnikj3g37m: resolution: {integrity: sha512-q7Bt6cx+ySj9elQHTsKulwk3+qDezhzRBFC9zlQ1BjgMueUOnGMcvqmU0zuKlQ4RhLSH7MNAdBV2znVaoN3Vxw==} @@ -3334,6 +3347,19 @@ packages: '@firebase/util': 1.6.3 tslib: 2.4.0 + /@firebase/database-compat/0.2.4: + resolution: {integrity: sha512-VtsGixO5mTjNMJn6PwxAJEAR70fj+3blCXIdQKel3q+eYGZAfdqxox1+tzZDnf9NWBJpaOgAHPk3JVDxEo9NFQ==} + dependencies: + '@firebase/component': 0.5.17 + '@firebase/database': 0.13.4 + '@firebase/database-types': 0.9.12 + '@firebase/logger': 0.3.3 + '@firebase/util': 1.6.3 + tslib: 2.4.0 + transitivePeerDependencies: + - '@firebase/app-types' + dev: false + /@firebase/database-compat/0.2.4_@firebase+app-types@0.7.0: resolution: {integrity: sha512-VtsGixO5mTjNMJn6PwxAJEAR70fj+3blCXIdQKel3q+eYGZAfdqxox1+tzZDnf9NWBJpaOgAHPk3JVDxEo9NFQ==} dependencies: @@ -3345,6 +3371,7 @@ packages: tslib: 2.4.0 transitivePeerDependencies: - '@firebase/app-types' + dev: true /@firebase/database-types/0.9.10: resolution: {integrity: sha512-2ji6nXRRsY+7hgU6zRhUtK0RmSjVWM71taI7Flgaw+BnopCo/lDF5HSwxp8z7LtiHlvQqeRA3Ozqx5VhlAbiKg==} @@ -3359,6 +3386,19 @@ packages: '@firebase/app-types': 0.7.0 '@firebase/util': 1.6.3 + /@firebase/database/0.13.4: + resolution: {integrity: sha512-NW7bOoiaC4sJCj6DY/m9xHoFNa0CK32YPMCh6FiMweLCDQbOZM8Ql/Kn6yyuxCb7K7ypz9eSbRlCWQJsJRQjhg==} + dependencies: + '@firebase/auth-interop-types': 0.1.6_@firebase+util@1.6.3 + '@firebase/component': 0.5.17 + '@firebase/logger': 0.3.3 + '@firebase/util': 1.6.3 + faye-websocket: 0.11.4 + tslib: 2.4.0 + transitivePeerDependencies: + - '@firebase/app-types' + dev: false + /@firebase/database/0.13.4_@firebase+app-types@0.7.0: resolution: {integrity: sha512-NW7bOoiaC4sJCj6DY/m9xHoFNa0CK32YPMCh6FiMweLCDQbOZM8Ql/Kn6yyuxCb7K7ypz9eSbRlCWQJsJRQjhg==} dependencies: @@ -3370,6 +3410,7 @@ packages: tslib: 2.4.0 transitivePeerDependencies: - '@firebase/app-types' + dev: true /@firebase/firestore-compat/0.1.23_53yvy43rwpg2c45kgeszsxtrca: resolution: {integrity: sha512-QfcuyMAavp//fQnjSfCEpnbWi7spIdKaXys1kOLu7395fLr+U6ykmto1HUMCSz8Yus9cEr/03Ujdi2SUl2GUAA==} @@ -10863,12 +10904,12 @@ packages: semver-regex: 2.0.0 dev: true - /firebase-admin/11.0.1_@firebase+app-types@0.7.0: + /firebase-admin/11.0.1: resolution: {integrity: sha512-rL3wlZbi2Kb/KJgcmj1YHlD4ZhfmhfgRO2YJialxAllm0tj1IQea878hHuBLGmv4DpbW9t9nLvX9kddNR2Y65Q==} engines: {node: '>=14'} dependencies: '@fastify/busboy': 1.1.0 - '@firebase/database-compat': 0.2.4_@firebase+app-types@0.7.0 + '@firebase/database-compat': 0.2.4 '@firebase/database-types': 0.9.10 '@types/node': 18.0.1 jsonwebtoken: 8.5.1