feat: use html elements for typography (#5226)

Html elements can completely replace legacy typography components. Here
replace component templates with element templates as part of sdk.

- moved content block to general section
- moved separator into typography section
- moved code text into typography section and used regular `<code>`
element for it
- made "Text Content" setting expandable
- fixed dragging templates onto canvas.

<img width="475" alt="Screenshot 2025-05-21 at 11 27 27"
src="https://github.com/user-attachments/assets/ab53c5ec-e51f-498d-b01b-cc7f2eb20c2d"
/>
<img width="515" alt="Screenshot 2025-05-21 at 11 27 20"
src="https://github.com/user-attachments/assets/0f560c26-7e51-4025-a487-6f7e4e3f43e3"
/>

Author: TrySound

apps/builder/app/builder/features/components/components.tsx

@@ -55,6 +55,7 @@ type Meta = {
   label: string;
   description: undefined | string;
   icon?: string;
+  firstInstance: { component: string; tag?: string };
 };
 
 const $metas = computed(
@@ -87,6 +88,7 @@ const $metas = computed(
         order: componentMeta.order,
         label: getInstanceLabel({ component: name }, componentMeta),
         description: componentMeta.description,
+        firstInstance: { component: name },
       });
     }
     for (const [name, templateMeta] of templates) {
@@ -103,6 +105,7 @@ const $metas = computed(
         continue;
       }
 
+      availableComponents.add(name);
       metas.push({
         name,
         category: templateMeta.category ?? "hidden",
@@ -113,6 +116,7 @@ const $metas = computed(
           getInstanceLabel({ component: name }, templateMeta),
         description: templateMeta.description,
         icon: templateMeta.icon,
+        firstInstance: templateMeta.template.instances[0],
       });
     }
     const metasByCategory = mapGroupBy(metas, (meta) => meta.category);
@@ -339,7 +343,7 @@ export const ComponentsPanel = ({
                       icon={
                         <InstanceIcon
                           size="auto"
-                          instance={{ component: meta.name }}
+                          instance={meta.firstInstance}
                           // for cases like Sheet template
                           icon={meta.icon}
                         />

apps/builder/app/builder/features/settings-panel/controls/tag-control.tsx

@@ -79,15 +79,15 @@ export const TagControl = ({ meta, prop }: ControlProps<"tag">) => {
     >
       {options.length > 10 ? (
         <Combobox<string>
-          defaultHighlightedIndex={0}
           getItems={() => options}
+          itemToString={(item) => item ?? options[0]}
+          value={value ?? computedTag}
+          selectedItem={computedTag}
+          onChange={(value) => setValue(value ?? undefined)}
           onItemSelect={(item) => {
             updateTag(item);
             setValue(undefined);
           }}
-          itemToString={(item) => item ?? options[0]}
-          value={value ?? computedTag}
-          onChange={(value) => setValue(value ?? undefined)}
           getDescription={(item) => (
             <Box css={{ width: theme.spacing[28] }}>
               {elementsByTag[item ?? ""]?.description}

apps/builder/app/builder/features/settings-panel/controls/text-content.tsx

@@ -1,7 +1,15 @@
-import { useId, useMemo } from "react";
+import { useMemo } from "react";
 import { useStore } from "@nanostores/react";
 import { computed } from "nanostores";
-import { Flex, rawTheme, Text, TextArea } from "@webstudio-is/design-system";
+import {
+  DialogClose,
+  DialogMaximize,
+  DialogTitle,
+  DialogTitleActions,
+  Flex,
+  rawTheme,
+  Text,
+} from "@webstudio-is/design-system";
 import type { Instance } from "@webstudio-is/sdk";
 import { AlertIcon } from "@webstudio-is/icons";
 import { $instances } from "~/shared/nano-states";
@@ -10,6 +18,7 @@ import {
   BindingPopover,
 } from "~/builder/shared/binding-popover";
 import { updateWebstudioData } from "~/shared/instance-utils";
+import { CodeEditor } from "~/builder/shared/code-editor";
 import {
   type ControlProps,
   useLocalValue,
@@ -55,7 +64,6 @@ export const TextContent = ({
       updateChildren(instanceId, "text", value);
     }
   });
-  const id = useId();
 
   const { scope, aliases } = useStore($selectedInstanceScope);
   let expression: undefined | string;
@@ -107,15 +115,24 @@ export const TextContent = ({
       }
     >
       <BindingControl>
-        <TextArea
-          id={id}
-          disabled={overwritable === false}
-          autoGrow
+        <CodeEditor
+          title={
+            <DialogTitle
+              suffix={
+                <DialogTitleActions>
+                  <DialogMaximize />
+                  <DialogClose />
+                </DialogTitleActions>
+              }
+            >
+              <Text variant="labelsTitleCase">Text Content</Text>
+            </DialogTitle>
+          }
+          size="small"
+          readOnly={overwritable === false}
           value={localValue.value}
-          rows={1}
           onChange={localValue.set}
-          onBlur={localValue.save}
-          onSubmit={localValue.save}
+          onChangeComplete={localValue.save}
         />
         {expression !== undefined && (
           <BindingPopover

apps/builder/app/builder/shared/code-editor-base.tsx

@@ -81,14 +81,17 @@ const editorContentStyle = css({
   boxSizing: "border-box",
   color: theme.colors.foregroundMain,
   borderRadius: theme.borderRadius[4],
-  border: `1px solid ${theme.colors.borderMain}`,
+  border: `1px solid transparent`,
   background: theme.colors.backgroundControls,
   paddingTop: 4,
   paddingBottom: 2,
   paddingRight: theme.spacing[2],
   paddingLeft: theme.spacing[3],
   // required to support copying selected text
   userSelect: "text",
+  "&:hover": {
+    borderColor: theme.colors.borderMain,
+  },
   "&:focus-within": {
     borderColor: theme.colors.borderFocus,
   },

apps/builder/app/builder/shared/code-editor.tsx

@@ -43,7 +43,7 @@ const wrapperStyle = css({
   variants: {
     size: {
       default: getMinMaxHeightVars({ minHeight: "160px", maxHeight: "320px" }),
-      keyframe: getMinMaxHeightVars({ minHeight: "60px", maxHeight: "120px" }),
+      small: getMinMaxHeightVars({ minHeight: "16px", maxHeight: "120px" }),
     },
   },
   defaultVariants: {
@@ -120,7 +120,7 @@ export const CodeEditor = forwardRef<
   Omit<ComponentProps<typeof EditorContent>, "extensions"> & {
     lang?: "html" | "markdown" | "css-properties";
     title?: ReactNode;
-    size?: "default" | "keyframe";
+    size?: "default" | "small";
   }
 >(({ lang, title, size, ...editorContentProps }, ref) => {
   const extensions = useMemo(() => {

apps/builder/app/builder/shared/instance-label.tsx

@@ -5,6 +5,7 @@ import {
   BodyIcon,
   BoldIcon,
   BoxIcon,
+  BracesIcon,
   ButtonElementIcon,
   CalendarIcon,
   FormIcon,
@@ -42,6 +43,7 @@ const htmlIcons: Record<string, undefined | string> = {
   h6: HeadingIcon,
   p: TextAlignLeftIcon,
   blockquote: BlockquoteIcon,
+  code: BracesIcon,
   ul: ListIcon,
   ol: ListIcon,
   li: ListItemIcon,

apps/builder/app/shared/content-model.ts

@@ -422,6 +422,7 @@ export const richTextPlaceholders: Map<undefined | string, string> = new Map([
   ["h6", "Heading 6"],
   ["p", "Paragraph"],
   ["blockquote", "Blockquote"],
+  ["code", "Code Text"],
   ["li", "List item"],
   ["a", "Link"],
   ["span", ""],

packages/html-data/bin/aria.ts

@@ -1,6 +1,7 @@
 import { aria } from "aria-query";
 import { mkdir, writeFile } from "node:fs/promises";
 import {
+  coreMetas,
   createScope,
   elementComponent,
   Prop,
@@ -152,12 +153,12 @@ await writeFile(
   generateWebstudioComponent({
     name: "Page",
     scope: createScope(),
+    metas: new Map(Object.entries(coreMetas)),
     instances,
     props,
     dataSources: new Map(),
     rootInstanceId: instance.id,
     classesMap: new Map(),
     parameters: [],
-    metas: new Map(),
   }) + "export { Page }"
 );

packages/html-data/bin/attributes.ts

@@ -1,5 +1,6 @@
 import { mkdir, writeFile } from "node:fs/promises";
 import {
+  coreMetas,
   createScope,
   elementComponent,
   type Instance,
@@ -54,6 +55,9 @@ const overrides: Record<
     target: { required: true },
     download: { type: "boolean", required: true },
   },
+  blockquote: {
+    cite: { required: true },
+  },
   form: {
     action: { required: true },
     method: { required: true },
@@ -263,13 +267,13 @@ await writeFile(
   generateWebstudioComponent({
     name: "Page",
     scope: createScope(),
+    metas: new Map(Object.entries(coreMetas)),
     instances,
     props,
     dataSources: new Map(),
     rootInstanceId: body.id,
     classesMap: new Map(),
     parameters: [],
-    metas: new Map(),
   }) + "export { Page }"
 );