docs: update content

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

@@ -12,44 +12,41 @@ import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Bold from '@tiptap/extension-bold'
 
-export default {
-  data() {
-    return {
-      output: '',
-      json: {
-        type: 'doc',
-        content: [
-          {
-            type: 'paragraph',
-            content: [
-              {
-                type: 'text',
-                text: 'Example ',
-              },
-              {
-                type: 'text',
-                marks: [
-                  {
-                    type: 'bold',
-                  },
-                ],
-                text: 'Text',
-              },
-            ],
-          },
-        ],
-      },
-    }
-  },
+const json = {
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [
+        {
+          type: 'text',
+          text: 'Example ',
+        },
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'bold',
+            },
+          ],
+          text: 'Text',
+        },
+      ],
+    },
+  ],
+}
 
-  mounted() {
-    this.output = generateHTML(this.json, [
-      Document,
-      Paragraph,
-      Text,
-      Bold,
-      // other extensions …
-    ])
+export default {
+  computed: {
+    output() {
+      return generateHTML(json, [
+        Document,
+        Paragraph,
+        Text,
+        Bold,
+        // other extensions …
+      ])
+    },
   },
 }
 </script>

docs/src/demos/Guide/NodeViews/JavaScript/Extension.js

@@ -0,0 +1,77 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+
+export default Node.create({
+  name: 'nodeView',
+
+  group: 'block',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'node-view',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['node-view', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return ({ editor, node, getPos }) => {
+      const { view } = editor
+
+      // Markup
+      /*
+        <div class="node-view">
+          <span class="label">Node view</span>
+
+          <div class="content">
+            <button>
+              This button has been clicked ${node.attrs.count} times.
+            </button>
+          </div>
+        </div>
+      */
+
+      const dom = document.createElement('div')
+      dom.classList.add('node-view')
+
+      const label = document.createElement('span')
+      label.classList.add('label')
+      label.innerHTML = 'Node view'
+
+      const content = document.createElement('div')
+      content.classList.add('content')
+
+      const button = document.createElement('button')
+      button.innerHTML = `This button has been clicked ${node.attrs.count} times.`
+      button.addEventListener('click', () => {
+        if (typeof getPos === 'function') {
+          view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, {
+            count: node.attrs.count + 1,
+          }))
+
+          editor.commands.focus()
+        }
+      })
+      content.append(button)
+
+      dom.append(label, content)
+
+      return {
+        dom,
+      }
+    }
+  },
+})

docs/src/demos/Guide/NodeViews/JavaScript/index.vue

@@ -5,7 +5,7 @@
 <script>
 import { Editor, EditorContent } from '@tiptap/vue-2'
 import { defaultExtensions } from '@tiptap/starter-kit'
-import VueComponent from './index.js'
+import NodeView from './Extension.js'
 
 export default {
   components: {
@@ -22,13 +22,13 @@ export default {
     this.editor = new Editor({
       extensions: [
         ...defaultExtensions(),
-        VueComponent,
+        NodeView,
       ],
       content: `
         <p>
           This is still the text editor you’re used to, but enriched with node views.
         </p>
-        <node-view count="0"></node-view>
+        <node-view></node-view>
         <p>
           Did you see that? That’s a JavaScript node view. We are really living in the future.
         </p>
@@ -52,7 +52,8 @@ export default {
 
 ::v-deep {
   .node-view {
-    border: 1px solid #adb5bd;
+    background: #FAF594;
+    border: 3px solid #0D0D0D;
     border-radius: 0.5rem;
     margin: 1rem 0;
     position: relative;
@@ -60,7 +61,7 @@ export default {
 
   .label {
     margin-left: 1rem;
-    background-color: #adb5bd;
+    background-color: #0D0D0D;
     font-size: 0.6rem;
     letter-spacing: 1px;
     font-weight: bold;
@@ -73,7 +74,8 @@ export default {
   }
 
   .content {
-    margin: 2.5rem 1rem 1rem;
+    margin-top: 1.5rem;
+    padding: 1rem;
   }
 }
 </style>

docs/src/demos/Guide/NodeViews/JavaScriptContent/Extension.js

@@ -5,15 +5,7 @@ export default Node.create({
 
   group: 'block',
 
-  atom: true,
-
-  addAttributes() {
-    return {
-      count: {
-        default: 0,
-      },
-    }
-  },
+  content: 'inline*',
 
   parseHTML() {
     return [
@@ -29,32 +21,32 @@ export default Node.create({
 
   addNodeView() {
     return () => {
+      // Markup
+      /*
+        <div class="node-view">
+          <span class="label">Node view</span>
+
+          <div class="content"></div>
+        </div>
+      */
+
       const dom = document.createElement('div')
       dom.classList.add('node-view')
 
       const label = document.createElement('span')
       label.classList.add('label')
-      label.innerHTML = 'Node View'
+      label.innerHTML = 'Node view'
+      label.contentEditable = false
 
       const content = document.createElement('div')
       content.classList.add('content')
-      content.innerHTML = 'I’m rendered with JavaScript.'
 
       dom.append(label, content)
 
       return {
         dom,
+        contentDOM: content,
       }
     }
   },
 })
-
-// <node-view-wrapper class="vue-component">
-//     <span class="label">Vue Component</span>
-
-//     <div class="content">
-//       <button @click="increase">
-//         This button has been clicked {{ node.attrs.count }} times.
-//       </button>
-//     </div>
-//   </node-view-wrapper>

docs/src/demos/Guide/NodeViews/JavaScriptContent/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-2'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import NodeView from './Extension.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        ...defaultExtensions(),
+        NodeView,
+      ],
+      content: `
+        <p>
+          This is still the text editor you’re used to, but enriched with node views.
+        </p>
+        <node-view>
+          <p>This is editable.</p>
+        </node-view>
+        <p>
+          Did you see that? That’s a JavaScript node view. We are really living in the future.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+::v-deep {
+  .node-view {
+    background: #FAF594;
+    border: 3px solid #0D0D0D;
+    border-radius: 0.5rem;
+    margin: 1rem 0;
+    position: relative;
+  }
+
+  .label {
+    margin-left: 1rem;
+    background-color: #0D0D0D;
+    font-size: 0.6rem;
+    letter-spacing: 1px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #fff;
+    position: absolute;
+    top: 0;
+    padding: 0.25rem 0.75rem;
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+
+  .content {
+    margin: 2.5rem 1rem 1rem;
+    padding: 0.5rem;
+    border: 2px dashed #0D0D0D20;
+    border-radius: 0.5rem;
+  }
+}
+</style>