diff --git a/docs/src/demos/Extensions/Bold/index.spec.js b/docs/src/demos/Extensions/Bold/index.spec.js index 8d54f47b..b80b0a33 100644 --- a/docs/src/demos/Extensions/Bold/index.spec.js +++ b/docs/src/demos/Extensions/Bold/index.spec.js @@ -29,5 +29,17 @@ context('/api/extensions/bold', () => { cy.get('.ProseMirror').type('{meta}b', {force: true}).type('{meta}b', {force: true}) cy.get('.ProseMirror strong').should('not.exist') }) + + it('should make a bold text from the default markdown shortcut', () => { + cy.get('.ProseMirror') + .type('**Bold**', {force: true}) + .contains('strong', 'Bold') + }) + + it('should make a bold text from the alternative markdown shortcut', () => { + cy.get('.ProseMirror') + .type('__Bold__', {force: true}) + .contains('strong', 'Bold') + }) }) }) \ No newline at end of file diff --git a/docs/src/demos/Extensions/HorizontalRule/index.spec.js b/docs/src/demos/Extensions/HorizontalRule/index.spec.js new file mode 100644 index 00000000..96c0fdb7 --- /dev/null +++ b/docs/src/demos/Extensions/HorizontalRule/index.spec.js @@ -0,0 +1,40 @@ +context('/api/extensions/horizontal-rule', () => { + beforeEach(() => { + cy.visit('/api/extensions/horizontal-rule') + + cy.get('.ProseMirror').window().then(window => { + const { editor } = window + editor.setContent('

Example Text

') + }) + }) + + describe('horizontal-rule', () => { + it('the button should add a horizontal rule', () => { + cy.get('.ProseMirror hr').should('not.exist') + cy.get('.demo__preview button:first').click({ force: true }) + cy.get('.ProseMirror hr').should('exist') + }) + + it('the default markdown shortcut should add a horizontal rule', () => { + cy.get('.ProseMirror').window().then(window => { + const { editor } = window + editor.clearContent() + + cy.get('.ProseMirror hr').should('not.exist') + cy.get('.ProseMirror').type('---', {force: true}) + cy.get('.ProseMirror hr').should('exist') + }) + }) + + it('the alternative markdown shortcut should add a horizontal rule', () => { + cy.get('.ProseMirror').window().then(window => { + const { editor } = window + editor.clearContent() + + cy.get('.ProseMirror hr').should('not.exist') + cy.get('.ProseMirror').type('___ ', {force: true}) + cy.get('.ProseMirror hr').should('exist') + }) + }) + }) +}) \ No newline at end of file diff --git a/docs/src/demos/Extensions/HorizontalRule/index.vue b/docs/src/demos/Extensions/HorizontalRule/index.vue new file mode 100644 index 00000000..563169fe --- /dev/null +++ b/docs/src/demos/Extensions/HorizontalRule/index.vue @@ -0,0 +1,54 @@ + + + \ No newline at end of file diff --git a/docs/src/demos/Extensions/Strike/index.spec.js b/docs/src/demos/Extensions/Strike/index.spec.js index 31e421c6..4c931953 100644 --- a/docs/src/demos/Extensions/Strike/index.spec.js +++ b/docs/src/demos/Extensions/Strike/index.spec.js @@ -32,7 +32,7 @@ context('/api/extensions/strike', () => { it('should make a striked text from the markdown shortcut', () => { cy.get('.ProseMirror') - .type('~~Strike~~', {force: true}) + .type('~Strike~', {force: true}) .contains('s', 'Strike') }) }) diff --git a/docs/src/demos/Extensions/Underline/index.spec.js b/docs/src/demos/Extensions/Underline/index.spec.js new file mode 100644 index 00000000..c1eb33ce --- /dev/null +++ b/docs/src/demos/Extensions/Underline/index.spec.js @@ -0,0 +1,33 @@ +context('/api/extensions/underline', () => { + beforeEach(() => { + cy.visit('/api/extensions/underline') + + cy.get('.ProseMirror').window().then(window => { + const { editor } = window + editor.setContent('

Example Text

') + editor.focus().selectAll() + }) + }) + + describe('bold', () => { + it('the button should underline the selected text', () => { + cy.get('.demo__preview button:first').click({ force: true }) + cy.get('.ProseMirror').contains('u', 'Example Text') + }) + + it('the button should toggle the selected text underline', () => { + cy.get('.demo__preview button:first').dblclick({ force: true }) + cy.get('.ProseMirror u').should('not.exist') + }) + + it('the keyboard shortcut should underline the selected text', () => { + cy.get('.ProseMirror').type('{meta}u', {force: true}) + cy.get('.ProseMirror').contains('u', 'Example Text') + }) + + it('the keyboard shortcut should toggle the selected text underline', () => { + cy.get('.ProseMirror').type('{meta}u', {force: true}).type('{meta}u', {force: true}) + cy.get('.ProseMirror u').should('not.exist') + }) + }) +}) \ No newline at end of file diff --git a/docs/src/demos/Extensions/Underline/index.vue b/docs/src/demos/Extensions/Underline/index.vue new file mode 100644 index 00000000..558d09cc --- /dev/null +++ b/docs/src/demos/Extensions/Underline/index.vue @@ -0,0 +1,52 @@ + + + \ No newline at end of file diff --git a/docs/src/docPages/api/extensions/blockquote.md b/docs/src/docPages/api/extensions/blockquote.md index b6d4e9c8..392fb229 100644 --- a/docs/src/docPages/api/extensions/blockquote.md +++ b/docs/src/docPages/api/extensions/blockquote.md @@ -1,7 +1,7 @@ # Blockquote The Blockquote extension enables you to use the `
` HTML tag in the editor. This is great – you might have guessed – to use quotes in the editor. -Type `> ` on the beginning of a new line and it will be magically transformed to a blockquote. +Type `> ` at the beginning of a new line and it will be magically transformed to a blockquote. ## Options | Option | Type | Default | Description | diff --git a/docs/src/docPages/api/extensions/bold.md b/docs/src/docPages/api/extensions/bold.md index a98ef14e..81f28cf8 100644 --- a/docs/src/docPages/api/extensions/bold.md +++ b/docs/src/docPages/api/extensions/bold.md @@ -1,5 +1,5 @@ # Bold -This extension is used to render text in **bold**. If you pass ``, `` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor’s initial content, they all will be rendered accordingly. +Use this extension to render text in **bold**. If you pass ``, `` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor’s initial content, they all will be rendered accordingly. Type `**two asterisks**` or `__two underlines__` and the it will be magically transformed to **bold** text while you type. diff --git a/docs/src/docPages/api/extensions/horizontal-rule.md b/docs/src/docPages/api/extensions/horizontal-rule.md index 5c64e87f..616ada6e 100644 --- a/docs/src/docPages/api/extensions/horizontal-rule.md +++ b/docs/src/docPages/api/extensions/horizontal-rule.md @@ -1,5 +1,7 @@ # HorizontalRule -Enables you to use the `
` HTML tag in the editor. +Use this extension to render a `
` HTML tag. If you pass `
` in the editor’s initial content, it’ll be rendered accordingly. + +Type `---` (three dashes) or `___ ` (three underscores and a space) at the beginning of a new line and it will be magically transformed to a horizontal rule. ## Options | Option | Type | Default | Description | @@ -9,11 +11,17 @@ Enables you to use the `
` HTML tag in the editor. ## Commands | Command | Options | Description | | --------------- | ------- | ------------------------- | -| horizontal_rule | — | Create a horizontal rule. | +| horizontalRule | — | Create a horizontal rule. | ## Keyboard shortcuts *None* +## Source Code +[packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) + +## Usage + + ## Usage ```markup