typo3-typescript-sources 13.4.20

package/backend/settings/editor/editable-setting.ts

@@ -0,0 +1,231 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { html, LitElement, type TemplateResult, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+import { until } from 'lit/directives/until.js';
+import '@typo3/backend/element/icon-element';
+import { copyToClipboard } from '@typo3/backend/copy-to-clipboard';
+import Notification from '@typo3/backend/notification';
+import { lll } from '@typo3/core/lit-helper';
+import { markdown } from '@typo3/core/directive/markdown';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { BaseElement } from '@typo3/backend/settings/type/base';
+import { SettingsMode, sanitizeSettingsMode } from '@typo3/backend/settings/enum/settings-mode.enum';
+
+type ValueType = string|number|boolean|string[]|null;
+
+/** @see \TYPO3\CMS\Core\Settings\SettingDefinition */
+interface SettingDefinition {
+  key: string,
+  type: string,
+  default: ValueType,
+  label: string,
+  description: string|null,
+  readonly: boolean,
+  // @todo php json_encode encodes ['0' => 'foo'] as ['foo'] instead of {'0' => 'foo'}
+  enum: Record<string, string>|Array<string>,
+  categories: string[],
+  tags: string[],
+  options: Record<string, unknown>,
+}
+
+/** @see \TYPO3\CMS\Backend\Dto\Settings\EditableSetting */
+interface EditableSetting {
+  definition: SettingDefinition,
+  value: ValueType,
+  systemDefault: ValueType,
+  status: string,
+  warnings: string[],
+  typeImplementation: string,
+}
+
+@customElement('typo3-backend-editable-setting')
+export class EditableSettingElement extends LitElement {
+
+  @property({ type: Object }) setting: EditableSetting;
+  @property({ type: String }) dumpuri: string;
+  @property({ type: String, converter: sanitizeSettingsMode }) mode: SettingsMode = SettingsMode.basic;
+
+  @state() hasChange: boolean = false;
+
+  typeElement: BaseElement<unknown> = null;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    const { value, systemDefault, definition } = this.setting;
+    return html`
+      <div
+        class=${`settings-item settings-item-${definition.type} ${this.hasChange ? 'has-change' : ''}`}
+        tabindex="0"
+        data-status=${JSON.stringify(value) === JSON.stringify(systemDefault) ? 'none' : 'modified'}
+      >
+        <!-- data-status=modified|error|none-->
+        <div class="settings-item-indicator"></div>
+        <div class="settings-item-title">
+          <label for=${`setting-${definition.key}`} class="settings-item-label">${definition.label}</label>
+          <div class="settings-item-description">${markdown(definition.description ?? '', 'minimal')}</div>
+          ${this.mode === SettingsMode.advanced ? html`<div class="settings-item-key">${definition.key}</div>` : nothing}
+        </div>
+        <div class="settings-item-control">
+          ${until(this.renderField(), nothing)}
+        </div>
+        <div class="settings-item-message"></div>
+        <div class="settings-item-actions">
+          ${this.renderActions()}
+        </div>
+      </div>
+    `;
+  }
+
+  protected renderField(): HTMLElement|Promise<HTMLElement> {
+    if (this.typeElement !== null) {
+      this.updateFieldAttributes(this.typeElement);
+      return this.typeElement;
+    }
+
+    return (async (): Promise<HTMLElement> => {
+      const { typeImplementation } = this.setting;
+      const implementation = await import(typeImplementation);
+      if (!('componentName' in implementation)) {
+        throw new Error(`module ${typeImplementation} is missing the "componentName" export`);
+      }
+      const element = document.createElement(implementation.componentName);
+
+      element.addEventListener('typo3:setting:changed', (e: CustomEvent) => {
+        this.hasChange = JSON.stringify(this.setting.value) !== JSON.stringify(e.detail.value);
+      });
+
+      this.updateFieldAttributes(element);
+      this.typeElement = element;
+      return element;
+    })();
+  }
+
+  protected updateFieldAttributes(element: HTMLElement): void {
+    const { definition, value } = this.setting;
+    // Force conversion to an object, as PHP json_encode encodes ['0' => 'foo'] as
+    // ['foo'] instead of {'0' => 'foo'}
+    const enumEntries = Object.entries(definition.enum || {});
+
+    const attributes = {
+      key: definition.key,
+      formid: `setting-${definition.key}`,
+      name: `settings[${definition.key}]`,
+      value: Array.isArray(value) ? JSON.stringify(value) : String(value),
+      debug: this.mode === SettingsMode.advanced,
+      readonly: definition.readonly,
+      enum: enumEntries.length > 0 ? JSON.stringify(Object.fromEntries(enumEntries)) : false,
+      default: Array.isArray(definition.default) ? JSON.stringify(definition.default) : String(definition.default),
+      options: definition.options ? (Array.isArray(definition.options) && definition.options.length === 0 ? '{}' : JSON.stringify(definition.options)) : '{}',
+    };
+    for (const [key, value] of Object.entries(attributes)) {
+      if (typeof value === 'boolean') {
+        if (value && !element.hasAttribute(key)) {
+          element.setAttribute(key, '');
+        }
+        if (!value && element.hasAttribute(key)) {
+          element.removeAttribute(key);
+        }
+        continue;
+      }
+      if (element.getAttribute(key) !== value) {
+        element.setAttribute(key, value);
+      }
+    }
+  }
+
+  protected renderActions(): TemplateResult {
+    const { definition } = this.setting;
+    return html`
+      <div class="dropdown">
+        <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+          <typo3-backend-icon identifier="actions-cog" size="small"></typo3-backend-icon>
+          <span class="visually-hidden">More actions</span>
+        </button>
+        <ul class="dropdown-menu">
+          <li>
+            <button class="dropdown-item dropdown-item-spaced"
+              type="button"
+              ?disabled=${definition.readonly}
+              @click="${() => this.setToDefaultValue()}">
+              <typo3-backend-icon identifier="actions-undo" size="small"></typo3-backend-icon> ${lll('settingseditor.edit.resetSetting')}
+            </button>
+          </li>
+          ${this.mode === SettingsMode.advanced ? html`
+            <li><hr class="dropdown-divider"></li>
+            <li>
+              <typo3-copy-to-clipboard
+                text=${definition.key}
+                class="dropdown-item dropdown-item-spaced"
+              >
+                <typo3-backend-icon identifier="actions-clipboard" size="small"></typo3-backend-icon> ${lll('settingseditor.edit.copySettingsIdentifier')}
+              </typo3-copy-to-clipboard>
+            </li>
+            ${this.dumpuri ? html`
+              <li>
+                <button class="dropdown-item dropdown-item-spaced"
+                  type="button"
+                  @click="${() => this.copyAsYaml()}">
+                  <typo3-backend-icon identifier="actions-clipboard-paste" size="small"></typo3-backend-icon> ${lll('settingseditor.edit.copyAsYaml')}
+                </a>
+              </li>
+            ` : nothing}
+          ` : nothing}
+        </ul>
+      </div>
+    `;
+  }
+
+  protected setToDefaultValue(): void {
+    if (this.typeElement) {
+      this.typeElement.value = this.setting.systemDefault as unknown;
+      // Explicitly request update, since the live value may be different
+      // to the property value, if the live value is an invalid value
+      this.typeElement.requestUpdate('value');
+    }
+  }
+
+  protected async copyAsYaml(): Promise<void> {
+    const formData = new FormData(this.typeElement.form);
+    const name = `settings[${this.setting.definition.key}]`;
+    const value = formData.get(name);
+
+    const data = new FormData();
+    data.append('specificSetting', this.setting.definition.key);
+    data.append(name, value);
+
+    // @todo hookup with NProgress
+    const response = await new AjaxRequest(this.dumpuri).post(
+      data
+    );
+
+    const result = await response.resolve();
+
+    if (typeof result.yaml === 'string') {
+      copyToClipboard(result.yaml);
+    } else {
+      console.warn('Value can not be copied to clipboard.', typeof result.yaml);
+      Notification.error(lll('copyToClipboard.error'));
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-editable-setting': EditableSettingElement;
+  }
+}

package/backend/settings/editor.ts

@@ -0,0 +1,451 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { html, LitElement, type TemplateResult, nothing, type PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+import { live } from 'lit/directives/live.js';
+import '@typo3/backend/element/spinner-element';
+import '@typo3/backend/element/icon-element';
+import Notification from '@typo3/backend/notification';
+import DomHelper from '@typo3/backend/utility/dom-helper';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import { copyToClipboard } from '@typo3/backend/copy-to-clipboard';
+import { lll } from '@typo3/core/lit-helper';
+import { markdown } from '@typo3/core/directive/markdown';
+import '@typo3/backend/settings/editor/editable-setting';
+import { SettingsMode, sanitizeSettingsMode } from '@typo3/backend/settings/enum/settings-mode.enum';
+import '@typo3/backend/element/icon-element';
+
+// preload known/common types
+import '@typo3/backend/settings/type/bool';
+import '@typo3/backend/settings/type/int';
+import '@typo3/backend/settings/type/number';
+import '@typo3/backend/settings/type/string';
+import '@typo3/backend/settings/type/stringlist';
+
+type ValueType = string|number|boolean|string[]|null;
+
+export interface Category {
+  key: string,
+  label: string,
+  description: string,
+  icon: string,
+  settings: EditableSetting[],
+  categories: Category[],
+}
+
+interface FilteredCategory extends Category {
+  settings: FilteredEditableSetting[],
+  categories: FilteredCategory[],
+  // runtime value calculated depending on filter (user entered search term)
+  __hidden: boolean,
+}
+
+/** @see \TYPO3\CMS\Core\Settings\SettingDefinition */
+export interface SettingDefinition {
+  key: string,
+  type: string,
+  default: ValueType,
+  label: string,
+  description?: string|null,
+  enum: ValueType[],
+  categories: string[],
+  tags: string[],
+  options: Record<string, unknown>,
+}
+
+/** @see \TYPO3\CMS\Backend\Dto\Settings\EditableSetting */
+export interface EditableSetting {
+  definition: SettingDefinition,
+  value: ValueType,
+  systemDefault: ValueType,
+  status: string,
+  warnings: string[],
+  typeImplementation: string,
+}
+
+interface FilteredEditableSetting extends EditableSetting {
+  // runtime value calculated depending on filter (user entered search term)
+  __hidden: boolean,
+}
+
+export type SettingsEditorNormalizedFormData = Record<string, string> & {
+  settings: Record<string, string>;
+};
+
+export class SettingsEditorSubmitEvent extends Event {
+  static readonly eventName = 'typo3:settings-editor:submit';
+
+  constructor(
+    public readonly originalEvent: SubmitEvent,
+    public readonly formData: SettingsEditorNormalizedFormData,
+  ) {
+    super(SettingsEditorSubmitEvent.eventName, {
+      bubbles: true,
+      composed: true,
+      cancelable: false,
+    });
+  }
+}
+
+@customElement('typo3-backend-settings-editor')
+export class SettingsEditorElement extends LitElement {
+
+  @property({ type: Array }) categories: Category[];
+  @property({ type: String, attribute: 'form-name' }) formName: string = 'settings_form';
+  @property({ type: String, attribute: 'action-url' }) actionUrl: string;
+  @property({ type: String, attribute: 'dump-url' }) dumpUrl: string;
+  @property({ type: Object, attribute: 'custom-form-data' }) customFormData: Record<string, string> = {};
+  @property({ type: String, converter: sanitizeSettingsMode }) mode: SettingsMode = SettingsMode.basic;
+
+  @state() searchTerm: string = '';
+  @state() activeCategory: string = '';
+
+  visibleCategories: Record<string, boolean> = {};
+  observer: IntersectionObserver = null;
+
+  public override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected adjustNavigationSize(): void {
+    const scrollableParent = DomHelper.scrollableParent(this);
+    const container = this.querySelector('.settings-navigation-inner') as HTMLElement;
+    const settingsSearchElement = this.querySelector('.settings-search') as HTMLElement | null;
+    const settingsNavigationElement = this.querySelector('.settings-navigation') as HTMLElement | null;
+    if (settingsNavigationElement === null) {
+      return;
+    }
+
+    if (container) {
+      const scrollableParentRect = scrollableParent.getBoundingClientRect();
+      const navigationRect = settingsNavigationElement.getBoundingClientRect();
+      const startPosition = settingsSearchElement?.getBoundingClientRect().bottom ?? Math.max(scrollableParentRect.top, container.getBoundingClientRect().top);
+      const maxHeight = scrollableParentRect.bottom - Math.max(0, scrollableParentRect.bottom - navigationRect.bottom) - startPosition;
+      container.style.maxHeight = `${maxHeight}px`;
+    }
+  }
+
+  protected override firstUpdated(): void {
+    const scrollableParent = DomHelper.scrollableParent(this);
+    scrollableParent.addEventListener('scroll', () => {
+      this.adjustNavigationSize();
+    });
+  }
+
+  protected override updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('mode') && this.mode === SettingsMode.minimal) {
+      this.observer?.disconnect();
+      this.observer = null;
+    } else if (changedProperties.has('mode') && this.mode !== SettingsMode.minimal) {
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach(entry => {
+            const key = (entry.target as HTMLElement).dataset.key;
+            this.visibleCategories[key] = entry.isIntersecting;
+          });
+          const flatten = (list: Category[]): string[] => list.reduce((acc, c) => [...acc, c.key, ...flatten(c.categories)], []);
+          const active = flatten(this.categories).filter(key => this.visibleCategories[key])[0] || '';
+          if (active) {
+            this.activeCategory = active;
+          }
+        },
+        {
+          root: DomHelper.scrollableParent(this),
+          threshold: 0.1,
+        }
+      );
+    }
+
+    [...this.renderRoot.querySelectorAll('.settings-category')].map(entry => this.observer?.observe(entry));
+    this.adjustNavigationSize();
+
+    if (changedProperties.has('activeCategory')) {
+      const container = this.querySelector('.settings-navigation-inner');
+      const activeElement = this.querySelector('.settings-navigation-item.active') as HTMLElement;
+      if (container && activeElement) {
+        const currentScrollPosition = container.scrollTop;
+        const containerHeight = container.getBoundingClientRect().height;
+        const nodeHeight = activeElement.getBoundingClientRect().height;
+        const nodeFitsTop = activeElement.offsetTop >= currentScrollPosition;
+        const nodeFitsBottom = activeElement.offsetTop + nodeHeight <= currentScrollPosition + containerHeight;
+        if (!nodeFitsTop) {
+          this.querySelector('.settings-navigation-inner').scrollTo({ top: Math.max(0, activeElement.offsetTop - nodeHeight), behavior: 'auto' });
+        } else if (!nodeFitsBottom) {
+          this.querySelector('.settings-navigation-inner').scrollTo({ top: Math.max(0, activeElement.offsetTop + nodeHeight), behavior: 'auto' });
+        }
+      }
+    }
+  }
+
+  protected renderCategoryTree(categories: FilteredCategory[], level: number): TemplateResult {
+    return html`
+      <ul data-level=${level}>
+        ${categories.map(category => html`
+          <li ?hidden=${category.__hidden}>
+            <button
+              type="button"
+              @click=${(event: PointerEvent) => { event.preventDefault(); this.selectCategory(category);}}
+              class="settings-navigation-item ${this.activeCategory === category.key ? 'active' : ''}"
+            >
+                <span class="settings-navigation-item-icon">
+                  <typo3-backend-icon identifier=${category.icon ? category.icon : 'actions-chevron-end'} size="small"></typo3-backend-icon>
+                </span>
+              <span class="settings-navigation-item-label">${category.label}</span>
+            </button>
+            ${category.categories.length === 0 ? nothing : html`
+              ${this.renderCategoryTree(category.categories, level + 1)}
+            `}
+          </li>
+        `)}
+      </ul>
+    `;
+  }
+
+  protected renderSettings(categories: FilteredCategory[], level: number): TemplateResult[] {
+    return categories.map(category => html`
+      <div class="settings-category-list" data-key=${category.key}>
+        <div class="settings-category" data-key=${category.key} ?hidden=${category.__hidden}>
+          ${this.renderHeadline(Math.min(level + 1, 6), `category-headline-${category.key}`, category.icon, html`${category.label}`)}
+          <div class="settings-category-description">
+            ${category.description ? markdown(category.description, 'minimal') : nothing}
+          </div>
+        </div>
+        ${category.settings.map((setting): TemplateResult => html`
+          <typo3-backend-editable-setting
+              ?hidden=${setting.__hidden}
+              .setting=${setting}
+              .dumpuri=${this.dumpUrl}
+              .mode=${this.mode}
+          ></typo3-backend-editable-setting>
+        `)}
+      </div>
+      ${category.categories.length === 0 ? nothing : html`
+        ${this.renderSettings(category.categories, level + 1)}
+      `}
+    `);
+  }
+
+  protected renderHeadline(level: number, id: string, icon: string, content: TemplateResult): TemplateResult {
+    switch (level) {
+      case 1:
+        return html`<h1 class="settings-category-headline" id=${id}>${icon ? html`<typo3-backend-icon identifier=${icon}></typo3-backend-icon>` : nothing}${content}</h1>`;
+      case 2:
+        return html`<h2 class="settings-category-headline" id=${id}>${icon ? html`<typo3-backend-icon identifier=${icon}></typo3-backend-icon>` : nothing}${content}</h2>`;
+      case 3:
+        return html`<h3 class="settings-category-headline" id=${id}>${icon ? html`<typo3-backend-icon identifier=${icon}></typo3-backend-icon>` : nothing}${content}</h3>`;
+      case 4:
+        return html`<h4 class="settings-category-headline" id=${id}>${icon ? html`<typo3-backend-icon identifier=${icon}></typo3-backend-icon>` : nothing}${content}</h4>`;
+      case 5:
+        return html`<h5 class="settings-category-headline" id=${id}>${icon ? html`<typo3-backend-icon identifier=${icon}></typo3-backend-icon>` : nothing}${content}</h5>`;
+      case 6:
+        return html`<h6 class="settings-category-headline" id=${id}>${icon ? html`<typo3-backend-icon identifier=${icon}></typo3-backend-icon>` : nothing}${content}</h6>`;
+      default:
+        throw new Error(`Invalid header level: ${level}`);
+    }
+  }
+
+  protected selectCategory(category: FilteredCategory): void {
+    const targetSelector = `#category-headline-${category.key}`;
+    const target = (this.renderRoot.querySelector(targetSelector.replaceAll('.', '\\.')) as HTMLElement);
+    const scrollableParent = DomHelper.scrollableParent(this);
+    const searchOffset = (this.renderRoot.querySelector('.settings-search') as HTMLElement).offsetHeight;
+    const bodyOffset = parseInt(window.getComputedStyle(this.renderRoot.querySelector('.settings-body-inner') as HTMLElement).paddingTop, 10);
+    const topPosition = target.offsetTop - searchOffset - bodyOffset;
+    scrollableParent.scrollTo({
+      top: topPosition,
+      behavior: 'smooth'
+    });
+    this.activeCategory = category.key;
+  }
+
+  protected async onSubmit(e: SubmitEvent): Promise<void> {
+    const form = e.target as HTMLFormElement;
+    const formData = new FormData(form);
+    const normalizedData = {
+      settings: {},
+    } as SettingsEditorNormalizedFormData;
+    formData.forEach((value, key) => {
+      const match = key.match(/^settings\[(.+?)\]$/);
+      if (match) {
+        normalizedData.settings[match[1]] = typeof value === 'string' ? value : (value as File).name;
+      } else {
+        normalizedData[key] = typeof value === 'string' ? value : (value as File).name;
+      }
+    });
+    this.dispatchEvent(new SettingsEditorSubmitEvent(e, normalizedData));
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    if ((e.submitter as HTMLButtonElement|null)?.value === 'export') {
+      e.preventDefault();
+      const formData = new FormData(form);
+      const response = await new AjaxRequest(this.dumpUrl).post(formData);
+
+      const result = await response.resolve();
+      if (typeof result.yaml === 'string') {
+        copyToClipboard(result.yaml);
+      } else {
+        console.warn('Value can not be copied to clipboard.', typeof result.yaml);
+        Notification.error(lll('copyToClipboard.error'));
+      }
+    }
+  }
+
+  protected async onSearch(e: Event): Promise<void> {
+    e.preventDefault();
+    this.searchTerm = (e.currentTarget as HTMLInputElement).value;
+  }
+
+  protected override render(): TemplateResult {
+    const categories = this.filterCategories();
+    const hasVisibleCategories = categories.filter(c => !c.__hidden).length > 0;
+    return html`
+      <form class="settings-container"
+            id=${this.formName}
+            name=${this.formName}
+            action=${this.actionUrl}
+            method="post"
+            @submit=${(e: SubmitEvent) => this.onSubmit(e)}
+      >
+        ${Object.entries(this.customFormData).map(([name, value]) => html`
+          <input type="hidden" name=${name} value=${value}>
+        `)}
+
+        <div class="settings">
+
+          ${this.mode !== SettingsMode.minimal ? html`
+            <div class="settings-search">
+              <label for="settings-search" class="visually-hidden">
+                ${lll('settingseditor.search.searchTermVisuallyHiddenLabel')}
+              </label>
+              <input
+                type="search"
+                id="settings-search"
+                class="form-control"
+                placeholder=${lll('settingseditor.search.searchTermPlaceholder')}
+                .value=${live(this.searchTerm)}
+                @change=${(e: Event) => this.onSearch(e)}
+                @input=${(e: Event) => this.onSearch(e)}>
+            </div>
+            ` : nothing }
+
+          ${this.mode !== SettingsMode.minimal ? html`
+            <div class="settings-navigation" ?hidden=${!hasVisibleCategories}>
+              <div
+                class="settings-navigation-inner"
+                @transitionend="${() => this.adjustNavigationSize()}"
+              >
+                ${this.renderCategoryTree(categories ?? [], 1)}
+              </div>
+            </div>
+            ` : nothing }
+
+          <div class="settings-body" ?hidden=${!hasVisibleCategories}>
+            <div class="settings-body-inner">
+              ${this.renderSettings(categories ?? [], 1)}
+            </div>
+          </div>
+        </div>
+
+        ${hasVisibleCategories ? nothing : html`
+          <div class="callout callout-info mt-3">
+            <div class="callout-icon">
+              <span class="icon-emphasized">
+                <typo3-backend-icon identifier="actions-info" size="small"></typo3-backend-icon>
+              </span>
+            </div>
+            <div class="callout-content">
+              <div class="callout-title">${lll('settingseditor.search.noResultsTitle')}</div>
+              <div class="callout-body">
+                <p>${lll('settingseditor.search.noResultsMessage')}</p>
+                <button
+                    type="button"
+                    class="btn btn-default"
+                    @click=${() => this.searchTerm = ''}
+                  >${lll('settingseditor.search.noResultsResetButtonLabel')}</button>
+              </div>
+            </div>
+          </div>
+        `}
+      </form>
+    `;
+  }
+
+  protected filterCategories(categories: Category[] = null): FilteredCategory[] {
+    categories ??= this.categories;
+    return categories.map(category => {
+      const settings = this.filterSettings(category.settings);
+      const subcategories = this.filterCategories(category.categories);
+      const hasVisibleSettings = settings.filter(setting => !setting.__hidden).length > 0;
+      const hasVisibleSubcategories = subcategories.filter(c => !c.__hidden).length > 0;
+      return {
+        ...category,
+        settings,
+        categories: subcategories,
+        __hidden: !hasVisibleSettings && !hasVisibleSubcategories
+      };
+    });
+  }
+
+  protected filterSettings(settings: EditableSetting[]): FilteredEditableSetting[] {
+    return settings.map((setting) => {
+      return {
+        ...setting,
+        __hidden: !(
+          this.matchesSearchTerm(setting.definition.key) ||
+          this.matchesSearchTerm(setting.definition.label) ||
+          this.matchesSearchTerm(setting.definition.description ?? '') ||
+          this.valueMatchesSearchTerm(setting.value) ||
+          setting.definition.tags.filter(tag => this.matchesSearchTerm(tag)).length > 0
+        )
+      };
+    });
+  }
+
+  protected matchesSearchTerm(input: string): boolean {
+    if (this.searchTerm === '') {
+      return true;
+    }
+    return this.matchesSubstring(input, this.searchTerm);
+  }
+
+  protected valueMatchesSearchTerm(value: ValueType): boolean {
+    if (typeof value === 'string') {
+      return this.matchesSearchTerm(value);
+    }
+    if (Array.isArray(value)) {
+      return value.filter(v => typeof v === 'string' && this.matchesSearchTerm(v)).length > 0;
+    }
+    return false;
+  }
+
+  protected matchesSubstring(input: string, searchString: string): boolean {
+    return input.toLowerCase().includes(searchString.toLowerCase());
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-settings-editor': SettingsEditorElement;
+  }
+  interface HTMLElementEventMap {
+    [SettingsEditorSubmitEvent.eventName]: SettingsEditorSubmitEvent;
+  }
+}