🐛 (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