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

Merge branch 'master' into feature/collab-plugin

Browse Source 
# Conflicts:
#	packages/tiptap/src/Editor.js
#	yarn.lock
This commit is contained in:
Philipp Kühn
2019-05-03 10:56:52 +02:00
parent ac3b95716e 0e59e0cc0c
commit 83075f28e6
36 changed files with 3679 additions and 3422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/tiptap/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "tiptap",
"version": "1.11.0",
"version": "1.17.0",
"description": "A rich-text editor for Vue.js",
"homepage": "https://tiptap.scrumpy.io",
"license": "MIT",
@@ -25,11 +25,11 @@
"prosemirror-gapcursor": "^1.0.3",
"prosemirror-inputrules": "^1.0.1",
"prosemirror-keymap": "^1.0.1",
"prosemirror-model": "^1.6.4",
"prosemirror-model": "^1.7.0",
"prosemirror-state": "^1.2.1",
"prosemirror-view": "^1.6.8",
"tiptap-commands": "^1.5.0",
"tiptap-utils": "^1.1.1"
"prosemirror-view": "^1.8.9",
"tiptap-commands": "^1.8.0",
"tiptap-utils": "^1.4.0"
},
"peerDependencies": {
"vue": "^2.5.17",

4
packages/tiptap/src/Components/EditorContent.js
View File

@@ -25,4 +25,8 @@ export default {
return createElement('div')
},
beforeDestroy() {
this.editor.element = this.$el
},
}

11
packages/tiptap/src/Components/EditorMenuBubble.js
View File

