Importing documents in Appflowy editor

Appflowy editor version 2.0.0

Release: What's new and improved,

• feature: support Flutter stable channel

• feature: support toggling format style when the selection is collapsed

• feature: optimize editing experience on mobile

• feature: support display number of the numbered list in latin or roman format

• fix: don't rebuild mobile toolbar every time

• fix: solve the left and right key bug

• fix: unable to set toolbar icon theme

Importing data to initialize your Appflowy Editor

Embark on an exhilarating journey into the limitless world of Appflowy, where creativity flourishes. In this guide, we're not just opening the door to your imagination; we're handing you the keys to unlock it. Brace yourself for an adventure that goes beyond borders, as we explore the dynamic initialization of the Appflowy editor using Flutter, diving into the realms of JSON, Markdown, and Quill Delta. Get ready to shape your ideas with unprecedented flexibility and ease. This isn't just a guide; it's an invitation to craft your digital masterpiece effortlessly.

There are currently three supported ways of importing data in the Appflowy:

• From Appflowy document JSON

• From Markdown

• From Quill delta

1. JSON: The Canvas for Creativity

Setting the Stage

To kickstart our journey, let's understand the foundation of dynamic initialization—JSON. JSON serves as the canvas upon which we paint our ideas in the Appflowy editor. The structure is straightforward yet robust, providing a structured playground for your creative expressions.

const document = r'''{
  "document": {
    "type": "page",
    "children": [
      {
        "type": "heading",
        "data": {
            "delta": [{ "insert": "Hello AppFlowy!" }],
            "level": 1
        }
      }
    ]
  }
}''';
final json = Map<String, Object>.from(jsonDecode(document));

In this snippet, we define a simple document with a heading, injecting life into our Appflowy canvas. This is the starting point, but the journey goes far beyond.

2. Markdown: Shaping Content with Simplicity

Beyond Boundaries

Expanding our horizons, we introduce Markdown as a dynamic import option. Markdown provides a familiar syntax for structuring content with simplicity and elegance. Let's seamlessly integrate Markdown into our Appflowy editor.

final markdownDocument = "## Hello AppFlowy!";
final markdownEditorState = EditorState(
  document: Document.fromMarkdown(markdownDocument),
);

Now, the canvas adapts to the expressive nature of Markdown, enabling users to shape their narratives with headers, lists, and emphasis—all with the ease of Markdown syntax

3. Quill Delta: Elevating the Narrative

Crafting Narratives

But our journey doesn’t stop there. Enter Quill Delta—an advanced method of importing data that adds depth and richness to your AppFlowy experience. Quill Delta empowers users to express ideas with detailed attributes, making it an ideal choice for crafting intricate narratives.

final quillDelta = [
  {"insert": "Hello AppFlowy!", "attributes": {"header": 1}},
];
final quillEditorState = EditorState(
  document: Document.fromQuillDelta(quillDelta),
);

In this example, we introduce a Quill Delta representing a heading. The attributes associated with the delta allow for nuanced styling, providing a level of detail beyond traditional text-based approaches.

Conclusion: A Symphony of Possibilities

As we conclude our journey through dynamic initialization in AppFlowy, it becomes evident that the canvas is vast, the tools are diverse, and the possibilities are endless. Whether you start with JSON, infuse simplicity with Markdown, or add richness with Quill Delta, the Appflowy editor becomes a dynamic playground for your creativity.

Ensure to explore the Appflowy rich text editor !

and stay glued for more exciting updates

twitter appflowy