docs

docs/docs/getting-started/basic-editor.mdx

@@ -13,37 +13,37 @@ Each example is using [Sandpack](https://sandpack.codesandbox.io/), a live-runni
 
 Let's start with a minimal editor using [Plate](/docs/Plate) and [editableProps](/docs/Plate#editableprops).
 
-import { BasicEditorDefaultSandpack } from './BasicEditorSandpack'
+
+
+
+import {
+  BasicEditorDefaultSandpack,
+  BasicEditorHandlerSandpack,
+  BasicEditorValueSandpack
+} from "./BasicEditorSandpack";
 
 <BasicEditorDefaultSandpack />
 
 ### Value
 
 Let's set the initial value of the editor: one paragraph.
 
-import { BasicEditorValueSandpack } from './BasicEditorSandpack'
-
-<BasicEditorValueSandpack />
-
-:::note
 
-Once you render multiple `Plate`, you'll need to pass unique `id` prop to each.
-This is optional for the first instance.
 
-:::
+<BasicEditorValueSandpack />
 
 ### Change Handler
 
 Now we would like to listen to editor changes so we can save the value somewhere.
 Let's use `onChange` prop.
 
-import { BasicEditorHandlerSandpack } from './BasicEditorSandpack'
+
 
 <BasicEditorHandlerSandpack />
 
 :::note
 
-`Plate` children are rendered just after the editable component.
+`Plate` children are rendered **after** the editable component. Use `firstChildren` prop to render something **before** the editable component.
 
 :::
 

docs/docs/getting-started/basic-plugins.mdx

@@ -18,11 +18,12 @@ Let's use the basic element and basic mark plugins.
 `Plate` is using the `type` property so a plugin can render a node by type.
 :::
 
-import { BasicPluginsDefaultSandpack } from './BasicPluginsSandpack'
+
+import { BasicPluginsComponentsSandpack, BasicPluginsDefaultSandpack } from "./BasicPluginsSandpack";
 
 <BasicPluginsDefaultSandpack />
 
-Everything actually works, by looking at the debug value. However, we didn't provide any `components` to render, so it's using the default (unstyled) ones.
+Everything actually works by looking at the debug value. However, we didn't provide any `components` to render, so it's using the default (unstyled) ones.
 The default element component is a `div` and the default leaf component is a `span`.
 
 :::info
@@ -37,7 +38,7 @@ To plug all the components at once, you can use `createPlugins`:
 - use the first parameter for the `plugins` 
 - use the second parameter for the `components`. In the following example we'll use `createPlateUI()`, which returns all Plate components by plugin key.
 
-import { BasicPluginsComponentsSandpack } from './BasicPluginsSandpack'
+
 
 <BasicPluginsComponentsSandpack />
 

docs/docs/getting-started/installation.md

@@ -10,25 +10,30 @@ You can install all the packages bundled together:
 
 ```bash npm2yarn
 npm install @udecode/plate
+
+# required peer deps
+npm install slate slate-react slate-history slate-hyperscript react react-dom react-dnd react-dnd-html5-backend styled-components
 ```
 
-You will also need these peer dependencies:
+Alternatively you can install only the packages you need as listed in the following sections.
 
 ```bash npm2yarn
-npm install slate slate-react slate-history slate-hyperscript react react-dom styled-components
+# core
+npm install @udecode/plate-core
 
-# if using @udecode/plate-ui-dnd
-npm install react-dnd react-dnd-html5-backend
-```
+# required peer deps
+npm install slate slate-react slate-history slate-hyperscript react react-dom
 
-Alternatively you can install only the packages you need as listed in the following sections.
+# plugins
+npm install @udecode/plate-basic-elements
+# npm install @udecode/plate-...
 
-Additional packages:
-
-```bash npm2yarn
 # if using @udecode/plate-serializer-docx
 npm install @udecode/plate-juice
 
-# Excalidraw
-npm install @udecode/plate-ui-excalidraw
+# if using @udecode/plate-ui
+npm install styled-components
+
+# if using @udecode/plate-ui-dnd
+npm install react-dnd react-dnd-html5-backend
 ```

docs/docs/guides/Plate.md

@@ -3,58 +3,88 @@ slug: /Plate
 title: Plate
 ---
 
-`Plate` is the core component controlling the
-`Slate` props, the `Editable` props and the plate store.
+`Plate` is the core component rendering the editor. It takes care of computing and passing `Slate` and `Editable` props from the `plugins`.
 
-## Plate Props
+`PlateProvider` is the component loading the Plate store. Any component rendered below can have access to the Plate store. If `Plate` does not find any parent `PlateProvider`, it will take care of including it (provider-less mode). 
+
+## `Plate` Props
+
+All the following props are optional.
 
 ### `id`
 
+`symbol | string | number`
+
 - A unique id used to store the editor state by id.
 - Required if rendering multiple `Plate`. Optional otherwise.
 - Default is `'main'`.
 
 ### `children`
 
+`ReactNode`
+
 - The last children rendered inside `Slate`, after `Editable`.
+- To render the first children, use `firstChildren`.
+
+### `decorate`
+
+- See [decorate](#editable-decorate).
 
 ### `disableCorePlugins`
 
+```tsx
+{
+  deserializeAst?: boolean;
+  deserializeHtml?: boolean;
+  eventEditor?: boolean;
+  inlineVoid?: boolean;
+  insertData?: boolean;
+  history?: boolean;
+  react?: boolean;
+  selection?: boolean;
+} | boolean | undefined;
+```
+
 - If `true`, disable all the core plugins.
 - If an object, disable the core plugin properties that are `true` in the object.
 
 ### `editableProps`
 
+`TEditableProps<V>`
+
 - The props for the `Editable` component.
 
 ### `editableRef`
 
+`Ref<HTMLDivElement>`
+
 - Ref to the `Editable` component.
 
 ### `editor`
 
+`E extends PlateEditor<V> = PlateEditor<V>`
+
 - Controlled `editor`.
 - Default is `pipe(createTEditor(), withPlate({ id, plugins }))`.
 
-### `enabled`
-
-- When `true`, Plate will set the editor.
-- When updating to `false`, Plate will remove the editor from the store.
-- When `false`, Plate will not render `Editable`.
-- Default is `true`.
-
 ### `firstChildren`
 
+`ReactNode`
+
 - The first children rendered inside `Slate`, before `Editable`.
 - Slate DOM is not yet resolvable on first render, for that case use `children` instead.
 
 ### `initialValue`
 
+``V extends Value = Value``
+
 - Initial value of the editor.
 - Default is `[{ children: [{ text: '' }]}]`.
 
 ### `normalizeInitialValue`
 
+`boolean`
+
 - When `true`, it will normalize the initial value passed to the `editor` once it gets created.
 - This is useful when adding normalization rules on already existing content.
 - Default is `false`.
@@ -65,11 +95,15 @@ title: Plate
 
 ### `plugins`
 
+`PlatePlugin<PluginOptions, V, E>[]`
+
 - Plate plugins.
 - See [Plugins](/docs/plugins).
 
 ### `renderEditable`
 
+`(editable: ReactNode) => ReactNode`
+
 - Custom `Editable` node.
 - Default is `<Editable {...editableProps} />`.
 
@@ -83,43 +117,67 @@ title: Plate
 
 ### `value`
 
+`V extends Value = Value`
+
 - Editor `value`.
 - Stored in the store on each change (`Editable.onChange`).
 - Except when resetting the editor with `resetEditor`, you should not directly update the value as it would break the history.
 - If you want to update `value` with history support, you should use [Slate transforms](https://docs.slatejs.org/concepts/04-transforms) like `Transforms.setNodes`.
 - Default is `[{ children: [{ text: '' }]}]`.
 
-## Slate Props
+## `PlateProvider` Props
+
+- `id` (optional)
+- `children`
+
+Any of the following `Plate` props should be pulled up into `PlateProvider`:
+
+- `decorate`
+- `disableCorePlugins`
+- `editor`
+- `initialValue`
+- `normalizeInitialValue`
+- `onChange`
+- `renderElement`
+- `renderLeaf`
+- `value`
+
+## Internals
+
+You can read the following to understand the internals of `Plate`, otherwise you can move on to the next guide.
+
+### Slate Props
 
 `Plate` computes the `Slate` props:
 
-### Slate `key`
+#### Slate `key`
 
 - Each time the editor reference updates, a new random key is set
 to `Slate` to unmount and mount again the component.
 
-### Slate `editor`
+#### Slate `editor`
 
 - `Slate` needs an `editor` object to apply its operations on it.
 
-### Slate `onChange`
+#### Slate `onChange`
 
 Callback called by `Slate` on each change:
 1. The new value is stored in plate [store](/docs/store#value).
 2. Pipes `onChange` plugins.
 3. `onChange` prop is called if defined.
 
-## Editable Props
+### Editable Props
 
 In addition to `editableProps`, `Plate` computes the `Editable`
 props if `editor` is defined.
 
-### Editable `decorate`
+#### Editable `decorate`
 
 - Pipes `decorate` plugins.
+- Adds `decorate` prop if defined.
 - Adds `editableProps.decorate` if defined.
 
-### Editable `renderElement`
+#### Editable `renderElement`
 
 - If plugin `isElement` is `true` and if plugin `type` equals `props.element.type`,  it will render an element using the following plugin properties:
   - `inject.props` to inject rendering props.
@@ -129,14 +187,14 @@ props if `editor` is defined.
 - If no plugin is found for a node type, `editableProps.renderElement` is used if defined.
 - If the latter is not defined, `DefaultElement` is used (unstyled `div`).
 
-### Editable `renderLeaf`
+#### Editable `renderLeaf`
 
 - If plugin `isLeaf` is `true` and if plugin `type` equals `props.leaf.type`,  it will render a leaf using the following plugin properties:
   - `inject.props` to inject rendering props.
   - `component` to render the leaf.
 - If no plugin is found for a node type, `editableProps.renderLeaf` is used if defined.
 - If the latter is not defined, `DefaultLeaf` is used (unstyled `span`).
 
-### Handlers
+#### Handlers
 
 - Pipes DOM handlers plugins, e.g. `onDOMBeforeInput`, `onKeyDown`,` etc.

docs/docs/guides/multiple-editors.mdx

@@ -3,12 +3,13 @@ slug: /multiple-editors
 title: Multiple Editors
 ---
 
-Plate support multiple editor instances by using the [id](Plate#id) prop.
+Plate supports multiple editor instances by using the [id](Plate#id) prop.
 
 ### Example
 
 Let's render 3 editors with common heading and balloon toolbars.
 
-import { MultipleEditorsSandpack } from './MultipleEditorsSandpack'
+
+import { MultipleEditorsSandpack } from "./MultipleEditorsSandpack";
 
 <MultipleEditorsSandpack />