refactor(bem): replace Block/Elem with cn() in TextAreaRegionView.jsx

Migrated TextAreaRegionView component from Block/Elem to cn() helper.
- Replaced Block/Elem imports with cn import
- Replaced <Block name="textarea-tag"> with <div className={cn("textarea-tag")...}>
- Replaced <Elem name="item"> with <div className={cn("textarea-tag").elem("item")...}>
- Replaced <Elem name="form" tag={Form}> with <Form className={cn("textarea-tag").elem("form")...}>
- Replaced <Elem name="input" tag={...}> with dynamic Input/TextArea components
- Replaced <Elem name="action" tag={Button}> with <Button className={cn("textarea-tag").elem("action")...}>
- HtxTextAreaResultLine component uses parent Block "textarea-tag" for all Elems
- Dynamic tag (Input vs TextArea) handled with conditional rendering
- Preserved refs, mods, styles, and all props
- Added type assertion for styles with CSS custom properties
- No behavior change, equivalent class strings

Note: Elem "item" under Block "textarea-tag" generates dm-textarea-tag__item
(different from dm-choice__item in Choice.jsx - no CSS conflict)

TextAreaRegionView

fix

Author: luarmr

web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx

@@ -8,7 +8,7 @@ import { IconTrash } from "@humansignal/icons";
 import styles from "../../../components/HtxTextBox/HtxTextBox.module.scss";
 import Registry from "../../../core/Registry";
 import { PER_REGION_MODES } from "../../../mixins/PerRegion";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 
 import "./TextArea.scss";
 
@@ -52,7 +52,7 @@ const HtxTextAreaResultLine = forwardRef(
     );
 
     const inputProps = {
-      className: `ant-input ${styles.input}`,
+      className: `ant-input ${styles.input} ${cn("textarea-tag").elem("input").toClassName()}`,
       value: displayValue,
       autoSize: isTextarea ? { minRows: 1 } : null,
       onChange: changeHandler,
@@ -70,23 +70,27 @@ const HtxTextAreaResultLine = forwardRef(
       }
     };
 
+
     return (
-      <Elem name="item">
-        <Elem name="input" tag={isTextarea ? TextArea : Input} {...inputProps} ref={ref} />
+      <div className={cn("textarea-tag").elem("item").toClassName()}>
+        {isTextarea ? (
+          <TextArea {...inputProps} ref={ref} />
+        ) : (
+          <Input {...inputProps} ref={ref} />
+        )}
         {canDelete && !collapsed && !readOnly && (
-          <Elem
-            name="action"
+          <Button
+            className={cn("textarea-tag").elem("action").toClassName()}
             size="small"
             look="string"
             aria-label="Delete Region"
-            tag={Button}
             leading={<IconTrash />}
             onClick={() => {
               onDelete(idx);
             }}
           />
         )}
-      </Elem>
+      </div>
     );
   },
 );
@@ -193,7 +197,7 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
     ref: mainInputRef,
     value,
     rows: item.rows,
-    className: "is-search",
+    className: `is-search ${cn("textarea-tag").elem("input").toClassName()}` ,
     label: item.label,
     placeholder: item.placeholder,
     autoSize: isTextArea ? { minRows: 1 } : null,
@@ -245,7 +249,7 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
 
   return (
     (result || showSubmit) && (
-      <Block name="textarea-tag" mod={{ mode: item.mode, outliner }} style={styles}>
+      <div className={cn("textarea-tag").mod({ mode: item.mode, outliner }).toClassName()} style={styles}>
         {result ? (
           <HtxTextAreaResult
             control={item}
@@ -258,9 +262,8 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
         ) : null}
 
         {showSubmit && (
-          <Elem
-            name="form"
-            tag={Form}
+          <Form
+            className={cn("textarea-tag").elem("form").toClassName()}
             onFinish={() => {
               if (item.allowsubmit && item._value && !item.annotation.isReadOnly()) {
                 submitValue();
@@ -271,17 +274,24 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
               e.stopPropagation();
             }}
           >
-            <Elem
-              name="input"
-              tag={isTextArea ? TextArea : Input}
-              {...props}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-            />
-          </Elem>
+            {isTextArea ? (
+              <TextArea
+                {...props}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              />
+            ) : (
+              <Input
+                {...props}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              />
+            )}
+          </Form>
         )}
-      </Block>
+      </div>
     )
   );
 });