Problems with copy&pasting (inline) code when copying from websites

The html tag for inline code snippets on the websites is usually <code>. When copying from a website the content is stored as HTML in the clipboard. When pasting RemNote parses the HTML in some way.

It has a few problems:

  • Inline <code> nodes create /code blocks instead of quotes
  • There is some issue with boundaries: The first code block does not get closed properly e.g. this:


gets pasted as

I don’t know all the edge cases for distinguishing inline code and code blocks, but here are a few heuristics to make pasting behave better:

  • Paste as /code if
    • there is a line break between the inside the <code>node
    • the <code> is used in conjunction with <pre>
    • the <code> is used in an inline environment, e.g. has a text node or <span> as sibling
  • Otherwise (in general) paste as quote

Here is a simple test case. Fill the clipboard by executing this (and focus the website):

setTimeout(async () => {
  await navigator.clipboard.write([
    new ClipboardItem({
      "text/html": new Blob(
        ["<span>text </span><code>code</code><span> text</span>"],
        { type: "text/html" }
      ),
    }),
  ]);
  console.log("copied");
}, 3000);

Pasting into RemNote looks like this:

but it should look like this:

Nice deconstructing! My slightly tedious workaround has so far been to paste onto a text editor before copy/paste into remnote whenever I see an inline code.

Hope this can be fixed.

1 Like

A less tedious workaround is to paste with Ctrl + Shift + V or paste into a RemNote code block.
See also [Wiki] Editing tips, tricks, workarounds and hacks.

1 Like

Nice tip, I shall use Ctrl + Shift + V next time. Although I use rich text editors as I also want to preserve the emphasis within the content.