@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.cjs CHANGED
@@ -7505,8 +7505,12 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
7505
7505
  var _a, _b;
7506
7506
  const ta = textareaRef.current;
7507
7507
  if (!ta) return;
7508
- const start = (_a = ta.selectionStart) != null ? _a : selection.start;
7509
- const end = (_b = ta.selectionEnd) != null ? _b : selection.end;
7508
+ let start = (_a = ta.selectionStart) != null ? _a : selection.start;
7509
+ let end = (_b = ta.selectionEnd) != null ? _b : selection.end;
7510
+ if (start === end) {
7511
+ start = selection.start;
7512
+ end = selection.end;
7513
+ }
7510
7514
  if (start === end) return;
7511
7515
  const current = textRef.current;
7512
7516
  const selected = current.slice(start, end);
@@ -7651,6 +7655,7 @@ function InlineFormattingToolbar({
7651
7655
  const [color, setColor] = React62.useState("#000000");
7652
7656
  const [font, setFont] = React62.useState(FONT_OPTIONS[0].value);
7653
7657
  const urlRef = React62.useRef(null);
7658
+ const colorRef = React62.useRef(null);
7654
7659
  React62.useEffect(() => {
7655
7660
  if (activePrompt === "link") {
7656
7661
  setUrl("");
@@ -7660,6 +7665,10 @@ function InlineFormattingToolbar({
7660
7665
  }, 0);
7661
7666
  } else if (activePrompt === "color") {
7662
7667
  setColor("#000000");
7668
+ setTimeout(() => {
7669
+ var _a;
7670
+ return (_a = colorRef.current) == null ? void 0 : _a.click();
7671
+ }, 0);
7663
7672
  } else if (activePrompt === "font") {
7664
7673
  setFont(FONT_OPTIONS[0].value);
7665
7674
  }
@@ -7690,22 +7699,31 @@ function InlineFormattingToolbar({
7690
7699
  )) : activePrompt === "color" ? /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5, py: 0.25 } }, /* @__PURE__ */ React62__default.default.createElement(
7691
7700
  "input",
7692
7701
  {
7702
+ ref: colorRef,
7693
7703
  type: "color",
7694
7704
  value: color,
7695
- onChange: (e) => setColor(e.target.value),
7705
+ onChange: (e) => {
7706
+ const v = e.target.value;
7707
+ setColor(v);
7708
+ onColorSubmit(v);
7709
+ },
7696
7710
  style: { width: 40, height: 28, border: "none", padding: 0, background: "transparent", cursor: "pointer" }
7697
7711
  }
7698
- ), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: () => onColorSubmit(color), title: t("toolbar.apply", "Apply") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatColorTextOutlined, { fontSize: "small" }))) : activePrompt === "font" ? /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5, py: 0.25 } }, /* @__PURE__ */ React62__default.default.createElement(
7712
+ ), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onPromptCancel, title: t("common.cancel", "Cancel") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatColorTextOutlined, { fontSize: "small" }))) : activePrompt === "font" ? /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5, py: 0.25 } }, /* @__PURE__ */ React62__default.default.createElement(
7699
7713
  material.Select,
7700
7714
  {
7701
7715
  value: font,
7702
- onChange: (e) => setFont(e.target.value),
7716
+ onChange: (e) => {
7717
+ const v = e.target.value;
7718
+ setFont(v);
7719
+ onFontSubmit(v);
7720
+ },
7703
7721
  size: "small",
7704
7722
  variant: "standard",
7705
7723
  sx: { minWidth: 180, fontSize: 13 }
7706
7724
  },
7707
7725
  FONT_OPTIONS.map((opt) => /* @__PURE__ */ React62__default.default.createElement(material.MenuItem, { key: opt.value, value: opt.value, sx: { fontFamily: opt.value } }, opt.label))
7708
- ), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: () => onFontSubmit(font), title: t("toolbar.apply", "Apply") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.TextFieldsOutlined, { fontSize: "small" }))) : /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onBold, title: t("toolbar.bold-shortcut", "Bold (Cmd+B)"), "aria-label": t("toolbar.bold", "Bold") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onItalic, title: t("toolbar.italic-shortcut", "Italic (Cmd+I)"), "aria-label": t("toolbar.italic", "Italic") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onUnderline, title: t("toolbar.underline-shortcut", "Underline (Cmd+U)"), "aria-label": t("toolbar.underline", "Underline") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatUnderlinedOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onOverline, title: t("toolbar.overline", "Overline"), "aria-label": t("toolbar.overline", "Overline") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatOverlineOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onColorRequest, title: t("toolbar.text-color", "Text color"), "aria-label": t("toolbar.text-color", "Text color") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatColorTextOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onFontRequest, title: t("toolbar.font-family", "Font family"), "aria-label": t("toolbar.font-family", "Font family") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.TextFieldsOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onLinkRequest, title: t("toolbar.link-shortcut", "Link (Cmd+K)"), "aria-label": t("toolbar.link", "Link") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.LinkOutlined, { fontSize: "small" })))));
7726
+ ), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onPromptCancel, title: t("common.cancel", "Cancel") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.TextFieldsOutlined, { fontSize: "small" }))) : /* @__PURE__ */ React62__default.default.createElement(material.Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onBold, title: t("toolbar.bold-shortcut", "Bold (Cmd+B)"), "aria-label": t("toolbar.bold", "Bold") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onItalic, title: t("toolbar.italic-shortcut", "Italic (Cmd+I)"), "aria-label": t("toolbar.italic", "Italic") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onUnderline, title: t("toolbar.underline-shortcut", "Underline (Cmd+U)"), "aria-label": t("toolbar.underline", "Underline") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatUnderlinedOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onOverline, title: t("toolbar.overline", "Overline"), "aria-label": t("toolbar.overline", "Overline") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatOverlineOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onColorRequest, title: t("toolbar.text-color", "Text color"), "aria-label": t("toolbar.text-color", "Text color") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.FormatColorTextOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onFontRequest, title: t("toolbar.font-family", "Font family"), "aria-label": t("toolbar.font-family", "Font family") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.TextFieldsOutlined, { fontSize: "small" })), /* @__PURE__ */ React62__default.default.createElement(material.IconButton, { size: "small", onClick: onLinkRequest, title: t("toolbar.link-shortcut", "Link (Cmd+K)"), "aria-label": t("toolbar.link", "Link") }, /* @__PURE__ */ React62__default.default.createElement(iconsMaterial.LinkOutlined, { fontSize: "small" })))));
7709
7727
  }
7710
7728
 
7711
7729
  // src/editor/blocks/heading/heading-editor.tsx