@kontakto/email-template-editor 2.2.0 → 2.2.2

package/dist/index.cjs

@@ -151,6 +151,13 @@ ${body}</tbody>
     }
     return `<a href="${href}" title="${title}" target="_blank">${text}</a>`;
   }
+  // Give paragraphs an explicit bottom margin that matches a blank line in the
+  // raw source. Without this, click-to-edit swaps the rendered div (flattened
+  // by ambient CSS) for a textarea whose blank lines take a full line-height,
+  // causing a visible layout jump.
+  paragraph(text) {
+    return `<p style="margin:0 0 1em 0">${text}</p>`;
+  }
 };
 function renderMarkdownString(str) {
   const html2 = marked.marked.parse(str, {
@@ -6521,11 +6528,20 @@ function HeadingEditor({ style, props }) {
   const handleTextChange = (e) => {
     commitText(e.target.value);
   };
+  const displayRef = React58.useRef(null);
+  const lastDisplayHeightRef = React58.useRef(0);
+  React58.useLayoutEffect(() => {
+    if (!isSelected && displayRef.current) {
+      const h = displayRef.current.offsetHeight;
+      if (h > 0) lastDisplayHeightRef.current = h;
+    }
+  }, [isSelected, textContent, isMarkdown, level]);
   const adjustTextareaHeight = (element) => {
-    if (element) {
-      element.style.height = "auto";
-      element.style.height = `${element.scrollHeight}px`;
-    }
+    if (!element) return;
+    element.style.height = "auto";
+    const scrollH = element.scrollHeight;
+    const floor = lastDisplayHeightRef.current;
+    element.style.height = `${Math.max(scrollH, floor)}px`;
   };
   const { textareaRef, trackFocus, handleKeyDown, toolbarProps } = useMarkdownToolbar({
     text: localText,
@@ -6540,9 +6556,9 @@ function HeadingEditor({ style, props }) {
       });
     }
   });
-  React58.useEffect(() => {
+  React58.useLayoutEffect(() => {
     if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
-  }, [localText, textareaRef]);
+  }, [localText, isSelected]);
   if (isSelected) {
     return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
       "textarea",
@@ -6564,7 +6580,11 @@ function HeadingEditor({ style, props }) {
       }
     ), /* @__PURE__ */ React58__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
   }
-  const headingProps = isMarkdown ? { style: hStyle, dangerouslySetInnerHTML: { __html: renderInlineMarkdownString(textContent) } } : { style: hStyle, children: textContent };
+  const headingProps = isMarkdown ? {
+    ref: displayRef,
+    style: hStyle,
+    dangerouslySetInnerHTML: { __html: renderInlineMarkdownString(textContent) }
+  } : { ref: displayRef, style: hStyle, children: textContent };
   switch (level) {
     case "h1":
       return /* @__PURE__ */ React58__default.default.createElement("h1", __spreadValues({}, headingProps));
@@ -6996,11 +7016,20 @@ function TextEditor({ style, props }) {
   const handleTextChange = (e) => {
     commitText(e.target.value);
   };
+  const displayRef = React58.useRef(null);
+  const lastDisplayHeightRef = React58.useRef(0);
+  React58.useLayoutEffect(() => {
+    if (!isSelected && displayRef.current) {
+      const h = displayRef.current.offsetHeight;
+      if (h > 0) lastDisplayHeightRef.current = h;
+    }
+  }, [isSelected, textContent, isMarkdown]);
   const adjustTextareaHeight = (element) => {
-    if (element) {
-      element.style.height = "auto";
-      element.style.height = `${element.scrollHeight}px`;
-    }
+    if (!element) return;
+    element.style.height = "auto";
+    const scrollH = element.scrollHeight;
+    const floor = lastDisplayHeightRef.current;
+    element.style.height = `${Math.max(scrollH, floor)}px`;
   };
   const { textareaRef, trackFocus, handleKeyDown, toolbarProps } = useMarkdownToolbar({
     text: localText,
@@ -7015,9 +7044,9 @@ function TextEditor({ style, props }) {
       });
     }
   });
-  React58.useEffect(() => {
+  React58.useLayoutEffect(() => {
     if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
-  }, [localText, textareaRef]);
+  }, [localText, isSelected]);
   if (isSelected) {
     return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
       "textarea",
@@ -7040,9 +7069,16 @@ function TextEditor({ style, props }) {
     ), /* @__PURE__ */ React58__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
   }
   if (isMarkdown) {
-    return /* @__PURE__ */ React58__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
+    return /* @__PURE__ */ React58__default.default.createElement(
+      "div",
+      {
+        ref: displayRef,
+        style: wStyle,
+        dangerouslySetInnerHTML: { __html: renderMarkdownString(textContent) }
+      }
+    );
   }
-  return /* @__PURE__ */ React58__default.default.createElement("div", { style: wStyle }, textContent);
+  return /* @__PURE__ */ React58__default.default.createElement("div", { ref: displayRef, style: wStyle }, textContent);
 }
 
 // src/editor/core.tsx