<template>
  <tiny-fluent-editor v-model="content" :image-upload="imageUpload"></tiny-fluent-editor>
</template>

<script setup>
import { ref } from 'vue'
import { TinyModal } from '@opentiny/vue'
import { TinyFluentEditor } from '@opentiny/vue'

const content = ref('{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}')
const imageUpload = {
  url: 'https://run.mocky.io/v3/f34365b4-679d-4e8f-8313-ddb11d6750be',
  method: 'POST',
  name: 'image',
  withCredentials: true,
  headers: {},
  success: (serverResponse, next) => {
    let file = {}

    // eslint-disable-next-line no-unreachable-loop
    for (const key in serverResponse) {
      file = serverResponse[key]
      break
    }

    next(file.downloadUrl)
  },
  fail: (serverError) => {
    TinyModal.message({
      message: `上传失败回调事件：${serverError}`,
      status: 'info'
    })
  }
}
</script>
