From d6286e5d5c73938f12ca1048cbb3b6c7a0a7dfd8 Mon Sep 17 00:00:00 2001 From: svenadlung Date: Tue, 16 Nov 2021 20:28:31 +0100 Subject: [PATCH] Add GenerateText demo for React --- .../GenerateText/React/index.html | 15 +++++ .../GuideContent/GenerateText/React/index.jsx | 62 +++++++++++++++++++ .../GenerateText/React/index.spec.js | 7 +++ 3 files changed, 84 insertions(+) create mode 100644 demos/src/GuideContent/GenerateText/React/index.html create mode 100644 demos/src/GuideContent/GenerateText/React/index.jsx create mode 100644 demos/src/GuideContent/GenerateText/React/index.spec.js diff --git a/demos/src/GuideContent/GenerateText/React/index.html b/demos/src/GuideContent/GenerateText/React/index.html new file mode 100644 index 000000000..18018e1da --- /dev/null +++ b/demos/src/GuideContent/GenerateText/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/GuideContent/GenerateText/React/index.jsx b/demos/src/GuideContent/GenerateText/React/index.jsx new file mode 100644 index 000000000..c2bcdc47a --- /dev/null +++ b/demos/src/GuideContent/GenerateText/React/index.jsx @@ -0,0 +1,62 @@ +import React, { useMemo } from 'react' +import { generateText } from '@tiptap/core' +import Document from '@tiptap/extension-document' +import Paragraph from '@tiptap/extension-paragraph' +import Text from '@tiptap/extension-text' +import HardBreak from '@tiptap/extension-hard-break' + +const json = { + type: 'doc', + content: [ + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'This is a paragraph.', + }, + ], + }, + { + type: 'paragraph', + content: [ + { + type: 'text', + text: 'Here is another paragraph …', + }, + { + type: 'hardBreak', + }, + { + type: 'text', + text: '… with an hard break.', + }, + ], + }, + ], +} + +export default () => { + const output = useMemo(() => { + return generateText( + json, + [ + Document, + Paragraph, + Text, + HardBreak, + // other extensions … + ], + { + // define a custom block separator if you want to + blockSeparator: '\n\n', + }, + ) + }, [json]) + + return ( + 
+      {output}
+
+ ) +} diff --git a/demos/src/GuideContent/GenerateText/React/index.spec.js b/demos/src/GuideContent/GenerateText/React/index.spec.js new file mode 100644 index 000000000..91e29475d --- /dev/null +++ b/demos/src/GuideContent/GenerateText/React/index.spec.js @@ -0,0 +1,7 @@ +context('/src/GuideContent/GenerateText/React/', () => { + before(() => { + cy.visit('/src/GuideContent/GenerateText/React/') + }) + + // TODO: Write tests +})