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

doc/website/source/super-editor/guides/_data.yaml

@@ -2,6 +2,8 @@ layout: layouts/docs_page.jinja
 
 base_path: super-editor/guides/
 
+super_editor_version: "^0.3.0"
+
 navigation:
   show_contributors: false
 

doc/website/source/super-editor/guides/document-from-markdown.md

@@ -17,13 +17,27 @@ dependencies:
 De-serialize a Markdown `String` with the supplied top-level function.
 
 ```dart
+const markdown = '''
+# Header
+This is a _Super_ Editor!
+''';
+
 final document = deserializeMarkdownToDocument(markdown);
 ```
 
-The de-serialized document is a `MutableDocument`. Check other guides to find out how to use it.
+The de-serialized document is a `MutableDocument`. Add it to your `Editor` similarly to how you did it in the Quickstart guide:
+
+```dart
+_editor = createDefaultDocumentEditor(
+  document: document,
+  composer: MutableDocumentComposer(),
+);
+```
+
+Run that, and you'll see the document rendered on the screen.
 
 ## Serialize Markdown
-Serialize a `Document` to a Markdown `String`.
+You can also go the other direction. Here's how you would serialize a `Document` to a Markdown `String`:
 
 ```dart
 final markdown = serializeDocumentToMarkdown(document);

doc/website/source/super-editor/guides/quickstart.md

@@ -2,68 +2,69 @@
 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.
+Super Editor comes with sane defaults to help you get started quickly 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.
 
 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>.
+## Add `super_editor` to your project
+To use `super_editor`, add a dependency in your `pubspec.yaml`.
 
 ```yaml
 dependencies:
-  super_editor: {{ pub.super_editor.version }}
+  super_editor: {{ super_editor_version }}
 ```
 
 ## 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.
+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. 
 
-Initialize the logical editor.
+Start by initializing the logical editor:
 
 ```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});
 
-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();
-    }
+  @override
+  State<MyEditorPage> createState() => _MyEditorPageState();
 }
-```
-
-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.
-
-```dart
-class _MyApp extends State<MyApp> {
-    // ...
-
-    Widget build(BuildContext context) {
-      return SuperEditor(
-          editor: _editor,
-      );
-    }
+
+class _MyEditorPageState extends State<MyEditorPage> {
+  late Editor _editor;
+
+  @override
+  void initState() {
+    super.initState();
+    _editor = createDefaultDocumentEditor(
+      document: MutableDocument.empty(),
+      composer: MutableDocumentComposer(),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SuperEditor(
+      editor: _editor,
+    );
+  }
 }
 ```
 
+Multiple objects work together to edit documents. A `Document` provides a consistent structure for content within a document. A `DocumentComposer` holds the user's current selection, along with any styles that should be applied to newly typed text. An `Editor` alters the `Document`.
+
+The `Editor` fulfills a number of responsibilities, each of which is configurable. Rather than force every user to fully configure an `Editor`, `super_editor` provides a global factory called `createDefaultDocumentEditor`, which configures an `Editor` with sane defaults. To adjust those defaults, consider copying the implementation of `createDefaultDocumentEditor` and then altering the implementation to meet your needs.
+
+The `SuperEditor` widget creates a user interface for visualizing the `Document`, changing the selection in the `DocumentComposer`, and submitting change requests to the `Editor`. The `SuperEditor` widget is the part that most people think of when they think of "document editing". The `SuperEditor` widget includes many configurable properties, all of which focus on user interactions, e.g., selection and focus policies, gesture interceptors, scroll control, mobile selection handles, and more.
+
 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.
+Continue your Super Editor journey with more beginner guides:
+
+- [Document](TODO)
+- [DocumentComposer](TODO)
+- [Editor](TODO)
+- [SuperEditor](TODO)
+- TODO: other useful next step guides.