diff --git a/demos/src/Nodes/Image/React/index.html b/demos/src/Nodes/Image/React/index.html
new file mode 100644
index 00000000..9a0bce57
--- /dev/null
+++ b/demos/src/Nodes/Image/React/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/src/Nodes/Image/React/index.jsx b/demos/src/Nodes/Image/React/index.jsx
new file mode 100644
index 00000000..b6181ada
--- /dev/null
+++ b/demos/src/Nodes/Image/React/index.jsx
@@ -0,0 +1,38 @@
+import React, { useCallback } 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 Image from '@tiptap/extension-image'
+import Dropcursor from '@tiptap/extension-dropcursor'
+import './styles.scss'
+
+export default () => {
+ const editor = useEditor({
+ extensions: [Document, Paragraph, Text, Image, Dropcursor],
+ content: `
+ This is a basic example of implementing images. Drag to re-order.
+ 
+ 
+ `,
+ })
+
+ const addImage = useCallback(() => {
+ const url = window.prompt('URL')
+
+ if (url) {
+ editor.chain().focus().setImage({ src: url }).run()
+ }
+ }, [editor])
+
+ if (!editor) {
+ return null
+ }
+
+ return (
+
+
+
+
+ )
+}
diff --git a/demos/src/Nodes/Image/React/index.spec.js b/demos/src/Nodes/Image/React/index.spec.js
new file mode 100644
index 00000000..b948dcd2
--- /dev/null
+++ b/demos/src/Nodes/Image/React/index.spec.js
@@ -0,0 +1,24 @@
+context('/src/Nodes/Image/React/', () => {
+ before(() => {
+ cy.visit('/src/Nodes/Image/React/')
+ })
+
+ beforeEach(() => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.commands.setContent('Example Text
')
+ cy.get('.ProseMirror').type('{selectall}')
+ })
+ })
+
+ it('should add an img tag with the correct URL', () => {
+ cy.window().then(win => {
+ cy.stub(win, 'prompt').returns('foobar.png')
+
+ cy.get('button:first').click()
+
+ cy.window().its('prompt').should('be.called')
+
+ cy.get('.ProseMirror').find('img').should('have.attr', 'src', 'foobar.png')
+ })
+ })
+})
diff --git a/demos/src/Nodes/Image/React/styles.scss b/demos/src/Nodes/Image/React/styles.scss
new file mode 100644
index 00000000..1df28f7c
--- /dev/null
+++ b/demos/src/Nodes/Image/React/styles.scss
@@ -0,0 +1,15 @@
+/* Basic editor styles */
+.ProseMirror {
+ > * + * {
+ margin-top: 0.75em;
+ }
+
+ img {
+ height: auto;
+ max-width: 100%;
+
+ &.ProseMirror-selectednode {
+ outline: 3px solid #68cef8;
+ }
+ }
+}