Merge branch 'main' of github.com:ueberdosis/tiptap-next into main

docs/src/demos/Examples/InteractiveNodeViews/Component.vue

@@ -30,9 +30,9 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vue-component {
-  border: 1px solid #adb5bd;
+  border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;
   position: relative;
@@ -40,7 +40,7 @@ export default {
 
 .label {
   margin-left: 1rem;
-  background-color: #adb5bd;
+  background-color: #0D0D0D;
   font-size: 0.6rem;
   letter-spacing: 1px;
   font-weight: bold;

docs/src/demos/Examples/InteractiveNodeViews/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 VueComponent from './Extension.js'
 
 export default {
   components: {

docs/src/demos/Experiments/CollaborationAnnotation/index.vue

@@ -135,15 +135,17 @@ 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;
+    }
+  }
+
+  .annotation {
+    background: #9DEF8F;
   }
 }
-
-.annotation {
-  background: #9DEF8F;
-}
 </style>

docs/src/demos/Experiments/Commands/index.vue

@@ -130,17 +130,19 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
+<style lang="scss" scoped>
+::v-deep {
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
+  }
+
+  .mention {
+    color: #A975FF;
+    background-color: rgba(#A975FF, 0.1);
+    border-radius: 0.3rem;
+    padding: 0.1rem 0.3rem;
   }
 }
-
-.mention {
-  color: #A975FF;
-  background-color: rgba(#A975FF, 0.1);
-  border-radius: 0.3rem;
-  padding: 0.1rem 0.3rem;
-}
 </style>

docs/src/demos/Experiments/Details/index.vue

@@ -63,34 +63,36 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  details,
-  [data-type="details"] {
-    display: flex;
-
-    [data-type="detailsContent"] > *:not(summary) {
-      display: none;
+<style lang="scss" scoped>
+::v-deep {
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
     }
 
-    [data-type="detailsToggle"]::before {
-      cursor: pointer;
-      content: '▸';
-      display: inline-block;
-      width: 1em;
-    }
+    details,
+    [data-type="details"] {
+      display: flex;
 
-    &[open] {
       [data-type="detailsContent"] > *:not(summary) {
-        display: inherit;
+        display: none;
       }
 
       [data-type="detailsToggle"]::before {
-        content: '▾';
+        cursor: pointer;
+        content: '▸';
+        display: inline-block;
+        width: 1em;
+      }
+
+      &[open] {
+        [data-type="detailsContent"] > *:not(summary) {
+          display: inherit;
+        }
+
+        [data-type="detailsToggle"]::before {
+          content: '▾';
+        }
       }
     }
   }

docs/src/demos/Experiments/Embeds/index.vue

@@ -53,10 +53,12 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
+<style lang="scss" scoped>
+::v-deep {
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
   }
 
   .iframe-wrapper {

docs/src/demos/Experiments/Linter/index.vue

@@ -61,36 +61,38 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.problem {
-  background: #fdd;
-  border-bottom: 1px solid #f22;
-  margin-bottom: -1px;
-}
+<style lang="scss" scoped>
+::v-deep {
+  .problem {
+    background: #fdd;
+    border-bottom: 1px solid #f22;
+    margin-bottom: -1px;
+  }
 
-.lint-icon {
-  display: inline-block;
-  position: absolute;
-  right: 2px;
-  cursor: pointer;
-  border-radius: 100px;
-  background: #f22;
-  color: white;
-  font-family: times, georgia, serif;
-  font-size: 15px;
-  font-weight: bold;
-  width: 1.1em;
-  height: 1.1em;
-  text-align: center;
-  padding-left: .5px;
-  line-height: 1.1em
-}
+  .lint-icon {
+    display: inline-block;
+    position: absolute;
+    right: 2px;
+    cursor: pointer;
+    border-radius: 100px;
+    background: #f22;
+    color: white;
+    font-family: times, georgia, serif;
+    font-size: 15px;
+    font-weight: bold;
+    width: 1.1em;
+    height: 1.1em;
+    text-align: center;
+    padding-left: .5px;
+    line-height: 1.1em
+  }
 
-.lint-icon:before {
-  content: "!";
-}
+  .lint-icon:before {
+    content: "!";
+  }
 
-.ProseMirror {
-  padding-right: 20px;
+  .ProseMirror {
+    padding-right: 20px;
+  }
 }
 </style>

docs/src/demos/Experiments/MultipleEditors/index.vue

@@ -143,67 +143,69 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
-  }
+<style lang="scss" scoped>
+::v-deep {
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
 
-  ul[data-type="taskList"] {
-    list-style: none;
-    padding: 0;
+    ul[data-type="taskList"] {
+      list-style: none;
+      padding: 0;
 
-    li {
-      display: flex;
-      align-items: center;
+      li {
+        display: flex;
+        align-items: center;
 
-      > input {
-        flex: 0 0 auto;
-        margin-right: 0.5rem;
+        > input {
+          flex: 0 0 auto;
+          margin-right: 0.5rem;
+        }
       }
     }
   }
-}
 
-.form__label {
-  color: #868e96;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 0.7rem;
-  letter-spacing: 1px;
-}
-
-.form__item {
-  margin: 0 0 1rem;
-  padding: 0.75rem 1rem;
-  border-radius: 5px;
-  border: 1px solid #e9ecef;
-  transition: .1s all ease-in-out;
-
-  &:hover {
-    border-color: #68CEF8;
+  .form__label {
+    color: #868e96;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 0.7rem;
+    letter-spacing: 1px;
   }
 
-  &--title {
-    font-size: 1.5rem;
+  .form__item {
+    margin: 0 0 1rem;
+    padding: 0.75rem 1rem;
+    border-radius: 5px;
+    border: 1px solid #e9ecef;
+    transition: .1s all ease-in-out;
+
+    &:hover {
+      border-color: #68CEF8;
+    }
+
+    &--title {
+      font-size: 1.5rem;
+    }
+
+    &--json {
+      background: #0D0D0D;
+      color: #FFF;
+      font-size: 0.8rem;
+    }
   }
 
-  &--json {
-    background: #0D0D0D;
-    color: #FFF;
-    font-size: 0.8rem;
-  }
-}
+  pre {
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
 
-pre {
-  font-family: 'JetBrainsMono', monospace;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
-
-  code {
-    color: inherit;
-    background: none;
-    font-size: 0.8rem;
+    code {
+      color: inherit;
+      background: none;
+      font-size: 0.8rem;
+    }
   }
 }
 </style>

docs/src/demos/Experiments/Placeholder/index.vue

@@ -37,20 +37,22 @@ 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;
+    }
+  }
+
+  /* Placeholder */
+  .ProseMirror p.is-editor-empty:first-child::before {
+    content: attr(data-empty-text);
+    float: left;
+    color: #ced4da;
+    pointer-events: none;
+    height: 0;
   }
 }
-
-/* Placeholder */
-.ProseMirror p.is-editor-empty:first-child::before {
-  content: attr(data-empty-text);
-  float: left;
-  color: #ced4da;
-  pointer-events: none;
-  height: 0;
-}
 </style>

docs/src/demos/Guide/GettingStarted/VModel/index.vue

@@ -25,38 +25,40 @@ 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;
+    }
+
+    code {
+      background-color: rgba(#616161, 0.1);
+      color: #616161;
+    }
   }
 
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-}
+  .content {
+    padding: 1rem 0 0;
 
-.content {
-  padding: 1rem 0 0;
+    h3 {
+      margin: 1rem 0 0.5rem;
+    }
 
-  h3 {
-    margin: 1rem 0 0.5rem;
-  }
+    pre {
+      border-radius: 5px;
+      color: #333;
+    }
 
-  pre {
-    border-radius: 5px;
-    color: #333;
-  }
-
-  code {
-    display: block;
-    white-space: pre-wrap;
-    font-size: 0.8rem;
-    padding: 0.75rem 1rem;
-    background-color:#e9ecef;
-    color: #495057;
+    code {
+      display: block;
+      white-space: pre-wrap;
+      font-size: 0.8rem;
+      padding: 0.75rem 1rem;
+      background-color:#e9ecef;
+      color: #495057;
+    }
   }
 }
 </style>

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

@@ -42,7 +42,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 /* Basic editor styles */
 .ProseMirror {
   > * + * {
@@ -50,28 +50,30 @@ export default {
   }
 }
 
-.node-view {
-  border: 1px solid #adb5bd;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  position: relative;
-}
+::v-deep {
+  .node-view {
+    border: 1px solid #adb5bd;
+    border-radius: 0.5rem;
+    margin: 1rem 0;
+    position: relative;
+  }
 
-.label {
-  margin-left: 1rem;
-  background-color: #adb5bd;
-  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;
-}
+  .label {
+    margin-left: 1rem;
+    background-color: #adb5bd;
+    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;
+  .content {
+    margin: 2.5rem 1rem 1rem;
+  }
 }
 </style>

docs/src/demos/Guide/NodeViews/ReactComponent/Component.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { NodeViewWrapper } from '@tiptap/react'
+
+export default props => {
+  const increase = () => {
+    props.updateAttributes({
+      count: props.node.attrs.count + 1,
+    })
+  }
+
+  return (
+    <NodeViewWrapper className="react-component">
+      <span className="label">React Component</span>
+
+      <div className="content">
+        <button onClick={increase}>
+          This button has been clicked {props.node.attrs.count} times.
+        </button>
+      </div>
+    </NodeViewWrapper>
+  )
+}

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

@@ -0,0 +1,35 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import Component from './Component.jsx'
+
+export default Node.create({
+  name: 'reactComponent',
+
+  group: 'block',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'react-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['react-component', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(Component)
+  },
+})

docs/src/demos/Guide/NodeViews/ReactComponent/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import ReactComponent from './Extension.js'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      ...defaultExtensions(),
+      ReactComponent,
+    ],
+    content: `
+    <p>
+      This is still the text editor you’re used to, but enriched with node views.
+    </p>
+    <react-component count="0"></react-component>
+    <p>
+      Did you see that? That’s a React component. We are really living in the future.
+    </p>
+    `,
+  })
+
+  return (
+    <EditorContent editor={editor} />
+  )
+}

docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss

@@ -0,0 +1,32 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.react-component {
+  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-top: 1.5rem;
+    padding: 1rem;
+  }
+}

docs/src/demos/Guide/NodeViews/ReactComponentContent/Component.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
+
+export default () => {
+  return (
+    <NodeViewWrapper className="react-component-with-content">
+      <span className="label">React Component</span>
+
+      <NodeViewContent className="content" />
+    </NodeViewWrapper>
+  )
+}

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

@@ -0,0 +1,35 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import Component from './Component.jsx'
+
+export default Node.create({
+  name: 'reactComponent',
+
+  group: 'block',
+
+  content: 'inline*',
+
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'react-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['react-component', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(Component)
+  },
+})

docs/src/demos/Guide/NodeViews/ReactComponentContent/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import ReactComponent from './Extension.js'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      ...defaultExtensions(),
+      ReactComponent,
+    ],
+    content: `
+    <p>
+      This is still the text editor you’re used to, but enriched with node views.
+    </p>
+    <react-component>
+      <p>This is editable.</p>
+    </react-component>
+    <p>
+      Did you see that? That’s a React component. We are really living in the future.
+    </p>
+    `,
+  })
+
+  return (
+    <EditorContent editor={editor} />
+  )
+}

