From 2d4f8cd3a6dc48624d3dc4d3e9a4800abe12221f Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 10 Sep 2020 12:31:26 +0200 Subject: [PATCH 1/4] switch to single tilde syntax --- docs/src/demos/Extensions/Strike/index.spec.js | 2 +- docs/src/docPages/api/extensions/strike.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/docPages/api/extensions/strike.md b/docs/src/docPages/api/extensions/strike.md index 57b5096d..902946d7 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. -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. From 12116a65ec565f37f92e730a0a242ddacda7fe3c Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 10 Sep 2020 12:40:55 +0200 Subject: [PATCH 2/4] add markdown shortcut tests to the bold extension --- docs/src/demos/Extensions/Bold/index.spec.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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 From 860b6385ad59c84e32467cbd590357e072b41a3e Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 10 Sep 2020 12:43:40 +0200 Subject: [PATCH 3/4] add an interactive demo and tests to the underline extension --- .../demos/Extensions/Underline/index.spec.js | 33 ++++++++++++ docs/src/demos/Extensions/Underline/index.vue | 52 +++++++++++++++++++ docs/src/docPages/api/extensions/bold.md | 2 +- docs/src/docPages/api/extensions/italic.md | 2 +- docs/src/docPages/api/extensions/strike.md | 2 +- docs/src/docPages/api/extensions/underline.md | 51 ++++-------------- docs/src/links.yaml | 1 - 7 files changed, 97 insertions(+), 46 deletions(-) create mode 100644 docs/src/demos/Extensions/Underline/index.spec.js create mode 100644 docs/src/demos/Extensions/Underline/index.vue 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/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/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 902946d7..36913e65 100644 --- a/docs/src/docPages/api/extensions/strike.md +++ b/docs/src/docPages/api/extensions/strike.md @@ -1,5 +1,5 @@ # 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 `~text between tildes~` and it will be magically ~~striked through~~ while you type. 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 From 6f898a004b35a5213e268056d2dbb3cbdd19c81b Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 10 Sep 2020 12:55:15 +0200 Subject: [PATCH 4/4] add a demo and tests to the horizontal rule extension --- .../Extensions/HorizontalRule/index.spec.js | 40 ++++++++++++++ .../demos/Extensions/HorizontalRule/index.vue | 54 +++++++++++++++++++ .../src/docPages/api/extensions/blockquote.md | 2 +- .../api/extensions/horizontal-rule.md | 12 ++++- 4 files changed, 105 insertions(+), 3 deletions(-) create mode 100644 docs/src/demos/Extensions/HorizontalRule/index.spec.js create mode 100644 docs/src/demos/Extensions/HorizontalRule/index.vue 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/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/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