From 152b0d328ee7f74e1b193cff00d3f3a6f0d1505c Mon Sep 17 00:00:00 2001 From: svenadlung Date: Tue, 16 Nov 2021 19:27:54 +0100 Subject: [PATCH] Add ReadOnly demo for React --- .../GuideContent/ReadOnly/React/index.html | 15 ++++++ .../src/GuideContent/ReadOnly/React/index.jsx | 47 +++++++++++++++++++ .../GuideContent/ReadOnly/React/index.spec.js | 29 ++++++++++++ .../GuideContent/ReadOnly/React/styles.scss | 19 ++++++++ 4 files changed, 110 insertions(+) create mode 100644 demos/src/GuideContent/ReadOnly/React/index.html create mode 100644 demos/src/GuideContent/ReadOnly/React/index.jsx create mode 100644 demos/src/GuideContent/ReadOnly/React/index.spec.js create mode 100644 demos/src/GuideContent/ReadOnly/React/styles.scss diff --git a/demos/src/GuideContent/ReadOnly/React/index.html b/demos/src/GuideContent/ReadOnly/React/index.html new file mode 100644 index 00000000..1f5c0319 --- /dev/null +++ b/demos/src/GuideContent/ReadOnly/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/GuideContent/ReadOnly/React/index.jsx b/demos/src/GuideContent/ReadOnly/React/index.jsx new file mode 100644 index 00000000..3d2dccfc --- /dev/null +++ b/demos/src/GuideContent/ReadOnly/React/index.jsx @@ -0,0 +1,47 @@ +import React, { useState, useEffect } from 'react' +import { useEditor, EditorContent } from '@tiptap/react' +import StarterKit from '@tiptap/starter-kit' +import './styles.scss' + +export default () => { + const [editable, setEditable] = useState(false) + const editor = useEditor({ + editable, + content: ` +

+ This text is read-only. No matter what you try, you are not able to edit something. Okay, if you toggle the checkbox above you’ll be able to edit the text. +

+

+ If you want to check the state, you can call editor.isEditable(). +

+ `, + extensions: [StarterKit], + }) + + useEffect(() => { + if (!editor) { + return null + } + + editor.setEditable(editable) + }, [editor, editable]) + + if (!editor) { + return null + } + + return ( + <> +
+ setEditable(event.target.checked)} + /> + +
+ + + ) +} diff --git a/demos/src/GuideContent/ReadOnly/React/index.spec.js b/demos/src/GuideContent/ReadOnly/React/index.spec.js new file mode 100644 index 00000000..99ace8a1 --- /dev/null +++ b/demos/src/GuideContent/ReadOnly/React/index.spec.js @@ -0,0 +1,29 @@ +context('/src/GuideContent/ReadOnly/React/', () => { + before(() => { + cy.visit('/src/GuideContent/ReadOnly/React/') + }) + + beforeEach(() => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.clearContent() + }) + }) + + it('should be read-only', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setEditable(false) + cy.get('.ProseMirror').type('Edited: ') + + cy.get('.ProseMirror p:first').should('not.contain', 'Edited: ') + }) + }) + + it('should be editable', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setEditable(true) + cy.get('.ProseMirror').type('Edited: ') + + cy.get('.ProseMirror p:first').should('contain', 'Edited: ') + }) + }) +}) diff --git a/demos/src/GuideContent/ReadOnly/React/styles.scss b/demos/src/GuideContent/ReadOnly/React/styles.scss new file mode 100644 index 00000000..71e5d046 --- /dev/null +++ b/demos/src/GuideContent/ReadOnly/React/styles.scss @@ -0,0 +1,19 @@ +/* Basic editor styles */ +.ProseMirror { + > * + * { + margin-top: 0.75em; + } +} + +.checkbox { + margin-bottom: 1rem; + + input[type="checkbox"] { + margin-right: 0.5rem; + } +} + +[contenteditable="false"] { + color: #999; + cursor: not-allowed; +}