Merge branch 'main' into feature/vue-node-views

This commit is contained in:
Philipp Kühn
2020-11-23 17:30:45 +01:00
46 changed files with 530 additions and 491 deletions

View File

@@ -14,7 +14,12 @@ import createStyleTag from './utils/createStyleTag'
import CommandManager from './CommandManager'
import ExtensionManager from './ExtensionManager'
import EventEmitter from './EventEmitter'
import { EditorOptions, EditorContent, CommandSpec } from './types'
import {
EditorOptions,
EditorContent,
CommandSpec,
EditorSelection,
} from './types'
import * as extensions from './extensions'
import style from './style'
@@ -39,7 +44,7 @@ export class Editor extends EventEmitter {
public view!: EditorView
public selection = { from: 0, to: 0 }
public selection: EditorSelection = { from: 0, to: 0 }
public isFocused = false
@@ -52,6 +57,8 @@ export class Editor extends EventEmitter {
editable: true,
editorProps: {},
parseOptions: {},
enableInputRules: true,
enablePasteRules: true,
onInit: () => null,
onUpdate: () => null,
onTransaction: () => null,

View File

@@ -1,4 +1,3 @@
import { Plugin } from 'prosemirror-state'
import { keymap } from 'prosemirror-keymap'
import { Schema, Node as ProsemirrorNode } from 'prosemirror-model'
import { inputRules } from 'prosemirror-inputrules'
@@ -37,7 +36,7 @@ export default class ExtensionManager {
})
}
get plugins(): Plugin[] {
get plugins() {
const plugins = this.extensions
.map(extension => {
const context = {
@@ -58,7 +57,11 @@ export default class ExtensionManager {
]
}
get inputRules(): any {
get inputRules() {
if (!this.editor.options.enableInputRules) {
return []
}
return this.extensions
.map(extension => {
const context = {
@@ -72,7 +75,11 @@ export default class ExtensionManager {
.flat()
}
get pasteRules(): any {
get pasteRules() {
if (!this.editor.options.enablePasteRules) {
return []
}
return this.extensions
.map(extension => {
const context = {

View File

@@ -1,16 +1,10 @@
import { TextSelection } from 'prosemirror-state'
import { Editor } from '../Editor'
import { EditorState, TextSelection } from 'prosemirror-state'
import { Command, FocusPosition } from '../types'
import minMax from '../utils/minMax'
interface ResolvedSelection {
from: number,
to: number,
}
function resolveSelection(editor: Editor, position: FocusPosition = null): ResolvedSelection {
if (position === null) {
return editor.selection
function resolveSelection(state: EditorState, position: FocusPosition = null) {
if (!position) {
return null
}
if (position === 'start' || position === true) {
@@ -21,17 +15,17 @@ function resolveSelection(editor: Editor, position: FocusPosition = null): Resol
}
if (position === 'end') {
const { size } = editor.state.doc.content
const { size } = state.doc.content
return {
from: size,
to: size - 1, // TODO: -1 only for nodes with content
to: size,
}
}
return {
from: position as number,
to: position as number,
from: position,
to: position,
}
}
@@ -48,7 +42,7 @@ export const focus = (position: FocusPosition = null): Command => ({
return true
}
const { from, to } = resolveSelection(editor, position)
const { from, to } = resolveSelection(editor.state, position) || editor.selection
const { doc } = tr
const resolvedFrom = minMax(from, 0, doc.content.size)
const resolvedEnd = minMax(to, 0, doc.content.size)

View File

@@ -1,13 +0,0 @@
import { NodeType } from 'prosemirror-model'
import { setBlockType as originalSetBlockType } from 'prosemirror-commands'
import { Command } from '../types'
import getNodeType from '../utils/getNodeType'
/**
* Replace a given range with a node.
*/
export const setBlockType = (typeOrName: string | NodeType, attrs = {}): Command => ({ state, dispatch }) => {
const type = getNodeType(typeOrName, state.schema)
return originalSetBlockType(type, attrs)(state, dispatch)
}

View File

@@ -0,0 +1,13 @@
import { NodeType } from 'prosemirror-model'
import { setBlockType } from 'prosemirror-commands'
import { Command } from '../types'
import getNodeType from '../utils/getNodeType'
/**
* Replace a given range with a node.
*/
export const setNode = (typeOrName: string | NodeType, attrs = {}): Command => ({ state, dispatch }) => {
const type = getNodeType(typeOrName, state.schema)
return setBlockType(type, attrs)(state, dispatch)
}

View File

@@ -6,14 +6,14 @@ import getNodeType from '../utils/getNodeType'
/**
* Toggle a node with another node.
*/
export const toggleBlockType = (typeOrName: string | NodeType, toggleTypeOrName: string | NodeType, attrs = {}): Command => ({ state, commands }) => {
export const toggleNode = (typeOrName: string | NodeType, toggleTypeOrName: string | NodeType, attrs = {}): Command => ({ state, commands }) => {
const type = getNodeType(typeOrName, state.schema)
const toggleType = getNodeType(toggleTypeOrName, state.schema)
const isActive = nodeIsActive(state, type, attrs)
if (isActive) {
return commands.setBlockType(toggleType)
return commands.setNode(toggleType)
}
return commands.setBlockType(type, attrs)
return commands.setNode(type, attrs)
}

View File

@@ -3,7 +3,7 @@ import { Command } from '../types'
/**
* Remove all marks in the current selection.
*/
export const unsetMarks = (): Command => ({ tr, state, dispatch }) => {
export const unsetAllMarks = (): Command => ({ tr, state, dispatch }) => {
const { selection } = tr
const { from, to, empty } = selection

View File

@@ -15,18 +15,18 @@ import * as resetNodeAttributes from '../commands/resetNodeAttributes'
import * as scrollIntoView from '../commands/scrollIntoView'
import * as selectAll from '../commands/selectAll'
import * as selectParentNode from '../commands/selectParentNode'
import * as setBlockType from '../commands/setBlockType'
import * as setContent from '../commands/setContent'
import * as setMark from '../commands/setMark'
import * as setNode from '../commands/setNode'
import * as sinkListItem from '../commands/sinkListItem'
import * as splitBlock from '../commands/splitBlock'
import * as splitListItem from '../commands/splitListItem'
import * as toggleBlockType from '../commands/toggleBlockType'
import * as toggleList from '../commands/toggleList'
import * as toggleMark from '../commands/toggleMark'
import * as toggleNode from '../commands/toggleNode'
import * as toggleWrap from '../commands/toggleWrap'
import * as unsetAllMarks from '../commands/unsetAllMarks'
import * as unsetMark from '../commands/unsetMark'
import * as unsetMarks from '../commands/unsetMarks'
import * as updateNodeAttributes from '../commands/updateNodeAttributes'
import * as wrapIn from '../commands/wrapIn'
import * as wrapInList from '../commands/wrapInList'
@@ -50,18 +50,18 @@ export const Commands = Extension.create({
...scrollIntoView,
...selectAll,
...selectParentNode,
...setBlockType,
...setContent,
...setMark,
...setNode,
...sinkListItem,
...splitBlock,
...splitListItem,
...toggleBlockType,
...toggleList,
...toggleMark,
...toggleNode,
...toggleWrap,
...unsetMark,
...unsetMarks,
...unsetAllMarks,
...updateNodeAttributes,
...wrapIn,
...wrapInList,

View File

@@ -23,6 +23,8 @@ export interface EditorOptions {
editable: boolean,
editorProps: EditorProps,
parseOptions: ParseOptions,
enableInputRules: boolean,
enablePasteRules: boolean,
onInit: () => void,
onUpdate: () => void,
onTransaction: (props: { transaction: Transaction }) => void,
@@ -30,6 +32,11 @@ export interface EditorOptions {
onBlur: (props: { event: FocusEvent }) => void,
}
export type EditorSelection = {
from: number,
to: number,
}
export type EditorContent = string | JSON | null
export type Command = (props: {