Need help with edit link popover 😊

[antonykamp]

Hey everyone 👋

I have an issue regarding building my own edit link dialog. I'd really appreciate your help here.
This is a minimal version of the popover (implemented with radix-ui primtives).

Code Snippets

markdown-editor.tsx

import {
  MDXEditor,
  MDXEditorMethods,
  linkDialogPlugin,
  linkPlugin,
  toolbarPlugin,
} from "@mdxeditor/editor";
import "@mdxeditor/editor/style.css";
import React from "react";

import InsertLinkPopover from "./InsertLinkPopover";
import LinkButton from "./LinkButton";
import { MarkdownEditorProps } from "./types";

export const MarkdownEditor = React.forwardRef<
  MDXEditorMethods,
  MarkdownEditorProps
>((props, forwardedRef) => {
  return (
    <MDXEditor
      plugins={[
        linkPlugin(),
        linkDialogPlugin({
          LinkDialog: () => <InsertLinkPopover />,
        }),
        toolbarPlugin({
          toolbarContents: () => (
            <div>
              <LinkButton />
            </div>
          ),
        }),
      ]}
      {...props}
      ref={forwardedRef}
    />
  );
});

export default MarkdownEditor;

LinkButton.tsx

import {
  ButtonWithTooltip,
  iconComponentFor$,
  openLinkEditDialog$,
  useCellValues,
  usePublisher,
} from "@mdxeditor/editor";
import React from "react";

export const LinkButton = () => {
  // Use https://github.com/mdx-editor/editor/blob/main/src/plugins/link-dialog/LinkDialog.tsx
  const openLinkDialog = usePublisher(openLinkEditDialog$);
  const [iconComponentFor] = useCellValues(iconComponentFor$);
  return (
    <ButtonWithTooltip
      title={"Link"}
      onClick={() => {
        openLinkDialog();
      }}
    >
      {iconComponentFor("link")}
    </ButtonWithTooltip>
  );
};

export default LinkButton;

InsertLinkPopover.tsx

import {
  Action,
  cancelLinkEdit$,
  editorRootElementRef$,
  linkDialogState$,
  switchFromPreviewToLinkEdit$,
  updateLink$,
  useCellValues,
  usePublisher,
  withLatestFrom,
} from "@mdxeditor/editor";

import * as Popover from "@radix-ui/react-popover";

import React from "react";
import { Form } from "react-final-form";
const LinkEditForm: React.FC<{
  initialUrl: string | undefined;
}> = ({ initialUrl }) => {
  const updateLink = usePublisher(updateLink$);
  const cancelLinkEdit = usePublisher(cancelLinkEdit$);

  return (
    <Form
      onSubmit={async (values) => {
        // We don't use title for now
        updateLink({
          title: "",
          url: values.url,
        });
      }}
      initialValues={{
        url: initialUrl || "",
      }}
      render={({ handleSubmit }) => (
        <form
          onSubmit={async (e) => {
            await handleSubmit(e);
            e.stopPropagation();
            e.preventDefault();
          }}
          onReset={(e) => {
            e.stopPropagation();
            cancelLinkEdit();
          }}
        >
          <input id="url" name="url" />
          <div>
            <button type="reset">Cancel</button>
            <button type="submit">Insert</button>
          </div>
        </form>
      )}
    />
  );
};

const LinkPreview: React.FC<{ url: string }> = ({ url }) => {
  const switchFromPreviewToLinkEdit = usePublisher(
    switchFromPreviewToLinkEdit$
  );
  const closeLinkDialog = usePublisher(closeLinkDialog$);
  return (
    <div>
      <a target="_blank" rel="noopener noreferrer" href={url}>
        {url}
      </a>
      <button onClick={() => closeLinkDialog()}>close</button>
      <button
        onClick={(e) => {
          e.stopPropagation();
          switchFromPreviewToLinkEdit();
        }}
      >
        edit
      </button>
    </div>
  );
};

const closeLinkDialog$ = Action((r) => {
  r.sub(
    r.pipe(closeLinkDialog$, withLatestFrom(linkDialogState$)),
    ([, state]) => {
      if (state.type !== "inactive") {
        r.pub(linkDialogState$, {
          type: "inactive",
        });
      }
    }
  );
});

const InsertLinkPopover: React.FC = () => {
  // https://github.com/mdx-editor/editor/blob/main/src/plugins/link-dialog/LinkDialog.tsx
  const [linkDialogState, editorRootElementRef] = useCellValues(
    linkDialogState$,
    editorRootElementRef$
  );
  return (
    <Popover.Root modal={true} open={linkDialogState.type !== "inactive"}>
      <Popover.Anchor data-visible={linkDialogState.type === "edit"} />
      <Popover.Portal container={editorRootElementRef?.current}>
        <Popover.Content
          className="!z-51"
          onOpenAutoFocus={(e) => {
            e.preventDefault();
          }}
          key={linkDialogState.linkNodeKey}
        >
          {linkDialogState.type === "edit" && (
            <LinkEditForm initialUrl={linkDialogState.url} />
          )}
          {linkDialogState.type === "preview" && (
            <LinkPreview url={linkDialogState.url} />
          )}
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
};

export default InsertLinkPopover;

Issue

My current issue is the following. When you

1. Open the link dialog
2. Insert a link
3. Click on the link to open the preview
4. Click on the edit button in the preview

The result is that we shortly see the edit form and then the preview again. If you click in the near of the link in the preview window and then on the edit button it works. I was able to prove, that it shortly changes the state from "preview" to "edit", but instantly back again. The same thing happen when you want to edit an existing link.

This video contains show the issue with a styled version of the editor:

Screen.Recording.2024-11-19.at.07.39.48.mov

I would greatly appreciate your help and any ideas 💚 The architecture of the MDX editor is very interesting and fascinating. That's why I want to understand the full issue behind my mistake 😇 If you need any additional information, please feel free to reach out!

[Srazy]

You need to add autofocus to your input inside LinkEditForm