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

docs/package.json

@@ -13,6 +13,7 @@
     "@gridsome/vue-remark": "^0.2.6",
     "@mvasilkov/outdent": "^1.0.4",
     "collect.js": "^4.28.6",
+    "d3": "^6.3.0",
     "globby": "^11.0.0",
     "gridsome": "0.7.23",
     "gridsome-plugin-simple-analytics": "^1.1.0",
@@ -23,6 +24,7 @@
     "remark-container": "^0.1.2",
     "remark-toc": "^7.0.0",
     "remixicon": "^2.5.0",
+    "simplify-js": "^1.2.4",
     "vue-github-button": "^1.1.2",
     "vue-live": "^1.16.0",
     "y-indexeddb": "^9.0.5",

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

@@ -0,0 +1,159 @@
+<template>
+  <node-view-wrapper class="draw">
+    <input type="color" v-model="color">
+    <input
+      type="number"
+      min="1"
+      max="10"
+      v-model="size"
+    >
+    <button @click="clear">
+      clear
+    </button>
+    <svg viewBox="0 0 500 250" ref="canvas">
+      <template v-for="item in node.attrs.lines">
+        <path
+          v-if="item.id !== id"
+          :key="item.id"
+          :d="item.path"
+          :id="`id-${item.id}`"
+          :stroke="item.color"
+          :stroke-width="item.size"
+        />
+      </template>
+    </svg>
+  </node-view-wrapper>
+</template>
+
+<script>
+import { v4 as uuid } from 'uuid'
+import * as d3 from 'd3'
+import simplify from 'simplify-js'
+
+export default {
+  props: {
+    updateAttributes: {
+      type: Function,
+      required: true,
+    },
+
+    node: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      color: '#000000',
+      size: 2,
+      svg: null,
+      path: null,
+      points: [],
+      drawing: false,
+      id: uuid(),
+    }
+  },
+
+  methods: {
+    onStartDrawing(event) {
+      this.drawing = true
+      this.points = []
+      this.path = this.svg
+        .append('path')
+        .data([this.points])
+        .attr('id', `id-${this.id}`)
+        .attr('stroke', this.color)
+        .attr('stroke-width', this.size)
+
+      const moveEvent = event.type === 'mousedown'
+        ? 'mousemove'
+        : 'touchmove'
+
+      this.svg.on(moveEvent, this.onMove)
+    },
+
+    onMove(event) {
+      event.preventDefault()
+      this.points.push(d3.pointers(event)[0])
+      this.tick()
+    },
+
+    onEndDrawing() {
+      this.svg.on('mousemove', null)
+      this.svg.on('touchmove', null)
+
+      if (!this.drawing) {
+        return
+      }
+
+      this.drawing = false
+      this.svg.select(`#id-${this.id}`).remove()
+      this.id = uuid()
+    },
+
+    simplifyPoints(points) {
+      return simplify(points.map(point => ({ x: point[0], y: point[1] }))).map(point => [point.x, point.y])
+    },
+
+    tick() {
+      requestAnimationFrame(() => {
+        this.path.attr('d', points => {
+          const path = d3.line().curve(d3.curveBasis)(points)
+          // const simplifiedPath = d3.line().curve(d3.curveBasis)(this.simplifyPoints(points))
+          const lines = this.node.attrs.lines.filter(item => item.id !== this.id)
+
+          this.updateAttributes({
+            lines: [
+              ...lines,
+              {
+                id: this.id,
+                color: this.color,
+                size: this.size,
+                path,
+                // path: simplifiedPath,
+              },
+            ],
+          })
+
+          return path
+        })
+      })
+
+    },
+
+    clear() {
+      this.updateAttributes({
+        lines: [],
+      })
+    },
+  },
+
+  mounted() {
+    this.svg = d3.select(this.$refs.canvas)
+
+    this.svg
+      .on('mousedown', this.onStartDrawing)
+      .on('mouseup', this.onEndDrawing)
+      .on('mouseleave', this.onEndDrawing)
+      .on('touchstart', this.onStartDrawing)
+      .on('touchend', this.onEndDrawing)
+      .on('touchleave', this.onEndDrawing)
+  },
+}
+</script>
+
+<style lang="scss">
+.draw {
+  svg {
+    background: #EEE;
+    cursor: crosshair;
+  }
+
+  path {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}
+</style>

docs/src/demos/Examples/Drawing/Paper.js

@@ -0,0 +1,35 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueRenderer } from '@tiptap/vue'
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'paper',
+
+  group: 'block',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      lines: {
+        default: [],
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="paper"]',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'paper' })]
+  },
+
+  addNodeView() {
+    return VueRenderer(Component)
+  },
+})

docs/src/demos/Examples/Drawing/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import Collaboration from '@tiptap/extension-collaboration'
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'y-websocket'
+import Paper from './Paper.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    const ydoc = new Y.Doc()
+    const provider = new WebsocketProvider('wss://websocket.tiptap.dev', 'tiptap-draw-example', ydoc)
+
+    this.editor = new Editor({
+      extensions: [
+        Document.extend({
+          content: 'paper paragraph',
+        }),
+        Paragraph,
+        Text,
+        Collaboration.configure({
+          provider,
+        }),
+        Paper,
+      ],
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/docPages/examples/drawing.md

@@ -0,0 +1,4 @@
+# Drawing
+
+<demo name="Examples/Drawing" inline />
+<demo name="Examples/Drawing" />

docs/src/links.yaml

@@ -30,6 +30,8 @@
       link: /examples/book
     - title: For minimalists
       link: /examples/minimalist
+    - title: Drawing
+      link: /examples/drawing
 
 - title: Guide
   items: