feat: upgrade documents

vincentdchan · Nov 24, 2023 · 610b4ec · 610b4ec
1 parent e12177b
commit 610b4ec
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 87 deletions.
diff --git a/packages/blocky-example/docs/api.md b/packages/blocky-example/docs/api.md
@@ -154,6 +154,24 @@ When the user begins to type, the content will be passed to the widget by the me
 
 As usual, there are two ways to implement a follower widget: using the raw API or using Preact.
 
+### React
+
+Use the method `makePreactFollowerWidget`.
+
+```tsx
+import { makeReactFollowerWidget } from "blocky-react";
+
+editor.insertFollowerWidget(
+  makeReactFollowerWidget(({ controller, editingValue, closeWidget }) => (
+    <CommandPanel
+      controller={controller}
+      editingValue={editingValue}
+      closeWidget={closeWidget}
+    />
+  ))
+);
+```
+
 ### VanillaJS
 
 Extend the class `FollowerWidget`.
@@ -178,21 +196,3 @@ export class MyFollowWidget extends FollowerWidget {
 
 editor.insertFollowerWidget(new MyFollowWidget());
 ```
-
-### Preact
-
-Use the method `makePreactFollowerWidget`.
-
-```tsx
-import { makePreactFollowerWidget } from "blocky-preact";
-
-editor.insertFollowerWidget(
-  makePreactFollowerWidget(({ controller, editingValue, closeWidget }) => (
-    <CommandPanel
-      controller={controller}
-      editingValue={editingValue}
-      closeWidget={closeWidget}
-    />
-  ))
-);
-```
diff --git a/packages/blocky-example/docs/builtin-plugins.md b/packages/blocky-example/docs/builtin-plugins.md
@@ -18,32 +18,9 @@ interface TextBlockAttributes {
 Builtin types:
 
 - Checkbox
+- Numbered
 - Bulleted
 - Normal
 - Heading1
 - Heading2
 - Heading3
-
-## Styled text plugin
-
-Add styles of bold/italic/underline.
-
-```typescript
-import makeStyledTextPlugin from "blocky-core/dist/plugins/styledTextPlugin";
-```
-
-## Headings plugin
-
-Add styles of h1/h2/h3.
-
-```typescript
-import makeHeadingsPlugin from "blocky-core/dist/plugins/headingsPlugin";
-```
-
-## Bullet list plugin
-
-Add commands of bullet list.
-
-```typescript
-import makeBulletListPlugin from "blocky-core/dist/plugins/bulletListPlugin";
-```
diff --git a/packages/blocky-example/docs/faq.md b/packages/blocky-example/docs/faq.md
@@ -1 +1,5 @@
 # FAQ
+
+## Is the Blocky editor based on other editors?
+
+No, the Blocky editor is written from scratch using the native DOM API.
diff --git a/packages/blocky-example/docs/get-started.md b/packages/blocky-example/docs/get-started.md
@@ -71,19 +71,26 @@ function makeController(): EditorController {
 Pass the editor to the component.
 
 ```tsx
+import {
+  BlockyEditor,
+  makeReactToolbar,
+  makeImageBlockPlugin,
+  useBlockyController,
+} from "blocky-react";
 import { EditorController } from "blocky-core";
 
-class App extends Component {
-  private editorController: EditorController;
+function App() {
+  const containerRef = useRef<HTMLDivElement>(null);
 
-  constructor(props: {}) {
-    super(props);
-    this.editorController = makeController();
-  }
+  const controller = useBlockyController(() => {
+    return makeController("user", () => containerRef.current!);
+  }, []);
 
-  render() {
-    return <BlockyEditor controller={this.editorController} />;
-  }
+  return (
+    <div ref={containerRef} style={{ width: "100%", display: "flex" }}>
+      <BlockyEditor controller={controller} autoFocus />
+    </div>
+  );
 }
 ```
 
@@ -103,25 +110,50 @@ The data model in Blocky Editor is represented as an XML Document:
 
 Example:
 
-```xml
-<document>
-  <head>
-    <Title />
-  </head>
-  <body>
-    <Text />
-    <Text />
-      <Image src="" />
-    </Text>
-  </body>
-</document>
+```json
+{
+  "t": "document",
+  "title": {
+    "t": "title",
+    "textContent": { "t": "rich-text", "ops": [] }
+  },
+  "body": {
+    "t": "body",
+    "children": [
+      /** Content */
+    ]
+  }
+}
 ```
 
-## Write a block
+## Define a block
 
 You can use the plugin mechanism to extend the editor with
 your custom block.
 
+### Define a block with React
+
+Implementing a block in Preact is more easier.
+
+```tsx
+import { type Editor, type IPlugin } from "blocky-core";
+import { makeReactBlock, DefaultBlockOutline } from "blocky-preact";
+
+export function makeMyBlockPlugin(): IPlugin {
+  return {
+    name: "plugin-name",
+    blocks: [
+      makeReactBlock({
+        name: "BlockName",
+        component: () => (
+          <DefaultBlockOutline>Write the block in Preact</DefaultBlockOutline>
+        ),
+      }),
+    ],
+  };
+}
+```
+
 ### VanillaJS
 
 To implement a block, you need to implement two interfaces.
@@ -188,29 +220,6 @@ export function makeMyBlockPlugin(): IPlugin {
 }
 ```
 
-### Write a block in React
-
-Implementing a block in Preact is more easier.
-
-```tsx
-import { type Editor, type IPlugin } from "blocky-core";
-import { makeReactBlock, DefaultBlockOutline } from "blocky-preact";
-
-export function makeMyBlockPlugin(): IPlugin {
-  return {
-    name: "plugin-name",
-    blocks: [
-      makeReactBlock({
-        name: "BlockName",
-        component: () => (
-          <DefaultBlockOutline>Write the block in Preact</DefaultBlockOutline>
-        ),
-      }),
-    ],
-  };
-}
-```
-
 ### Add the plugin to the controller
 
 ```tsx