@kontakto/email-template-editor 2.1.0 → 2.2.0

package/dist/index.cjs

@@ -166,6 +166,20 @@ function renderMarkdownString(str) {
   }
   return sanitizer(html2);
 }
+function renderInlineMarkdownString(str) {
+  const html2 = marked.marked.parseInline(str, {
+    async: false,
+    breaks: true,
+    gfm: true,
+    pedantic: false,
+    silent: false,
+    renderer: new CustomRenderer()
+  });
+  if (typeof html2 !== "string") {
+    throw new Error("marked.parseInline did not return a string");
+  }
+  return sanitizer(html2);
+}
 function EmailMarkdown(_a) {
   var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
   const data = React58.useMemo(() => renderMarkdownString(markdown), [markdown]);
@@ -691,7 +705,8 @@ function getFontFamily3(fontFamily) {
 var HeadingPropsSchema = zod.z.object({
   props: zod.z.object({
     text: zod.z.string().optional().nullable(),
-    level: zod.z.enum(["h1", "h2", "h3"]).optional().nullable()
+    level: zod.z.enum(["h1", "h2", "h3"]).optional().nullable(),
+    markdown: zod.z.boolean().optional().nullable()
   }).optional().nullable(),
   style: zod.z.object({
     color: COLOR_SCHEMA6,
@@ -710,28 +725,31 @@ var HeadingPropsDefaults = {
   text: ""
 };
 function Heading({ props, style }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
   const text = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
+  const isMarkdown = (_c = props == null ? void 0 : props.markdown) != null ? _c : false;
   const hStyle = {
-    color: (_c = style == null ? void 0 : style.color) != null ? _c : void 0,
-    backgroundColor: (_d = style == null ? void 0 : style.backgroundColor) != null ? _d : void 0,
-    fontWeight: (_e = style == null ? void 0 : style.fontWeight) != null ? _e : "bold",
-    lineHeight: (_f = style == null ? void 0 : style.lineHeight) != null ? _f : void 0,
+    color: (_d = style == null ? void 0 : style.color) != null ? _d : void 0,
+    backgroundColor: (_e = style == null ? void 0 : style.backgroundColor) != null ? _e : void 0,
+    fontWeight: (_f = style == null ? void 0 : style.fontWeight) != null ? _f : "bold",
+    lineHeight: (_g = style == null ? void 0 : style.lineHeight) != null ? _g : void 0,
     letterSpacing: (style == null ? void 0 : style.letterSpacing) != null ? `${style.letterSpacing}px` : void 0,
-    textAlign: (_g = style == null ? void 0 : style.textAlign) != null ? _g : void 0,
+    textAlign: (_h = style == null ? void 0 : style.textAlign) != null ? _h : void 0,
     margin: 0,
     fontFamily: getFontFamily3(style == null ? void 0 : style.fontFamily),
     fontSize: getFontSize(level),
     padding: getPadding7(style == null ? void 0 : style.padding)
   };
+  const html2 = React58.useMemo(() => isMarkdown ? renderInlineMarkdownString(text) : null, [isMarkdown, text]);
+  const renderProps = isMarkdown ? { style: hStyle, dangerouslySetInnerHTML: { __html: html2 != null ? html2 : "" } } : { style: hStyle, children: text };
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React58__default.default.createElement("h1", { style: hStyle }, text);
+      return /* @__PURE__ */ React58__default.default.createElement("h1", __spreadValues({}, renderProps));
     case "h2":
-      return /* @__PURE__ */ React58__default.default.createElement("h2", { style: hStyle }, text);
+      return /* @__PURE__ */ React58__default.default.createElement("h2", __spreadValues({}, renderProps));
     case "h3":
-      return /* @__PURE__ */ React58__default.default.createElement("h3", { style: hStyle }, text);
+      return /* @__PURE__ */ React58__default.default.createElement("h3", __spreadValues({}, renderProps));
   }
 }
 function getFontSize(level) {
@@ -2504,59 +2522,46 @@ function FontWeightInput({ label, defaultValue, onChange }) {
   );
 }
 function LetterSpacingInput({ label, defaultValue, onChange }) {
-  const handleChange = (ev) => {
-    const raw = ev.target.value.trim();
-    if (raw === "") {
-      onChange(null);
-      return;
-    }
-    const value = parseFloat(raw);
-    onChange(isNaN(value) ? null : value);
+  const [value, setValue] = React58.useState(defaultValue != null ? defaultValue : 0);
+  React58.useEffect(() => {
+    setValue(defaultValue != null ? defaultValue : 0);
+  }, [defaultValue]);
+  const handleChange = (v) => {
+    setValue(v);
+    onChange(v === 0 ? null : v);
   };
-  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58__default.default.createElement(
-    material.TextField,
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React58__default.default.createElement(
+    RawSliderInput,
     {
-      fullWidth: true,
-      onChange: handleChange,
-      defaultValue: defaultValue != null ? defaultValue : "",
-      label,
-      variant: "standard",
-      placeholder: "normal",
-      size: "small",
-      type: "number",
-      inputProps: { step: 0.5 },
-      InputProps: {
-        startAdornment: /* @__PURE__ */ React58__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { fontSize: 16 } })),
-        endAdornment: /* @__PURE__ */ React58__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
-      }
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { fontSize: 16 } }),
+      value,
+      setValue: handleChange,
+      units: "px",
+      step: 0.1,
+      min: 0,
+      max: 2
     }
   ));
 }
 function LineHeightInput({ label, defaultValue, onChange }) {
-  const handleChange = (ev) => {
-    const raw = ev.target.value.trim();
-    if (raw === "") {
-      onChange(null);
-      return;
-    }
-    const value = parseFloat(raw);
-    onChange(isNaN(value) ? null : value);
+  const [value, setValue] = React58.useState(defaultValue != null ? defaultValue : 0);
+  React58.useEffect(() => {
+    setValue(defaultValue != null ? defaultValue : 0);
+  }, [defaultValue]);
+  const handleChange = (v) => {
+    setValue(v);
+    onChange(v === 0 ? null : v);
   };
-  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58__default.default.createElement(
-    material.TextField,
+  return /* @__PURE__ */ React58__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React58__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React58__default.default.createElement(
+    RawSliderInput,
     {
-      fullWidth: true,
-      onChange: handleChange,
-      defaultValue: defaultValue != null ? defaultValue : "",
-      label,
-      variant: "standard",
-      placeholder: "default",
-      size: "small",
-      type: "number",
-      inputProps: { step: 0.1 },
-      InputProps: {
-        startAdornment: /* @__PURE__ */ React58__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FormatLineSpacingOutlined, { sx: { fontSize: 16 } }))
-      }
+      iconLabel: /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FormatLineSpacingOutlined, { sx: { fontSize: 16 } }),
+      value,
+      setValue: handleChange,
+      units: "",
+      step: 0.1,
+      min: 0,
+      max: 2
     }
   ));
 }
