merge branch develop into branch feat/doublelink220820

This commit is contained in:
xiaodong zuo
2022-09-06 10:01:09 +08:00
20 changed files with 284 additions and 260 deletions
@@ -82,7 +82,7 @@ const GroupMenuWrapper = ({
content={
<GroupPanel>
<ViewsMenu />
<AddViewMenu />
{/*<AddViewMenu />*/}
{
// // Closed beta period temporarily
// filterSorterFlag && (
+3
View File
@@ -13,5 +13,8 @@
"nanoid": "^4.0.0",
"slate": "^0.81.0",
"style9": "^0.14.0"
},
"devDependencies": {
"@types/html-escaper": "^3.0.0"
}
}
@@ -12,13 +12,20 @@ export const INLINE_MENU_UI_TYPES = {
} as const;
/** inline menu item { key : display-name } */
export const inlineMenuShortcuts = {
export const MacInlineMenuShortcuts = {
textBold: '⌘+B',
textItalic: '⌘+I',
textStrikethrough: '⌘+S',
link: '⌘+K',
[Protocol.Block.Type.code]: '⌘+E',
};
export const WinInlineMenuShortcuts = {
textBold: 'Ctrl+B',
textItalic: 'Ctrl+I',
textStrikethrough: 'Ctrl+S',
link: 'Ctrl+K',
[Protocol.Block.Type.code]: 'Ctrl+E',
};
export const inlineMenuNames = {
currentText: 'TEXT SIZE',
[Protocol.Block.Type.heading1]: 'Heading 1',
@@ -1,22 +1,24 @@
import React, { useState, useCallback } from 'react';
import style9 from 'style9';
import {
Popover,
styled,
type SvgIconProps,
Tooltip,
} from '@toeverything/components/ui';
import {
fontBgColorPalette,
fontColorPalette,
} from '@toeverything/components/common';
import { ArrowDropDownIcon } from '@toeverything/components/icons';
import type { DropdownItemType, WithEditorSelectionType } from '../types';
import {
inlineMenuNamesKeys,
Popover,
styled,
Tooltip,
type SvgIconProps,
} from '@toeverything/components/ui';
import { uaHelper } from '@toeverything/utils';
import { useCallback, useState } from 'react';
import style9 from 'style9';
import {
inlineMenuNamesForFontColor,
inlineMenuShortcuts,
inlineMenuNamesKeys,
MacInlineMenuShortcuts,
WinInlineMenuShortcuts,
} from '../config';
import type { DropdownItemType, WithEditorSelectionType } from '../types';
type MenuDropdownItemProps = DropdownItemType & WithEditorSelectionType;
@@ -36,102 +38,100 @@ export const MenuDropdownItem = ({
set_anchor_ele(null);
}, []);
//@ts-ignore
const shortcut = inlineMenuShortcuts[nameKey];
const shortcut = uaHelper.isMacOs
? //@ts-ignore
MacInlineMenuShortcuts[nameKey]
: //@ts-ignore
WinInlineMenuShortcuts[nameKey];
return (
<>
<Popover
trigger="click"
placement="bottom-start"
<Popover
trigger="click"
placement="bottom-start"
content={
<div className={styles('dropdownContainer')}>
{children.map(item => {
const {
name,
icon: ItemIcon,
onClick,
nameKey: itemNameKey,
} = item;
const StyledIcon = withStylesForIcon(ItemIcon);
return (
<button
className={styles('dropdownItem')}
key={name}
onClick={() => {
if (
onClick &&
selectionInfo?.anchorNode?.id
) {
onClick({
editor,
type: itemNameKey,
anchorNodeId:
selectionInfo?.anchorNode?.id,
});
}
handle_close_dropdown_menu();
}}
>
<StyledIcon
fontColor={
nameKey ===
inlineMenuNamesKeys.currentFontColor
? fontColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: nameKey ===
inlineMenuNamesKeys.currentFontBackground
? fontBgColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: ''
}
// fontBgColor={
// nameKey=== inlineMenuNamesKeys.currentFontBackground ? fontBgColorPalette[
// inlineMenuNamesForFontColor[itemNameKey] as keyof typeof fontBgColorPalette
// ]:''
// }
/>
{/* <ItemIcon sx={{ width: 20, height: 20 }} /> */}
<span className={styles('dropdownItemItext')}>
{name}
</span>
</button>
);
})}
</div>
}
>
<Tooltip
content={
<div className={styles('dropdownContainer')}>
{children.map(item => {
const {
name,
icon: ItemIcon,
onClick,
nameKey: itemNameKey,
} = item;
const StyledIcon = withStylesForIcon(ItemIcon);
return (
<button
className={styles('dropdownItem')}
key={name}
onClick={() => {
if (
onClick &&
selectionInfo?.anchorNode?.id
) {
onClick({
editor,
type: itemNameKey,
anchorNodeId:
selectionInfo?.anchorNode
?.id,
});
}
handle_close_dropdown_menu();
}}
>
<StyledIcon
fontColor={
nameKey ===
inlineMenuNamesKeys.currentFontColor
? fontColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: nameKey ===
inlineMenuNamesKeys.currentFontBackground
? fontBgColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: ''
}
// fontBgColor={
// nameKey=== inlineMenuNamesKeys.currentFontBackground ? fontBgColorPalette[
// inlineMenuNamesForFontColor[itemNameKey] as keyof typeof fontBgColorPalette
// ]:''
// }
/>
{/* <ItemIcon sx={{ width: 20, height: 20 }} /> */}
<span
className={styles('dropdownItemItext')}
>
{name}
</span>
</button>
);
})}
<div style={{ padding: '2px 4px' }}>
<p>{name}</p>
{shortcut && <p>{shortcut}</p>}
</div>
}
placement="top"
trigger="hover"
>
<Tooltip
content={
<div style={{ padding: '2px 4px' }}>
<p>{name}</p>
{shortcut && <p>{shortcut}</p>}
</div>
}
placement="top"
trigger="hover"
<button
className={styles('currentDropdownButton')}
aria-label={name}
>
<button
className={styles('currentDropdownButton')}
aria-label={name}
>
<MenuIcon sx={{ width: 20, height: 20 }} />
<ArrowDropDownIcon sx={{ width: 20, height: 20 }} />
</button>
</Tooltip>
</Popover>
</>
<MenuIcon sx={{ width: 20, height: 20 }} />
<ArrowDropDownIcon sx={{ width: 20, height: 20 }} />
</button>
</Tooltip>
</Popover>
);
};
@@ -1,7 +1,8 @@
import { Tooltip } from '@toeverything/components/ui';
import { uaHelper } from '@toeverything/utils';
import React, { useCallback } from 'react';
import style9 from 'style9';
import { inlineMenuNamesKeys, inlineMenuShortcuts } from '../config';
import { inlineMenuNamesKeys, WinInlineMenuShortcuts } from '../config';
import type { IconItemType, WithEditorSelectionType } from '../types';
type MenuIconItemProps = IconItemType & WithEditorSelectionType;
@@ -36,7 +37,11 @@ export const MenuIconItem = ({
);
//@ts-ignore
const shortcut = inlineMenuShortcuts[nameKey];
const shortcut = uaHelper.isMacOs
? //@ts-ignore
MacInlineMenuShortcuts[nameKey]
: //@ts-ignore
WinInlineMenuShortcuts[nameKey];
return (
<Tooltip
@@ -13,7 +13,7 @@ import {
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { EditorBoardSwitcher } from './EditorBoardSwitcher';
import { FileSystem, fsApiSupported } from './FileSystem';
import { fsApiSupported } from './FileSystem';
import { CurrentPageTitle } from './Title';
export const LayoutHeader = () => {
@@ -51,7 +51,6 @@ export const LayoutHeader = () => {
</FlexContainer>
<FlexContainer>
<StyledHelper>
<FileSystem />
<StyledShare disabled={true}>{t('Share')}</StyledShare>
<div style={{ margin: '0px 12px' }}>
<IconButton
@@ -76,9 +75,6 @@ export const LayoutHeader = () => {
<EditorBoardSwitcher />
</StyledContainerForEditorBoardSwitcher>
</StyledHeaderRoot>
<StyledUnstableTips>
<StyledUnstableTipsText>{warningTips}</StyledUnstableTipsText>
</StyledUnstableTips>
</StyledContainerForHeaderRoot>
);
};
@@ -58,8 +58,6 @@ function PageSettingPortal() {
const navigate = useNavigate();
const { user } = useUserAndSpaces();
const BooleanFullWidthChecked = useFlag('BooleanFullWidthChecked', false);
const BooleanExportWorkspace = useFlag('BooleanExportWorkspace', false);
const BooleanImportWorkspace = useFlag('BooleanImportWorkspace', false);
const BooleanExportHtml = useFlag('BooleanExportHtml', false);
const BooleanExportPdf = useFlag('BooleanExportPdf', false);
const BooleanExportMarkdown = useFlag('BooleanExportMarkdown', false);
@@ -217,18 +215,14 @@ function PageSettingPortal() {
/>
)}
<Divider />
{BooleanImportWorkspace && (
<ListButton
content="Import Workspace"
onClick={handleImportWorkspace}
/>
)}
{BooleanExportWorkspace && (
<ListButton
content="Export Workspace"
onClick={handleExportWorkspace}
/>
)}
<ListButton
content="Import Workspace"
onClick={handleImportWorkspace}
/>
<ListButton
content="Export Workspace"
onClick={handleExportWorkspace}
/>
<p className="textDescription">
Last edited by {user && user.nickname}
@@ -49,7 +49,7 @@ export const SettingsList = () => {
{item.key === 'Language' ? (
<div style={{ marginLeft: '12em' }}>
<Select
defaultValue={options[0].value}
defaultValue={i18n.language}
onChange={changeLanguage}
>
{options.map(option => (
@@ -2,8 +2,6 @@ import { useFlag } from '@toeverything/datasource/feature-flags';
export const useSettingFlags = () => {
const booleanFullWidthChecked = useFlag('BooleanFullWidthChecked', false);
const booleanExportWorkspace = useFlag('BooleanExportWorkspace', false);
const booleanImportWorkspace = useFlag('BooleanImportWorkspace', false);
const booleanExportHtml = useFlag('BooleanExportHtml', false);
const booleanExportPdf = useFlag('BooleanExportPdf', false);
const booleanExportMarkdown = useFlag('BooleanExportMarkdown', false);
@@ -11,8 +9,6 @@ export const useSettingFlags = () => {
return {
booleanFullWidthChecked,
booleanExportWorkspace,
booleanImportWorkspace,
booleanExportHtml,
booleanExportPdf,
booleanExportMarkdown,
@@ -145,26 +145,24 @@ export const useSettings = (): SettingItem[] => {
type: 'separator',
key: 'separator2',
},
{
type: 'button',
name: t('Clear Workspace'),
key: 'Clear Workspace',
onClick: () => clearWorkspace(workspaceId),
flag: 'booleanClearWorkspace',
},
{
type: 'button',
name: t('Import Workspace'),
key: 'Import Workspace',
onClick: () => importWorkspace(workspaceId),
flag: 'booleanImportWorkspace',
onClick: () => importWorkspace(),
},
{
type: 'button',
name: t('Export Workspace'),
key: 'Export Workspace',
onClick: () => exportWorkspace(),
flag: 'booleanExportWorkspace',
},
{
type: 'button',
name: t('Clear Workspace'),
key: 'Clear Workspace',
onClick: () => clearWorkspace(workspaceId),
flag: 'booleanClearWorkspace',
},
];
@@ -1,14 +1,15 @@
/**
* @deprecated debugging method, deprecated
*/
export const importWorkspace = (workspaceId: string) => {
//@ts-ignore
window.client
.inspector()
.load()
.then(() => {
window.location.href = `/${workspaceId}/`;
});
export const importWorkspace = async () => {
if (window.confirm('Your currently open data will be lost.')) {
//@ts-ignore
const status = await window.client.inspector().load();
if (status) {
window.location.reload();
}
}
};
/**
+1
View File
@@ -32,4 +32,5 @@ const Container = styled(Clickable)({
display: 'flex',
alignItems: 'center',
padding: '6px 12px',
whiteSpace: 'nowrap',
});
@@ -39,7 +39,7 @@ async function _getCurrentToken() {
const _enabled = {
demo: [],
AFFiNE: ['sqlite'],
AFFiNE: ['idb'],
} as any;
async function _getBlockDatabase(
@@ -36,7 +36,7 @@ export class UserConfig extends ServiceBaseClass {
}
const db = await this.database.getDatabase(workspace);
const newPage = await db.get('page');
const newPage = await db.getNamedBlock('start-page');
await this.get_dependency(PageTree).addPage(workspace, newPage.id);
await this.addRecentPage(workspace, userId, newPage.id);
+2 -2
View File
@@ -357,7 +357,7 @@ export class BlockClient<
* @param name block name
* @returns block instance
*/
private async get_named_block(
public async getNamedBlock(
name: string,
options?: { workspace?: boolean }
): Promise<BaseBlock<B, C>> {
@@ -376,7 +376,7 @@ export class BlockClient<
*/
public async getWorkspace() {
if (!this._root.node) {
this._root.node = await this.get_named_block(this._workspace, {
this._root.node = await this.getNamedBlock(this._workspace, {
workspace: true,
});
}
+63 -46
View File
@@ -56,6 +56,7 @@ type YjsProviders = {
connListener: { listeners?: ConnectivityListener };
userId: string;
remoteToken: string | undefined; // remote storage token
providers: unknown[];
};
const _yjsDatabaseInstance = new Map<string, YjsProviders>();
@@ -107,19 +108,25 @@ async function _initYjsDatabase(
);
const connListener: { listeners?: ConnectivityListener } = {};
let providers: unknown[] = [];
if (options.provider) {
const emitState = (c: Connectivity) =>
connListener.listeners?.(workspace, c);
await Promise.all(
Object.entries(options.provider).flatMap(([, p]) => [
p({ awareness, doc, token, workspace, emitState }),
providers = await Promise.all(
Object.entries(options.provider).flatMap(([name, p]) => [
p({ awareness, doc, token, workspace, emitState }).then(p => {
console.log(p);
return {
[name]: p,
};
}),
p({
awareness,
doc: binaries,
token,
workspace: `${workspace}_binaries`,
emitState,
}),
}).then(p => ({ [`${name}_binaries`]: p })),
])
);
}
@@ -128,7 +135,7 @@ async function _initYjsDatabase(
binaries,
doc,
gatekeeper,
providers,
connListener,
userId,
remoteToken: token,
@@ -324,53 +331,63 @@ export class YjsAdapter implements AsyncDatabaseAdapter<YjsContentOperation> {
const binary = encodeStateAsUpdate(this._doc);
saveAs(
new Blob([binary]),
`affine_workspace_${new Date().toDateString()}.apk`
`affine_workspace_${new Date().toDateString()}.affine`
);
},
load: async () => {
const handles = await window.showOpenFilePicker({
types: [
{
description: 'AFFiNE Package',
accept: {
// eslint-disable-next-line @typescript-eslint/naming-convention
'application/affine': ['.apk'],
try {
const handles = await window.showOpenFilePicker({
types: [
{
description: 'AFFiNE Package',
accept: {
// eslint-disable-next-line @typescript-eslint/naming-convention
'application/affine': ['.affine'],
},
},
},
],
});
const [file] = (await fromEvent(handles)) as File[];
const binary = await file?.arrayBuffer();
// await this._provider.idb.clearData();
const doc = new Doc({ autoLoad: true, shouldLoad: true });
let updated = 0;
let isUpdated = false;
doc.on('update', () => {
isUpdated = true;
updated += 1;
});
setInterval(() => {
if (updated > 0) {
updated -= 1;
}
}, 500);
const update_check = new Promise<void>(resolve => {
const check = async () => {
while (!isUpdated || updated > 0) {
await sleep();
],
});
const [file] = (await fromEvent(handles)) as File[];
const binary = await file?.arrayBuffer();
console.log(this._provider.providers);
let { indexeddb } = (
this._provider.providers as any[]
).find(p => p.indexeddb);
await indexeddb?.idb?.clearData();
const doc = new Doc({ autoLoad: true, shouldLoad: true });
let updated = 0;
let isUpdated = false;
doc.on('update', () => {
isUpdated = true;
updated += 1;
});
setInterval(() => {
if (updated > 0) {
updated -= 1;
}
resolve();
};
check();
});
// await new IndexedDBProvider(this._provider.idb.name, doc)
// .whenSynced;
if (binary) {
applyUpdate(doc, new Uint8Array(binary));
await update_check;
}, 500);
const update_check = new Promise<void>(resolve => {
const check = async () => {
while (!isUpdated || updated > 0) {
await sleep();
}
resolve();
};
check();
});
await new indexeddb.ctor(indexeddb.idb.name, doc)
.whenSynced;
if (binary) {
applyUpdate(doc, new Uint8Array(binary));
await update_check;
}
return true;
} catch (err) {
console.log(err);
return false;
}
console.log('load success');
},
parse: () => this._doc.toJSON(),
// eslint-disable-next-line @typescript-eslint/naming-convention
+8 -3
View File
@@ -18,7 +18,9 @@ type YjsDefaultInstances = {
emitState: (connectivity: Connectivity) => void;
};
export type YjsProvider = (instances: YjsDefaultInstances) => Promise<void>;
export type YjsProvider = (
instances: YjsDefaultInstances
) => Promise<unknown | undefined>;
type ProviderType = 'idb' | 'sqlite' | 'ws';
@@ -38,9 +40,12 @@ export const getYjsProviders = (
return {
indexeddb: async (instances: YjsDefaultInstances) => {
if (options.enabled.includes('idb')) {
await new IndexedDBProvider(instances.workspace, instances.doc)
.whenSynced;
return new IndexedDBProvider(
instances.workspace,
instances.doc
).whenSynced.then(idb => ({ idb, ctor: IndexedDBProvider }));
}
return undefined;
},
sqlite: async (instances: YjsDefaultInstances) => {
if (options.enabled.includes('sqlite')) {
+9 -33
View File
@@ -71,44 +71,20 @@ const _useUserAndSpacesForFreeLogin = () => {
useEffect(() => {
if (loading) {
if (location.pathname.startsWith('/local')) {
navigate('/local');
} else {
navigate('/demo');
}
navigate(`/${BRAND_ID}`);
setLoading(false);
}
}, []);
useEffect(() => {
if (localTrigger) {
setUser({
photo: '',
id: BRAND_ID,
username: BRAND_ID,
nickname: BRAND_ID,
email: '',
});
} else {
if (location.pathname.startsWith('/local')) {
setUser({
photo: '',
id: 'local',
username: 'local',
nickname: 'local',
email: '',
});
} else {
setUser({
photo: '',
id: 'demo',
username: 'demo',
nickname: 'demo',
email: '',
});
}
}
}, [localTrigger, location, setLoading, setUser]);
setUser({
photo: '',
id: BRAND_ID,
username: BRAND_ID,
nickname: BRAND_ID,
email: '',
});
}, [setUser]);
const currentSpaceId: string | undefined = useMemo(() => user?.id, [user]);