Example Text
Example Text
') + 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') diff --git a/docs/src/demos/Extensions/CodeBlock/index.spec.js b/docs/src/demos/Extensions/CodeBlock/index.spec.js index 56585632..657878a1 100644 --- a/docs/src/demos/Extensions/CodeBlock/index.spec.js +++ b/docs/src/demos/Extensions/CodeBlock/index.spec.js @@ -59,9 +59,24 @@ context('/api/extensions/code-block', () => { }) it('should make a code block from markdown shortcuts', () => { - cy.get('.ProseMirror') - .type('``` {enter}Code') - .find('pre') - .should('contain', 'Code') + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.clearContent() + + cy.get('.ProseMirror') + .type('``` Code') + .find('pre>code') + .should('contain', 'Code') + }) + }) + + it('should make a code block for js', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.clearContent() + + cy.get('.ProseMirror') + .type('```js Code') + .find('pre>code.language-js') + .should('contain', 'Code') + }) }) }) diff --git a/docs/src/docPages/overview/upgrade-guide.md b/docs/src/docPages/overview/upgrade-guide.md index 0b969fd1..e4e0b150 100644 --- a/docs/src/docPages/overview/upgrade-guide.md +++ b/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 diff --git a/packages/core/src/commands/index.ts b/packages/core/src/commands/index.ts index e1e7582d..cd182285 100644 --- a/packages/core/src/commands/index.ts +++ b/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' diff --git a/packages/core/src/commands/toggleWrap.ts b/packages/core/src/commands/toggleWrap.ts new file mode 100644 index 00000000..e3a17095 --- /dev/null +++ b/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) +} diff --git a/packages/extension-blockquote/index.ts b/packages/extension-blockquote/index.ts index 851317a5..d01c6fe9 100644 --- a/packages/extension-blockquote/index.ts +++ b/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() diff --git a/packages/extension-code-block/index.ts b/packages/extension-code-block/index.ts index c91740e1..ab2bf10a 100644 --- a/packages/extension-code-block/index.ts +++ b/packages/extension-code-block/index.ts @@ -9,9 +9,16 @@ declare module '@tiptap/core/src/Editor' { } } +export const inputRegex = /^```(?