mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-19 02:56:23 +08:00
feat(docs): migrate bs docs
This commit is contained in:
DarkSky
@@ -0,0 +1,8 @@
|
||||
# Attachment Block
|
||||
|
||||
This is a block used to place attachment content. It supports optional style configurations to display as cards of different styles.
|
||||
|
||||
## Reference
|
||||
|
||||
- [`AttachmentBlockSchema`](/api/@blocksuite/blocks/variables/AttachmentBlockSchema.html)
|
||||
- [`AttachmentBlockService`](/api/@blocksuite/blocks/classes/AttachmentBlockService.html)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Code Block
|
||||
|
||||
This is a block used to display code snippets. The code highlighting of different languages can be set through the `language` field.
|
||||
|
||||
## Reference
|
||||
|
||||
- [`CodeBlockSchema`](/api/@blocksuite/blocks/variables/CodeBlockSchema.html)
|
||||
@@ -0,0 +1,10 @@
|
||||
# Database Block
|
||||
|
||||
This is a block used to edit and display a data grid.
|
||||
|
||||
In a database block, each row is a standard paragraph block or list block. It supports adding different types of columns to rows and displaying a kanban view based on column information.
|
||||
|
||||
## Reference
|
||||
|
||||
- [`DatabaseBlockSchema`](/api/@blocksuite/blocks/variables/DatabaseBlockSchema.html)
|
||||
- [`DatabaseBlockService`](/api/@blocksuite/blocks/classes/DatabaseBlockService.html)
|
||||
@@ -0,0 +1,7 @@
|
||||
# Divider Block
|
||||
|
||||
This is a block used to display a divider line. It can be quickly obtained by typing `---` followed by pressing the space bar.
|
||||
|
||||
## Reference
|
||||
|
||||
- [`DividerBlockSchema`](/api/@blocksuite/blocks/variables/DividerBlockSchema.html)
|
||||
@@ -0,0 +1,11 @@
|
||||
# Embed Blocks
|
||||
|
||||
These are blocks used to embed complex external content. The BlockSuite framework allows for the quick creation of embed blocks through [embed helper](../../guide/working-with-block-tree#defining-new-blocks).
|
||||
|
||||
Existing embed blocks that support BlockSuite document content include `EmbedLinkedDoc` and `EmbedSyncedDoc`, please refer to [link blocks](./link-blocks) for more details.
|
||||
|
||||
## Reference
|
||||
|
||||
- [`EmbedYoutubeBlockProps`](/api/@blocksuite/blocks/type-aliases/EmbedYoutubeBlockProps.html)
|
||||
- [`EmbedFigmaBlockProps`](/api/@blocksuite/blocks/type-aliases/EmbedFigmaBlockProps.html)
|
||||
- [`EmbedGithubBlockProps`](/api/@blocksuite/blocks/type-aliases/EmbedGithubBlockProps.html)
|
||||
@@ -0,0 +1,11 @@
|
||||
# Frame Block
|
||||
|
||||
This is a block used to mark a canvas area in the edgeless editor.
|
||||
|
||||
When dragging the frame, the elements placed inside the frame move together with the frame. Note that there are no other blocks inside the frame. This association effect is based on the geometric area covered by the frame, not on a nested relationship at the model layer.
|
||||
|
||||
In presentation mode, the viewport will be moved to focus the frames one after another.
|
||||
|
||||
## Reference
|
||||
|
||||
- [`FrameBlockSchema`](/api/@blocksuite/blocks/variables/FrameBlockSchema.html)
|
||||
@@ -0,0 +1,8 @@
|
||||
# Image Block
|
||||
|
||||
This is a block used to display image content. It supports scaling in both the [page editor](../editors/page-editor) and the [edgeless editor](../editors/edgeless-editor), as well as an optional `caption`.
|
||||
|
||||
## Reference
|
||||
|
||||
- [`ImageBlockSchema`](/api/@blocksuite/blocks/variables/ImageBlockSchema.html)
|
||||
- [`ImageBlockService`](/api/@blocksuite/blocks/classes/ImageBlockService.html)
|
||||
@@ -0,0 +1,14 @@
|
||||
# Link Blocks
|
||||
|
||||
These are blocks used to display link content in various ways.
|
||||
|
||||
- The `Bookmark` block supports displaying general web content with optional style configurations to display as cards of different styles.
|
||||
- The `EmbedLinkedDoc` block supports embedding other BlockSuite documents as linked cards, also with various style configurations.
|
||||
- The `EmbedSyncedDoc` block supports embedding other BlockSuite documents as editable sub-documents, based on the first-party transclusion support provided by BlockSuite.
|
||||
|
||||
## Reference
|
||||
|
||||
- [`BookmarkBlockSchema`](/api/@blocksuite/blocks/variables/BookmarkBlockSchema.html)
|
||||
- [`BookmarkBlockService`](/api/@blocksuite/blocks/classes/BookmarkBlockService.html)
|
||||
- [`EmbedLinkedDocBlockProps`](/api/@blocksuite/blocks/type-aliases/EmbedLinkedDocBlockProps.html)
|
||||
- [`EmbedSyncedDocBlockProps`](/api/@blocksuite/blocks/type-aliases/EmbedSyncedDocBlockProps.html)
|
||||
@@ -0,0 +1,12 @@
|
||||
# List Block
|
||||
|
||||
This is a block used to model list content with nesting support.
|
||||
|
||||
- When the `type` of this block is `bulleted`, it displays as bulleted list items.
|
||||
- When the `type` of this block is `numbered`, it displays as numbered list items.
|
||||
- When the `type` of this block is `todo`, it displays as todo list items.
|
||||
|
||||
## Reference
|
||||
|
||||
- [`ListBlockSchema`](/api/@blocksuite/blocks/variables/ListBlockSchema.html)
|
||||
- [`ListBlockService`](/api/@blocksuite/blocks/classes/ListBlockService.html)
|
||||
@@ -0,0 +1,14 @@
|
||||
# Note Block
|
||||
|
||||
This is a container block used to place flowing document content.
|
||||
|
||||
If a document is entirely edited within the [page editor](../editors/page-editor), then all of its text content will be placed in a single note block. However, in the [edgeless editor](../editors/edgeless-editor), it allows for placing multiple notes on the canvas, and also for splitting the content of a single note block into multiple different notes.
|
||||
|
||||
In the page editor, the display order of notes is determined by the arrangement order of the note block in the root block `children`. But in the edgeless editor, the position of the note block is determined by the `xywh` field, and its layering with other graphical content is determined by the `index` field. This allows it to be positioned on the whiteboard along with other graphical content.
|
||||
|
||||
|
||||
|
||||
## Reference
|
||||
|
||||
- [`NoteBlockSchema`](/api/@blocksuite/blocks/variables/NoteBlockSchema.html)
|
||||
- [`NoteBlockService`](/api/@blocksuite/blocks/classes/NoteBlockService.html)
|
||||
@@ -0,0 +1,14 @@
|
||||
# Paragraph Block
|
||||
|
||||
This is a block used to place text content. It's generally placed inside a note block, but also supports nesting by pressing the tab key.
|
||||
|
||||
- When the `type` value of this block is `text`, it displays as a sequence of texts.
|
||||
- When the `type` value of this block is `h1` / `h2` / `h3` / `h4` / `h5` / `h6`, it displays as titles of different levels.
|
||||
- When the `type` value of this block is `quote`, it displays as a quote.
|
||||
|
||||
|
||||
|
||||
## Reference
|
||||
|
||||
- [`ParagraphBlockSchema`](/api/@blocksuite/blocks/variables/ParagraphBlockSchema.html)
|
||||
- [`ParagraphBlockService`](/api/@blocksuite/blocks/classes/ParagraphBlockService.html)
|
||||
@@ -0,0 +1,13 @@
|
||||
# Root Block
|
||||
|
||||
This is the root node of the document tree, and its view implementation becomes the top-level UI of the editor.
|
||||
|
||||
For instance, the [page editor](../editors/page-editor) and the [edgeless editor](../editors/edgeless-editor) implement two different views for the root block. Generally, content (leaf nodes) is not placed directly in the root block. Its direct children are usually at least one [note block](./note-block) and one optional [surface block](./surface-block). Rich text content like paragraphs and lists are generally placed in the note blocks, while graphical content is placed in the surface block.
|
||||
|
||||
|
||||
|
||||
## Reference
|
||||
|
||||
- [`RootBlockSchema`](/api/@blocksuite/blocks/variables/RootBlockSchema.html)
|
||||
- [`PageRootService`](/api/@blocksuite/blocks/classes/PageRootService.html)
|
||||
- [`EdgelessRootService`](/api/@blocksuite/blocks/classes/EdgelessRootService.html)
|
||||
@@ -0,0 +1,13 @@
|
||||
# Surface Block
|
||||
|
||||
This is a container used to render graphical content.
|
||||
|
||||
- In documents opened with the [edgeless editor](../editors/edgeless-editor), this block is required.
|
||||
- Its `elements` field can contain a large number of `CanvasElement`s. These elements use HTML5 canvas for rendering and can be interleaved with note blocks, with automatically flattening to use the fewest canvas contexts.
|
||||
|
||||
|
||||
|
||||
## Reference
|
||||
|
||||
- [`SurfaceBlockSchema`](/api/@blocksuite/blocks/variables/SurfaceBlockSchema.html)
|
||||
- [`SurfaceBlockService`](/api/@blocksuite/blocks/classes/SurfaceBlockService.html)
|
||||
@@ -0,0 +1,119 @@
|
||||
# Edgeless Data Structure
|
||||
|
||||
## Fundamentals
|
||||
|
||||
In BlockSuite, documents in edgeless mode are isomorphic to those in page mode. Edgeless documents are also composed of blocks, with no data conversion occurring during mode switching.
|
||||
|
||||
By default, the root block of a rich text document contains a single note block child, with a block tree structure like this:
|
||||
|
||||
```
|
||||
Root Block
|
||||
Note Block
|
||||
Paragraph Block 1
|
||||
Paragraph Block 2
|
||||
Paragraph Block 3
|
||||
```
|
||||
|
||||
In the edgeless editor, you can easily split the document into multiple note cards, which can be positioned separately on the edgeless canvas, resulting in this block tree structure:
|
||||
|
||||
```
|
||||
Root Block
|
||||
Note Block
|
||||
Paragraph Block 1
|
||||
Note Block
|
||||
Paragraph Block 2
|
||||
Paragraph Block 3
|
||||
```
|
||||
|
||||
## Surface Block and Surface Element
|
||||
|
||||
Edgeless mode introduces additional editable content such as brushes, connectors, and geometric shapes. To accommodate this, the edgeless editor implements a **surface block** as a container for whiteboard graphical content. Documents compatible with both edgeless and page modes have a default surface block as the first child of the root block:
|
||||
|
||||
```
|
||||
Root Block
|
||||
Surface Block
|
||||
Note Block
|
||||
Paragraph Block 1
|
||||
Note Block
|
||||
Paragraph Block 2
|
||||
Paragraph Block 3
|
||||
```
|
||||
|
||||
The surface block can store two types of content:
|
||||
|
||||
- The `block.children` field can contain edgeless-specific card blocks, such as embed-style links to YouTube, Figma, or other BlockSuite documents.
|
||||
- Graphical content like brushstrokes and polygons are modeled as `SurfaceElement`s and stored in the `block.elements` field. Common element types include `BrushElement`, `ShapeElement`, and `ConnectorElement`.
|
||||
|
||||
A typical edgeless document structure with a surface block might look like this:
|
||||
|
||||
```
|
||||
Root Block
|
||||
Surface Block
|
||||
Embed Block
|
||||
Shape Element
|
||||
Brush Element
|
||||
Note Block
|
||||
Paragraph Block 1
|
||||
Note Block
|
||||
Paragraph Block 2
|
||||
Paragraph Block 3
|
||||
```
|
||||
|
||||
## Surface Block as Parent Block
|
||||
|
||||
With the introduction of the surface block, blocks can have two potential storage locations:
|
||||
|
||||
- Blocks used exclusively in the edgeless editor without nesting can be stored as direct children of the surface block.
|
||||
- Other blocks are stored outside the surface block, as in rich text mode. These blocks can be reused between rich text and edgeless editor modes and allow complex nesting structures.
|
||||
|
||||
BlockSuite allows specific block types to appear in both locations. For example:
|
||||
|
||||
```
|
||||
Root Block
|
||||
Surface Block
|
||||
Image Block 1
|
||||
Note Block
|
||||
Image Block 2
|
||||
Image Block 3
|
||||
```
|
||||
|
||||
In the example above, the image blocks appear under both the note block and the surface block. The edgeless editor can display all three image blocks simultaneously. The key difference is that the image with the surface block as its parent can be placed anywhere on the whiteboard, while the images within the note block must be arranged from top to bottom according to the note's internal layout.
|
||||
|
||||
## Block and Element Hierarchy
|
||||
|
||||
Although the block tree shows node adjacency, this relationship doesn't determine the content hierarchy in the whiteboard, which needs to render both blocks and surface elements.
|
||||
|
||||
Instead, BlockSuite allows specific block types to determine hierarchy order along with surface elements, including:
|
||||
|
||||
- Note blocks
|
||||
- All children of the surface block
|
||||
|
||||
Blocks with adjustable hierarchy dynamically receive an `index` field. Since all surface elements also have this field, comparing the `index` values of these indexable blocks and elements uniquely determines the edgeless content hierarchy.
|
||||
|
||||
In this example:
|
||||
|
||||
```
|
||||
Root Block
|
||||
Surface Block
|
||||
Brush Element
|
||||
Image Block 1
|
||||
Note Block
|
||||
Paragraph Block 1
|
||||
Paragraph Block 2
|
||||
Image Block 2
|
||||
```
|
||||
|
||||
The note block and image block 1 have `index` fields and can adjust their hierarchy order along with the brush element. The paragraph blocks and image block 2 within the note block are rendered as children of the note block and don't intersect with surface elements hierarchically.
|
||||
|
||||
All indexable blocks and surface elements have an `xywh` field, determining their absolute position on the edgeless canvas.
|
||||
|
||||
> This hierarchy determination technique is called fractional indexing, [also used by Figma](https://www.figma.com/blog/realtime-editing-of-ordered-sequences/).
|
||||
|
||||
## Frames and Groups
|
||||
|
||||
There are two ways to associate blocks and/or elements in the edgeless editor: **frames** and **groups**.
|
||||
|
||||
- Frame blocks are surface-only blocks with specific `xywh` dimensions. Dragging a frame moves all blocks and elements within its `xywh` area, establishing a dynamic association based on geometric region. Multiple frames can overlap positionally but cannot nest in the block tree.
|
||||
- Group elements are special surface elements without inherent dimensions, determined by their children. Groups store the IDs of all child nodes. All indexable blocks and elements can be group children, and groups can nest multiple levels.
|
||||
|
||||
Developers can extend these association mechanisms to create more dynamic nesting relationships, implementing element types like `MindmapElement` with more dynamic linking effects.
|
||||
@@ -0,0 +1,54 @@
|
||||
# Edgeless Editor
|
||||
|
||||
This editor component offers a canvas with infinite logical dimensions, suitable for whiteboard and graphic editing.
|
||||
|
||||
<iframe src="https://try-blocksuite.vercel.app/?init&mode=edgeless" frameborder="no" width="100%" height="500"></iframe>
|
||||
|
||||
## Features
|
||||
|
||||
- All the rich text editing capabilities in the [page editor](./page-editor).
|
||||
- `CanvasElement` rendered to HTML5 canvas, including shapes, brushes, connectors, and text.
|
||||
- Use of [frames](../blocks/frame-block) to denote canvas areas of any size.
|
||||
- Presentation mode achieved by switching between multiple frames in sequence.
|
||||
- Nestable group elements.
|
||||
- Various [link cards](../blocks/link-blocks) that can be inserted on top of the canvas.
|
||||
- Customizable toolbars and other widgets.
|
||||
|
||||
Moreover, this editor inherits capabilities built into the BlockSuite framework, including:
|
||||
|
||||
- Per-user undo/redo stack
|
||||
- Real-time collaboration
|
||||
- [Document streaming](../../guide/data-synchronization#document-streaming)
|
||||
|
||||
Notably, the BlockSuite framework allows runtime compatibility between the page editor and the edgeless editor, beyond mere static file format compatibility. This means you can dynamically attach the same doc object to different instances of the page editor and edgeless editor.
|
||||
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { EdgelessEditor } from '@blocksuite/presets';
|
||||
|
||||
const editor = new EdgelessEditor();
|
||||
```
|
||||
|
||||
## Integration
|
||||
|
||||
Like all BlockSuite editors, the editor UI is entirely composed of the combination of [block specs](../../guide/block-spec). A specialized [root block](../blocks/root-block) spec serves as the root node of the document and implements all top-level document UI, with main widgets also mounted on the root block. Accordingly, commonly used editing APIs are provided in the root service.
|
||||
|
||||
Specifically, the canvas element and some blocks that appear on the top layer of the canvas are located on the [surface block](../blocks/surface-block). Therefore, operating the edgeless editor also requires accessing the model and service mounted on this block.
|
||||
|
||||
To integrate and customize this editor, you can:
|
||||
|
||||
- [Customize new block specs](../../guide/working-with-block-tree#defining-new-blocks)
|
||||
- 🚧 Configure widgets and customize new widgets
|
||||
- 🚧 Use UI components from any framework
|
||||
|
||||
🚧 We are planning support for more frameworks.
|
||||
|
||||
## Reference
|
||||
|
||||
- [`EdgelessEditor`](/api/@blocksuite/presets/classes/EdgelessEditor.html)
|
||||
- [`EdgelessRootService`](/api/@blocksuite/blocks/classes/EdgelessRootService.html)
|
||||
- [`SurfaceBlockModel`](/api/@blocksuite/blocks/classes/SurfaceBlockModel.html)
|
||||
- [`SurfaceBlockService`](/api/@blocksuite/blocks/classes/SurfaceBlockService.html)
|
||||
|
||||
Since `EdgelessEditor` is a native web component, all DOM-related properties are inherited.
|
||||
@@ -0,0 +1,51 @@
|
||||
# Doc Editor
|
||||
|
||||
This editor component is designed for conventional flow content editing, offering functionalities aligned with rich text editors based on the frameworks like ProseMirror or Slate.
|
||||
|
||||
<iframe src="https://try-blocksuite.vercel.app/?init" frameborder="no" width="100%" height="500"></iframe>
|
||||
|
||||
## Features
|
||||
|
||||
- [Text](../blocks/paragraph-block), [lists](../blocks/list-block), and [code](../blocks/code-block) blocks, along with customizable inline elements.
|
||||
- [Images](../blocks/image-block), [attachments](../blocks/attachment-block), and customizable [embed](../blocks/embed-blocks) blocks.
|
||||
- [Database](../blocks/database-block) block that provides tables with kanban view support.
|
||||
- Bidirectional [links](../blocks/link-blocks) between documents and transclusion similar to Notion synced blocks.
|
||||
- Two types of selections, including native text selection and block-level selection.
|
||||
- Cross-block dragging and multiple widget toolbars.
|
||||
|
||||
Moreover, this editor inherits capabilities built into the BlockSuite framework, including:
|
||||
|
||||
- Per-user undo/redo stack
|
||||
- Real-time collaboration
|
||||
- [Document streaming](../../guide/data-synchronization#document-streaming)
|
||||
|
||||
Notably, the BlockSuite framework allows runtime compatibility between the page editor and the edgeless editor, beyond mere static file format compatibility. This means you can dynamically attach the same doc object to different instances of the page editor and edgeless editor.
|
||||
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { PageEditor } from '@blocksuite/presets';
|
||||
|
||||
const editor = new PageEditor();
|
||||
```
|
||||
|
||||
Assigning a [`doc`](../../guide/working-with-block-tree#block-tree-basics) object to `editor.doc` will attach a block tree to the editor, and [`editor.host`](../../guide/working-with-block-tree#block-tree-in-editor) contains the API surface for editing. The [quick start](../../guide/quick-start) guide also serves as an online playground.
|
||||
|
||||
## Integration
|
||||
|
||||
Like all BlockSuite editors, the editor UI is entirely composed of the combination of [block specs](../../guide/block-spec). A specialized [root block](../blocks/root-block) spec serves as the root node of the document and implements all top-level document UI, with main widgets also mounted on the Accordingly, commonly used editing APIs are provided in the page service.
|
||||
|
||||
To integrate and customize this editor, you can:
|
||||
|
||||
- [Customize new block specs](../../guide/working-with-block-tree#defining-new-blocks)
|
||||
- 🚧 Configure widgets and customize new widgets
|
||||
- 🚧 Use UI components from any framework
|
||||
|
||||
🚧 We are planning support for more frameworks.
|
||||
|
||||
## Reference
|
||||
|
||||
- [`PageEditor`](/api/@blocksuite/presets/classes/PageEditor.html)
|
||||
- [`PageRootService`](/api/@blocksuite/blocks/classes/PageRootService.html)
|
||||
|
||||
Since `PageEditor` is a native web component, all DOM-related properties are inherited.
|
||||
@@ -0,0 +1,7 @@
|
||||
# Bi-Directional Link Panel
|
||||
|
||||
This component is an external panel for visualizing the bi-directional links related to the document.
|
||||
|
||||
::: info
|
||||
🚧 The comprehensive document of this component is still a work in progress.
|
||||
:::
|
||||
@@ -0,0 +1,7 @@
|
||||
# Copilot Panel
|
||||
|
||||
This component is an external panel for AI copilot.
|
||||
|
||||
::: info
|
||||
🚧 The comprehensive document of this component is still a work in progress.
|
||||
:::
|
||||
@@ -0,0 +1,9 @@
|
||||
# Doc Title
|
||||
|
||||
This component is used for displaying an editable doc title.
|
||||
|
||||
|
||||
|
||||
::: info
|
||||
🚧 The comprehensive document of this component is still a work in progress.
|
||||
:::
|
||||
@@ -0,0 +1,7 @@
|
||||
# Frame Panel
|
||||
|
||||
This component is an external panel for visualizing the [frames](../blocks/frame-block) inside the [surface block](../blocks/surface-block).
|
||||
|
||||
::: info
|
||||
🚧 The comprehensive document of this component is still a work in progress.
|
||||
:::
|
||||
@@ -0,0 +1,9 @@
|
||||
# Outline Panel
|
||||
|
||||
This component is an external panel for visualizing the outline of the document.
|
||||
|
||||
|
||||
|
||||
::: info
|
||||
🚧 The comprehensive document of this component is still a work in progress.
|
||||
:::
|
||||
@@ -0,0 +1,30 @@
|
||||
# BlockSuite Components Overview
|
||||
|
||||
In a nutshell, BlockSuite categorizes components into the following types:
|
||||
|
||||
- **Editor** - A container used to present document content in various forms. Different editors are composed of different sets of [block specs](../guide/block-spec).
|
||||
- **Block** - The atomic unit for constructing document within the editor. Once a [block spec](../guide/block-spec) is registered, multiple corresponding block instances can be rendered in the editor.
|
||||
- **Widget** - Auxiliary components that contextually show up in the editor on demand, such as a search bar or color picker. Every block can define its own widgets.
|
||||
- **Fragment** - External components outside the editor. They share the document with the editor but have their own lifecycles.
|
||||
|
||||
|
||||
|
||||
These BlockSuite components are all implemented based on web components. For a more detailed description of the relationships between these components, please refer to the [component types](../guide/component-types) document.
|
||||
|
||||
## Extension and Customization
|
||||
|
||||
Based on the components API, BlockSuite allows:
|
||||
|
||||
- [Defining custom blocks](../guide/working-with-block-tree#defining-new-blocks) compatible with multiple editors.
|
||||
- Configuring, extending, and replacing widgets within the editor, such as various toolbars, popups, and menus.
|
||||
- Reusing components outside of the editor, such as panels for comments, outlines, or even AI copilots.
|
||||
|
||||
All BlockSuite components only need to be attached to the BlockSuite document model for use. For information on how to interact with this block tree, please refer to the [usage guide](../guide/working-with-block-tree) for the BlockSuite framework.
|
||||
|
||||
## Integration
|
||||
|
||||
Regarding how BlockSuite components can be used in AFFiNE and other applications, here are some quick takeaways:
|
||||
|
||||
- The BlockSuite editor consists of various block specs, each of which can optionally include some widgets. Therefore, **when you are reusing an existing first-party BlockSuite editor, you are actually reusing a preset of blocks and widgets**. Default editors are fine-tuned presets for AFFiNE, but you are free to compose you own presets.
|
||||
- Currently, all BlockSuite components are native web components, but we plan to provide official support for multiple frameworks.
|
||||
- BlockSuite does not have special variants for AFFiNE, [we eat our own dogfood](https://gist.github.com/chitchcock/1281611).
|
||||
@@ -0,0 +1,7 @@
|
||||
# Drag Handle
|
||||
|
||||
This widget is used for intuitive block-level dragging.
|
||||
|
||||
::: info
|
||||
🚧 The comprehensive document of related components is still a work in progress.
|
||||
:::
|
||||
@@ -0,0 +1,7 @@
|
||||
# Format Bar
|
||||
|
||||
This widget is used for inline text content formatting and quick actions.
|
||||
|
||||
::: info
|
||||
🚧 The comprehensive document of related components is still a work in progress.
|
||||
:::
|
||||
@@ -0,0 +1,17 @@
|
||||
# Pie Menu
|
||||
|
||||
The Pie Menu widget offers users a visually intuitive and efficient way to access various functions through a single radial menu activated by a single key press. Inspired by Blender's interface, this widget offers enhanced functionality for streamlined workflow.
|
||||
|
||||
# Usage
|
||||
|
||||
- Trigger Key: Each menu is associated with a trigger key to open it. To activate a menu, press and hold the trigger key.
|
||||
|
||||
- Navigation: While holding the trigger key, move the cursor towards the desired action within the pie menu. Hovering over a segment of the pie menu highlights that action. Release the trigger key to select the highlighted action.
|
||||
|
||||
- Submenu: Submenus can be accessed by hovering over the submenu node (with a blue dot) within the pie menu. This allows for nested menu structures for organizing functions. To close a submenu just hover over the desired center node
|
||||
|
||||
- Keeping Menu Open: If the trigger key is released before the "SELECT_ON_RELEASE_TIMEOUT" threshold, the pie menu remains open, allowing for multiple selections without reopening the menu.
|
||||
|
||||
- Shortcut Selection: The numeric keys (0-9) correspond to actions within the pie menu. Pressing a numeric key selects the action associated with that number directly active (this does not work for color nodes).
|
||||
|
||||
Enhance your workflow by utilizing the Pie Menu widget for swift and intuitive access to various functions with minimal keystrokes.
|
||||
@@ -0,0 +1,7 @@
|
||||
# Slash Menu
|
||||
|
||||
This widget is used for context menu triggered by slash (`/`) commands.
|
||||
|
||||
::: info
|
||||
🚧 The comprehensive document of related components is still a work in progress.
|
||||
:::
|
||||
Reference in New Issue
Block a user