@kontakto/email-template-editor 2.2.0 → 2.2.2

package/dist/index.js

@@ -1,6 +1,6 @@
 import DOMPurify from 'dompurify';
 import { marked, Renderer } from 'marked';
-import React58, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, useContext, useState, useCallback, Fragment } from 'react';
+import React58, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, useContext, useState, useCallback, useLayoutEffect, Fragment } from 'react';
 import { z } from 'zod';
 import { renderToStaticMarkup as renderToStaticMarkup$1 } from 'react-dom/server';
 import { createTheme, alpha, lighten, darken } from '@mui/material/styles';
@@ -141,6 +141,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.parse(str, {
@@ -6511,11 +6518,20 @@ function HeadingEditor({ style, props }) {
   const handleTextChange = (e) => {
     commitText(e.target.value);
   };
+  const displayRef = useRef(null);
+  const lastDisplayHeightRef = useRef(0);
+  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,
@@ -6530,9 +6546,9 @@ function HeadingEditor({ style, props }) {
       });
     }
   });
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
-  }, [localText, textareaRef]);
+  }, [localText, isSelected]);
   if (isSelected) {
     return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
       "textarea",
@@ -6554,7 +6570,11 @@ function HeadingEditor({ style, props }) {
       }
     ), /* @__PURE__ */ React58.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.createElement("h1", __spreadValues({}, headingProps));
@@ -6986,11 +7006,20 @@ function TextEditor({ style, props }) {
   const handleTextChange = (e) => {
     commitText(e.target.value);
   };
+  const displayRef = useRef(null);
+  const lastDisplayHeightRef = useRef(0);
+  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,
@@ -7005,9 +7034,9 @@ function TextEditor({ style, props }) {
       });
     }
   });
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
-  }, [localText, textareaRef]);
+  }, [localText, isSelected]);
   if (isSelected) {
     return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(
       "textarea",
@@ -7030,9 +7059,16 @@ function TextEditor({ style, props }) {
     ), /* @__PURE__ */ React58.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
   }
   if (isMarkdown) {
-    return /* @__PURE__ */ React58.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
+    return /* @__PURE__ */ React58.createElement(
+      "div",
+      {
+        ref: displayRef,
+        style: wStyle,
+        dangerouslySetInnerHTML: { __html: renderMarkdownString(textContent) }
+      }
+    );
   }
-  return /* @__PURE__ */ React58.createElement("div", { style: wStyle }, textContent);
+  return /* @__PURE__ */ React58.createElement("div", { ref: displayRef, style: wStyle }, textContent);
 }
 
 // src/editor/core.tsx