mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +00:00
feat: split components (#1530)
This commit is contained in:
Himself65
@@ -68,6 +68,7 @@ const nextConfig = {
|
||||
'@affine/i18n',
|
||||
'@affine/debug',
|
||||
'@affine/env',
|
||||
'@affine/templates',
|
||||
],
|
||||
publicRuntimeConfig: {
|
||||
PROJECT_NAME: process.env.npm_package_name,
|
||||
|
||||
@@ -1,97 +1,2 @@
|
||||
import { config } from '@affine/env';
|
||||
import { BlockHub } from '@blocksuite/blocks';
|
||||
import { EditorContainer } from '@blocksuite/editor';
|
||||
import type { Page } from '@blocksuite/store';
|
||||
import { assertExists } from '@blocksuite/store';
|
||||
import { CSSProperties, useEffect, useRef } from 'react';
|
||||
|
||||
import { BlockSuiteWorkspace } from '../../../shared';
|
||||
|
||||
export type EditorProps = {
|
||||
blockSuiteWorkspace: BlockSuiteWorkspace;
|
||||
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: BlockSuiteWorkspace | undefined;
|
||||
// eslint-disable-next-line no-var
|
||||
var currentPage: Page | 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();
|
||||
// fixme(himself65): remove `globalThis.editor`
|
||||
// @ts-expect-error
|
||||
globalThis.editor = 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);
|
||||
}
|
||||
if (config.exposeInternal) {
|
||||
globalThis.currentBlockSuiteWorkspace = props.blockSuiteWorkspace;
|
||||
globalThis.currentPage = page;
|
||||
}
|
||||
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');
|
||||
assertExists(toolWrapper);
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export type { EditorProps } from '@affine/component/block-suite-editor';
|
||||
export { BlockSuiteEditor } from '@affine/component/block-suite-editor';
|
||||
|
||||
@@ -98,7 +98,15 @@ export const getStaticProps: GetStaticProps<
|
||||
const fs = await import('node:fs/promises');
|
||||
const path = await import('node:path');
|
||||
const markdown: string = await fs.readFile(
|
||||
path.resolve(process.cwd(), 'src', 'templates', `${name}.md`),
|
||||
path.resolve(
|
||||
process.cwd(),
|
||||
'..',
|
||||
'..',
|
||||
'packages',
|
||||
'templates',
|
||||
'src',
|
||||
`${name}.md`
|
||||
),
|
||||
'utf8'
|
||||
);
|
||||
const title = markdown
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
# 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`.
|
||||
@@ -1,66 +0,0 @@
|
||||
# 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!
|
||||
@@ -1,43 +0,0 @@
|
||||
# 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)
|
||||
@@ -1,31 +0,0 @@
|
||||
# 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.
|
||||
@@ -1,61 +0,0 @@
|
||||
# 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`
|
||||
@@ -1,9 +1,8 @@
|
||||
import { DebugLogger } from '@affine/debug';
|
||||
import markdown from '@affine/templates/Welcome-to-AFFiNE.md';
|
||||
import { EditorContainer } from '@blocksuite/editor';
|
||||
import { Page } from '@blocksuite/store';
|
||||
|
||||
import markdown from '../templates/Welcome-to-AFFiNE.md';
|
||||
|
||||
const demoTitle = markdown
|
||||
.split('\n')
|
||||
.splice(0, 1)
|
||||
|
||||
@@ -16,8 +16,7 @@
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "@emotion/react",
|
||||
"incremental": true,
|
||||
"experimentalDecorators": true,
|
||||
"baseUrl": "."
|
||||
"experimentalDecorators": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/types/types.d.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
|
||||
Reference in New Issue
Block a user