🐛 (frontend) preserve interlink style on drag-and-drop in editor

[Ovgodd]

Purpose

Fix DnD of links
Before this fix: both drag-and-drop and copy/paste turned them into plain links, and it seems that there is a conflict with it

For copy-paste, the behavior is a bit weird: when you make a simple text selection, only the text is copied. You have to “over-select” with the arrow keys to include the link as well (see the video).

issue : 1351

dndcc.mp4

Proposal

• Switch from <a> to <button>

[AntoLC]

I found the root problem actually, here we use a StyledLink that render a a tag:

docs/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx

Line 56 in 2db509d

<StyledLink

There is a conflict with the a tag, I think Blocknote or Tiptap take over our custom component during pasting or copy event.

An easy fix is to use a button tag instead of a a tag, like that we avoid the conflict, ex:

const LinkSelected = ({ url, title }: LinkSelectedProps) => {
  const { colorsTokens } = useCunninghamTheme();
  const router = useRouter();

  return (
    <BoxButton
      onClick={(e) => {
        e.preventDefault();
        router.push(url);
      }}
      draggable="false"
      $css={css`
        display: inline;
        padding: 0.1rem 0.4rem;
        border-radius: 4px;
        & svg {
          position: relative;
          top: 2px;
          margin-right: 0.2rem;
        }
        &:hover {
          background-color: ${colorsTokens['greyscale-100']};
        }
        transition: background-color 0.2s ease-in-out;
      `}
    >
      <SelectedPageIcon width={11.5} />
      <Text $weight="500" spellCheck="false" $size="16px" $display="inline">
        {title}
      </Text>
    </BoxButton>
  );
};

[Ovgodd]

I found the root problem actually, here we use a StyledLink that render a a tag:

docs/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx

Line 56 in 2db509d

<StyledLink

There is a conflict with the a tag, I think Blocknote or Tiptap take over our custom component during pasting or copy event.

An easy fix is to use a button tag instead of a a tag, like that we avoid the conflict, ex:

const LinkSelected = ({ url, title }: LinkSelectedProps) => {
  const { colorsTokens } = useCunninghamTheme();
  const router = useRouter();

  return (
    <BoxButton
      onClick={(e) => {
        e.preventDefault();
        router.push(url);
      }}
      draggable="false"
      $css={css`
        display: inline;
        padding: 0.1rem 0.4rem;
        border-radius: 4px;
        & svg {
          position: relative;
          top: 2px;
          margin-right: 0.2rem;
        }
        &:hover {
          background-color: ${colorsTokens['greyscale-100']};
        }
        transition: background-color 0.2s ease-in-out;
      `}
    >
      <SelectedPageIcon width={11.5} />
      <Text $weight="500" spellCheck="false" $size="16px" $display="inline">
        {title}
      </Text>
    </BoxButton>
  );
};

Oh yes nice, and with that we can get rid of my useInterlinkDropNormalizer hook :o ! this is simpler ahha and it works