import React from 'react'
import WWOpenDataComponent from '../../component/open_data'
// import {useFocused, useSelected} from '5e-slate-react'

const Mention = ({attributes, children, element}: any) => {
  // const selected = useSelected()
  // const focused = useFocused()
  // 选中 聚焦可以改变的样式
  const renderReply = () => {
    return element.character.isReply ? <span className="reply-title">回复: </span> : ''
  }

  const renderComponent = () => {
    if (element.component) {
      return <element.component {...element} />
    }
    return (
      <WWOpenDataComponent openid={element?.character?.openId} type={element?.character?.type} />
    )
  }

  return (
    <span {...attributes} className="mention-content" contentEditable={false}>
      {renderReply()}@{renderComponent()}
      {/* @{element.character} */}
      {children}
    </span>
  )
}
export default Mention