Merge branch 'main' of github.com:ueberdosis/tiptap-next into main

docs/src/demos/Marks/Highlight/index.spec.js

@@ -0,0 +1,139 @@
+context('/api/marks/highlight', () => {
+  before(() => {
+    cy.visit('/api/marks/highlight')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor
+        .chain()
+        .setContent('<p>Example Text</p>')
+        .selectAll()
+        .run()
+    })
+  })
+
+  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('should highlight the text in a specific color', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.highlight({ color: 'red' })
+
+      cy.get('.ProseMirror')
+        .find('mark')
+        .should('contain', 'Example Text')
+        .should('have.attr', 'data-color', 'red')
+    })
+  })
+
+  it('should update the attributes of existing marks', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor
+        .chain()
+        .setContent('<p><mark style="background-color: blue;">Example Text</mark></p>')
+        .selectAll()
+        .highlight({ color: 'rgb(255, 0, 0)' })
+        .run()
+
+      cy.get('.ProseMirror')
+        .find('mark')
+        .should('have.css', 'background-color', 'rgb(255, 0, 0)')
+    })
+  })
+
+  it('should remove existing marks with the same attributes', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor
+        .chain()
+        .setContent('<p><mark style="background-color: rgb(255, 0, 0);">Example Text</mark></p>')
+        .selectAll()
+        .highlight({ color: 'rgb(255, 0, 0)' })
+        .run()
+
+      cy.get('.ProseMirror')
+        .find('mark')
+        .should('not.exist')
+    })
+  })
+
+  it('is active for mark with any attributes', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor
+        .chain()
+        .setContent('<p><mark data-color="red">Example Text</mark></p>')
+        .selectAll()
+        .run()
+
+      expect(editor.isActive('highlight')).to.eq(true)
+    })
+  })
+
+  it('is active for mark with same attributes', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor
+        .chain()
+        .setContent('<p><mark style="background-color: rgb(255, 0, 0);">Example Text</mark></p>')
+        .selectAll()
+        .run()
+
+      const isActive = editor.isActive('highlight', {
+        color: 'rgb(255, 0, 0)',
+      })
+
+      expect(isActive).to.eq(true)
+    })
+  })
+
+  it('isn’t active for mark with other attributes', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor
+        .chain()
+        .setContent('<p><mark style="background-color: rgb(255, 0, 0);">Example Text</mark></p>')
+        .selectAll()
+        .run()
+
+      const isActive = editor.isActive('highlight', {
+        color: 'rgb(0, 0, 0)',
+      })
+
+      expect(isActive).to.eq(false)
+    })
+  })
+
+  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/Marks/Highlight/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div v-if="editor">
+    <button
+      @click="editor.chain().focus().highlight().run()"
+      :class="{ 'is-active': editor.isActive('highlight') }"
+    >
+      highlight (any)
+    </button>
+    <button
+      @click="editor.chain().focus().highlight({
+        color: ''
+      }).run()"
+      :class="{ 'is-active': editor.isActive('highlight', {
+        color: ''
+      }) }"
+    >
+      highlight (default)
+    </button>
+    <button @click="editor.chain().focus().highlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
+      "red"
+    </button>
+    <button @click="editor.chain().focus().highlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
+      red
+    </button>
+    <button @click="editor.chain().focus().highlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }">
+      orange
+    </button>
+    <button @click="editor.chain().focus().highlight({ color: '#8ce99a' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#8ce99a' }) }">
+      green
+    </button>
+    <button @click="editor.chain().focus().highlight({ color: '#74c0fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#74c0fc' }) }">
+      blue
+    </button>
+    <button @click="editor.chain().focus().highlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }">
+      purple
+    </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 that one is.</mark></p>
+          <p><mark style="background-color: red;">And this is highlighted too, but in a different color.</mark></p>
+          <p><mark data-color="#ffa8a8">And this one has a data attribute.</mark></p>
+        `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+mark {
+  background-color: #ffe066;
+}
+</style>

docs/src/docPages/api/commands.md

@@ -80,6 +80,7 @@ Have a look at all of the core commands listed below. They should give you a goo
 | Command                 | Description                                               |
 | ----------------------- | --------------------------------------------------------- |
 | .clearNodes()           | Normalize nodes to a simple paragraph.                    |
+| .extendMarkRange()      | Extends the text selection to the current mark.           |
 | .removeMark()           | Remove a mark in the current selection.                   |
 | .removeMarks()          | Remove all marks in the current selection.                |
 | .removeMarks()          | Remove all marks in the current selection.                |

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

@@ -0,0 +1,33 @@
+# Highlight
+Use this extension to render highlighted text with `<mark>`. You can use only default `<mark>` HTML tag, which has a yellow background color by default, or apply different colors.
+
+Type `==two equal signs==` and it will magically transform to <mark>highlighted</mark> text while you type.
+
+## 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 | color   | Mark text as highlighted, optionally pass a specific color. |
+
+## 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="Marks/Highlight" highlight="3-8,48,67" />

docs/src/links.yaml

@@ -104,6 +104,8 @@
           link: /api/marks/bold
         - title: Code
           link: /api/marks/code
+        - title: Highlight
+          link: /api/marks/highlight
         - title: Italic
           link: /api/marks/italic
         - title: Link