Link editing example in LinkExtension documentation appears to be broken

[sykesd]

I am attempting to implement the link editing functionality as shown in the 2nd example on the LinkExtension documentation page.

I am testing Chrome 118 on Windows 10

The problem appears to be that the <input> tag that is displayed to capture the link target auto-hides immediately upon getting focus.

It is displayed via the following React component:

const DelayAutoFocusInput = ({ autoFocus, ...rest }: HTMLProps<HTMLInputElement>) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!autoFocus) {
      return;
    }

    const frame = window.requestAnimationFrame(() => {
      inputRef.current?.focus();
    });

    return () => {
      window.cancelAnimationFrame(frame);
    };
  }, [autoFocus]);

  return <input ref={inputRef} {...rest} />;
};

The calling code does this:

  return (
    <>
      {!isEditing && <FloatingToolbar>{linkEditButtons}</FloatingToolbar>}
      {!isEditing && empty && (
        <FloatingToolbar positioner={linkPositioner}>{linkEditButtons}</FloatingToolbar>
      )}

      <FloatingWrapper
        positioner='always'
        placement='bottom'
        enabled={isEditing}
        renderOutsideEditor
      >
        <DelayAutoFocusInput
          style={{ zIndex: 20 }}
          autoFocus
          placeholder='Enter link...'
          value={href}
          onChange={(event: ChangeEvent<HTMLInputElement>) => setHref(event.target.value)}
          onKeyUp={(event: React.KeyboardEvent<HTMLInputElement>) => {
            const { code } = event;
        
            if (code === 'Enter') {
              submitHref();
            }
        
            if (code === 'Escape') {
              cancelHref();
            }
          }}
          />
      </FloatingWrapper>
    </>
  );

If I remove the useEffect inside of DelayAutoFocusInput then I see the <input>, unfocused. When I click in it to give it focus, it hides and gets deleted from the DOM.

What am I doing wrong here?

The larger context is that this is inside the project created by following the 5 Minute tutorial

[sykesd]

After much digging, I think I have found the problem. In the <FloatingLinkToolbar> component, it is necessary to set the renderOutsideEditor property to false on the <FloatingWrapper> when showing the <input>.

Like so:

      <FloatingWrapper
        positioner='always'
        placement='bottom'
        enabled={isEditing}
        renderOutsideEditor={!isEditing}   // <-- Here!
      >
        <DelayAutoFocusInput
       // ... the rest

I got to this by reading the source of the FloatingWrapper component and found the following comment on the property definition:

/**
   * When `true` the child component is rendered outside the `ProseMirror`
   * editor. Set this to `false` when you need to render special components
   * (like inputs) which capture events and conflict with the default      <-- Here!!
   * prosemirror editor.
   *
   * For toolbars which rely on clicks you can leave this as the default.
   *
   * Setting to true will also make scrolling less smooth since it will be using
   * JavaScript to keep track of the position of the element.
   *
   * @defaultValue false
   */
  renderOutsideEditor?: boolean;