init: the first public commit for AFFiNE

2026-07-24 05:48:59 +08:00 · 2022-07-22 15:49:21 +08:00
commit e3e3741393
1451 changed files with 108124 additions and 0 deletions
@@ -0,0 +1,52 @@
+import { styled, ListItem, Divider, Switch } from '@toeverything/components/ui';
+import { useSettings } from './use-settings';
+
+export const SettingsList = () => {
+    const settings = useSettings();
+
+    return (
+        <StyledSettingsList>
+            {settings.map((item, index) => {
+                const type = item.type;
+                if (type === 'separator') {
+                    return <Divider key={index} />;
+                }
+
+                if (type === 'switch') {
+                    return (
+                        <SwitchItemContainer
+                            key={item.name}
+                            onClick={() => {
+                                item.onChange(!item.value);
+                            }}
+                        >
+                            <span>{item.name}</span>
+                            <Switch
+                                checked={item.value}
+                                checkedLabel="ON"
+                                uncheckedLabel="OFF"
+                            />
+                        </SwitchItemContainer>
+                    );
+                }
+
+                return (
+                    <ListItem key={item.name} onClick={() => item.onClick()}>
+                        {item.name}
+                    </ListItem>
+                );
+            })}
+        </StyledSettingsList>
+    );
+};
+
+const StyledSettingsList = styled('div')({
+    overflow: 'auto',
+    padding: '0 4px',
+});
+
+const SwitchItemContainer = styled(ListItem)({
+    display: 'flex',
+    alignContent: 'center',
+    justifyContent: 'space-between',
+});
@@ -0,0 +1,23 @@
+import { styled } from '@toeverything/components/ui';
+import { SettingsList } from './SettingsList';
+import { Footer } from './footer';
+
+export const SettingsPanel = () => {
+    return (
+        <StyledContainerForSettingsPanel>
+            <SettingsList />
+            <Footer />
+        </StyledContainerForSettingsPanel>
+    );
+};
+
+const StyledContainerForSettingsPanel = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        paddingTop: 44,
+        paddingBottom: 44,
+        height: '100%',
+    };
+});
@@ -0,0 +1,20 @@
+import type { FC } from 'react';
+import { styled } from '@toeverything/components/ui';
+import { LastModified } from './LastModified';
+import { Logout } from './Logout';
+
+export const Footer: FC = () => {
+    return (
+        <Container>
+            <LastModified />
+            <Logout />
+        </Container>
+    );
+};
+
+const Container = styled('div')({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '0 16px',
+});
@@ -0,0 +1,32 @@
+import type { FC } from 'react';
+import format from 'date-fns/format';
+import { Typography, styled } from '@toeverything/components/ui';
+import { useUserAndSpaces } from '@toeverything/datasource/state';
+import { usePageLastUpdated, useWorkspaceAndPageId } from '../util';
+
+export const LastModified: FC = () => {
+    const { user } = useUserAndSpaces();
+    const username = user ? user.nickname : 'Anonymous';
+    const { workspaceId, pageId } = useWorkspaceAndPageId();
+    const lastModified = usePageLastUpdated({ workspaceId, pageId });
+    const formatLastModified = format(lastModified, 'MM/dd/yyyy hh:mm');
+    return (
+        <div>
+            <div>
+                <ContentText type="xs">
+                    <span>Last edited by </span>
+                    <span>{username}</span>
+                </ContentText>
+            </div>
+            <div>
+                <ContentText type="xs">{formatLastModified}</ContentText>
+            </div>
+        </div>
+    );
+};
+
+const ContentText = styled(Typography)(({ theme }) => {
+    return {
+        color: theme.affine.palette.icons,
+    };
+});
@@ -0,0 +1,43 @@
+import type { FC } from 'react';
+import { MoveToIcon } from '@toeverything/components/icons';
+import {
+    ListItem,
+    ListIcon,
+    styled,
+    Typography,
+} from '@toeverything/components/ui';
+import { LOGOUT_COOKIES, LOGOUT_LOCAL_STORAGE } from '@toeverything/utils';
+import { getAuth, signOut } from 'firebase/auth';
+
+const logout = () => {
+    LOGOUT_LOCAL_STORAGE.forEach(name => localStorage.removeItem(name));
+    // localStorage.clear();
+    document.cookie = LOGOUT_COOKIES.map(
+        name => name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
+    ).join(' ');
+
+    signOut(getAuth());
+
+    window.location.href = '/';
+};
+
+export const Logout: FC = () => {
+    return (
+        <ListItem onClick={logout}>
+            <StyledIcon />
+            <ContentText type="base">Logout</ContentText>
+        </ListItem>
+    );
+};
+
+const StyledIcon = styled(MoveToIcon)(({ theme }) => {
+    return {
+        color: theme.affine.palette.icons,
+    };
+});
+
+const ContentText = styled(Typography)(({ theme }) => ({
+    marginLeft: '12px',
+    color: theme.affine.palette.menu,
+    fontWeight: 300,
+}));
@@ -0,0 +1 @@
+export { Footer } from './Footer';
@@ -0,0 +1 @@
+export { SettingsPanel } from './SettingsPanel';
@@ -0,0 +1,21 @@
+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);
+
+    return {
+        booleanFullWidthChecked,
+        booleanExportWorkspace,
+        booleanImportWorkspace,
+        booleanExportHtml,
+        booleanExportPdf,
+        booleanExportMarkdown,
+    };
+};
+
+export type SettingFlags = ReturnType<typeof useSettingFlags>;
@@ -0,0 +1,140 @@
+import { useNavigate } from 'react-router-dom';
+import { useSettingFlags, type SettingFlags } from './use-setting-flags';
+import { copyToClipboard } from '@toeverything/utils';
+import {
+    duplicatePage,
+    getPageTitle,
+    exportHtml,
+    exportMarkdown,
+    importWorkspace,
+    exportWorkspace,
+    useWorkspaceAndPageId,
+    useReadingMode,
+} from './util';
+
+interface BaseSettingItem {
+    flag?: keyof SettingFlags;
+}
+
+interface SwitchItem extends BaseSettingItem {
+    name: string;
+    type: 'switch';
+    value: boolean;
+    onChange: (value: boolean) => void;
+}
+
+interface SeparatorItem extends BaseSettingItem {
+    type: 'separator';
+}
+
+interface ButtonItem extends BaseSettingItem {
+    name: string;
+    type: 'button';
+    onClick: () => void;
+}
+
+type SettingItem = SwitchItem | SeparatorItem | ButtonItem;
+
+const filterSettings = (settings: SettingItem[], flags: SettingFlags) => {
+    return settings
+        .filter(setting => {
+            if (!setting.flag) {
+                return true;
+            }
+            return flags[setting.flag];
+        })
+        .filter((setting, index, array) => {
+            if (setting.type === 'separator') {
+                if (
+                    // If the current is a separator, and the following is also a separator, delete the current one
+                    array[index + 1]?.type === 'separator' ||
+                    // If the current separator is the last one, delete the current one
+                    index === array.length - 1
+                ) {
+                    return false;
+                }
+            }
+            return true;
+        });
+};
+
+export const useSettings = (): SettingItem[] => {
+    const { workspaceId, pageId } = useWorkspaceAndPageId();
+    const navigate = useNavigate();
+    const settingFlags = useSettingFlags();
+    const { toggleReadingMode, readingMode } = useReadingMode();
+
+    const settings: SettingItem[] = [
+        {
+            type: 'switch',
+            name: 'Reading Mode',
+            value: readingMode,
+            onChange: () => {
+                toggleReadingMode();
+            },
+        },
+        {
+            type: 'separator',
+        },
+        {
+            type: 'button',
+            name: 'Duplicate Page',
+            onClick: async () => {
+                const newPageInfo = await duplicatePage({
+                    workspaceId,
+                    pageId,
+                });
+                navigate(`/${newPageInfo.workspaceId}/${newPageInfo.pageId}`);
+            },
+        },
+        {
+            type: 'button',
+            name: 'Copy Page Link',
+            onClick: () => copyToClipboard(window.location.href),
+        },
+        {
+            type: 'separator',
+        },
+        {
+            type: 'button',
+            name: 'Export As Markdown',
+            onClick: async () => {
+                const title = await getPageTitle({ workspaceId, pageId });
+                exportMarkdown({ workspaceId, rootBlockId: pageId, title });
+            },
+            flag: 'booleanExportMarkdown',
+        },
+        {
+            type: 'button',
+            name: 'Export As HTML',
+            onClick: async () => {
+                const title = await getPageTitle({ workspaceId, pageId });
+                exportHtml({ workspaceId, rootBlockId: pageId, title });
+            },
+            flag: 'booleanExportHtml',
+        },
+        {
+            type: 'button',
+            name: 'Export As PDF (Unsupported)',
+            onClick: () => console.log('Export As PDF'),
+            flag: 'booleanExportPdf',
+        },
+        {
+            type: 'separator',
+        },
+        {
+            type: 'button',
+            name: 'Import Workspace',
+            onClick: () => importWorkspace(workspaceId),
+            flag: 'booleanImportWorkspace',
+        },
+        {
+            type: 'button',
+            name: 'Export Workspace',
+            onClick: () => exportWorkspace(),
+            flag: 'booleanExportWorkspace',
+        },
+    ];
+
+    return filterSettings(settings, settingFlags);
+};
@@ -0,0 +1,29 @@
+import { services } from '@toeverything/datasource/db-service';
+
+interface DuplicatePageProps {
+    workspaceId: string;
+    pageId: string;
+}
+export const duplicatePage = async ({
+    workspaceId,
+    pageId,
+}: DuplicatePageProps) => {
+    //create page
+    const newPage = await services.api.editorBlock.create({
+        workspace: workspaceId,
+        type: 'page' as const,
+    });
+    //add page to tree
+    await services.api.pageTree.addNextPageToWorkspace(
+        workspaceId,
+        pageId,
+        newPage.id
+    );
+    //copy source page to new page
+    await services.api.editorBlock.copyPage(workspaceId, pageId, newPage.id);
+
+    return {
+        workspaceId,
+        pageId: newPage.id,
+    };
+};
@@ -0,0 +1,57 @@
+import TurndownService from 'turndown';
+
+export const fileExporter = {
+    exportFile: (filename: string, text: string, format: string) => {
+        const element = document.createElement('a');
+        element.setAttribute(
+            'href',
+            'data:' + format + ';charset=utf-8,' + encodeURIComponent(text)
+        );
+        element.setAttribute('download', filename);
+
+        element.style.display = 'none';
+        document.body.appendChild(element);
+
+        element.click();
+
+        document.body.removeChild(element);
+    },
+    decorateHtml: (pageTitle: string, htmlContent: string) => {
+        return `<!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <title>${pageTitle}</title>
+          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
+        </head>
+        <body>
+            <div style="margin:20px auto;width:800px" >
+               <div style="background-color: #fff;box-shadow: 0px 0px 5px #ccc;padding: 10px;">
+                 ${htmlContent}
+               </div>
+            </div>
+        </body>
+        </html>`;
+    },
+    decoreateAffineBrand: (pageTitle: string) => {
+        return pageTitle + ` Created in Affine`;
+    },
+    exportHtml: (pageTitle: string, htmlContent: string) => {
+        fileExporter.exportFile(
+            fileExporter.decoreateAffineBrand(pageTitle) + '.html',
+            fileExporter.decorateHtml(pageTitle, htmlContent),
+            'text/html'
+        );
+    },
+
+    exportMarkdown: (pageTitle: string, htmlContent: string) => {
+        const turndownService = new TurndownService();
+        const markdown = turndownService.turndown(htmlContent);
+
+        fileExporter.exportFile(
+            fileExporter.decoreateAffineBrand(pageTitle) + '.md',
+            markdown,
+            'text/plain'
+        );
+    },
+};
@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import { services } from '@toeverything/datasource/db-service';
+
+const UNTITLED = 'untitled';
+
+interface GetPageTitleProps {
+    workspaceId: string;
+    pageId: string;
+}
+
+export const getPageTitle = async ({
+    workspaceId,
+    pageId,
+}: GetPageTitleProps) => {
+    return await services.api.editorBlock
+        .get({ workspace: workspaceId, ids: [pageId] })
+        .then(blockData => {
+            if (!blockData?.[0]) {
+                return UNTITLED;
+            }
+            return blockData[0].properties.text.value.map(v => v.text).join('');
+        });
+};
+
+const getPageLastUpdated = async ({
+    workspaceId,
+    pageId,
+}: GetPageTitleProps) => {
+    return await services.api.editorBlock
+        .getBlock(workspaceId, pageId)
+        .then(block => {
+            if (!block) {
+                return null;
+            }
+            return block.lastUpdated;
+        });
+};
+
+export const usePageLastUpdated = ({
+    workspaceId,
+    pageId,
+}: GetPageTitleProps) => {
+    const [lastUpdated, setLastUpdated] = useState<number>(Date.now());
+    useEffect(() => {
+        getPageLastUpdated({ workspaceId, pageId }).then(d => {
+            setLastUpdated(d ? d : Date.now());
+        });
+    }, [workspaceId, pageId]);
+    return lastUpdated;
+};
@@ -0,0 +1,42 @@
+import { ClipboardParse } from '@toeverything/components/editor-core';
+import { createEditor } from '@toeverything/components/affine-editor';
+import { fileExporter } from './file-exporter';
+
+interface CreateClipboardParseProps {
+    workspaceId: string;
+    rootBlockId: string;
+}
+
+const createClipboardParse = ({
+    workspaceId,
+    rootBlockId,
+}: CreateClipboardParseProps) => {
+    const editor = createEditor(workspaceId);
+    editor.setRootBlockId(rootBlockId);
+
+    return new ClipboardParse(editor);
+};
+
+interface ExportHandlerProps extends CreateClipboardParseProps {
+    title: string;
+}
+
+export const exportHtml = async ({
+    workspaceId,
+    rootBlockId,
+    title,
+}: ExportHandlerProps) => {
+    const clipboardParse = createClipboardParse({ workspaceId, rootBlockId });
+    const htmlContent = await clipboardParse.page2html();
+    fileExporter.exportHtml(title, htmlContent);
+};
+
+export const exportMarkdown = async ({
+    workspaceId,
+    rootBlockId,
+    title,
+}: ExportHandlerProps) => {
+    const clipboardParse = createClipboardParse({ workspaceId, rootBlockId });
+    const htmlContent = await clipboardParse.page2html();
+    fileExporter.exportMarkdown(title, htmlContent);
+};
@@ -0,0 +1,6 @@
+export { duplicatePage } from './duplicate-page';
+export { exportHtml, exportMarkdown } from './handle-export';
+export { getPageTitle, usePageLastUpdated } from './get-page-info';
+export { importWorkspace, exportWorkspace } from './inspector-workspace';
+export { useWorkspaceAndPageId } from './use-workspace-page';
+export { useReadingMode } from './use-reading-mode';
@@ -0,0 +1,32 @@
+/**
+ * @deprecated debugging method, deprecated
+ */
+export const importWorkspace = (workspaceId: string) => {
+    //@ts-ignore
+    window.client
+        .inspector()
+        .load()
+        .then(() => {
+            window.location.href = `/${workspaceId}/`;
+        });
+};
+
+/**
+ * @deprecated debugging method, deprecated
+ */
+export const exportWorkspace = () => {
+    //@ts-ignore
+    window.client.inspector().save();
+};
+
+/**
+ * @deprecated debugging method, deprecated
+ */
+export const clearWorkspace = async workspaceId => {
+    //@ts-ignore
+    if (window.confirm('Are you sure you want to clear the workspace?')) {
+        //@ts-ignore
+        await window.client.inspector().clear();
+        window.location.href = `/${workspaceId}/`;
+    }
+};
@@ -0,0 +1,23 @@
+import {
+    useShowSettingsSidebar,
+    useShowSpaceSidebar,
+} from '@toeverything/datasource/state';
+
+/**
+ * TODO: This is not Reading Mode, it needs to be discussed later, so I will write it now
+ */
+export const useReadingMode = () => {
+    const { setShowSettingsSidebar } = useShowSettingsSidebar();
+    const { fixedDisplay, toggleSpaceSidebar } = useShowSpaceSidebar();
+    const readingMode = !fixedDisplay;
+
+    const toggleReadingMode = () => {
+        toggleSpaceSidebar();
+        setShowSettingsSidebar(readingMode);
+    };
+
+    return {
+        readingMode,
+        toggleReadingMode,
+    };
+};
@@ -0,0 +1,16 @@
+import { useParams } from 'react-router-dom';
+
+interface UseWorkspaceAndPageIdReturn {
+    workspaceId?: string;
+    pageId?: string;
+}
+
+export const useWorkspaceAndPageId = (): UseWorkspaceAndPageIdReturn => {
+    const params = useParams();
+    const workspaceId = params['workspace_id'];
+    const pageId = params['*'].split('/')[0];
+    return {
+        workspaceId,
+        pageId,
+    };
+};
				`@@ -0,0 +1 @@`
				`export { SettingsPanel } from './SettingsPanel';`