@carto/meridian-ds 2.4.0-structure.1 → 2.5.0

package/CHANGELOG.md

@@ -2,12 +2,16 @@
 
 ## Unreleased
 
+## 2.0
+
+### 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)
-
-## 2.0
+- 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
 

package/dist/components/index.cjs

@@ -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,77 @@ function CodeAreaDialog({
     }
   );
 }
+const useAutocompletion = (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 itemsForTrigger = foundTriggerConfig.items;
+      const filtered = itemsForTrigger.filter(
+        (item) => item.value.toLowerCase().includes(query.toLowerCase())
+      );
+      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 +5542,7 @@ exports.copyString = copyString;
 exports.createAutocompleteGroupByList = createAutocompleteGroupByList;
 exports.dialogDimensionsBySize = dialogDimensionsBySize;
 exports.isAutocompleteListGroupHeader = isAutocompleteListGroupHeader;
+exports.markTextPrecededBySymbol = markTextPrecededBySymbol;
 exports.useAutocomplete = useAutocomplete;
+exports.useAutocompletion = useAutocompletion;
 exports.useCopyValue = useCopyValue;

package/dist/components/index.js

@@ -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,77 @@ function CodeAreaDialog({
     }
   );
 }
+const useAutocompletion = (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 itemsForTrigger = foundTriggerConfig.items;
+      const filtered = itemsForTrigger.filter(
+        (item) => item.value.toLowerCase().includes(query.toLowerCase())
+      );
+      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 +5543,8 @@ export {
   createAutocompleteGroupByList,
   dialogDimensionsBySize,
   isAutocompleteListGroupHeader,
+  markTextPrecededBySymbol,
   useAutocomplete,
+  useAutocompletion,
   useCopyValue
 };

package/dist/types/components/organisms/CodeArea/CodeAreaInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeAreaInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/CodeArea/CodeAreaInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAexC,OAAO,+BAA+B,CAAA;AACtC,OAAO,8BAA8B,CAAA;AAIrC,OAAO,4BAA4B,CAAA;AACnC,OAAO,0CAA0C,CAAA;AACjD,OAAO,wCAAwC,CAAA;AAC/C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,gCAAgC,CAAA;AACvC,OAAO,kCAAkC,CAAA;AAGzC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,mCAAmC,CAAA;AAC1C,OAAO,qCAAqC,CAAA;AAC5C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,2CAA2C,CAAA;AAClD,OAAO,wCAAwC,CAAA;AAG/C,OAAO,mCAAmC,CAAA;AAC1C,OAAO,qCAAqC,CAAA;AAC5C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,qCAAqC,CAAA;AAC5C,OAAO,mCAAmC,CAAA;AAC1C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,wCAAwC,CAAA;AAC/C,OAAO,uCAAuC,CAAA;AAE9C,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,GAAG;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;SAAE,CAAA;QACxD,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yEAAyE;IACzE,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAmBD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,OAAO,EACP,KAAK,EACL,YAAY,EACZ,EAAE,EACF,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,IAAc,EACd,MAAM,EACN,qBAAqB,EACrB,aAAa,EAAE,UAAU,EACzB,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAwHpB"}
+{"version":3,"file":"CodeAreaInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/CodeArea/CodeAreaInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAexC,OAAO,+BAA+B,CAAA;AACtC,OAAO,8BAA8B,CAAA;AAIrC,OAAO,4BAA4B,CAAA;AACnC,OAAO,0CAA0C,CAAA;AACjD,OAAO,wCAAwC,CAAA;AAC/C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,gCAAgC,CAAA;AACvC,OAAO,kCAAkC,CAAA;AAGzC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,mCAAmC,CAAA;AAC1C,OAAO,qCAAqC,CAAA;AAC5C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,2CAA2C,CAAA;AAClD,OAAO,wCAAwC,CAAA;AAG/C,OAAO,mCAAmC,CAAA;AAC1C,OAAO,qCAAqC,CAAA;AAC5C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,qCAAqC,CAAA;AAC5C,OAAO,mCAAmC,CAAA;AAC1C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,wCAAwC,CAAA;AAC/C,OAAO,uCAAuC,CAAA;AAE9C,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,GAAG;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;SAAE,CAAA;QACxD,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KACvB,CAAA;IACD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yEAAyE;IACzE,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAmBD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,OAAO,EACP,KAAK,EACL,YAAY,EACZ,EAAE,EACF,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,IAAc,EACd,MAAM,EACN,qBAAqB,EACrB,aAAa,EAAE,UAAU,EACzB,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA6HpB"}

package/dist/types/components/organisms/CodeArea/index.d.ts

@@ -6,5 +6,7 @@ export { default as CodeAreaField } from './CodeAreaField';
 export { default as CodeAreaFooter } from './CodeAreaFooter';
 export { default as CodeAreaHeader } from './CodeAreaHeader';
 export { default as CodeAreaInput } from './CodeAreaInput';
-export { CodeAreaMarkTextPattern } from './utils';
+export { useAutocompletion } from './useAutocompletion';
+export { CodeAreaMarkTextPattern, markTextPrecededBySymbol } from './utils';
+export type { AutocompletionConfig, AutocompleteItem, TriggerConfig, } from './useAutocompletion';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/organisms/CodeArea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/CodeArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AACzF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,6CAA6C,CAAA;AACnG,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AACrF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/CodeArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AACzF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,6CAA6C,CAAA;AACnG,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AACrF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAE3E,YAAY,EACV,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,GACd,MAAM,qBAAqB,CAAA"}

package/dist/types/components/organisms/CodeArea/useAutocompletion.d.ts

@@ -0,0 +1,62 @@
+import { Editor } from 'codemirror';
+export interface AutocompleteItem {
+    /** The value to insert when selected */
+    value: string;
+    /** The HTML content to display in the dropdown */
+    html: string;
+}
+export interface TriggerConfig {
+    /** The trigger character (e.g., '@', '/', '#') */
+    symbol: string;
+    /** List of items to show for this trigger */
+    items: AutocompleteItem[];
+}
+export interface AutocompletionConfig {
+    /** Array of trigger configurations */
+    triggers: TriggerConfig[];
+}
+/**
+ * Hook for adding autocompletion functionality to CodeMirror editors
+ *
+ * @param editor - The CodeMirror editor instance
+ * @param config - Configuration object for autocompletion behavior
+ *
+ * @example
+ * ```typescript
+ * const [editor, setEditor] = useState<Editor | null>(null)
+ *
+ * useAutocompletion(editor, {
+ *   triggers: [
+ *     {
+ *       symbol: '@',
+ *       items: [
+ *         { value: 'user1', html: '<div class="user-item">👤 John Doe</div>' },
+ *         { value: 'admin1', html: '<div class="admin-item">👑 Alice Admin</div>' }
+ *       ]
+ *     },
+ *     {
+ *       symbol: '/',
+ *       items: [
+ *         { value: 'help', html: '<div class="command-item">📖 Show help</div>' },
+ *         { value: 'save', html: '<div class="command-item">💾 Save document</div>' }
+ *       ]
+ *     },
+ *     {
+ *       symbol: '#',
+ *       items: [
+ *         { value: 'urgent', html: '<div class="tag-item">🔴 Urgent</div>' },
+ *         { value: 'review', html: '<div class="tag-item">👀 Needs review</div>' }
+ *       ]
+ *     }
+ *   ]
+ * })
+ *
+ * const handleEditorMount = (editor: Editor) => {
+ *   setEditor(editor)
+ * }
+ *
+ * <CodeAreaField ... onEditorDidMount={handleEditorMount} />
+ * ```
+ */
+export declare const useAutocompletion: (editor: Editor | null, config: AutocompletionConfig) => void;
+//# sourceMappingURL=useAutocompletion.d.ts.map

package/dist/types/components/organisms/CodeArea/useAutocompletion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocompletion.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/CodeArea/useAutocompletion.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGxC,MAAM,WAAW,gBAAgB;IAC/B,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,aAAa;IAC5B,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAA;IACd,6CAA6C;IAC7C,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAC1B;AAED,MAAM,WAAW,oBAAoB;IACnC,sCAAsC;IACtC,QAAQ,EAAE,aAAa,EAAE,CAAA;CAC1B;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,iBAAiB,WACpB,MAAM,GAAG,IAAI,UACb,oBAAoB,SAwF7B,CAAA"}

package/dist/types/components/organisms/CodeArea/utils.d.ts

@@ -36,4 +36,11 @@ export declare function markInlineLinks(editor: Editor, className?: string): voi
  * @param className - CSS class to apply (defaults to 'cm-code-block')
  */
 export declare function markCodeBlocks(editor: Editor, className?: string): void;
+/**
+ * Mark text preceded by a given symbol when at beginning of line or after space
+ * @param editor - CodeMirror editor instance
+ * @param symbol - The symbol to match (e.g., '@', '/', '$')
+ * @param className - CSS class to apply (defaults to 'cm-symbol-text')
+ */
+export declare function markTextPrecededBySymbol(editor: Editor, symbol: string, className?: string): void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/types/components/organisms/CodeArea/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/CodeArea/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,YAAY,CAAA;AAEpD,wBAAgB,kCAAkC,CAAC,OAAO,EAAE,MAAM;UAEzC,MAAM;SAAO,MAAM;IA2B3C;AA4CD;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,OAAO,EAAE;IACP,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,EACD,eAAe,CAAC,EAAE,MAAM,EAAE,GACzB,IAAI,CA4CN;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,EACd,SAAS,SAAmB,GAC3B,IAAI,CAYN;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,SAAS,SAAkB,GAC1B,IAAI,CAcN;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,EACd,SAAS,SAAkB,GAC1B,IAAI,CAwBN"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/CodeArea/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,YAAY,CAAA;AAEpD,wBAAgB,kCAAkC,CAAC,OAAO,EAAE,MAAM;UAEzC,MAAM;SAAO,MAAM;IA2B3C;AA4CD;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,OAAO,EAAE;IACP,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,EACD,eAAe,CAAC,EAAE,MAAM,EAAE,GACzB,IAAI,CA4CN;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,EACd,SAAS,SAAmB,GAC3B,IAAI,CAYN;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,SAAS,SAAkB,GAC1B,IAAI,CAcN;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,EACd,SAAS,SAAkB,GAC1B,IAAI,CAwBN;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,SAAS,SAAmB,GAC3B,IAAI,CAsBN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "2.4.0-structure.1",
+  "version": "2.5.0",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {
@@ -68,6 +68,7 @@
     "chromatic": "^13.1.3",
     "codemirror": "^5.65.19",
     "date-fns": "^2.29.1",
+    "dompurify": "^3.2.6",
     "echarts": "5.6.0",
     "echarts-for-react": "3.0.2",
     "eslint": "8.57.0",
@@ -103,6 +104,7 @@
     "@mui/x-date-pickers": "^7.11.0",
     "cartocolor": "5.0.2",
     "codemirror": ">=5.65.19",
+    "dompurify": "^3.2.6",
     "echarts": ">=5.5.1",
     "echarts-for-react": ">=3.0.2",
     "react": ">=18.3.1",