feat: migrate forms components to html elements

apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx

@@ -40,6 +40,7 @@ import {
   standardAttributesToReactProps,
 } from "@webstudio-is/react-sdk";
 import { rawTheme } from "@webstudio-is/design-system";
+import { Input, Select, Textarea } from "@webstudio-is/sdk-components-react";
 import {
   $propValuesByInstanceSelectorWithMemoryProps,
   getIndexedInstanceId,
@@ -475,6 +476,16 @@ export const WebstudioComponentCanvas = forwardRef<
 
   if (instance.component === elementComponent) {
     Component = instance.tag ?? "div";
+    // replace to enable uncontrolled state
+    if (Component === "input") {
+      Component = Input as AnyComponent;
+    }
+    if (Component === "textarea") {
+      Component = Textarea as AnyComponent;
+    }
+    if (Component === "select") {
+      Component = Select as AnyComponent;
+    }
   }
 
   if (instance.component === collectionComponent) {
@@ -670,6 +681,16 @@ export const WebstudioComponentPreview = forwardRef<
 
   if (instance.component === elementComponent) {
     Component = instance.tag ?? "div";
+    // replace to enable uncontrolled state
+    if (Component === "input") {
+      Component = Input as AnyComponent;
+    }
+    if (Component === "textarea") {
+      Component = Textarea as AnyComponent;
+    }
+    if (Component === "select") {
+      Component = Select as AnyComponent;
+    }
   }
 
   if (instance.component === blockComponent) {

apps/builder/app/shared/html.test.tsx

@@ -249,3 +249,55 @@ test("optionally paste svg as html embed", () => {
     )
   );
 });
+
+test("generate textarea element", () => {
+  expect(
+    generateFragmentFromHtml(`
+      <div>
+        <textarea>
+          my text
+        </textarea>
+      </div>
+    `)
+  ).toEqual(
+    renderTemplate(
+      <ws.element ws:tag="div">
+        <ws.element ws:tag="textarea" value="my text" />
+      </ws.element>
+    )
+  );
+});
+
+test("generate select element", () => {
+  expect(
+    generateFragmentFromHtml(`
+      <div>
+        <select>
+          <option value="one">One</option>
+          <option value="two" selected>Two</option>
+        </select>
+        <select>
+          <option>One</option>
+          <option selected>Two</option>
+        </select>
+      </div>
+    `)
+  ).toEqual(
+    renderTemplate(
+      <ws.element ws:tag="div">
+        <ws.element ws:tag="select" value="two">
+          <ws.element ws:tag="option" value="one">
+            One
+          </ws.element>
+          <ws.element ws:tag="option" value="two">
+            Two
+          </ws.element>
+        </ws.element>
+        <ws.element ws:tag="select" value="Two">
+          <ws.element ws:tag="option">One</ws.element>
+          <ws.element ws:tag="option">Two</ws.element>
+        </ws.element>
+      </ws.element>
+    )
+  );
+});

apps/builder/app/shared/html.ts

@@ -176,6 +176,10 @@ export const generateFragmentFromHtml = (
         createLocalStyles(instanceId, attr.value);
         continue;
       }
+      // selected option is represented as fake value attribute on select element
+      if (node.tagName === "option" && attr.name === "selected") {
+        continue;
+      }
       if (type === "string") {
         props.push({ id, instanceId, name, type, value: attr.value });
         continue;
@@ -195,6 +199,32 @@ export const generateFragmentFromHtml = (
       contentTags,
       richTextContentTags
     );
+    if (node.tagName === "select") {
+      for (const childNode of node.childNodes) {
+        if (defaultTreeAdapter.isElementNode(childNode)) {
+          if (
+            childNode.tagName === "option" &&
+            childNode.attrs.find((attr) => attr.name === "selected")
+          ) {
+            const valueAttr = childNode.attrs.find(
+              (attr) => attr.name === "value"
+            );
+            // if value attribute is omitted, the value is taken from the text content of the option element
+            const childText = childNode.childNodes.find((childNode) =>
+              defaultTreeAdapter.isTextNode(childNode)
+            );
+            // selected option is represented as fake value attribute on select element
+            props.push({
+              id: `${instance.id}:value`,
+              instanceId: instance.id,
+              name: "value",
+              type: "string",
+              value: valueAttr?.value ?? childText?.value.trim() ?? "",
+            });
+          }
+        }
+      }
+    }
     for (const childNode of node.childNodes) {
       if (defaultTreeAdapter.isElementNode(childNode)) {
         const child = convertElementToInstance(childNode);
@@ -211,6 +241,18 @@ export const generateFragmentFromHtml = (
           // collapse spacing characters inside of text to avoid preserved newlines
           value: childNode.value.replaceAll(/\s+/g, " "),
         };
+        // textarea content is initial value
+        // and represented with fake value attribute
+        if (node.tagName === "textarea") {
+          props.push({
+            id: `${instance.id}:value`,
+            instanceId: instance.id,
+            name: "value",
+            type: "string",
+            value: child.value.trim(),
+          });
+          continue;
+        }
         // when element has content elements other than supported by rich text
         // wrap its text children with span, for example
         // <div>

apps/builder/app/shared/nano-states/components.ts

@@ -129,6 +129,7 @@ export const subscribeComponentHooks = () => {
                 id: instance.id,
                 instanceKey: getInstanceKey(array.slice(index)),
                 component: instance.component,
+                tag: instance.tag,
               };
             }),
           });
