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

packages/core/src/Editor.ts

@@ -363,7 +363,7 @@ export class Editor extends EventEmitter {
     if (schemaType === 'node') {
       return nodeIsActive(this.state, this.schema.nodes[name], attrs)
     } if (schemaType === 'mark') {
-      return markIsActive(this.state, this.schema.marks[name])
+      return markIsActive(this.state, this.schema.marks[name], attrs)
     }
 
     return false

packages/core/src/commands/extendMarkRange.ts

@@ -0,0 +1,23 @@
+import { TextSelection } from 'prosemirror-state'
+import { MarkType } from 'prosemirror-model'
+import { Command } from '../Editor'
+import getMarkType from '../utils/getMarkType'
+import getMarkRange from '../utils/getMarkRange'
+
+export default (typeOrName: string | MarkType): Command => ({ tr, state, dispatch }) => {
+  const type = getMarkType(typeOrName, state.schema)
+  const { doc, selection } = tr
+  const { $from, empty } = selection
+
+  if (empty && dispatch) {
+    const range = getMarkRange($from, type)
+
+    if (range) {
+      const newSelection = TextSelection.create(doc, range.from, range.to)
+
+      tr.setSelection(newSelection)
+    }
+  }
+
+  return true
+}

packages/core/src/commands/toggleMark.ts

@@ -1,10 +1,19 @@
-import { toggleMark as originalToggleMark } from 'prosemirror-commands'
+import { toggleMark } from 'prosemirror-commands'
 import { MarkType } from 'prosemirror-model'
 import { Command } from '../Editor'
 import getMarkType from '../utils/getMarkType'
+import markIsActive from '../utils/markIsActive'
 
-export default (typeOrName: string | MarkType): Command => ({ state, dispatch }) => {
+export default (typeOrName: string | MarkType, attributes?: {}): Command => ({ state, dispatch, commands }) => {
   const type = getMarkType(typeOrName, state.schema)
 
-  return originalToggleMark(type)(state, dispatch)
+  const hasMarkWithDifferentAttributes = attributes
+    && markIsActive(state, type)
+    && !markIsActive(state, type, attributes)
+
+  if (attributes && hasMarkWithDifferentAttributes) {
+    return commands.updateMarkAttributes(type, attributes)
+  }
+
+  return toggleMark(type, attributes)(state, dispatch)
 }

packages/core/src/commands/updateMarkAttributes.ts

@@ -1,32 +1,24 @@
 import { MarkType } from 'prosemirror-model'
 import { Command } from '../Editor'
 import getMarkType from '../utils/getMarkType'
-import getMarkRange from '../utils/getMarkRange'
+import getMarkAttrs from '../utils/getMarkAttrs'
 
-export default (typeOrName: string | MarkType, attrs: {}): Command => ({ tr, state, dispatch }) => {
+export default (typeOrName: string | MarkType, attributes: {}): Command => ({ tr, state, dispatch }) => {
   const { selection } = tr
-  let { from, to } = selection
+  const { from, to, empty } = selection
-  const { $from, empty } = selection
   const type = getMarkType(typeOrName, state.schema)
-
+  const oldAttributes = getMarkAttrs(state, type)
-  if (empty) {
+  const newAttributes = {
-    const range = getMarkRange($from, type)
+    ...oldAttributes,
-
+    ...attributes,
-    if (range) {
-      from = range.from
-      to = range.to
   }
-  }
-
-  // TODO: toggleMark?
-  // const hasMark = doc.rangeHasMark(from, to, type)
-
-  // if (hasMark && dispatch) {
-  //   tr.removeMark(from, to, type)
-  // }
 
   if (dispatch) {
-    tr.addMark(from, to, type.create(attrs))
+    if (empty) {
+      tr.addStoredMark(type.create(newAttributes))
+    } else {
+      tr.addMark(from, to, type.create(newAttributes))
+    }
   }
 
   return true

packages/core/src/extensions/commands.ts

@@ -3,6 +3,7 @@ import blur from '../commands/blur'
 import clearContent from '../commands/clearContent'
 import clearNodes from '../commands/clearNodes'
 import deleteSelection from '../commands/deleteSelection'
+import extendMarkRange from '../commands/extendMarkRange'
 import focus from '../commands/focus'
 import insertHTML from '../commands/insertHTML'
 import insertText from '../commands/insertText'
@@ -34,6 +35,7 @@ export const Commands = createExtension({
       clearContent,
       clearNodes,
       deleteSelection,
+      extendMarkRange,
       focus,
       insertHTML,
       insertText,

packages/core/src/utils/getMarkAttrs.ts

@@ -2,12 +2,16 @@ import { EditorState } from 'prosemirror-state'
 import { Mark, MarkType } from 'prosemirror-model'
 
 export default function getMarkAttrs(state: EditorState, type: MarkType) {
-  const { from, to } = state.selection
+  const { from, to, empty } = state.selection
   let marks: Mark[] = []
 
+  if (empty) {
+    marks = state.selection.$head.marks()
+  } else {
     state.doc.nodesBetween(from, to, node => {
       marks = [...marks, ...node.marks]
     })
+  }
 
   const mark = marks.find(markItem => markItem.type.name === type.name)
 

packages/core/src/utils/getMarkRange.ts

@@ -17,6 +17,7 @@ export default function getMarkRange($pos: ResolvedPos, type: MarkType): Range |
   }
 
   const link = start.node.marks.find(mark => mark.type === type)
+
   if (!link) {
     return
   }
@@ -36,5 +37,8 @@ export default function getMarkRange($pos: ResolvedPos, type: MarkType): Range |
     endIndex += 1
   }
 
-  return { from: startPos, to: endPos }
+  return {
+    from: startPos,
+    to: endPos,
+  }
 }

packages/core/src/utils/markHasAttributes.ts

@@ -0,0 +1,18 @@
+import { EditorState } from 'prosemirror-state'
+import { MarkType } from 'prosemirror-model'
+import getMarkAttrs from './getMarkAttrs'
+import { AnyObject } from '../types'
+import isEmptyObject from './isEmptyObject'
+
+export default function markHasAttributes(state: EditorState, type: MarkType, attributes: AnyObject) {
+  if (isEmptyObject(attributes)) {
+    return true
+  }
+
+  const originalAttrs = getMarkAttrs(state, type)
+
+  return !!Object
+    .keys(attributes)
+    .filter(key => attributes[key] === originalAttrs[key])
+    .length
+}

packages/core/src/utils/markIsActive.ts

@@ -1,7 +1,9 @@
 import { EditorState } from 'prosemirror-state'
 import { MarkType } from 'prosemirror-model'
+import markHasAttributes from './markHasAttributes'
+import isEmptyObject from './isEmptyObject'
 
-export default function markIsActive(state: EditorState, type: MarkType) {
+export default function markIsActive(state: EditorState, type: MarkType, attributes = {}) {
   const {
     from,
     $from,
@@ -9,9 +11,13 @@ export default function markIsActive(state: EditorState, type: MarkType) {
     empty,
   } = state.selection
 
-  if (empty) {
+  const hasMark = empty
-    return !!type.isInSet(state.storedMarks || $from.marks())
+    ? !!(type.isInSet(state.storedMarks || $from.marks()))
-  }
+    : state.doc.rangeHasMark(from, to, type)
 
-  return !!state.doc.rangeHasMark(from, to, type)
+  const hasAttributes = markHasAttributes(state, type, attributes)
+
+  return isEmptyObject(attributes)
+    ? hasMark
+    : hasMark && hasAttributes
 }

packages/extension-highlight/index.ts

@@ -0,0 +1,82 @@
+import {
+  Command,
+  createMark,
+  markInputRule,
+  markPasteRule,
+} from '@tiptap/core'
+
+export const inputRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))$/gm
+export const pasteRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))/gm
+
+const Highlight = createMark({
+  name: 'highlight',
+
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        parseHTML: element => {
+          return {
+            color: element.getAttribute('data-color') || element.style.backgroundColor,
+          }
+        },
+        renderHTML: attributes => {
+          if (!attributes.color) {
+            return {}
+          }
+
+          return {
+            'data-color': attributes.color,
+            style: `background-color: ${attributes.color}`,
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'mark',
+      },
+    ]
+  },
+
+  renderHTML({ attributes }) {
+    return ['mark', attributes, 0]
+  },
+
+  addCommands() {
+    return {
+      highlight: (attributes?: { color: string }): Command => ({ commands }) => {
+        return commands.toggleMark('highlight', attributes)
+      },
+    }
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-e': () => this.editor.highlight(),
+    }
+  },
+
+  addInputRules() {
+    return [
+      markInputRule(inputRegex, this.type),
+    ]
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule(inputRegex, this.type),
+    ]
+  },
+})
+
+export default Highlight
+
+declare module '@tiptap/core/src/Editor' {
+  interface AllExtensions {
+    Highlight: typeof Highlight,
+  }
+}

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