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

docs/api/extensions/character-count.md

@@ -20,7 +20,7 @@ npm install @tiptap/extension-character-count
 
 The maximum number of characters that should be allowed.
 
-Default: `0`
+Default: `null`
 
 ```js
 CharacterCount.configure({

docs/api/extensions/floating-menu.md

@@ -24,7 +24,7 @@ Type: `HTMLElement`
 Default: `null`
 
 ### tippyOptions
-Under the hood, the `BubbleMenu` uses [tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/). You can directly pass options to it.
+Under the hood, the `FloatingMenu` uses [tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/). You can directly pass options to it.
 
 Type: `Object`
 

docs/api/nodes/bullet-list.md

@@ -31,6 +31,17 @@ BulletList.configure({
 })
 ```
 
+### itemTypeName
+Specify the list item name.
+
+Default: `'listItem'`
+
+```js
+BulletList.configure({
+  itemTypeName: 'listItem',
+})
+```
+
 ## Commands
 
 ### toggleBulletList()

docs/api/nodes/ordered-list.md

@@ -31,6 +31,17 @@ OrderedList.configure({
 })
 ```
 
+### itemTypeName
+Specify the list item name.
+
+Default: `'listItem'`
+
+```js
+OrderedList.configure({
+  itemTypeName: 'listItem',
+})
+```
+
 ## Commands
 
 ### toggleOrderedList()

docs/api/nodes/task-list.md

@@ -31,6 +31,17 @@ TaskList.configure({
 })
 ```
 
+### itemTypeName
+Specify the list item name.
+
+Default: `'taskItem'`
+
+```js
+TaskList.configure({
+  itemTypeName: 'taskItem',
+})
+```
+
 ## Commands
 
 # toggleTaskList()

docs/installation/nuxt.md

@@ -96,3 +96,69 @@ You should now see Tiptap in your browser. Time to give yourself a pat on the ba
 You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is a working example component, that you can integrate in your project:
 
 https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
+
+```html
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-2'
+import StarterKit from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  watch: {
+    value(value) {
+      // HTML
+      const isSame = this.editor.getHTML() === value
+
+      // JSON
+      // const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)
+
+      if (isSame) {
+        return
+      }
+
+      this.editor.commands.setContent(value, false)
+    },
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: this.value,
+      extensions: [
+        StarterKit,
+      ],
+      onUpdate: () => {
+        // HTML
+        this.$emit('input', this.editor.getHTML())
+
+        // JSON
+        // this.$emit('input', this.editor.getJSON())
+      },
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+```

docs/installation/vue2.md

@@ -103,4 +103,68 @@ You should now see Tiptap in your browser. Time to give yourself a pat on the ba
 ## 5. Use v-model (optional)
 You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is a working example component, that you can integrate in your project:
 
-https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
+```html
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-2'
+import StarterKit from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  watch: {
+    value(value) {
+      // HTML
+      const isSame = this.editor.getHTML() === value
+
+      // JSON
+      // const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)
+
+      if (isSame) {
+        return
+      }
+
+      this.editor.commands.setContent(value, false)
+    },
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: this.value,
+      extensions: [
+        StarterKit,
+      ],
+      onUpdate: () => {
+        // HTML
+        this.$emit('input', this.editor.getHTML())
+
+        // JSON
+        // this.$emit('input', this.editor.getJSON())
+      },
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+```

docs/installation/vue3.md

@@ -133,60 +133,4 @@ You should now see Tiptap in your browser. Time to give yourself a pat on the ba
 ## 5. Use v-model (optional)
 You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is how that would work with Tiptap:
 
-```html
-<template>
-  <editor-content :editor="editor" />
-</template>
-
-<script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-    },
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  watch: {
-    modelValue(value) {
-      const isSame = this.editor.getHTML() === value
-
-      if (isSame) {
-        return
-      }
-
-      this.editor.commands.setContent(value, false)
-    },
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      content: this.modelValue,
-      extensions: [
-        StarterKit,
-      ],
-      onUpdate: () => {
-        this.$emit('update:modelValue', this.editor.getHTML())
-      },
-    })
-  },
-
-  beforeUnmount() {
-    this.editor.destroy()
-  },
-}
-</script>
-```
+https://embed.tiptap.dev/preview/GuideGettingStarted/VModel