From 6bce5fa5050827552fc4e5a27709444618e9d1c1 Mon Sep 17 00:00:00 2001
From: Julian Hundeloh <5358638+jaulz@users.noreply.github.com>
Date: Wed, 25 Oct 2023 11:17:44 +0200
Subject: [PATCH 1/3] fix: avoid inline styles to ensure CSP compliancy

---
 src/calculateNodeHeight.tsx | 71 ++++++++++++++++++-------------------
 1 file changed, 35 insertions(+), 36 deletions(-)

diff --git a/src/calculateNodeHeight.tsx b/src/calculateNodeHeight.tsx
index f1424cf..09d1537 100644
--- a/src/calculateNodeHeight.tsx
+++ b/src/calculateNodeHeight.tsx
@@ -5,38 +5,38 @@ import type React from 'react';
  * calculateNodeHeight(uiTextNode, useCache = false)
  */
 
-const HIDDEN_TEXTAREA_STYLE = `
-  min-height:0 !important;
-  max-height:none !important;
-  height:0 !important;
-  visibility:hidden !important;
-  overflow:hidden !important;
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important;
-  pointer-events: none !important;
-`;
+const HIDDEN_TEXTAREA_STYLE = {
+  minHeight: '0 !important',
+  maxHeight: 'none !important',
+  height: '0 !important',
+  visibility: 'hidden !important',
+  overflow: 'hidden !important',
+  position: 'absolute !important',
+  zIndex: '-1000 !important',
+  top: '0 !important',
+  right: '0 !important',
+  pointerEvents: 'none !important',
+};
 
 const SIZING_STYLE = [
-  'letter-spacing',
-  'line-height',
-  'padding-top',
-  'padding-bottom',
-  'font-family',
-  'font-weight',
-  'font-size',
-  'font-variant',
-  'text-rendering',
-  'text-transform',
+  'letterSpacing',
+  'lineHeight',
+  'paddingTop',
+  'paddingBottom',
+  'fontFamily',
+  'fontWeight',
+  'fontSize',
+  'fontVariant',
+  'textRendering',
+  'textTransform',
   'width',
-  'text-indent',
-  'padding-left',
-  'padding-right',
-  'border-width',
-  'box-sizing',
-  'word-break',
-  'white-space',
+  'textIndent',
+  'paddingLeft',
+  'paddingRight',
+  'borderWidth',
+  'boxSizing',
+  'wordBreak',
+  'whiteSpace',
 ];
 
 export interface NodeType {
@@ -73,9 +73,9 @@ export function calculateNodeStyling(node: HTMLElement, useCache = false) {
     parseFloat(style.getPropertyValue('border-bottom-width')) +
     parseFloat(style.getPropertyValue('border-top-width'));
 
-  const sizingStyle = SIZING_STYLE.map(
-    (name) => `${name}:${style.getPropertyValue(name)}`,
-  ).join(';');
+  const sizingStyle = Object.fromEntries(SIZING_STYLE.map(
+    (name) => [name, style.getPropertyValue(name.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`))],
+  ));
 
   const nodeInfo: NodeType = {
     sizingStyle,
@@ -123,10 +123,9 @@ export default function calculateAutoSizeStyle(
   // Need to have the overflow attribute to hide the scrollbar otherwise
   // text-lines will not calculated properly as the shadow will technically be
   // narrower for content
-  hiddenTextarea.setAttribute(
-    'style',
-    `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`,
-  );
+  for (const [name, value] of Object.entries({ ...sizingStyle, HIDDEN_TEXTAREA_STYLE })) {
+    hiddenTextarea.style[name] = value
+  }
   hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
 
   let minHeight: number | undefined = undefined;

From c212d4d0f5fd1c072e2704141050daba1b870db8 Mon Sep 17 00:00:00 2001
From: Julian Hundeloh <5358638+jaulz@users.noreply.github.com>
Date: Wed, 25 Oct 2023 11:25:47 +0200
Subject: [PATCH 2/3] fix: add missing rest operator

---
 src/calculateNodeHeight.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/calculateNodeHeight.tsx b/src/calculateNodeHeight.tsx
index 09d1537..18a41f2 100644
--- a/src/calculateNodeHeight.tsx
+++ b/src/calculateNodeHeight.tsx
@@ -123,7 +123,7 @@ export default function calculateAutoSizeStyle(
   // Need to have the overflow attribute to hide the scrollbar otherwise
   // text-lines will not calculated properly as the shadow will technically be
   // narrower for content
-  for (const [name, value] of Object.entries({ ...sizingStyle, HIDDEN_TEXTAREA_STYLE })) {
+  for (const [name, value] of Object.entries({ ...sizingStyle, ...HIDDEN_TEXTAREA_STYLE })) {
     hiddenTextarea.style[name] = value
   }
   hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';

From 67800b780f9edd12f0db4119b9693160594bc517 Mon Sep 17 00:00:00 2001
From: Julian Hundeloh <5358638+jaulz@users.noreply.github.com>
Date: Wed, 25 Oct 2023 11:34:53 +0200
Subject: [PATCH 3/3] style: add missing semicolon

---
 src/calculateNodeHeight.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/calculateNodeHeight.tsx b/src/calculateNodeHeight.tsx
index 18a41f2..ed0fcd4 100644
--- a/src/calculateNodeHeight.tsx
+++ b/src/calculateNodeHeight.tsx
@@ -124,7 +124,7 @@ export default function calculateAutoSizeStyle(
   // text-lines will not calculated properly as the shadow will technically be
   // narrower for content
   for (const [name, value] of Object.entries({ ...sizingStyle, ...HIDDEN_TEXTAREA_STYLE })) {
-    hiddenTextarea.style[name] = value
+    hiddenTextarea.style[name] = value;
   }
   hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';