Last active
November 16, 2023 12:43
-
-
Save nathansmith/86b5d4b23ed968a92fd4 to your computer and use it in GitHub Desktop.
Handy utilities for dealing with `<div contenteditable="true">` areas.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Helpers. | |
import { convertToText } from './'; | |
/* | |
You would call this when receiving a plain text | |
value back from an API, and before inserting the | |
text into the `contenteditable` area on a page. | |
*/ | |
const convertToMarkup = (str = '') => { | |
return convertToText(str).replace(/\n/g, '<br>'); | |
}; | |
// Export. | |
export { convertToMarkup }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
You would call this after getting an element's | |
`.innerHTML` value, while the user is typing. | |
*/ | |
const convertToText = (str = '') => { | |
// Ensure string. | |
let value = String(str); | |
// Convert encoding. | |
value = value.replace(/ /gi, ' '); | |
value = value.replace(/&/gi, '&'); | |
// Replace `<br>`. | |
value = value.replace(/<br>/gi, '\n'); | |
// Replace `<div>` (from Chrome). | |
value = value.replace(/<div>/gi, '\n'); | |
// Replace `<p>` (from IE). | |
value = value.replace(/<p>/gi, '\n'); | |
// Remove extra tags. | |
value = value.replace(/<(.*?)>/g, ''); | |
// Trim each line. | |
value = value | |
.split('\n') | |
.map((line = '') => { | |
return line.trim(); | |
}) | |
.join('\n'); | |
// No more than 2x newline, per "paragraph". | |
value = value.replace(/\n\n+/g, '\n\n'); | |
// Clean up spaces. | |
value = value.replace(/[ ]+/g, ' '); | |
value = value.trim(); | |
// Expose string. | |
return value; | |
}; | |
// Export. | |
export { convertToText }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Helpers. | |
import { convertToText } from './'; | |
// Constants. | |
const f = 'function'; | |
const o = 'object'; | |
/* | |
You would call this when a user pastes from | |
the clipboard into a `contenteditable` area. | |
*/ | |
const convertOnPaste = ( | |
event = { | |
preventDefault() {}, | |
} | |
) => { | |
// Prevent paste. | |
event.preventDefault(); | |
// Set later. | |
let value = ''; | |
// Does method exist? | |
const hasEventClipboard = !!( | |
event.clipboardData && | |
typeof event.clipboardData === o && | |
typeof event.clipboardData.getData === f | |
); | |
// Get clipboard data? | |
if (hasEventClipboard) { | |
value = event.clipboardData.getData('text/plain'); | |
} | |
// Insert into temp `<textarea>`, read back out. | |
const textarea = document.createElement('textarea'); | |
textarea.innerHTML = value; | |
value = textarea.innerText; | |
// Clean up text. | |
value = convertToText(value); | |
// Insert text. | |
if (typeof document.execCommand === f) { | |
document.execCommand('insertText', false, value); | |
} | |
}; | |
// Export. | |
export { convertOnPaste }; |
cc: @ANN-MB
It's been awhile since I last updated this gist.
I replaced what I had with what I currently use.
It's much more streamlined, and removes the unnecessary fallback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
About the fallback : it trims all line breaks.
Why don't you use the same
.replace()
values withinnerText
or.text()
? It works for me.Also you can merge two of your
.replace()
methods into one :.replace(/\n+\s+\n+/g, "\n\n").replace(/\n\n+/g, "\n\n");
to.replace(/(\n+\s+\n+)|(\n\n+)/g, "\n\n")
Thanks nathansmith by the way ! It helped a lot :)
Vanilla JavaScript solution below.