@@ -6229,6 +6234,174 @@ function ButtonEditor({ style, props }) {
   }
   return /* @__PURE__ */ React58__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React58__default.default.createElement("span", { style: linkStyle }, /* @__PURE__ */ React58__default.default.createElement("span", null, text)));
 }
+function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
+  const textareaRef = React58.useRef(null);
+  const [selection, setSelection] = React58.useState({ start: 0, end: 0 });
+  const [linkPrompt, setLinkPrompt] = React58.useState(false);
+  const pendingSelectionRef = React58.useRef(null);
+  const textRef = React58.useRef(text);
+  React58.useEffect(() => {
+    textRef.current = text;
+  }, [text]);
+  const syncSelection = React58.useCallback(
+    (start, end) => {
+      const next = { start, end };
+      setSelection(next);
+      trackSelection == null ? void 0 : trackSelection(next);
+    },
+    [trackSelection]
+  );
+  const trackFocus = React58.useCallback(
+    (e) => {
+      var _a, _b;
+      const el = e.currentTarget;
+      const start = (_a = el.selectionStart) != null ? _a : el.value.length;
+      const end = (_b = el.selectionEnd) != null ? _b : el.value.length;
+      syncSelection(start, end);
+    },
+    [syncSelection]
+  );
+  React58.useEffect(() => {
+    const target = pendingSelectionRef.current;
+    if (!target) return;
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.focus();
+    ta.setSelectionRange(target.start, target.end);
+    syncSelection(target.start, target.end);
+    pendingSelectionRef.current = null;
+  }, [text, syncSelection]);
+  React58.useEffect(() => {
+    if (!isSelected || selection.start === selection.end) {
+      setLinkPrompt(false);
+    }
+  }, [isSelected, selection.start, selection.end]);
+  const wrapSelection = (prefix, suffix) => {
+    var _a, _b;
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const start = (_a = ta.selectionStart) != null ? _a : selection.start;
+    const end = (_b = ta.selectionEnd) != null ? _b : selection.end;
+    if (start === end) return;
+    const current = textRef.current;
+    const selected = current.slice(start, end);
+    const before = current.slice(0, start);
+    const after = current.slice(end);
+    const wrapped = `${prefix}${selected}${suffix}`;
+    const newText = `${before}${wrapped}${after}`;
+    const newStart = start + prefix.length;
+    const newEnd = newStart + selected.length;
+    pendingSelectionRef.current = { start: newStart, end: newEnd };
+    commitText(newText);
+  };
+  const handleBold = () => wrapSelection("**", "**");
+  const handleItalic = () => wrapSelection("*", "*");
+  const handleLinkRequest = () => {
+    if (selection.start === selection.end) return;
+    setLinkPrompt(true);
+  };
+  const handleLinkSubmit = (url) => {
+    const start = selection.start;
+    const end = selection.end;
+    if (start === end) {
+      setLinkPrompt(false);
+      return;
+    }
+    const current = textRef.current;
+    const selected = current.slice(start, end);
+    const before = current.slice(0, start);
+    const after = current.slice(end);
+    const wrapped = `[${selected}](${url})`;
+    const newText = `${before}${wrapped}${after}`;
+    const newStart = start + wrapped.length;
+    pendingSelectionRef.current = { start: newStart, end: newStart };
+    commitText(newText);
+    setLinkPrompt(false);
+  };
+  const handleLinkCancel = () => {
+    var _a;
+    setLinkPrompt(false);
+    (_a = textareaRef.current) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (e) => {
+    if (!(e.metaKey || e.ctrlKey)) return;
+    const key = e.key.toLowerCase();
+    if (key === "b") {
+      e.preventDefault();
+      handleBold();
+    } else if (key === "i") {
+      e.preventDefault();
+      handleItalic();
+    } else if (key === "k") {
+      e.preventDefault();
+      handleLinkRequest();
+    }
+  };
+  const toolbarVisible = isSelected && (selection.start !== selection.end || linkPrompt);
+  return {
+    textareaRef,
+    selection,
+    trackFocus,
+    handleKeyDown,
+    toolbarProps: {
+      visible: toolbarVisible,
+      linkPrompt,
+      onBold: handleBold,
+      onItalic: handleItalic,
+      onLinkRequest: handleLinkRequest,
+      onLinkSubmit: handleLinkSubmit,
+      onLinkCancel: handleLinkCancel
+    }
+  };
+}
+function InlineFormattingToolbar({
+  anchorEl,
+  visible,
+  linkPrompt,
+  onBold,
+  onItalic,
+  onLinkRequest,
+  onLinkSubmit,
+  onLinkCancel
+}) {
+  const [url, setUrl] = React58.useState("");
+  const inputRef = React58.useRef(null);
+  React58.useEffect(() => {
+    if (linkPrompt) {
+      setUrl("");
+      setTimeout(() => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.focus();
+      }, 0);
+    }
+  }, [linkPrompt]);
+  const preventBlur = (e) => e.preventDefault();
+  return /* @__PURE__ */ React58__default.default.createElement(material.Popper, { open: visible, anchorEl, placement: "top-start", style: { zIndex: 1300 } }, /* @__PURE__ */ React58__default.default.createElement(material.Paper, { elevation: 4, sx: { px: 0.5, py: 0.25, mb: 0.5 }, onMouseDown: preventBlur }, linkPrompt ? /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5 } }, /* @__PURE__ */ React58__default.default.createElement(
+    material.TextField,
+    {
+      inputRef,
+      value: url,
+      onChange: (e) => setUrl(e.target.value),
+      placeholder: "https://example.com",
+      variant: "standard",
+      size: "small",
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          const trimmed = url.trim();
+          if (trimmed) onLinkSubmit(trimmed);
+          else onLinkCancel();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          onLinkCancel();
+        }
+      },
+      sx: { width: 220 }
+    }
+  )) : /* @__PURE__ */ React58__default.default.createElement(material.Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React58__default.default.createElement(material.IconButton, { size: "small", onClick: onBold, title: "Bold (Cmd+B)", "aria-label": "Bold" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React58__default.default.createElement(material.IconButton, { size: "small", onClick: onItalic, title: "Italic (Cmd+I)", "aria-label": "Italic" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React58__default.default.createElement(material.IconButton, { size: "small", onClick: onLinkRequest, title: "Link (Cmd+K)", "aria-label": "Link" }, /* @__PURE__ */ React58__default.default.createElement(iconsMaterial.LinkOutlined, { fontSize: "small" })))));
+}
+
+// src/editor/blocks/heading/heading-editor.tsx
 function getFontFamily9(fontFamily) {
   switch (fontFamily) {
     case "MODERN_SANS":
@@ -6291,7 +6464,7 @@ function getFontSize2(level) {
   }
 }
 function HeadingEditor({ style, props }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const blockId = useCurrentBlockId();
   const selectedBlockId = useSelectedBlockId();
   const document2 = useDocument();
@@ -6299,6 +6472,7 @@ function HeadingEditor({ style, props }) {
   const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
   const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
   const [localText, setLocalText] = React58.useState(textContent);
+  const isMarkdown = (_c = props == null ? void 0 : props.markdown) != null ? _c : false;
   const rootBlock = document2.root;
   const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
   React58.useEffect(() => {
@@ -6306,12 +6480,12 @@ function HeadingEditor({ style, props }) {
   }, [textContent]);
   const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
   const hStyle = {
-    color: (_c = style == null ? void 0 : style.color) != null ? _c : void 0,
-    backgroundColor: (_d = style == null ? void 0 : style.backgroundColor) != null ? _d : void 0,
-    fontWeight: (_e = style == null ? void 0 : style.fontWeight) != null ? _e : "bold",
-    lineHeight: (_f = style == null ? void 0 : style.lineHeight) != null ? _f : void 0,
+    color: (_d = style == null ? void 0 : style.color) != null ? _d : void 0,
+    backgroundColor: (_e = style == null ? void 0 : style.backgroundColor) != null ? _e : void 0,
+    fontWeight: (_f = style == null ? void 0 : style.fontWeight) != null ? _f : "bold",
+    lineHeight: (_g = style == null ? void 0 : style.lineHeight) != null ? _g : void 0,
     letterSpacing: (style == null ? void 0 : style.letterSpacing) != null ? `${style.letterSpacing}px` : void 0,
-    textAlign: (_g = style == null ? void 0 : style.textAlign) != null ? _g : void 0,
+    textAlign: (_h = style == null ? void 0 : style.textAlign) != null ? _h : void 0,
     margin: 0,
     fontFamily,
     fontSize: getFontSize2(level),
@@ -6325,69 +6499,79 @@ function HeadingEditor({ style, props }) {
     resize: "none",
     backgroundColor: "transparent",
     overflow: "hidden",
-    lineHeight: (_h = hStyle.lineHeight) != null ? _h : "inherit",
+    lineHeight: (_i = hStyle.lineHeight) != null ? _i : "inherit",
     margin: 0,
     display: "block",
     width: "100%"
   });
-  const handleTextChange = (e) => {
-    const newText = e.target.value;
+  const commitText = (newText, opts) => {
     setLocalText(newText);
     setDocument({
       [blockId]: {
         type: "Heading",
         data: {
           style,
-          props: __spreadProps(__spreadValues({}, props), {
+          props: __spreadValues(__spreadProps(__spreadValues({}, props), {
             text: newText
-          })
+          }), (opts == null ? void 0 : opts.enableMarkdown) ? { markdown: true } : {})
         }
       }
     });
   };
+  const handleTextChange = (e) => {
+    commitText(e.target.value);
+  };
   const adjustTextareaHeight = (element) => {
     if (element) {
       element.style.height = "auto";
       element.style.height = `${element.scrollHeight}px`;
     }
   };
-  const trackFocus = (e) => {
-    var _a2, _b2;
-    const el = e.currentTarget;
-    setLastFocusedEditable({
-      blockId,
-      field: "text",
-      selectionStart: (_a2 = el.selectionStart) != null ? _a2 : el.value.length,
-      selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
-    });
-  };
+  const { textareaRef, trackFocus, handleKeyDown, toolbarProps } = useMarkdownToolbar({
+    text: localText,
+    isSelected,
+    commitText: (newText) => commitText(newText, { enableMarkdown: true }),
+    trackSelection: (sel) => {
+      setLastFocusedEditable({
+        blockId,
+        field: "text",
+        selectionStart: sel.start,
+        selectionEnd: sel.end
+      });
+    }
+  });
+  React58.useEffect(() => {
+    if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
+  }, [localText, textareaRef]);
   if (isSelected) {
-    return /* @__PURE__ */ React58__default.default.createElement(
+    return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
       "textarea",
       {
+        ref: textareaRef,
         value: localText,
         onChange: handleTextChange,
         onFocus: trackFocus,
         onSelect: trackFocus,
         onKeyUp: trackFocus,
+        onKeyDown: handleKeyDown,
         onClick: (e) => {
           e.stopPropagation();
           trackFocus(e);
         },
         style: textareaStyle,
         rows: 1,
-        onInput: (e) => adjustTextareaHeight(e.target),
-        ref: (el) => el && adjustTextareaHeight(el)
+        onInput: (e) => adjustTextareaHeight(e.target)
       }
-    );
+    ), /* @__PURE__ */ React58__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
   }
+  const headingProps = isMarkdown ? { style: hStyle, dangerouslySetInnerHTML: { __html: renderInlineMarkdownString(textContent) } } : { style: hStyle, children: textContent };
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React58__default.default.createElement("h1", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React58__default.default.createElement("h1", __spreadValues({}, headingProps));
     case "h2":
-      return /* @__PURE__ */ React58__default.default.createElement("h2", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React58__default.default.createElement("h2", __spreadValues({}, headingProps));
     case "h3":
-      return /* @__PURE__ */ React58__default.default.createElement("h3", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React58__default.default.createElement("h3", __spreadValues({}, headingProps));
   }
 }
 function HtmlEditor({ style, props }) {
@@ -6795,56 +6979,65 @@ function TextEditor({ style, props }) {
     fontWeight: wStyle.fontWeight,
     textAlign: wStyle.textAlign
   });
-  const handleTextChange = (e) => {
-    const newText = e.target.value;
+  const commitText = (newText, opts) => {
     setLocalText(newText);
     setDocument({
       [blockId]: {
         type: "Text",
         data: {
           style,
-          props: __spreadProps(__spreadValues({}, props), {
+          props: __spreadValues(__spreadProps(__spreadValues({}, props), {
             text: newText
-          })
+          }), (opts == null ? void 0 : opts.enableMarkdown) ? { markdown: true } : {})
         }
       }
     });
   };
+  const handleTextChange = (e) => {
+    commitText(e.target.value);
+  };
   const adjustTextareaHeight = (element) => {
     if (element) {
       element.style.height = "auto";
       element.style.height = `${element.scrollHeight}px`;
     }
   };
-  const trackFocus = (e) => {
-    var _a2, _b2;
-    const el = e.currentTarget;
-    setLastFocusedEditable({
-      blockId,
-      field: "text",
-      selectionStart: (_a2 = el.selectionStart) != null ? _a2 : el.value.length,
-      selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
-    });
-  };
+  const { textareaRef, trackFocus, handleKeyDown, toolbarProps } = useMarkdownToolbar({
+    text: localText,
+    isSelected,
+    commitText: (newText) => commitText(newText, { enableMarkdown: true }),
+    trackSelection: (sel) => {
+      setLastFocusedEditable({
+        blockId,
+        field: "text",
+        selectionStart: sel.start,
+        selectionEnd: sel.end
+      });
+    }
+  });
+  React58.useEffect(() => {
+    if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
+  }, [localText, textareaRef]);
   if (isSelected) {
-    return /* @__PURE__ */ React58__default.default.createElement(
+    return /* @__PURE__ */ React58__default.default.createElement(React58__default.default.Fragment, null, /* @__PURE__ */ React58__default.default.createElement(
       "textarea",
       {
+        ref: textareaRef,
         value: localText,
         onChange: handleTextChange,
         onFocus: trackFocus,
         onSelect: trackFocus,
         onKeyUp: trackFocus,
+        onKeyDown: handleKeyDown,
         onClick: (e) => {
           e.stopPropagation();
           trackFocus(e);
         },
         style: textareaStyle,
         rows: 1,
-        onInput: (e) => adjustTextareaHeight(e.target),
-        ref: (el) => el && adjustTextareaHeight(el)
+        onInput: (e) => adjustTextareaHeight(e.target)
       }
-    );
+    ), /* @__PURE__ */ React58__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
   }
   if (isMarkdown) {
     return /* @__PURE__ */ React58__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });