frontend/src/components/editor/Editor.vue

<template>
  <div class="slide show-mode">
    <template v-for="page in pages">
      <editing-page-vue :key="page.frontendId" :page="page"></editing-page-vue>
    </template>
    <div v-show="false">{{ focus }}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import EditingPageVue from './EditingPage.vue'
import { USE_FOCUS, INIT_BY_DEFAULT } from '../../store/types/editor-types'
export default {
  name: 'editor',
  components: {
    EditingPageVue
  },
  computed: {
    ...mapState({
      items: state => state.editor.items
    }),
    pages() {
      const items = this.$store.state.editor.items
      if (items.length === 0) {
        this.$nextTick(() => {
          this.$store.commit(
            INIT_BY_DEFAULT,
            this.$store.state.editor.slideInfo
          )
        })
      }
      const pages = []
      let lastIndex = 0
      let times = 0
      items.forEach((item, index) => {
        if (item.content === '====') {
          pages.push({ items: [...items].slice(lastIndex, index + 1) })
          lastIndex = index + 1
        }
        times = index
      })
      if (times !== items.length) {
        const page = { items: [...items].slice(lastIndex) }
        pages.push(page)
      }

      return pages
    },
    focus() {
      const res = this.$store.state.editor.focus
      res !== null &&
        this.$nextTick(() => {
          this.checkFocus()
        })
      return this.$store.state.editor.focus
    }
  },
  methods: {
    checkFocus() {
      if (this.focus !== null) {
        if (this.focus.focusId) {
          this.$nextTick(() => {
            const item = document.getElementById(this.focus.focusId)
            item.focus()
            const offset = this.focus.offset
            const computeResult = this.computeContainerAndOffset(item, offset)
            const range = document.getSelection().getRangeAt(0)
            range.setStart(computeResult.container, computeResult.offset)
            range.collapse()
            this.$store.commit(USE_FOCUS)
          })
        }
      }
    },
    computeContainerAndOffset(item, offset) {
      // todo test
      if (offset === 0) {
        return { container: item, offset: 0 }
      }

      let restOffset = offset
      if (item.hasChildNodes()) {
        for (const node of item.childNodes) {
          if (node.length > restOffset) {
            return {
              container: node,
              offset: restOffset
            }
          } else {
            restOffset -= node.length
          }
        }
      } else {
        return { container: item, offset: 0 }
      }

      // default return value is the end of this element
      // notice that when the element is not Text, offset 1 means the end of element
      return {
        container: item,
        offset: 1
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/common/reset.scss';
@import '@/common/mode-common.scss';
@import '@/common/show-mode.scss';
@import '@/common/read-mode.scss';
</style>