@keboola/design 3.2.3 → 4.1.1

package/dist/markdown-editor.cjs

@@ -245,7 +245,6 @@ var init_TooltipContent = __esm({
     TooltipContent = ({
       className,
       variant,
-      argo,
       keepOpenOnPointerDownOutside = false,
       children,
       onPointerDownOutside,
@@ -256,7 +255,7 @@ var init_TooltipContent = __esm({
       ...rest
     }) => {
       const isLegacy = useIsLegacyBrand();
-      const renderArgo = !isLegacy || argo === true;
+      const renderArgo = !isLegacy;
       const handlePointerDownOutside = (event) => {
         if (keepOpenOnPointerDownOutside) event.preventDefault();
         onPointerDownOutside?.(event);
@@ -345,7 +344,6 @@ var init_Tooltip = __esm({
       className,
       keepOpenOnTriggerClick = false,
       variant,
-      argo,
       placement = "right",
       forceHide = false,
       forceShow = false,
@@ -384,7 +382,6 @@ var init_Tooltip = __esm({
               {
                 className,
                 variant: resolvedVariant,
-                argo,
                 placement,
                 keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
                 children: tooltip
@@ -874,14 +871,13 @@ var init_Button = __esm({
       isLoading = false,
       asChild = false,
       onClick,
-      argo = false,
       variant = "primary",
       size = "medium",
       block = false,
       ...buttonProps
     }) => {
       const isLegacy = useIsLegacyBrand();
-      const renderArgo = !isLegacy || argo;
+      const renderArgo = !isLegacy;
       const Comp = asChild ? reactSlot.Root : "button";
       const isIconOnly = String(size).startsWith("icon");
       const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
@@ -1204,17 +1200,8 @@ var init_ZoomableSvg = __esm({
                 className: "tw-absolute tw-right-1 tw-top-1 tw-flex tw-gap-1 tw-opacity-0 tw-transition-opacity group-hover/zoom:tw-opacity-100",
                 onClick: stopPropagation,
                 children: [
-                  isZoomed && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { tooltip: "Reset zoom", placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "small", variant: "outline", onClick: handleReset, argo: true, children: "Reset" }) }),
-                  copyText && /* @__PURE__ */ jsxRuntime.jsx(
-                    ClipboardButton,
-                    {
-                      text: copyText,
-                      tooltip: "Copy code",
-                      size: "icon-sm",
-                      variant: "outline",
-                      argo: true
-                    }
-                  ),
+                  isZoomed && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { tooltip: "Reset zoom", placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "small", variant: "outline", onClick: handleReset, children: "Reset" }) }),
+                  copyText && /* @__PURE__ */ jsxRuntime.jsx(ClipboardButton, { text: copyText, tooltip: "Copy code", size: "icon-sm", variant: "outline" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Tooltip,
                     {
@@ -1228,7 +1215,6 @@ var init_ZoomableSvg = __esm({
                           variant: "outline",
                           "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
                           onClick: () => setIsFullscreen((f) => !f),
-                          argo: true,
                           children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Minimize2, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Maximize2, { className: "tw-size-4" })
                         }
                       )
@@ -1873,11 +1859,10 @@ var ToastRoot = ({
   duration = Infinity,
   variant = "info",
   loading = false,
-  icon: iconProp,
-  argo
+  icon: iconProp
 }) => {
   const isLegacy = useIsLegacyBrand();
-  const renderArgo = !isLegacy || argo;
+  const renderArgo = !isLegacy;
   const icon = (() => {
     if (loading) return /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" });
     if (iconProp) return iconProp;
@@ -2216,9 +2201,7 @@ var CUSTOM_TRANSFORMERS = [
   MERMAID,
   ...markdown.TRANSFORMERS
 ];
-var SINGLE_LINE_TRANSFORMERS = CUSTOM_TRANSFORMERS.filter(
-  (t) => t.type === "text-format" || t.type === "text-match"
-);
+var SINGLE_LINE_TRANSFORMERS = [];
 var TABLE_FENCE_LANG = "__kbc_table__";
 var isTableLine = (line) => {
   const trimmed = line.trim();
@@ -2265,6 +2248,7 @@ var postprocessMarkdown = (markdown) => {
   const regex = new RegExp(`\`\`\`${TABLE_FENCE_LANG}\\n([\\s\\S]*?)\\n\`\`\``, "g");
   return markdown.replace(regex, "$1");
 };
+var unescapeMarkdownText = (markdown) => markdown.replace(/\\([*_`~\\])/g, "$1");
 
 // src/components/MarkdownEditor/plugins/MarkdownSyncPlugin.tsx
 var IMPORT_TAG = "markdown-import";
@@ -2272,7 +2256,8 @@ var MarkdownSyncPlugin = ({
   value,
   editable,
   onChange,
-  transformers = CUSTOM_TRANSFORMERS
+  transformers = CUSTOM_TRANSFORMERS,
+  singleLine = false
 }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const lastExportedRef = react.useRef(value);
@@ -2280,6 +2265,8 @@ var MarkdownSyncPlugin = ({
   onChangeRef.current = onChange;
   const transformersRef = react.useRef(transformers);
   transformersRef.current = transformers;
+  const singleLineRef = react.useRef(singleLine);
+  singleLineRef.current = singleLine;
   react.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
@@ -2298,7 +2285,7 @@ var MarkdownSyncPlugin = ({
       if (tags.has(IMPORT_TAG)) return;
       editor.getEditorState().read(() => {
         const raw = markdown.$convertToMarkdownString(transformersRef.current);
-        const markdown$1 = postprocessMarkdown(raw);
+        const markdown$1 = singleLineRef.current ? unescapeMarkdownText(raw) : postprocessMarkdown(raw);
         if (markdown$1 !== lastExportedRef.current) {
           lastExportedRef.current = markdown$1;
           onChangeRef.current?.(markdown$1);
@@ -2884,11 +2871,10 @@ var DropdownMenuTrigger = ({
 var DropdownMenu = ({
   // change a default value to false, for modal property, as it is not used in most cases
   modal = false,
-  variant,
   ...props
 }) => {
   const isLegacy = useIsLegacyBrand();
-  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : "default";
+  const effectiveVariant = !isLegacy ? "argo" : "default";
   const contextValue = react.useMemo(() => ({ variant: effectiveVariant }), [effectiveVariant]);
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive3.Root, { ...props, modal }) });
 };
@@ -3196,7 +3182,6 @@ var InputGroupButton = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   Button,
   {
-    argo: true,
     ...props,
     tabIndex,
     ref,
@@ -3494,7 +3479,7 @@ var InputGroupRoot = ({
   ...props
 }) => {
   const isLegacy = useIsLegacyBrand();
-  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : variant;
+  const effectiveVariant = !isLegacy ? "argo" : variant;
   const effectiveSizing = effectiveVariant === "argo" ? "medium" : sizing;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -4512,10 +4497,10 @@ var MarkdownEditor = ({
         // adjacent-sibling selector for paragraph spacing so single-paragraph blocks (titles,
         // short descriptions) stay tight while multi-paragraph blocks still breathe.
         compact && "[&_p]:tw-m-0 [&_p+p]:tw-mt-2",
-        // Display-state clamp: 2 lines + bottom fade. Drops in focus-within so editing
-        // expands to full height. Fade replaces ellipsis per the pattern spec — the
-        // mask gradient overlays line-clamp's default ellipsis so it's invisible.
-        clampDisplay && "[&:not(:focus-within)]:tw-line-clamp-2 [&:not(:focus-within)]:[mask-image:linear-gradient(to_bottom,black_50%,transparent)]",
+        // Display-state clamp: 2 lines, dropped in focus-within so editing expands to full
+        // height. line-clamp is self-gating (no effect below 3 lines), so short/empty content
+        // renders clean; a CSS fade can't gate on overflow without JS, so it's omitted.
+        clampDisplay && "[&:not(:focus-within)]:tw-line-clamp-2",
         className
       ),
       onBlur: handleBlur,
@@ -4572,7 +4557,8 @@ var MarkdownEditor = ({
             value,
             editable,
             onChange,
-            transformers
+            transformers,
+            singleLine
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(ImagePastePlugin, { onImageUpload }),