typo3-typescript-sources 14.3.7 → 14.3.9

package/backend/form-engine/element/select-tree.ts

@@ -65,7 +65,7 @@ export class SelectTree extends Tree
    * Expand all nodes and refresh view
    */
   public expandAll(): void {
-    this.nodes.forEach((node: TreeNodeInterface) => { this.showChildren(node); });
+    this.nodes.forEach((node) => { this.showChildren(node); });
   }
 
   /**
@@ -105,7 +105,7 @@ export class SelectTree extends Tree
     // A plain substring match, no RegExp involved, therefore nothing to escape either
     const foldedSearchTerm = SelectTree.fold(searchTerm ?? '');
 
-    this.nodes.forEach((node: any) => {
+    this.nodes.forEach((node) => {
       // skip the root node in searches
       if (node === firstNode) {
         return;
@@ -190,7 +190,7 @@ export class SelectTree extends Tree
    */
   private prepareLoadedNodes(evt: CustomEvent): void {
     const nodes = evt.detail.nodes as Array<TreeNodeInterface>;
-    evt.detail.nodes = nodes.map((node: TreeNodeInterface) => {
+    evt.detail.nodes = nodes.map((node) => {
       if (node.selectable === false) {
         this.settings.unselectableElements.push(node.identifier);
       }

package/backend/form-engine/element/slug-element.ts

@@ -88,7 +88,7 @@ class SlugElement {
   }
 
   private registerEvents(): void {
-    const fieldsToListenOnList = Object.values(this.getAvailableFieldsForProposalGeneration()).map((field: HTMLElement) => field.dataset.slugSelector);
+    const fieldsToListenOnList = Object.values(this.getAvailableFieldsForProposalGeneration()).map((field) => field.dataset.slugSelector);
     const recreateButton: HTMLButtonElement = this.fullElement.querySelector(Selectors.recreateButton);
 
     // Listen on 'listenerFieldNames' for new pages. This is typically the 'title' field
@@ -158,7 +158,7 @@ class SlugElement {
   private sendSlugProposal(mode: ProposalModes): void {
     const input: Record<string, string> = {};
     if (mode === ProposalModes.AUTO || mode === ProposalModes.RECREATE) {
-      Object.entries(this.getAvailableFieldsForProposalGeneration()).forEach((entry: [fieldName: string, field: HTMLInputElement|HTMLSelectElement]) => {
+      Object.entries(this.getAvailableFieldsForProposalGeneration()).forEach((entry) => {
         input[entry[0]] = entry[1].value;
       });
       if (this.options.includeUidInValues === true) {
@@ -214,18 +214,18 @@ class SlugElement {
    *
    * @return Record<string, string>
    */
-  private getAvailableFieldsForProposalGeneration(): { [key: string]: HTMLElement } {
-    const availableFields: { [key: string]: HTMLElement } = {};
+  private getAvailableFieldsForProposalGeneration(): { [key: string]: HTMLInputElement|HTMLSelectElement } {
+    const availableFields: { [key: string]: HTMLInputElement|HTMLSelectElement } = {};
     for (const [fieldName, selector] of Object.entries(this.fieldsToListenOn)) {
       const selectorCandidates = [
         '[data-formengine-input-name="' + selector + '"]',
         // Also check for fields, which do not point to a hidden input field (e.g. "input type=hidden", readOnly, or select fields)
         '[name="' + selector + '"]'
       ];
-      let field: HTMLElement;
+      let field: HTMLInputElement|HTMLSelectElement;
       let usedSelector = '';
-      selectorCandidates.some((testSelector: string) => {
-        field = document.querySelector(testSelector) as HTMLElement;
+      selectorCandidates.some((testSelector) => {
+        field = document.querySelector<HTMLInputElement|HTMLSelectElement>(testSelector);
         usedSelector = testSelector;
         return field !== null;
       });

package/backend/form-engine/element/suggest/result-container.ts

@@ -44,7 +44,7 @@ export class ResultContainer extends LitElement {
       if (this.results.length === 0) {
         content = html`<div class="alert alert-info">${labels.get('search.no_records_found')}</div>`;
       } else {
-        content = html`${this.results.map((result: ResultItemInterface) => this.renderResultItem(result))}`;
+        content = html`${this.results.map((result) => this.renderResultItem(result))}`;
       }
     }
 

package/backend/form-engine/element/table-wizard-element.ts

@@ -73,7 +73,7 @@ export class TableWizardElement extends LitElement {
     const textarea: HTMLTextAreaElement = document.querySelector(this.selectorData);
     const table: string[][] = [];
 
-    textarea.value.split('\n').forEach((row: string) => {
+    textarea.value.split('\n').forEach((row) => {
       if (row !== '') {
         if(this.enclosure) {
           row = row.replace(new RegExp(this.enclosure, 'g'), '');
@@ -167,7 +167,7 @@ export class TableWizardElement extends LitElement {
 
   private renderTemplate(): TemplateResult {
     this.provideMinimalTable();
-    const colIndexes = Object.keys(this.firstRow).map((item: string) => parseInt(item, 10));
+    const colIndexes = Object.keys(this.firstRow).map((item) => parseInt(item, 10));
     const lastColIndex = colIndexes[colIndexes.length - 1];
     const lastRowIndex = this.table.length - 1;
 
@@ -176,7 +176,7 @@ export class TableWizardElement extends LitElement {
         <table class="table table-center">
           <thead>
             <th>${this.renderTypeButton()}</th>
-            ${colIndexes.map((colIndex: number) => html`
+            ${colIndexes.map((colIndex) => html`
             <th>${this.renderColButtons(colIndex, lastColIndex)}</th>
             `)}
           </thead>
@@ -184,7 +184,7 @@ export class TableWizardElement extends LitElement {
             ${this.table.map((row: string[], rowIndex: number) => html`
             <tr>
               <td>${this.renderRowButtons(rowIndex, lastRowIndex)}</td>
-              ${row.map((value: string, colIndex: number) => html`
+              ${row.map((value, colIndex) => html`
               <td>${this.renderDataElement(value, rowIndex, colIndex)}</td>
               `)}
             </tr>

package/backend/form-engine/inline-relation/ajax-dispatcher.ts

@@ -57,9 +57,9 @@ export class AjaxDispatcher {
     throw 'Undefined endpoint for route "' + routeName + '"';
   }
 
-  public send(request: AjaxRequest, params: Array<string>): Promise<AjaxDispatcherResponse> {
-    const sentRequest = request.post(this.createRequestBody(params)).then(async (response: AjaxResponse): Promise<AjaxDispatcherResponse> => {
-      return this.processResponse(await response.resolve());
+  public send<T extends AjaxDispatcherResponse = AjaxDispatcherResponse>(request: AjaxRequest, params: Array<string>): Promise<T> {
+    const sentRequest = request.post(this.createRequestBody(params)).then(async (response: AjaxResponse): Promise<T> => {
+      return this.processResponse(await response.resolve()) as T;
     });
     sentRequest.catch((reason: Error): void => {
       if (reason instanceof DOMException && reason.name === 'AbortError') {

package/backend/form-engine-validation.ts

@@ -65,7 +65,7 @@ export default class FormEngineValidation {
    */
   public static initialize(formEngine: typeof FormEngine): void {
     formEngineInstance = formEngine;
-    formEngineInstance.formElement.querySelectorAll('.' + FormEngineValidation.errorClass).forEach((e: HTMLElement) => e.classList.remove(FormEngineValidation.errorClass));
+    formEngineInstance.formElement.querySelectorAll<HTMLElement>('.' + FormEngineValidation.errorClass).forEach((e) => e.classList.remove(FormEngineValidation.errorClass));
 
     // Initialize input fields
     FormEngineValidation.initializeInputFields();
@@ -91,7 +91,7 @@ export default class FormEngineValidation {
    * Initialize all input fields
    */
   public static initializeInputFields(): void {
-    formEngineInstance.formElement.querySelectorAll(FormEngineValidation.inputSelector).forEach((visibleField: FormEngineFieldElement): void => {
+    formEngineInstance.formElement.querySelectorAll<FormEngineFieldElement>(FormEngineValidation.inputSelector).forEach((visibleField): void => {
       // ignore fields which already have been initialized
       if ('formengineInputInitialized' in visibleField.dataset) {
         return;
@@ -500,7 +500,7 @@ export default class FormEngineValidation {
    */
   public static validate(section?: Element): void {
     if (typeof section === 'undefined' || section instanceof Document) {
-      formEngineInstance.formElement.querySelectorAll(FormEngineValidation.markerSelector + ', [role="tablist"] > .nav-item').forEach((tabMenuItem: HTMLElement): void => {
+      formEngineInstance.formElement.querySelectorAll<HTMLElement>(FormEngineValidation.markerSelector + ', [role="tablist"] > .nav-item').forEach((tabMenuItem): void => {
         tabMenuItem.classList.remove(FormEngineValidation.validationErrorClass);
       });
     }
@@ -568,8 +568,8 @@ export default class FormEngineValidation {
    * Find tab by field and mark it as has-validation-error
    */
   public static markParentTab(element: FormEngineFieldElement, isValid: boolean): void {
-    const panes = DomHelper.parents(element, '.tab-pane');
-    panes.forEach((pane: HTMLElement): void => {
+    const panes = DomHelper.parents<HTMLElement>(element, '.tab-pane');
+    panes.forEach((pane): void => {
       if (isValid) {
         // If incoming element is valid, check for errors in the same sheet
         isValid = pane.querySelector('.has-error') === null;
@@ -631,3 +631,9 @@ export default class FormEngineValidation {
     });
   }
 }
+
+declare global {
+  interface HTMLElementEventMap {
+    't3-formengine-postfieldvalidation': CustomEvent<PostValidationEvent>;
+  }
+}

package/backend/form-engine.ts

@@ -65,7 +65,7 @@ const enum FormAction {
   saveAndAddRecord = '_savedokaddrecord',
 }
 
-type OnChangeFieldHandlerCallback = (data: object, e: Event) => void;
+type OnChangeFieldHandlerCallback = (data: never, e: Event) => void;
 type PreviewActionCallback = (targetName: string, previewUrl: string, $actionElement: JQuery, modal: ModalElement) => void;
 type NewActionCallback = (targetName: string, $actionElement: JQuery) => void;
 type DuplicateActionCallback = (targetName: string, $actionElement: JQuery) => void;
@@ -236,7 +236,7 @@ export default (function() {
     return Modal.advanced({
       type: Modal.types.iframe,
       content: FormEngine.browserUrl + '&' + (new URLSearchParams(queryParams)).toString(),
-      size: Modal.sizes.large
+      size: Modal.sizes.full
     });
   };
 
@@ -318,7 +318,7 @@ export default (function() {
         }
 
         if (reenableOptions && typeof optionEl !== 'undefined') {
-          optionEl.closest('select').querySelectorAll('[disabled]').forEach(function (disabledOption: HTMLOptionElement) {
+          optionEl.closest('select').querySelectorAll<HTMLOptionElement>('[disabled]').forEach(function (disabledOption) {
             disabledOption.classList.remove('hidden');
             disabledOption.disabled = false;
             FormEngine.enableOptGroup(disabledOption);
@@ -394,7 +394,7 @@ export default (function() {
    * @param {HTMLElement} originalFieldEl the hidden form field
    */
   FormEngine.updateHiddenFieldValueFromSelect = function(selectFieldEl: HTMLSelectElement, originalFieldEl: HTMLSelectElement): void {
-    const selectedValues: string[] = Array.from(selectFieldEl.options).map((el: HTMLOptionElement) => el.value);
+    const selectedValues: string[] = Array.from(selectFieldEl.options).map((el) => el.value);
 
     // make a comma separated list, if it is a multi-select
     // set the values to the final hidden field
@@ -672,8 +672,8 @@ export default (function() {
       }
     };
 
-    const minlengthElements = document.querySelectorAll('[minlength]:not([data-input-type="datetimepicker"]):not(.t3js-charcounter-min-initialized)');
-    minlengthElements.forEach((field: HTMLInputElement|HTMLTextAreaElement) => {
+    const minlengthElements = document.querySelectorAll<HTMLInputElement|HTMLTextAreaElement>('[minlength]:not([data-input-type="datetimepicker"]):not(.t3js-charcounter-min-initialized)');
+    minlengthElements.forEach((field) => {
       field.addEventListener('focus', (event) => {
         const minCharacterCountLeft = FormEngine.getMinCharacterLeftCount(field);
         if (minCharacterCountLeft > 0) {
@@ -720,7 +720,7 @@ export default (function() {
    * Initialize input / text field "null" checkbox CSS overlay if no placeholder is set.
    */
   FormEngine.initializeNullNoPlaceholderCheckboxes = function(): void {
-    document.querySelectorAll('.t3-form-field-eval-null-checkbox').forEach((el: HTMLElement) => {
+    document.querySelectorAll<HTMLElement>('.t3-form-field-eval-null-checkbox').forEach((el) => {
       // Add disabled class to "t3js-formengine-field-item" if the null checkbox is NOT set,
       // This activates a CSS overlay "disabling" the input field and everything around.
       const checkbox = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
@@ -735,7 +735,7 @@ export default (function() {
    * Initialize input / text field "null" checkbox placeholder / real field if placeholder is set.
    */
   FormEngine.initializeNullWithPlaceholderCheckboxes = function(): void {
-    document.querySelectorAll('.t3js-form-field-eval-null-placeholder-checkbox').forEach((el: HTMLElement) => {
+    document.querySelectorAll<HTMLElement>('.t3js-form-field-eval-null-placeholder-checkbox').forEach((el) => {
       FormEngine.toggleCheckboxField(el.querySelector('input[type="checkbox"]'), false);
     });
   };
@@ -787,7 +787,7 @@ export default (function() {
    * Disable the input field on load if localization state selector is set to "parent" or "source"
    */
   FormEngine.initializeLocalizationStateSelector = function(): void {
-    document.querySelectorAll('.t3js-l10n-state-container').forEach((el: HTMLElement) => {
+    document.querySelectorAll<HTMLElement>('.t3js-l10n-state-container').forEach((el) => {
       const input = el.closest('.t3js-formengine-field-item')?.querySelector('[data-formengine-input-name]') as HTMLInputElement|null;
       if (input === undefined || input === null) {
         return;
@@ -1011,7 +1011,7 @@ export default (function() {
     items.forEach((item) => {
       const handler = onFieldChangeHandlers.get(item.name);
       if (handler instanceof Function) {
-        handler.call(null, item.data || null, evt);
+        handler.call(null, (item.data || null) as never, evt);
       }
     });
   };
@@ -1033,8 +1033,12 @@ export default (function() {
   };
 
   /**
-   * Enables all doc header buttons.
-   * Called after FormEngine initialization is complete to restore button interactivity.
+   * Releases the doc header button bar, which is rendered "inert" as long as the
+   * ui block is shown, to prevent unintended operations while FormEngine is loading.
+   * Called after FormEngine initialization is complete.
+   *
+   * The block is applied to the button bar as a whole, never to the single buttons,
+   * so that the disabled state of individual buttons remains untouched.
    */
   FormEngine.enableDocHeaderButtons = function(): void {
     const docHeaderBar = document.querySelector('.t3js-module-docheader-buttons');
@@ -1042,16 +1046,8 @@ export default (function() {
       return;
     }
 
-    // Enable all buttons and links in the doc header
-    docHeaderBar.querySelectorAll('button, a, input[type="submit"]').forEach((element: HTMLElement): void => {
-      if (element instanceof HTMLButtonElement || element instanceof HTMLInputElement) {
-        element.disabled = false;
-      } else if (element instanceof HTMLAnchorElement) {
-        // For anchor elements - remove TYPO3 disabled state
-        element.classList.remove('disabled');
-        element.removeAttribute('aria-disabled');
-      }
-    });
+    docHeaderBar.removeAttribute('inert');
+    docHeaderBar.removeAttribute('aria-busy');
   };
 
   /**
@@ -1164,7 +1160,7 @@ export default (function() {
       }
     }
     const contentElement = document.createElement('p');
-    contentStrings.forEach((item: string, i: number): void => {
+    contentStrings.forEach((item, i): void => {
       contentElement.append(item);
       if (i !== contentStrings.length - 1) {
         contentElement.append(document.createElement('br'));

package/backend/global-event-handler.ts

@@ -228,7 +228,7 @@ class GlobalEventHandler {
   private assignHTMLFormChildElementValue(element: HTMLElement, value: string): void {
     const type: string = element.getAttribute('type');
     if (element instanceof HTMLSelectElement) {
-      Array.from(element.options).some((option: HTMLOptionElement, index: number) => {
+      Array.from(element.options).some((option, index) => {
         if (option.value === value) {
           element.selectedIndex = index;
           return true;

package/backend/hotkeys/hotkey-struct.ts

@@ -34,7 +34,7 @@ export class HotkeyStruct {
   }
 
   public static fromHotkey(hotkey: string[]): HotkeyStruct {
-    const nonModifierCodes = hotkey.filter((hotkeyPart: string) => !Object.values<string>(ModifierKeys).includes(hotkeyPart));
+    const nonModifierCodes = hotkey.filter((hotkeyPart) => !Object.values<string>(ModifierKeys).includes(hotkeyPart));
     if (nonModifierCodes.length > 1) {
       throw new Error('Cannot create HotkeyStruct with more than one non-modifier key, "' + nonModifierCodes.join('+') + '" given.');
     }

package/backend/hotkeys.ts

@@ -60,12 +60,12 @@ class Hotkeys {
   }
 
   public register(hotkey: Hotkey, handler: (e: KeyboardEvent) => void, options: Partial<Options> = {}): void {
-    if (hotkey.filter((hotkeyPart: string) => !Object.values<string>(ModifierKeys).includes(hotkeyPart)).length === 0) {
+    if (hotkey.filter((hotkeyPart) => !Object.values<string>(ModifierKeys).includes(hotkeyPart)).length === 0) {
       throw new Error('Attempted to register hotkey "' + hotkey.join('+') + '" without a non-modifier key.');
     }
 
     // Normalize trigger
-    hotkey = hotkey.map((h: string) => h.toLowerCase());
+    hotkey = hotkey.map((h) => h.toLowerCase());
 
     const mergedConfiguration: Options = { ...this.defaultOptions, ...options };
     if (!this.scopedHotkeyMap.has(mergedConfiguration.scope)) {
@@ -161,7 +161,7 @@ class Hotkeys {
     }
 
     // The standard requires to have modifier keys to be at first
-    parts.sort((a: string, b: string): number => {
+    parts.sort((a, b): number => {
       const aIsModifierKey = Object.values<string>(ModifierKeys).includes(a);
       const bIsModifierKey = Object.values<string>(ModifierKeys).includes(b);
 

package/backend/image-manipulation.ts

@@ -280,7 +280,7 @@ class ImageManipulation {
     /**
      * Assign EventListener to cropVariantTriggers
      */
-    this.cropVariantTriggers.forEach((el: HTMLElement) =>
+    this.cropVariantTriggers.forEach((el) =>
       el.addEventListener('click', (e: Event): void => {
         /**
          * Is the current cropVariantTrigger is active, bail out.
@@ -341,8 +341,8 @@ class ImageManipulation {
       new RegularEvent('click', (): void => this.openPreview(this.data))
         .delegateTo(this.currentModal, 'button[name=preview]');
     } else {
-      this.currentModal.querySelectorAll('button[name=preview]')
-        .forEach((previewButton: HTMLElement) => previewButton.style.display = 'none');
+      this.currentModal.querySelectorAll<HTMLElement>('button[name=preview]')
+        .forEach((previewButton) => previewButton.style.display = 'none');
     }
 
     /**
@@ -400,8 +400,8 @@ class ImageManipulation {
           this.syncEnabled = target.checked;
           BrowserSession.set('sync-active-' + imageUid, this.syncEnabled ? 'true' : 'false');
           if (this.syncEnabled) {
-            this.currentModal.querySelectorAll('.panel-button[data-exclude-from-sync="true"]')
-              .forEach((e: HTMLElement) => e.setAttribute('disabled', 'disabled'));
+            this.currentModal.querySelectorAll<HTMLElement>('.panel-button[data-exclude-from-sync="true"]')
+              .forEach((e) => e.setAttribute('disabled', 'disabled'));
 
             // if the currently selected crop variant is now disabled, open the first available one.
             const isDisabled = this.currentModal.querySelector('.panel-button[data-crop-variant-id="' + this.currentCropVariant.id + '"][data-exclude-from-sync="true"]') !== null;
@@ -412,8 +412,8 @@ class ImageManipulation {
               }
             }
           } else {
-            this.currentModal.querySelectorAll('.panel-button[data-exclude-from-sync]')
-              .forEach((e: HTMLElement) => e.removeAttribute('disabled'));
+            this.currentModal.querySelectorAll<HTMLElement>('.panel-button[data-exclude-from-sync]')
+              .forEach((e) => e.removeAttribute('disabled'));
           }
         }
       ).delegateTo(this.currentModal, '#sync-crop-variants');
@@ -446,7 +446,7 @@ class ImageManipulation {
     this.imageOriginalSizeFactor = parseInt(image.dataset.originalWidth, 10) / imageData.naturalWidth;
 
     // iterate over the crop variants and set up their respective preview
-    this.cropVariantTriggers.forEach((elem: HTMLElement): void => {
+    this.cropVariantTriggers.forEach((elem): void => {
       const cropVariantId: string = elem.dataset.cropVariantId;
       const cropArea: Area = this.convertRelativeToAbsoluteCropArea(
         this.data[cropVariantId].cropArea,
@@ -507,9 +507,9 @@ class ImageManipulation {
 
     if (this.syncAvailable && this.syncEnabled) {
       const data = this.data;
-      Object.keys(this.data).forEach((cropVariant: string): void => {
+      Object.keys(this.data).forEach((cropVariant): void => {
         let trigger: HTMLElement = null;
-        this.cropVariantTriggers.forEach((e: HTMLElement) => {
+        this.cropVariantTriggers.forEach((e) => {
           if (e.dataset.cropVariantId === cropVariant) {
             trigger = e;
           }
@@ -540,9 +540,9 @@ class ImageManipulation {
 
     if (this.syncAvailable && this.syncEnabled) {
       const data = this.data;
-      Object.keys(this.data).forEach((cropVariant: string): void => {
+      Object.keys(this.data).forEach((cropVariant): void => {
         let trigger: HTMLElement = null;
-        this.cropVariantTriggers.forEach((e: HTMLElement) => {
+        this.cropVariantTriggers.forEach((e) => {
           if (e.dataset.cropVariantId === cropVariant) {
             trigger = e;
           }
@@ -579,8 +579,8 @@ class ImageManipulation {
     this.setAspectRatio(selectedRatio);
     this.setCropArea(temp.cropArea);
     this.currentCropVariant = Object.assign({}, temp, cropVariant);
-    this.cropBox?.querySelectorAll(this.coverAreaSelector)?.forEach((el: HTMLElement) => el.remove());
-    this.cropBox?.querySelectorAll(this.focusAreaSelector)?.forEach((el: HTMLElement) => el.remove());
+    this.cropBox?.querySelectorAll<HTMLElement>(this.coverAreaSelector)?.forEach((el) => el.remove());
+    this.cropBox?.querySelectorAll<HTMLElement>(this.focusAreaSelector)?.forEach((el) => el.remove());
 
     // check if new cropVariant has focusArea
     if (cropVariant.focusArea) {
@@ -655,7 +655,7 @@ class ImageManipulation {
    * @param {Array<Area>} coverAreas - An array of areas to construct the cover area elements from
    */
   private initCoverAreas(container: HTMLElement, coverAreas: Area[]): void {
-    coverAreas.forEach((coverArea: Area): void => {
+    coverAreas.forEach((coverArea): void => {
       const styles = {
         height: ImageManipulation.toCssPercent(coverArea.height),
         left: ImageManipulation.toCssPercent(coverArea.x),
@@ -782,7 +782,7 @@ class ImageManipulation {
       return false;
     }
     return coverAreas
-      .some((coverArea: Area): boolean => {
+      .some((coverArea): boolean => {
         return focusArea.x < coverArea.x + coverArea.width
           && coverArea.x < focusArea.x + focusArea.width
           && focusArea.y < coverArea.y + coverArea.height
@@ -831,7 +831,7 @@ class ImageManipulation {
     const imageData: Cropper.ImageData = this.cropper.getImageData();
 
     // iterate over the crop variants and set up their respective preview
-    Object.keys(data).forEach((cropVariantId: string) => {
+    Object.keys(data).forEach((cropVariantId) => {
       const cropVariant: CropVariant = data[cropVariantId];
       const cropData: Area = this.convertRelativeToAbsoluteCropArea(cropVariant.cropArea, imageData);
 
@@ -956,8 +956,8 @@ class ImageManipulation {
 
   private renderElements(template: TemplateResult, target: HTMLElement, selector?: string): HTMLElement|null {
     const nodes = renderNodes(template);
-    const elements = Array.from(nodes).filter((node: Node): boolean => node instanceof HTMLElement);
-    elements.forEach((element: HTMLElement) => target.appendChild(element));
+    const elements = Array.from(nodes).filter((node): node is HTMLElement => node instanceof HTMLElement);
+    elements.forEach((element) => target.appendChild(element));
     return selector ? target.querySelector(selector) : null;
   }
 }

package/backend/layout-module/column-restriction.ts

@@ -0,0 +1,61 @@
+/*
+ * 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!
+ */
+
+/**
+ * Module: @typo3/backend/layout-module/column-restriction
+ *
+ * Client-side mirror of the server-side backend layout colPos restriction
+ * (\TYPO3\CMS\Backend\View\BackendLayoutView::isCTypeAllowedInColPosByPage()).
+ * Used by drag-drop and paste in the page layout module to avoid offering
+ * actions that the DataHandler would reject anyway.
+ *
+ * @internal
+ */
+
+function toList(value: string | undefined): string[] {
+  return (value ?? '')
+    .split(',')
+    .map((item: string): string => item.trim())
+    .filter((item: string): boolean => item !== '');
+}
+
+/**
+ * Evaluates whether the given CType is allowed in the column described by the
+ * "data-allowed-content-types" / "data-disallowed-content-types" attributes.
+ * Mirrors the server-side logic: disallowed wins, an empty allow list allows all.
+ */
+export function isContentTypeAllowedInColumn(cType: string, columnElement: HTMLElement | null): boolean {
+  if (columnElement === null) {
+    return true;
+  }
+
+  const disallowed = toList(columnElement.dataset.disallowedContentTypes);
+  if (disallowed.includes(cType)) {
+    return false;
+  }
+
+  const allowed = toList(columnElement.dataset.allowedContentTypes);
+  if (allowed.length > 0 && !allowed.includes(cType)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Resolves the column of the given element (nearest ancestor carrying a colPos)
+ * and evaluates whether the CType is allowed there.
+ */
+export function isContentTypeAllowedForTarget(cType: string, target: HTMLElement): boolean {
+  return isContentTypeAllowedInColumn(cType, target.closest('[data-colpos]'));
+}

package/backend/layout-module/drag-drop.ts

@@ -22,6 +22,7 @@ import RegularEvent from '@typo3/core/event/regular-event';
 import { DataTransferTypes } from '@typo3/backend/enum/data-transfer-types';
 import BroadcastService from '@typo3/backend/broadcast-service';
 import { BroadcastMessage } from '@typo3/backend/broadcast-message';
+import { isContentTypeAllowedInColumn } from '@typo3/backend/layout-module/column-restriction';
 import type ResponseInterface from '../ajax-data-handler/response-interface';
 import type { DragDropThumbnail, DragTooltipMetadata } from '@typo3/backend/drag-tooltip';
 import DragDropUtility from '@typo3/backend/utility/drag-drop-utility';
@@ -36,6 +37,7 @@ export type ContentElementDragDropData = {
   pid: number;
   uid: number;
   language: number;
+  cType: string;
   content: string;
   moveElementUrl: string;
 };
@@ -54,6 +56,8 @@ enum Classes {
 }
 
 class DragDrop {
+  private draggedContentType: string = '';
+
   constructor() {
     DocumentService.ready().then((): void => {
       this.initialize();
@@ -116,10 +120,13 @@ class DragDrop {
   protected onDragStart(event: DragEvent, target: HTMLElement): void {
     const content = target.closest(Identifiers.content) as HTMLElement;
 
+    this.draggedContentType = content.dataset.ctype ?? '';
+
     event.dataTransfer.setData(DataTransferTypes.content, JSON.stringify({
       pid: this.getCurrentPageId(),
       uid: parseInt(content.dataset.uid, 10),
       language: parseInt(content.dataset.languageUid, 10),
+      cType: this.draggedContentType,
       content: content.outerHTML,
       moveElementUrl: content.dataset.moveElementUrl,
     } as ContentElementDragDropData));
@@ -133,6 +140,7 @@ class DragDrop {
   }
 
   protected onDragEnd(): void {
+    this.draggedContentType = '';
     this.hideDropZones();
   }
 
@@ -176,6 +184,7 @@ class DragDrop {
 
       // the dragged elements language uid
       let language = contentElementDragDropData.language;
+      // Keep in sync with LanguageMarker::ALL_LANGUAGES on the PHP side.
       if (language !== -1) {
         // new elements language must be the same as the column the element is dropped in if element is not -1
         language = parseInt((dropContainer.closest('[data-language-uid]') as HTMLElement).dataset.languageUid, 10);
@@ -305,9 +314,9 @@ class DragDrop {
       iconIdentifier = contentElementIcon.dataset.identifier;
     }
 
-    const contentImagePreviews = contentElement.querySelectorAll('.preview-thumbnails-element-image img');
+    const contentImagePreviews = contentElement.querySelectorAll<HTMLImageElement>('.preview-thumbnails-element-image img');
     if (contentImagePreviews.length > 0) {
-      contentImagePreviews.forEach((image: HTMLImageElement): void => {
+      contentImagePreviews.forEach((image): void => {
         thumbnails.push({
           src: image.src,
           height: image.height,
@@ -334,7 +343,10 @@ class DragDrop {
   }
 
   protected showDropZones(): void {
-    document.querySelectorAll(Identifiers.dropZone).forEach((element: HTMLElement): void => {
+    document.querySelectorAll<HTMLElement>(Identifiers.dropZone).forEach((element): void => {
+      if (!isContentTypeAllowedInColumn(this.draggedContentType, element.closest('[data-colpos]'))) {
+        return;
+      }
       element.hidden = false;
       const addContentButton = element.parentElement.querySelector(Identifiers.addContent) as HTMLElement;
       if (addContentButton !== null) {
@@ -345,7 +357,7 @@ class DragDrop {
   }
 
   protected hideDropZones(): void {
-    document.querySelectorAll(Identifiers.dropZone).forEach((element: HTMLElement): void => {
+    document.querySelectorAll<HTMLElement>(Identifiers.dropZone).forEach((element): void => {
       element.hidden = true;
       const addContentButton = element.parentElement.querySelector(Identifiers.addContent) as HTMLElement;
       if (addContentButton !== null) {

package/backend/layout-module/paste.ts

@@ -24,18 +24,21 @@ import Severity from '../severity';
 import '@typo3/backend/element/icon-element';
 import { SeverityEnum } from '../enum/severity';
 import RegularEvent from '@typo3/core/event/regular-event';
+import { isContentTypeAllowedForTarget } from '@typo3/backend/layout-module/column-restriction';
 import type ResponseInterface from '../ajax-data-handler/response-interface';
 import layoutLabels from '~labels/backend.layout';
 
 type PasteOptions = {
   itemOnClipboardUid: number;
   itemOnClipboardTitle: string;
+  itemOnClipboardCType: string;
   copyMode: string;
 };
 
 class Paste {
   private readonly itemOnClipboardUid: number = 0;
   private readonly itemOnClipboardTitle: string = '';
+  private readonly itemOnClipboardCType: string = '';
   private readonly copyMode: string = '';
   private readonly elementIdentifier: string = '.t3js-page-ce';
   private pasteAfterLinkTemplate: string = '';
@@ -47,6 +50,7 @@ class Paste {
   constructor(args: PasteOptions) {
     this.itemOnClipboardUid = args.itemOnClipboardUid;
     this.itemOnClipboardTitle = args.itemOnClipboardTitle;
+    this.itemOnClipboardCType = args.itemOnClipboardCType;
     this.copyMode = args.copyMode;
 
     DocumentService.ready().then((): void => {
@@ -95,7 +99,10 @@ class Paste {
    */
   private activatePasteIcons(): void {
     if (this.pasteAfterLinkTemplate && this.pasteIntoLinkTemplate) {
-      document.querySelectorAll('.t3js-page-new-ce').forEach((el: HTMLElement): void => {
+      document.querySelectorAll<HTMLElement>('.t3js-page-new-ce').forEach((el): void => {
+        if (!isContentTypeAllowedForTarget(this.itemOnClipboardCType, el)) {
+          return;
+        }
         const template = el.parentElement.dataset.page ? this.pasteIntoLinkTemplate : this.pasteAfterLinkTemplate;
         el.append(document.createRange().createContextualFragment(template));
       });