ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add ExportJSON for React

Browse Source
This commit is contained in:
svenadlung
2021-11-16 19:11:45 +01:00
parent 7749eaa18a
commit c2de06bb26
4 changed files with 220 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
demos/src/GuideContent/ExportJSON/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/ExportJSON", source);
</script>
</body>
</html>

96
demos/src/GuideContent/ExportJSON/React/index.jsx Normal file
View File

@@ -0,0 +1,96 @@
import React, { useState, useEffect, useCallback } from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import './styles.scss'
export default () => {
const [json, setJson] = useState(null)
const editor = useEditor({
content: `
<p>
Wow, this editor instance exports its content as JSON.
</p>
`,
extensions: [StarterKit],
})
useEffect(() => {
if (!editor) {
return null
}
// Get the initial content …
setJson(editor.getJSON())
// … and get the content after every change.
editor.on('update', () => {
setJson(editor.getJSON())
})
}, [editor])
const setContent = useCallback(() => {
// You can pass a JSON document to the editor.
editor.commands.setContent(
{
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'It’s 19871. You can’t turn on a radio, or go to a mall without hearing Olivia Newton-John’s hit song, Physical.',
},
],
},
],
},
true,
)
// It’s likely that you’d like to focus the Editor after most commands.
editor.commands.focus()
}, [editor])
const clearContent = useCallback(() => {
editor.chain().clearContent(true).focus().run()
}, [editor])
if (!editor) {
return null
}
return (
<>
<div className="actions">
<button className="button" onClick={setContent}>
Set Content
</button>
<button className="button" onClick={clearContent}>
Clear Content
</button>
<button
onClick={() => editor.chain().focus().toggleBold().run()}
className={editor.isActive('bold') ? 'is-active' : ''}
>
Bold
</button>
<button
onClick={() => editor.chain().focus().toggleItalic().run()}
className={editor.isActive('italic') ? 'is-active' : ''}
>
Italic
</button>
</div>
<EditorContent editor={editor} />
<div className="export">
<h3>JSON</h3>
<pre>
<code>{JSON.stringify(json)}</code>
</pre>
</div>
</>
)
}

32
demos/src/GuideContent/ExportJSON/React/index.spec.js Normal file
View File

@@ -0,0 +1,32 @@
context('/src/GuideContent/ExportJSON/React/', () => {
before(() => {
cy.visit('/src/GuideContent/ExportJSON/React/')
})
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.commands.setContent('<p>Example Text</p>')
})
})
it('should return json', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
const json = editor.getJSON()
expect(json).to.deep.equal({
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Example Text',
},
],
},
],
})
})
})
})

77
demos/src/GuideContent/ExportJSON/React/styles.scss Normal file
View File

@@ -0,0 +1,77 @@
/* Style the export */
.export {
padding: 1rem 0 0;
h3 {
margin: 1rem 0 0.5rem;
}
pre {
border-radius: 5px;
color: #333;
}
code {
background-color: #e9ecef;
color: #495057;
display: block;
font-size: 0.8rem;
padding: 0.75rem 1rem;
white-space: pre-wrap;
}
}
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
ul,
ol {
padding: 0 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
}
code {
background-color: rgba(#616161, 0.1);
color: #616161;
}
pre {
background: #0d0d0d;
border-radius: 0.5rem;
color: #fff;
font-family: "JetBrainsMono", monospace;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
img {
height: auto;
max-width: 100%;
}
hr {
margin: 1rem 0;
}
blockquote {
border-left: 2px solid rgba(#0d0d0d, 0.1);
padding-left: 1rem;
}
}