docs: update content

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

@@ -51,24 +51,26 @@ export default {
 }
 </script>
 
-<style lang="scss">
-/* Basic editor styles */
-.ProseMirror {
+<style lang="scss" scoped>
+::v-deep {
+  /* Basic editor styles */
+  .ProseMirror {
     > * + * {
       margin-top: 0.75em;
     }
-}
+  }
 
-.checkbox {
+  .checkbox {
     margin-bottom: 1rem;
 
     input[type="checkbox"] {
       margin-right: 0.5rem;
     }
-}
+  }
 
-[contenteditable=false] {
+  [contenteditable=false] {
     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' }),
   ],
 })
 
@@ -308,10 +308,10 @@ your views.
 This example is **not intended** to be a primary storage as serializing to and deserializing from JSON will not store the collaboration history steps but only the resulting document. Make sure to always use the RocksDB extension as primary storage.
 
 ```typescript
-import {debounce} from 'debounce'
-import {Server} from '@hocuspocus/server'
-import {TiptapTransformer} from '@hocuspocus/transformer'
-import {writeFile} from 'fs'
+import { debounce } from 'debounce'
+import { Server } from '@hocuspocus/server'
+import { TiptapTransformer } from '@hocuspocus/transformer'
+import { writeFile } from 'fs'
 
 let debounced
 

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',
-    }
+    },
   },
 })
 ```