B3 Editor

Chinese version: 中文版

B3 (B-3 Bomber) Editor is a sophisticated editor designed for content creation, catering to various formats such as blogs, articles, user stories, and more.

In the documentary "10 Years with Hayao Miyazaki" the esteemed artist (宫崎骏, 宮﨑駿／みやざきはやお) chooses a 3B pencil, deeming conventional ones too inflexible for his creative process. Let us pay homage to his lofty ideals.

Todos: see Roadmap

Online Demo: https://editor.unitmesh.cc/

Features

• Immersive generation. Provides an immersive content generation experience, supporting various formats to allow users to create content comprehensively.
• Local AI capability. Integration of local AI capabilities, such as semantic search, to enhance the editor's intelligent search and recommendation functions.
• Custom action. Allowing users to define variables and other elements for more flexible and tailored content generation.
• Full lifecycle AI. Including interactive tools like the Bubble Menu, Slash Command, Quick Insert, to enhance user experience in editing, searching, and navigation.

Design Principle

• Intelligent Embedding: Integrate artificial intelligence deeply with the user interface, ensuring that AI models are cleverly introduced at various positions in the editor to achieve a more intuitive and intelligent user interaction experience.
• Local Optimization: Pursue an efficient and smooth writing experience by introducing local inference models, which operate within the user's local environment. This includes localized enhancements such as semantic search, local syntax checking, text prediction, etc.
• Context Flexibility: Introduce a context API, providing users with custom prompts and predefined contexts, allowing for more flexible shaping of the editing environment. Through flexible context management, users gain better control over AI-generated content.

Facets as Composable Extension Points

• Composition: Multiple extensions attaching to a given extension point must have their effects combined in a predictable way.
• Precedence: In cases where combining effects is order-sensitive, it must be easy to reason about and control the order of the extensions.
• Grouping: Many extensions will need to attach to a number of extension points, or even pull in other extensions that they depend on.
• Change: The effect produced by extensions may depend on other aspects of the system state, or be explicitly reconfigured.

Usage

Custom Menu examples

const BubbleMenu: PromptAction[] = [
  {
    name: 'Polish',
    i18Name: true,
    template: `You are an assistant helping to polish sentence. Output in markdown format. \n ###${DefinedVariable.SELECTION}###`,
    facetType: FacetType.BUBBLE_MENU,
    outputForm: OutputForm.STREAMING,
  },
  {
    name: 'Similar Chunk',
    i18Name: true,
    template: `You are an assistant helping to find similar content. Output in markdown format. \n ###${DefinedVariable.SELECTION}###`,
    facetType: FacetType.BUBBLE_MENU,
    outputForm: OutputForm.STREAMING,
  },
  {
    name: 'Simplify Content',
    i18Name: true,
    template: `You are an assistant helping to simplify content. Output in markdown format. \n ###${DefinedVariable.SELECTION}###`,
    facetType: FacetType.BUBBLE_MENU,
    outputForm: OutputForm.STREAMING,
    changeForm: ChangeForm.DIFF,
  },
];

Refs:

Tiptap Editor extensions

App:

• Gitlab

Editor:

• https://github.com/fantasticit/magic-editor
• Think Editor's Tiptap extensions

License

TrackChange based on: TrackChangeExtension

This code is distributed under the MIT license. See LICENSE in this directory.