Skip to content

Support for inserting custom blocks #8418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
88250 opened this issue May 31, 2023 · 2 comments
Open

Support for inserting custom blocks #8418

88250 opened this issue May 31, 2023 · 2 comments
Assignees

Comments

@88250
Copy link
Member

88250 commented May 31, 2023

Scenario

Through this feature, the editor can support custom block-level elements, such as the card-style hyperlink, mind map, kanban, etc.

Plugins can implement some user requirements through the ability to customize blocks, so that the scalability of the editor will be better, and the consistency of the extended syntax can be guaranteed.

The difference between custom blocks and widgets is that widgets are independent DOM contexts, which allows widgets to be rendered independently even outside the editor, just like a web page. Custom blocks can only be rendered in the editor, which is more "lightweight".

Syntax design

Similar code block syntax:

;;;info
content
;;;
{ ial }

There are three ways to store raw data:

  1. Store data in the content
  2. Store data in the attributes
  3. By the kernel API (storage/assets)

If the amount of data is large, it is recommended to use 3 to avoid affecting the performance of the editor.

Implementation

  • Lute adds an AST node NodeCustomBlock
  • Lute supports syntax parsing and rendering
  • Protyle overrides the renderer
  • Protyle publishes a rendering event through the event bus
  • An extension (such as a plugin) listens to the event bus and implements the rendering
@SunilRaval90048
Copy link

Custom block-level elements are a feature that allows editors to support the creation of unique block elements with specific styles or functionalities. These elements can include card-style hyperlinks, mind maps, kanban boards, and more. By providing the ability to customize blocks, plugins or extensions can be developed to meet specific user requirements. This enhances the scalability of the editor, allowing it to accommodate a wider range of use cases.

The advantage of custom blocks is that they are rendered within the editor itself, making them more lightweight compared to widgets. Widgets, on the other hand, are independent DOM contexts and can be rendered outside the editor, resembling a standalone web page. Custom blocks are typically designed to be used within the editor environment and may not function or render correctly outside of it.

By supporting custom blocks, an editor can provide flexibility, extensibility, and consistency to its users, allowing them to create rich and diverse content while maintaining a unified syntax and user experience.

@88250 88250 modified the milestones: backlog, 2.9.0 May 31, 2023
88250 added a commit to 88250/lute that referenced this issue Jun 1, 2023

Unverified

This user has not yet uploaded their public signing key.
88250 added a commit that referenced this issue Jun 1, 2023

Unverified

This user has not yet uploaded their public signing key.
88250 added a commit that referenced this issue Jun 1, 2023

Unverified

This user has not yet uploaded their public signing key.
@88250 88250 added Development and removed Feature labels Jun 2, 2023
88250 added a commit to 88250/lute that referenced this issue Jun 2, 2023

Unverified

This user has not yet uploaded their public signing key.
88250 added a commit that referenced this issue Jun 2, 2023

Unverified

This user has not yet uploaded their public signing key.
88250 added a commit that referenced this issue Jun 2, 2023

Unverified

This user has not yet uploaded their public signing key.
@88250 88250 removed this from the 2.9.0 milestone Jun 5, 2023
88250 added a commit to 88250/lute that referenced this issue Jun 5, 2023

Unverified

This user has not yet uploaded their public signing key.
88250 added a commit that referenced this issue Jun 5, 2023

Unverified

This user has not yet uploaded their public signing key.
Vanessa219 added a commit that referenced this issue Jun 5, 2023

Unverified

This user has not yet uploaded their public signing key.
@Wetoria
Copy link

Wetoria commented Apr 29, 2025

自定义块可能需要考虑内部插入protyle的场景,比如叶归的白板,就是会在自定义块中渲染protyle。
由于目前的事件实现方式,导致在自定义块中渲染了protyle以后,交互基本上不可用。

暂时只是提出这一点,后续我增加全面一点的测试以后,再继续补充

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants