From 1fc7a6b37eeb2e087d949040db7e8a010f72ece7 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Fri, 2 Oct 2020 15:28:00 +0200 Subject: [PATCH 01/28] add basic highlight extension --- .../demos/Extensions/Highlight/index.spec.js | 51 +++++++++++++++++++ docs/src/demos/Extensions/Highlight/index.vue | 49 ++++++++++++++++++ docs/src/docPages/api/extensions.md | 1 + docs/src/docPages/api/extensions/highlight.md | 31 +++++++++++ docs/src/links.yaml | 2 + packages/extension-highlight/index.ts | 31 +++++++++++ packages/extension-highlight/package.json | 17 +++++++ 7 files changed, 182 insertions(+) create mode 100644 docs/src/demos/Extensions/Highlight/index.spec.js create mode 100644 docs/src/demos/Extensions/Highlight/index.vue create mode 100644 docs/src/docPages/api/extensions/highlight.md create mode 100644 packages/extension-highlight/index.ts create mode 100644 packages/extension-highlight/package.json 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" + } +} From b5359a305f9807681cb5f70da5a32013cda6e337 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Fri, 2 Oct 2020 21:39:16 +0200 Subject: [PATCH 02/28] add color support --- docs/src/demos/Extensions/Highlight/index.vue | 1 + packages/extension-highlight/index.ts | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/docs/src/demos/Extensions/Highlight/index.vue b/docs/src/demos/Extensions/Highlight/index.vue index d7b3ea50..bf881cd4 100644 --- a/docs/src/demos/Extensions/Highlight/index.vue +++ b/docs/src/demos/Extensions/Highlight/index.vue @@ -38,6 +38,7 @@ export default { content: `

This isn’t highlighted.

But this one is.

+

And this is highlighted too, but in a different color.

`, }) }, diff --git a/packages/extension-highlight/index.ts b/packages/extension-highlight/index.ts index 30c71eb6..fcf8aa16 100644 --- a/packages/extension-highlight/index.ts +++ b/packages/extension-highlight/index.ts @@ -13,12 +13,25 @@ declare module '@tiptap/core/src/Editor' { export default new Mark() .name('highlight') .schema(() => ({ + attrs: { + color: { + default: null, + }, + }, parseDOM: [ { tag: 'mark', + getAttrs: node => { + return { + color: (node as HTMLElement).style.backgroundColor, + } + }, }, ], - toDOM: () => ['mark', 0], + toDOM: node => ['mark', { + ...node.attrs, + style: node.attrs.color && `background-color: ${node.attrs.color};`, + }, 0], })) .commands(({ name }) => ({ highlight: () => ({ commands }) => { From 021d911ad626a96c68504a99b2575eff1951a946 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Mon, 5 Oct 2020 16:17:31 +0200 Subject: [PATCH 03/28] add color parameter to highlight command --- docs/src/demos/Extensions/Highlight/index.vue | 19 +++++++++++++++++-- packages/core/src/commands/toggleMark.ts | 6 +++--- packages/extension-highlight/index.ts | 4 ++-- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/docs/src/demos/Extensions/Highlight/index.vue b/docs/src/demos/Extensions/Highlight/index.vue index bf881cd4..d397aa68 100644 --- a/docs/src/demos/Extensions/Highlight/index.vue +++ b/docs/src/demos/Extensions/Highlight/index.vue @@ -1,7 +1,22 @@