Merge pull request #13 from ueberdosis/feature/make-blockquotes-wrappable

make blockquotes wrappable

docs/src/demos/Extensions/Blockquote/index.spec.js

@@ -22,6 +22,20 @@ context('/api/extensions/blockquote', () => {
       .should('contain', 'Example Text')
   })
 
+  it('the button should wrap all nodes in a blockquote', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<p>Example Text</p><p>Example Text</p>')
+      editor.selectAll()
+    })
+
+    cy.get('.demo__preview button:first')
+      .click()
+
+    cy.get('.ProseMirror')
+      .find('blockquote')
+      .should('have.length', 1)
+  })
+
   it('the button should toggle the blockquote', () => {
     cy.get('.ProseMirror blockquote')
       .should('not.exist')

docs/src/docPages/overview/upgrade-guide.md

@@ -77,12 +77,7 @@ const CustomExtension = new Node()
 
 Don’t forget to call `create()` in the end! Read more about [all the nifty details building custom extensions](/guide/custom-extensions) in our guide.
 
-### 4. Blockquotes must not be nested anymore
-:::warning Breaking Change
-Currently, blockquotes must not be nested anymore. That said, we’re working on bringing it back. If you use nested blockquotes in your app, don’t upgrade yet.
-:::
-
-### 5. Renamed API methods
+### 4. Renamed API methods
 [We renamed a lot of commands](/api/commands), hopefully you can migrate to the new API with search & replace. Here is a list of what changed:
 
 | Old method name | New method name |
@@ -90,11 +85,11 @@ Currently, blockquotes must not be nested anymore. That said, we’re working on
 | ~~`getHTML`~~   | `html`          |
 | ~~`getJSON`~~   | `json`          |
 
-### 6. Commands can be chained now
+### 5. Commands can be chained now
 
 …
 
-### 7. .focus() isn’t called on every command anymore
+### 6. .focus() isn’t called on every command anymore
 We tried to hide the `.focus()` command from you with tiptap 1 and executed that on every other command. That led to issues in specific use cases, where you want to run a command, but don’t want to focus the editor. With tiptap 2.x you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
 
 ```js

packages/core/src/commands/index.ts

@@ -18,3 +18,4 @@ export { toggleBlockType } from './toggleBlockType'
 export { toggleList } from './toggleList'
 export { toggleMark } from './toggleMark'
 export { updateMark } from './updateMark'
+export { toggleWrap } from './toggleWrap'

packages/core/src/commands/toggleWrap.ts

@@ -0,0 +1,26 @@
+import { wrapIn, lift } from 'prosemirror-commands'
+import { NodeType } from 'prosemirror-model'
+import { Command } from '../Editor'
+import nodeIsActive from '../utils/nodeIsActive'
+import getNodeType from '../utils/getNodeType'
+
+type ToggleWrapCommand = (typeOrName: string | NodeType, attrs?: {}) => Command
+
+declare module '../Editor' {
+  interface Commands {
+    toggleWrap: ToggleWrapCommand,
+  }
+}
+
+export const toggleWrap: ToggleWrapCommand = (typeOrName, attrs) => ({
+  state, dispatch,
+}) => {
+  const type = getNodeType(typeOrName, state.schema)
+  const isActive = nodeIsActive(state, type, attrs)
+
+  if (isActive) {
+    return lift(state, dispatch)
+  }
+
+  return wrapIn(type, attrs)(state, dispatch)
+}

packages/extension-blockquote/index.ts

@@ -1,5 +1,5 @@
 import { Command, Node } from '@tiptap/core'
-import { textblockTypeInputRule } from 'prosemirror-inputrules'
+import { wrappingInputRule } from 'prosemirror-inputrules'
 
 export type BlockquoteCommand = () => Command
 
@@ -14,7 +14,7 @@ export const inputRegex = /^\s*>\s$/gm
 export default new Node()
   .name('blockquote')
   .schema(() => ({
-    content: 'inline*',
+    content: 'block*',
     group: 'block',
     defining: true,
     draggable: false,
@@ -24,14 +24,14 @@ export default new Node()
     toDOM: () => ['blockquote', 0],
   }))
   .commands(({ name }) => ({
-    [name]: attrs => ({ commands }) => {
-      return commands.toggleBlockType(name, 'paragraph', attrs)
+    [name]: () => ({ commands }) => {
+      return commands.toggleWrap(name)
     },
   }))
   .keys(({ editor }) => ({
     'Shift-Mod-9': () => editor.blockquote(),
   }))
   .inputRules(({ type }) => [
-    textblockTypeInputRule(inputRegex, type),
+    wrappingInputRule(inputRegex, type),
   ])
   .create()