@carto/meridian-ds 2.4.0 → 2.5.2

package/CHANGELOG.md

@@ -1,7 +1,23 @@
 # CHANGELOG
 
+## Unreleased
+
 ## 2.0
 
+### 2.5.2
+
+- Rename `useAutocompletion` to `useCodeAreaAutocompletion` [#275](https://github.com/CartoDB/meridian-ds/pull/275)
+- Modify `useCodeAreaAutocompletion` interface to accept functions for a better memoization [#277](https://github.com/CartoDB/meridian-ds/pull/277)
+
+### 2.5.0
+
+- Move widgets files: Co-located Files with Explicit Exports [#259](https://github.com/CartoDB/meridian-ds/pull/259)
+- Move the Mui component's stories to the `src/theme/` folder [#260](https://github.com/CartoDB/meridian-ds/pull/260)
+- Integrate Chromatic visual testing tool in CI [#236](https://github.com/CartoDB/meridian-ds/pull/236)
+- Add cursor rules, CODEOWNERS, and fix dependabot groups [#242](https://github.com/CartoDB/meridian-ds/pull/242)
+- Support `useAutocompletion` in `CodeAreaField` component [#270](https://github.com/CartoDB/meridian-ds/pull/270)
+- Support Symbol Highlighting in `CodeAreaField` component [#271](https://github.com/CartoDB/meridian-ds/pull/271)
+
 ### 2.4.0
 
 - feat(icons): Update custom icons, adding `AiGeneratedObject`, `McpTool`, `SelectFeature` [#249](https://github.com/CartoDB/meridian-ds/pull/249)

package/dist/{Link-_lzRY1Ay.cjs → Link-CrGCrul0.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const TablePaginationActions = require("./TablePaginationActions-D2K26kdR.cjs");
+const TablePaginationActions = require("./TablePaginationActions-DAMGtIub.cjs");
 const material = require("@mui/material");
 const React = require("react");
 const reactIntl = require("react-intl");

package/dist/{Link-D5fKicEY.js → Link-RfbgGzdR.js}

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { b as ICON_SIZE_MEDIUM, T as Typography, c as ICON_SIZE_SMALL, I as ICON_SIZE_LARGE, u as useImperativeIntl } from "./TablePaginationActions-CCDi-BO-.js";
+import { b as ICON_SIZE_MEDIUM, T as Typography, c as ICON_SIZE_SMALL, I as ICON_SIZE_LARGE, u as useImperativeIntl } from "./TablePaginationActions-C6TVGJM-.js";
 import { styled, Alert as Alert$1, Fade, AlertTitle, IconButton as IconButton$1, Tooltip, CircularProgress, Link as Link$1 } from "@mui/material";
 import { forwardRef, useState } from "react";
 import { useIntl } from "react-intl";

package/dist/{MenuItem-badiQq9A.js → MenuItem-ZNdBUBvt.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1 } from "@mui/material";
-import { e as MENU_ITEM_SIZE_DENSE, f as MENU_ITEM_SIZE_EXTENDED } from "./TablePaginationActions-CCDi-BO-.js";
+import { e as MENU_ITEM_SIZE_DENSE, f as MENU_ITEM_SIZE_EXTENDED } from "./TablePaginationActions-C6TVGJM-.js";
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop

package/dist/{MenuItem-YpFpuljU.cjs → MenuItem-nokUtiks.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("./TablePaginationActions-D2K26kdR.cjs");
+const TablePaginationActions = require("./TablePaginationActions-DAMGtIub.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop

package/dist/components/index.cjs

@@ -5,12 +5,12 @@ const React = require("react");
 const reactIntl = require("react-intl");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const TablePaginationActions = require("../TablePaginationActions-D2K26kdR.cjs");
-const Link = require("../Link-_lzRY1Ay.cjs");
+const TablePaginationActions = require("../TablePaginationActions-DAMGtIub.cjs");
+const Link = require("../Link-CrGCrul0.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
 require("cartocolor");
-const MenuItem = require("../MenuItem-YpFpuljU.cjs");
+const MenuItem = require("../MenuItem-nokUtiks.cjs");
 const reactWindow = require("react-window");
 const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 const xDatePickers = require("@mui/x-date-pickers");
@@ -41,6 +41,7 @@ require("codemirror/addon/fold/indent-fold.js");
 require("codemirror/addon/fold/markdown-fold.js");
 require("codemirror/addon/fold/comment-fold.js");
 const ClickAwayListener = require("@mui/material/ClickAwayListener");
+const DOMPurify = require("dompurify");
 const StyledMenu = material.styled(material.Menu, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
 })(({ extended, width, height }) => ({
@@ -4105,6 +4106,22 @@ function markCodeBlocks(editor, className = "cm-code-block") {
     }
   });
 }
+function markTextPrecededBySymbol(editor, symbol, className = "cm-symbol-text") {
+  const escapedSymbol = symbol.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const codeBlockPattern = /```[\s\S]*?```/g;
+  const symbolTextPattern = new RegExp(
+    `(?<=^|\\s)(${escapedSymbol}[^\\s]+)`,
+    "g"
+  );
+  CodeAreaMarkTextPattern(
+    editor,
+    symbolTextPattern,
+    {
+      className
+    },
+    [codeBlockPattern]
+  );
+}
 function foldCode(editor, { from, to }) {
   editor.foldCode(
     0,
@@ -4222,6 +4239,11 @@ function CodeAreaInput({
           {
             ...props,
             value: defaultValue,
+            editorDidMount: (editor2) => {
+              editorRef.current = editor2;
+              setEditor(editor2);
+              onEditorDidMount == null ? void 0 : onEditorDidMount(editor2);
+            },
             options: codeMirrorOptions,
             onBlur: (editor2) => {
               onBlur == null ? void 0 : onBlur(editor2.getValue());
@@ -5388,6 +5410,74 @@ function CodeAreaDialog({
     }
   );
 }
+const useCodeAreaAutocompletion = (editor, config) => {
+  const { triggers } = config;
+  React.useEffect(() => {
+    if (!editor) return;
+    const closeHints = (cm) => {
+      var _a;
+      const active = (_a = cm.state) == null ? void 0 : _a.completionActive;
+      if (active == null ? void 0 : active.close) active.close();
+    };
+    const showAutocomplete = (cm) => {
+      const cursor = cm.getCursor();
+      const line = cm.getLine(cursor.line);
+      const textBeforeCursor = line.slice(0, cursor.ch);
+      let atIndex = -1;
+      let foundTriggerConfig = null;
+      for (let i = textBeforeCursor.length - 1; i >= 0; i--) {
+        const char = textBeforeCursor[i];
+        const triggerConfig = triggers.find((t) => t.symbol === char);
+        if (triggerConfig) {
+          const beforeTrigger = textBeforeCursor.slice(0, i);
+          if (beforeTrigger.length === 0 || beforeTrigger.endsWith(" ")) {
+            atIndex = i;
+            foundTriggerConfig = triggerConfig;
+            break;
+          }
+        }
+      }
+      if (atIndex === -1 || !foundTriggerConfig) {
+        closeHints(cm);
+        return;
+      }
+      const query = textBeforeCursor.slice(atIndex + 1);
+      if (query.includes(" ")) {
+        closeHints(cm);
+        return;
+      }
+      const filtered = foundTriggerConfig.getItems(query);
+      if (filtered.length === 0) {
+        closeHints(cm);
+        return;
+      }
+      cm.showHint({
+        hint: () => ({
+          list: filtered.map((item) => ({
+            text: item.value + " ",
+            render: (element) => {
+              element.innerHTML = DOMPurify.sanitize(item.html);
+            }
+          })),
+          from: { line: cursor.line, ch: atIndex + 1 },
+          to: cursor
+        }),
+        completeSingle: false,
+        closeOnUnfocus: true
+      });
+    };
+    const handleChange = () => showAutocomplete(editor);
+    const handleKeydown = (cm, event) => {
+      if (event.key === "Escape") closeHints(cm);
+    };
+    editor.on("change", handleChange);
+    editor.on("keydown", handleKeydown);
+    return () => {
+      editor.off("change", handleChange);
+      editor.off("keydown", handleKeydown);
+    };
+  }, [editor, triggers]);
+};
 exports.TablePaginationActions = TablePaginationActions.TablePaginationActions;
 exports.Typography = TablePaginationActions.Typography;
 exports.Alert = Link.Alert;
@@ -5449,5 +5539,7 @@ exports.copyString = copyString;
 exports.createAutocompleteGroupByList = createAutocompleteGroupByList;
 exports.dialogDimensionsBySize = dialogDimensionsBySize;
 exports.isAutocompleteListGroupHeader = isAutocompleteListGroupHeader;
+exports.markTextPrecededBySymbol = markTextPrecededBySymbol;
 exports.useAutocomplete = useAutocomplete;
+exports.useCodeAreaAutocompletion = useCodeAreaAutocompletion;
 exports.useCopyValue = useCopyValue;

package/dist/components/index.js

@@ -3,14 +3,14 @@ import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement,
 import { useIntl } from "react-intl";
 import { styled, Menu as Menu$2, MenuList as MenuList$1, Link, Checkbox, Select, MenuItem as MenuItem$1, FormControl, Box, InputLabel, FormHelperText, InputAdornment, IconButton, ListItemText, Tooltip, TextField, CircularProgress, Button as Button$1, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, useMediaQuery, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, Popper, Grow, Paper, ClickAwayListener, ButtonGroup as ButtonGroup$1, ToggleButtonGroup as ToggleButtonGroup$1, alpha, useTheme, Toolbar, AppBar as AppBar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
 import { Cancel, AddCircleOutlineOutlined, CloseOutlined, ContentCopyOutlined, VisibilityOutlined, VisibilityOffOutlined, OpenInNewOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
-import { f as MENU_ITEM_SIZE_EXTENDED, u as useImperativeIntl, T as Typography, e as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, M as MENU_ITEM_SIZE_DEFAULT, c as ICON_SIZE_SMALL, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-CCDi-BO-.js";
-import { a } from "../TablePaginationActions-CCDi-BO-.js";
-import { I as IconButton$1, A as Alert$1, S as ScreenReaderOnly } from "../Link-D5fKicEY.js";
-import { L } from "../Link-D5fKicEY.js";
+import { f as MENU_ITEM_SIZE_EXTENDED, u as useImperativeIntl, T as Typography, e as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, M as MENU_ITEM_SIZE_DEFAULT, c as ICON_SIZE_SMALL, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-C6TVGJM-.js";
+import { a } from "../TablePaginationActions-C6TVGJM-.js";
+import { I as IconButton$1, A as Alert$1, S as ScreenReaderOnly } from "../Link-RfbgGzdR.js";
+import { L } from "../Link-RfbgGzdR.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
 import "cartocolor";
-import { M as MenuItem } from "../MenuItem-badiQq9A.js";
+import { M as MenuItem } from "../MenuItem-ZNdBUBvt.js";
 import { FixedSizeList } from "react-window";
 import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
 import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
@@ -41,6 +41,7 @@ import "codemirror/addon/fold/indent-fold.js";
 import "codemirror/addon/fold/markdown-fold.js";
 import "codemirror/addon/fold/comment-fold.js";
 import ClickAwayListener$1 from "@mui/material/ClickAwayListener";
+import DOMPurify from "dompurify";
 const StyledMenu = styled(Menu$2, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
 })(({ extended, width, height }) => ({
@@ -4105,6 +4106,22 @@ function markCodeBlocks(editor, className = "cm-code-block") {
     }
   });
 }
+function markTextPrecededBySymbol(editor, symbol, className = "cm-symbol-text") {
+  const escapedSymbol = symbol.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const codeBlockPattern = /```[\s\S]*?```/g;
+  const symbolTextPattern = new RegExp(
+    `(?<=^|\\s)(${escapedSymbol}[^\\s]+)`,
+    "g"
+  );
+  CodeAreaMarkTextPattern(
+    editor,
+    symbolTextPattern,
+    {
+      className
+    },
+    [codeBlockPattern]
+  );
+}
 function foldCode(editor, { from, to }) {
   editor.foldCode(
     0,
@@ -4222,6 +4239,11 @@ function CodeAreaInput({
           {
             ...props,
             value: defaultValue,
+            editorDidMount: (editor2) => {
+              editorRef.current = editor2;
+              setEditor(editor2);
+              onEditorDidMount == null ? void 0 : onEditorDidMount(editor2);
+            },
             options: codeMirrorOptions,
             onBlur: (editor2) => {
               onBlur == null ? void 0 : onBlur(editor2.getValue());
@@ -5388,6 +5410,74 @@ function CodeAreaDialog({
     }
   );
 }
+const useCodeAreaAutocompletion = (editor, config) => {
+  const { triggers } = config;
+  useEffect(() => {
+    if (!editor) return;
+    const closeHints = (cm) => {
+      var _a;
+      const active = (_a = cm.state) == null ? void 0 : _a.completionActive;
+      if (active == null ? void 0 : active.close) active.close();
+    };
+    const showAutocomplete = (cm) => {
+      const cursor = cm.getCursor();
+      const line = cm.getLine(cursor.line);
+      const textBeforeCursor = line.slice(0, cursor.ch);
+      let atIndex = -1;
+      let foundTriggerConfig = null;
+      for (let i = textBeforeCursor.length - 1; i >= 0; i--) {
+        const char = textBeforeCursor[i];
+        const triggerConfig = triggers.find((t) => t.symbol === char);
+        if (triggerConfig) {
+          const beforeTrigger = textBeforeCursor.slice(0, i);
+          if (beforeTrigger.length === 0 || beforeTrigger.endsWith(" ")) {
+            atIndex = i;
+            foundTriggerConfig = triggerConfig;
+            break;
+          }
+        }
+      }
+      if (atIndex === -1 || !foundTriggerConfig) {
+        closeHints(cm);
+        return;
+      }
+      const query = textBeforeCursor.slice(atIndex + 1);
+      if (query.includes(" ")) {
+        closeHints(cm);
+        return;
+      }
+      const filtered = foundTriggerConfig.getItems(query);
+      if (filtered.length === 0) {
+        closeHints(cm);
+        return;
+      }
+      cm.showHint({
+        hint: () => ({
+          list: filtered.map((item) => ({
+            text: item.value + " ",
+            render: (element) => {
+              element.innerHTML = DOMPurify.sanitize(item.html);
+            }
+          })),
+          from: { line: cursor.line, ch: atIndex + 1 },
+          to: cursor
+        }),
+        completeSingle: false,
+        closeOnUnfocus: true
+      });
+    };
+    const handleChange = () => showAutocomplete(editor);
+    const handleKeydown = (cm, event) => {
+      if (event.key === "Escape") closeHints(cm);
+    };
+    editor.on("change", handleChange);
+    editor.on("keydown", handleKeydown);
+    return () => {
+      editor.off("change", handleChange);
+      editor.off("keydown", handleKeydown);
+    };
+  }, [editor, triggers]);
+};
 export {
   AUTOCOMPLETE_GROUP_HEADER_PROPERTY,
   AccordionGroup,
@@ -5450,6 +5540,8 @@ export {
   createAutocompleteGroupByList,
   dialogDimensionsBySize,
   isAutocompleteListGroupHeader,
+  markTextPrecededBySymbol,
   useAutocomplete,
+  useCodeAreaAutocompletion,
   useCopyValue
 };