@carto/meridian-ds 1.4.8 → 1.5.0

package/CHANGELOG.md

@@ -4,6 +4,11 @@
 
 ## 1.0
 
+### 1.5.0
+
+- Add `SplitButton` [#212](https://github.com/CartoDB/meridian-ds/pull/212)
+- CodeArea: Add automatic text marking for markdown [#209](https://github.com/CartoDB/meridian-ds/pull/209)
+
 ### 1.4.8
 
 - Fix Category Widget Blanks [#210](https://github.com/CartoDB/meridian-ds/pull/210)

package/dist/{OpenDiagonallyRight-BrRyCV4Q.cjs → OpenDiagonallyRight-CM1tojUq.cjs}

@@ -2,6 +2,32 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const utils = require("@mui/material/utils");
+const Icon$2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M12.01 11.83 15.18 15l1.41-1.41L12.01 9l-4.59 4.59L8.84 15z",
+    clipRule: "evenodd"
+  }
+) });
+const BaseSvgIcon$2 = utils.createSvgIcon(Icon$2(), "ArrowUp");
+function ArrowUp({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$2,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ArrowUp$1 = React.forwardRef(ArrowUp);
 const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
@@ -54,5 +80,6 @@ function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
   );
 }
 const OpenDiagonallyRight$1 = React.forwardRef(OpenDiagonallyRight);
+exports.ArrowUp = ArrowUp$1;
 exports.CloseDiagonallyRight = CloseDiagonallyRight$1;
 exports.OpenDiagonallyRight = OpenDiagonallyRight$1;

package/dist/{OpenDiagonallyRight-5HZXh46V.js → OpenDiagonallyRight-CSm5GYYJ.js}

@@ -1,6 +1,32 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { createSvgIcon } from "@mui/material/utils";
+const Icon$2 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M12.01 11.83 15.18 15l1.41-1.41L12.01 9l-4.59 4.59L8.84 15z",
+    clipRule: "evenodd"
+  }
+) });
+const BaseSvgIcon$2 = createSvgIcon(Icon$2(), "ArrowUp");
+function ArrowUp({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    BaseSvgIcon$2,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ArrowUp$1 = forwardRef(ArrowUp);
 const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {
@@ -54,6 +80,7 @@ function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
 }
 const OpenDiagonallyRight$1 = forwardRef(OpenDiagonallyRight);
 export {
+  ArrowUp$1 as A,
   CloseDiagonallyRight$1 as C,
   OpenDiagonallyRight$1 as O
 };

package/dist/components/index.cjs

@@ -4,17 +4,17 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const TablePaginationActions = require("../TablePaginationActions-CFGXm44W.cjs");
+const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
+const OpenDiagonallyRight = require("../OpenDiagonallyRight-CM1tojUq.cjs");
 const reactIntl = require("react-intl");
 const iconsMaterial = require("@mui/icons-material");
 const Alert$1 = require("../Alert-BiOR9aar.cjs");
 require("cartocolor");
 const MenuItem = require("../MenuItem-Br2jY2lt.cjs");
-const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
 const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 const xDatePickers = require("@mui/x-date-pickers");
 const TimePicker$1 = require("@mui/x-date-pickers/TimePicker");
 const DateTimePicker$1 = require("@mui/x-date-pickers/DateTimePicker");
-const OpenDiagonallyRight = require("../OpenDiagonallyRight-BrRyCV4Q.cjs");
 const reactCodemirror2 = require("react-codemirror2");
 const colors = require("@mui/material/colors");
 require("codemirror/lib/codemirror.css");
@@ -100,6 +100,90 @@ function _Button({
   );
 }
 const Button = React.forwardRef(_Button);
+const ButtonGroup = material.styled(material.ButtonGroup)(({ theme, size }) => ({
+  "& .MuiButton-root:last-child": {
+    padding: 0,
+    minWidth: size === "small" ? theme.spacing(3) : size === "large" ? theme.spacing(6) : theme.spacing(4)
+  }
+}));
+function SplitButton({
+  options,
+  onClick,
+  variant,
+  size,
+  color,
+  ...otherProps
+}) {
+  var _a;
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const handleClick = () => {
+    onClick(options[selectedIndex]);
+  };
+  const handleMenuItemClick = (_, index) => {
+    setSelectedIndex(index);
+    setOpen(false);
+  };
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+  const handleClose = (event) => {
+    var _a2;
+    if ((_a2 = anchorRef.current) == null ? void 0 : _a2.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ButtonGroup,
+      {
+        "data-name": "split-button",
+        ref: anchorRef,
+        variant,
+        size,
+        color,
+        ...otherProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleClick, children: (_a = options[selectedIndex]) == null ? void 0 : _a.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleToggle, children: open ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Popper,
+      {
+        sx: { zIndex: 1 },
+        open,
+        anchorEl: anchorRef.current,
+        role: void 0,
+        transition: true,
+        disablePortal: true,
+        placement: "bottom-end",
+        children: ({ TransitionProps, placement }) => /* @__PURE__ */ jsxRuntime.jsx(
+          material.Grow,
+          {
+            ...TransitionProps,
+            style: {
+              transformOrigin: placement === "bottom" ? "center top" : "center bottom"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { elevation: 8, children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(material.MenuList, { autoFocusItem: true, sx: { paddingY: 1 }, children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              material.MenuItem,
+              {
+                disabled: option.disabled,
+                selected: index === selectedIndex,
+                onClick: (event) => handleMenuItemClick(event, index),
+                children: option.label
+              },
+              option.label
+            )) }) }) })
+          }
+        )
+      }
+    )
+  ] });
+}
 const Root$5 = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
