Is it possible to search richtext fields or block fields

[snakemastr]

Using the normal UI and the search bar in the list view, is it possible to search for richtext fields or content in block fields?

[wesleysmyth]

By default, Payload's list view search bar only searches fields that are explicitly marked as searchable. Rich text and block fields are not searchable out of the box because their content is stored as structured JSON (not plain text).

Option 1: Enable search with admin.listSearchableFields

Define which fields are searchable in your collection config. For plain text fields nested inside blocks:

// collections/Pages.ts
import { CollectionConfig } from "payload";

export const Pages: CollectionConfig = {
  slug: "pages",
  admin: {
    useAsTitle: "title",
    listSearchableFields: ["title", "slug", "excerpt"],
    // These fields will be searched via the list view search bar
  },
  fields: [
    { name: "title", type: "text" },
    { name: "slug", type: "text" },
    { name: "excerpt", type: "textarea" },
    {
      name: "content",
      type: "richText", // Not directly searchable
    },
  ],
};

Option 2: Add a computed search index field

Create a hidden text field that contains a flattened version of your rich text/block content:

import { CollectionConfig } from "payload";
import { lexicalHTML } from "@payloadcms/richtext-lexical";

export const Pages: CollectionConfig = {
  slug: "pages",
  admin: {
    listSearchableFields: ["title", "searchIndex"],
  },
  hooks: {
    beforeChange: [
      ({ data }) => {
        // Flatten rich text and blocks into a searchable string
        let searchText = data.title || "";

        // Extract text from rich text (Lexical)
        if (data.content?.root?.children) {
          searchText += " " + extractTextFromLexical(data.content.root);
        }

        // Extract text from blocks
        if (data.layout) {
          for (const block of data.layout) {
            searchText += " " + JSON.stringify(block)
              .replace(/[{}"\[\]:,]/g, " ")
              .replace(/\s+/g, " ");
          }
        }

        data.searchIndex = searchText.toLowerCase().slice(0, 10000);
        return data;
      },
    ],
  },
  fields: [
    { name: "title", type: "text" },
    {
      name: "searchIndex",
      type: "textarea",
      admin: { hidden: true },
      index: true,
    },
    { name: "content", type: "richText" },
    { name: "layout", type: "blocks", blocks: [/* ... */] },
  ],
};

function extractTextFromLexical(node: any): string {
  if (!node) return "";
  let text = node.text || "";
  if (node.children) {
    text += node.children.map(extractTextFromLexical).join(" ");
  }
  return text;
}

Option 3: Use Payload's Search plugin

Payload has an official search plugin that creates a dedicated search collection:

// payload.config.ts
import { searchPlugin } from "@payloadcms/plugin-search";

export default buildConfig({
  plugins: [
    searchPlugin({
      collections: ["pages", "posts"],
      searchOverrides: {
        fields: [
          {
            name: "excerpt",
            type: "textarea",
          },
        ],
      },
      beforeSync: ({ originalDoc, searchDoc }) => {
        // Customize what gets indexed
        return {
          ...searchDoc,
          excerpt: extractPlainText(originalDoc.content),
        };
      },
    }),
  ],
});

This creates a separate search collection that you can query with full-text search.

Summary

Approach	Effort	Capabilities
listSearchableFields	Low	Only plain text fields
Computed search index	Medium	Rich text + blocks, basic text search
Search plugin	Higher	Full search collection, customizable

For most cases, the computed search index field (Option 2) gives you the best balance of simplicity and power.