all files / src/components/ MobiledocEditor.vue

68.89% Statements 31/45
40% Branches 4/10
62.5% Functions 15/24
66.67% Lines 26/39
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 136 137 138 139 140 141 142 143                                                                                                                                                                                                                                           
//
//
//
//
//
//
//
//
//
//
//
 
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()
  }
}