Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
How to control how HTML is copied into the clipboard in plain text form?
Premise
The text/plain representation of my HTML5 markup is inequivalent to its CSS3 markup, even in manners which /plain is able to represent, like the amount of line breaks and depth (or even presence of) indentation. Specifically:
-
When I duplicate the content of a
<blockquote>, it is indented with a tabulator, even though my linked CSS3 stylesheet does not indent it. -
Similarly,
<p>s retain a single line between them even when it is not rendered. -
Likewise, margins that would produce a line between non-
<p>text lack line breaks between them, rendering them nigh unreadable.
For this question, I care about the indentation. However, if someone is competent enough to generalise to the other problems, I'll be glad for the effort.
Demonstration
An example is how, in firefox-142.0, firefox 'data:text/html;charset=utf-8,<!DOCTYPE html><html><body><p>Unindented</p><blockquote>Indented</blockquote></body></html>' becomes:
Unindented
Indented
Rationale
I would like my webpage to be as readable as is possible when duplicated into plain text form with Control. To this end, I've appended colons to <h[1-6]> (with ECMAScript). However, I utilise indentation extensively to indicate nested sections. Until the WHATWG implements an <indent> element, which would presumably be indented as <blockquote> is on paste, I need to manually implement this.
Desire
Can this be achieved? If so, how?
2 answers
The most brute force method to deal with this would be to add a listener for the copy event and modify the copied text to remove lines and other formatting that you consider extra.
document.addEventListener('copy', function(e){
// Get the copied text
const text = window.getSelection().toString();
// Do some modification
const cleanedCopy = doSomeProcessing(text);
// Change the clipboard data.
e.clipboardData.setData('text/plain', cleanedCopy);
e.preventDefault();
});
In your case I think you do not want the double new lines in the copied text. This would be a very rough fix as it would remove any legitimate double newlines as well. And doesn't account for copying images, etc.
document.addEventListener('copy', function(e){
const text = window.getSelection().toString();
// Change all double newlines whether on windows or unix to just one newline.
e.clipboardData.setData('text/plain', text.replaceAll(`\n\n`, `\n`).replaceAll(`\r\n\r\n`, `\r\n`));
e.preventDefault();
});
I don't really understand what you're asking (I barely know how to spell "CSS"), so maybe this is way off base. However, you can make your own <indent> in a style sheet. Here is how I do it:
indent {
display: block;
margin-left: 2em;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
background: none;
}
I also use indentation heavily to show document tree structure hierarchy. I used to use <dl> to get nested indentation back when that was the only option. The <indent> defined in the style sheet is much less klunky and works pretty much as expected.
2 comment threads