feat: add plain text page support

apps/builder/app/builder/features/command-panel/groups/components-group.tsx

@@ -69,8 +69,13 @@ export const $componentOptions = computed(
       order?: number;
       firstInstance: { component: string };
     }) => {
+      const documentType = selectedPage?.meta.documentType;
+      // text pages serve plain text content and accept no insertions
+      if (documentType === "text") {
+        return;
+      }
       // show only xml category and collection component in xml documents
-      if (selectedPage?.meta.documentType === "xml") {
+      if (documentType === "xml") {
         if (category !== "xml" && name !== collectionComponent) {
           return;
         }

apps/builder/app/builder/features/command-panel/groups/convert-group.tsx

@@ -16,7 +16,7 @@ import { elementComponent, tags } from "@webstudio-is/sdk";
 import { $registeredComponentMetas } from "~/shared/nano-states";
 import { $instances } from "~/shared/sync/data-stores";
 import { $props } from "~/shared/sync/data-stores";
-import { $selectedInstancePath } from "~/shared/nano-states";
+import { $selectedInstancePath, $selectedPage } from "~/shared/nano-states";
 import {
   getInstanceLabel,
   InstanceIcon,
@@ -28,6 +28,7 @@ import {
   closeCommandPanel,
   openCommandPanel,
 } from "../command-state";
+import { allowsHtmlMutations } from "../shared/document-utils";
 import { useState } from "react";
 import { convertInstance } from "~/shared/instance-utils";
 
@@ -46,15 +47,19 @@ const $convertOptions = computed(
     $instances,
     $props,
     $registeredComponentMetas,
+    $selectedPage,
   ],
-  (isOpen, instancePath, instances, props, metas) => {
+  (isOpen, instancePath, instances, props, metas, selectedPage) => {
     const convertOptions: ConvertOption[] = [];
     if (!isOpen) {
       return convertOptions;
     }
     if (instancePath === undefined || instancePath.length === 1) {
       return convertOptions;
     }
+    if (!allowsHtmlMutations(selectedPage)) {
+      return convertOptions;
+    }
     const [selectedItem] = instancePath;
 
     // Test all registered components

apps/builder/app/builder/features/command-panel/groups/tags-group.tsx

@@ -13,11 +13,12 @@ import { $registeredComponentMetas } from "~/shared/nano-states";
 import { $instances } from "~/shared/sync/data-stores";
 import { $props } from "~/shared/sync/data-stores";
 import { insertWebstudioFragmentAt } from "~/shared/instance-utils";
-import { $selectedInstancePath } from "~/shared/nano-states";
+import { $selectedInstancePath, $selectedPage } from "~/shared/nano-states";
 import { InstanceIcon } from "~/builder/shared/instance-label";
 import { isTreeSatisfyingContentModel } from "~/shared/content-model";
 import { closeCommandPanel, $isCommandPanelOpen } from "../command-state";
 import type { BaseOption } from "../shared/types";
+import { allowsHtmlMutations } from "../shared/document-utils";
 
 export type TagOption = BaseOption & {
   type: "tag";
@@ -31,15 +32,19 @@ export const $tagOptions = computed(
     $instances,
     $props,
     $registeredComponentMetas,
+    $selectedPage,
   ],
-  (isOpen, instancePath, instances, props, metas) => {
+  (isOpen, instancePath, instances, props, metas, selectedPage) => {
     const tagOptions: TagOption[] = [];
     if (!isOpen) {
       return tagOptions;
     }
     if (instancePath === undefined) {
       return tagOptions;
     }
+    if (!allowsHtmlMutations(selectedPage)) {
+      return tagOptions;
+    }
     const [{ instance, instanceSelector }] = instancePath;
     const childInstance: Instance = {
       type: "instance",

apps/builder/app/builder/features/command-panel/groups/wrap-group.tsx

@@ -22,7 +22,7 @@ import type {
 import { $registeredComponentMetas } from "~/shared/nano-states";
 import { $instances } from "~/shared/sync/data-stores";
 import { $props } from "~/shared/sync/data-stores";
-import { $selectedInstancePath } from "~/shared/nano-states";
+import { $selectedInstancePath, $selectedPage } from "~/shared/nano-states";
 import {
   getInstanceLabel,
   InstanceIcon,
@@ -36,6 +36,7 @@ import {
 } from "../command-state";
 import { useState } from "react";
 import { wrapInstance } from "~/shared/instance-utils";
+import { allowsHtmlMutations } from "../shared/document-utils";
 
 type WrapOption = {
   component: string;
@@ -146,15 +147,19 @@ const $wrapOptions = computed(
     $instances,
     $props,
     $registeredComponentMetas,
+    $selectedPage,
   ],
-  (isOpen, instancePath, instances, props, metas) => {
+  (isOpen, instancePath, instances, props, metas, selectedPage) => {
     const wrapOptions: WrapOption[] = [];
     if (!isOpen) {
       return wrapOptions;
     }
     if (instancePath === undefined || instancePath.length === 1) {
       return wrapOptions;
     }
+    if (!allowsHtmlMutations(selectedPage)) {
+      return wrapOptions;
+    }
     const [selectedItem, parentItem] = instancePath;
 
     // Build list of allowed wrappers from registered metas

apps/builder/app/builder/features/command-panel/shared/document-utils.ts

@@ -0,0 +1,10 @@
+import type { Page } from "@webstudio-is/sdk";
+
+// Only html documents accept arbitrary html element/component mutations
+// (insertion, wrapping, conversion). xml documents allow only specific xml
+// components (handled per-item where applicable) and text documents serve
+// plain text content with no insertions.
+export const allowsHtmlMutations = (page: Page | undefined) => {
+  const documentType = page?.meta.documentType;
+  return documentType === undefined || documentType === "html";
+};

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

@@ -7,6 +7,7 @@ import {
   type WsComponentMeta,
   componentCategories,
   collectionComponent,
+  documentTypes,
   elementComponent,
 } from "@webstudio-is/sdk";
 import {
@@ -110,7 +111,7 @@ const filterAndGroupComponents = ({
   metasByCategory,
   search,
 }: {
-  documentType?: "html" | "xml";
+  documentType?: (typeof documentTypes)[number];
   metasByCategory: Map<string, Array<Meta>>;
   search: string;
 }): Groups => {