Vue

by artur_arseniev

HTML

<script src="https://unpkg.com/[email protected]/dist/grapes.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/grapes.min.css">
<script src="https://unpkg.com/[email protected]/dist/grapesjs-blocks-basic.min.js"></script>
<div id='app'>
  <div id="gjs"></div>
  <button @click="convertToConditional">Convert to Conditional</button>
</div>

Vue

let editor;
Vue.createApp({
  data() {
    return {
      editor: null,
    }
  },
  methods: {
    convertToConditional() {
      const component = this.editor.getSelected()
      var styles = component.getStyle() || {}
      const coll = component.collection
      const at = coll.indexOf(component)
      coll.remove(component)

      const newComponent = coll.add(
        {
          type: "conditional-text",
        },
        { at }
      )

      newComponent.setStyle(styles)
    },
  },
  mounted() {
    this.editor = grapesjs.init({
      container: "#gjs",
      fromElement: 1,
      height: "500px",
      storageManager: { type: 0 },
      plugins: ["gjs-blocks-basic"]
    })

    this.editor.DomComponents.addType("conditional-text", {
      extend: "text",
      isComponent: (el) => el.tagName == "CONDITIONAL",
      model: {
        defaults: {
          tagName: "conditional",
          displayedText: "Open conditionals to choose text",
          conditionObjects: [],
          selectedConditionIndex: -1,
          isNew: true,
        },
      },
      view: {
        init() {
          this.listenTo(this.model, "change:displayedText", this.render)
        },
        onRender() {
          this.el.innerHTML = this.model.get("displayedText")
        },
      },
    })
  }
}).mount('#app')