From 1cf0309f90cba0f3409f484cb8da359f6cb62a39 Mon Sep 17 00:00:00 2001 From: Sven Adlung Date: Tue, 16 Nov 2021 13:52:37 +0100 Subject: [PATCH] Add Dropcursor demo for React --- .../Extensions/Dropcursor/React/index.html | 15 ++++++++++++++ .../src/Extensions/Dropcursor/React/index.jsx | 20 +++++++++++++++++++ .../Extensions/Dropcursor/React/index.spec.js | 7 +++++++ .../Extensions/Dropcursor/React/styles.scss | 11 ++++++++++ 4 files changed, 53 insertions(+) create mode 100644 demos/src/Extensions/Dropcursor/React/index.html create mode 100644 demos/src/Extensions/Dropcursor/React/index.jsx create mode 100644 demos/src/Extensions/Dropcursor/React/index.spec.js create mode 100644 demos/src/Extensions/Dropcursor/React/styles.scss diff --git a/demos/src/Extensions/Dropcursor/React/index.html b/demos/src/Extensions/Dropcursor/React/index.html new file mode 100644 index 00000000..707bc0cb --- /dev/null +++ b/demos/src/Extensions/Dropcursor/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Extensions/Dropcursor/React/index.jsx b/demos/src/Extensions/Dropcursor/React/index.jsx new file mode 100644 index 00000000..bb047763 --- /dev/null +++ b/demos/src/Extensions/Dropcursor/React/index.jsx @@ -0,0 +1,20 @@ +import React from 'react' +import { useEditor, EditorContent } from '@tiptap/react' +import Document from '@tiptap/extension-document' +import Paragraph from '@tiptap/extension-paragraph' +import Text from '@tiptap/extension-text' +import Dropcursor from '@tiptap/extension-dropcursor' +import Image from '@tiptap/extension-image' +import './styles.scss' + +export default () => { + const editor = useEditor({ + extensions: [Document, Paragraph, Text, Image, Dropcursor], + content: ` +

Try to drag around the image. While you drag, the editor should show a decoration under your cursor. The so called dropcursor.

+ + `, + }) + + return +} diff --git a/demos/src/Extensions/Dropcursor/React/index.spec.js b/demos/src/Extensions/Dropcursor/React/index.spec.js new file mode 100644 index 00000000..406ed1f8 --- /dev/null +++ b/demos/src/Extensions/Dropcursor/React/index.spec.js @@ -0,0 +1,7 @@ +context('/src/Examples/Dropcursor/React/', () => { + before(() => { + cy.visit('/src/Examples/Dropcursor/React/') + }) + + // TODO: Write tests +}) diff --git a/demos/src/Extensions/Dropcursor/React/styles.scss b/demos/src/Extensions/Dropcursor/React/styles.scss new file mode 100644 index 00000000..23deef10 --- /dev/null +++ b/demos/src/Extensions/Dropcursor/React/styles.scss @@ -0,0 +1,11 @@ +/* Basic editor styles */ +.ProseMirror { + > * + * { + margin-top: 0.75em; + } + + img { + height: auto; + max-width: 100%; + } +}