Edit/Preview mode toggle, like in GitHub

[Andre-John Mas]

I am looking to use vue-markdown-editor in a similar way to the editor in GitHub:

Two approaches I am looking at:

• External menubar, sending an action to vue-markdown-editor such as $refs.editor.doAction('bold')
• Adding text only toolbar items, to toggle

Is it possible to do either of these, since I did not see this in the documentation?

[Andre-John Mas]

I ended up using the component as:

    <v-md-editor
      ref="mdEditor"
      v-model="content"
      class="v-md-editor"
      :mode="mode"
      :left-toolbar="leftToolbar"
      :right-toolbar="rightToolbar"
      @change="onChange"
      >

and then provided my own buttons (I am using Quasar), on top of the editor:

    <q-toolbar dense>
      <q-tabs v-model="mode" align="left" dense >
        <q-tab name="edit" label="Write"/>
        <q-tab name="preview" label="Preview"/>
      </q-tabs>
      <q-space />
      <q-toolbar v-if="mode === 'edit'">
        <q-space />
        <q-btn v-for="button in buttons" :key="button.icon" flat round dense @click="onButton(button.action as string)">
          <q-icon :name="button.icon" />
        </q-btn>
      </q-toolbar>
    </q-toolbar>

The onButton() method:

    onButton (action: string) {
      const editor = this.$refs.mdEditor as any;
      editor.commands[action](editor);
    }

I am not sure if doing things this way is acceptable, since I couldn't see this in the documentation?