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 @@ + +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 @@ + +` 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 diff --git a/docs/src/docPages/api/extensions/italic.md b/docs/src/docPages/api/extensions/italic.md index e566ed22..398f725e 100644 --- a/docs/src/docPages/api/extensions/italic.md +++ b/docs/src/docPages/api/extensions/italic.md @@ -1,5 +1,5 @@ # Italic -This extension is used to render text in *italic*. If you pass ``, `` tags, or text with inline `style` attributes setting `font-style: italic` in the editor’s initial content, they all will be rendered accordingly. +Use this extension to render text in *italic*. If you pass ``, `` tags, or text with inline `style` attributes setting `font-style: italic` in the editor’s initial content, they all will be rendered accordingly. ::: warning Restrictions The extension will generate the corresponding `` HTML tags when reading contents of the `Editor` instance. All text marked italic, regardless of the method will be normalized to `` HTML tags. diff --git a/docs/src/docPages/api/extensions/strike.md b/docs/src/docPages/api/extensions/strike.md index 57b5096d..36913e65 100644 --- a/docs/src/docPages/api/extensions/strike.md +++ b/docs/src/docPages/api/extensions/strike.md @@ -1,7 +1,7 @@ # Strike -This extension is used to render ~~striked text~~. If you pass ` `, ``, `` tags, or text with inline `style` attributes setting `text-decoration: line-through` in the editor’s initial content, they all will be rendered accordingly. +Use this extension to render ~~striked text~~. If you pass ``, ``, `` tags, or text with inline `style` attributes setting `text-decoration: line-through` in the editor’s initial content, they all will be rendered accordingly. -Type `~~two tildes~~` and the it will be magically ~~striked through~~ while you type. +Type `~text between tildes~` and it will be magically ~~striked through~~ while you type. ::: warning Restrictions The extension will generate the corresponding `` HTML tags when reading contents of the `Editor` instance. All text striked through, regardless of the method will be normalized to `` HTML tags. diff --git a/docs/src/docPages/api/extensions/underline.md b/docs/src/docPages/api/extensions/underline.md index 3c4c57d5..ab27c3ce 100644 --- a/docs/src/docPages/api/extensions/underline.md +++ b/docs/src/docPages/api/extensions/underline.md @@ -1,5 +1,9 @@ # Underline -Enables you to use the `` HTML tag in the editor. +Use this extension to render text underlined. If you pass `` tags, or text with inline `style` attributes setting `text-decoration: underline` in the editor’s initial content, they all will be rendered accordingly. + +::: warning Restrictions +The extension will generate the corresponding `` HTML tags when reading contents of the `Editor` instance. All text marked underlined, regardless of the method will be normalized to `` HTML tags. +::: ## Options | Option | Type | Default | Description | @@ -15,45 +19,8 @@ Enables you to use the `` HTML tag in the editor. * Windows & Linux: `Control` + `U` * macOS: `Command` + `U` +## Source Code +[packages/extension-underline/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) + ## Usage -```markup - --- - - -``` \ No newline at end of file +- - - -- \ No newline at end of file diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 35970fcd..88e76cc3 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -184,7 +184,6 @@ # draft: true - title: Underline link: /api/extensions/underline - draft: true - title: Commands link: /api/commands draft: true