Merge branch 'main' of github.com:ueberdosis/tiptap

docs/api/nodes/mention.md

@@ -31,35 +31,6 @@ npm install tippy.js
 yarn add tippy.js
 ```
 
-## Rendering
-Currently, we’re supporting custom Vue.js components only. To get the required `VueRenderer` install our Vue.js package:
-
-```bash
-# with npm
-npm install @tiptap/vue-2
-
-# with Yarn
-yarn add @tiptap/vue-2
-```
-If you are using `vue-3` then the `VueRenderer` requires different input:
-```js
-new VueRenderer(MentionList, {
-  props: props,
-  editor: this.editor,
-})
-```
-and not
-```js
-new VueRenderer(MentionList, {
-  parent: this,
-  propsData: props,
-})
-```
-
-And yes, we plan to support React, too. Meanwhile, you can roll your own `ReactRenderer`, but don’t forget to share it with the community.
-
-It’s also possible to use Vanilla JavaScript, but that is probably a lot more work.
-
 ## Settings
 
 ### HTMLAttributes
@@ -73,8 +44,27 @@ Mention.configure({
 })
 ```
 
-| renderLabel    | `String` | `({ options, node }) => …` | Define how a mention label should be rendered.                        |
-| suggestion     | `Object` | `{ … }`                    | [Read more](/api/utilities/suggestion)                                |
+### renderLabel
+Define how a mention label should be rendered.
+
+```js
+Mention.configure({
+  renderLabel({ options, node }) {
+    return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
+  }
+})
+```
+
+### suggestion
+[Read more](/api/utilities/suggestion)
+
+```js
+Mention.configure({
+  suggestion: {
+    // …
+  },
+})
+```
 
 ## Source code
 [packages/extension-mention/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/)

docs/api/utilities/suggestion.md

@@ -44,7 +44,7 @@ Default: `() => {}'`
 ### items
 Pass an array of filtered suggestions, can be async.
 
-Default: `() => {}`
+Default: `({ editor, query }) => []`
 
 ### render
 A render function for the autocomplete popup.

docs/guide/custom-extensions.md

@@ -78,6 +78,39 @@ const CustomHeading = Heading.extend({
 })
 ```
 
+### Storage
+At some point you probably want to save some data within your extension instance. This data is mutable. You can access it within the extension under `this.storage`.
+
+```js
+import { Extension } from '@tiptap/core'
+
+const CustomExtension = Extension.create({
+  name: 'customExtension',
+
+  addStorage() {
+    return {
+      awesomeness: 100,
+    }
+  },
+
+  onUpdate() {
+    this.storage.awesomeness += 1
+  },
+})
+```
+
+Outside the extension you have access via `editor.storage`. Make sure that each extension has a unique name.
+
+```js
+const editor = new Editor({
+  extensions: [
+    CustomExtension,
+  ],
+})
+
+const awesomeness = editor.storage.customExtension.awesomeness
+```
+
 ### Schema
 tiptap works with a strict schema, which configures how the content can be structured, nested, how it behaves and many more things. You [can change all aspects of the schema](/api/schema) for existing extensions. Let’s walk through a few common use cases.
 

docs/guide/typescript.md

@@ -32,6 +32,25 @@ const CustomExtension = Extension.create<CustomExtensionOptions>({
 })
 ```
 
+### Storage types
+To add types for your extension storage, you’ll have to pass that as a second type parameter.
+
+```ts
+import { Extension } from '@tiptap/core'
+
+export interface CustomExtensionStorage {
+  awesomeness: number,
+}
+
+const CustomExtension = Extension.create<{}, CustomExtensionStorage>({
+  addStorage() {
+    return {
+      awesomeness: 100,
+    }
+  },
+})
+```
+
 ### Command type
 The core package also exports a `Command` type, which needs to be added to all commands that you specify in your code. Here is an example: