import React from 'react'
import {SCompletionsSpan} from './index.style'

const Completions = ({attributes, children, element}: any) => {
  // 选中 聚焦可以改变的样式
  const renderComponent = () => {
    if (element.component) {
      return <element.component {...element} />
    }
    return <span />
  }
  return (
    <SCompletionsSpan>
      <span {...attributes} className="completions-content" contentEditable={false}>
        {renderComponent()}
        {children}
      </span>
    </SCompletionsSpan>
  )
}
export default Completions