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

.eslintrc.js

@@ -63,6 +63,8 @@ module.exports = {
         '@typescript-eslint/no-unused-vars': ['error'],
         'no-use-before-define': 'off',
         '@typescript-eslint/no-use-before-define': ['error'],
+        'no-dupe-class-members': 'off',
+        '@typescript-eslint/no-dupe-class-members': ['error'],
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-empty-interface': 'off',
         '@typescript-eslint/explicit-module-boundary-type': 'off',

docs/gridsome.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const visit = require('unist-util-visit')
 
 function addStyleResource(rule) {
   rule.use('style-resource')
@@ -10,6 +11,28 @@ function addStyleResource(rule) {
     })
 }
 
+function tableWrapper() {
+  return async tree => {
+    visit(
+      tree,
+      'table',
+      (node, index, parent) => {
+        if (node.type === 'table' && parent.type === 'root') {
+          const original = { ...node }
+
+          node.type = 'div'
+          node.children = [original]
+          node.data = {
+            hProperties: {
+              class: 'table-wrapper',
+            },
+          }
+        }
+      },
+    )
+  }
+}
+
 module.exports = {
   siteName: 'tiptap',
   titleTemplate: '%s | tiptap',
@@ -26,6 +49,7 @@ module.exports = {
           '@gridsome/remark-prismjs',
           'remark-container',
           'remark-toc',
+          tableWrapper,
         ],
         remark: {
           autolinkHeadings: {

docs/src/components/Demo/index.vue

@@ -100,6 +100,10 @@ export default {
     },
 
     githubUrl() {
+      if (process.env.NODE_ENV === 'development') {
+        return `vscode://file${this.cwd}/src/demos/${this.name}/${this.files[0].name}`
+      }
+
       return `https://github.com/ueberdosis/tiptap-next/tree/main/docs/src/demos/${this.name}`
     },
   },

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

@@ -13,7 +13,7 @@
       <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
         code
       </button>
-      <button @click="editor.chain().focus().unsetMarks().run()">
+      <button @click="editor.chain().focus().unsetAllMarks().run()">
         clear marks
       </button>
       <button @click="editor.chain().focus().clearNodes().run()">

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

@@ -13,7 +13,7 @@
       <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
         code
       </button>
-      <button @click="editor.chain().focus().unsetMarks().run()">
+      <button @click="editor.chain().focus().unsetAllMarks().run()">
         clear marks
       </button>
       <button @click="editor.chain().focus().clearNodes().run()">

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

@@ -13,7 +13,7 @@
       <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
         code
       </button>
-      <button @click="editor.chain().focus().unsetMarks().run()">
+      <button @click="editor.chain().focus().unsetAllMarks().run()">
         clear marks
       </button>
       <button @click="editor.chain().focus().clearNodes().run()">

docs/src/demos/Guide/BuildYourEditor/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="editor">
-      <button @click="editor.chain().focus().unsetMarks().run()">
+      <button @click="editor.chain().focus().unsetAllMarks().run()">
         clear formatting
       </button>
       <button @click="editor.chain().focus().undo().run()">

docs/src/demos/React/index.jsx

@@ -9,7 +9,7 @@ const MenuBar = () => {
 
   return (
     <>
-      <button onClick={() => editor.chain().focus().unsetMarks().run()}>
+      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
         Clear formatting
       </button>
       <button

docs/src/docPages/api/commands.md

@@ -110,14 +110,14 @@ Have a look at all of the core commands listed below. They should give you a goo
 | .extendMarkRange()      | Extends the text selection to the current mark.           |
 | .resetNodeAttributes()  | Resets all node attributes to the default value.          |
 | .selectParentNode()     | Select the parent node.                                   |
-| .setBlockType()         | Replace a given range with a node.                        |
 | .setMark()              | Add a mark with new attributes.                           |
+| .setNode()              | Replace a given range with a node.                        |
 | .splitBlock()           | Forks a new node from an existing node.                   |
-| .toggleBlockType()      | Toggle a node with another node.                          |
 | .toggleMark()           | Toggle a mark on and off.                                 |
+| .toggleNode()           | Toggle a node with another node.                          |
 | .toggleWrap()           | Wraps nodes in another node, or removes an existing wrap. |
+| .unsetAllMarks()        | Remove all marks in the current selection.                |
 | .unsetMark()            | Remove a mark in the current selection.                   |
-| .unsetMarks()           | Remove all marks in the current selection.                |
 | .updateNodeAttributes() | Update attributes of a node.                              |
 
 ### Lists

docs/src/docPages/api/editor.md

@@ -100,6 +100,33 @@ new Editor({
 | `false`   | Disables autofocus.                                    |
 | `null`    | Disables autofocus.                                    |
 
+### Enable input rules
+By default, tiptap enables all [input rules](/guide/build-custom-extensions/#input-rules). With `enableInputRules` you can disable that.
+
+```js
+import { Editor } from '@tiptap/core'
+import { defaultExtensions } from '@tiptap/starter-kit'
+
+new Editor({
+  content: `<p>Example Text</p>`,
+  extensions: defaultExtensions(),
+  enableInputRules: false,
+})
+```
+
+### Enable paste rules
+By default, tiptap enables all [paste rules](/guide/build-custom-extensions/#paste-rules). With `enablePasteRules` you can disable that.
+
+```js
+import { Editor } from '@tiptap/core'
+import { defaultExtensions } from '@tiptap/starter-kit'
+
+new Editor({
+  content: `<p>Example Text</p>`,
+  extensions: defaultExtensions(),
+  enablePasteRules: false,
+})
+```
 
 ### Inject CSS
 By default, tiptap injects [a little bit of CSS](https://github.com/ueberdosis/tiptap-next/tree/main/packages/core/src/style.ts). With `injectCSS` you can disable that.

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

@@ -275,7 +275,7 @@ const CustomParagraph = Paragraph.extend({
   addCommands() {
     return {
       paragraph: () => ({ commands }) => {
-        return commands.toggleBlockType('paragraph', 'paragraph')
+        return commands.toggleNode('paragraph', 'paragraph')
       },
     }
   },

docs/src/templates/DocPage/style.scss

@@ -82,7 +82,7 @@
     > p code,
     > ul code,
     > ol code,
-    > table code,
+    > .table-wrapper code,
     > .remark-container code {
       color: $colorYellow;
       background-color: rgba($colorYellow, 0.1);
@@ -92,7 +92,7 @@
     > p a,
     > ul a,
     > ol a,
-    > table a,
+    > .table-wrapper a,
     > .remark-container a {
       text-decoration: underline;
 
@@ -187,46 +187,55 @@
       }
     }
 
-    > table {
+    > .table-wrapper {
+      display: block;
       width: 100%;
-      border-collapse: collapse;
+      overflow-x: auto;
-      font-size: 0.85rem;
+      -webkit-overflow-scrolling: touch;
-      text-align: left;
 
-      th,
+      > table {
-      td {
+        width: 100%;
-        padding: 0.5rem;
+        border-collapse: collapse;
+        font-size: 0.85rem;
+        text-align: left;
 
-        &:first-child {
+        th,
-          padding-left: 0;
+        td {
+          padding: 0.5rem;
+          min-width: 8rem;
+
+          &:first-child {
+            padding-left: 0;
+          }
+
+          &:last-child {
+            padding-right: 0;
+          }
         }
 
-        &:last-child {
+        th {
-          padding-right: 0;
+          white-space: nowrap;
+          color: $colorWhite;
+          font-weight: 500;
+          border-bottom: 1px solid rgba($colorWhite, 0.2);
         }
-      }
 
-      th {
+        td {
-        color: $colorWhite;
+          border-bottom: 1px solid rgba($colorWhite, 0.1);
-        font-weight: 500;
+        }
-        border-bottom: 1px solid rgba($colorWhite, 0.2);
-      }
 
-      td {
+        tr:last-child td {
-        border-bottom: 1px solid rgba($colorWhite, 0.1);
-      }
-
-      tr:last-child td {
-        border-bottom: 0;
-      }
-
-      tbody tr {
-        &:last-child td {
           border-bottom: 0;
         }
 
-        &:hover {
+        tbody tr {
-          background: rgba($colorWhite, 0.02);
+          &:last-child td {
+            border-bottom: 0;
+          }
+
+          &:hover {
+            background: rgba($colorWhite, 0.02);
+          }
         }
       }
     }

packages/core/src/Editor.ts

@@ -14,7 +14,12 @@ import createStyleTag from './utils/createStyleTag'
 import CommandManager from './CommandManager'
 import ExtensionManager from './ExtensionManager'
 import EventEmitter from './EventEmitter'
-import { EditorOptions, EditorContent, CommandSpec } from './types'
+import {
+  EditorOptions,
+  EditorContent,
+  CommandSpec,
+  EditorSelection,
+} from './types'
 import * as extensions from './extensions'
 import style from './style'
 
@@ -39,7 +44,7 @@ export class Editor extends EventEmitter {
 
   public view!: EditorView
 
-  public selection = { from: 0, to: 0 }
+  public selection: EditorSelection = { from: 0, to: 0 }
 
   public isFocused = false
 
@@ -52,6 +57,8 @@ export class Editor extends EventEmitter {
     editable: true,
     editorProps: {},
     parseOptions: {},
+    enableInputRules: true,
+    enablePasteRules: true,
     onInit: () => null,
     onUpdate: () => null,
     onTransaction: () => null,

packages/core/src/ExtensionManager.ts

@@ -1,4 +1,3 @@
-import { Plugin } from 'prosemirror-state'
 import { keymap } from 'prosemirror-keymap'
 import { Schema, Node as ProsemirrorNode } from 'prosemirror-model'
 import { inputRules } from 'prosemirror-inputrules'
@@ -37,7 +36,7 @@ export default class ExtensionManager {
     })
   }
 
-  get plugins(): Plugin[] {
+  get plugins() {
     const plugins = this.extensions
       .map(extension => {
         const context = {
@@ -58,7 +57,11 @@ export default class ExtensionManager {
     ]
   }
 
-  get inputRules(): any {
+  get inputRules() {
+    if (!this.editor.options.enableInputRules) {
+      return []
+    }
+
     return this.extensions
       .map(extension => {
         const context = {
@@ -72,7 +75,11 @@ export default class ExtensionManager {
       .flat()
   }
 
-  get pasteRules(): any {
+  get pasteRules() {
+    if (!this.editor.options.enablePasteRules) {
+      return []
+    }
+
     return this.extensions
       .map(extension => {
         const context = {

packages/core/src/commands/focus.ts

@@ -1,16 +1,10 @@
-import { TextSelection } from 'prosemirror-state'
+import { EditorState, TextSelection } from 'prosemirror-state'
-import { Editor } from '../Editor'
 import { Command, FocusPosition } from '../types'
 import minMax from '../utils/minMax'
 
-interface ResolvedSelection {
+function resolveSelection(state: EditorState, position: FocusPosition = null) {
-  from: number,
+  if (!position) {
-  to: number,
+    return null
-}
-
-function resolveSelection(editor: Editor, position: FocusPosition = null): ResolvedSelection {
-  if (position === null) {
-    return editor.selection
   }
 
   if (position === 'start' || position === true) {
@@ -21,17 +15,17 @@ function resolveSelection(editor: Editor, position: FocusPosition = null): Resol
   }
 
   if (position === 'end') {
-    const { size } = editor.state.doc.content
+    const { size } = state.doc.content
 
     return {
       from: size,
-      to: size - 1, // TODO: -1 only for nodes with content
+      to: size,
     }
   }
 
   return {
-    from: position as number,
+    from: position,
-    to: position as number,
+    to: position,
   }
 }
 
@@ -48,7 +42,7 @@ export const focus = (position: FocusPosition = null): Command => ({
     return true
   }
 
-  const { from, to } = resolveSelection(editor, position)
+  const { from, to } = resolveSelection(editor.state, position) || editor.selection
   const { doc } = tr
   const resolvedFrom = minMax(from, 0, doc.content.size)
   const resolvedEnd = minMax(to, 0, doc.content.size)

packages/core/src/commands/setBlockType.ts

@@ -1,13 +0,0 @@
-import { NodeType } from 'prosemirror-model'
-import { setBlockType as originalSetBlockType } from 'prosemirror-commands'
-import { Command } from '../types'
-import getNodeType from '../utils/getNodeType'
-
-/**
- * Replace a given range with a node.
- */
-export const setBlockType = (typeOrName: string | NodeType, attrs = {}): Command => ({ state, dispatch }) => {
-  const type = getNodeType(typeOrName, state.schema)
-
-  return originalSetBlockType(type, attrs)(state, dispatch)
-}

packages/core/src/commands/setNode.ts

@@ -0,0 +1,13 @@
+import { NodeType } from 'prosemirror-model'
+import { setBlockType } from 'prosemirror-commands'
+import { Command } from '../types'
+import getNodeType from '../utils/getNodeType'
+
+/**
+ * Replace a given range with a node.
+ */
+export const setNode = (typeOrName: string | NodeType, attrs = {}): Command => ({ state, dispatch }) => {
+  const type = getNodeType(typeOrName, state.schema)
+
+  return setBlockType(type, attrs)(state, dispatch)
+}

packages/core/src/commands/toggleNode.ts

@@ -6,14 +6,14 @@ import getNodeType from '../utils/getNodeType'
 /**
  * Toggle a node with another node.
  */
-export const toggleBlockType = (typeOrName: string | NodeType, toggleTypeOrName: string | NodeType, attrs = {}): Command => ({ state, commands }) => {
+export const toggleNode = (typeOrName: string | NodeType, toggleTypeOrName: string | NodeType, attrs = {}): Command => ({ state, commands }) => {
   const type = getNodeType(typeOrName, state.schema)
   const toggleType = getNodeType(toggleTypeOrName, state.schema)
   const isActive = nodeIsActive(state, type, attrs)
 
   if (isActive) {
-    return commands.setBlockType(toggleType)
+    return commands.setNode(toggleType)
   }
 
-  return commands.setBlockType(type, attrs)
+  return commands.setNode(type, attrs)
 }

packages/core/src/commands/unsetAllMarks.ts

@@ -3,7 +3,7 @@ import { Command } from '../types'
 /**
  * Remove all marks in the current selection.
  */
-export const unsetMarks = (): Command => ({ tr, state, dispatch }) => {
+export const unsetAllMarks = (): Command => ({ tr, state, dispatch }) => {
   const { selection } = tr
   const { from, to, empty } = selection
 

packages/core/src/extensions/commands.ts

@@ -15,18 +15,18 @@ import * as resetNodeAttributes from '../commands/resetNodeAttributes'
 import * as scrollIntoView from '../commands/scrollIntoView'
 import * as selectAll from '../commands/selectAll'
 import * as selectParentNode from '../commands/selectParentNode'
-import * as setBlockType from '../commands/setBlockType'
 import * as setContent from '../commands/setContent'
 import * as setMark from '../commands/setMark'
+import * as setNode from '../commands/setNode'
 import * as sinkListItem from '../commands/sinkListItem'
 import * as splitBlock from '../commands/splitBlock'
 import * as splitListItem from '../commands/splitListItem'
-import * as toggleBlockType from '../commands/toggleBlockType'
 import * as toggleList from '../commands/toggleList'
 import * as toggleMark from '../commands/toggleMark'
+import * as toggleNode from '../commands/toggleNode'
 import * as toggleWrap from '../commands/toggleWrap'
+import * as unsetAllMarks from '../commands/unsetAllMarks'
 import * as unsetMark from '../commands/unsetMark'
-import * as unsetMarks from '../commands/unsetMarks'
 import * as updateNodeAttributes from '../commands/updateNodeAttributes'
 import * as wrapIn from '../commands/wrapIn'
 import * as wrapInList from '../commands/wrapInList'
@@ -50,18 +50,18 @@ export const Commands = Extension.create({
       ...scrollIntoView,
       ...selectAll,
       ...selectParentNode,
-      ...setBlockType,
       ...setContent,
       ...setMark,
+      ...setNode,
       ...sinkListItem,
       ...splitBlock,
       ...splitListItem,
-      ...toggleBlockType,
       ...toggleList,
       ...toggleMark,
+      ...toggleNode,
       ...toggleWrap,
       ...unsetMark,
-      ...unsetMarks,
+      ...unsetAllMarks,
       ...updateNodeAttributes,
       ...wrapIn,
       ...wrapInList,

packages/core/src/types.ts

@@ -23,6 +23,8 @@ export interface EditorOptions {
   editable: boolean,
   editorProps: EditorProps,
   parseOptions: ParseOptions,
+  enableInputRules: boolean,
+  enablePasteRules: boolean,
   onInit: () => void,
   onUpdate: () => void,
   onTransaction: (props: { transaction: Transaction }) => void,
@@ -30,6 +32,11 @@ export interface EditorOptions {
   onBlur: (props: { event: FocusEvent }) => void,
 }
 
+export type EditorSelection = {
+  from: number,
+  to: number,
+}
+
 export type EditorContent = string | JSON | null
 
 export type Command = (props: {

packages/extension-code-block/src/index.ts

@@ -78,13 +78,13 @@ const CodeBlock = Node.create({
        * Set a code block
        */
       setCodeBlock: (attributes?: { language: string }): Command => ({ commands }) => {
-        return commands.setBlockType('codeBlock', attributes)
+        return commands.setNode('codeBlock', attributes)
       },
       /**
        * Toggle a code block
        */
       toggleCodeBlock: (attributes?: { language: string }): Command => ({ commands }) => {
-        return commands.toggleBlockType('codeBlock', 'paragraph', attributes)
+        return commands.toggleNode('codeBlock', 'paragraph', attributes)
       },
     }
   },

packages/extension-heading/src/index.ts

@@ -60,7 +60,7 @@ const Heading = Node.create({
           return false
         }
 
-        return commands.setBlockType('heading', attributes)
+        return commands.setNode('heading', attributes)
       },
       /**
        * Toggle a heading node
@@ -70,7 +70,7 @@ const Heading = Node.create({
           return false
         }
 
-        return commands.toggleBlockType('heading', 'paragraph', attributes)
+        return commands.toggleNode('heading', 'paragraph', attributes)
       },
     }
   },

packages/extension-paragraph/src/index.ts

@@ -33,7 +33,7 @@ const Paragraph = Node.create({
        * Toggle a paragraph
        */
       setParagraph: (): Command => ({ commands }) => {
-        return commands.toggleBlockType('paragraph', 'paragraph')
+        return commands.toggleNode('paragraph', 'paragraph')
       },
     }
   },

packages/starter-kit/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-alpha.4](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/starter-kit@2.0.0-alpha.3...@tiptap/starter-kit@2.0.0-alpha.4) (2020-11-20)
+
+**Note:** Version bump only for package @tiptap/starter-kit
+
+
+
+
+
 # [2.0.0-alpha.3](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/starter-kit@2.0.0-alpha.2...@tiptap/starter-kit@2.0.0-alpha.3) (2020-11-19)
 
 **Note:** Version bump only for package @tiptap/starter-kit

packages/starter-kit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiptap/starter-kit",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",

packages/vue-starter-kit/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-alpha.5](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-starter-kit@2.0.0-alpha.4...@tiptap/vue-starter-kit@2.0.0-alpha.5) (2020-11-20)
+
+**Note:** Version bump only for package @tiptap/vue-starter-kit
+
+
+
+
+
 # [2.0.0-alpha.4](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-starter-kit@2.0.0-alpha.3...@tiptap/vue-starter-kit@2.0.0-alpha.4) (2020-11-19)
 
 **Note:** Version bump only for package @tiptap/vue-starter-kit

packages/vue-starter-kit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiptap/vue-starter-kit",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -21,7 +21,7 @@
     "dist"
   ],
   "dependencies": {
-    "@tiptap/starter-kit": "^2.0.0-alpha.3",
+    "@tiptap/starter-kit": "^2.0.0-alpha.4",
     "@tiptap/vue": "^2.0.0-alpha.3"
   }
 }