+ Poggio + +
- this is a basic example of tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists: + this is a basic example of Tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
Hello World
This is a paragraph
with a break.
And this is some additional string content.
') + cy.get('.tiptap').should('contain.html', 'Hello World
This is a paragraph
with a break.
And this is some additional string content.
') }) it('should keep spaces inbetween tags in html content', () => { @@ -41,4 +41,78 @@ context('/src/Commands/InsertContent/React/', () => { cy.get('.tiptap').should('contain.html', 'foo\nbarHello\n\tworld\n\t\thow\n\t\t\tnice.\ntest\tOK
') + cy.get('.tiptap').should('contain.html', 'Hello\n\tworld\n\t\thow\n\t\t\tnice.\ntest\tOK
') + }) + }) + + it('should keep newlines and tabs', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.insertContent('Hello World
') + cy.get('.tiptap').should('contain.html', 'Hello World
') + }) + }) + + it('should allow inserting nothing', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.insertContent('') + cy.get('.tiptap').should('contain.html', '') + }) + }) + + it('should allow inserting a partial HTML tag', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.insertContent('foo') + cy.get('.tiptap').should('contain.html', '
foo
') + }) + }) + + it('should allow inserting an incomplete HTML tag', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.insertContent('fooABC
123
Hello\n World\n
\n', { parseOptions: { preserveWhitespace: false } }) + cy.get('.tiptap').should('contain.html', 'Hello World
') + }) + }) + + it('should respect editor.options.parseOptions if defined to be `false`', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.options.parseOptions = { preserveWhitespace: false } + editor.commands.insertContent('\nHello\n World\n
\n') + cy.get('.tiptap').should('contain.html', 'Hello World
') + }) + }) + + it('should respect editor.options.parseOptions if defined to be `full`', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.options.parseOptions = { preserveWhitespace: 'full' } + editor.commands.insertContent('\nHello\n World\n
\n') + cy.get('.tiptap').should('contain.html', 'Hello\n World
') + }) + }) + + it('should respect editor.options.parseOptions if defined to be `true`', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.options.parseOptions = { preserveWhitespace: true } + editor.commands.insertContent('Hello\n World\n
') + cy.get('.tiptap').should('contain.html', 'Hello World
') + }) + }) + }) diff --git a/demos/src/Commands/InsertContent/React/styles.scss b/demos/src/Commands/InsertContent/React/styles.scss index 4d2b2c81e..7694d7322 100644 --- a/demos/src/Commands/InsertContent/React/styles.scss +++ b/demos/src/Commands/InsertContent/React/styles.scss @@ -1,56 +1,91 @@ /* Basic editor styles */ .tiptap { - > * + * { - margin-top: 0.75em; + :first-child { + margin-top: 0; } - ul, + /* List styles */ + 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; - color: #FFF; - font-family: 'JetBrainsMono', monospace; - padding: 0.75rem 1rem; - border-radius: 0.5rem; - - code { - color: inherit; - padding: 0; - background: none; - font-size: 0.8rem; + margin: 1.25rem 1rem 1.25rem 0.4rem; + + li p { + margin-top: 0.25em; + margin-bottom: 0.25em; } } - img { - max-width: 100%; - height: auto; + /* Heading styles */ + h1, + h2, + h3, + h4, + h5, + h6 { + line-height: 1.1; + margin-top: 2.5rem; + text-wrap: pretty; + } + + h1, + h2 { + margin-top: 3.5rem; + margin-bottom: 1.5rem; + } + + h1 { + font-size: 1.4rem; + } + + h2 { + font-size: 1.2rem; + } + + h3 { + font-size: 1.1rem; + } + + h4, + h5, + h6 { + font-size: 1rem; + } + + /* Code and preformatted text styles */ + code { + background-color: var(--purple-light); + border-radius: 0.4rem; + color: var(--black); + font-size: 0.85rem; + padding: 0.25em 0.3em; + } + + pre { + background: var(--black); + border-radius: 0.5rem; + color: var(--white); + font-family: 'JetBrainsMono', monospace; + margin: 1.5rem 0; + padding: 0.75rem 1rem; + + code { + background: none; + color: inherit; + font-size: 0.8rem; + padding: 0; + } } blockquote { + border-left: 3px solid var(--gray-3); + margin: 1.5rem 0; padding-left: 1rem; - border-left: 2px solid rgba(#0D0D0D, 0.1); } hr { border: none; - border-top: 2px solid rgba(#0D0D0D, 0.1); + border-top: 1px solid var(--gray-2); margin: 2rem 0; } } diff --git a/demos/src/Commands/InsertContentApplyingRules/React/index.jsx b/demos/src/Commands/InsertContentApplyingRules/React/index.jsx index 1f8036053..c41d3ade9 100644 --- a/demos/src/Commands/InsertContentApplyingRules/React/index.jsx +++ b/demos/src/Commands/InsertContentApplyingRules/React/index.jsx @@ -14,154 +14,152 @@ const MenuBar = () => { } return ( - <> +Hello World.
') + }) + }) + + it('should insert raw JSON content', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent({ type: 'paragraph', content: [{ type: 'text', text: 'Hello World.' }] }) + cy.get('.tiptap').should('contain.html', 'Hello World.
') + }) + }) + + it('should insert a Prosemirror Node as content', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent(editor.schema.node('paragraph', null, editor.schema.text('Hello World.'))) + cy.get('.tiptap').should('contain.html', 'Hello World.
') + }) + }) + + it('should insert a Prosemirror Fragment as content', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent(editor.schema.node('doc', null, editor.schema.node('paragraph', null, editor.schema.text('Hello World.'))).content) + cy.get('.tiptap').should('contain.html', 'Hello World.
') + }) + }) + + it('should emit updates', () => { + cy.get('.tiptap').then(([{ editor }]) => { + let updateCount = 0 + const callback = () => { + updateCount += 1 + } + + editor.on('update', callback) + // emit an update + editor.commands.setContent('Hello World.', true) + expect(updateCount).to.equal(1) + + updateCount = 0 + // do not emit an update + editor.commands.setContent('Hello World again.', false) + expect(updateCount).to.equal(0) + editor.off('update', callback) + }) + }) + + it('should insert more complex html content', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('This is a paragraph.
List Item A
List Item B
Subchild
This is a paragraph.
List Item A
List Item B
Subchild
Hello\n\tworld\n\t\thow\n\t\t\tnice.
') + cy.get('.tiptap').should('contain.html', 'Hello world how nice.
') + }) + }) + + it('should keep newlines and tabs when preserveWhitespace = full', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('Hello\n\tworld\n\t\thow\n\t\t\tnice.
', false, { preserveWhitespace: 'full' }) + cy.get('.tiptap').should('contain.html', 'Hello\n\tworld\n\t\thow\n\t\t\tnice.
') + }) + }) + + it('should overwrite existing content', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('Initial Content
') + cy.get('.tiptap').should('contain.html', 'Initial Content
') + }) + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('Overwritten Content
') + cy.get('.tiptap').should('contain.html', 'Overwritten Content
') + }) + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('Content without tags') + cy.get('.tiptap').should('contain.html', 'Content without tags
') + }) + }) + + it('should insert mentions', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('@John Doe
') + cy.get('.tiptap').should('contain.html', '@John Doe') + }) + }) + + it('should remove newlines and tabs between html fragments', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('Hello World
') + cy.get('.tiptap').should('contain.html', 'Hello World
') + }) + }) + + // TODO I'm not certain about this behavior and what it should do... + // This exists in insertContentAt as well + it('should keep newlines and tabs between html fragments when preserveWhitespace = full', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('Hello World
', false, { preserveWhitespace: 'full' }) + cy.get('.tiptap').should('contain.html', '\n\t
Hello World
') + }) + }) + + it('should allow inserting nothing', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('') + cy.get('.tiptap').should('contain.html', '') + }) + }) + + it('should allow inserting nothing when preserveWhitespace = full', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('', false, { preserveWhitespace: 'full' }) + cy.get('.tiptap').should('contain.html', '') + }) + }) + + it('should allow inserting a partial HTML tag', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('foo') + cy.get('.tiptap').should('contain.html', '
foo
') + }) + }) + + it('should allow inserting a partial HTML tag when preserveWhitespace = full', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('foo', false, { preserveWhitespace: 'full' }) + cy.get('.tiptap').should('contain.html', '
foo
') + }) + }) + + it('will remove an incomplete HTML tag', () => { + cy.get('.tiptap').then(([{ editor }]) => { + editor.commands.setContent('fooABC
123
ABC
123
Hello\n World\n
\n', false, { preserveWhitespace: false }) + cy.get('.tiptap').should('contain.html', 'Hello World
') + }) + }) +}) diff --git a/demos/src/Commands/SetContent/React/styles.scss b/demos/src/Commands/SetContent/React/styles.scss new file mode 100644 index 000000000..4d2b2c81e --- /dev/null +++ b/demos/src/Commands/SetContent/React/styles.scss @@ -0,0 +1,56 @@ +/* Basic editor styles */ +.tiptap { + > * + * { + 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; + color: #FFF; + font-family: 'JetBrainsMono', monospace; + padding: 0.75rem 1rem; + border-radius: 0.5rem; + + code { + color: inherit; + padding: 0; + background: none; + font-size: 0.8rem; + } + } + + img { + max-width: 100%; + height: auto; + } + + blockquote { + padding-left: 1rem; + border-left: 2px solid rgba(#0D0D0D, 0.1); + } + + hr { + border: none; + border-top: 2px solid rgba(#0D0D0D, 0.1); + margin: 2rem 0; + } +} diff --git a/demos/src/Demos/CollaborationSplitPane/React/Editor.jsx b/demos/src/Demos/CollaborationSplitPane/React/Editor.jsx new file mode 100644 index 000000000..dbf486379 --- /dev/null +++ b/demos/src/Demos/CollaborationSplitPane/React/Editor.jsx @@ -0,0 +1,209 @@ +import CharacterCount from '@tiptap/extension-character-count' +import Collaboration from '@tiptap/extension-collaboration' +import CollaborationCursor from '@tiptap/extension-collaboration-cursor' +import Highlight from '@tiptap/extension-highlight' +import TaskItem from '@tiptap/extension-task-item' +import TaskList from '@tiptap/extension-task-list' +import { EditorContent, useEditor } from '@tiptap/react' +import StarterKit from '@tiptap/starter-kit' +import React, { useCallback, useEffect, useState } from 'react' + +const colors = [ + '#958DF1', + '#F98181', + '#FBBC88', + '#FAF594', + '#70CFF8', + '#94FADB', + '#B9F18D', + '#C3E2C2', + '#EAECCC', + '#AFC8AD', + '#EEC759', + '#9BB8CD', + '#FF90BC', + '#FFC0D9', + '#DC8686', + '#7ED7C1', + '#F3EEEA', + '#89B9AD', + '#D0BFFF', + '#FFF8C9', + '#CBFFA9', + '#9BABB8', + '#E3F4F4', +] +const names = [ + 'Lea Thompson', + 'Cyndi Lauper', + 'Tom Cruise', + 'Madonna', + 'Jerry Hall', + 'Joan Collins', + 'Winona Ryder', + 'Christina Applegate', + 'Alyssa Milano', + 'Molly Ringwald', + 'Ally Sheedy', + 'Debbie Harry', + 'Olivia Newton-John', + 'Elton John', + 'Michael J. Fox', + 'Axl Rose', + 'Emilio Estevez', + 'Ralph Macchio', + 'Rob Lowe', + 'Jennifer Grey', + 'Mickey Rourke', + 'John Cusack', + 'Matthew Broderick', + 'Justine Bateman', + 'Lisa Bonet', +] + +const defaultContent = ` +Hi 👋, this is a collaborative document.
+Feel free to edit and collaborate in real-time!
+` + +const getRandomElement = list => list[Math.floor(Math.random() * list.length)] + +const getRandomColor = () => getRandomElement(colors) +const getRandomName = () => getRandomElement(names) + +const getInitialUser = () => { + return { + name: getRandomName(), + color: getRandomColor(), + } +} + +const Editor = ({ + ydoc, provider, room, +}) => { + const [status, setStatus] = useState('connecting') + const [currentUser, setCurrentUser] = useState(getInitialUser) + + const editor = useEditor({ + enableContentCheck: true, + onContentError: ({ disableCollaboration }) => { + disableCollaboration() + }, + onCreate: ({ editor: currentEditor }) => { + provider.on('synced', () => { + if (currentEditor.isEmpty) { + currentEditor.commands.setContent(defaultContent) + } + }) + }, + extensions: [ + StarterKit.configure({ + history: false, + }), + Highlight, + TaskList, + TaskItem, + CharacterCount.extend().configure({ + limit: 10000, + }), + Collaboration.extend().configure({ + document: ydoc, + }), + CollaborationCursor.extend().configure({ + provider, + }), + ], + }) + + useEffect(() => { + // Update status changes + const statusHandler = event => { + setStatus(event.status) + } + + provider.on('status', statusHandler) + + return () => { + provider.off('status', statusHandler) + } + }, [provider]) + + // Save current user to localStorage and emit to editor + useEffect(() => { + if (editor && currentUser) { + localStorage.setItem('currentUser', JSON.stringify(currentUser)) + editor.chain().focus().updateUser(currentUser).run() + } + }, [editor, currentUser]) + + const setName = useCallback(() => { + const name = (window.prompt('Name', currentUser.name) || '').trim().substring(0, 32) + + if (name) { + return setCurrentUser({ ...currentUser, name }) + } + }, [currentUser]) + + if (!editor) { + return null + } + + return ( +- That’s a boring paragraph followed by a fenced code block: + That's a boring paragraph followed by a fenced code block:
for (var i=1; i <= 20; i++)
{
@@ -88,24 +91,26 @@ export default {
diff --git a/demos/src/Examples/Community/Vue/index.spec.js b/demos/src/Examples/Community/Vue/index.spec.js
index ea6a1aa63..e403e10b0 100644
--- a/demos/src/Examples/Community/Vue/index.spec.js
+++ b/demos/src/Examples/Community/Vue/index.spec.js
@@ -4,33 +4,33 @@ context('/src/Examples/Community/Vue/', () => {
})
it('should count the characters correctly', () => {
- // check if count text is "44/280 characters"
- cy.get('.character-count__text').should('have.text', '44/280 characters')
+ // check if count text is "44 / 280 characters"
+ cy.get('.character-count').should('contain', '44 / 280 characters')
// type in .tiptap
cy.get('.tiptap').type(' Hello World')
- cy.get('.character-count__text').should('have.text', '56/280 characters')
+ cy.get('.character-count').should('contain', '56 / 280 characters')
// remove content from .tiptap and enter text
cy.get('.tiptap').type('{selectall}{backspace}Hello World')
- cy.get('.character-count__text').should('have.text', '11/280 characters')
+ cy.get('.character-count').should('contain', '11 / 280 characters')
})
it('should mention a user', () => {
cy.get('.tiptap').type('{selectall}{backspace}@')
// check if the mention autocomplete is visible
- cy.get('.tippy-content .items').should('be.visible')
+ cy.get('.tippy-content .dropdown-menu').should('be.visible')
// select the first user
- cy.get('.tippy-content .items .item').first().then($el => {
+ cy.get('.tippy-content .dropdown-menu button').first().then($el => {
const name = $el.text()
$el.click()
// check if the user is mentioned
cy.get('.tiptap').should('have.text', `@${name} `)
- cy.get('.character-count__text').should('have.text', '2/280 characters')
+ cy.get('.character-count').should('contain', '2 / 280 characters')
})
})
diff --git a/demos/src/Examples/Community/Vue/index.vue b/demos/src/Examples/Community/Vue/index.vue
index 33c9bea14..88dfcf50f 100644
--- a/demos/src/Examples/Community/Vue/index.vue
+++ b/demos/src/Examples/Community/Vue/index.vue
@@ -6,7 +6,6 @@
height="20"
width="20"
viewBox="0 0 20 20"
- class="character-count__graph"
>
- this is a basic example of tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists: + this is a basic example of Tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
body {
-display: none;
+ display: none;
}I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too. diff --git a/demos/src/Examples/Default/React/index.spec.js b/demos/src/Examples/Default/React/index.spec.js index b23e72c17..005560dee 100644 --- a/demos/src/Examples/Default/React/index.spec.js +++ b/demos/src/Examples/Default/React/index.spec.js @@ -21,41 +21,41 @@ context('/src/Examples/Default/React/', () => { }) const buttonMarks = [ - { label: 'bold', tag: 'strong' }, - { label: 'italic', tag: 'em' }, - { label: 'strike', tag: 's' }, + { label: 'Bold', tag: 'strong' }, + { label: 'Italic', tag: 'em' }, + { label: 'Strike', tag: 's' }, ] buttonMarks.forEach(m => { it(`should disable ${m.label} when the code tag is enabled for cursor`, () => { cy.get('.tiptap').type('{selectall}Hello world') - cy.get('button').contains('code').click() + cy.get('button').contains('Code').click() cy.get('button').contains(m.label).should('be.disabled') }) it(`should enable ${m.label} when the code tag is disabled for cursor`, () => { cy.get('.tiptap').type('{selectall}Hello world') - cy.get('button').contains('code').click() - cy.get('button').contains('code').click() + cy.get('button').contains('Code').click() + cy.get('button').contains('Code').click() cy.get('button').contains(m.label).should('not.be.disabled') }) it(`should disable ${m.label} when the code tag is enabled for selection`, () => { cy.get('.tiptap').type('{selectall}Hello world{selectall}') - cy.get('button').contains('code').click() + cy.get('button').contains('Code').click() cy.get('button').contains(m.label).should('be.disabled') }) it(`should enable ${m.label} when the code tag is disabled for selection`, () => { cy.get('.tiptap').type('{selectall}Hello world{selectall}') - cy.get('button').contains('code').click() - cy.get('button').contains('code').click() + cy.get('button').contains('Code').click() + cy.get('button').contains('Code').click() cy.get('button').contains(m.label).should('not.be.disabled') }) it(`should apply ${m.label} when the button is pressed`, () => { cy.get('.tiptap').type('{selectall}Hello world') - cy.get('button').contains('paragraph').click() + cy.get('button').contains('Paragraph').click() cy.get('.tiptap').type('{selectall}') cy.get('button').contains(m.label).click() cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world') @@ -64,40 +64,40 @@ context('/src/Examples/Default/React/', () => { it('should clear marks when the button is pressed', () => { cy.get('.tiptap').type('{selectall}Hello world') - cy.get('button').contains('paragraph').click() + cy.get('button').contains('Paragraph').click() cy.get('.tiptap').type('{selectall}') - cy.get('button').contains('bold').click() + cy.get('button').contains('Bold').click() cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world') - cy.get('button').contains('clear marks').click() + cy.get('button').contains('Clear marks').click() cy.get('.tiptap strong').should('not.exist') }) it('should clear nodes when the button is pressed', () => { cy.get('.tiptap').type('{selectall}Hello world') - cy.get('button').contains('bullet list').click() + cy.get('button').contains('Bullet list').click() cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world') cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}') - cy.get('button').contains('clear nodes').click() + cy.get('button').contains('Clear nodes').click() cy.get('.tiptap ul').should('not.exist') cy.get('.tiptap p').should('have.length', 3) }) const buttonNodes = [ - { label: 'h1', tag: 'h1' }, - { label: 'h2', tag: 'h2' }, - { label: 'h3', tag: 'h3' }, - { label: 'h4', tag: 'h4' }, - { label: 'h5', tag: 'h5' }, - { label: 'h6', tag: 'h6' }, - { label: 'bullet list', tag: 'ul' }, - { label: 'ordered list', tag: 'ol' }, - { label: 'code block', tag: 'pre code' }, - { label: 'blockquote', tag: 'blockquote' }, + { label: 'H1', tag: 'h1' }, + { label: 'H2', tag: 'h2' }, + { label: 'H3', tag: 'h3' }, + { label: 'H4', tag: 'h4' }, + { label: 'H5', tag: 'h5' }, + { label: 'H6', tag: 'h6' }, + { label: 'Bullet list', tag: 'ul' }, + { label: 'Ordered list', tag: 'ol' }, + { label: 'Code block', tag: 'pre code' }, + { label: 'Blockquote', tag: 'blockquote' }, ] buttonNodes.forEach(n => { it(`should set ${n.label} when the button is pressed`, () => { - cy.get('button').contains('paragraph').click() + cy.get('button').contains('Paragraph').click() cy.get('.tiptap').type('{selectall}Hello world{selectall}') cy.get('button').contains(n.label).click() @@ -109,35 +109,35 @@ context('/src/Examples/Default/React/', () => { it('should add a hr when on the same line as a node', () => { cy.get('.tiptap').type('{rightArrow}') - cy.get('button').contains('horizontal rule').click() + cy.get('button').contains('Horizontal rule').click() cy.get('.tiptap hr').should('exist') cy.get('.tiptap h1').should('exist') }) it('should add a hr when on a new line', () => { cy.get('.tiptap').type('{rightArrow}{enter}') - cy.get('button').contains('horizontal rule').click() + cy.get('button').contains('Horizontal rule').click() cy.get('.tiptap hr').should('exist') cy.get('.tiptap h1').should('exist') }) it('should add a br', () => { cy.get('.tiptap').type('{rightArrow}') - cy.get('button').contains('hard break').click() + cy.get('button').contains('Hard break').click() cy.get('.tiptap h1 br').should('exist') }) it('should undo', () => { cy.get('.tiptap').type('{selectall}{backspace}') - cy.get('button').contains('undo').click() + cy.get('button').contains('Undo').click() cy.get('.tiptap').should('contain', 'Hello world') }) it('should redo', () => { cy.get('.tiptap').type('{selectall}{backspace}') - cy.get('button').contains('undo').click() + cy.get('button').contains('Undo').click() cy.get('.tiptap').should('contain', 'Hello world') - cy.get('button').contains('redo').click() + cy.get('button').contains('Redo').click() cy.get('.tiptap').should('not.contain', 'Hello world') }) }) diff --git a/demos/src/Examples/Default/React/styles.scss b/demos/src/Examples/Default/React/styles.scss index 4d2b2c81e..7694d7322 100644 --- a/demos/src/Examples/Default/React/styles.scss +++ b/demos/src/Examples/Default/React/styles.scss @@ -1,56 +1,91 @@ /* Basic editor styles */ .tiptap { - > * + * { - margin-top: 0.75em; + :first-child { + margin-top: 0; } - ul, + /* List styles */ + 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; - color: #FFF; - font-family: 'JetBrainsMono', monospace; - padding: 0.75rem 1rem; - border-radius: 0.5rem; - - code { - color: inherit; - padding: 0; - background: none; - font-size: 0.8rem; + margin: 1.25rem 1rem 1.25rem 0.4rem; + + li p { + margin-top: 0.25em; + margin-bottom: 0.25em; } } - img { - max-width: 100%; - height: auto; + /* Heading styles */ + h1, + h2, + h3, + h4, + h5, + h6 { + line-height: 1.1; + margin-top: 2.5rem; + text-wrap: pretty; + } + + h1, + h2 { + margin-top: 3.5rem; + margin-bottom: 1.5rem; + } + + h1 { + font-size: 1.4rem; + } + + h2 { + font-size: 1.2rem; + } + + h3 { + font-size: 1.1rem; + } + + h4, + h5, + h6 { + font-size: 1rem; + } + + /* Code and preformatted text styles */ + code { + background-color: var(--purple-light); + border-radius: 0.4rem; + color: var(--black); + font-size: 0.85rem; + padding: 0.25em 0.3em; + } + + pre { + background: var(--black); + border-radius: 0.5rem; + color: var(--white); + font-family: 'JetBrainsMono', monospace; + margin: 1.5rem 0; + padding: 0.75rem 1rem; + + code { + background: none; + color: inherit; + font-size: 0.8rem; + padding: 0; + } } blockquote { + border-left: 3px solid var(--gray-3); + margin: 1.5rem 0; padding-left: 1rem; - border-left: 2px solid rgba(#0D0D0D, 0.1); } hr { border: none; - border-top: 2px solid rgba(#0D0D0D, 0.1); + border-top: 1px solid var(--gray-2); margin: 2rem 0; } } diff --git a/demos/src/Examples/Default/Svelte/index.spec.js b/demos/src/Examples/Default/Svelte/index.spec.js index 4e2c71b79..dc0e1c0a5 100644 --- a/demos/src/Examples/Default/Svelte/index.spec.js +++ b/demos/src/Examples/Default/Svelte/index.spec.js @@ -21,15 +21,15 @@ context('/src/Examples/Default/React/', () => { }) const buttonMarks = [ - { label: 'bold', tag: 'strong' }, - { label: 'italic', tag: 'em' }, - { label: 'strike', tag: 's' }, + { label: 'Bold', tag: 'strong' }, + { label: 'Italic', tag: 'em' }, + { label: 'Strike', tag: 's' }, ] buttonMarks.forEach(m => { it(`should apply ${m.label} when the button is pressed`, () => { cy.get('.tiptap').type('{selectall}Hello world') - cy.get('button').contains('paragraph').click() + cy.get('button').contains('Paragraph').click() cy.get('.tiptap').type('{selectall}') cy.get('button').contains(m.label).click() cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world') @@ -38,40 +38,40 @@ context('/src/Examples/Default/React/', () => { it('should clear marks when the button is pressed', () => { cy.get('.tiptap').type('{selectall}Hello world') - cy.get('button').contains('paragraph').click() + cy.get('button').contains('Paragraph').click() cy.get('.tiptap').type('{selectall}') - cy.get('button').contains('bold').click() + cy.get('button').contains('Bold').click() cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world') - cy.get('button').contains('clear marks').click() + cy.get('button').contains('Clear marks').click() cy.get('.tiptap strong').should('not.exist') }) it('should clear nodes when the button is pressed', () => { cy.get('.tiptap').type('{selectall}Hello world') - cy.get('button').contains('bullet list').click() + cy.get('button').contains('Bullet list').click() cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world') cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}') - cy.get('button').contains('clear nodes').click() + cy.get('button').contains('Clear nodes').click() cy.get('.tiptap ul').should('not.exist') cy.get('.tiptap p').should('have.length', 3) }) const buttonNodes = [ - { label: 'h1', tag: 'h1' }, - { label: 'h2', tag: 'h2' }, - { label: 'h3', tag: 'h3' }, - { label: 'h4', tag: 'h4' }, - { label: 'h5', tag: 'h5' }, - { label: 'h6', tag: 'h6' }, - { label: 'bullet list', tag: 'ul' }, - { label: 'ordered list', tag: 'ol' }, - { label: 'code block', tag: 'pre code' }, - { label: 'blockquote', tag: 'blockquote' }, + { label: 'H1', tag: 'h1' }, + { label: 'H2', tag: 'h2' }, + { label: 'H3', tag: 'h3' }, + { label: 'H4', tag: 'h4' }, + { label: 'H5', tag: 'h5' }, + { label: 'H6', tag: 'h6' }, + { label: 'Bullet list', tag: 'ul' }, + { label: 'Ordered list', tag: 'ol' }, + { label: 'Code block', tag: 'pre code' }, + { label: 'Blockquote', tag: 'blockquote' }, ] buttonNodes.forEach(n => { it(`should set ${n.label} when the button is pressed`, () => { - cy.get('button').contains('paragraph').click() + cy.get('button').contains('Paragraph').click() cy.get('.tiptap').type('{selectall}Hello world{selectall}') cy.get('button').contains(n.label).click() @@ -83,35 +83,35 @@ context('/src/Examples/Default/React/', () => { it('should add a hr when on the same line as a node', () => { cy.get('.tiptap').type('{rightArrow}') - cy.get('button').contains('horizontal rule').click() + cy.get('button').contains('Horizontal rule').click() cy.get('.tiptap hr').should('exist') cy.get('.tiptap h1').should('exist') }) it('should add a hr when on a new line', () => { cy.get('.tiptap').type('{rightArrow}{enter}') - cy.get('button').contains('horizontal rule').click() + cy.get('button').contains('Horizontal rule').click() cy.get('.tiptap hr').should('exist') cy.get('.tiptap h1').should('exist') }) it('should add a br', () => { cy.get('.tiptap').type('{rightArrow}') - cy.get('button').contains('hard break').click() + cy.get('button').contains('Hard break').click() cy.get('.tiptap h1 br').should('exist') }) it('should undo', () => { cy.get('.tiptap').type('{selectall}{backspace}') - cy.get('button').contains('undo').click() + cy.get('button').contains('Undo').click() cy.get('.tiptap').should('contain', 'Hello world') }) it('should redo', () => { cy.get('.tiptap').type('{selectall}{backspace}') - cy.get('button').contains('undo').click() + cy.get('button').contains('Undo').click() cy.get('.tiptap').should('contain', 'Hello world') - cy.get('button').contains('redo').click() + cy.get('button').contains('Redo').click() cy.get('.tiptap').should('not.contain', 'Hello world') }) }) diff --git a/demos/src/Examples/Default/Svelte/index.svelte b/demos/src/Examples/Default/Svelte/index.svelte index d43c0f0e3..6e915f09d 100644 --- a/demos/src/Examples/Default/Svelte/index.svelte +++ b/demos/src/Examples/Default/Svelte/index.svelte @@ -1,6 +1,9 @@ {#if editor} -
{{ globalValue }}
+{{ appValue }}
+{{ indexValue }}
+{{ editorValue }}
+# followed by a space to get a heading. Try #, ##, ###, ####, #####, ###### for different levels.
- 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, ~~tildes~~ to strike text, or ==equal signs== to highlight text.
+ 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, ~~tildes~~ to strike text, or ==equal signs== to highlight text.
You can overwrite existing input rules or add your own to nodes, marks and extensions.
diff --git a/demos/src/Examples/MarkdownShortcuts/React/styles.scss b/demos/src/Examples/MarkdownShortcuts/React/styles.scss
index 6932a405b..d23c43fc9 100644
--- a/demos/src/Examples/MarkdownShortcuts/React/styles.scss
+++ b/demos/src/Examples/MarkdownShortcuts/React/styles.scss
@@ -1,53 +1,98 @@
+/* Basic editor styles */
.tiptap {
- > * + * {
- margin-top: 0.75em;
+ :first-child {
+ margin-top: 0;
}
- ul,
+ /* List styles */
+ 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;
- color: #FFF;
- font-family: 'JetBrainsMono', monospace;
- padding: 0.75rem 1rem;
- border-radius: 0.5rem;
-
- code {
- color: inherit;
- padding: 0;
- background: none;
- font-size: 0.8rem;
+ margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+ li p {
+ margin-top: 0.25em;
+ margin-bottom: 0.25em;
}
}
- img {
- max-width: 100%;
- height: auto;
+ /* Heading styles */
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ line-height: 1.1;
+ margin-top: 2.5rem;
+ text-wrap: pretty;
}
- hr {
- margin: 1rem 0;
+ h1,
+ h2 {
+ margin-top: 3.5rem;
+ margin-bottom: 1.5rem;
+ }
+
+ h1 {
+ font-size: 1.4rem;
+ }
+
+ h2 {
+ font-size: 1.2rem;
+ }
+
+ h3 {
+ font-size: 1.1rem;
+ }
+
+ h4,
+ h5,
+ h6 {
+ font-size: 1rem;
+ }
+
+ /* Code and preformatted text styles */
+ code {
+ background-color: var(--purple-light);
+ border-radius: 0.4rem;
+ color: var(--black);
+ font-size: 0.85rem;
+ padding: 0.25em 0.3em;
+ }
+
+ pre {
+ background: var(--black);
+ border-radius: 0.5rem;
+ color: var(--white);
+ font-family: 'JetBrainsMono', monospace;
+ margin: 1.5rem 0;
+ padding: 0.75rem 1rem;
+
+ code {
+ background: none;
+ color: inherit;
+ font-size: 0.8rem;
+ padding: 0;
+ }
+ }
+
+ mark {
+ background-color: #FAF594;
+ border-radius: 0.4rem;
+ box-decoration-break: clone;
+ padding: 0.1rem 0.3rem;
}
blockquote {
+ border-left: 3px solid var(--gray-3);
+ margin: 1.5rem 0;
padding-left: 1rem;
- border-left: 2px solid rgba(#0D0D0D, 0.1);
+ }
+
+ hr {
+ border: none;
+ border-top: 1px solid var(--gray-2);
+ margin: 2rem 0;
}
}
diff --git a/demos/src/Examples/MarkdownShortcuts/Vue/index.vue b/demos/src/Examples/MarkdownShortcuts/Vue/index.vue
index c2705ac76..034550d4a 100644
--- a/demos/src/Examples/MarkdownShortcuts/Vue/index.vue
+++ b/demos/src/Examples/MarkdownShortcuts/Vue/index.vue
@@ -34,7 +34,7 @@ export default {
To test that, 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 them are enabled by default. Try > for blockquotes, *, - or + for bullet lists, or \`foobar\` to highlight code, ~~tildes~~ to strike text, or ==equal signs== to highlight text.
+ 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, ~~tildes~~ to strike text, or ==equal signs== to highlight text.
You can overwrite existing input rules or add your own to nodes, marks and extensions. @@ -55,15 +55,23 @@ export default { diff --git a/demos/src/Examples/Menus/React/index.jsx b/demos/src/Examples/Menus/React/index.jsx index c6a86209b..b05c7e1f7 100644 --- a/demos/src/Examples/Menus/React/index.jsx +++ b/demos/src/Examples/Menus/React/index.jsx @@ -64,7 +64,7 @@ export default () => { onClick={() => editor.chain().focus().toggleBulletList().run()} className={editor.isActive('bulletList') ? 'is-active' : ''} > - Bullet List + Bullet list } diff --git a/demos/src/Examples/Menus/React/styles.scss b/demos/src/Examples/Menus/React/styles.scss index d9820d58d..cf6f3bc01 100644 --- a/demos/src/Examples/Menus/React/styles.scss +++ b/demos/src/Examples/Menus/React/styles.scss @@ -1,53 +1,144 @@ +/* Basic editor styles */ .tiptap { - > * + * { - margin-top: 0.75em; + :first-child { + margin-top: 0; } - ul, + /* List styles */ + ul, ol { padding: 0 1rem; + margin: 1.25rem 1rem 1.25rem 0.4rem; + + li p { + margin-top: 0.25em; + margin-bottom: 0.25em; + } + } + + /* Heading styles */ + h1, + h2, + h3, + h4, + h5, + h6 { + line-height: 1.1; + margin-top: 2.5rem; + text-wrap: pretty; + } + + h1, + h2 { + margin-top: 3.5rem; + margin-bottom: 1.5rem; + } + + h1 { + font-size: 1.4rem; + } + + h2 { + font-size: 1.2rem; + } + + h3 { + font-size: 1.1rem; + } + + h4, + h5, + h6 { + font-size: 1rem; + } + + /* Code and preformatted text styles */ + code { + background-color: var(--purple-light); + border-radius: 0.4rem; + color: var(--black); + font-size: 0.85rem; + padding: 0.25em 0.3em; + } + + pre { + background: var(--black); + border-radius: 0.5rem; + color: var(--white); + font-family: 'JetBrainsMono', monospace; + margin: 1.5rem 0; + padding: 0.75rem 1rem; + + code { + background: none; + color: inherit; + font-size: 0.8rem; + padding: 0; + } + } + + blockquote { + border-left: 3px solid var(--gray-3); + margin: 1.5rem 0; + padding-left: 1rem; + } + + hr { + border: none; + border-top: 1px solid var(--gray-2); + margin: 2rem 0; } } +/* Bubble menu */ .bubble-menu { + background-color: var(--white); + border: 1px solid var(--gray-1); + border-radius: 0.7rem; + box-shadow: var(--shadow); display: flex; - background-color: #0D0D0D; padding: 0.2rem; - border-radius: 0.5rem; button { - border: none; - background: none; - color: #FFF; - font-size: 0.85rem; - font-weight: 500; - padding: 0 0.2rem; - opacity: 0.6; + background-color: unset; + + &:hover { + background-color: var(--gray-3); + } - &:hover, &.is-active { - opacity: 1; + background-color: var(--purple); + + &:hover { + background-color: var(--purple-contrast); + } } } } +/* Floating menu */ .floating-menu { display: flex; - background-color: #0D0D0D10; - padding: 0.2rem; + background-color: var(--gray-3); + padding: 0.1rem; border-radius: 0.5rem; button { - border: none; - background: none; - font-size: 0.85rem; - font-weight: 500; - padding: 0 0.2rem; - opacity: 0.6; + background-color: unset; + padding: 0.275rem 0.425rem; + border-radius: 0.3rem; + + &:hover { + background-color: var(--gray-3); + } - &:hover, &.is-active { - opacity: 1; + background-color: var(--white); + color: var(--purple); + + &:hover { + color: var(--purple-contrast); + } } } } diff --git a/demos/src/Examples/Menus/Vue/index.vue b/demos/src/Examples/Menus/Vue/index.vue index b52941c32..4f4cf9f78 100644 --- a/demos/src/Examples/Menus/Vue/index.vue +++ b/demos/src/Examples/Menus/Vue/index.vue @@ -28,7 +28,7 @@ H2
This is a simple paragraph.
-
+ Here is another paragraph inside this document.
@@ -72,11 +72,11 @@ export default () => {-Here we have another paragraph inside a blockquote.
--
+
+
+ + A highly optimized editor that only re-renders when it’s necessary. +
+ `, + }) + /** + * This hook allows us to select the editor state we want to use in our component. + */ + const currentEditorState = useEditorState({ + /** + * The editor instance we want to use. + */ + editor, + /** + * This selector allows us to select the data we want to use in our component. + * It is evaluated on every editor transaction and compared to it's previously returned value. + */ + selector: ctx => ({ + isBold: ctx.editor.isActive('bold'), + isItalic: ctx.editor.isActive('italic'), + isStrike: ctx.editor.isActive('strike'), + }), + /** + * This function allows us to customize the equality check for the selector. + * By default it is a `===` check. + */ + equalityFn: (prev, next) => { + // A deep-equal function would probably be more maintainable here, but, we use a shallow one to show that it can be customized. + if (!next) { + return false + } + return ( + prev.isBold === next.isBold + && prev.isItalic === next.isItalic + && prev.isStrike === next.isStrike + ) + }, + }) + + return ( +- → With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side. + → With the Typography extension, Tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
Try it out and type (c), ->, >>, 1/2, !=, -- or 1x1 here:
diff --git a/demos/src/Examples/Savvy/React/styles.scss b/demos/src/Examples/Savvy/React/styles.scss
index 377369437..feee91627 100644
--- a/demos/src/Examples/Savvy/React/styles.scss
+++ b/demos/src/Examples/Savvy/React/styles.scss
@@ -1,38 +1,33 @@
/* Basic editor styles */
.tiptap {
- > * + * {
- margin-top: 0.75em;
- }
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- line-height: 1.1;
+ :first-child {
+ margin-top: 0;
}
+ /* Code and preformatted text styles */
code {
- background-color: rgba(#616161, 0.1);
- color: #616161;
- }
-}
-
-/* Color swatches */
-.color {
- white-space: nowrap;
-
- &::before {
- background-color: var(--color);
- border: 1px solid rgba(128, 128, 128, 0.3);
- border-radius: 2px;
- content: " ";
- display: inline-block;
- height: 1em;
- margin-bottom: 0.15em;
- margin-right: 0.1em;
- vertical-align: middle;
- width: 1em;
+ background-color: var(--purple-light);
+ border-radius: 0.4rem;
+ color: var(--black);
+ font-size: 0.85rem;
+ padding: 0.25em 0.3em;
+ }
+
+ /* Color swatches */
+ .color {
+ white-space: nowrap;
+
+ &::before {
+ background-color: var(--color);
+ border: 1px solid rgba(128, 128, 128, 0.3);
+ border-radius: 2px;
+ content: " ";
+ display: inline-block;
+ height: 1em;
+ margin-bottom: 0.15em;
+ margin-right: 0.1em;
+ vertical-align: middle;
+ width: 1em;
+ }
}
}
diff --git a/demos/src/Examples/Savvy/Vue/index.vue b/demos/src/Examples/Savvy/Vue/index.vue
index b296747bd..a824b6097 100644
--- a/demos/src/Examples/Savvy/Vue/index.vue
+++ b/demos/src/Examples/Savvy/Vue/index.vue
@@ -37,7 +37,7 @@ export default {
],
content: `
- → With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side. + → With the Typography extension, Tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
Try it out and type (c), ->, >>, 1/2, !=, -- or 1x1 here:
@@ -64,40 +64,35 @@ export default {
diff --git a/demos/src/Examples/Tables/React/index.jsx b/demos/src/Examples/Tables/React/index.jsx
index 7fab59158..347bf6d08 100644
--- a/demos/src/Examples/Tables/React/index.jsx
+++ b/demos/src/Examples/Tables/React/index.jsx
@@ -60,69 +60,71 @@ const MenuBar = ({ editor }) => {
}
return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
colgroup and rowspancolgroup and rowspanHere is an example: @@ -155,25 +157,25 @@ export default () => {
| Name | -Description | +Name | +Description | ||||
|---|---|---|---|---|---|---|---|
| Cyndi Lauper | -singer | -songwriter | -actress | +Singer | +Songwriter | +Actress | |
| Marie Curie | -scientist | -chemist | -physicist | +Scientist | +Chemist | +Physicist | |
| Indira Gandhi | -prime minister | -politician | +Prime minister | +Politician | |||
- this is a basic example of tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists: + this is a basic example of Tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
- Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block: + Isn't that great? And all of that is editable. But wait, there's more. Let's try a code block:
for (var i=1; i <= 20; i++)
{
@@ -201,10 +205,10 @@ export default {
console.log(i);
}- I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too. + I know, I know, this is impressive. It's only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
- Wow, that’s amazing. Good work, boy! 👏 + Wow, that's amazing. Good work, boy! 👏@@ -212,9 +216,9 @@ export default {
— Mom
first paragraph
second paragraph
Oh, for some reason that’s purple.
+Oh, for some reason that's purple.
This isn’t highlighted.
+This isn't highlighted.
But that one is.
And this is highlighted too, but in a different color.
And this one has a data attribute.
@@ -232,26 +236,26 @@ export default {This is a basic example of implementing images. Drag to re-order.
-
- 
+ - This example allows you to add plain text, but you’re free to add more complex data, for example JSON from another tiptap instance. :-) + This example allows you to add plain text, but you’re free to add more complex data, for example JSON from another Tiptap instance. :-)
`, }) @@ -138,8 +145,44 @@ export default { diff --git a/demos/src/Experiments/Commands/Vue/index.spec.js b/demos/src/Experiments/Commands/Vue/index.spec.js index 1460ee071..8f310f279 100644 --- a/demos/src/Experiments/Commands/Vue/index.spec.js +++ b/demos/src/Experiments/Commands/Vue/index.spec.js @@ -19,8 +19,8 @@ context('/src/Experiments/Commands/Vue/', () => { items.forEach((item, i) => { cy.get('.tiptap').type('{selectall}{backspace}/') - cy.get('.tippy-content .items').should('exist') - cy.get('.tippy-content .items .item').eq(i).click() + cy.get('.tippy-content .dropdown-menu').should('exist') + cy.get('.tippy-content .dropdown-menu button').eq(i).click() cy.get('.tiptap').type(`I am a ${item.tag}`) cy.get(`.tiptap ${item.tag}`).should('exist').should('have.text', `I am a ${item.tag}`) }) @@ -28,17 +28,17 @@ context('/src/Experiments/Commands/Vue/', () => { it('should close the popup without any command via esc', () => { cy.get('.tiptap').type('{selectall}{backspace}/') - cy.get('.tippy-content .items').should('exist') + cy.get('.tippy-content .dropdown-menu').should('exist') cy.get('.tiptap').type('{esc}') - cy.get('.tippy-content .items').should('not.exist') + cy.get('.tippy-content .dropdown-menu').should('not.exist') }) it('should open the popup when the cursor is after a slash', () => { cy.get('.tiptap').type('{selectall}{backspace}/') - cy.get('.tippy-content .items').should('exist') + cy.get('.tippy-content .dropdown-menu').should('exist') cy.get('.tiptap').type('{leftArrow}') - cy.get('.tippy-content .items').should('not.exist') + cy.get('.tippy-content .dropdown-menu').should('not.exist') cy.get('.tiptap').type('{rightArrow}') - cy.get('.tippy-content .items').should('exist') + cy.get('.tippy-content .dropdown-menu').should('exist') }) }) diff --git a/demos/src/Experiments/Commands/Vue/index.vue b/demos/src/Experiments/Commands/Vue/index.vue index ffd760547..74f240b7e 100644 --- a/demos/src/Experiments/Commands/Vue/index.vue +++ b/demos/src/Experiments/Commands/Vue/index.vue @@ -45,16 +45,95 @@ export default { diff --git a/demos/src/Experiments/Commands/Vue/suggestion.js b/demos/src/Experiments/Commands/Vue/suggestion.js index cfc28aad9..a83a81127 100644 --- a/demos/src/Experiments/Commands/Vue/suggestion.js +++ b/demos/src/Experiments/Commands/Vue/suggestion.js @@ -7,7 +7,7 @@ export default { items: ({ query }) => { return [ { - title: 'H1', + title: 'Heading 1', command: ({ editor, range }) => { editor .chain() @@ -18,7 +18,7 @@ export default { }, }, { - title: 'H2', + title: 'Heading 2', command: ({ editor, range }) => { editor .chain() @@ -29,7 +29,7 @@ export default { }, }, { - title: 'bold', + title: 'Bold', command: ({ editor, range }) => { editor .chain() @@ -40,7 +40,7 @@ export default { }, }, { - title: 'italic', + title: 'Italic', command: ({ editor, range }) => { editor .chain() diff --git a/demos/src/Experiments/DestroyingEditor/Vue/index.vue b/demos/src/Experiments/DestroyingEditor/Vue/index.vue index a878a34ba..ea54b19ae 100644 --- a/demos/src/Experiments/DestroyingEditor/Vue/index.vue +++ b/demos/src/Experiments/DestroyingEditor/Vue/index.vue @@ -1,9 +1,11 @@ -- This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though. + This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@@ -28,8 +28,10 @@ export default () => {
return (
<>
- reactive storage: {editor?.storage.custom.foo}
+ Some text
-
+ Some text
{{ json }}
+ {{ json }}
+ - This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though. + This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different. @@ -39,9 +39,13 @@ export default () => { } return ( -
- This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though. + This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
diff --git a/demos/src/Experiments/OnUpdateRerender/Vue/index.vue b/demos/src/Experiments/OnUpdateRerender/Vue/index.vue
index 12055dee1..6f0505264 100644
--- a/demos/src/Experiments/OnUpdateRerender/Vue/index.vue
+++ b/demos/src/Experiments/OnUpdateRerender/Vue/index.vue
@@ -1,6 +1,12 @@
- = {{ count }}
-
+
+
+
diff --git a/demos/src/Experiments/Tailwind/JS/index.html b/demos/src/Experiments/Tailwind/JS/index.html
index 2a8a6785c..5389f92e2 100644
--- a/demos/src/Experiments/Tailwind/JS/index.html
+++ b/demos/src/Experiments/Tailwind/JS/index.html
@@ -16,7 +16,7 @@ const editor = new Editor({
],
editorProps: {
attributes: {
- class: 'prose dark:prose-invert prose-sm sm:prose-base lg:prose-lg xl:prose-2xl m-5 focus:outline-none',
+ class: 'prose prose-sm sm:prose-base lg:prose-lg xl:prose-2xl m-5 focus:outline-none',
},
},
content: `
@@ -24,7 +24,7 @@ const editor = new Editor({
Hi there,
+
+
+
- this is a basic basic example of tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists: + this is a basic basic example of Tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
- Hey, try to select some text here. You’ll see a formatting menu pop up. And as always, you are in full control about content and styling of this menu. + Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
`, }) @@ -68,12 +72,119 @@ export default { diff --git a/demos/src/Extensions/CharacterCount/React/index.jsx b/demos/src/Extensions/CharacterCount/React/index.jsx index c33d235f1..1b25f91bf 100644 --- a/demos/src/Extensions/CharacterCount/React/index.jsx +++ b/demos/src/Extensions/CharacterCount/React/index.jsx @@ -30,15 +30,48 @@ export default () => { return null } + const percentage = editor + ? Math.round((100 / limit) * editor.storage.characterCount.characters()) + : 0 + return ( -Try to drag around the image. While you drag, the editor should show a decoration under your cursor. The so called dropcursor.
-
+ Try to drag around the image. While you drag, the editor should show a decoration under your cursor. The so called dropcursor.
-
+ Try to move the cursor after the image with your arrow keys! You should see a horizontal blinking cursor below the image. This is the gapcursor.
-
+ Try to move the cursor after the image with your arrow keys! You should see a horizontal blinking cursor below the image. This is the gapcursor.
-
+ Example Text
`) + editor.commands.toggleHeading({ level }) + expect(editor.getHTML()).to.eq(`Example Text
`) + editor.commands.toggleHeading({ level }) + expect(editor.getHTML()).to.eq(`
{html}
diff --git a/demos/src/GuideContent/ExportHTML/React/styles.scss b/demos/src/GuideContent/ExportHTML/React/styles.scss
index c9ddc5738..7694d7322 100644
--- a/demos/src/GuideContent/ExportHTML/React/styles.scss
+++ b/demos/src/GuideContent/ExportHTML/React/styles.scss
@@ -1,56 +1,72 @@
-/* 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 */
.tiptap {
- > * + * {
- margin-top: 0.75em;
+ :first-child {
+ margin-top: 0;
}
- ul,
+ /* List styles */
+ ul,
ol {
padding: 0 1rem;
+ margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+ li p {
+ margin-top: 0.25em;
+ margin-bottom: 0.25em;
+ }
}
- h1,
- h2,
- h3,
- h4,
- h5,
+ /* Heading styles */
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
h6 {
line-height: 1.1;
+ margin-top: 2.5rem;
+ text-wrap: pretty;
}
+ h1,
+ h2 {
+ margin-top: 3.5rem;
+ margin-bottom: 1.5rem;
+ }
+
+ h1 {
+ font-size: 1.4rem;
+ }
+
+ h2 {
+ font-size: 1.2rem;
+ }
+
+ h3 {
+ font-size: 1.1rem;
+ }
+
+ h4,
+ h5,
+ h6 {
+ font-size: 1rem;
+ }
+
+ /* Code and preformatted text styles */
code {
- background-color: rgba(#616161, 0.1);
- color: #616161;
+ background-color: var(--purple-light);
+ border-radius: 0.4rem;
+ color: var(--black);
+ font-size: 0.85rem;
+ padding: 0.25em 0.3em;
}
pre {
- background: #0d0d0d;
+ background: var(--black);
border-radius: 0.5rem;
- color: #fff;
- font-family: "JetBrainsMono", monospace;
+ color: var(--white);
+ font-family: 'JetBrainsMono', monospace;
+ margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
@@ -61,17 +77,15 @@
}
}
- img {
- height: auto;
- max-width: 100%;
+ blockquote {
+ border-left: 3px solid var(--gray-3);
+ margin: 1.5rem 0;
+ padding-left: 1rem;
}
hr {
- margin: 1rem 0;
- }
-
- blockquote {
- border-left: 2px solid rgba(#0d0d0d, 0.1);
- padding-left: 1rem;
+ border: none;
+ border-top: 1px solid var(--gray-2);
+ margin: 2rem 0;
}
}
diff --git a/demos/src/GuideContent/ExportHTML/Vue/index.vue b/demos/src/GuideContent/ExportHTML/Vue/index.vue
index 769af300b..25e6104d0 100644
--- a/demos/src/GuideContent/ExportHTML/Vue/index.vue
+++ b/demos/src/GuideContent/ExportHTML/Vue/index.vue
@@ -1,24 +1,26 @@
- {{ html }}
{JSON.stringify(json, null, 2)}
diff --git a/demos/src/GuideContent/ExportJSON/React/styles.scss b/demos/src/GuideContent/ExportJSON/React/styles.scss
index c9ddc5738..7694d7322 100644
--- a/demos/src/GuideContent/ExportJSON/React/styles.scss
+++ b/demos/src/GuideContent/ExportJSON/React/styles.scss
@@ -1,56 +1,72 @@
-/* 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 */
.tiptap {
- > * + * {
- margin-top: 0.75em;
+ :first-child {
+ margin-top: 0;
}
- ul,
+ /* List styles */
+ ul,
ol {
padding: 0 1rem;
+ margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+ li p {
+ margin-top: 0.25em;
+ margin-bottom: 0.25em;
+ }
}
- h1,
- h2,
- h3,
- h4,
- h5,
+ /* Heading styles */
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
h6 {
line-height: 1.1;
+ margin-top: 2.5rem;
+ text-wrap: pretty;
}
+ h1,
+ h2 {
+ margin-top: 3.5rem;
+ margin-bottom: 1.5rem;
+ }
+
+ h1 {
+ font-size: 1.4rem;
+ }
+
+ h2 {
+ font-size: 1.2rem;
+ }
+
+ h3 {
+ font-size: 1.1rem;
+ }
+
+ h4,
+ h5,
+ h6 {
+ font-size: 1rem;
+ }
+
+ /* Code and preformatted text styles */
code {
- background-color: rgba(#616161, 0.1);
- color: #616161;
+ background-color: var(--purple-light);
+ border-radius: 0.4rem;
+ color: var(--black);
+ font-size: 0.85rem;
+ padding: 0.25em 0.3em;
}
pre {
- background: #0d0d0d;
+ background: var(--black);
border-radius: 0.5rem;
- color: #fff;
- font-family: "JetBrainsMono", monospace;
+ color: var(--white);
+ font-family: 'JetBrainsMono', monospace;
+ margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
@@ -61,17 +77,15 @@
}
}
- img {
- height: auto;
- max-width: 100%;
+ blockquote {
+ border-left: 3px solid var(--gray-3);
+ margin: 1.5rem 0;
+ padding-left: 1rem;
}
hr {
- margin: 1rem 0;
- }
-
- blockquote {
- border-left: 2px solid rgba(#0d0d0d, 0.1);
- padding-left: 1rem;
+ border: none;
+ border-top: 1px solid var(--gray-2);
+ margin: 2rem 0;
}
}
diff --git a/demos/src/GuideContent/ExportJSON/Vue/index.vue b/demos/src/GuideContent/ExportJSON/Vue/index.vue
index 69af684aa..9b7162ccf 100644
--- a/demos/src/GuideContent/ExportJSON/Vue/index.vue
+++ b/demos/src/GuideContent/ExportJSON/Vue/index.vue
@@ -1,24 +1,26 @@
- {{ json }}@@ -33,14 +34,16 @@ export default () => { return ( <> -
{{ content }}{{ content }}
A Vue.js wrapper component for tiptap to use v-model.
A Vue.js wrapper component for Tiptap to use v-model.
This is a boring paragraph.
+Followed by a fancy draggable item.
+And another draggable item.
+And a nested one.
+But can we go deeper?
+Let’s finish with a boring paragraph.
+ ` + +export default () => { + return
- Another Editor -
- +Another Editor
+