Example Text
') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('should transform b tags to strong tags', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('sould omit b tags with normal font weight inline style', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('should transform any tag with bold inline style to strong tags', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('the button should make the selected text bold', () => { + cy.get('button:first') + .click() + + cy.get('.ProseMirror') + .find('strong') + .should('contain', 'Example Text') + }) + + it('the button should toggle the selected text bold', () => { + cy.get('button:first').click() + cy.get('.ProseMirror').type('{selectall}') + cy.get('button:first').click() + cy.get('.ProseMirror strong').should('not.exist') + }) + + it('should make the selected text bold when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, key: 'b' }) + .find('strong') + .should('contain', 'Example Text') + }) + + it('should toggle the selected text bold when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, key: 'b' }) + .find('strong') + .should('contain', 'Example Text') + + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, key: 'b' }) + + cy.get('.ProseMirror strong').should('not.exist') + }) + + it('should make a bold text from the default markdown shortcut', () => { + cy.get('.ProseMirror') + .type('**Bold**') + .find('strong') + .should('contain', 'Bold') + }) + + it('should make a bold text from the alternative markdown shortcut', () => { + cy.get('.ProseMirror') + .type('__Bold__') + .find('strong') + .should('contain', 'Bold') + }) +}) diff --git a/demos/src/Marks/Bold/Vue/index.vue b/demos/src/Marks/Bold/Vue/index.vue new file mode 100644 index 00000000..4d70b531 --- /dev/null +++ b/demos/src/Marks/Bold/Vue/index.vue @@ -0,0 +1,53 @@ + +Example Text
') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('should parse code tags correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
Example Text
Example Text')
+ expect(editor.getHTML()).to.eq('Example Text
Example Text
') + .selectAll() + .run() + }) + }) + + it('the button should highlight the selected text', () => { + cy.get('button:first') + .click() + + cy.get('.ProseMirror') + .find('mark') + .should('contain', 'Example Text') + }) + + it('should highlight the text in a specific color', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.toggleHighlight({ color: 'red' }) + + cy.get('.ProseMirror') + .find('mark') + .should('contain', 'Example Text') + .should('have.attr', 'data-color', 'red') + }) + }) + + it('should update the attributes of existing marks', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor + .chain() + .setContent('Example Text
') + .selectAll() + .toggleHighlight({ color: 'rgb(255, 0, 0)' }) + .run() + + cy.get('.ProseMirror') + .find('mark') + .should('have.css', 'background-color', 'rgb(255, 0, 0)') + }) + }) + + it('should remove existing marks with the same attributes', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor + .chain() + .setContent('Example Text
') + .selectAll() + .toggleHighlight({ color: 'rgb(255, 0, 0)' }) + .run() + + cy.get('.ProseMirror') + .find('mark') + .should('not.exist') + }) + }) + + it('is active for mark with any attributes', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor + .chain() + .setContent('Example Text
') + .selectAll() + .run() + + expect(editor.isActive('highlight')).to.eq(true) + }) + }) + + it('is active for mark with same attributes', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor + .chain() + .setContent('Example Text
') + .selectAll() + .run() + + const isActive = editor.isActive('highlight', { + color: 'rgb(255, 0, 0)', + }) + + expect(isActive).to.eq(true) + }) + }) + + it('isn’t active for mark with other attributes', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor + .chain() + .setContent('Example Text
') + .selectAll() + .run() + + const isActive = editor.isActive('highlight', { + color: 'rgb(0, 0, 0)', + }) + + expect(isActive).to.eq(false) + }) + }) + + it('the button should toggle the selected text highlighted', () => { + cy.get('button:first') + .click() + + cy.get('.ProseMirror') + .type('{selectall}') + + cy.get('button:first') + .click() + + cy.get('.ProseMirror') + .find('mark') + .should('not.exist') + }) + + it('should highlight the selected text when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, shiftKey: true, key: 'h' }) + .find('mark') + .should('contain', 'Example Text') + }) + + it('should toggle the selected text highlighted when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, shiftKey: true, key: 'h' }) + .trigger('keydown', { modKey: true, shiftKey: true, key: 'h' }) + .find('mark') + .should('not.exist') + }) +}) diff --git a/demos/src/Marks/Highlight/Vue/index.vue b/demos/src/Marks/Highlight/Vue/index.vue new file mode 100644 index 00000000..c6654eda --- /dev/null +++ b/demos/src/Marks/Highlight/Vue/index.vue @@ -0,0 +1,87 @@ + +Example Text
') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('i tags should be transformed to em tags', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('i tags with normal font style should be omitted', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('generic tags with italic style should be transformed to strong tags', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('the button should make the selected text italic', () => { + cy.get('button:first') + .click() + + cy.get('.ProseMirror') + .find('em') + .should('contain', 'Example Text') + }) + + it('the button should toggle the selected text italic', () => { + cy.get('button:first') + .click() + + cy.get('.ProseMirror') + .type('{selectall}') + + cy.get('button:first') + .click() + + cy.get('.ProseMirror em') + .should('not.exist') + }) + + it('the keyboard shortcut should make the selected text italic', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, key: 'i' }) + .find('em') + .should('contain', 'Example Text') + }) + + it('the keyboard shortcut should toggle the selected text italic', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, key: 'i' }) + .trigger('keydown', { modKey: true, key: 'i' }) + .find('em') + .should('not.exist') + }) +}) diff --git a/demos/src/Marks/Italic/Vue/index.vue b/demos/src/Marks/Italic/Vue/index.vue new file mode 100644 index 00000000..e8ff16fb --- /dev/null +++ b/demos/src/Marks/Italic/Vue/index.vue @@ -0,0 +1,50 @@ + +Example Text
') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('should parse a tags correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('') + expect(editor.getHTML()).to.eq('') + }) + }) + + it('should parse a tags with target attribute correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('') + expect(editor.getHTML()).to.eq('') + }) + }) + + it('should parse a tags with rel attribute correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('') + expect(editor.getHTML()).to.eq('') + }) + }) + + it('the button should add a link to the selected text', () => { + cy.window().then(win => { + cy.stub(win, 'prompt').returns('https://tiptap.dev') + + cy.get('button:first') + .click() + + cy.window().its('prompt').should('be.called') + + cy.get('.ProseMirror') + .find('a') + .should('contain', 'Example Text') + .should('have.attr', 'href', 'https://tiptap.dev') + }) + }) + + it('detects a pasted URL within a text', () => { + cy.get('.ProseMirror').paste({ pastePayload: 'some text https://example.com around an url', pasteType: 'text/plain' }) + .find('a') + .should('contain', 'https://example.com') + .should('have.attr', 'href', 'https://example.com') + }) + + it('detects a pasted URL', () => { + cy.get('.ProseMirror').paste({ pastePayload: 'https://example.com', pasteType: 'text/plain' }) + .find('a') + .should('contain', 'Example Text') + .should('have.attr', 'href', 'https://example.com') + }) + + it('correctly detects multiple pasted URLs', () => { + cy.get('.ProseMirror').paste({ pastePayload: 'https://example1.com, https://example2.com/foobar, (http://example3.com/foobar)', pasteType: 'text/plain' }) + + cy.get('.ProseMirror').find('a[href="https://example1.com"]') + .should('contain', 'https://example1.com') + + cy.get('.ProseMirror').find('a[href="https://example2.com/foobar"]') + .should('contain', 'https://example2.com/foobar') + + cy.get('.ProseMirror').find('a[href="http://example3.com/foobar"]') + .should('contain', 'http://example3.com/foobar') + }) +}) diff --git a/demos/src/Marks/Link/Vue/index.vue b/demos/src/Marks/Link/Vue/index.vue new file mode 100644 index 00000000..8bd2467d --- /dev/null +++ b/demos/src/Marks/Link/Vue/index.vue @@ -0,0 +1,82 @@ + +Example Text
') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('should parse s tags correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
Example Text
Example Text
Example Text
Example Text
Example Text
Example Text
') + expect(editor.getHTML()).to.eq('Example Text
Example Text
') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('should transform inline style to sub tags', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('sould omit inline style with a different vertical align', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('the button should make the selected text bold', () => { + cy.get('button:first') + .click() + + cy.get('.ProseMirror') + .find('sub') + .should('contain', 'Example Text') + }) + + it('the button should toggle the selected text bold', () => { + cy.get('button:first').click() + cy.get('.ProseMirror').type('{selectall}') + cy.get('button:first').click() + cy.get('.ProseMirror sub').should('not.exist') + }) +}) diff --git a/demos/src/Marks/Subscript/Vue/index.vue b/demos/src/Marks/Subscript/Vue/index.vue new file mode 100644 index 00000000..73202969 --- /dev/null +++ b/demos/src/Marks/Subscript/Vue/index.vue @@ -0,0 +1,49 @@ + +Example Text
') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('should transform inline style to sup tags', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('sould omit inline style with a different vertical align', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('the button should make the selected text bold', () => { + cy.get('button:first') + .click() + + cy.get('.ProseMirror') + .find('sup') + .should('contain', 'Example Text') + }) + + it('the button should toggle the selected text bold', () => { + cy.get('button:first').click() + cy.get('.ProseMirror').type('{selectall}') + cy.get('button:first').click() + cy.get('.ProseMirror sup').should('not.exist') + }) +}) diff --git a/demos/src/Marks/Superscript/Vue/index.vue b/demos/src/Marks/Superscript/Vue/index.vue new file mode 100644 index 00000000..d798c63b --- /dev/null +++ b/demos/src/Marks/Superscript/Vue/index.vue @@ -0,0 +1,49 @@ + +Example Text
') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('should parse u tags correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('should transform any tag with text decoration underline to u tags', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('Example Text
') + expect(editor.getHTML()).to.eq('Example Text
') + }) + }) + + it('the button should underline the selected text', () => { + cy.get('button:first') + .click() + + cy.get('.ProseMirror') + .find('u') + .should('contain', 'Example Text') + }) + + it('the button should toggle the selected text underline', () => { + cy.get('button:first') + .click() + + cy.get('.ProseMirror') + .type('{selectall}') + + cy.get('button:first') + .click() + + cy.get('.ProseMirror') + .find('u') + .should('not.exist') + }) + + it('should underline the selected text when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, key: 'u' }) + .find('u') + .should('contain', 'Example Text') + }) + + it('should toggle the selected text underline when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, key: 'u' }) + .trigger('keydown', { modKey: true, key: 'u' }) + .find('u') + .should('not.exist') + }) +}) diff --git a/demos/src/Marks/Underline/Vue/index.vue b/demos/src/Marks/Underline/Vue/index.vue new file mode 100644 index 00000000..170c14b5 --- /dev/null +++ b/demos/src/Marks/Underline/Vue/index.vue @@ -0,0 +1,49 @@ + +