Merge branch 'main' into feature/extension-code-block-lowlight

This commit is contained in:
Philipp Kühn
2021-04-07 22:39:39 +02:00
125 changed files with 1230 additions and 1389 deletions

View File

@@ -3,6 +3,69 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.20](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/core@2.0.0-beta.19...@tiptap/core@2.0.0-beta.20) (2021-04-07)
### Features
* add resetAttributes() command, deprecate resetNodeAttributes() ([3334d93](https://github.com/ueberdosis/tiptap-next/commit/3334d930f30bd4acb5c314b4ec1934b6a1e0b712))
# [2.0.0-beta.19](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/core@2.0.0-beta.18...@tiptap/core@2.0.0-beta.19) (2021-04-07)
### Features
* add updateAttributes() command, deprecate updateNodeAttributes(), fix [#254](https://github.com/ueberdosis/tiptap-next/issues/254) ([aac32b4](https://github.com/ueberdosis/tiptap-next/commit/aac32b4df6a1dfd93500e09d3433fcd8acad5fbe))
# [2.0.0-beta.18](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/core@2.0.0-beta.17...@tiptap/core@2.0.0-beta.18) (2021-04-07)
### Features
* add priority option to extensions ([bb1ae65](https://github.com/ueberdosis/tiptap-next/commit/bb1ae659a463e97a7ada15af711347b5c004897a))
# [2.0.0-beta.17](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/core@2.0.0-beta.16...@tiptap/core@2.0.0-beta.17) (2021-04-07)
### Bug Fixes
* remove debug log ([beb96c5](https://github.com/ueberdosis/tiptap-next/commit/beb96c5cbfdb81869763e23f82f5ab270c30f0ea))
# [2.0.0-beta.16](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/core@2.0.0-beta.15...@tiptap/core@2.0.0-beta.16) (2021-04-07)
### Features
* add insertContent() command, deprecate insertText(), insertHTML() and insertNode() ([b8d9b7d](https://github.com/ueberdosis/tiptap-next/commit/b8d9b7d4c70b38fb9eec3c079be8243d30166e5e))
# [2.0.0-beta.15](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/core@2.0.0-beta.14...@tiptap/core@2.0.0-beta.15) (2021-04-06)
**Note:** Version bump only for package @tiptap/core
# [2.0.0-beta.14](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/core@2.0.0-beta.13...@tiptap/core@2.0.0-beta.14) (2021-04-04)
**Note:** Version bump only for package @tiptap/core

View File

@@ -1,7 +1,7 @@
{
"name": "@tiptap/core",
"description": "headless rich text editor",
"version": "2.0.0-beta.14",
"version": "2.0.0-beta.20",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@@ -35,10 +35,10 @@
"prosemirror-commands": "^1.1.7",
"prosemirror-inputrules": "^1.1.3",
"prosemirror-keymap": "^1.1.3",
"prosemirror-model": "^1.13.3",
"prosemirror-model": "^1.14.0",
"prosemirror-schema-list": "^1.1.4",
"prosemirror-state": "^1.3.4",
"prosemirror-transform": "^1.2.12",
"prosemirror-transform": "^1.3.2",
"prosemirror-view": "^1.18.2"
}
}

View File

@@ -2,12 +2,12 @@ import {
EditorState, Plugin, PluginKey, Transaction,
} from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import { Schema, DOMParser, Node } from 'prosemirror-model'
import elementFromString from './utilities/elementFromString'
import { Schema } from 'prosemirror-model'
import getNodeAttributes from './helpers/getNodeAttributes'
import getMarkAttributes from './helpers/getMarkAttributes'
import isActive from './helpers/isActive'
import removeElement from './utilities/removeElement'
import createDocument from './helpers/createDocument'
import getHTMLFromFragment from './helpers/getHTMLFromFragment'
import isNodeEmpty from './helpers/isNodeEmpty'
import createStyleTag from './utilities/createStyleTag'
@@ -16,7 +16,6 @@ import ExtensionManager from './ExtensionManager'
import EventEmitter from './EventEmitter'
import {
EditorOptions,
Content,
CanCommands,
ChainedCommands,
SingleCommands,
@@ -62,7 +61,6 @@ export class Editor extends EventEmitter {
onCreate: () => null,
onUpdate: () => null,
onSelectionUpdate: () => null,
onViewUpdate: () => null,
onTransaction: () => null,
onFocus: () => null,
onBlur: () => null,
@@ -83,7 +81,6 @@ export class Editor extends EventEmitter {
this.on('create', this.options.onCreate)
this.on('update', this.options.onUpdate)
this.on('selectionUpdate', this.options.onSelectionUpdate)
this.on('viewUpdate', this.options.onViewUpdate)
this.on('transaction', this.options.onTransaction)
this.on('focus', this.options.onFocus)
this.on('blur', this.options.onBlur)
@@ -240,23 +237,14 @@ export class Editor extends EventEmitter {
...this.options.editorProps,
dispatchTransaction: this.dispatchTransaction.bind(this),
state: EditorState.create({
doc: this.createDocument(this.options.content),
doc: createDocument(this.options.content, this.schema, this.options.parseOptions),
}),
})
// `editor.view` is not yet available at this time.
// Therefore we will add all plugins and node views directly afterwards.
const newState = this.state.reconfigure({
plugins: [
new Plugin({
view: () => ({
update: () => this.emit('viewUpdate', {
editor: this,
}),
}),
}),
...this.extensionManager.plugins,
],
plugins: this.extensionManager.plugins,
})
this.view.updateState(newState)
@@ -278,34 +266,6 @@ export class Editor extends EventEmitter {
})
}
/**
* Creates a ProseMirror document.
*/
public createDocument = (content: Content, parseOptions = this.options.parseOptions): Node => {
if (content && typeof content === 'object') {
try {
return this.schema.nodeFromJSON(content)
} catch (error) {
console.warn(
'[tiptap warn]: Invalid content.',
'Passed value:',
content,
'Error:',
error,
)
return this.createDocument('')
}
}
if (typeof content === 'string') {
return DOMParser
.fromSchema(this.schema)
.parse(elementFromString(content), parseOptions)
}
return this.createDocument('')
}
public isCapturingTransaction = false
private capturedTransaction: Transaction | null = null

View File

@@ -16,6 +16,11 @@ declare module '@tiptap/core' {
*/
name: string,
/**
* Priority
*/
priority?: number,
/**
* Default options
*/
@@ -126,14 +131,6 @@ declare module '@tiptap/core' {
editor: Editor,
}) => void) | null,
/**
* The view has changed.
*/
onViewUpdate?: ((this: {
options: Options,
editor: Editor,
}) => void) | null,
/**
* The editor state has changed.
*/
@@ -188,6 +185,7 @@ export class Extension<Options = any> {
config: ExtensionConfig = {
name: 'extension',
priority: 100,
defaultOptions: {},
}

View File

@@ -25,7 +25,7 @@ export default class ExtensionManager {
constructor(extensions: Extensions, editor: Editor) {
this.editor = editor
this.extensions = extensions
this.extensions = this.sort(extensions)
this.schema = getSchema(this.extensions)
this.extensions.forEach(extension => {
@@ -59,10 +59,6 @@ export default class ExtensionManager {
this.editor.on('selectionUpdate', extension.config.onSelectionUpdate.bind(context))
}
if (typeof extension.config.onViewUpdate === 'function') {
this.editor.on('viewUpdate', extension.config.onViewUpdate.bind(context))
}
if (typeof extension.config.onTransaction === 'function') {
this.editor.on('transaction', extension.config.onTransaction.bind(context))
}
@@ -81,6 +77,22 @@ export default class ExtensionManager {
})
}
private sort(extensions: Extensions) {
const defaultPriority = 100
return extensions.sort((a, b) => {
if ((a.config.priority || defaultPriority) > (b.config.priority || defaultPriority)) {
return -1
}
if ((a.config.priority || defaultPriority) < (b.config.priority || defaultPriority)) {
return 1
}
return 0
})
}
get commands(): RawCommands {
return this.extensions.reduce((commands, extension) => {
const context = {

View File

@@ -21,6 +21,11 @@ declare module '@tiptap/core' {
*/
name: string,
/**
* Priority
*/
priority?: number,
/**
* Default options
*/
@@ -140,15 +145,6 @@ declare module '@tiptap/core' {
type: MarkType,
}) => void) | null,
/**
* The view has changed.
*/
onViewUpdate?: ((this: {
options: Options,
editor: Editor,
type: MarkType,
}) => void) | null,
/**
* The editor state has changed.
*/
@@ -263,6 +259,7 @@ export class Mark<Options = any> {
config: MarkConfig = {
name: 'mark',
priority: 100,
defaultOptions: {},
}

View File

@@ -26,6 +26,11 @@ declare module '@tiptap/core' {
*/
name: string,
/**
* Priority
*/
priority?: number,
/**
* Default options
*/
@@ -139,16 +144,7 @@ declare module '@tiptap/core' {
/**
* The selection has changed.
*/
onSelectionUpdate?: ((this: {
options: Options,
editor: Editor,
type: NodeType,
}) => void) | null,
/**
* The view has changed.
*/
onViewUpdate?: ((this: {
onSelectionUpdate?: ((this: {
options: Options,
editor: Editor,
type: NodeType,
@@ -321,6 +317,7 @@ export class Node<Options = any> {
config: NodeConfig = {
name: 'node',
priority: 100,
defaultOptions: {},
}

View File

@@ -0,0 +1,35 @@
import createNodeFromContent from '../helpers/createNodeFromContent'
import selectionToInsertionEnd from '../helpers/selectionToInsertionEnd'
import { Command, RawCommands, Content } from '../types'
declare module '@tiptap/core' {
interface Commands {
insertContent: {
/**
* Insert a node or string of HTML at the current position.
*/
insertContent: (value: Content) => Command,
}
}
}
export const insertContent: RawCommands['insertContent'] = value => ({ tr, dispatch, editor }) => {
if (dispatch) {
const content = createNodeFromContent(value, editor.schema)
if (typeof content === 'string') {
tr.insertText(content)
return true
}
if (!tr.selection.empty) {
tr.deleteSelection()
}
tr.insert(tr.selection.anchor, content)
selectionToInsertionEnd(tr, tr.steps.length - 1, -1)
}
return true
}

View File

@@ -15,6 +15,8 @@ declare module '@tiptap/core' {
}
export const insertHTML: RawCommands['insertHTML'] = value => ({ tr, state, dispatch }) => {
console.warn('[tiptap warn]: insertHTML() is deprecated. please use insertContent() instead.')
const { selection } = tr
const element = elementFromString(value)
const slice = DOMParser.fromSchema(state.schema).parseSlice(element)

View File

@@ -14,6 +14,8 @@ declare module '@tiptap/core' {
}
export const insertNode: RawCommands['insertNode'] = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
console.warn('[tiptap warn]: insertNode() is deprecated. please use insertContent() instead.')
const { selection } = tr
const type = getNodeType(typeOrName, state.schema)

View File

@@ -12,6 +12,8 @@ declare module '@tiptap/core' {
}
export const insertText: RawCommands['insertText'] = value => ({ tr, dispatch }) => {
console.warn('[tiptap warn]: insertText() is deprecated. please use insertContent() instead.')
if (dispatch) {
tr.insertText(value)
}

View File

@@ -0,0 +1,61 @@
import { NodeType, MarkType } from 'prosemirror-model'
import getNodeType from '../helpers/getNodeType'
import getMarkType from '../helpers/getMarkType'
import getSchemaTypeNameByName from '../helpers/getSchemaTypeNameByName'
import deleteProps from '../utilities/deleteProps'
import { Command, RawCommands } from '../types'
declare module '@tiptap/core' {
interface Commands {
resetAttributes: {
/**
* Resets some node attributes to the default value.
*/
resetAttributes: (typeOrName: string | NodeType | MarkType, attributes: string | string[]) => Command,
}
}
}
export const resetAttributes: RawCommands['resetAttributes'] = (typeOrName, attributes) => ({ tr, state, dispatch }) => {
let nodeType: NodeType | null = null
let markType: MarkType | null = null
const schemaType = getSchemaTypeNameByName(
typeof typeOrName === 'string'
? typeOrName
: typeOrName.name,
state.schema,
)
if (!schemaType) {
return false
}
if (schemaType === 'node') {
nodeType = getNodeType(typeOrName as NodeType, state.schema)
}
if (schemaType === 'mark') {
markType = getMarkType(typeOrName as MarkType, state.schema)
}
if (dispatch) {
tr.selection.ranges.forEach(range => {
state.doc.nodesBetween(range.$from.pos, range.$to.pos, (node, pos) => {
if (nodeType && nodeType === node.type) {
tr.setNodeMarkup(pos, undefined, deleteProps(node.attrs, attributes))
}
if (markType && node.marks.length) {
node.marks.forEach(mark => {
if (markType === mark.type) {
tr.addMark(pos, pos + node.nodeSize, markType.create(deleteProps(mark.attrs, attributes)))
}
})
}
})
})
}
return true
}

View File

@@ -15,6 +15,8 @@ declare module '@tiptap/core' {
}
export const resetNodeAttributes: RawCommands['resetNodeAttributes'] = (typeOrName, attributes) => ({ tr, state, dispatch }) => {
console.warn('[tiptap warn]: resetNodeAttributes() is deprecated. please use resetAttributes() instead.')
const type = getNodeType(typeOrName, state.schema)
const { selection } = tr
const { ranges } = selection

View File

@@ -1,5 +1,11 @@
import { TextSelection } from 'prosemirror-state'
import { AnyObject, Command, RawCommands } from '../types'
import createDocument from '../helpers/createDocument'
import {
AnyObject,
Command,
RawCommands,
Content,
} from '../types'
declare module '@tiptap/core' {
interface Commands {
@@ -7,15 +13,18 @@ declare module '@tiptap/core' {
/**
* Replace the whole document with new content.
*/
setContent: (content: string, emitUpdate?: Boolean, parseOptions?: AnyObject) => Command,
setContent: (
content: Content,
emitUpdate?: Boolean,
parseOptions?: AnyObject,
) => Command,
}
}
}
export const setContent: RawCommands['setContent'] = (content, emitUpdate = false, parseOptions = {}) => ({ tr, editor, dispatch }) => {
const { createDocument } = editor
const { doc } = tr
const document = createDocument(content, parseOptions)
const document = createDocument(content, editor.schema, parseOptions)
const selection = TextSelection.create(doc, 0, doc.content.size)
if (dispatch) {

View File

@@ -0,0 +1,66 @@
import { NodeType, MarkType } from 'prosemirror-model'
import getNodeType from '../helpers/getNodeType'
import getMarkType from '../helpers/getMarkType'
import getSchemaTypeNameByName from '../helpers/getSchemaTypeNameByName'
import { AnyObject, Command, RawCommands } from '../types'
declare module '@tiptap/core' {
interface Commands {
updateAttributes: {
/**
* Update attributes of a node or mark.
*/
updateAttributes: (typeOrName: string | NodeType | MarkType, attributes: AnyObject) => Command,
}
}
}
export const updateAttributes: RawCommands['updateAttributes'] = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
let nodeType: NodeType | null = null
let markType: MarkType | null = null
const schemaType = getSchemaTypeNameByName(
typeof typeOrName === 'string'
? typeOrName
: typeOrName.name,
state.schema,
)
if (!schemaType) {
return false
}
if (schemaType === 'node') {
nodeType = getNodeType(typeOrName as NodeType, state.schema)
}
if (schemaType === 'mark') {
markType = getMarkType(typeOrName as MarkType, state.schema)
}
if (dispatch) {
tr.selection.ranges.forEach(range => {
state.doc.nodesBetween(range.$from.pos, range.$to.pos, (node, pos) => {
if (nodeType && nodeType === node.type) {
tr.setNodeMarkup(pos, undefined, {
...node.attrs,
...attributes,
})
}
if (markType && node.marks.length) {
node.marks.forEach(mark => {
if (markType === mark.type) {
tr.addMark(pos, pos + node.nodeSize, markType.create({
...mark.attrs,
...attributes,
}))
}
})
}
})
})
}
return true
}

View File

@@ -14,6 +14,8 @@ declare module '@tiptap/core' {
}
export const updateNodeAttributes: RawCommands['updateNodeAttributes'] = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
console.warn('[tiptap warn]: updateNodeAttributes() is deprecated. please use updateAttributes() instead.')
const type = getNodeType(typeOrName, state.schema)
const { selection } = tr
const { ranges } = selection

View File

@@ -11,6 +11,7 @@ import * as exitCode from '../commands/exitCode'
import * as extendMarkRange from '../commands/extendMarkRange'
import * as first from '../commands/first'
import * as focus from '../commands/focus'
import * as insertContent from '../commands/insertContent'
import * as insertHTML from '../commands/insertHTML'
import * as insertNode from '../commands/insertNode'
import * as insertText from '../commands/insertText'
@@ -23,6 +24,7 @@ import * as liftListItem from '../commands/liftListItem'
import * as newlineInCode from '../commands/newlineInCode'
import * as replace from '../commands/replace'
import * as replaceRange from '../commands/replaceRange'
import * as resetAttributes from '../commands/resetAttributes'
import * as resetNodeAttributes from '../commands/resetNodeAttributes'
import * as scrollIntoView from '../commands/scrollIntoView'
import * as selectAll from '../commands/selectAll'
@@ -42,6 +44,7 @@ import * as toggleWrap from '../commands/toggleWrap'
import * as undoInputRule from '../commands/undoInputRule'
import * as unsetAllMarks from '../commands/unsetAllMarks'
import * as unsetMark from '../commands/unsetMark'
import * as updateAttributes from '../commands/updateAttributes'
import * as updateNodeAttributes from '../commands/updateNodeAttributes'
import * as wrapIn from '../commands/wrapIn'
import * as wrapInList from '../commands/wrapInList'
@@ -58,6 +61,7 @@ export { exitCode }
export { extendMarkRange }
export { first }
export { focus }
export { insertContent }
export { insertHTML }
export { insertNode }
export { insertText }
@@ -70,6 +74,7 @@ export { liftListItem }
export { newlineInCode }
export { replace }
export { replaceRange }
export { resetAttributes }
export { resetNodeAttributes }
export { scrollIntoView }
export { selectAll }
@@ -89,6 +94,7 @@ export { toggleWrap }
export { undoInputRule }
export { unsetAllMarks }
export { unsetMark }
export { updateAttributes }
export { updateNodeAttributes }
export { wrapIn }
export { wrapInList }
@@ -110,6 +116,7 @@ export const Commands = Extension.create({
...extendMarkRange,
...first,
...focus,
...insertContent,
...insertHTML,
...insertNode,
...insertText,
@@ -122,6 +129,7 @@ export const Commands = Extension.create({
...newlineInCode,
...replace,
...replaceRange,
...resetAttributes,
...resetNodeAttributes,
...scrollIntoView,
...selectAll,
@@ -141,6 +149,7 @@ export const Commands = Extension.create({
...undoInputRule,
...unsetAllMarks,
...unsetMark,
...updateAttributes,
...updateNodeAttributes,
...wrapIn,
...wrapInList,

View File

@@ -0,0 +1,13 @@
import { Schema, Node as ProseMirrorNode } from 'prosemirror-model'
import { AnyObject } from '../types'
import createNodeFromContent from './createNodeFromContent'
export type Content = string | JSON | null
export default function createDocument(
content: Content,
schema: Schema,
parseOptions: AnyObject = {},
): ProseMirrorNode {
return createNodeFromContent(content, schema, { slice: false, parseOptions }) as ProseMirrorNode
}

View File

@@ -0,0 +1,59 @@
import {
Schema,
DOMParser,
Node as ProseMirrorNode,
Fragment,
} from 'prosemirror-model'
import elementFromString from '../utilities/elementFromString'
import { AnyObject } from '../types'
export type Content = string | JSON | null
export type CreateNodeFromContentOptions = {
slice?: boolean,
parseOptions?: AnyObject,
}
export default function createNodeFromContent(
content: Content,
schema: Schema,
options?: CreateNodeFromContentOptions,
): string | ProseMirrorNode | Fragment {
options = {
slice: true,
parseOptions: {},
...options,
}
if (content && typeof content === 'object') {
try {
return schema.nodeFromJSON(content)
} catch (error) {
console.warn(
'[tiptap warn]: Invalid content.',
'Passed value:',
content,
'Error:',
error,
)
return createNodeFromContent('', schema, options)
}
}
if (typeof content === 'string') {
const isHTML = content.trim().startsWith('<') && content.trim().endsWith('>')
if (isHTML || !options.slice) {
const parser = DOMParser.fromSchema(schema)
return options.slice
? parser.parseSlice(elementFromString(content), options.parseOptions).content
: parser.parse(elementFromString(content), options.parseOptions)
}
return content
}
return createNodeFromContent('', schema, options)
}

View File

@@ -32,7 +32,6 @@ export interface EditorOptions {
onBeforeCreate: (props: { editor: Editor }) => void,
onCreate: (props: { editor: Editor }) => void,
onUpdate: (props: { editor: Editor }) => void,
onViewUpdate: (props: { editor: Editor }) => void,
onSelectionUpdate: (props: { editor: Editor }) => void,
onTransaction: (props: { editor: Editor, transaction: Transaction }) => void,
onFocus: (props: { editor: Editor, event: FocusEvent }) => void,