Render Link popup as a modal

[hiteshpariyani]

How to render link ui as a modal?

[Aviisek]

I am looking for this, is this possible? I would appreciate the help. @zbeyens TIA

[benjiminio]

I was looking for the same and wondered how nobody provided an example although probably nobody uses the browser prompt. So here is how I solved it (for those looking for a possible solution).

Assuming you have already a modal component you just need to create a new button component that triggers the open/closed state of the modal and inserts the image:

import React, { useState } from 'react'
import {
  focusEditor,
  getPluginType,
  someNode,
  useEventPlateId,
  usePlateEditorState,
} from '@udecode/plate-core'
import { ToolbarButton, ToolbarButtonProps } from '@udecode/plate-ui-toolbar'
import ImageUrlInputModal from 'components/common/modals/ImageUrlInputModal'
import { ELEMENT_IMAGE, insertImage } from '@udecode/plate'

export const CustomImageToolbarButton = ({
  id,
  ...props
}: ToolbarButtonProps) => {
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
  const editor = usePlateEditorState(useEventPlateId(id))
  const type = getPluginType(editor, ELEMENT_IMAGE)
  const isLink = !!editor?.selection && someNode(editor, { match: { type } })

  const insert = (url: string) => {
    insertImage(editor, url)
    setIsLinkInputModalOpen(false)
  }

  return (
    <>
      <ToolbarButton
        active={isLink}
        onMouseDown={async event => {
          if (!editor) return

          event.preventDefault()
          event.stopPropagation()

          focusEditor(editor, editor.selection ?? editor.prevSelection!)

          setIsLinkInputModalOpen(true)
        }}
        {...props}
      />

      <ImageUrlInputModal
        isOpen={isModalOpen}
        handleClose={() => setIsModalOpen(false)}
        handleSubmit={insert}
      />
    </>
  )
}

Finally you just add the new CustomImageToolbarButton to your toolbar.