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 ofquotes
- 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
- there is a line break between the inside the
- 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: