ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hans Pagel
2020-11-18 12:12:43 +01:00
parent c47e4d1f6d fbee7656c8
commit 00e3dc7860
13 changed files with 92 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/demos/Examples/Basic/index.vue
View File

@@ -46,10 +46,10 @@
<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') }">
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().horizontalRule().run()">

4
docs/src/demos/Examples/CollaborativeEditing/index.vue
View File

@@ -46,10 +46,10 @@
<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') }">
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().horizontalRule().run()">

4
docs/src/demos/Examples/CollaborativeEditingWs/index.vue
View File

@@ -46,10 +46,10 @@
<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') }">
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().horizontalRule().run()">

12
docs/src/demos/Extensions/FontFamily/index.vue
View File

@@ -1,21 +1,21 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().fontFamily('Inter').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Inter' }) }">
<button @click="editor.chain().focus().setFontFamily('Inter').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Inter' }) }">
Inter
</button>
<button @click="editor.chain().focus().fontFamily('Comic Sans MS, Comic Sans').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Comic Sans MS, Comic Sans' }) }">
<button @click="editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Comic Sans MS, Comic Sans' }) }">
Comic Sans
</button>
<button @click="editor.chain().focus().fontFamily('serif').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'serif' }) }">
<button @click="editor.chain().focus().setFontFamily('serif').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'serif' }) }">
serif
</button>
<button @click="editor.chain().focus().fontFamily('monospace').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'monospace' }) }">
<button @click="editor.chain().focus().setFontFamily('monospace').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'monospace' }) }">
monospace
</button>
<button @click="editor.chain().focus().fontFamily('cursive').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'cursive' }) }">
<button @click="editor.chain().focus().setFontFamily('cursive').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'cursive' }) }">
cursive
</button>
<button @click="editor.chain().focus().fontFamily().run()">
<button @click="editor.chain().focus().unsetFontFamily().run()">
Remove font-family
</button>

2
docs/src/demos/Nodes/Blockquote/index.vue
View File

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

2
docs/src/demos/Nodes/CodeBlock/index.vue
View File

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

16
packages/core/src/commands/lift.ts Normal file
View File

@@ -0,0 +1,16 @@
import { lift } from 'prosemirror-commands'
import { NodeType } from 'prosemirror-model'
import { Command } from '../types'
import nodeIsActive from '../utils/nodeIsActive'
import getNodeType from '../utils/getNodeType'
export default (typeOrName: string | NodeType, attributes = {}): Command => ({ state, dispatch }) => {
const type = getNodeType(typeOrName, state.schema)
const isActive = nodeIsActive(state, type, attributes)
if (!isActive) {
return false
}
return lift(state, dispatch)
}

6
packages/core/src/commands/toggleWrap.ts
View File

