I am using event.clipboardData.getData('text/html'); to get the HTML from clipboard.
However, the problem is that the HTML doesn’t represent what’s actually been copied, e.g.
Copying this HTML as rendered in the browser:
<p class="mt_6 first:mt_0 lh_1.75rem">Panda provides a <code class="bd-w_1px bd-c_rgba(0,_0,_0,_0.04) dark:bd-c_rgba(255,_255,_255,_0.1) bg_rgba(0,_0,_0,_0.03) dark:bg_rgba(255,_255,_255,_0.1) ov-wrap_break-word ff_mono bdr_md py_0.5 px_0.25em fs_0.9em" dir="ltr">RecipeVariantProps</code> type utility that can be used to infer the variant properties of a recipe.</p>
I receive this in the clipboard:
<p class="mt_6 first:mt_0 lh_1.75rem" style="margin-top: var(--spacing-6); margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; box-sizing: border-box; border-width: 0px; border-style: solid; border-color: var(--colors-neutral-800); overflow-wrap: break-word; --blur: ; --brightness: ; --contrast: ; --grayscale: ; --hue-rotate: ; --invert: ; --saturate: ; --sepia: ; --drop-shadow: ; --backdrop-blur: ; --backdrop-brightness: ; --backdrop-contrast: ; --backdrop-grayscale: ; --backdrop-hue-rotate: ; --backdrop-invert: ; --backdrop-opacity: ; --backdrop-saturate: ; --backdrop-sepia: ; --gradient-from-position: ; --gradient-to-position: ; --gradient-via-position: ; --scroll-snap-strictness: proximity; --border-spacing-x: 0; --border-spacing-y: 0; --translate-x: 0; --translate-y: 0; --rotate: 0; --rotate-x: 0; --rotate-y: 0; --skew-x: 0; --skew-y: 0; --scale-x: 1; --scale-y: 1; line-height: 1.75rem; color: rgb(243, 244, 246); font-family: ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 14.4px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(17, 17, 17); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Panda provides a<span> </span><code class="bd-w_1px bd-c_rgba(0,_0,_0,_0.04) dark:bd-c_rgba(255,_255,_255,_0.1) bg_rgba(0,_0,_0,_0.03) dark:bg_rgba(255,_255,_255,_0.1) ov-wrap_break-word ff_mono bdr_md py_0.5 px_0.25em fs_0.9em" dir="ltr" style="margin: 0px; padding: 0px; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: rgba(255, 255, 255, 0.1); --font-mono-fallback: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New"; font-feature-settings: "rlig", "calt", "ss01"; font-variation-settings: normal; font-family: var(--fonts-mono); font-size: 0.9em; --blur: ; --brightness: ; --contrast: ; --grayscale: ; --hue-rotate: ; --invert: ; --saturate: ; --sepia: ; --drop-shadow: ; --backdrop-blur: ; --backdrop-brightness: ; --backdrop-contrast: ; --backdrop-grayscale: ; --backdrop-hue-rotate: ; --backdrop-invert: ; --backdrop-opacity: ; --backdrop-saturate: ; --backdrop-sepia: ; --gradient-from-position: ; --gradient-to-position: ; --gradient-via-position: ; --scroll-snap-strictness: proximity; --border-spacing-x: 0; --border-spacing-y: 0; --translate-x: 0; --translate-y: 0; --rotate: 0; --rotate-x: 0; --rotate-y: 0; --skew-x: 0; --skew-y: 0; --scale-x: 1; --scale-y: 1; -webkit-box-decoration-break: clone; overflow-wrap: break-word; border-radius: var(--radii-md); background: rgba(255, 255, 255, 0.1); padding-block: var(--spacing-0.5); padding-inline: 0.25em;">RecipeVariantProps</code><span> </span>type utility that can be used to infer the variant properties of a recipe.</p>
How do I get HTML that more closely resembles the original HTML?
I could sanitize HTML to remove style= attribute, but then the HTML itself is not accurate representation of what was copied (notice the added spans).
(same HTML with style removed)
<p class="mt_6 first:mt_0 lh_1.75rem">Panda provides a<span> </span><code class="bd-w_1px bd-c_rgba(0,_0,_0,_0.04) dark:bd-c_rgba(255,_255,_255,_0.1) bg_rgba(0,_0,_0,_0.03) dark:bg_rgba(255,_255,_255,_0.1) ov-wrap_break-word ff_mono bdr_md py_0.5 px_0.25em fs_0.9em" dir="ltr">RecipeVariantProps</code><span> </span>type utility that can be used to infer the variant properties of a recipe.</p>