diff --git a/docs/src/demos/Extensions/Highlight/index.spec.js b/docs/src/demos/Extensions/Highlight/index.spec.js new file mode 100644 index 00000000..eb2f7e0c --- /dev/null +++ b/docs/src/demos/Extensions/Highlight/index.spec.js @@ -0,0 +1,51 @@ +context('/api/extensions/highlight', () => { + before(() => { + cy.visit('/api/extensions/highlight') + }) + + beforeEach(() => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('

Example Text

') + editor.selectAll() + }) + }) + + it('the button should highlight the selected text', () => { + cy.get('.demo__preview button:first') + .click() + + cy.get('.ProseMirror') + .find('mark') + .should('contain', 'Example Text') + }) + + it('the button should toggle the selected text highlighted', () => { + cy.get('.demo__preview button:first') + .click() + + cy.get('.ProseMirror') + .type('{selectall}') + + cy.get('.demo__preview button:first') + .click() + + cy.get('.ProseMirror') + .find('mark') + .should('not.exist') + }) + + it('the keyboard shortcut should highlight the selected text', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, key: 'e' }) + .find('mark') + .should('contain', 'Example Text') + }) + + it('the keyboard shortcut should toggle the selected text highlighted', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, key: 'e' }) + .trigger('keydown', { modKey: true, key: 'e' }) + .find('mark') + .should('not.exist') + }) +}) diff --git a/docs/src/demos/Extensions/Highlight/index.vue b/docs/src/demos/Extensions/Highlight/index.vue new file mode 100644 index 00000000..d7b3ea50 --- /dev/null +++ b/docs/src/demos/Extensions/Highlight/index.vue @@ -0,0 +1,49 @@ + + + diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md index c7dfc51b..82553d88 100644 --- a/docs/src/docPages/api/extensions.md +++ b/docs/src/docPages/api/extensions.md @@ -24,6 +24,7 @@ You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which in | [Document](/api/extensions/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) | | [HardBreak](/api/extensions/hard-break) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/) | | [Heading](/api/extensions/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/) | +| [Highlight](/api/extensions/highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/) | | [History](/api/extensions/history) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/) | | [HorizontalRule](/api/extensions/horizontal-rule) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) | | [Italic](/api/extensions/italic) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/) | diff --git a/docs/src/docPages/api/extensions/highlight.md b/docs/src/docPages/api/extensions/highlight.md new file mode 100644 index 00000000..418b9e41 --- /dev/null +++ b/docs/src/docPages/api/extensions/highlight.md @@ -0,0 +1,31 @@ +# Highlight +Use this extension to render highlighted text with ``. + +## Installation +```bash +# With npm +npm install @tiptap/extension-highlight + +# Or: With Yarn +yarn add @tiptap/extension-highlight +``` + +## Settings +| Option | Type | Default | Description | +| ------ | ------ | ------- | -------------------------------------------- | +| class | string | – | Add a custom class to the rendered HTML tag. | + +## Commands +| Command | Options | Description | +| --------- | ------- | ------------------------- | +| highlight | — | Mark text as highlighted. | + +## Keyboard shortcuts +* Windows/Linux: `Control` `E` +* macOS: `Cmd` `E` + +## Source code +[packages/extension-highlight/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/) + +## Usage + diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 94e80146..0b6a08c8 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -128,6 +128,8 @@ link: /api/extensions/hard-break - title: Heading link: /api/extensions/heading + - title: Highlight + link: /api/extensions/highlight - title: History link: /api/extensions/history - title: HorizontalRule diff --git a/packages/extension-highlight/index.ts b/packages/extension-highlight/index.ts new file mode 100644 index 00000000..30c71eb6 --- /dev/null +++ b/packages/extension-highlight/index.ts @@ -0,0 +1,31 @@ +import { + Command, Mark, +} from '@tiptap/core' + +export type HighlightCommand = () => Command + +declare module '@tiptap/core/src/Editor' { + interface Commands { + highlight: HighlightCommand, + } +} + +export default new Mark() + .name('highlight') + .schema(() => ({ + parseDOM: [ + { + tag: 'mark', + }, + ], + toDOM: () => ['mark', 0], + })) + .commands(({ name }) => ({ + highlight: () => ({ commands }) => { + return commands.toggleMark(name) + }, + })) + .keys(({ editor }) => ({ + 'Mod-e': () => editor.highlight(), + })) + .create() diff --git a/packages/extension-highlight/package.json b/packages/extension-highlight/package.json new file mode 100644 index 00000000..ecfc44b0 --- /dev/null +++ b/packages/extension-highlight/package.json @@ -0,0 +1,17 @@ +{ + "name": "@tiptap/extension-highlight", + "version": "1.0.0", + "source": "index.ts", + "main": "dist/tiptap-extension-highlight.js", + "umd:main": "dist/tiptap-extension-highlight.umd.js", + "module": "dist/tiptap-extension-highlight.mjs", + "unpkg": "dist/tiptap-extension-highlight.js", + "jsdelivr": "dist/tiptap-extension-highlight.js", + "files": [ + "src", + "dist" + ], + "peerDependencies": { + "@tiptap/core": "2.x" + } +}