feat: LEAP-1467: Adapt Textarea result container to new style

web/libs/editor/src/assets/icons/index.tsx

@@ -82,6 +82,7 @@ export { ReactComponent as IconViewAll } from "./view-all.svg";
 export { ReactComponent as IconLink } from "./link.svg";
 export { ReactComponent as IconPlusAlt } from "./plus-alt.svg";
 export { ReactComponent as IconTrash } from "./trash.svg";
+export { ReactComponent as IconTrashAlt } from "./trash-alt.svg";
 export { ReactComponent as IconTrashRect } from "./trash-rect.svg";
 export { ReactComponent as IconMenu } from "./menu.svg";
 export { ReactComponent as IconMinus } from "./minus.svg";
@@ -100,6 +101,7 @@ export { ReactComponent as IconSortDownNew } from "./sort-down-new.svg";
 export { ReactComponent as IconFilter } from "./filter.svg";
 export { ReactComponent as IconDelete } from "./delete.svg";
 export { ReactComponent as IconModels } from "./models.svg";
+export { ReactComponent as IconEdit } from "./edit.svg";
 
 export { ReactComponent as IconArrowLeft } from "./arrow-left.svg";
 export { ReactComponent as IconArrowLeftSmall } from "./arrow-left-small.svg";

web/libs/editor/src/components/HtxTextBox/HtxTextBox.jsx

@@ -1,6 +1,10 @@
 import React from "react";
-import { Tooltip, Typography } from "antd";
-import { DeleteOutlined, EditOutlined, EnterOutlined } from "@ant-design/icons";
+import { Typography } from "antd";
+import { EnterOutlined } from "@ant-design/icons";
+import { IconEdit, IconTrashAlt } from "../../assets/icons";
+import { Button } from "../../common/Button/Button";
+import { Tooltip } from "../../common/Tooltip/Tooltip";
+import { Elem } from "../../utils/bem";
 import styles from "./HtxTextBox.module.scss";
 import throttle from "lodash.throttle";
 
@@ -178,12 +182,31 @@ export class HtxTextBox extends React.Component {
       <>
         <Paragraph {...props}>
           <span ref={this.textRef}>{text}</span>
-          {isEditable && onChange && (
-            <EditOutlined onClick={this.startEditing} aria-label="Edit Region" className="ant-typography-edit" />
-          )}
         </Paragraph>
+        {isEditable && onChange && (
+          <Button
+            type="text"
+            className={styles.button}
+            tooltip="Edit"
+            tooltipTheme="Dark"
+            style={{ padding: 0 }}
+            icon={<IconEdit />}
+            aria-label="Edit Region"
+            onClick={this.startEditing}
+          />
+        )}
         {isDeleteable && onDelete && (
-          <DeleteOutlined className={styles.delete} aria-label="Delete Region" onClick={onDelete} />
+          <Button
+            type="text"
+            look="danger"
+            className={styles.button}
+            tooltip="Delete"
+            tooltipTheme="Dark"
+            style={{ padding: 0 }}
+            icon={<IconTrashAlt />}
+            aria-label="Delete Region"
+            onClick={onDelete}
+          />
         )}
       </>
     );

web/libs/editor/src/regions/TextAreaRegion.jsx

@@ -8,9 +8,10 @@ import Registry from "../core/Registry";
 import { TextAreaModel } from "../tags/control/TextArea/TextArea";
 import { guidGenerator } from "../core/Helpers";
 
-import styles from "./TextAreaRegion/TextAreaRegion.module.scss";
+import styles from "./TextAreaRegion/TextAreaRegion.scss";
 import { HtxTextBox } from "../components/HtxTextBox/HtxTextBox";
 import { FF_LSDV_4712, isFF } from "../utils/feature-flags";
+import { cn } from "../utils/bem";
 
 const Model = types
   .model("TextAreaRegionModel", {
@@ -112,7 +113,7 @@ const HtxTextAreaRegionView = ({ item, onFocus }) => {
   const name = `${parent?.name ?? ""}:${item.id}`;
 
   return (
-    <div {...divAttrs} className={styles.row} data-testid="textarea-region">
+    <div {...divAttrs} className={cn("row").toString()} data-testid="textarea-region">
       <HtxTextBox
         isEditable={editable}
         isDeleteable={deleteable}

web/libs/editor/src/regions/TextAreaRegion/TextAreaRegion.scss

@@ -0,0 +1,63 @@
+.mark {
+  background-color: var(--surface-surface);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-small);
+  margin: 0 var(--spacing-small) 0 0 !important;
+  padding: var(--spacing-small) var(--spacing-medium);
+  white-space: pre-line;
+  box-shadow: 0 4px 12px 0 var(--black_4), 0 1px 2px 0 var(--black_10);
+  flex-grow: 1;
+
+  &.selected {
+    border: 1px solid var(--grape_500);
+    background-color: var(--primary-bright-secondary);
+  }
+
+  &.highlighted {
+    border: 1px dashed var(--grape_500);
+    background-color: var(--primary-bright-secondary);
+  }
+
+  &.relation {
+    cursor: crosshair;
+  }
+}
+
+.row {
+  display: flex;
+  margin-bottom: var(--spacing-medium);
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--spacing-small);
+
+  .button {
+    display: flex;
+    flex: 0 0 32px;
+
+    &:hover {
+      background-color: var(--sand_200);
+    }
+
+    &_look {
+      &_danger {
+        &:hover {
+          background-color: var(--red_1);
+        }
+      }
+    }
+  }
+
+  // fix antd styles to resize textarea container and fix paddings
+  div[class~="ant-typography-edit-content"] {
+    flex-grow: 1;
+    left: -1px;
+    padding: 0;
+    margin-top: -1px;
+    margin-right: 0 !important;
+
+    textarea {
+      // the same as in .mark, its padding set to 0
+      padding:  var(--spacing-small)  var(--spacing-medium);
+    }
+  }
+}

web/libs/frontend-test/src/helpers/LSF/Textarea.ts

@@ -18,7 +18,7 @@ class TextareaHelper {
   }
 
   get rows() {
-    return this.root.find('[class^="row--"]');
+    return this.root.find(".lsf-row");
   }
 
   row(idx: number) {