@@ -4,13 +4,13 @@ import { Command } from '../types'
import nodeIsActive from '../utils/nodeIsActive'
import getNodeType from '../utils/getNodeType'
export default (typeOrName: string | NodeType, attrs = {}): Command => ({ state, dispatch }) => {
export default (typeOrName: string | NodeType, attributes = {}): Command => ({ state, dispatch }) => {
const type = getNodeType(typeOrName, state.schema)
const isActive = nodeIsActive(state, type, attrs)
const isActive = nodeIsActive(state, type, attributes)
if (isActive) {
return lift(state, dispatch)
}
return wrapIn(type, attrs)(state, dispatch)
return wrapIn(type, attributes)(state, dispatch)
}

16
packages/core/src/commands/wrapIn.ts Normal file
View File

@@ -0,0 +1,16 @@
import { wrapIn } from 'prosemirror-commands'
import { NodeType } from 'prosemirror-model'
import { Command } from '../types'
import nodeIsActive from '../utils/nodeIsActive'
import getNodeType from '../utils/getNodeType'
export default (typeOrName: string | NodeType, attributes = {}): Command => ({ state, dispatch }) => {
const type = getNodeType(typeOrName, state.schema)
const isActive = nodeIsActive(state, type, attributes)
if (isActive) {
return false
}
return wrapIn(type, attributes)(state, dispatch)
}

10
packages/core/src/extensions/commands.ts
View File

@@ -9,6 +9,7 @@ import extendMarkRange from '../commands/extendMarkRange'
import focus from '../commands/focus'
import insertHTML from '../commands/insertHTML'
import insertText from '../commands/insertText'
import lift from '../commands/lift'
import liftListItem from '../commands/liftListItem'
import removeMark from '../commands/removeMark'
import removeMarks from '../commands/removeMarks'
@@ -27,6 +28,7 @@ import toggleMark from '../commands/toggleMark'
import toggleWrap from '../commands/toggleWrap'
import tryCommand from '../commands/try'
import updateNodeAttributes from '../commands/updateNodeAttributes'
import wrapIn from '../commands/wrapIn'
import wrapInList from '../commands/wrapInList'
export const Commands = Extension.create({
@@ -72,6 +74,10 @@ export const Commands = Extension.create({
* Insert a string of text at the current position.
*/
insertText,
/**
* Removes an existing wrap.
*/
lift,
/**
* Lift the list item into a wrapping list.
*/
@@ -144,6 +150,10 @@ export const Commands = Extension.create({
* Update attributes of a node.
*/
updateNodeAttributes,
/**
* Wraps nodes in another node.
*/
wrapIn,
/**
* Wrap a node in a list.
*/

16
packages/extension-blockquote/src/index.ts
View File

@@ -34,18 +34,30 @@ const Blockquote = Node.create({
addCommands() {
return {
/**
* Set a blockquote node
*/
setBlockquote: (): Command => ({ commands }) => {
return commands.wrapIn('blockquote')
},
/**
* Toggle a blockquote node
*/
blockquote: (): Command => ({ commands }) => {
toggleBlockquote: (): Command => ({ commands }) => {
return commands.toggleWrap('blockquote')
},
/**
* Unset a blockquote node
*/
unsetBlockquote: (): Command => ({ commands }) => {
return commands.lift('blockquote')
},
}
},
addKeyboardShortcuts() {
return {
'Shift-Mod-9': () => this.editor.commands.blockquote(),
'Shift-Mod-9': () => this.editor.commands.toggleBlockquote(),
}
},

12
packages/extension-code-block/src/index.ts
View File

@@ -74,18 +74,24 @@ const CodeBlock = Node.create({
addCommands() {
return {
/**
* Set a code block
*/
setCodeBlock: (attributes?: { language: string }): Command => ({ commands }) => {
return commands.setBlockType('codeBlock', attributes)
},
/**
* Toggle a code block
*/
codeBlock: (attrs?: CodeBlockOptions): Command => ({ commands }) => {
return commands.toggleBlockType('codeBlock', 'paragraph', attrs)
toggleCodeBlock: (attributes?: { language: string }): Command => ({ commands }) => {
return commands.toggleBlockType('codeBlock', 'paragraph', attributes)
},
}
},
addKeyboardShortcuts() {
return {
'Mod-Shift-c': () => this.editor.commands.codeBlock(),
'Mod-Shift-c': () => this.editor.commands.toggleCodeBlock(),
}
},

12
packages/extension-font-family/src/index.ts
View File

@@ -38,11 +38,19 @@ const FontFamily = Extension.create({
addCommands() {
return {
/**
* Update the font family
* Set the font family
*/
fontFamily: (fontFamily: string | null = null): Command => ({ chain }) => {
setFontFamily: (fontFamily: string): Command => ({ chain }) => {
return chain()
.addMark('textStyle', { fontFamily })
.run()
},
/**
* Unset the font family
*/
unsetFontFamily: (): Command => ({ chain }) => {
return chain()
.addMark('textStyle', { fontFamily: null })
.removeEmptyTextStyle()
.run()
},