mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-07 17:43:49 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Add ReadOnly demo for React

Browse Source
This commit is contained in:
svenadlung 2021-11-16 19:27:54 +01:00
parent 5fcd4beffb
commit 152b0d328e
4 changed files with 110 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
demos/src/GuideContent/ReadOnly/React/index.html Normal file
View File

@ -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.ts";
import source from "@source";
setup("GuideContent/ReadOnly", source);
</script>
</body>
</html>

47
demos/src/GuideContent/ReadOnly/React/index.jsx Normal file
View File

@ -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: `
<p>
This text is <strong>read-only</strong>. 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.
</p>
<p>
If you want to check the state, you can call <code>editor.isEditable()</code>.
</p>
`,
extensions: [StarterKit],
})
useEffect(() => {
if (!editor) {
return null
}
editor.setEditable(editable)
}, [editor, editable])
if (!editor) {
return null
}
return (
<>
<div className="checkbox">
<input
type="checkbox"
id="editable"
value={editable}
onChange={event => setEditable(event.target.checked)}
/>
<label htmlFor="editable">editable</label>
</div>
<EditorContent editor={editor} />
</>
)
}

29
demos/src/GuideContent/ReadOnly/React/index.spec.js Normal file
View File

@ -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: ')
})
})
})

19
demos/src/GuideContent/ReadOnly/React/styles.scss Normal file
View File

@ -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;
}