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 | 1× 1× | // // // // // // // // // // // 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 }) } }, // create editor instance and 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) }) }, mounted() { if (this.editor) { // reference element will be replaced by editor's rendered post this.editor.render(this.$refs.editor) } }, beforeDestroy() { this.editor.destroy() } } |