docs: update content

docs/src/demos/Guide/Content/ReadOnly/index.vue

@@ -51,7 +51,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+::v-deep {
   /* Basic editor styles */
   .ProseMirror {
     > * + * {
@@ -71,4 +72,5 @@ export default {
     color: #999;
     cursor: not-allowed;
   }
+}
 </style>

docs/src/docPages/api/editor.md

@@ -177,7 +177,7 @@ new Editor({
   editorProps: {
     attributes: {
       class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
-    }
+    },
   },
 })
 ```

docs/src/docPages/guide/collaborative-editing.md

@@ -117,7 +117,7 @@ import { RocksDB } from '@hocuspocus/extension-rocksdb'
 const server = Server.configure({
   port: 1234,
   extensions: [
-    new RocksDB({ path: './database' })
+    new RocksDB({ path: './database' }),
   ],
 })
 

docs/src/docPages/guide/extend-extensions.md

@@ -62,6 +62,7 @@ import Heading from '@tiptap/extension-heading'
 
 const CustomHeading = Heading.extend({
   defaultOptions: {
+    ...Heading.options,
     levels: [1, 2, 3],
   },
 })
@@ -230,6 +231,10 @@ renderHTML({ HTMLAttributes }) {
 If you want to add some specific attributes there, import the `mergeAttributes` helper from `@tiptap/core`:
 
 ```js
+import { mergeAttributes } from '@tiptap/core'
+
+// ...
+
 renderHTML({ HTMLAttributes }) {
   return ['a', mergeAttributes(HTMLAttributes, { rel: this.options.rel }), 0]
 },
@@ -262,7 +267,7 @@ parseHTML() {
       tag: 'b',
       getAttrs: node => node.style.fontWeight !== 'normal' && null,
     },
-    // <span style="font-weight: bold">
+    // <span style="font-weight: bold"> and <span style="font-weight: 700">
     {
       style: 'font-weight',
       getAttrs: value => /^(bold(er)?|[5-9]\d{2,})$/.test(value as string) && null,
@@ -406,7 +411,7 @@ const CustomLink = Link.extend({
     return () => {
       const container = document.createElement('div')
 
-      container.addEventListener('change', event => {
+      container.addEventListener('click', event => {
         alert('clicked on the container')
       })
 

docs/src/docPages/guide/node-views/react.md

@@ -71,7 +71,7 @@ And yes, all of that is reactive, too. A pretty seemless communication, isn’t
 ## Adding a content editable
 There is another component called `NodeViewContent` which helps you adding editable content to your node view. Here is an example:
 
-```js
+```jsx
 import React from 'react'
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
 

docs/src/docPages/guide/styling.md

@@ -46,7 +46,7 @@ new Editor({
       },
     }),
     Text,
-  ]
+  ],
 })
 ```
 
@@ -67,7 +67,7 @@ new Editor({
   editorProps: {
     attributes: {
       class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
-    }
+    },
   },
 })
 ```