@keboola/design 3.2.3 → 4.1.1

package/dist/markdown-editor.d.cts

@@ -57,9 +57,10 @@ type MarkdownEditorProps = {
      */
     singleLine?: boolean;
     /**
-     * Clamps content to ~2 lines with a bottom fade in the display (not-focused) state;
-     * focus expands the editor to full height (no clamp). Per the inline-editable-text
-     * pattern spec for description-style slots — fade replaces truncation/ellipsis.
+     * Clamps content to 2 lines (truncating with an ellipsis) in the display (not-focused)
+     * state; focus expands the editor to full height (no clamp). `line-clamp` is self-gating,
+     * so short/empty content renders fully with no truncation. Per the inline-editable-text
+     * pattern spec for description-style slots.
      */
     clampDisplay?: boolean;
     /**

package/dist/markdown-editor.d.ts

@@ -57,9 +57,10 @@ type MarkdownEditorProps = {
      */
     singleLine?: boolean;
     /**
-     * Clamps content to ~2 lines with a bottom fade in the display (not-focused) state;
-     * focus expands the editor to full height (no clamp). Per the inline-editable-text
-     * pattern spec for description-style slots — fade replaces truncation/ellipsis.
+     * Clamps content to 2 lines (truncating with an ellipsis) in the display (not-focused)
+     * state; focus expands the editor to full height (no clamp). `line-clamp` is self-gating,
+     * so short/empty content renders fully with no truncation. Per the inline-editable-text
+     * pattern spec for description-style slots.
      */
     clampDisplay?: boolean;
     /**

package/dist/markdown-editor.js

@@ -216,7 +216,6 @@ var init_TooltipContent = __esm({
     TooltipContent = ({
       className,
       variant,
-      argo,
       keepOpenOnPointerDownOutside = false,
       children,
       onPointerDownOutside,
@@ -227,7 +226,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);
@@ -316,7 +315,6 @@ var init_Tooltip = __esm({
       className,
       keepOpenOnTriggerClick = false,
       variant,
-      argo,
       placement = "right",
       forceHide = false,
       forceShow = false,
@@ -355,7 +353,6 @@ var init_Tooltip = __esm({
               {
                 className,
                 variant: resolvedVariant,
-                argo,
                 placement,
                 keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
                 children: tooltip
@@ -845,14 +842,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 ? Root$2 : "button";
       const isIconOnly = String(size).startsWith("icon");
       const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
@@ -1175,17 +1171,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__ */ jsx(Tooltip, { tooltip: "Reset zoom", placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "outline", onClick: handleReset, argo: true, children: "Reset" }) }),
-                  copyText && /* @__PURE__ */ jsx(
-                    ClipboardButton,
-                    {
-                      text: copyText,
-                      tooltip: "Copy code",
-                      size: "icon-sm",
-                      variant: "outline",
-                      argo: true
-                    }
-                  ),
+                  isZoomed && /* @__PURE__ */ jsx(Tooltip, { tooltip: "Reset zoom", placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "outline", onClick: handleReset, children: "Reset" }) }),
+                  copyText && /* @__PURE__ */ jsx(ClipboardButton, { text: copyText, tooltip: "Copy code", size: "icon-sm", variant: "outline" }),
                   /* @__PURE__ */ jsx(
                     Tooltip,
                     {
@@ -1199,7 +1186,6 @@ var init_ZoomableSvg = __esm({
                           variant: "outline",
                           "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
                           onClick: () => setIsFullscreen((f) => !f),
-                          argo: true,
                           children: isFullscreen ? /* @__PURE__ */ jsx(icons_exports.Minimize2, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(icons_exports.Maximize2, { className: "tw-size-4" })
                         }
                       )
@@ -1844,11 +1830,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__ */ jsx(icons_exports.Loader2, { className: "tw-animate-spin" });
     if (iconProp) return iconProp;
@@ -2187,9 +2172,7 @@ var CUSTOM_TRANSFORMERS = [
   MERMAID,
   ...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();
@@ -2236,6 +2219,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";
@@ -2243,7 +2227,8 @@ var MarkdownSyncPlugin = ({
   value,
   editable,
   onChange,
-  transformers = CUSTOM_TRANSFORMERS
+  transformers = CUSTOM_TRANSFORMERS,
+  singleLine = false
 }) => {
   const [editor] = useLexicalComposerContext();
   const lastExportedRef = useRef(value);
@@ -2251,6 +2236,8 @@ var MarkdownSyncPlugin = ({
   onChangeRef.current = onChange;
   const transformersRef = useRef(transformers);
   transformersRef.current = transformers;
+  const singleLineRef = useRef(singleLine);
+  singleLineRef.current = singleLine;
   useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
@@ -2269,7 +2256,7 @@ var MarkdownSyncPlugin = ({
       if (tags.has(IMPORT_TAG)) return;
       editor.getEditorState().read(() => {
         const raw = $convertToMarkdownString(transformersRef.current);
-        const markdown = postprocessMarkdown(raw);
+        const markdown = singleLineRef.current ? unescapeMarkdownText(raw) : postprocessMarkdown(raw);
         if (markdown !== lastExportedRef.current) {
           lastExportedRef.current = markdown;
           onChangeRef.current?.(markdown);
@@ -2855,11 +2842,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 = useMemo(() => ({ variant: effectiveVariant }), [effectiveVariant]);
   return /* @__PURE__ */ jsx(DropdownMenuContext, { value: contextValue, children: /* @__PURE__ */ jsx(Root$1, { ...props, modal }) });
 };
@@ -3167,7 +3153,6 @@ var InputGroupButton = ({
 }) => /* @__PURE__ */ jsx(
   Button,
   {
-    argo: true,
     ...props,
     tabIndex,
     ref,
@@ -3465,7 +3450,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__ */ jsx(
     "div",
@@ -4483,10 +4468,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,
@@ -4543,7 +4528,8 @@ var MarkdownEditor = ({
             value,
             editable,
             onChange,
-            transformers
+            transformers,
+            singleLine
           }
         ),
         /* @__PURE__ */ jsx(ImagePastePlugin, { onImageUpload }),