<template>
  <div :class="['ql-editor', $style.content]">
    <!-- eslint-disable-next-line vue/no-v-html -->
    <div v-html="value" />
  </div>
</template>

<script>
import './sd-quill-reader.css'
import components from './_import-components/sd-quill-reader-import'

/**
 * 富文本编辑器产生的内容，直接 v-html 绑定会丢失一些样式，所以需要用此组件显示
 * @displayName SdQuillReader 显示富文本内容
 * @since 0.18
 */
export default {
  name: 'SdQuillReader',
  components,
  props: {
    /**
     * 要显示的 html 内容
     */
    value: {
      type: String,
      default: undefined,
    },
  },
  data() {
    return {}
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.content:global(.ql-editor) {
  padding: 0;
}
</style>

<docs>
```vue
<template>
  <div>
    <sd-quill-editor v-model="richText" />
    <p>使用sd-quill-reader</p>
    <sd-quill-reader :value="richText"/>
    <p>直接 v-html 绑定</p>
    <div v-html="richText"/>
  </div>

</template>

<script>
export default {
  data() {
    return {
      richText: '<p>这是普通大小，这是<span class="ql-size-large">更大</span>的字体</p>',
    };
  },
}
</script>
```
</docs>
