site-builder/craft/src/components/forms/TextareaField.tsx

import React, { CSSProperties } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { escapeHtml, escapeAttr, scopeId } from '../../utils/escape';

interface TextareaFieldProps {
  label?: string;
  name?: string;
  placeholder?: string;
  rows?: number;
  required?: boolean;
  style?: CSSProperties;
  animation?: string;
  animationDelay?: string;
  hideOnDesktop?: boolean;
  hideOnTablet?: boolean;
  hideOnMobile?: boolean;
}

export const TextareaField: UserComponent<TextareaFieldProps> = ({
  label = 'Message',
  name = 'message',
  placeholder = '',
  rows = 4,
  required = false,
  style = {},
}) => {
  const {
    connectors: { connect, drag },
    selected,
  } = useNode((node) => ({
    selected: node.events.selected,
  }));

  return (
    <div
      ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '4px',
        outline: selected ? '2px solid #3b82f6' : 'none',
        borderRadius: '4px',
        ...style,
      }}
    >
      {label && (
        <label style={{ fontSize: '14px', fontWeight: '500', color: '#18181b' }}>
          {label}{required && <span style={{ color: '#ef4444' }}> *</span>}
        </label>
      )}
      <textarea
        name={name}
        placeholder={placeholder}
        rows={rows}
        required={required}
        readOnly
        style={{
          padding: '10px 12px',
          border: '1px solid #d4d4d8',
          borderRadius: '6px',
          fontSize: '14px',
          color: '#18181b',
          backgroundColor: '#ffffff',
          outline: 'none',
          width: '100%',
          boxSizing: 'border-box',
          resize: 'vertical',
          fontFamily: 'inherit',
        }}
      />
    </div>
  );
};

/* ---------- Craft config ---------- */

TextareaField.craft = {
  displayName: 'Textarea',
  props: {
    label: 'Message',
    name: 'message',
    placeholder: 'Enter your message',
    rows: 4,
    required: false,
    style: {},
    animation: '',
    animationDelay: '',
    hideOnDesktop: false,
    hideOnTablet: false,
    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
    canMoveIn: () => false,
    canMoveOut: () => true,
  },
};

/* ---------- HTML export ---------- */

(TextareaField as any).toHtml = (props: TextareaFieldProps, _childrenHtml: string, nodeId?: string) => {
  const wrapStyle = cssPropsToString({
    display: 'flex',
    flexDirection: 'column',
    gap: '4px',
    ...props.style,
  });
  const reqAttr = props.required ? ' required' : '';
  // `rows` is declared as a TS `number` but arrives unchecked (AI update_props
  // path only validates node_id; deserialized saved-state JSON is untyped at
  // runtime), so a string like `4"><script>...` must be coerced to a real
  // number before interpolation, not trusted as already-numeric.
  const rows = Number(props.rows) || 4;
  // Deterministic AND unique id: scoped on the Craft node id so the
  // <label for> always matches the <textarea id> AND two TextareaField
  // instances that share the same (often default) `name` -- e.g. two
  // untouched "Textarea" blocks both named "message" -- don't collide on
  // `field-message`. Falls back to the old name-derived hash for legacy
  // 2-arg call sites without a node id.
  const fieldId = scopeId(nodeId, props.name || 'message', 'field');
  const labelHtml = props.label
    ? `<label for="${escapeAttr(fieldId)}" style="font-size:14px;font-weight:500;color:#18181b">${escapeHtml(props.label)}${props.required ? '<span style="color:#ef4444"> *</span>' : ''}</label>`
    : '';
  const ariaLabelAttr = !props.label
    ? ` aria-label="${escapeAttr(props.placeholder || props.name || 'Textarea field')}"`
    : '';
  return {
    html: `<div${wrapStyle ? ` style="${wrapStyle}"` : ''}>
  ${labelHtml}
  <textarea id="${escapeAttr(fieldId)}" name="${escapeAttr(props.name || 'message')}" placeholder="${escapeAttr(props.placeholder || '')}" rows="${escapeAttr(String(rows))}"${reqAttr}${ariaLabelAttr} style="padding:10px 12px;border:1px solid #d4d4d8;border-radius:6px;font-size:14px;color:#18181b;background-color:#ffffff;width:100%;box-sizing:border-box;resize:vertical;font-family:inherit"></textarea>
</div>`,
  };
};