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

start moving everything to components

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-21 15:50:10 +02:00
parent 287a2bc523
commit d5e25de018
30 changed files with 524 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/tiptap/README.md
View File

@@ -1,7 +0,0 @@
# tiptap
This is the core package of [tiptap](https://www.npmjs.com/package/tiptap).
[![](https://img.shields.io/npm/v/tiptap.svg?label=version)](https://www.npmjs.com/package/tiptap)
[![](https://img.shields.io/npm/dm/tiptap.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
[![](https://img.shields.io/npm/l/tiptap.svg)](https://www.npmjs.com/package/tiptap)
[![](http://img.badgesize.io/https://unpkg.com/tiptap/dist/tiptap.min.js?compression=gzip&label=size&colorB=000000)](https://www.npmjs.com/package/tiptap)

37
packages/tiptap/package.json
View File

@@ -1,37 +0,0 @@
{
"name": "tiptap",
"version": "0.19.0",
"description": "A rich-text editor for Vue.js",
"homepage": "https://tiptap.scrumpy.io",
"license": "MIT",
"main": "dist/tiptap.common.js",
"module": "dist/tiptap.esm.js",
"unpkg": "dist/tiptap.js",
"jsdelivr": "dist/tiptap.js",
"files": [
"src",
"dist"
],
"repository": {
"type": "git",
"url": "git+https://github.com/heyscrumpy/tiptap.git"
},
"bugs": {
"url": "https://github.com/heyscrumpy/tiptap/issues"
},
"dependencies": {
"prosemirror-commands": "^1.0.7",
"prosemirror-gapcursor": "^1.0.3",
"prosemirror-inputrules": "^1.0.1",
"prosemirror-keymap": "^1.0.1",
"prosemirror-model": "^1.6.2",
"prosemirror-state": "^1.2.1",
"prosemirror-view": "^1.6.1",
"tiptap-commands": "^0.7.0",
"tiptap-utils": "^0.4.0"
},
"peerDependencies": {
"vue": "^2.5.17",
"vue-template-compiler": "^2.5.17"
}
}

39
packages/tiptap/src/Components/EditorContent.js Normal file
View File

@@ -0,0 +1,39 @@
export default {
props: {
editor: {
default: null,
type: Object,
},
},
render(createElement) {
// console.log('createElement', this.editor)
// if (this.editor) {
// console.log('create element', this.editor.element)
// return this.editor.element
// // return createElement('div', {}, this.editor.element.innerHTML)
// }
return createElement('div')
},
watch: {
'editor.element': {
immediate: true,
handler(element) {
if (element) {
this.$nextTick(() => {
this.$el.append(element)
})
}
},
}
},
created() {
// console.log('on init')
// this.editor.on('init', () => {
// console.log('iniiiitttt!!!')
// })
// setTimeout(() => {
// // this.$el.innerHTML = this.editor.element.innerHTML
// this.$el.append(this.editor.element)
// }, 1000);
},
}

329
packages/tiptap/src/components/editor.js
View File

@@ -1,329 +0,0 @@
import { EditorState, Plugin } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import { Schema, DOMParser, DOMSerializer } from 'prosemirror-model'
import { gapCursor } from 'prosemirror-gapcursor'
import { keymap } from 'prosemirror-keymap'
import { baseKeymap } from 'prosemirror-commands'
import { inputRules } from 'prosemirror-inputrules'
import {
buildMenuActions,
ExtensionManager,
initNodeViews,
menuBubble,
floatingMenu,
builtInKeymap,
} from '../utils'
import builtInNodes from '../nodes'
export default {
props: {
doc: {
type: Object,
required: false,
default: null,
},
extensions: {
type: Array,
required: false,
default: () => [],
},
editable: {
type: Boolean,
default: true,
},
watchDoc: {
type: Boolean,
default: true,
},
},
data() {
const allExtensions = new ExtensionManager([
...builtInNodes,
...this.extensions,
])
const { nodes, marks, views } = allExtensions
return {
state: null,
view: null,
plugins: [],
allExtensions,
schema: null,
nodes,
marks,
views,
keymaps: [],
commands: {},
menuActions: null,
}
},
watch: {
doc: {
deep: true,
handler() {
if (this.watchDoc) {
this.setContent(this.doc, true)
}
},
},
},
render(createElement) {
const slots = []
Object
.entries(this.$scopedSlots)
.forEach(([name, slot]) => {
if (name === 'content') {
this.contentNode = slot({})
slots.push(this.contentNode)
} else if (name === 'menubar') {
this.menubarNode = slot({
nodes: this.menuActions ? this.menuActions.nodes : null,
marks: this.menuActions ? this.menuActions.marks : null,
focused: this.view ? this.view.focused : false,
focus: this.focus,
})
slots.push(this.menubarNode)
} else if (name === 'menububble') {
this.menububbleNode = slot({
nodes: this.menuActions ? this.menuActions.nodes : null,
marks: this.menuActions ? this.menuActions.marks : null,
focused: this.view ? this.view.focused : false,
focus: this.focus,
})
slots.push(this.menububbleNode)
} else if (name === 'floatingMenu') {
this.floatingMenuNode = slot({
nodes: this.menuActions ? this.menuActions.nodes : null,
marks: this.menuActions ? this.menuActions.marks : null,
focused: this.view ? this.view.focused : false,
focus: this.focus,
})
slots.push(this.floatingMenuNode)
}
})
return createElement('div', {
class: 'vue-editor',
}, slots)
},
methods: {
initEditor() {
this.schema = this.createSchema()
this.plugins = this.createPlugins()
this.keymaps = this.createKeymaps()
this.inputRules = this.createInputRules()
this.state = this.createState()
this.clearSlot()
this.view = this.createView()
this.commands = this.createCommands()
this.updateMenuActions()
this.$emit('init', {
view: this.view,
state: this.state,
})
},
createSchema() {
return new Schema({
nodes: this.nodes,
marks: this.marks,
})
},
createPlugins() {
return this.allExtensions.plugins
},
createKeymaps() {
return this.allExtensions.keymaps({
schema: this.schema,
})
},
createInputRules() {
return this.allExtensions.inputRules({
schema: this.schema,
})
},
createCommands() {
return this.allExtensions.commands({
schema: this.schema,
view: this.view,
})
},
createState() {
return EditorState.create({
schema: this.schema,
doc: this.getDocument(),
plugins: [
...this.plugins,
...this.getPlugins(),
],
})
},
getDocument() {
if (this.doc) {
return this.schema.nodeFromJSON(this.doc)
}
return DOMParser.fromSchema(this.schema).parse(this.contentNode.elm)
},
clearSlot() {
this.contentNode.elm.innerHTML = ''
},
getPlugins() {
const plugins = [
inputRules({
rules: this.inputRules,
}),
...this.keymaps,
keymap(builtInKeymap),
keymap(baseKeymap),
gapCursor(),
new Plugin({
props: {
editable: () => this.editable,
},
}),
]
if (this.menububbleNode) {
plugins.push(menuBubble(this.menububbleNode))
}
if (this.floatingMenuNode) {
plugins.push(floatingMenu(this.floatingMenuNode))
}
return plugins
},
createView() {
this.contentNode.elm.style.whiteSpace = 'pre-wrap'
return new EditorView(this.contentNode.elm, {
state: this.state,
dispatchTransaction: this.dispatchTransaction,
nodeViews: initNodeViews({
nodes: this.views,
editable: this.editable,
}),
})
},
destroyEditor() {
if (this.view) {
this.view.destroy()
}
},
updateMenuActions() {
this.menuActions = buildMenuActions({
schema: this.schema,
state: this.view.state,
commands: this.commands,
})
},
dispatchTransaction(transaction) {
this.state = this.state.apply(transaction)
this.view.updateState(this.state)
this.updateMenuActions()
if (!transaction.docChanged) {
return
}
this.emitUpdate()
},
getHTML() {
const div = document.createElement('div')
const fragment = DOMSerializer
.fromSchema(this.schema)
.serializeFragment(this.state.doc.content)
div.appendChild(fragment)
return div.innerHTML
},
getJSON() {
return this.state.doc.toJSON()
},
emitUpdate() {
this.$emit('update', {
getHTML: this.getHTML,
getJSON: this.getJSON,
state: this.state,
})
},
getDocFromContent(content) {
if (typeof content === 'object') {
return this.schema.nodeFromJSON(content)
}
if (typeof content === 'string') {
const element = document.createElement('div')
element.innerHTML = content.trim()
return DOMParser.fromSchema(this.schema).parse(element)
}
return false
},
setContent(content = {}, emitUpdate = false) {
this.state = EditorState.create({
schema: this.state.schema,
doc: this.getDocFromContent(content),
plugins: this.state.plugins,
})
this.view.updateState(this.state)
if (emitUpdate) {
this.emitUpdate()
}
},
clearContent(emitUpdate = false) {
this.setContent({
type: 'doc',
content: [{
type: 'paragraph',
}],
}, emitUpdate)
},
focus() {
this.view.focus()
},
},
mounted() {
this.initEditor()
},
beforeDestroy() {
this.destroyEditor()
},
}

12
packages/tiptap/src/index.js
View File

@@ -1,5 +1,7 @@
export { default as Editor } from './components/editor'
export { default as Extension } from './utils/extension'
export { default as Node } from './utils/node'
export { default as Mark } from './utils/mark'
export { default as Plugin } from './utils/plugin'
export { default as Editor } from './Utils/Editor'
export { default as EditorContent } from './Components/EditorContent'
export { default as Extension } from './Utils/Extension'
export { default as Node } from './Utils/Node'
export { default as Mark } from './Utils/Mark'
export { default as Plugin } from './Utils/Plugin'

2
packages/tiptap/src/nodes/Doc.js
View File

@@ -1,4 +1,4 @@
import Node from '../utils/node'
import Node from '../Utils/Node'
export default class DocNode extends Node {

2
packages/tiptap/src/nodes/Paragraph.js
View File

@@ -1,5 +1,5 @@
import { setBlockType } from 'tiptap-commands'
import Node from '../utils/node'
import Node from '../Utils/Node'
export default class ParagraphNode extends Node {

2
packages/tiptap/src/nodes/Text.js
View File

@@ -1,4 +1,4 @@
import Node from '../utils/node'
import Node from '../Utils/Node'
export default class TextNode extends Node {

89
packages/tiptap/src/utils/ComponentView.js
View File

@@ -1,89 +0,0 @@
import Vue from 'vue'
export default class ComponentView {
constructor(component, {
node,
view,
getPos,
decorations,
editable,
}) {
this.component = component
this.node = node
this.view = view
this.getPos = getPos
this.decorations = decorations
this.editable = editable
this.dom = this.createDOM()
this.contentDOM = this.vm.$refs.content
}
createDOM() {
const Component = Vue.extend(this.component)
this.vm = new Component({
propsData: {
node: this.node,
view: this.view,
getPos: this.getPos,
decorations: this.decorations,
editable: this.editable,
updateAttrs: attrs => this.updateAttrs(attrs),
updateContent: content => this.updateContent(content),
},
}).$mount()
return this.vm.$el
}
updateAttrs(attrs) {
if (!this.editable) {
return
}
const transaction = this.view.state.tr.setNodeMarkup(this.getPos(), null, {
...this.node.attrs,
...attrs,
})
this.view.dispatch(transaction)
}
updateContent(content) {
if (!this.editable) {
return
}
const transaction = this.view.state.tr.setNodeMarkup(this.getPos(), this.node.type, { content })
this.view.dispatch(transaction)
}
ignoreMutation() {
return true
}
stopEvent(event) {
// TODO: find a way to pass full extensions to ComponentView
// so we could check for schema.draggable
// for now we're allowing all drag events for node views
return !/drag/.test(event.type)
}
update(node, decorations) {
if (node.type !== this.node.type) {
return false
}
if (node === this.node && this.decorations === decorations) {
return true
}
this.node = node
this.decorations = decorations
this.vm._props.node = node
this.vm._props.decorations = decorations
return true
}
destroy() {
this.vm.$destroy()
}
}

134
packages/tiptap/src/utils/Editor.js Normal file
View File

@@ -0,0 +1,134 @@
import Vue from 'vue'
import { EditorState, Plugin } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import { Schema, DOMParser, DOMSerializer } from 'prosemirror-model'
import { gapCursor } from 'prosemirror-gapcursor'
import { keymap } from 'prosemirror-keymap'
import { baseKeymap } from 'prosemirror-commands'
import { inputRules } from 'prosemirror-inputrules'
import {
// buildMenuActions,
ExtensionManager,
// initNodeViews,
// menuBubble,
// floatingMenu,
// builtInKeymap,
} from '../Utils'
import builtInNodes from '../Nodes'
export default class Editor {
constructor(options = {}) {
console.log('construct editor')
this.element = document.createElement('div')
this.bus = new Vue()
this.options = options
this.extensions = this.createExtensions()
this.nodes = this.createNodes()
this.marks = this.createMarks()
this.schema = this.createSchema()
this.state = this.createState()
this.view = this.createView()
console.log('emit init')
this.emit('init')
console.log(this.view)
}
createExtensions() {
return new ExtensionManager([
...builtInNodes,
...this.options.extensions,
])
}
createNodes() {
const { nodes } = this.extensions
return nodes
}
createMarks() {
return []
}
createSchema() {
return new Schema({
nodes: this.nodes,
marks: this.marks,
})
}
createState() {
return EditorState.create({
schema: this.schema,
doc: this.createDocument(this.options.content),
})
}
createDocument(content) {
if (typeof content === 'object') {
return this.schema.nodeFromJSON(content)
}
// return DOMParser.fromSchema(this.schema).parse(this.contentNode.elm)
}
createView() {
this.element.style.whiteSpace = 'pre-wrap'
return new EditorView(this.element, {
state: this.state,
dispatchTransaction: this.dispatchTransaction.bind(this),
// nodeViews: initNodeViews({
// nodes: this.views,
// editable: this.editable,
// }),
})
}
dispatchTransaction(transaction) {
this.state = this.state.apply(transaction)
this.view.updateState(this.state)
// this.updateMenuActions()
if (!transaction.docChanged) {
return
}
this.emitUpdate()
}
emitUpdate() {
console.log(this.getHTML())
// this.$emit('update', {
// getHTML: this.getHTML,
// getJSON: this.getJSON,
// state: this.state,
// })
}
getHTML() {
const div = document.createElement('div')
const fragment = DOMSerializer
.fromSchema(this.schema)
.serializeFragment(this.state.doc.content)
div.appendChild(fragment)
return div.innerHTML
}
emit(event, ...data) {
this.bus.$emit(event, ...data)
}
on(event, callback) {
this.bus.$on(event, callback)
}
}

47
packages/tiptap/src/utils/buildMenuActions.js
View File

@@ -1,47 +0,0 @@
import { markIsActive, nodeIsActive, getMarkAttrs } from 'tiptap-utils'
export default function ({ schema, state, commands }) {
const nodes = Object.entries(schema.nodes)
.map(([name]) => {
const active = (attrs = {}) => nodeIsActive(state, schema.nodes[name], attrs)
const command = commands[name] ? commands[name] : () => {}
return { name, active, command }
})
.reduce((actions, { name, active, command }) => ({
...actions,
[name]: {
active,
command,
},
}), {})
const marks = Object.entries(schema.marks)
.map(([name]) => {
const active = () => markIsActive(state, schema.marks[name])
const attrs = getMarkAttrs(state, schema.marks[name])
const command = commands[name] ? commands[name] : () => {}
return {
name,
active,
attrs,
command,
}
})
.reduce((actions, {
name, active, attrs, command,
}) => ({
...actions,
[name]: {
active,
attrs,
command,
},
}), {})
return {
nodes,
marks,
}
}

10
packages/tiptap/src/utils/builtInKeymap.js
View File

@@ -1,10 +0,0 @@
import { lift, selectParentNode } from 'prosemirror-commands'
import { undoInputRule } from 'prosemirror-inputrules'
const keymap = {
'Mod-BracketLeft': lift,
Backspace: undoInputRule,
Escape: selectParentNode,
}
export default keymap

72
packages/tiptap/src/utils/floatingMenu.js
View File

@@ -1,72 +0,0 @@
import { Plugin } from 'prosemirror-state'
class Toolbar {
constructor({ node, editorView }) {
this.editorView = editorView
this.node = node
this.element = this.node.elm
this.element.style.visibility = 'hidden'
this.element.style.opacity = 0
this.editorView.dom.addEventListener('blur', this.hide.bind(this))
}
update(view, lastState) {
const { state } = view
// Don't do anything if the document/selection didn't change
if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) {
return
}
if (!state.selection.empty) {
this.hide()
return
}
const currentDom = view.domAtPos(state.selection.$anchor.pos)
const isActive = currentDom.node.innerHTML === '<br>'
&& currentDom.node.tagName === 'P'
&& currentDom.node.parentNode === view.dom
if (!isActive) {
this.hide()
return
}
const editorBoundings = this.element.offsetParent.getBoundingClientRect()
const cursorBoundings = view.coordsAtPos(state.selection.$anchor.pos)
const top = cursorBoundings.top - editorBoundings.top
this.element.style.top = `${top}px`
this.show()
}
show() {
this.element.style.visibility = 'visible'
this.element.style.opacity = 1
}
hide(event) {
if (event && event.relatedTarget) {
return
}
this.element.style.visibility = 'hidden'
this.element.style.opacity = 0
}
destroy() {
this.editorView.dom.removeEventListener('blur', this.hide)
}
}
export default function (node) {
return new Plugin({
view(editorView) {
return new Toolbar({ editorView, node })
},
})
}

12
packages/tiptap/src/utils/index.js
View File

@@ -1,7 +1,7 @@
export { default as buildMenuActions } from './buildMenuActions'
export { default as builtInKeymap } from './builtInKeymap'
export { default as ComponentView } from './ComponentView'
export { default as initNodeViews } from './initNodeViews'
export { default as floatingMenu } from './floatingMenu'
export { default as menuBubble } from './menuBubble'
// export { default as buildMenuActions } from './buildMenuActions'
// export { default as builtInKeymap } from './builtInKeymap'
// export { default as ComponentView } from './ComponentView'
// export { default as initNodeViews } from './initNodeViews'
// export { default as floatingMenu } from './floatingMenu'
// export { default as menuBubble } from './menuBubble'
export { default as ExtensionManager } from './ExtensionManager'

21
packages/tiptap/src/utils/initNodeViews.js
View File

@@ -1,21 +0,0 @@
import ComponentView from './ComponentView'
export default function initNodeViews({ nodes, editable }) {
const nodeViews = {}
Object.keys(nodes).forEach(nodeName => {
nodeViews[nodeName] = (node, view, getPos, decorations) => {
const component = nodes[nodeName]
return new ComponentView(component, {
node,
view,
getPos,
decorations,
editable,
})
}
})
return nodeViews
}

2
packages/tiptap/src/utils/mark.js
View File

@@ -1,4 +1,4 @@
import Extension from './extension'
import Extension from './Extension'
export default class Mark extends Extension {

73
packages/tiptap/src/utils/menuBubble.js
View File

@@ -1,73 +0,0 @@
import { Plugin } from 'prosemirror-state'
class Toolbar {
constructor({ node, editorView }) {
this.editorView = editorView
this.node = node
this.element = this.node.elm
this.element.style.visibility = 'hidden'
this.element.style.opacity = 0
this.editorView.dom.addEventListener('blur', this.hide.bind(this))
}
update(view, lastState) {
const { state } = view
// Don't do anything if the document/selection didn't change
if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) {
return
}
// Hide the tooltip if the selection is empty
if (state.selection.empty) {
this.hide()
return
}
// Otherwise, reposition it and update its content
this.show()
const { from, to } = state.selection
// These are in screen coordinates
const start = view.coordsAtPos(from)
const end = view.coordsAtPos(to)
// The box in which the tooltip is positioned, to use as base
const box = this.element.offsetParent.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)
this.element.style.left = `${left - box.left}px`
this.element.style.bottom = `${box.bottom - start.top}px`
}
show() {
this.element.style.visibility = 'visible'
this.element.style.opacity = 1
}
hide(event) {
if (event && event.relatedTarget) {
return
}
this.element.style.visibility = 'hidden'
this.element.style.opacity = 0
}
destroy() {
this.editorView.dom.removeEventListener('blur', this.hide)
}
}
export default function (node) {
return new Plugin({
view(editorView) {
return new Toolbar({ editorView, node })
},
})
}

2
packages/tiptap/src/utils/node.js
View File

@@ -1,4 +1,4 @@
import Extension from './extension'
import Extension from './Extension'
export default class Node extends Extension {