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

docs/src/demos/Examples/Basic/index.vue

@@ -40,10 +40,10 @@
       <button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
         h6
       </button>
-      <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
         bullet list
       </button>
-      <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+      <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
         ordered list
       </button>
       <button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -40,10 +40,10 @@
       <button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
         h6
       </button>
-      <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
         bullet list
       </button>
-      <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+      <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
         ordered list
       </button>
       <button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">

docs/src/demos/Examples/CollaborativeEditingWs/index.vue

@@ -40,10 +40,10 @@
       <button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
         h6
       </button>
-      <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
         bullet list
       </button>
-      <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+      <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
         ordered list
       </button>
       <button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">

docs/src/demos/Examples/Links/index.vue

@@ -3,7 +3,7 @@
     <button @click="addLink" :class="{ 'is-active': editor.isActive('link') }">
       link
     </button>
-    <button @click="editor.chain().focus().removeMark('link').run()" v-if="editor.isActive('link')">
+    <button @click="editor.chain().focus().removeLink().run()" v-if="editor.isActive('link')">
       remove
     </button>
     <editor-content :editor="editor" />
@@ -55,7 +55,7 @@ export default {
     addLink() {
       const url = window.prompt('URL')
 
-      this.editor.chain().focus().link({ href: url }).run()
+      this.editor.chain().focus().addLink({ href: url }).run()
     },
   },
 

docs/src/demos/Marks/Link/index.vue

@@ -3,7 +3,7 @@
     <button @click="addLink" :class="{ 'is-active': editor.isActive('link') }">
       link
     </button>
-    <button @click="editor.chain().focus().removeMark('link').run()" v-if="editor.isActive('link')">
+    <button @click="editor.chain().focus().removeLink().run()" v-if="editor.isActive('link')">
       remove
     </button>
     <editor-content :editor="editor" />
@@ -52,7 +52,7 @@ export default {
     addLink() {
       const url = window.prompt('URL')
 
-      this.editor.chain().focus().link({ href: url }).run()
+      this.editor.chain().focus().addLink({ href: url }).run()
     },
   },
 

docs/src/demos/Nodes/BulletList/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+    <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
       bullet list
     </button>
 

docs/src/demos/Nodes/ListItem/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+    <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
       bullet list
     </button>
-    <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+    <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
       ordered list
     </button>
 

docs/src/demos/Nodes/OrderedList/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+    <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
       ordered list
     </button>
 

docs/src/demos/Nodes/TaskList/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().taskList().run()" :class="{ 'is-active': editor.isActive('task_list') }">
+    <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('task_list') }">
       task list
     </button>
 

docs/src/docPages/api/commands.md

@@ -106,6 +106,7 @@ Have a look at all of the core commands listed below. They should give you a goo
 ### Nodes & Marks
 | Command                 | Description                                               |
 | ----------------------- | --------------------------------------------------------- |
+| .addMark()              | Add a mark with new attributes.                           |
 | .clearNodes()           | Normalize nodes to a simple paragraph.                    |
 | .extendMarkRange()      | Extends the text selection to the current mark.           |
 | .removeMark()           | Remove a mark in the current selection.                   |
@@ -118,7 +119,6 @@ Have a look at all of the core commands listed below. They should give you a goo
 | .toggleBlockType()      | Toggle a node with another node.                          |
 | .toggleMark()           | Toggle a mark on and off.                                 |
 | .toggleWrap()           | Wraps nodes in another node, or removes an existing wrap. |
-| .updateMarkAttributes() | Update a mark with new attributes.                        |
 | .updateNodeAttributes() | Update attributes of a node.                              |
 
 ### Lists

docs/src/docPages/api/keyboard-shortcuts.md

@@ -104,7 +104,7 @@ const CustomBulletList = BulletList.extend({
   addKeyboardShortcuts() {
     return {
       // ↓ your new keyboard shortcut
-      'Mod-l': () => this.editor.commands.bulletList(),
+      'Mod-l': () => this.editor.commands.toggleBulletList(),
     }
   },
 })