@@ -3114,8 +3198,9 @@ const CodeAreaTheme = material.styled(material.Box, {
     right: 0,
     zIndex: 1
   },
-  "& .pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like, & .cm-bracket": {
-    color: theme.palette.text.primary
+  ".CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like, & .cm-bracket": {
+    color: theme.palette.text.primary,
+    fontVariantLigatures: "no-common-ligatures"
   },
   "& .CodeMirror pre.CodeMirror-placeholder": {
     color: theme.palette.text.hint
@@ -3133,7 +3218,7 @@ const CodeAreaTheme = material.styled(material.Box, {
   "& .cm-number, & .cm-property, & .cm-builtin": {
     color: colors.red[700]
   },
-  "& .cm-comment": {
+  "& .cm-comment, & .cm-quote": {
     color: theme.palette.text.secondary
   },
   "& .cm-variable": {
@@ -3142,9 +3227,18 @@ const CodeAreaTheme = material.styled(material.Box, {
   "& .cm-variable-2": {
     color: theme.palette.text.primary
   },
-  "& .cm-punctuation, & .cm-def, ": {
+  "& .cm-punctuation, & .cm-def": {
     color: colors.blue[800]
   },
+  "& .cm-image-alt-text, & .cm-link": {
+    color: colors.green[800],
+    textDecoration: "none"
+  },
+  // Custom inline link styling .cm-inline-url
+  "& .cm-url, & .cm-inline-url": {
+    color: colors.blue[800],
+    textDecoration: "none"
+  },
   "& .cm-variable-3, & .cm-type": {
     color: colors.indigo[800]
   },
@@ -3158,20 +3252,23 @@ const CodeAreaTheme = material.styled(material.Box, {
   "& .CodeMirror-selected": {
     background: colors.blue[800]
   },
-  "& .cm-header-1": {
-    fontSize: theme.typography.h2.fontSize
+  "& .cm-header": {
+    color: colors.red[700],
+    ...theme.typography.code3,
+    fontWeight: theme.typography.fontWeightBold
   },
-  "& .cm-header-2": {
-    fontSize: theme.typography.h3.fontSize
+  "& .cm-header-4, & .cm-header-5, & .cm-header-6": {
+    fontWeight: theme.typography.fontWeightRegular
   },
-  "& .cm-header-3": {
-    fontSize: theme.typography.h4.fontSize
-  },
-  "& .cm-header-4": {
-    fontSize: theme.typography.h5.fontSize
+  // Custom inline code styling
+  "& .cm-inline-code": {
+    backgroundColor: theme.palette.black[4],
+    color: colors.purple[500]
   },
-  "& .cm-header-5": {
-    fontSize: theme.typography.h6.fontSize
+  // Custom code block styling
+  "& .cm-code-block": {
+    backgroundColor: theme.palette.black[4],
+    marginRight: theme.spacing(2)
   },
   ...size === "small" && {
     "& .CodeMirror": {
@@ -3207,6 +3304,100 @@ function findCodeAreaControlCodeOccurrences(content) {
   }
   return matches;
 }
+const editorMarkers = /* @__PURE__ */ new WeakMap();
+function clearMarkersForClass(editor, className) {
+  var _a, _b;
+  const markers = (_a = editorMarkers.get(editor)) == null ? void 0 : _a.get(className);
+  if (!markers) return;
+  markers.forEach((marker) => {
+    if (marker.find()) {
+      marker.clear();
+    }
+  });
+  (_b = editorMarkers.get(editor)) == null ? void 0 : _b.delete(className);
+}
+function storeMarkersForClass(editor, className, markers) {
+  if (!editorMarkers.has(editor)) {
+    editorMarkers.set(editor, /* @__PURE__ */ new Map());
+  }
+  const editorMap = editorMarkers.get(editor);
+  if (editorMap) {
+    editorMap.set(className, markers);
+  }
+}
+function CodeAreaMarkTextPattern(editor, pattern, options, excludePatterns) {
+  const { className } = options;
+  clearMarkersForClass(editor, className);
+  const doc = editor.getDoc();
+  const content = doc.getValue();
+  const excludeRanges = (excludePatterns == null ? void 0 : excludePatterns.flatMap(
+    (excludePattern) => Array.from(content.matchAll(excludePattern), (match) => ({
+      start: match.index,
+      end: match.index + match[0].length
+    }))
+  )) ?? [];
+  const markers = Array.from(content.matchAll(pattern)).filter((match) => {
+    if (excludeRanges.some(
+      (range) => match.index >= range.start && match.index < range.end
+    )) {
+      return false;
+    }
+    return !match[1] || match[1].trim().length > 0;
+  }).map((match) => {
+    const startPos = doc.posFromIndex(match.index);
+    const endPos = doc.posFromIndex(match.index + match[0].length);
+    return editor.markText(startPos, endPos, {
+      atomic: false,
+      clearOnEnter: false,
+      ...options
+    });
+  });
+  if (markers.length > 0) {
+    storeMarkersForClass(editor, className, markers);
+  }
+}
+function markInlineCode(editor, className = "cm-inline-code") {
+  const inlineCodePattern = /`([^`\n\r]+)`/g;
+  const codeBlockPattern = /```[\s\S]*?```/g;
+  CodeAreaMarkTextPattern(
+    editor,
+    inlineCodePattern,
+    {
+      className
+    },
+    [codeBlockPattern]
+  );
+}
+function markInlineLinks(editor, className = "cm-inline-url") {
+  const inlineLinkPattern = /<((?:https?:\/\/[^\s<>]+)|(?:[^\s<>@]+@[^\s<>@]+\.[^\s<>@]+))>/g;
+  const codeBlockPattern = /```[\s\S]*?```/g;
+  CodeAreaMarkTextPattern(
+    editor,
+    inlineLinkPattern,
+    {
+      className
+    },
+    [codeBlockPattern]
+  );
+}
+function markCodeBlocks(editor, className = "cm-code-block") {
+  const doc = editor.getDoc();
+  const content = doc.getValue();
+  const lineCount = content.split("\n").length;
+  for (let i = 0; i < lineCount; i++) {
+    ["background", "wrap", "text"].forEach(
+      (where) => editor.removeLineClass(i, where, className)
+    );
+  }
+  const codeBlockPattern = /```[\s\S]*?(?:```|$)/g;
+  Array.from(content.matchAll(codeBlockPattern)).forEach((match) => {
+    const startPos = doc.posFromIndex(match.index);
+    const endPos = doc.posFromIndex(match.index + match[0].length);
+    for (let lineNum = startPos.line; lineNum <= endPos.line; lineNum++) {
+      editor.addLineClass(lineNum, "wrap", className);
+    }
+  });
+}
 function foldCode(editor, { from, to }) {
   editor.foldCode(
     0,
@@ -3247,6 +3438,7 @@ function CodeAreaInput({
   const codeMirrorOptions = {
     mode: "sql",
     theme: "light",
+    addModeClass: true,
     lineNumbers: true,
     lineWrapping: true,
     extraKeys: { "Ctrl-Space": "autocomplete" },
@@ -3277,6 +3469,13 @@ function CodeAreaInput({
     }
     initialFoldingDoneRef.current = true;
   }, [value, editor, autoFoldControlBlocks]);
+  React.useEffect(() => {
+    const mode = typeof (options == null ? void 0 : options.mode) === "object" && options.mode !== null ? options.mode.name : options == null ? void 0 : options.mode;
+    if (mode !== "markdown" || !editor || !value) return;
+    markInlineCode(editor);
+    markInlineLinks(editor);
+    markCodeBlocks(editor);
+  }, [editor, value, options == null ? void 0 : options.mode]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     CodeAreaTheme,
     {
@@ -4500,6 +4699,7 @@ exports.CodeAreaField = CodeAreaField;
 exports.CodeAreaFooter = CodeAreaFooter;
 exports.CodeAreaHeader = CodeAreaHeader;
 exports.CodeAreaInput = CodeAreaInput;
+exports.CodeAreaMarkTextPattern = CodeAreaMarkTextPattern;
 exports.CopiableComponent = CopiableComponent;
 exports.CreatableAutocomplete = CreatableAutocomplete;
 exports.DatePicker = DatePicker;
@@ -4524,6 +4724,7 @@ exports.MultipleSelectField = MultipleSelectField;
 exports.PasswordField = PasswordField;
 exports.SelectField = SelectField;
 exports.Snackbar = Snackbar;
+exports.SplitButton = SplitButton;
 exports.Tag = Tag;
 exports.TimePicker = TimePicker;
 exports.ToggleButtonGroup = ToggleButtonGroup;