Skip to content
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

[SuperEditor][Web][Guides]: Updates guides for version 0.3.0 (#2429) #2430

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
91 changes: 53 additions & 38 deletions doc/website/source/super-editor/guides/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,83 @@
title: Super Editor Quickstart
contentRenderers: ["jinja", "markdown"]
---

# Super Editor Quickstart
Super Editor comes with sane defaults to help you get started with an editor experience, quickly. These defaults include support for images, list items, blockquotes, and horizontal rules, as well as selection gestures, and various keyboard shortcuts.

suragch marked this conversation as resolved.
Show resolved Hide resolved
Super Editor comes with sane defaults to help you get quickly started with an editor experience. These defaults include support for images, list items, blockquotes, and horizontal rules, as well as selection gestures and various keyboard shortcuts.
suragch marked this conversation as resolved.
Show resolved Hide resolved

Drop in the default editor and start editing.

## Add <code>super_editor</code> to your project

To use <code>super_editor</code>, add a dependency in your <code>pubspec.yaml</code>.

```yaml
dependencies:
super_editor: {{ pub.super_editor.version }}
super_editor: ^0.3.0
suragch marked this conversation as resolved.
Show resolved Hide resolved
```

## Display an editor
A visual editor first requires a logical editor. A logical editor holds an underlying document, which the user edits, and a composer to manage the user's selection.

Initialize the logical editor.
Super Editor is both the visual editor that users see and interact with, as well as the logical editor that handles those interactions behind the scenes.

Start by initializing the logical editor and its required components:
suragch marked this conversation as resolved.
Show resolved Hide resolved

```dart
class MyApp extends StatefulWidget {
State<MyApp> createState() => _MyApp();
import 'package:flutter/widgets.dart';
import 'package:super_editor/super_editor.dart';

class MyEditorPage extends StatefulWidget {
const MyEditorPage({super.key});

@override
State<MyEditorPage> createState() => _MyEditorPageState();
}

class _MyApp extends State<MyApp> {
late final Editor _editor;
late final MutableDocument _document;
late final MutableDocumentComposer _composer;

void initState() {
super.initState();

_document = MutableDocument.empty();

_composer = MutableDocumentComposer();

_editor = Editor();
}

void dispose() {
_editor.dispose();
_composer.dispose();
_document.dispose();

super.dispose();
}
class _MyEditorPageState extends State<MyEditorPage> {
late MutableDocument _document;
late MutableDocumentComposer _composer;
late Editor _editor;

@override
void initState() {
super.initState();
_document = MutableDocument.empty();
_composer = MutableDocumentComposer();
_editor = createDefaultDocumentEditor(
suragch marked this conversation as resolved.
Show resolved Hide resolved
document: _document,
composer: _composer,
);
}

@override
void dispose() {
_composer.dispose();
_document.dispose();
super.dispose();
}

// More to come...
}
```

Here are a few points to note:
suragch marked this conversation as resolved.
Show resolved Hide resolved

- The logical editor holds an underlying document and a composer to manage the user's selection.
- The document, <code>MutableDocument</code>, contains a list of nodes for content like text, images, and so on, which users can edit. In this case, you're starting with an empty list.
- <code>createDefaultDocumentEditor</code> is a convenience method from <code>super_editor</code> to give you some of those sane defaults mentioned earlier.

With the logical pieces ready, you can now display a visual editor. Build a <code>SuperEditor</code> widget and return it from your <code>build()</code> method.
With the logical pieces ready, you can now display a visual editor. Add a <code>build()</code> method that returns a <code>SuperEditor</code> widget with its logical editor:

```dart
class _MyApp extends State<MyApp> {
// ...

Widget build(BuildContext context) {
return SuperEditor(
editor: _editor,
);
}
@override
suragch marked this conversation as resolved.
Show resolved Hide resolved
Widget build(BuildContext context) {
return SuperEditor(
editor: _editor,
);
}
```

That's all it takes to get started with your very own editor. Run your app, tap in the editor, and start typing!

The next step is configuration. Check out the other guides for more help.
Check out the other guides for more help.
Loading