add basic highlight extension

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('<p>Example Text</p>')
+      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')
+  })
+})

docs/src/demos/Extensions/Highlight/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div v-if="editor">
+    <button @click="editor.chain().focus().highlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
+      highlight
+    </button>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Highlight from '@tiptap/extension-highlight'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        Highlight(),
+      ],
+      content: `
+          <p>This isn’t highlighted.</s></p>
+          <p><mark>But this one is.</mark></p>
+        `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

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/)               |

docs/src/docPages/api/extensions/highlight.md

@@ -0,0 +1,31 @@
+# Highlight
+Use this extension to render highlighted text with `<mark>`.
+
+## 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`&nbsp;`E`
+* macOS: `Cmd`&nbsp;`E`
+
+## Source code
+[packages/extension-highlight/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/)
+
+## Usage
+<demo name="Extensions/Highlight" highlight="3-5,17,36" />

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

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()

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"
+  }
+}