<template>
  <div :class="$style.sdQuillEditor">
    <quill-editor ref="quillEditor" v-bind="attrs" v-on="$listeners" />
  </div>
</template>

<script>
import './sd-quill-editor.scss'
import './sd-quill-reader.css'
import { quillEditor } from 'vue-quill-editor'

const getScrollParent = (function() {
  var regex = /(auto|scroll)/

  var parents = function(node, ps) {
    if (node.parentNode === null) {
      return ps
    }

    return parents(node.parentNode, ps.concat([node]))
  }

  var style = function(node, prop) {
    return getComputedStyle(node, null).getPropertyValue(prop)
  }

  var overflow = function(node) {
    return style(node, 'overflow') + style(node, 'overflow-y') + style(node, 'overflow-x')
  }

  var scroll = function(node) {
    return regex.test(overflow(node))
  }

  var scrollParent = function(node) {
    if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
      return
    }

    var ps = parents(node.parentNode, [])

    for (var i = 0; i < ps.length; i += 1) {
      if (scroll(ps[i])) {
        return ps[i]
      }
    }

    return document.scrollingElement || document.documentElement
  }

  return scrollParent
})()

/**
 * <p>vue-quill-editor的包装，适配了当前主题</p>
 * <p>具体用法请参考：https://github.surmon.me/vue-quill-editor/</p>
 * @displayName SdQuillEditor 富文本
 */
export default {
  name: 'SdQuillEditor',
  components: {
    quillEditor,
  },
  inheritAttrs: false,
  computed: {
    attrs() {
      let attrs = this.$attrs
      if (!attrs) attrs = {}
      attrs.options = {
        placeholder: '在此输入内容...',
        ...attrs.options,
      }
      return attrs
    },
  },
  mounted() {
    // 如果已经指定了scrollingContainer，跳过
    if (this.attrs.options.scrollingContainer) return

    // 没指定的情况，自动找到第一个能滚动的父元素，作为编辑器的scrollingContainer
    const scrollParent = getScrollParent(this.$el)
    if (scrollParent) {
      this.$refs.quillEditor.quill.scrollingContainer = scrollParent
    }
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

/* 覆盖 quill 默认边框圆角为 ant 默认圆角，用于统一 ant 组件风格 */
.sd-quill-editor {
  height: 100%;
  :global {
    .quill-editor {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .ql-toolbar.ql-snow {
      line-height: $line-height-base;
      border-radius: $border-radius-base $border-radius-base 0 0;
      button {
        &.ql-active {
          color: $primary-7;
          .ql-stroke {
            stroke: $primary-7;
          }
        }
        &:hover {
          color: $primary-color;
          .ql-stroke {
            stroke: $primary-color;
          }
        }
        &:active {
          color: $primary-7;
          .ql-stroke {
            stroke: $primary-7;
          }
        }
      }
    }
    .ql-container {
      flex: auto;
      height: auto;
      overflow: hidden;
      &.ql-snow {
        border-radius: 0 0 $border-radius-base $border-radius-base;
      }
      .ql-editor {
        min-height: 200px;
      }
    }
    .ql-editor {
      // ensure quill clipboard preserve whitespaces 参考https://github.com/quilljs/quill/issues/1752
      word-wrap: break-word;
      white-space: pre-wrap;
    }
    .ql-clipboard {
      position: fixed;
      // ensure quill clipboard preserve whitespaces
      word-wrap: break-word;
      white-space: pre-wrap;
    }
  }
}
</style>

<docs>
```vue
<template>
  <div>
    <p><sd-quill-editor v-model="richText" /></p>
    <p>v-model的值：</p>
    <p>{{richText}}</p>
  </div>

</template>

<script>
export default {
  data() {
    return {
      richText: '<p>这是一些<b>富文本</b>内容</p>',
    };
  },
}
</script>
```
</docs>
