[draft] Function highlight

.gitignore

@@ -8,8 +8,13 @@ node_modules
 /build/
 /public/build
 /public/aragon-ui
+<<<<<<< HEAD
+/api/*
+api
+=======
 /api/index.js
 /api/index.js.map
+>>>>>>> 0935c05b6359beae36fac89a91c19c19be48eb18
 
 # Editor directories and files
 .vscode/*

app/components/ContractDescriptorScreen/FunctionDescriptor/Description.tsx

@@ -0,0 +1,66 @@
+import { ReactNode } from "react";
+
+const codeRegex = /(`.*?`)/g;
+const functionRegex = /`@.*?\((.*?)\)`/g;
+
+type DescriptionProps = { text: string };
+
+function formatText(text: string) {
+  return text.split(codeRegex).map((w, i) => {
+    // Texts with code format at the begining usually return an empty string at the start
+    const codeMatch = codeRegex.exec(w);
+
+    return codeMatch ? (
+      formatCode(w)
+    ) : (
+      <span key={i} style={{ color: "#D0BF9B" }}>
+        {w}
+      </span>
+    );
+  });
+}
+
+function formatCode(text: string) {
+  const functionMatch = new RegExp(functionRegex).exec(text);
+
+  if (functionMatch) {
+    return formatFunction(text);
+  }
+
+  return text.split(/(`)(.*?)(`)/g).map((w) => {
+    return (
+      <span style={{ color: w === "`" ? "#D0BF9B" : "#5872FF" }}>{w}</span>
+    );
+  });
+}
+
+function getPartialFnColor(part: string, elementIndex: number) {
+  if (elementIndex === 2) {
+    return "#A2BEFC";
+  }
+
+  if (["`", "(", ")"].includes(part)) {
+    return "#D0BF9B";
+  }
+
+  return "#ffffff";
+}
+
+function formatFunction(text: string): ReactNode {
+  // Split and get [`,functionName, (, params, ), `]
+  return text.split(/(`)(@.*?)(\()(.*)(\))/g).map((w, i) => {
+    console.log("es la palabra", w);
+
+    return (
+      <span key={i} style={{ color: getPartialFnColor(w, i) }}>
+        {w}
+      </span>
+    );
+  });
+}
+
+function Description({ text }: DescriptionProps) {
+  return <div>{formatText(text)}</div>;
+}
+
+export default Description;

app/components/ContractDescriptorScreen/FunctionDescriptor/DescriptionField.tsx

@@ -1,7 +1,8 @@
-import { GU, RADIUS, textStyle } from "@1hive/1hive-ui";
 import { forwardRef, useEffect, useState } from "react";
 import type { FocusEventHandler, KeyboardEventHandler } from "react";
+import { GU, RADIUS, textStyle } from "@1hive/1hive-ui";
 import styled from "styled-components";
+import Description from "./Description";
 import { useDebounce } from "~/hooks/useDebounce";
 
 type DescriptionFieldProps = {
@@ -32,7 +33,7 @@ export const DescriptionField = forwardRef<
     ref
   ) => {
     const [value, setValue] = useState<string | undefined>(description);
-    const debouncedValue = useDebounce(value, 400);
+    const debouncedValue = useDebounce(value, 0);
 
     useEffect(() => {
       if (debouncedValue !== undefined) {
@@ -49,17 +50,33 @@ export const DescriptionField = forwardRef<
     }, [description]);
 
     return (
-      <DescriptionTextArea
-        tabIndex={-1}
-        ref={ref}
-        height={height}
-        textSize={textSize}
-        value={value}
-        placeholder={placeholder}
-        disabled={disabled}
-        onChange={(e) => setValue(e.target.value)}
-        {...props}
-      />
+      <div style={{ position: "relative", width: "100%", height }}>
+        <DescriptionTextArea
+          tabIndex={-1}
+          ref={ref}
+          height={height}
+          textSize={textSize}
+          value={value}
+          placeholder={placeholder}
+          disabled={disabled}
+          onChange={(e) => setValue(e.target.value)}
+          {...props}
+        />
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            bottom: 0,
+            height,
+            padding: `${1 * GU}px ${1.5 * GU}px`,
+            width: "100%",
+            margin: 0,
+            wordBreak: "break-all",
+          }}
+        >
+          <Description text={value || ""} />
+        </div>
+      </div>
     );
   }
 );
@@ -70,10 +87,17 @@ const DescriptionTextArea = styled.textarea<{
   height: string;
   textSize: string;
 }>`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+
+  word-break: break-all;
   height: ${(props) => props.height};
   padding: ${1 * GU}px ${1.5 * GU}px;
-  background: ${(props) => props.theme.surfaceUnder};
-  color: ${(props) => props.theme.surfaceContent};
+  background: transparent;
+  color: transparent;
+  caret-color: white;
   appearance: none;
   border-radius: ${RADIUS}px;
   width: 100%;