editable stub

packages/design/src/FormManager/FormEdit/Preview.tsx

@@ -104,31 +104,35 @@ const createPatternPreviewComponent = (
       ? 'form-group-row field-selected'
       : 'form-group-row';
 
+    const editButton = pattern.type === 'input' ? (
+      <span className="edit-button-icon">
+        <button
+          className="usa-button usa-button--secondary usa-button--unstyled"
+          onClick={() => handleEditClick(pattern)}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              handleEditClick(pattern);
+            }
+          }}
+          tabIndex={0}
+          aria-label="Edit form group"
+        >
+          <svg
+            className="usa-icon"
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+          >
+            <use xlinkHref={`${uswdsRoot}img/sprite.svg#settings`}></use>
+          </svg>
+        </button>
+      </span>
+    ) : null;
+
     return (
       <div className={divClassNames} data-id={pattern._elementId}>
         <Component pattern={pattern} />
-        <span className="edit-button-icon">
-          <button
-            className="usa-button usa-button--secondary usa-button--unstyled"
-            onClick={() => handleEditClick(pattern)}
-            onKeyDown={e => {
-              if (e.key === 'Enter') {
-                handleEditClick(pattern);
-              }
-            }}
-            tabIndex={0}
-            aria-label="Edit form group"
-          >
-            <svg
-              className="usa-icon"
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-            >
-              <use xlinkHref={`${uswdsRoot}img/sprite.svg#settings`}></use>
-            </svg>
-          </button>
-        </span>
+        {editButton}
       </div>
     );
   };

packages/design/src/config/view/Fieldset/index.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
-
 import { type FieldsetPattern, type Pattern } from '@atj/forms';
-
 import { type FormElementComponent } from '../../../Form';
 
+
 const FormSummary: FormElementComponent<Pattern<FieldsetPattern>> = ({
   pattern,
   children,
 }) => {
   return (
     <fieldset className="usa-fieldset margin-top-4">
-      <legend className="usa-legend">{pattern.legend}</legend>
+      <legend 
+        className="usa-legend" 
+        contentEditable={false}
+        suppressContentEditableWarning={true}
+      >{pattern.legend}</legend>
       {children}
     </fieldset>
   );

packages/design/src/config/view/FormSummary/index.tsx

@@ -10,7 +10,10 @@ const FormSummary: FormElementComponent<Pattern<FormSummaryPattern>> = ({
     <>
       <div className="usa-legend-wrapper">
         {/* <legend className="usa-legend">{pattern.title}</legend> */}
-        <h1>{pattern.title}</h1>
+        <h1 
+          contentEditable={false}
+          suppressContentEditableWarning={true}
+        >{pattern.title}</h1>
         {pattern.description !== '' && <p>{pattern.description}</p>}
       </div>
     </>

packages/design/src/config/view/Paragraph/index.tsx

@@ -10,27 +10,40 @@ const FormSummary: FormElementComponent<Pattern<ParagraphPattern>> = ({
   if (pattern.style === 'heading') {
     return (
       <>
-        <h2>{pattern.text}</h2>
+        <h2 
+          contentEditable={false} 
+          suppressContentEditableWarning={true}
+        >{pattern.text}</h2>
       </>
     );
   } else if (pattern.style === 'subheading') {
     return (
       <>
-        <h3>{pattern.text}</h3>
+        <h3 
+          contentEditable={false} 
+          suppressContentEditableWarning={true}
+        >{pattern.text}</h3>
       </>
     );
   } else if (pattern.style === 'indent') {
     return (
       <>
-        <ul className="usa-list">
+        <ul 
+          className="usa-list" 
+          contentEditable={false} 
+          suppressContentEditableWarning={true}
+        >
           <li>{pattern.text}</li>
         </ul>
       </>
     );
   } else {
     return (
       <>
-        <p>{pattern.text}</p>
+        <p 
+          contentEditable={false} 
+          suppressContentEditableWarning={true}
+        >{pattern.text}</p>
       </>
     );
   }

packages/design/src/config/view/TextInput/index.tsx

@@ -9,6 +9,9 @@ const TextInput: FormElementComponent<Pattern<TextInputPattern>> = ({
   pattern,
 }) => {
   const { register } = useFormContext();
+  const handleLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+  };
   return (
     <div className="usa-form-group-wrapper" key={pattern.inputId}>
       <div
@@ -22,6 +25,9 @@ const TextInput: FormElementComponent<Pattern<TextInputPattern>> = ({
           })}
           htmlFor={`input-${pattern.inputId}`}
           id={`input-message-${pattern.inputId}`}
+          contentEditable={false}
+          suppressContentEditableWarning={true}
+          onClick={handleLabelClick}
         >
           {pattern.label}
         </label>

packages/forms/src/config/elements/paragraph.ts

@@ -1,7 +1,7 @@
 import * as z from 'zod';
 
 import { type FormElementConfig } from '..';
-import { type FormElement, validateElement } from '../../element';
+import { type FormElement } from '../../element';
 import { type Pattern, type ParagraphPattern } from '../../pattern';
 import { getFormSessionValue } from '../../session';
 import { safeZodParse } from '../../util/zod';