all files / components/ MobiledocEditor.vue

17.5% Statements 7/40
33.33% Branches 4/12
4.55% Functions 1/22
8.57% Lines 3/35
1 branch Ignored     
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                                                                                                                                                                                                                                                                         
//
//
//
//
//
//
//
//
//
//
//
 
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()
  }
}