docs/src/docPages/guide/build-custom-extensions.md

@@ -25,7 +25,7 @@ import BulletList from '@tiptap/extension-bullet-list'
 const CustomBulletList = BulletList.extend({
   addKeyboardShortcuts() {
     return {
-      'Mod-l': () => this.editor.commands.bulletList(),
+      'Mod-l': () => this.editor.commands.toggleBulletList(),
     }
   },
 })
@@ -296,7 +296,7 @@ import BulletList from '@tiptap/extension-bullet-list'
 const CustomBulletList = BulletList.extend({
   addKeyboardShortcuts() {
     return {
-      'Mod-l': () => this.editor.commands.bulletList(),
+      'Mod-l': () => this.editor.commands.toggleBulletList(),
     }
   },
 })

packages/core/src/commands/addMark.ts

@@ -1,14 +1,24 @@
 import { MarkType } from 'prosemirror-model'
 import { Command } from '../types'
 import getMarkType from '../utils/getMarkType'
+import getMarkAttributes from '../utils/getMarkAttributes'
 
 export default (typeOrName: string | MarkType, attributes?: {}): Command => ({ tr, state, dispatch }) => {
   const { selection } = tr
+  const { from, to, empty } = selection
   const type = getMarkType(typeOrName, state.schema)
-  const { from, to } = selection
+  const oldAttributes = getMarkAttributes(state, type)
+  const newAttributes = {
+    ...oldAttributes,
+    ...attributes,
+  }
 
   if (dispatch) {
-    tr.addMark(from, to, type.create(attributes))
+    if (empty) {
+      tr.addStoredMark(type.create(newAttributes))
+    } else {
+      tr.addMark(from, to, type.create(newAttributes))
+    }
   }
 
   return true

packages/core/src/commands/toggleMark.ts

@@ -12,7 +12,7 @@ export default (typeOrName: string | MarkType, attributes?: {}): Command => ({ s
     && !markIsActive(state, type, attributes)
 
   if (attributes && hasMarkWithDifferentAttributes) {
-    return commands.updateMarkAttributes(type, attributes)
+    return commands.addMark(type, attributes)
   }
 
   return toggleMark(type, attributes)(state, dispatch)

packages/core/src/commands/updateMarkAttributes.ts

@@ -1,25 +0,0 @@
-import { MarkType } from 'prosemirror-model'
-import { Command } from '../types'
-import getMarkType from '../utils/getMarkType'
-import getMarkAttributes from '../utils/getMarkAttributes'
-
-export default (typeOrName: string | MarkType, attributes: {}): Command => ({ tr, state, dispatch }) => {
-  const { selection } = tr
-  const { from, to, empty } = selection
-  const type = getMarkType(typeOrName, state.schema)
-  const oldAttributes = getMarkAttributes(state, type)
-  const newAttributes = {
-    ...oldAttributes,
-    ...attributes,
-  }
-
-  if (dispatch) {
-    if (empty) {
-      tr.addStoredMark(type.create(newAttributes))
-    } else {
-      tr.addMark(from, to, type.create(newAttributes))
-    }
-  }
-
-  return true
-}

packages/core/src/extensions/commands.ts

@@ -26,7 +26,6 @@ import toggleList from '../commands/toggleList'
 import toggleMark from '../commands/toggleMark'
 import toggleWrap from '../commands/toggleWrap'
 import tryCommand from '../commands/try'
-import updateMarkAttributes from '../commands/updateMarkAttributes'
 import updateNodeAttributes from '../commands/updateNodeAttributes'
 import wrapInList from '../commands/wrapInList'
 
@@ -34,7 +33,7 @@ export const Commands = Extension.create({
   addCommands() {
     return {
       /**
-       * Add a mark.
+       * Add a mark with new attributes.
        */
       addMark,
       /**
@@ -141,10 +140,6 @@ export const Commands = Extension.create({
        * Runs one command after the other and stops at the first which returns true.
        */
       try: tryCommand,
-      /**
-       * Update a mark with new attributes.
-       */
-      updateMarkAttributes,
       /**
        * Update attributes of a node.
        */

packages/extension-bold/src/index.ts

@@ -1,5 +1,8 @@
 import {
-  Command, Mark, markInputRule, markPasteRule,
+  Command,
+  Mark,
+  markInputRule,
+  markPasteRule,
 } from '@tiptap/core'
 
 export interface BoldOptions {

packages/extension-bullet-list/src/index.ts

@@ -35,7 +35,7 @@ const BulletList = Node.create({
       /**
        * Toggle a bullet list
        */
-      bulletList: (): Command => ({ commands }) => {
+      toggleBulletList: (): Command => ({ commands }) => {
         return commands.toggleList('bulletList', 'listItem')
       },
     }
@@ -43,7 +43,7 @@ const BulletList = Node.create({
 
   addKeyboardShortcuts() {
     return {
-      'Shift-Control-8': () => this.editor.commands.bulletList(),
+      'Shift-Control-8': () => this.editor.commands.toggleBulletList(),
     }
   },
 

packages/extension-font-family/src/index.ts

@@ -42,7 +42,7 @@ const FontFamily = Extension.create({
        */
       fontFamily: (fontFamily: string | null = null): Command => ({ chain }) => {
         return chain()
-          .updateMarkAttributes('textStyle', { fontFamily })
+          .addMark('textStyle', { fontFamily })
           .removeEmptyTextStyle()
           .run()
       },

packages/extension-link/src/index.ts

@@ -47,14 +47,22 @@ const Link = Mark.create({
   addCommands() {
     return {
       /**
-       * Toggle or update a link mark
+       * Add a link mark
        */
-      link: (options: { href?: string, target?: string } = {}): Command => ({ commands }) => {
+      addLink: (attributes: { href?: string, target?: string } = {}): Command => ({ commands }) => {
-        if (!options.href) {
+        return commands.addMark('link', attributes)
+      },
+      /**
+       * Toggle a link mark
+       */
+      toggleLink: (attributes: { href?: string, target?: string } = {}): Command => ({ commands }) => {
+        return commands.toggleMark('link', attributes)
+      },
+      /**
+       * Remove a link mark
+       */
+      removeLink: (): Command => ({ commands }) => {
         return commands.removeMark('link')
-        }
-
-        return commands.updateMarkAttributes('link', options)
       },
     }
   },

packages/extension-ordered-list/src/index.ts

@@ -54,7 +54,7 @@ const OrderedList = Node.create({
       /**
        * Toggle an ordered list
        */
-      orderedList: (): Command => ({ commands }) => {
+      toggleOrderedList: (): Command => ({ commands }) => {
         return commands.toggleList('orderedList', 'listItem')
       },
     }
@@ -62,7 +62,7 @@ const OrderedList = Node.create({
 
   addKeyboardShortcuts() {
     return {
-      'Shift-Control-9': () => this.editor.commands.orderedList(),
+      'Shift-Control-9': () => this.editor.commands.toggleOrderedList(),
     }
   },
 

packages/extension-task-list/src/index.ts

@@ -35,7 +35,7 @@ const TaskList = Node.create({
       /**
        * Toggle a task list
        */
-      taskList: (): Command => ({ commands }) => {
+      toggleTaskList: (): Command => ({ commands }) => {
         return commands.toggleList('taskList', 'taskItem')
       },
     }

rollup.config.js

@@ -87,7 +87,6 @@ async function build(commandLineArgs) {
         }),
         ...basePlugins,
         typescript({
-          check: false,
           tsconfigOverride: {
             compilerOptions: {
               declaration: true,
@@ -123,7 +122,6 @@ async function build(commandLineArgs) {
         plugins: [
           ...basePlugins,
           typescript({
-            check: false,
             tsconfigOverride: {
               compilerOptions: {
                 paths: {