Blocks

Blocks is the basic element of AFFiNE. Basically anything you are manipulating would be a block. When you are writing up a article, each line is a block. When you are drawing a diagram on an edgeless canvas, a shape is a block. You can see most of the block types in the slash menu, activated by /.

A block can always be drag and drop to anywhere you like, so it always comes with a drag handle. A block can also be turned into other blocks that you like, for example you can turn a list of to-dos as a kanban, but their “content” and “meta info” is always preserved.

In fact, “block” is rather a abstract idea in terms of its data rather than a concrete thing, what we are dealing with is normally the “views” of blocks. Hence, even though a block can be referenced, embed and linked into different places and views, it is always the same block. More on this sophisticated stuff later. Let’s give you a touch on what blocks we have:

Basic blocks

Basic Blocks are mostly styled rich-text-based, and all support Markdown style shortcut. From the tech perspective, they are derived from virgo in blocksuite, including

• Text

  • Including italic, bold, and underline or strikethrough line style.

• Headings

  • You can set heading from level 1-6. Type in ”#” as the starting character in the front of any basic block turns that line into a heading. You can drag and drop heading into any position but it won’t reposition the following normal text blocks beneath it, as the heading is not a “nested blocks” like list or quote. However, we are planning to make the heading toggleable.

• Code Blocks

  • There are inline code blocks as well as block-level code blocks. Wrap any content with a pair of ``` to start an inline code block, you would see a grey background is added to the content and the font is set to monospaced.

  • To start a block level code block, find any blank line and start with three then press space to convert it to a formal code block with syntax highlighting. You can also give your favorite programming language following the to set the target language for syntax highlighting, such as ````typescript`.

• quote

  • Starting with > in a line to make it a quote. It is usually for quoting certain comments or referenced paragraphs. Current quote block only support wrapping of basic text blocks, but we aims to make it all-blocks compatible. There could also be a “callout” block coming later with more aggresive styling options, but we are still thinking about it.

• divider

  • A huge line that gives your article some space to breath. Insert it by --- and followed by a space.

• lists

  • All of our lists are toggleable, hence there isn’t a “toggle list”. Type of lists includes:

    • bullets list

    • numbered list

    • to-do lists

      • Hint: you select multiple blocks and use the “convert into database” button to convert into database blocks. This works well in particular when you convert a list of to-dos into a kanban.

• cards and links

  • internal link and external link are treated equally

  • bookmarks

  • files

  • web page

All the blocks can be found in your Slash command