add GuideNodeViews demos

2021-08-25 18:32:54 +02:00
parent b1a87e4ad6
commit 8a5a491d8e
32 changed files with 1264 additions and 0 deletions
--- a/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx
+++ b/demos/src/GuideNodeViews/ReactComponent/React/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>
+  )
+}
--- a/demos/src/GuideNodeViews/ReactComponent/React/Extension.js
+++ b/demos/src/GuideNodeViews/ReactComponent/React/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)
+  },
+})
--- a/demos/src/GuideNodeViews/ReactComponent/React/index.html
+++ b/demos/src/GuideNodeViews/ReactComponent/React/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('GuideNodeViews/ReactComponent', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/GuideNodeViews/ReactComponent/React/index.jsx
+++ b/demos/src/GuideNodeViews/ReactComponent/React/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import ReactComponent from './Extension.js'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      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} />
+  )
+}
--- a/demos/src/GuideNodeViews/ReactComponent/React/styles.scss
+++ b/demos/src/GuideNodeViews/ReactComponent/React/styles.scss
@@ -0,0 +1,33 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.react-component {
+  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-top: 1.5rem;
+    padding: 1rem;
+  }
+}