[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/quickstart.md

@@ -2,68 +2,81 @@
 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 and its required components:
 
 ```dart
-class MyApp extends StatefulWidget {
-    State<MyApp> createState() => _MyApp();
-}
+import 'package:flutter/widgets.dart';
+import 'package:super_editor/super_editor.dart';
 
-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 MyEditorPage extends StatefulWidget {
+  const MyEditorPage({super.key});
+
+  @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 MutableDocument _document;
+  late MutableDocumentComposer _composer;
+  late Editor _editor;
+
+  @override
+  void initState() {
+    super.initState();
+    _document = MutableDocument.empty();
+    _composer = MutableDocumentComposer();
+    _editor = createDefaultDocumentEditor(
+      // TODO: Make these optional with reasonable defaults.
+      document: _document,
+      composer: _composer,
+    );
+  }
+
+  @override
+  void dispose() {
+    _composer.dispose();
+    _document.dispose();
+    super.dispose();
+  }
+
+  @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.