@kontakto/email-template-editor 2.10.0 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -7494,8 +7494,12 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
7494
7494
  var _a, _b;
7495
7495
  const ta = textareaRef.current;
7496
7496
  if (!ta) return;
7497
- const start = (_a = ta.selectionStart) != null ? _a : selection.start;
7498
- const end = (_b = ta.selectionEnd) != null ? _b : selection.end;
7497
+ let start = (_a = ta.selectionStart) != null ? _a : selection.start;
7498
+ let end = (_b = ta.selectionEnd) != null ? _b : selection.end;
7499
+ if (start === end) {
7500
+ start = selection.start;
7501
+ end = selection.end;
7502
+ }
7499
7503
  if (start === end) return;
7500
7504
  const current = textRef.current;
7501
7505
  const selected = current.slice(start, end);
@@ -7640,6 +7644,7 @@ function InlineFormattingToolbar({
7640
7644
  const [color, setColor] = useState("#000000");
7641
7645
  const [font, setFont] = useState(FONT_OPTIONS[0].value);
7642
7646
  const urlRef = useRef(null);
7647
+ const colorRef = useRef(null);
7643
7648
  useEffect(() => {
7644
7649
  if (activePrompt === "link") {
7645
7650
  setUrl("");
@@ -7649,6 +7654,10 @@ function InlineFormattingToolbar({
7649
7654
  }, 0);
7650
7655
  } else if (activePrompt === "color") {
7651
7656
  setColor("#000000");
7657
+ setTimeout(() => {
7658
+ var _a;
7659
+ return (_a = colorRef.current) == null ? void 0 : _a.click();
7660
+ }, 0);
7652
7661
  } else if (activePrompt === "font") {
7653
7662
  setFont(FONT_OPTIONS[0].value);
7654
7663
  }
@@ -7679,22 +7688,31 @@ function InlineFormattingToolbar({
7679
7688
  )) : activePrompt === "color" ? /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5, py: 0.25 } }, /* @__PURE__ */ React62.createElement(
7680
7689
  "input",
7681
7690
  {
7691
+ ref: colorRef,
7682
7692
  type: "color",
7683
7693
  value: color,
7684
- onChange: (e) => setColor(e.target.value),
7694
+ onChange: (e) => {
7695
+ const v = e.target.value;
7696
+ setColor(v);
7697
+ onColorSubmit(v);
7698
+ },
7685
7699
  style: { width: 40, height: 28, border: "none", padding: 0, background: "transparent", cursor: "pointer" }
7686
7700
  }
7687
- ), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: () => onColorSubmit(color), title: t("toolbar.apply", "Apply") }, /* @__PURE__ */ React62.createElement(FormatColorTextOutlined, { fontSize: "small" }))) : activePrompt === "font" ? /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5, py: 0.25 } }, /* @__PURE__ */ React62.createElement(
7701
+ ), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onPromptCancel, title: t("common.cancel", "Cancel") }, /* @__PURE__ */ React62.createElement(FormatColorTextOutlined, { fontSize: "small" }))) : activePrompt === "font" ? /* @__PURE__ */ React62.createElement(Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5, py: 0.25 } }, /* @__PURE__ */ React62.createElement(
7688
7702
  Select,
7689
7703
  {
7690
7704
  value: font,
7691
- onChange: (e) => setFont(e.target.value),
7705
+ onChange: (e) => {
7706
+ const v = e.target.value;
7707
+ setFont(v);
7708
+ onFontSubmit(v);
7709
+ },
7692
7710
  size: "small",
7693
7711
  variant: "standard",
7694
7712
  sx: { minWidth: 180, fontSize: 13 }
7695
7713
  },
7696
7714
  FONT_OPTIONS.map((opt) => /* @__PURE__ */ React62.createElement(MenuItem, { key: opt.value, value: opt.value, sx: { fontFamily: opt.value } }, opt.label))
7697
- ), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: () => onFontSubmit(font), title: t("toolbar.apply", "Apply") }, /* @__PURE__ */ React62.createElement(TextFieldsOutlined, { fontSize: "small" }))) : /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onBold, title: t("toolbar.bold-shortcut", "Bold (Cmd+B)"), "aria-label": t("toolbar.bold", "Bold") }, /* @__PURE__ */ React62.createElement(FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onItalic, title: t("toolbar.italic-shortcut", "Italic (Cmd+I)"), "aria-label": t("toolbar.italic", "Italic") }, /* @__PURE__ */ React62.createElement(FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onUnderline, title: t("toolbar.underline-shortcut", "Underline (Cmd+U)"), "aria-label": t("toolbar.underline", "Underline") }, /* @__PURE__ */ React62.createElement(FormatUnderlinedOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onOverline, title: t("toolbar.overline", "Overline"), "aria-label": t("toolbar.overline", "Overline") }, /* @__PURE__ */ React62.createElement(FormatOverlineOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onColorRequest, title: t("toolbar.text-color", "Text color"), "aria-label": t("toolbar.text-color", "Text color") }, /* @__PURE__ */ React62.createElement(FormatColorTextOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onFontRequest, title: t("toolbar.font-family", "Font family"), "aria-label": t("toolbar.font-family", "Font family") }, /* @__PURE__ */ React62.createElement(TextFieldsOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onLinkRequest, title: t("toolbar.link-shortcut", "Link (Cmd+K)"), "aria-label": t("toolbar.link", "Link") }, /* @__PURE__ */ React62.createElement(LinkOutlined, { fontSize: "small" })))));
7715
+ ), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onPromptCancel, title: t("common.cancel", "Cancel") }, /* @__PURE__ */ React62.createElement(TextFieldsOutlined, { fontSize: "small" }))) : /* @__PURE__ */ React62.createElement(Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onBold, title: t("toolbar.bold-shortcut", "Bold (Cmd+B)"), "aria-label": t("toolbar.bold", "Bold") }, /* @__PURE__ */ React62.createElement(FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onItalic, title: t("toolbar.italic-shortcut", "Italic (Cmd+I)"), "aria-label": t("toolbar.italic", "Italic") }, /* @__PURE__ */ React62.createElement(FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onUnderline, title: t("toolbar.underline-shortcut", "Underline (Cmd+U)"), "aria-label": t("toolbar.underline", "Underline") }, /* @__PURE__ */ React62.createElement(FormatUnderlinedOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onOverline, title: t("toolbar.overline", "Overline"), "aria-label": t("toolbar.overline", "Overline") }, /* @__PURE__ */ React62.createElement(FormatOverlineOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onColorRequest, title: t("toolbar.text-color", "Text color"), "aria-label": t("toolbar.text-color", "Text color") }, /* @__PURE__ */ React62.createElement(FormatColorTextOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onFontRequest, title: t("toolbar.font-family", "Font family"), "aria-label": t("toolbar.font-family", "Font family") }, /* @__PURE__ */ React62.createElement(TextFieldsOutlined, { fontSize: "small" })), /* @__PURE__ */ React62.createElement(IconButton, { size: "small", onClick: onLinkRequest, title: t("toolbar.link-shortcut", "Link (Cmd+K)"), "aria-label": t("toolbar.link", "Link") }, /* @__PURE__ */ React62.createElement(LinkOutlined, { fontSize: "small" })))));
7698
7716
  }
7699
7717
 
7700
7718
  // src/editor/blocks/heading/heading-editor.tsx