mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-02 09:59:55 +08:00
feat: split components (#1530)
This commit is contained in:
Himself65
@@ -3,7 +3,11 @@ import type { StorybookConfig } from '@storybook/react-vite';
|
||||
export default {
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
staticDirs: ['../../../apps/web/public'],
|
||||
addons: ['@storybook/addon-links', 'storybook-dark-mode-v7'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'storybook-dark-mode-v7',
|
||||
'@storybook/addon-interactions',
|
||||
],
|
||||
framework: {
|
||||
name: '@storybook/react-vite',
|
||||
options: {
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.global = window;
|
||||
</script>
|
||||
@@ -1,4 +1,6 @@
|
||||
import React from 'react';
|
||||
import '@blocksuite/editor/themes/affine.css';
|
||||
|
||||
import { getDarkTheme, getLightTheme, ThemeProvider } from '../src';
|
||||
import { useDarkMode } from 'storybook-dark-mode-v7';
|
||||
export const parameters = {
|
||||
|
||||
@@ -4,8 +4,13 @@
|
||||
"version": "0.3.1",
|
||||
"main": "./src/index.ts",
|
||||
"scripts": {
|
||||
"storybook": "storybook dev",
|
||||
"build-storybook": "storybook build"
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build",
|
||||
"test-storybook": "test-storybook"
|
||||
},
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./block-suite-editor": "./src/components/block-suite-editor/index.tsx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@affine/debug": "workspace:*",
|
||||
@@ -31,13 +36,18 @@
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "7.0.0-rc.1",
|
||||
"@storybook/addon-essentials": "7.0.0-rc.1",
|
||||
"@storybook/addon-interactions": "7.0.0-rc.1",
|
||||
"@storybook/addon-links": "7.0.0-rc.1",
|
||||
"@storybook/builder-vite": "7.0.0-rc.1",
|
||||
"@storybook/jest": "0.0.11-next.0",
|
||||
"@storybook/react": "7.0.0-rc.1",
|
||||
"@storybook/react-vite": "7.0.0-rc.1",
|
||||
"@storybook/test-runner": "^0.10.0-next.10",
|
||||
"@storybook/testing-library": "0.0.14-next.1",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "18.0.11",
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"jest-mock": "^28.1.3",
|
||||
"storybook": "7.0.0-rc.1",
|
||||
"storybook-dark-mode-v7": "3.0.0-alpha.0",
|
||||
"typescript": "^4.9.5",
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
/* deepscan-disable USELESS_ARROW_FUNC_BIND */
|
||||
import { __unstableSchemas, builtInSchemas } from '@blocksuite/blocks/models';
|
||||
import { EditorContainer } from '@blocksuite/editor';
|
||||
import { Page, Workspace } from '@blocksuite/store';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { BlockSuiteEditor, EditorProps } from '.';
|
||||
|
||||
function initPage(page: Page, editor: Readonly<EditorContainer>): void {
|
||||
// Add page block and surface block at root level
|
||||
const pageBlockId = page.addBlockByFlavour('affine:page', {
|
||||
title: new page.Text(''),
|
||||
});
|
||||
page.addBlockByFlavour('affine:surface', {}, null);
|
||||
const frameId = page.addBlockByFlavour('affine:frame', {}, pageBlockId);
|
||||
page.addBlockByFlavour('affine:paragraph', {}, frameId);
|
||||
page.resetHistory();
|
||||
}
|
||||
|
||||
const blockSuiteWorkspace = new Workspace({
|
||||
id: 'test',
|
||||
blobOptionsGetter: () => void 0,
|
||||
});
|
||||
blockSuiteWorkspace.register(builtInSchemas).register(__unstableSchemas);
|
||||
const promise = new Promise<void>(resolve => {
|
||||
blockSuiteWorkspace.slots.pageAdded.once(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
blockSuiteWorkspace.createPage('page0');
|
||||
|
||||
type BlockSuiteMeta = Meta<typeof BlockSuiteEditor>;
|
||||
export default {
|
||||
title: 'BlockSuite/Editor',
|
||||
component: BlockSuiteEditor,
|
||||
} satisfies BlockSuiteMeta;
|
||||
|
||||
const Template: StoryFn<EditorProps> = (args: EditorProps) => {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const page = blockSuiteWorkspace.getPage('page0');
|
||||
useEffect(() => {
|
||||
promise
|
||||
.then(() => setLoaded(true))
|
||||
.then(() => {
|
||||
document.dispatchEvent(new Event('blocksuite:ready'));
|
||||
});
|
||||
}, []);
|
||||
if (!loaded || !page) return <div>Loading...</div>;
|
||||
return (
|
||||
<BlockSuiteEditor
|
||||
{...args}
|
||||
blockSuiteWorkspace={blockSuiteWorkspace}
|
||||
page={page}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export const Empty = Template.bind({});
|
||||
Empty.play = async ({ canvasElement }) => {
|
||||
await new Promise<void>(resolve => {
|
||||
document.addEventListener('blocksuite:ready', () => resolve(), {
|
||||
once: true,
|
||||
});
|
||||
});
|
||||
|
||||
const editorContainer = canvasElement.querySelector(
|
||||
'[data-testid="editor-test-page0"]'
|
||||
) as HTMLDivElement;
|
||||
expect(editorContainer).not.toBeNull();
|
||||
await new Promise<void>(resolve => {
|
||||
setTimeout(() => resolve(), 50);
|
||||
});
|
||||
const editor = editorContainer.querySelector(
|
||||
'editor-container'
|
||||
) as EditorContainer;
|
||||
expect(editor).not.toBeNull();
|
||||
};
|
||||
|
||||
Empty.args = {
|
||||
onInit: initPage,
|
||||
mode: 'page',
|
||||
};
|
||||
@@ -0,0 +1,94 @@
|
||||
import { BlockHub } from '@blocksuite/blocks';
|
||||
import { EditorContainer } from '@blocksuite/editor';
|
||||
import type { Page, Workspace } from '@blocksuite/store';
|
||||
import { CSSProperties, useEffect, useRef } from 'react';
|
||||
|
||||
export type EditorProps = {
|
||||
blockSuiteWorkspace: Workspace;
|
||||
page: Page;
|
||||
mode: 'page' | 'edgeless';
|
||||
onInit: (page: Page, editor: Readonly<EditorContainer>) => void;
|
||||
onLoad?: (page: Page, editor: EditorContainer) => void;
|
||||
style?: CSSProperties;
|
||||
};
|
||||
|
||||
declare global {
|
||||
// eslint-disable-next-line no-var
|
||||
var currentBlockSuiteWorkspace: Workspace | undefined;
|
||||
// eslint-disable-next-line no-var
|
||||
var currentPage: Page | undefined;
|
||||
// eslint-disable-next-line no-var
|
||||
var currentEditor: EditorContainer | undefined;
|
||||
}
|
||||
|
||||
export const BlockSuiteEditor = (props: EditorProps) => {
|
||||
const page = props.page;
|
||||
const editorRef = useRef<EditorContainer | null>(null);
|
||||
const blockHubRef = useRef<BlockHub | null>(null);
|
||||
if (editorRef.current === null) {
|
||||
editorRef.current = new EditorContainer();
|
||||
globalThis.currentEditor = editorRef.current;
|
||||
}
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
if (editorRef.current) {
|
||||
editorRef.current.mode = props.mode;
|
||||
}
|
||||
}, [props.mode]);
|
||||
|
||||
useEffect(() => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor || !ref.current || !page) {
|
||||
return;
|
||||
}
|
||||
|
||||
editor.page = page;
|
||||
if (page.root === null) {
|
||||
props.onInit(page, editor);
|
||||
}
|
||||
props.onLoad?.(page, editor);
|
||||
return;
|
||||
}, [page, props]);
|
||||
|
||||
useEffect(() => {
|
||||
const editor = editorRef.current;
|
||||
const container = ref.current;
|
||||
|
||||
if (!editor || !container || !page) {
|
||||
return;
|
||||
}
|
||||
if (
|
||||
page.awarenessStore.getFlag('enable_block_hub') &&
|
||||
props.mode === 'page'
|
||||
) {
|
||||
editor.createBlockHub().then(blockHub => {
|
||||
if (blockHubRef.current) {
|
||||
blockHubRef.current.remove();
|
||||
}
|
||||
blockHubRef.current = blockHub;
|
||||
const toolWrapper = document.querySelector('#toolWrapper');
|
||||
if (!toolWrapper) {
|
||||
console.warn(
|
||||
'toolWrapper not found, block hub feature will not be available.'
|
||||
);
|
||||
} else {
|
||||
toolWrapper.appendChild(blockHub);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
container.appendChild(editor);
|
||||
return () => {
|
||||
blockHubRef.current?.remove();
|
||||
container.removeChild(editor);
|
||||
};
|
||||
}, [page, props.mode]);
|
||||
return (
|
||||
<div
|
||||
data-testid={`editor-${props.blockSuiteWorkspace.id}-${props.page.id}`}
|
||||
className="editor-wrapper"
|
||||
style={props.style}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,4 +1,3 @@
|
||||
// export * from './components/BlockSuiteEditor';
|
||||
export * from './components/ListSkeleton';
|
||||
export * from './styles';
|
||||
export * from './ui/breadcrumbs';
|
||||
|
||||
@@ -1,20 +1,33 @@
|
||||
/* deepscan-disable USELESS_ARROW_FUNC_BIND */
|
||||
import { Link, Typography } from '@mui/material';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import { within } from '@storybook/testing-library';
|
||||
|
||||
import { Breadcrumbs } from '..';
|
||||
|
||||
export default {
|
||||
title: 'AFFiNE/Breadcrumbs',
|
||||
component: Breadcrumbs,
|
||||
} as Meta;
|
||||
} as Meta<typeof Breadcrumbs>;
|
||||
|
||||
const Template: Story = args => <Breadcrumbs {...args} />;
|
||||
const Template: StoryFn = args => <Breadcrumbs {...args} />;
|
||||
|
||||
export const Primary = Template.bind(undefined);
|
||||
Primary.play = async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const text = canvas.getByText('AFFiNE');
|
||||
expect(text.getAttribute('data-testid')).toBe('affine');
|
||||
};
|
||||
Primary.args = {
|
||||
children: [
|
||||
<Link key="1" underline="hover" color="inherit" href="/">
|
||||
<Link
|
||||
data-testid="affine"
|
||||
key="1"
|
||||
underline="hover"
|
||||
color="inherit"
|
||||
href="/"
|
||||
>
|
||||
AFFiNE
|
||||
</Link>,
|
||||
<Link key="2" underline="hover" color="inherit" href="/Docs/">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* deepscan-disable USELESS_ARROW_FUNC_BIND */
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
|
||||
import { Button } from '..';
|
||||
import { ButtonProps } from '../ui/button/interface';
|
||||
@@ -13,7 +13,7 @@ export default {
|
||||
},
|
||||
} as Meta<ButtonProps>;
|
||||
|
||||
const Template: Story<ButtonProps> = args => <Button {...args} />;
|
||||
const Template: StoryFn<ButtonProps> = args => <Button {...args} />;
|
||||
|
||||
export const Primary = Template.bind(undefined);
|
||||
Primary.args = {
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "@affine/templates",
|
||||
"private": true,
|
||||
"sideEffect": false,
|
||||
"exports": {
|
||||
"./*.md": "./src/*.md"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
# AFFiNE Docs
|
||||
|
||||
This repo is the source for AFFiNE documentation.
|
||||
|
||||
The published documentation is at:
|
||||
|
||||
- https://docs.affine.pro
|
||||
|
||||
Please [file an issue](https://github.com/toeverything/AFFiNE-docs/issues) if you can't find what you are looking for.
|
||||
|
||||
## Get Started
|
||||
|
||||
This repo is split into folders - with each folder being a seperate category of documentation.
|
||||
|
||||
You can browse the folders to view the pages within each category.
|
||||
|
||||
Please note: Some pages may not display correctly on GitHub, be sure to check the corresponding page on GitBook.
|
||||
|
||||
### Asset Naming
|
||||
|
||||
All assets should be stored in `.gitbook/assets/`.
|
||||
|
||||
The asset should be named according to where it will be used.
|
||||
|
||||
If an image is needed for `/developer-docs/coding/setup.md` the expected filename would be `developer-docs_coding_setup` where `_` seperates each folder/file. And if multiple images are required a unique filename can be appeneded, such as `_01`.
|
||||
@@ -0,0 +1,66 @@
|
||||
# Welcome to AFFiNE Abbey Alpha Wood
|
||||
|
||||
We've been working hard on improving the user experience and have made several new features live for you to use.
|
||||
|
||||
If you are looking for **support**, would like to **suggest** your ideas, and keep on top of all the **latest updates**. We suggest you visit the [AFFiNE Community](https://community.affine.pro/home) site.
|
||||
|
||||
Let us know what you think of this latest version.
|
||||
|
||||
**AFFiNE Alpha brings:**
|
||||
|
||||
1. A much smoother editing experience, with much greater stability;
|
||||
2. More complete Markdown support and improved keyboard shortcuts;
|
||||
3. New features such as dark mode; Switch between view styles using the ☀ and 🌙.
|
||||
4. Clean and modern UI/UX design.
|
||||
5. You can self-host locally with Docker.
|
||||
|
||||
```basic
|
||||
docker run -it --name affine -d -v [YOUR_PATH]:/app/data -p 3000:3000 ghcr.io/toeverything/affine-self-hosted:alpha-abbey-wood
|
||||
```
|
||||
|
||||
**Looking for Markdown syntax or keyboard shortcuts?**
|
||||
|
||||
- Find the (?) in the bottom right, then the ️⌨️, to view a full list of Keyboard Shortcuts
|
||||
|
||||
### In this release, you can now:
|
||||
|
||||
- Manage your pages from the collapsible **sidebar**, which allows you to add **favorites** and restore deleted files from the **trash**
|
||||
- Search through all your content with the quick search - activate with `Ctrl/⌘ + K`
|
||||
- A friendly Reminder:
|
||||
- In the case of unselected text, `Ctrl/⌘ + K` activates quick search;
|
||||
- In the case of selected text, `Ctrl/⌘ + K` will firstly ask to add a hyperlink, and then using `Ctrl/⌘ + K` again activates the quick search
|
||||
- Quickly format text with the **pop-up toolbar** (highlight any text to give it a try)
|
||||
- Copy and paste **images** into your pages, resize them and add captions
|
||||
- Add horizontal line dividers to your text with `---` and `***`
|
||||
- Changes are saved **locally**, but we still recommend you export your data to avoid data loss
|
||||
- Insert code blocks with syntax highlighting support using `````
|
||||
|
||||
### Playground:
|
||||
|
||||
[] Try a horizontal line: `---`
|
||||
|
||||
[] What about a code block? `````
|
||||
|
||||
```JavaScript
|
||||
console.log('Hello world');
|
||||
```
|
||||
|
||||
[] Can you resize this image?
|
||||
|
||||
|
||||
|
||||
**How about page management?**
|
||||
|
||||
[] Create a new page
|
||||
|
||||
[] Send a page to trash
|
||||
|
||||
[] Favorite a page
|
||||
|
||||
**Have an enjoyable editing experience !!!** 😃
|
||||
|
||||
Have some feedback or just want to get in touch? Use the (?), then 🎧 to get in touch and join our communities.
|
||||
|
||||
**Interested in AFFiNE cloud?**
|
||||
|
||||
Head over to [general](https://community.affine.pro/c/general-discussion/) in our community and post what interests you about AFFiNE!
|
||||
@@ -0,0 +1,43 @@
|
||||
# Welcome to AFFiNE Alpha Downhills
|
||||
|
||||
Welcome,
|
||||
|
||||
Thank you for checking out **AFFiNE**. We've put together a playground below for you to try out the app. If you are looking for more **support**, offer your **ideas** and **feedback**, or find the l**atest updates** don't forget to head over to our [AFFiNE Community](https://community.affine.pro/home) site.
|
||||
|
||||
###### Playground
|
||||
|
||||
There are common styling options from such as **bold**, _italics,_ <u>underline</u> and strikethrough. As well as `in-line code blocks`. These can all be applied throughout your text, just highlight some text - you can try it here.
|
||||
|
||||
> Let's explore some different blocks and features of AFFiNE. Such as this quote block
|
||||
|
||||
Or maybe we can list the latest features:
|
||||
|
||||
- Drag Handle
|
||||
- Easily select, drag and rearrange your blocks.
|
||||
- Find the `⬦` to the left of your blocks and interact with it!
|
||||
- Block Hub
|
||||
- A convenient home for all blocks that can empower your doc.
|
||||
- Find it in the lower right, look for the `□+`.
|
||||
- Slash Menu
|
||||
- Want a convenient way to edit and empower your doc without the mouse?
|
||||
- Try activating this feature with just the `/` key.
|
||||
- Workspaces
|
||||
- Further improved, with cloud support, collaboration and publishing.
|
||||
- Explore more features from the `Settings` in the sidebar.
|
||||
|
||||
Let's explore how to collaborate with an image:
|
||||
|
||||
|
||||
|
||||
```JavaScript
|
||||
// We can also write code in a code block
|
||||
let scrambled = "V2VsY29tZSB0byBBRkZpTkU="
|
||||
|
||||
// To-do - function to unscramble
|
||||
```
|
||||
|
||||
And for some future features and updates, let's make a to-do list:
|
||||
|
||||
- [ ] Database Block
|
||||
- [ ] Desktop and mobile clients
|
||||
- [ ] Edgeless update (whiteboard mode)
|
||||
@@ -0,0 +1,31 @@
|
||||
# Welcome to AFFiNE
|
||||
|
||||
# 👋 Quick Start
|
||||
|
||||
> Your content should be as feature-rich as you like. We offer you an easy and simple approach to writing your content, with advanced tools that stay out of the way when you don't need them.
|
||||
|
||||
## AFFiNE - not just a note taking app
|
||||
|
||||
There are lots of apps out there, so why choose AFFiNE?
|
||||
|
||||
AFFiNE is **easy** - _create_ a workspace, _collaborate_ with others and _share_ it online
|
||||
|
||||
AFFiNE is **feature-rich** - offering a wide-range of _blocks_ that _empower_ your docs
|
||||
|
||||
AFFiNE is **privacy focused** - with a local-first approach, keep control of your data
|
||||
|
||||
AFFiNE is **open source** - you can check us out on [GitHub: toeverything/AFFiNE](https://github.com/toeverything/affine)
|
||||
|
||||
## Let's get started!
|
||||
|
||||
- Create a new page and begin editing - in `Paper` or `Edgeless`
|
||||
|
||||
|
||||
|
||||
- Head over to `Workspace Settings` to find your `General` settings, enable multiplayer with `Collaboration`, share your docs with `Publish` and download your data with `Export`
|
||||
|
||||
|
||||
|
||||
## Looking for more support?
|
||||
|
||||
Why not come and join the awesome [AFFiNE Community](https://community.affine.pro)? Whether you want to share new ideas or interact with other like minded individuals - we look forward to having you.
|
||||
@@ -0,0 +1,61 @@
|
||||
# Welcome to the AFFiNE Alpha
|
||||
|
||||
The AFFiNE Alpha is here! You can also view our [Official Website](https://affine.pro/)!
|
||||
|
||||
**What's different in AFFiNE Alpha?**
|
||||
|
||||
1. A much ~smoother editing~ experience, with much ~greater stability~;
|
||||
2. More complete ~Markdown~ support and improved ~keyboard shortcuts~;
|
||||
3. New features such as ~dark mode~;
|
||||
- **Switch between view styles using the** ☀ **and** 🌙.
|
||||
4. ~Clean and modern UI/UX~ design.
|
||||
|
||||
**Looking for Markdown syntax or keyboard shortcuts?**
|
||||
|
||||
- Find the (?) in the bottom right, then the ️⌨️, to view a full list of `Keyboard Shortcuts`
|
||||
|
||||
**Have an enjoyable editing experience !!!** 😃
|
||||
|
||||
Have some feedback or just want to get in touch? Use the (?), then 🎧 to get in touch and join our communities.
|
||||
|
||||
**Still in development**
|
||||
|
||||
There are also some things you should consider about this AFFiNE Alpha including some ~limitations~:
|
||||
|
||||
- Single page editing - currently editing multiple docs/pages is not supported;
|
||||
- Changes are not automatically stored, to save changes you should export your data. Options can be found by going to the top right and finding the `⋮` icon;
|
||||
- Without an import/open feature you are still able to access your data by copying it back in.
|
||||
|
||||
**Keyboard Shortcuts:**
|
||||
|
||||
1. Undo: `⌘+Z` or `Ctrl+Z`
|
||||
2. Redo: `⌘+⇧+Z` or `Ctrl+Shift+Z`
|
||||
3. Bold: `⌘+B` or `Ctrl+B`
|
||||
4. Italic: `⌘+I` or `Ctrl+I`
|
||||
5. Underline: `⌘+U` or `Ctrl+U`
|
||||
6. Strikethrough: `⌘+⇧+S` or `Ctrl+Shift+S`
|
||||
7. Inline code: `⌘+E` or `Ctrl+E`
|
||||
8. Link: `⌘+K` or `Ctrl+K`
|
||||
9. Body text: `⌘+⌥+0` or `Ctrl+Shift+0`
|
||||
10. Heading 1: `⌘+⌥+1` or `Ctrl+Shift+1`
|
||||
11. Heading 2: `⌘+⌥+2` or `Ctrl+Shift+2`
|
||||
12. Heading 3: `⌘+⌥+3` or `Ctrl+Shift+3`
|
||||
13. Heading 4: `⌘+⌥+4` or `Ctrl+Shift+4`
|
||||
14. Heading 5: `⌘+⌥+5` or `Ctrl+Shift+5`
|
||||
15. Heading 6: `⌘+⌥+6` or `Ctrl+Shift+6`
|
||||
16. Increase indent: `Tab`
|
||||
17. Reduce indent: `⇧+Tab` or `Shift+Tab`
|
||||
|
||||
**Markdown Syntax:**
|
||||
|
||||
1. Bold: `**text**`
|
||||
2. Italic: `*text*`
|
||||
3. Underline: `~text~`
|
||||
4. Strikethrough: `~~text~~`
|
||||
5. Inline code: `` `text` ``
|
||||
6. Heading 1: `# text`
|
||||
7. Heading 2: `## text`
|
||||
8. Heading 3: `### text`
|
||||
9. Heading 4: `#### text`
|
||||
10. Heading 5: `##### text`
|
||||
11. Heading 6: `###### text`
|
||||
Reference in New Issue
Block a user