1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | 1× 1× 6× 6× 5× 6× 6× 6× 6× 6× 5× 6× 6× 6× 5× 5× 5× 5× 5× 5× 1× 1× 5× 5× 5× | // // // // // // // // // // // import Mobiledoc, { UI } from "mobiledoc-kit" const EMPTY_MOBILEDOC = { version: "0.3.0", markups: [], atoms: [], cards: [], sections: [] } export default { name: "mobiledoc-editor", props: { autofocus: { type: Boolean, default: () => true }, spellCheck: { type: Boolean, default: () => true }, placeholder: { type: String, default: () => "" }, serializeVersion: { type: String, default: () => "0.3.0" }, atoms: { type: Array, default: () => [] }, cards: { type: Array, default: () => [] }, mobiledoc: { type: Object, default: () => EMPTY_MOBILEDOC } }, data() { return { activeMarkupTags: [], activeSectionTags: [] } }, computed: { _editorOptions() { return { autofocus: this.autofocus, spellcheck: this.spellcheck, placeholder: this.placeholder, serializeVersion: this.serializeVersion, atoms: this.atoms, cards: this.cards, mobiledoc: this.mobiledoc } } }, methods: { toggleMarkup(tagName) { this.editor.toggleMarkup(tagName) }, toggleSection(tagName) { this.editor.toggleSection(tagName) }, toggleLink() { if (!this.editor.hasCursor()) { // if text isn"t selected return } if (this.editor.hasActiveMarkup("a")) { this.editor.toggleMarkup("a") } else { UI.toggleLink(this.editor) } }, // addAtom(atomName, text, payload) { // this.editor.insertAtom(atomName, text, payload) // }, // // addCard(cardName, payLoad, editMode = false) { // this.editor.insertCard(cardName, payload, editMode) // }, // // addCardInEditMode(cardName, payLoad, editMode = true) { // this.editor.insertCard(cardName, payload, editMode) // }, _setActiveMarkupTags() { this.activeMarkupTags = this.editor.activeMarkups.map(m => m.tagName) }, _setActiveSectionTags() { // editor.activeSections are leaf sections // Map section tag names (e.g. "p", "ul", "ol") so that list buttons are updated this.activeSectionTags = this.editor.activeSections.map(s => { return s.isNested ? s.parent.tagName : s.tagName }) } }, // setup event listeners created() { this.$root.$on("toggleMarkup", this.toggleMarkup) this.$root.$on("toggleSection", this.toggleSection) this.$root.$on("toggleLink", this.toggleLink) }, // create editor instance // setup event hooks beforeMount() { this.$emit("willCreateEditor") this.editor = new Mobiledoc.Editor(this._editorOptions) this.editor.inputModeDidChange(() => { this._setActiveMarkupTags() this._setActiveSectionTags() }) this.$emit("didCreateEditor", this.editor) this.editor.postDidChange(() => { // serialize the editor"s post to the mobiledoc version format // any cards or atoms present in doc, will be ommited const mobiledoc = this.editor.serialize(this.serializeVersion) this.$emit("onChange", mobiledoc) }) }, // replace editor element with rendered post mounted() { // mounted is recalled when data changes, so make sure it only runs once this.$once("mounted", () => this.editor.render(this.$refs.editor)) this.$emit("mounted") }, beforeDestroy() { this.editor.destroy() } } |