@@ -147,6 +148,7 @@ export const subscribeComponentHooks = () => {
                 id: instance.id,
                 instanceKey: getInstanceKey(array.slice(index)),
                 component: instance.component,
+                tag: instance.tag,
               };
             }),
           });

packages/cli/src/framework-react-router.ts

@@ -56,6 +56,9 @@ export const createFramework = async (): Promise<Framework> => {
     metas,
     components,
     tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
       body: `${reactRouter}:Body`,
       a: `${reactRouter}:Link`,
       form: `${reactRouter}:RemixForm`,

packages/cli/src/framework-remix.ts

@@ -56,6 +56,9 @@ export const createFramework = async (): Promise<Framework> => {
     metas,
     components,
     tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
       body: `${remix}:Body`,
       a: `${remix}:Link`,
       form: `${remix}:RemixForm`,

packages/cli/src/framework-vike-ssg.ts

@@ -53,7 +53,11 @@ export const createFramework = async (): Promise<Framework> => {
   return {
     metas,
     components,
-    tags: {},
+    tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
+    },
     html: ({ pagePath }: { pagePath: string }) => {
       // ignore dynamic pages in static export
       if (isPathnamePattern(pagePath)) {

packages/html-data/bin/attributes.ts

@@ -73,20 +73,51 @@ const overrides: Record<
     popovertarget: false,
     popovertargetaction: false,
   },
+  label: {
+    for: { required: true },
+  },
   dialog: {
     closedby: false,
   },
   img: {
     ismap: false,
   },
   input: {
+    name: { required: true },
+    value: { required: true },
+    checked: { required: true },
+    type: { required: true },
+    placeholder: { required: true },
+    required: { required: true },
+    autofocus: { required: true },
     alpha: false,
     colorspace: false,
     // react types have it only in textarea
     dirname: false,
     popovertarget: false,
     popovertargetaction: false,
   },
+  textarea: {
+    name: { required: true },
+    placeholder: { required: true },
+    required: { required: true },
+    autofocus: { required: true },
+  },
+  select: {
+    name: { required: true },
+    required: { required: true },
+    autofocus: { required: true },
+    // mutltiple mode is not considered accessible
+    // and we cannot express it in builder so easier to remove
+    multiple: false,
+  },
+  option: {
+    label: { required: true },
+    value: { required: true },
+    disabled: { required: true },
+    // enforce fake value attribute on select element
+    selected: false,
+  },
 };
 
 // Crawl WHATWG HTML.
@@ -99,6 +130,26 @@ const [tbody] = findTags(table, "tbody");
 const rows = findTags(tbody, "tr");
 
 const attributesByTag: Record<string, Attribute[]> = {};
+// textarea does not have value attribute and text content is used as initial value
+// introduce fake value attribute to manage initial state similar to input
+attributesByTag.textarea = [
+  {
+    name: "value",
+    description: "Value of the form control",
+    type: "string",
+    required: true,
+  },
+];
+// select does not have value attribute and selected options are used as initial value
+// introduce fake value attribute to manage initial state similar to input
+attributesByTag.select = [
+  {
+    name: "value",
+    description: "Value of the form control",
+    type: "string",
+    required: true,
+  },
+];
 
 for (const row of rows) {
   const attribute = getTextContent(row.childNodes[0]).trim();
@@ -118,6 +169,32 @@ for (const row of rows) {
   if (value.includes("valid navigable target name or keyword")) {
     possibleOptions = ["_blank", "_self", "_parent", "_top"];
   }
+  if (value.includes("input type keyword")) {
+    possibleOptions = [
+      "hidden",
+      "text",
+      "search",
+      "tel",
+      "url",
+      "email",
+      "password",
+      "date",
+      "month",
+      "week",
+      "time",
+      "datetime-local",
+      "number",
+      "range",
+      "color",
+      "checkbox",
+      "radio",
+      "file",
+      "submit",
+      "image",
+      "reset",
+      "button",
+    ];
+  }
   let type: "string" | "boolean" | "number" | "select" = "string";
   let options: undefined | string[];
   if (possibleOptions.length > 0) {

packages/html-data/bin/elements.ts

@@ -46,8 +46,13 @@ const elementsByTag: Record<string, Element> = {};
       });
     const description = getTextContent(row.childNodes[1]);
     const categories = parseList(getTextContent(row.childNodes[2]));
-    const children = parseList(getTextContent(row.childNodes[4]));
+    let children = parseList(getTextContent(row.childNodes[4]));
     for (const tag of elements) {
+      // textarea does not have value attribute and text content is used as initial value
+      // introduce fake value attribute to manage initial state similar to input
+      if (tag === "textarea") {
+        children = [];
+      }
       elementsByTag[tag] = {
         description,
         categories,