-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature: add subscript and superscript extensions, docs and tests
- Loading branch information
Showing
16 changed files
with
492 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| context('/demos/Marks/Subscript', () => { | ||
| before(() => { | ||
| cy.visit('/demos/Marks/Subscript') | ||
| }) | ||
|
|
||
| beforeEach(() => { | ||
| cy.get('.ProseMirror').then(([{ editor }]) => { | ||
| editor.commands.setContent('<p>Example Text</p>') | ||
| cy.get('.ProseMirror').type('{selectall}') | ||
| }) | ||
| }) | ||
|
|
||
| it('should transform inline style to sub tags', () => { | ||
| cy.get('.ProseMirror').then(([{ editor }]) => { | ||
| editor.commands.setContent('<p><span style="vertical-align: middle">Example Text</span></p>') | ||
| expect(editor.getHTML()).to.eq('<p><sub>Example Text</sub></p>') | ||
| }) | ||
| }) | ||
|
|
||
| it('sould omit inline style with a different vertical align', () => { | ||
| cy.get('.ProseMirror').then(([{ editor }]) => { | ||
| editor.commands.setContent('<p><b style="vertical-align: middle">Example Text</b></p>') | ||
| expect(editor.getHTML()).to.eq('<p>Example Text</p>') | ||
| }) | ||
| }) | ||
|
|
||
| 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') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <template> | ||
| <div v-if="editor"> | ||
| <button @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }"> | ||
| subscript | ||
| </button> | ||
|
|
||
| <editor-content :editor="editor" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { Editor, EditorContent } from '@tiptap/vue-2' | ||
| import Document from '@tiptap/extension-document' | ||
| import Paragraph from '@tiptap/extension-paragraph' | ||
| import Text from '@tiptap/extension-text' | ||
| import Subscript from '@tiptap/extension-subscript' | ||
| export default { | ||
| components: { | ||
| EditorContent, | ||
| }, | ||
| data() { | ||
| return { | ||
| editor: null, | ||
| } | ||
| }, | ||
| mounted() { | ||
| this.editor = new Editor({ | ||
| extensions: [ | ||
| Document, | ||
| Paragraph, | ||
| Text, | ||
| Subscript, | ||
| ], | ||
| content: ` | ||
| <p>This is regular text.</p> | ||
| <p><sub>This is subscript.</sub></p> | ||
| <p><span style="vertical-align: sub">And this.</span></p> | ||
| `, | ||
| }) | ||
| }, | ||
| beforeDestroy() { | ||
| this.editor.destroy() | ||
| }, | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| context('/demos/Marks/Superscript', () => { | ||
| before(() => { | ||
| cy.visit('/demos/Marks/Superscript') | ||
| }) | ||
|
|
||
| beforeEach(() => { | ||
| cy.get('.ProseMirror').then(([{ editor }]) => { | ||
| editor.commands.setContent('<p>Example Text</p>') | ||
| cy.get('.ProseMirror').type('{selectall}') | ||
| }) | ||
| }) | ||
|
|
||
| it('should transform inline style to sup tags', () => { | ||
| cy.get('.ProseMirror').then(([{ editor }]) => { | ||
| editor.commands.setContent('<p><span style="vertical-align: super">Example Text</span></p>') | ||
| expect(editor.getHTML()).to.eq('<p><sup>Example Text</sup></p>') | ||
| }) | ||
| }) | ||
|
|
||
| it('sould omit inline style with a different vertical align', () => { | ||
| cy.get('.ProseMirror').then(([{ editor }]) => { | ||
| editor.commands.setContent('<p><span style="vertical-align: middle">Example Text</span></p>') | ||
| expect(editor.getHTML()).to.eq('<p>Example Text</p>') | ||
| }) | ||
| }) | ||
|
|
||
| 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') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <template> | ||
| <div v-if="editor"> | ||
| <button @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }"> | ||
| superscript | ||
| </button> | ||
|
|
||
| <editor-content :editor="editor" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { Editor, EditorContent } from '@tiptap/vue-2' | ||
| import Document from '@tiptap/extension-document' | ||
| import Paragraph from '@tiptap/extension-paragraph' | ||
| import Text from '@tiptap/extension-text' | ||
| import Superscript from '@tiptap/extension-superscript' | ||
| export default { | ||
| components: { | ||
| EditorContent, | ||
| }, | ||
| data() { | ||
| return { | ||
| editor: null, | ||
| } | ||
| }, | ||
| mounted() { | ||
| this.editor = new Editor({ | ||
| extensions: [ | ||
| Document, | ||
| Paragraph, | ||
| Text, | ||
| Superscript, | ||
| ], | ||
| content: ` | ||
| <p>This is regular text.</p> | ||
| <p><sup>This is superscript.</sup></p> | ||
| <p><span style="vertical-align: super">And this.</span></p> | ||
| `, | ||
| }) | ||
| }, | ||
| beforeDestroy() { | ||
| this.editor.destroy() | ||
| }, | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| # Subscript | ||
| [](https://www.npmjs.com/package/@tiptap/extension-subscript) | ||
| [](https://npmcharts.com/compare/@tiptap/extension-subscript?minimal=true) | ||
|
|
||
| Use this extension to render text in <sub>subscript</sub>. If you pass `<sub>` or text with `vertical-align: sub` as inline style in the editor’s initial content, both will be normalized to a `<sub>` HTML tag. | ||
|
|
||
| ## Installation | ||
| ```bash | ||
| # with npm | ||
| npm install @tiptap/extension-subscript | ||
|
|
||
| # with Yarn | ||
| yarn add @tiptap/extension-subscript | ||
| ``` | ||
|
|
||
| ## Settings | ||
| | Option | Type | Default | Description | | ||
| | -------------- | -------- | ------- | --------------------------------------------------------------------- | | ||
| | HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. | | ||
|
|
||
| ## Commands | ||
| | Command | Parameters | Description | | ||
| | --------------- | ---------- | ------------------------- | | ||
| | setSubscript | — | Mark text as subscript. | | ||
| | toggleSubscript | — | Toggle subscript mark. | | ||
| | unsetSubscript | — | Remove subscript mark. | | ||
|
|
||
| ## Source code | ||
| [packages/extension-subscript/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-subscript/) | ||
|
|
||
| ## Usage | ||
| <demo name="Marks/Subscript" highlight="3-5,16,35" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| # Superscript | ||
| [](https://www.npmjs.com/package/@tiptap/extension-superscript) | ||
| [](https://npmcharts.com/compare/@tiptap/extension-superscript?minimal=true) | ||
|
|
||
| Use this extension to render text in <sup>superscript</sup>. If you pass `<sup>` or text with `vertical-align: super` as inline style in the editor’s initial content, both will be normalized to a `<sup>` HTML tag. | ||
|
|
||
| ## Installation | ||
| ```bash | ||
| # with npm | ||
| npm install @tiptap/extension-superscript | ||
|
|
||
| # with Yarn | ||
| yarn add @tiptap/extension-superscript | ||
| ``` | ||
|
|
||
| ## Settings | ||
| | Option | Type | Default | Description | | ||
| | -------------- | -------- | ------- | --------------------------------------------------------------------- | | ||
| | HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. | | ||
|
|
||
| ## Commands | ||
| | Command | Parameters | Description | | ||
| | ----------------- | ---------- | ------------------------- | | ||
| | setSuperscript | — | Mark text as superscript. | | ||
| | toggleSuperscript | — | Toggle superscript mark. | | ||
| | unsetSuperscript | — | Remove superscript mark. | | ||
|
|
||
| ## Source code | ||
| [packages/extension-superscript/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-superscript/) | ||
|
|
||
| ## Usage | ||
| <demo name="Marks/Superscript" highlight="3-5,17,36" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| # @tiptap/extension-superscript | ||
| [](https://www.npmjs.com/package/@tiptap/extension-superscript) | ||
| [](https://npmcharts.com/compare/tiptap?minimal=true) | ||
| [](https://www.npmjs.com/package/@tiptap/extension-superscript) | ||
| [](https://github.com/sponsors/ueberdosis) | ||
|
|
||
| ## Introduction | ||
| tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*. | ||
|
|
||
| ## Official Documentation | ||
| Documentation can be found on the [tiptap website](https://tiptap.dev). | ||
|
|
||
| ## License | ||
| tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| { | ||
| "name": "@tiptap/extension-subscript", | ||
| "description": "subscript extension for tiptap", | ||
| "version": "2.0.0-beta.1", | ||
| "homepage": "https://tiptap.dev", | ||
| "keywords": [ | ||
| "tiptap", | ||
| "tiptap extension" | ||
| ], | ||
| "license": "MIT", | ||
| "funding": { | ||
| "type": "github", | ||
| "url": "https://github.com/sponsors/ueberdosis" | ||
| }, | ||
| "main": "dist/tiptap-extension-subscript.cjs.js", | ||
| "umd": "dist/tiptap-extension-subscript.umd.js", | ||
| "module": "dist/tiptap-extension-subscript.esm.js", | ||
| "types": "dist/packages/extension-subscript/src/index.d.ts", | ||
| "files": [ | ||
| "src", | ||
| "dist" | ||
| ], | ||
| "peerDependencies": { | ||
| "@tiptap/core": "^2.0.0-beta.1" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { Subscript } from './subscript' | ||
|
|
||
| export * from './subscript' | ||
|
|
||
| export default Subscript |
Oops, something went wrong.