From 36bf546c2dec58f9c5d8922ff108881d97371d43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 21 Apr 2021 11:46:45 +0200
Subject: [PATCH] docs: update content

---
 .../demos/Guide/Content/ReadOnly/index.vue    | 30 ++++++++++---------
 docs/src/docPages/api/editor.md               |  2 +-
 .../docPages/guide/collaborative-editing.md   | 10 +++----
 docs/src/docPages/guide/extend-extensions.md  |  9 ++++--
 docs/src/docPages/guide/node-views/react.md   |  2 +-
 docs/src/docPages/guide/styling.md            |  4 +--
 6 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/docs/src/demos/Guide/Content/ReadOnly/index.vue b/docs/src/demos/Guide/Content/ReadOnly/index.vue
index 885e8764..64923a67 100644
--- a/docs/src/demos/Guide/Content/ReadOnly/index.vue
+++ b/docs/src/demos/Guide/Content/ReadOnly/index.vue
@@ -51,24 +51,26 @@ export default {
 }
 </script>
 
-<style lang="scss">
-/* Basic editor styles */
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
+<style lang="scss" scoped>
+::v-deep {
+  /* Basic editor styles */
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
   }
-}
 
-.checkbox {
-  margin-bottom: 1rem;
+  .checkbox {
+    margin-bottom: 1rem;
 
-  input[type="checkbox"] {
-    margin-right: 0.5rem;
+    input[type="checkbox"] {
+      margin-right: 0.5rem;
+    }
   }
-}
 
-[contenteditable=false] {
-  color: #999;
-  cursor: not-allowed;
+  [contenteditable=false] {
+    color: #999;
+    cursor: not-allowed;
+  }
 }
 </style>
diff --git a/docs/src/docPages/api/editor.md b/docs/src/docPages/api/editor.md
index 55b55b16..2bcea9b6 100644
--- a/docs/src/docPages/api/editor.md
+++ b/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',
-    }
+    },
   },
 })
 ```
diff --git a/docs/src/docPages/guide/collaborative-editing.md b/docs/src/docPages/guide/collaborative-editing.md
index a2097084..9aed52c2 100644
--- a/docs/src/docPages/guide/collaborative-editing.md
+++ b/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
 
diff --git a/docs/src/docPages/guide/extend-extensions.md b/docs/src/docPages/guide/extend-extensions.md
index 62124731..b3f90458 100644
--- a/docs/src/docPages/guide/extend-extensions.md
+++ b/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')
       })
 
diff --git a/docs/src/docPages/guide/node-views/react.md b/docs/src/docPages/guide/node-views/react.md
index ba224d96..803d9232 100644
--- a/docs/src/docPages/guide/node-views/react.md
+++ b/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'
 
diff --git a/docs/src/docPages/guide/styling.md b/docs/src/docPages/guide/styling.md
index 748026d8..e4c2e6b2 100644
--- a/docs/src/docPages/guide/styling.md
+++ b/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',
-    }
+    },
   },
 })
 ```