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

This commit is contained in:
Hans Pagel
2020-12-02 09:57:10 +01:00
20 changed files with 92 additions and 26 deletions

View File

@@ -82,7 +82,7 @@ export default {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
...defaultExtensions().filter(extension => extension.config.name !== 'history'),
Collaboration.configure({
provider,
}),

View File

@@ -63,7 +63,9 @@ export default {
margin-top: 0.75em;
}
}
</style>
<style lang="scss" scoped>
.toc {
opacity: 0.75;
border-radius: 0.5rem;

View File

@@ -27,15 +27,15 @@ export default {
],
content: `
<toc></toc>
<h2>heading</h2>
<h2>1 heading</h2>
<p>paragraph</p>
<h3>heading</h3>
<h3>1.1 heading</h3>
<p>paragraph</p>
<h3>heading</h3>
<h3>1.2 heading</h3>
<p>paragraph</p>
<h2>heading</h2>
<h2>2 heading</h2>
<p>paragraph</p>
<h3>heading</h3>
<h3>2.1 heading</h3>
<p>paragraph</p>
`,
})

View File

@@ -53,7 +53,9 @@ export default class CommandManager {
const method = (...args: any) => {
const callback = command(...args)(props)
if (tr.steps.length) {
view.dispatch(tr)
}
return callback
}
@@ -68,12 +70,11 @@ export default class CommandManager {
const callbacks: boolean[] = []
const hasStartTransaction = !!startTr
const tr = startTr || state.tr
const props = this.buildProps(tr, shouldDispatch)
return new Proxy({}, {
get: (_, name: string, proxy) => {
if (name === 'run') {
if (!hasStartTransaction && shouldDispatch) {
if (!hasStartTransaction && shouldDispatch && tr.steps.length) {
view.dispatch(tr)
}
@@ -87,7 +88,9 @@ export default class CommandManager {
}
return (...args: any) => {
const props = this.buildProps(tr, shouldDispatch)
const callback = command(...args)(props)
callbacks.push(callback)
return proxy
@@ -118,6 +121,10 @@ export default class CommandManager {
const { editor, commands } = this
const { state, view } = editor
if (state.storedMarks) {
tr.setStoredMarks(state.storedMarks)
}
const props = {
tr,
editor,
@@ -141,6 +148,10 @@ export default class CommandManager {
}
public chainableState(tr: Transaction, state: EditorState): EditorState {
let { selection } = tr
let { doc } = tr
let { storedMarks } = tr
return {
...state,
schema: state.schema,
@@ -150,15 +161,19 @@ export default class CommandManager {
reconfigure: state.reconfigure.bind(state),
toJSON: state.toJSON.bind(state),
get storedMarks() {
return tr.storedMarks
return storedMarks
},
get selection() {
return tr.selection
return selection
},
get doc() {
return tr.doc
return doc
},
get tr() {
selection = tr.selection
doc = tr.doc
storedMarks = tr.storedMarks
return tr
},
}

View File

@@ -7,7 +7,7 @@ export interface ExtensionConfig<Options = any, Commands = {}> {
/**
* Name
*/
name?: string,
name: string,
/**
* Default options

View File

@@ -32,6 +32,8 @@ import * as wrapIn from '../commands/wrapIn'
import * as wrapInList from '../commands/wrapInList'
export const Commands = Extension.create({
name: 'commands',
addCommands() {
return {
...blur,

View File

@@ -2,6 +2,8 @@ import { Plugin, PluginKey } from 'prosemirror-state'
import { Extension } from '../Extension'
export const Editable = Extension.create({
name: 'editable',
addProseMirrorPlugins() {
return [
new Plugin({

View File

@@ -2,6 +2,8 @@ import { Plugin, PluginKey } from 'prosemirror-state'
import { Extension } from '../Extension'
export const FocusEvents = Extension.create({
name: 'focusEvents',
addProseMirrorPlugins() {
const { editor } = this
@@ -16,7 +18,10 @@ export const FocusEvents = Extension.create({
focus: (view, event) => {
editor.isFocused = true
const transaction = editor.state.tr.setMeta('focus', { event })
const transaction = editor.state.tr
.setMeta('focus', { event })
.setMeta('addToHistory', false)
view.dispatch(transaction)
return true
@@ -24,7 +29,10 @@ export const FocusEvents = Extension.create({
blur: (view, event) => {
editor.isFocused = false
const transaction = editor.state.tr.setMeta('blur', { event })
const transaction = editor.state.tr
.setMeta('blur', { event })
.setMeta('addToHistory', false)
view.dispatch(transaction)
return true

View File

@@ -13,6 +13,8 @@ import { undoInputRule } from 'prosemirror-inputrules'
import { Extension } from '../Extension'
export const Keymap = Extension.create({
name: 'keymap',
addKeyboardShortcuts() {
const handleBackspace = () => this.editor.commands.first(({ state, dispatch }) => [
() => undoInputRule(state, dispatch),

View File

@@ -65,5 +65,5 @@ export default function isMarkActive(
return sum + size
}, 0)
return selectionRange === range
return range >= selectionRange
}

View File

@@ -63,5 +63,5 @@ export default function isNodeActive(
return sum + size
}, 0)
return selectionRange === range
return range >= selectionRange
}

View File

@@ -18,6 +18,8 @@ const awarenessStatesToArray = (states: Map<number, { [key: string]: any }>) =>
}
const CollaborationCursor = Extension.create({
name: 'collaborationCursor',
defaultOptions: <CollaborationCursorOptions>{
provider: null,
user: {

View File

@@ -1,4 +1,4 @@
import { Extension } from '@tiptap/core'
import { Extension, Command } from '@tiptap/core'
import {
redo,
undo,
@@ -11,10 +11,37 @@ export interface CollaborationOptions {
}
const Collaboration = Extension.create({
name: 'collaboration',
defaultOptions: <CollaborationOptions>{
provider: null,
},
addCommands() {
return {
/**
* Undo recent changes
*/
undo: (): Command => ({ state }) => {
return undo(state)
},
/**
* Reapply reverted changes
*/
redo: (): Command => ({ state }) => {
return redo(state)
},
}
},
addKeyboardShortcuts() {
return {
'Mod-z': () => this.editor.commands.undo(),
'Mod-y': () => this.editor.commands.redo(),
'Shift-Mod-z': () => this.editor.commands.redo(),
}
},
addProseMirrorPlugins() {
return [
ySyncPlugin(
@@ -24,14 +51,6 @@ const Collaboration = Extension.create({
]
},
addKeyboardShortcuts() {
return {
'Mod-z': undo,
'Mod-y': redo,
'Mod-Shift-z': redo,
}
},
onDestroy() {
this.options.provider?.destroy()
},

View File

@@ -8,6 +8,8 @@ export interface DropcursorOptions {
}
const Dropcursor = Extension.create({
name: 'dropCursor',
defaultOptions: <DropcursorOptions>{
color: 'black',
width: 1,

View File

@@ -8,6 +8,8 @@ export interface FocusOptions {
}
const FocusClasses = Extension.create({
name: 'focus',
defaultOptions: <FocusOptions>{
className: 'has-focus',
nested: false,

View File

@@ -6,6 +6,8 @@ type FontFamilyOptions = {
}
const FontFamily = Extension.create({
name: 'fontFamily',
defaultOptions: <FontFamilyOptions>{
types: ['textStyle'],
},

View File

@@ -2,6 +2,8 @@ import { Extension } from '@tiptap/core'
import { gapCursor } from 'prosemirror-gapcursor'
const Gapcursor = Extension.create({
name: 'gapCursor',
addProseMirrorPlugins() {
return [
gapCursor(),

View File

@@ -7,6 +7,8 @@ export interface HistoryOptions {
}
const History = Extension.create({
name: 'history',
defaultOptions: <HistoryOptions>{
depth: 100,
newGroupDelay: 500,

View File

@@ -7,6 +7,8 @@ type TextAlignOptions = {
}
const TextAlign = Extension.create({
name: 'textAlign',
defaultOptions: <TextAlignOptions>{
types: ['heading', 'paragraph'],
alignments: ['left', 'center', 'right', 'justify'],

View File

@@ -21,6 +21,8 @@ export const raquo = new InputRule(/>>$/, '»')
export const multiplication = new InputRule(/\d+\s?([*x])\s?\d+$/, '×')
const Typography = Extension.create({
name: 'typography',
addInputRules() {
return [
emDash,