From 5b006f124a3777832188ae46e40449a1c7dbfcc8 Mon Sep 17 00:00:00 2001
From: fabrizio <fabriziovigevani@gmail.com>
Date: Wed, 27 Apr 2022 15:08:53 -0300
Subject: [PATCH 1/2] Update .gitignore

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 23b7972..89d8f3e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,7 +8,8 @@ node_modules
 /build/
 /public/build
 /public/aragon-ui
-/api/index.js
+/api/*
+api
 
 # Editor directories and files
 .vscode/*

From 20ecb55e0fb209f5eae21cfcee2c72cf98e6ce84 Mon Sep 17 00:00:00 2001
From: fabrizio <fabriziovigevani@gmail.com>
Date: Tue, 3 May 2022 21:37:12 -0300
Subject: [PATCH 2/2] Implement Description function

---
 .../FunctionDescriptor/Description.tsx        | 66 +++++++++++++++++++
 .../FunctionDescriptor/DescriptionField.tsx   | 54 ++++++++++-----
 2 files changed, 105 insertions(+), 15 deletions(-)
 create mode 100644 app/components/ContractDescriptorScreen/FunctionDescriptor/Description.tsx

diff --git a/app/components/ContractDescriptorScreen/FunctionDescriptor/Description.tsx b/app/components/ContractDescriptorScreen/FunctionDescriptor/Description.tsx
new file mode 100644
index 0000000..dd50379
--- /dev/null
+++ b/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;
diff --git a/app/components/ContractDescriptorScreen/FunctionDescriptor/DescriptionField.tsx b/app/components/ContractDescriptorScreen/FunctionDescriptor/DescriptionField.tsx
index 9092ba4..81d1050 100644
--- a/app/components/ContractDescriptorScreen/FunctionDescriptor/DescriptionField.tsx
+++ b/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%;