@@ -7,6 +7,10 @@ export default {
default: null,
type: Object,
},
keepInBounds: {
default: true,
type: Boolean,
},
},
data() {
@@ -27,7 +31,14 @@ export default {
this.$nextTick(() => {
editor.registerPlugin(MenuBubble({
element: this.$el,
keepInBounds: this.keepInBounds,
onUpdate: menu => {
// the second check ensures event is fired only once
if (menu.isActive && this.menu.isActive === false) {
this.$emit('show', menu)
} else if (!menu.isActive && this.menu.isActive === true) {
this.$emit('hide', menu)
}
this.menu = menu
},
}))

54
packages/tiptap/src/Editor.js
View File

@@ -1,10 +1,15 @@
import { EditorState, Plugin } from 'prosemirror-state'
import {
EditorState,
Plugin,
PluginKey,
TextSelection,
} from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import { Schema, DOMParser, DOMSerializer } from 'prosemirror-model'
import { dropCursor } from 'prosemirror-dropcursor'
import { gapCursor } from 'prosemirror-gapcursor'
import { keymap } from 'prosemirror-keymap'
import { baseKeymap, selectParentNode } from 'prosemirror-commands'
import { baseKeymap } from 'prosemirror-commands'
import { inputRules, undoInputRule } from 'prosemirror-inputrules'
import { markIsActive, nodeIsActive, getMarkAttrs } from 'tiptap-utils'
import { ExtensionManager, ComponentView } from './Utils'
@@ -27,11 +32,13 @@ export default class Editor {
},
useBuiltInExtensions: true,
dropCursor: {},
parseOptions: {},
onInit: () => {},
onUpdate: () => {},
onFocus: () => {},
onBlur: () => {},
onPaste: () => {},
onDrop: () => {},
onTransaction: () => true,
}
@@ -67,6 +74,9 @@ export default class Editor {
view: this.view,
state: this.state,
})
// give extension manager access to our view
this.extensions.view = this.view
}
setOptions(options) {
@@ -157,14 +167,18 @@ export default class Editor {
...this.keymaps,
keymap({
Backspace: undoInputRule,
Escape: selectParentNode,
}),
keymap(baseKeymap),
dropCursor(this.options.dropCursor),
gapCursor(),
new Plugin({
key: new PluginKey('editable'),
props: {
editable: () => this.options.editable,
},
}),
new Plugin({
props: {
attributes: {
tabindex: 0,
},
@@ -177,7 +191,11 @@ export default class Editor {
})
}
createDocument(content) {
createDocument(content, parseOptions = this.options.parseOptions) {
if (content === null) {
return this.schema.nodeFromJSON(this.options.emptyDocument)
}
if (typeof content === 'object') {
try {
return this.schema.nodeFromJSON(content)
@@ -191,7 +209,7 @@ export default class Editor {
const element = document.createElement('div')
element.innerHTML = content.trim()
return DOMParser.fromSchema(this.schema).parse(element)
return DOMParser.fromSchema(this.schema).parse(element, parseOptions)
}
return false
@@ -201,7 +219,7 @@ export default class Editor {
const view = new EditorView(this.element, {
state: this.state,
handlePaste: this.options.onPaste,
handleDrop: this.options.onPaste,
handleDrop: this.options.onDrop,
dispatchTransaction: this.dispatchTransaction.bind(this),
})
@@ -290,10 +308,28 @@ export default class Editor {
})
}
focus() {
focus(position = null) {
if (position !== null) {
let pos = position
if (position === 'start') {
pos = 0
} else if (position === 'end') {
pos = this.view.state.doc.nodeSize - 2
}
const selection = TextSelection.near(this.view.state.doc.resolve(pos))
const transaction = this.view.state.tr.setSelection(selection)
this.view.dispatch(transaction)
}
this.view.focus()
}
blur() {
this.view.dom.blur()
}
getHTML() {
const div = document.createElement('div')
const fragment = DOMSerializer
@@ -309,10 +345,10 @@ export default class Editor {
return this.state.doc.toJSON()
}
setContent(content = {}, emitUpdate = false) {
setContent(content = {}, emitUpdate = false, parseOptions) {
this.state = EditorState.create({
schema: this.state.schema,
doc: this.createDocument(content),
doc: this.createDocument(content, parseOptions),
plugins: this.state.plugins,
})

67
packages/tiptap/src/Plugins/MenuBubble.js
View File

@@ -1,11 +1,63 @@
import { Plugin } from 'prosemirror-state'
function textRange(node, from, to) {
const range = document.createRange()
range.setEnd(node, to == null ? node.nodeValue.length : to)
range.setStart(node, from || 0)
return range
}
function singleRect(object, bias) {
const rects = object.getClientRects()
return !rects.length ? object.getBoundingClientRect() : rects[bias < 0 ? 0 : rects.length - 1]
}
function coordsAtPos(view, pos, end = false) {
const { node, offset } = view.docView.domFromPos(pos)
let side
let rect
if (node.nodeType === 3) {
if (end && offset < node.nodeValue.length) {
rect = singleRect(textRange(node, offset - 1, offset), -1)
side = 'right'
} else if (offset < node.nodeValue.length) {
rect = singleRect(textRange(node, offset, offset + 1), -1)
side = 'left'
}
} else if (node.firstChild) {
if (offset < node.childNodes.length) {
const child = node.childNodes[offset]
rect = singleRect(child.nodeType === 3 ? textRange(child) : child, -1)
side = 'left'
}
if ((!rect || rect.top === rect.bottom) && offset) {
const child = node.childNodes[offset - 1]
rect = singleRect(child.nodeType === 3 ? textRange(child) : child, 1)
side = 'right'
}
} else {
rect = node.getBoundingClientRect()
side = 'left'
}
const x = rect[side]
return {
top: rect.top,
bottom: rect.bottom,
left: x,
right: x,
}
}
class Menu {
constructor({ options, editorView }) {
this.options = {
...{
element: null,
keepInBounds: true,
onUpdate: () => false,
},
...options,
@@ -36,19 +88,24 @@ class Menu {
const { from, to } = state.selection
// These are in screen coordinates
const start = view.coordsAtPos(from)
const end = view.coordsAtPos(to)
// We can't use EditorView.cordsAtPos here because it can't handle linebreaks correctly
// See: https://github.com/ProseMirror/prosemirror-view/pull/47
const start = coordsAtPos(view, from)
const end = coordsAtPos(view, to, true)
// The box in which the tooltip is positioned, to use as base
const box = this.options.element.offsetParent.getBoundingClientRect()
const el = this.options.element.getBoundingClientRect()
// Find a center-ish x position from the selection endpoints (when
// crossing lines, end may be more to the left)
const left = Math.max((start.left + end.left) / 2, start.left + 3)
const left = ((start.left + end.left) / 2) - box.left
// Keep the menuBubble in the bounding box of the offsetParent i
this.left = Math.round(this.options.keepInBounds
? Math.min(box.width - (el.width / 2), Math.max(left, el.width / 2)) : left)
this.bottom = Math.round(box.bottom - start.top)
this.isActive = true
this.left = parseInt(left - box.left, 10)
this.bottom = parseInt(box.bottom - start.top, 10)
this.sendUpdate()
}

4
packages/tiptap/src/Utils/ComponentView.js
View File

@@ -108,6 +108,10 @@ export default class ComponentView {
// disable (almost) all prosemirror event listener for node views
stopEvent(event) {
if (typeof this.extension.stopEvent === 'function') {
return this.extension.stopEvent(event)
}
const isPaste = event.type === 'paste'
const draggable = !!this.extension.schema.draggable

4
packages/tiptap/src/Utils/Extension.js
View File

@@ -15,6 +15,10 @@ export default class Extension {
return 'extension'
}
get update() {
return () => {}
}
get defaultOptions() {
return {}
}

21
packages/tiptap/src/Utils/ExtensionManager.js
View File

@@ -15,6 +15,27 @@ export default class ExtensionManager {
}), {})
}
get options() {
const { view } = this
return this.extensions
.reduce((nodes, extension) => ({
...nodes,
[extension.name]: new Proxy(extension.options, {
set(obj, prop, value) {
const changed = (obj[prop] !== value)
Object.assign(obj, { [prop]: value })
if (changed) {
extension.update(view)
}
return true
},
}),
}), {})
}
get marks() {
return this.extensions
.filter(extension => extension.type === 'mark')

57
packages/tiptap/test/Editor.spec.js
View File

@@ -25,6 +25,14 @@ test('create editor', () => {
expect(editor).toBeDefined()
})
test('check empty content (null)', () => {
const editor = new Editor({
content: null,
})
expect(editor.getHTML()).toEqual('<p></p>')
})
test('check invalid content (JSON)', () => {
const editor = new Editor({
content: { thisIsNotAValidDocument: true },
@@ -270,3 +278,52 @@ test('update callback', done => {
editor.setContent('<p>Bar</p>', true)
})
test('parse options in set content', done => {
const editor = new Editor({
content: '<p>Foo</p>',
onUpdate: ({ getHTML, getJSON }) => {
expect(getHTML()).toEqual('<p> Foo </p>')
expect(getJSON()).toEqual({
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: ' Foo ',
},
],
},
],
})
done()
},
})
editor.setContent('<p> Foo </p>', true, { preserveWhitespace: true })
})
test('parse options in constructor', () => {
const editor = new Editor({
content: '<p> Foo </p>',
parseOptions: { preserveWhitespace: true },
})
expect(editor.getHTML()).toEqual('<p> Foo </p>')
expect(editor.getJSON()).toEqual({
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: ' Foo ',
},
],
},
],
})
})