docs/src/demos/Guide/NodeViews/ReactComponentContent/styles.scss

@@ -0,0 +1,35 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.react-component-with-content {
+  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;
+  }
+}
+

docs/src/demos/Guide/NodeViews/VueComponent/Component.vue

@@ -30,9 +30,9 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vue-component {
-  border: 1px solid #adb5bd;
+  border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;
   position: relative;
@@ -40,7 +40,7 @@ export default {
 
 .label {
   margin-left: 1rem;
-  background-color: #adb5bd;
+  background-color: #0D0D0D;
   font-size: 0.6rem;
   letter-spacing: 1px;
   font-weight: bold;

docs/src/demos/Guide/NodeViews/VueComponent/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 VueComponent from './Extension.js'
 
 export default {
   components: {

docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue

@@ -19,9 +19,9 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vue-component {
-  border: 1px solid #adb5bd;
+  border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;
   position: relative;
@@ -29,7 +29,7 @@ export default {
 
 .label {
   margin-left: 1rem;
-  background-color: #adb5bd;
+  background-color: #0D0D0D;
   font-size: 0.6rem;
   letter-spacing: 1px;
   font-weight: bold;
@@ -43,7 +43,8 @@ export default {
 
 .content {
   margin: 2.5rem 1rem 1rem;
-  padding: 1rem;
-  border: 1px dashed #adb5bd;
+  padding: 0.5rem;
+  border: 2px dashed #0D0D0D20;
+  border-radius: 0.5rem;
 }
 </style>

docs/src/demos/Guide/NodeViews/VueComponentContent/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 VueComponent from './Extension.js'
 
 export default {
   components: {

docs/src/demos/Marks/Link/index.vue

@@ -61,15 +61,17 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 /* Basic editor styles */
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
-  }
+::v-deep {
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
 
-  a {
-    color: #68CEF8;
+    a {
+      color: #68CEF8;
+    }
   }
 }
 </style>

docs/src/docPages/guide/configuration.md

@@ -100,7 +100,7 @@ import { Editor, defaultExtensions } from '@tiptap/starter-kit'
 new Editor({
   extensions: defaultExtensions({
     heading: {
-      levels: [1, 2, 3]
+      levels: [1, 2, 3],
     },
   }),
 })
@@ -128,7 +128,7 @@ import { Editor, defaultExtensions } from '@tiptap/starter-kit'
 new Editor({
   extensions: [
     ...defaultExtensions().filter(extension => extension.config.name !== 'history'),
-  ]
+  ],
 })
 ```
 

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

@@ -4,3 +4,7 @@
 
 ## Introduction
 TODO
+
+<demo name="Guide/NodeViews/ReactComponent" />
+
+<demo name="Guide/NodeViews/ReactComponentContent" />