Function LinkCreateComponent

packages/plugins/link/src/components/create.tsx:20–101

()

export interface LinkCreateComponentProps extends SlotComponentProps {}

export const LinkCreateComponent: FC<LinkCreateComponentProps> = () => {
  const editor = useEditableStatic()

  const [url, setUrl] = useState('')

  const [open, setOpen] = useLinkOpen()

  const inputRef = useRef<HTMLInputElement>(null)

  const pointRef = React.useRef({ x: 0, y: 0 })

  const virtualRef = React.useRef({
    getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...pointRef.current }),
  })

  useEffect(() => {
    inputRef.current?.focus()
  }, [])

  const rects = useSelectionDrawingRects()

  useEffect(() => {
    if (rects.length > 0) {
      const rect = rects[rects.length - 1]
      const [x, y] = Editable.reverseRelativePosition(editor, rect.x, rect.bottom)
      pointRef.current = {
        x,
        y,
      }
    } else {
      pointRef.current = {
        x: 0,
        y: 0,
      }
    }
  }, [rects])

  const handleOk = () => {
    const link: Link = {
      type: LINK_KEY,
      href: url,
      children: [{ text: 'link' }],
    }
    if (!editor.selection || Range.isCollapsed(editor.selection)) {
      Transforms.insertNodes(editor, link)
    } else {
      Transforms.wrapNodes(editor, link, {
        match: n => Text.isText(n),
        split: true,
      })
      Transforms.select(editor, Range.end(editor.selection))
    }
    setOpen(false)
  }

  const locale = useLocale<LinkLocale>('link')

  return (