diff --git a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts
index 13d75214..6789682e 100644
--- a/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts
+++ b/docs/src/demos/Experiments/Annotation/extension/AnnotationState.ts
@@ -19,9 +19,17 @@ export class AnnotationState {
constructor(options: AnnotationStateOptions) {
this.options = options
+
+ // TODO: Observe Y.js changes and re-render decorations
+ // this.options.map.observe(e => {
+ // console.log('e', e)
+ // })
}
findAnnotation(id: number) {
+ // TODO: Get from Y.js?
+ // this.decorations.get(id)
+
const current = this.decorations.find()
for (let i = 0; i < current.length; i += 1) {
diff --git a/docs/src/demos/Experiments/Color/extension/Color.ts b/docs/src/demos/Experiments/Color/extension/Color.ts
deleted file mode 100644
index 0c5e98c6..00000000
--- a/docs/src/demos/Experiments/Color/extension/Color.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-// @ts-nocheck
-import { Extension } from '@tiptap/core'
-import { Decoration, DecorationSet } from 'prosemirror-view'
-import { Plugin } from 'prosemirror-state'
-
-function detectColors(doc) {
- const hexColor = /(#[0-9a-f]{3,6})\b/ig
- const results = []
- const decorations: [any?] = []
-
- doc.descendants((node: any, position: any) => {
- if (!node.isText) {
- return
- }
-
- let matches
-
- // eslint-disable-next-line
- while (matches = hexColor.exec(node.text)) {
- results.push({
- color: matches[0],
- from: position + matches.index,
- to: position + matches.index + matches[0].length,
- })
- }
- })
-
- results.forEach(issue => {
- decorations.push(Decoration.inline(issue.from, issue.to, {
- class: 'color',
- style: `--color: ${issue.color}`,
- }))
- })
-
- return DecorationSet.create(doc, decorations)
-}
-
-export const Color = Extension.create({
- name: 'color',
-
- addProseMirrorPlugins() {
- return [
- new Plugin({
- state: {
- init(_, { doc }) {
- return detectColors(doc)
- },
- apply(transaction, oldState) {
- return transaction.docChanged
- ? detectColors(transaction.doc)
- : oldState
- },
- },
- props: {
- decorations(state) {
- return this.getState(state)
- },
- },
- }),
- ]
- },
-})
-
-declare module '@tiptap/core' {
- interface AllExtensions {
- Color: typeof Color,
- }
-}
diff --git a/docs/src/demos/Experiments/Color/extension/index.ts b/docs/src/demos/Experiments/Color/extension/index.ts
deleted file mode 100644
index d73a0a1b..00000000
--- a/docs/src/demos/Experiments/Color/extension/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { Color } from './Color'
-
-export * from './Color'
-export default Color
diff --git a/docs/src/demos/Experiments/Color/index.vue b/docs/src/demos/Experiments/Color/index.vue
deleted file mode 100644
index a4692831..00000000
--- a/docs/src/demos/Experiments/Color/index.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md
index ecc42f16..fbc63309 100644
--- a/docs/src/docPages/experiments.md
+++ b/docs/src/docPages/experiments.md
@@ -3,12 +3,11 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
## New
* [Linter](/experiments/linter)
-* [Comments](/experiments/comments)
-* [Color](/experiments/color)
-* [Commands](/experiments/commands)
-* [Embeds](/experiments/embeds)
* [Multiple editors](/experiments/multiple-editors)
-* [Details](/experiments/details)
+* [@tiptap/extension-slash-command?](/experiments/commands)
+* [@tiptap/extension-iframe?](/experiments/embeds)
+* [@tiptap/extension-toggle-list?](/experiments/details)
+* [@tiptap/extension-collaboration-annotation?](/experiments/comments)
## Waiting for approval
* [@tiptap/extension-placeholder](/experiments/placeholder)
diff --git a/docs/src/docPages/experiments/color.md b/docs/src/docPages/experiments/color.md
deleted file mode 100644
index 5cc46027..00000000
--- a/docs/src/docPages/experiments/color.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Color
-
-⚠️ Experiment
-
-
diff --git a/docs/src/docPages/guide/configuration.md b/docs/src/docPages/guide/configuration.md
index 0cefd0b8..1c43fd9b 100644
--- a/docs/src/docPages/guide/configuration.md
+++ b/docs/src/docPages/guide/configuration.md
@@ -37,8 +37,27 @@ This will do the following:
5. make the text editable (but that’s the default anyway), and
6. disable the loading of [the default CSS](https://github.com/ueberdosis/tiptap-next/tree/main/packages/core/src/style.ts) (which is not much anyway).
-## Configure extensions
-A lot of the extension can be configured, too. Add an `.configure()` to the extension and pass an object to it. The following example will disable the default heading levels 4, 5 and 6:
+## Nodes, marks and extensions
+Most features are packed into [nodes](/api/nodes), [marks](/api/marks) and [extensions](/api/extensions). Import what you need and pass them as an Array to the editor and you are good to go. Here is the minimal setup with only three extensions:
+
+```js
+import { Editor } from '@tiptap/core'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+
+new Editor({
+ element: document.querySelector('.element'),
+ extensions: [
+ Document,
+ Paragraph,
+ Text,
+ ],
+})
+```
+
+### Configure an extensions
+Most extensions can be configured. Add a `.configure()` to pass an object to it. The following example will disable the default heading levels 4, 5 and 6:
```js
import { Editor } from '@tiptap/core'
@@ -60,4 +79,57 @@ new Editor({
})
```
-Have a look at the documentation of the extension you’re using to learn more about their settings.
+Have a look at the documentation of the extension you use to learn more about their settings.
+
+### Default extensions
+We have put together a few of the most common extensions and provide a `defaultExtensions()` helper to load them. Here is how you to use that:
+
+```js
+import { Editor, defaultExtensions } from '@tiptap/starter-kit'
+
+new Editor({
+ extensions: defaultExtensions(),
+})
+```
+
+And you can even pass configuration for all default extensions as an object. Just prefix the configuration with the extension name:
+
+```js
+import { Editor, defaultExtensions } from '@tiptap/starter-kit'
+
+new Editor({
+ extensions: defaultExtensions({
+ heading: {
+ levels: [1, 2, 3]
+ },
+ }),
+})
+```
+
+The `defaultExtensions()` function returns an array, so if you want to load them and add some custom extensions you could write it like that:
+
+```js
+import { Editor, defaultExtensions } from '@tiptap/starter-kit'
+import Strike from '@tiptap/extension-strike'
+
+new Editor({
+ extensions: [
+ ...defaultExtensions(),
+ Strike,
+ ],
+})
+```
+
+Don’t want to load a specific extension? Just filter it out:
+
+```js
+import { Editor, defaultExtensions } from '@tiptap/starter-kit'
+
+new Editor({
+ extensions: [
+ ...defaultExtensions().filter(extension => extension.config.name !== 'history'),
+ ]
+})
+```
+
+You’ll probably see something like that in collaborative editing examples. The [`Collaboration`](/api/extensions/collaboration) comes with its own history extension, you need to remove the default [`History`](/api/extensions/history) extension to avoid conflicts.