diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js b/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js index 31e36b4b..396e4bb5 100644 --- a/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js +++ b/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js @@ -1,8 +1,14 @@ context('/examples/export-html-or-json', () => { - beforeEach(() => { + before(() => { cy.visit('/examples/export-html-or-json') }) + beforeEach(() => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('

Example Text

') + }) + }) + it('should return json', () => { cy.get('.ProseMirror').then(([{ editor }]) => { const json = editor.json() @@ -15,33 +21,7 @@ context('/examples/export-html-or-json', () => { content: [ { type: 'text', - text: 'You are able to export your data as ', - }, - { - type: 'text', - marks: [ - { - type: 'code', - }, - ], - text: 'HTML', - }, - { - type: 'text', - text: ' or ', - }, - { - type: 'text', - marks: [ - { - type: 'code', - }, - ], - text: 'JSON', - }, - { - type: 'text', - text: '.', + text: 'Example Text', }, ], }, @@ -54,7 +34,7 @@ context('/examples/export-html-or-json', () => { cy.get('.ProseMirror').then(([{ editor }]) => { const html = editor.html() - expect(html).to.equal('

You are able to export your data as HTML or JSON.

') + expect(html).to.equal('

Example Text

') }) }) }) diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue index c10b0369..d4e08f1e 100644 --- a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue +++ b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue @@ -1,7 +1,5 @@ @@ -41,7 +40,10 @@ export default { this.editor = new Editor({ content: `

- You are able to export your data as HTML or JSON. + What would be a text editor without content. At some point you want to get the content out of the editor and yes, we got you covered. There are two methods to export the current document as HTML or JSON. +

+

+ You can hook into the update event to get the content after every single change. How cool is that?

`, extensions: defaultExtensions(), diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/style.scss b/docs/src/demos/Examples/ExportHtmlOrJson/style.scss index 5d0cae1c..8efcfbce 100644 --- a/docs/src/demos/Examples/ExportHtmlOrJson/style.scss +++ b/docs/src/demos/Examples/ExportHtmlOrJson/style.scss @@ -1,12 +1,16 @@ .export { + h3 { + margin: 0.5rem 0; + } pre { border-radius: 5px; - font-size: 0.8rem; - color: rgba($colorBlack, 0.8); + color: #333; } code { display: block; white-space: pre-wrap; + font-size: 0.8rem; + padding: 1rem; } -} \ No newline at end of file +} diff --git a/docs/src/demos/Examples/History/index.vue b/docs/src/demos/Examples/History/index.vue index c5cb52a2..578c3926 100644 --- a/docs/src/demos/Examples/History/index.vue +++ b/docs/src/demos/Examples/History/index.vue @@ -29,11 +29,11 @@ export default { mounted() { this.editor = new Editor({ content: ` -

- History -

- Try to change some content here. With the History extension you are able to undo and redo your changes. You can also use keyboard shortcuts for this (Control/Command + Z and Control/Command + Shift + Z). + With the History extension the Editor will keep track of your changes. And if you think you made a mistake, you can redo your changes. Try it out, change the content and hit the undo button! +

+

+ And yes, you can also use a keyboard shortcut to undo changes (Control/Cmd Z) or redo changes (Control/Cmd Shift Z).

`, extensions: defaultExtensions(), diff --git a/docs/src/demos/Examples/MarkdownShortcuts/index.vue b/docs/src/demos/Examples/MarkdownShortcuts/index.vue index e1506213..bfc9db5e 100644 --- a/docs/src/demos/Examples/MarkdownShortcuts/index.vue +++ b/docs/src/demos/Examples/MarkdownShortcuts/index.vue @@ -22,13 +22,13 @@ export default { this.editor = new Editor({ content: `

- Start a new line and type # followed by a space to get a headline. Try #, ##, ###, ####, #####, ###### for different levels. + Start a new line and type # followed by a space to get a heading. Try #, ##, ###, ####, #####, ###### for different levels.

- Those conventions are called input rules in tiptap. Some of those shortcuts are enabled by default. Try > for blockquotes, *, - or + for bullet lists, \`foobar\` to highlight code. + Those conventions are called input rules in tiptap. Some of them are enabled by default. Try > for blockquotes, *, - or + for bullet lists, or \`foobar\` to highlight code.

- You can add your own input rules through adding the inputRules() method in your nodes and marks. + You can add your own input rules to your Nodes and Marks or even to the default ones.

`, extensions: defaultExtensions(), diff --git a/docs/src/demos/Examples/Minimalist/index.spec.js b/docs/src/demos/Examples/Minimalist/index.spec.js new file mode 100644 index 00000000..2dc1118f --- /dev/null +++ b/docs/src/demos/Examples/Minimalist/index.spec.js @@ -0,0 +1,5 @@ +context('/examples/minimalist', () => { + before(() => { + cy.visit('/examples/minimalist') + }) +}) diff --git a/docs/src/demos/Examples/Simple/index.vue b/docs/src/demos/Examples/Minimalist/index.vue similarity index 100% rename from docs/src/demos/Examples/Simple/index.vue rename to docs/src/demos/Examples/Minimalist/index.vue diff --git a/docs/src/demos/Examples/ReadOnly/style.scss b/docs/src/demos/Examples/ReadOnly/style.scss index 7824a4e9..5b903400 100644 --- a/docs/src/demos/Examples/ReadOnly/style.scss +++ b/docs/src/demos/Examples/ReadOnly/style.scss @@ -4,4 +4,8 @@ input[type="checkbox"] { margin-right: 0.5rem; } -} \ No newline at end of file +} + +[contenteditable=false] { + color: #999; +} diff --git a/docs/src/demos/Examples/Simple/index.spec.js b/docs/src/demos/Examples/Simple/index.spec.js deleted file mode 100644 index 4d3c52e0..00000000 --- a/docs/src/demos/Examples/Simple/index.spec.js +++ /dev/null @@ -1,5 +0,0 @@ -context('/examples/simple', () => { - before(() => { - cy.visit('/examples/simple') - }) -}) diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md index 5cb0a751..5b1d344d 100644 --- a/docs/src/docPages/api/extensions.md +++ b/docs/src/docPages/api/extensions.md @@ -4,7 +4,7 @@ Extensions are the way to add functionality to tiptap. By default tiptap comes b ## A minimalist set of extensions -You’ll need at least three extensions: Document, Paragraph and Text. See [an example of a tiptap version for minimalists](/examples/simple). +You’ll need at least three extensions: Document, Paragraph and Text. See [an example of a tiptap version for minimalists](/examples/minimalist). ## Default extensions diff --git a/docs/src/docPages/examples/minimalist.md b/docs/src/docPages/examples/minimalist.md new file mode 100644 index 00000000..5505bbae --- /dev/null +++ b/docs/src/docPages/examples/minimalist.md @@ -0,0 +1,3 @@ +# Minimalist + + diff --git a/docs/src/docPages/examples/simple.md b/docs/src/docPages/examples/simple.md deleted file mode 100644 index 681b3cbe..00000000 --- a/docs/src/docPages/examples/simple.md +++ /dev/null @@ -1,3 +0,0 @@ -# Simple - - \ No newline at end of file diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 9bb8a2a3..b9a34bce 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -33,8 +33,6 @@ items: - title: Basic link: /examples/basic - - title: Simple - link: /examples/simple # - title: Menu Bubble # link: /examples/menu-bubble # draft: true @@ -77,8 +75,8 @@ # - title: Placeholder # link: /examples/placeholder # draft: true - - title: Focus - link: /examples/focus + # - title: Focus + # link: /examples/focus # - title: Collaboration # link: /examples/collaboration # draft: true @@ -91,6 +89,8 @@ # - title: Drag Handle # link: /examples/drag-handle # draft: true + - title: Minimalist + link: /examples/minimalist - title: Export HTML or JSON link: /examples/export-html-or-json