Function HrComponent

packages/plugins/hr/src/components/hr.tsx:14–40

({ children, attributes, editor, element })

}

export const HrComponent: FC<HrProps> = ({ children, attributes, editor, element }) => {
  const focused = useNodeFocused()
  const [readOnly] = useReadOnly()
  const { color = DEFUALT_HR_COLOR, width = DEFAULT_HR_WIDTH, style = DEFAULT_HR_STYLE } = element
  return (
    <HrPopover editor={editor} element={element}>
      <div
        css={[
          tw`py-4 rounded cursor-default`,
          !readOnly && tw`hover:bg-gray-100`,
          focused && !readOnly && tw`bg-gray-100`,
        ]}
        {...attributes}
      >
        <hr
          css={[
            css`
              border-top: ${width}px ${style} ${color};
            `,
          ]}
        />

        <div tw="hidden absolute">{children}</div>
      </div>
    </HrPopover>
  )
}