frontend/src/components/editor/EditableItem.vue

<template>
  <component
    ref="element"
    :is="item.type"
    :id="item.id"
    @input="handleInput"
    @keydown.stop="handleKeyDown"
    contenteditable
    v-html="item.content"
  >
  </component>
</template>

<script>
import blockTypeRegs from '../../utils/block-type-regs'
import { MODIFY_ITEM, ADD_ITEM_AFTER } from '../../store/types/editor-types'
export default {
  name: 'editable-item',
  props: ['item', 'pageId'],
  data: function() {
    return {}
  },
  mounted() {},
  updated() {},
  methods: {
    handleKeyDown(e) {
      switch (e.key) {
        case 'Enter':
          e.preventDefault()
          this.$store.commit(ADD_ITEM_AFTER, {
            pageId: this.pageId,
            itemId: this.item.id
          })
          break

        default:
          break
      }
    },
    handleInput(e) {
      const diff = { content: e.target.textContent }
      this.item.type === 'div' &&
        Object.entries(blockTypeRegs)
          .map(array => ({ tagName: array[0], reg: array[1] }))
          .some(({ tagName, reg }) => {
            if (reg.test(e.target.textContent)) {
              diff.type = tagName
            }
          })

      this.$store.commit(MODIFY_ITEM, {
        pageId: this.pageId,
        itemId: this.item.id,
        diff
      })
    }
  }
}
</script>

<style lang="scss" scoped>
* [contenteditable] {
  outline: none;
  padding: 10px;

  &:hover {
    background: #fafcfe;
  }

  &:focus {
    background: #f9fafc;
  }
}
</style>