typo3-typescript-sources 14.3.6 → 14.3.8

package/.last-synced-tag

@@ -1 +1 @@
-v14.3.6
+v14.3.8

package/README-TYPO3.md

@@ -75,7 +75,7 @@ with each other and with the public. Several TYPO3 teams use Slack as a
 way to communicate internally and most channels are a welcome place for
 you to join and get yourself involved.
 
-* Register: https://my.typo3.org/about-mytypo3org/slack
+* Register: https://typo3.community/meet/slack/
 * Slack: https://typo3.slack.com/
 
 ### Exchange information, ask questions, get help

package/README.md

@@ -16,7 +16,7 @@ npm install typo3-typescript-sources
 
 - **Original Repository:** [TYPO3/typo3](https://github.com/TYPO3/typo3)
 - **Source Path:** `Build/Sources/TypeScript/`
-- **Current TYPO3 Version:** `v14.3.6`
+- **Current TYPO3 Version:** `v14.3.8`
 
 ## 🌿 Branches
 

package/backend/column-selector-button.ts

@@ -160,7 +160,7 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
           text: this.buttonOk,
           btnClass: 'btn-primary',
           name: 'update',
-          trigger: (e: Event, modal: ModalElement): void => this.processSelection(modal)
+          form: 'columnSelectorForm',
         }
       ],
       ajaxCallback: (): void => this.handleModalContentLoaded(modal)
@@ -198,7 +198,10 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
       return;
     }
     // Prevent the form from being submitted as the form data will be send via an ajax request
-    form.addEventListener('submit', (e: Event): void => { e.preventDefault(); });
+    form.addEventListener('submit', (e: Event): void => {
+      e.preventDefault();
+      this.processSelection(currentModal);
+    });
 
     const columns: NodeListOf<HTMLInputElement> = currentModal.querySelectorAll(Selectors.columnsSelector);
     const columnsFilter: HTMLInputElement = currentModal.querySelector(Selectors.columnsFilterSelector);

package/backend/drag-uploader.ts

@@ -371,7 +371,21 @@ export default class DragUploader {
    * @param {FileList} files
    */
   public processFiles(files: FileList): void {
-    this.queueLength = files.length;
+    const validFiles: File[] = [];
+    for (const file of Array.from(files)) {
+      const error = this.validateFile(file);
+      if (error === null) {
+        validFiles.push(file);
+      } else {
+        Notification.error(coreLabels.get('file_upload.notUploaded.title'), error);
+      }
+    }
+    this.fileInput.value = '';
+    if (validFiles.length === 0) {
+      return;
+    }
+
+    this.queueLength = validFiles.length;
 
     if (this.fileList.parentElement.hasAttribute('hidden')) {
       // Show the filelist (table)
@@ -385,11 +399,11 @@ export default class DragUploader {
     this.overallProgressBar = document.createElement('typo3-backend-progress-bar');
     document.body.appendChild(this.overallProgressBar);
     this.overallProgressBar.start();
-    this.percentagePerFile = 1 / files.length;
+    this.percentagePerFile = 1 / validFiles.length;
 
     // Check for each file if is already exist before adding it to the queue
     const ajaxCalls: Promise<void>[] = [];
-    Array.from(files).forEach((file: File) => {
+    validFiles.forEach((file: File) => {
       const request = new AjaxRequest(TYPO3.settings.ajaxUrls.file_exists).withQueryArguments({
         fileName: file.name,
         fileTarget: this.target,
@@ -418,8 +432,6 @@ export default class DragUploader {
         this.overallProgressBar.done();
       }
     });
-
-    this.fileInput.value = '';
   }
 
   public fileInDropzone = (): void => {
@@ -631,6 +643,37 @@ export default class DragUploader {
       document.dispatchEvent(new CustomEvent(uploadFinishedEventName));
     });
   }
+
+  /**
+   * @returns the reason why the file cannot be uploaded, null if it can be uploaded
+   */
+  private validateFile(file: File): string | null {
+    const extension = file.name.split('.').pop().toLowerCase();
+    if (this.maxFileSize > 0 && file.size > this.maxFileSize) {
+      return coreLabels.get('file_upload.maxFileSizeExceeded', {
+        '0': file.name,
+        '1': FormatUtility.fileSizeAsString(this.maxFileSize),
+      });
+    }
+    if (this.fileDenyPattern && file.name.match(this.fileDenyPattern)) {
+      return coreLabels.get('file_upload.fileNotAllowed', {
+        '0': file.name,
+      });
+    }
+    if (this.filesExtensionsAllowed && !this.filesExtensionsAllowed.split(',').includes(extension)) {
+      return coreLabels.get('file_upload.notUploaded.extensionExpected', {
+        '0': file.name,
+        '1': this.filesExtensionsAllowed.split(',').join(', '),
+      });
+    }
+    if (this.filesExtensionsDisallowed && this.filesExtensionsDisallowed.split(',').includes(extension)) {
+      return coreLabels.get('file_upload.notUploaded.extensionDisallowed', {
+        '0': file.name,
+        '1': extension,
+      });
+    }
+    return null;
+  }
 }
 
 class FileQueueItem {
@@ -697,72 +740,41 @@ class FileQueueItem {
     // set dummy file icon
     this.iconCol.innerHTML = '<typo3-backend-icon identifier="mimetypes-other-other" />';
 
-    // check file size
-    if (this.dragUploader.maxFileSize > 0 && this.file.size > this.dragUploader.maxFileSize) {
-      this.updateMessage(coreLabels.get('file_upload.maxFileSizeExceeded', {
-        '0': this.file.name,
-        '1': FormatUtility.fileSizeAsString(this.dragUploader.maxFileSize),
-      }));
-      this.progressBar.value = 100;
-      this.progressBar.severity = SeverityEnum.error;
-
-      // check filename/extension against deny pattern
-    } else if (this.dragUploader.fileDenyPattern && this.file.name.match(this.dragUploader.fileDenyPattern)) {
-      this.updateMessage(coreLabels.get('file_upload.fileNotAllowed', {
-        '0': this.file.name,
-      }));
-      this.progressBar.value = 100;
-      this.progressBar.severity = SeverityEnum.error;
-
-    } else if (this.isProhibitedByAllowedExtensionsList()) {
-      this.updateMessage(coreLabels.get('file_upload.fileExtensionExpected', {
-        '0': this.dragUploader.filesExtensionsAllowed,
-      }));
-      this.progressBar.value = 100;
-      this.progressBar.severity = SeverityEnum.error;
-    } else if (this.isProhibitedByDisallowedExtensionsList()) {
-      this.updateMessage(coreLabels.get('file_upload.fileExtensionDisallowed', {
-        '0': this.dragUploader.filesExtensionsDisallowed,
-      }));
-      this.progressBar.value = 100;
-      this.progressBar.severity = SeverityEnum.error;
-    } else {
-      this.updateMessage('- ' + FormatUtility.fileSizeAsString(this.file.size));
-
-      const formData = new FormData();
-      formData.append('data[upload][1][target]', this.dragUploader.target);
-      formData.append('data[upload][1][data]', '1');
-      formData.append('overwriteExistingFiles', this.override);
-      formData.append('redirect', '');
-      formData.append('upload_1', this.file);
-
-      // We use XMLHttpRequest as we need the `progress` event which isn't supported by fetch()
-      const xhr = new XMLHttpRequest();
-      xhr.onreadystatechange = (): void => {
-        if (xhr.readyState === XMLHttpRequest.DONE) {
-          if (xhr.status === 200) {
-            try {
-              const response = JSON.parse(xhr.responseText);
-              if (!response.hasErrors) {
-                this.uploadSuccess(response);
-              } else {
-                this.uploadError(xhr);
-              }
-            }
-            catch {
-              // In case JSON can not be parsed, the upload failed due to server errors,
-              // e.g. "POST Content-Length exceeds limit". Just handle as upload error.
+    this.updateMessage('- ' + FormatUtility.fileSizeAsString(this.file.size));
+
+    const formData = new FormData();
+    formData.append('data[upload][1][target]', this.dragUploader.target);
+    formData.append('data[upload][1][data]', '1');
+    formData.append('overwriteExistingFiles', this.override);
+    formData.append('redirect', '');
+    formData.append('upload_1', this.file);
+
+    // We use XMLHttpRequest as we need the `progress` event which isn't supported by fetch()
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = (): void => {
+      if (xhr.readyState === XMLHttpRequest.DONE) {
+        if (xhr.status === 200) {
+          try {
+            const response = JSON.parse(xhr.responseText);
+            if (!response.hasErrors) {
+              this.uploadSuccess(response);
+            } else {
               this.uploadError(xhr);
             }
-          } else {
+          }
+          catch {
+            // In case JSON can not be parsed, the upload failed due to server errors,
+            // e.g. "POST Content-Length exceeds limit". Just handle as upload error.
             this.uploadError(xhr);
           }
+        } else {
+          this.uploadError(xhr);
         }
-      };
-      xhr.upload.addEventListener('progress', (e: ProgressEvent) => this.updateProgress(e));
-      xhr.open('POST', TYPO3.settings.ajaxUrls.file_process);
-      xhr.send(formData);
-    }
+      }
+    };
+    xhr.upload.addEventListener('progress', (e: ProgressEvent) => this.updateProgress(e));
+    xhr.open('POST', TYPO3.settings.ajaxUrls.file_process);
+    xhr.send(formData);
   }
 
   /**
@@ -925,26 +937,6 @@ class FileQueueItem {
       this.row.append(document.createElement('td'));
     }
   }
-
-  public isProhibitedByAllowedExtensionsList(): boolean {
-    if (!this.dragUploader.filesExtensionsAllowed) {
-      return false;
-    }
-    const extension = this.file.name.split('.').pop();
-    const allowed = this.dragUploader.filesExtensionsAllowed.split(',');
-
-    return !allowed.includes(extension.toLowerCase());
-  }
-
-  public isProhibitedByDisallowedExtensionsList(): boolean {
-    if (!this.dragUploader.filesExtensionsDisallowed) {
-      return false;
-    }
-    const extension = this.file.name.split('.').pop();
-    const disallowed = this.dragUploader.filesExtensionsDisallowed.split(',');
-
-    return disallowed.includes(extension.toLowerCase());
-  }
 }
 
 DragUploader.init();

package/backend/element/contextual-record-edit-trigger.ts

@@ -27,11 +27,17 @@ import labels from '~labels/backend.alt_doc';
  *
  * `url` attribute points to the contextual edit route
  * `edit-url` points to the full FormEngine route.
+ * `context` identifies what's being edited, used to persist the sheet's
+ * width independently per context. This might be just the database table
+ * (e.g. "pages" and "sys_category" are resized independently), but callers
+ * may pass a more specific value later, e.g. "tt_content.textmedia" vs.
+ * "tt_content.header", once per-CType widths are needed.
  *
  * @example
  * <typo3-backend-contextual-record-edit-trigger
  *   url="/typo3/record/edit/contextual?..."
- *   edit-url="/typo3/record/edit?...">
+ *   edit-url="/typo3/record/edit?..."
+ *   context="pages">
  *   Edit record
  * </typo3-backend-contextual-record-edit-trigger>
  */
@@ -39,6 +45,7 @@ import labels from '~labels/backend.alt_doc';
 export class ContextualRecordEditTriggerElement extends PseudoButtonLitElement {
   @property({ type: String }) url: string;
   @property({ type: String, attribute: 'edit-url' }) editUrl: string;
+  @property({ type: String }) context: string = '';
 
   protected override async buttonActivated(): Promise<void> {
     if (Persistent.isset('contextualRecordEdit') && Persistent.get('contextualRecordEdit') == 0) {
@@ -54,6 +61,7 @@ export class ContextualRecordEditTriggerElement extends PseudoButtonLitElement {
       size: Sizes.expand,
       position: Positions.sheet,
       hideHeader: true,
+      resizeIdentifier: `contextualEdit${this.context ? `.${this.context}` : ''}`,
     });
     this.setupMessageHandling(modal);
   }

package/backend/form-engine/element/extra/select-box-filter.ts

@@ -12,6 +12,7 @@
  */
 
 import RegularEvent from '@typo3/core/event/regular-event';
+import TextNormalizer from '@typo3/core/utility/text-normalizer';
 
 enum Selectors {
   fieldContainerSelector = '.t3js-formengine-field-group',
@@ -25,6 +26,7 @@ enum Selectors {
 class SelectBoxFilter {
   private readonly selectElement: HTMLSelectElement = null;
   private availableOptions: NodeListOf<HTMLOptionElement> = null;
+  private foldedLabels: string[] = null;
 
   constructor(selectElement: HTMLSelectElement) {
     this.selectElement = selectElement;
@@ -73,14 +75,15 @@ class SelectBoxFilter {
   private filter(filterText: string): void {
     if (this.availableOptions === null) {
       this.availableOptions = this.selectElement.querySelectorAll('option');
+      this.foldedLabels = Array.from(this.availableOptions, (option: HTMLOptionElement): string =>
+        TextNormalizer.foldCaseAndDiacritics(TextNormalizer.normalizeInvisibleCharacters(option.textContent)));
     }
 
-    // Escape filter text to prevent RegExp() exceptions
-    const escapedFilterText = filterText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    // A plain substring match, no RegExp involved, therefore nothing to escape either
+    const foldedFilterText = TextNormalizer.foldCaseAndDiacritics(TextNormalizer.normalizeInvisibleCharacters(filterText));
 
-    const matchFilter = new RegExp(escapedFilterText, 'i');
-    this.availableOptions.forEach((option: HTMLOptionElement): void => {
-      option.hidden = filterText.length > 0 && option.textContent.match(matchFilter) === null;
+    this.availableOptions.forEach((option: HTMLOptionElement, index: number): void => {
+      option.hidden = filterText.length > 0 && !this.foldedLabels[index].includes(foldedFilterText);
       SelectBoxFilter.toggleOptGroup(option);
     });
   }

package/backend/form-engine/element/online-media-form-element.ts

@@ -30,14 +30,14 @@ export class OnlineMediaFormElement extends LitElement {
 
   protected override render(): TemplateResult {
     return html`
-      <form @submit="${ this.dispatchSubmitEvent }">
+      <form id="online-media-form" @submit="${ this.dispatchSubmitEvent }">
         <div class="form-control-wrap">
-          <input type="text" class="form-control" name="online-media-url" placeholder="${this.placeholder}" required>
+          <input type="text" class="form-control" name="online-media-url" placeholder="${this.placeholder}" required autofocus>
           <div class="form-text">
             ${this.allowedExtensionsHelpText}<br>
             <ul class="badge-list">
             ${this.allowedExtensions.split(',').map((ext: string) => html`
-              <li><span class="badge badge-secondary">${ext.trim().toUpperCase()}</span></li>
+              <li><span class="badge badge-secondary">${ext.trim().toLowerCase()}</span></li>
             `)}
             </ul>
           </div>

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

@@ -14,6 +14,7 @@
 import { html, type TemplateResult } from 'lit';
 import { Tree, type TreeSettings } from '@typo3/backend/tree/tree';
 import { customElement, state } from 'lit/decorators.js';
+import TextNormalizer from '@typo3/core/utility/text-normalizer';
 import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node';
 
 interface SelectTreeSettings extends TreeSettings {
@@ -48,6 +49,18 @@ export class SelectTree extends Tree
     this.addEventListener('typo3:tree:nodes-prepared', this.prepareLoadedNodes);
   }
 
+  /**
+   * Fold both sides of the comparison the filter performs, so that a node is
+   * found whether or not the diacritics of its name are typed.
+   *
+   * The names are folded on every keystroke rather than kept beside the node,
+   * because writing to a node triggers a re-render and the nodes are replaced
+   * whenever a part of the tree is loaded.
+   */
+  private static fold(value: string): string {
+    return TextNormalizer.foldCaseAndDiacritics(TextNormalizer.normalizeInvisibleCharacters(value));
+  }
+
   /**
    * Expand all nodes and refresh view
    */
@@ -89,7 +102,8 @@ export class SelectTree extends Tree
       this.nodes[0].__expanded = false;
     }
     const firstNode = this.nodes[0];
-    const regex = new RegExp(searchTerm, 'i');
+    // A plain substring match, no RegExp involved, therefore nothing to escape either
+    const foldedSearchTerm = SelectTree.fold(searchTerm ?? '');
 
     this.nodes.forEach((node: any) => {
       // skip the root node in searches
@@ -100,7 +114,7 @@ export class SelectTree extends Tree
       node.__expanded = false;
       node.__hidden = true;
 
-      if (regex.test(node.name)) {
+      if (SelectTree.fold(node.name).includes(foldedSearchTerm)) {
         results.push(node);
       }
     });

package/backend/form-engine/field-control/add-record.ts

@@ -33,7 +33,33 @@ class AddRecord {
   private readonly registerClickHandler = (e: Event): void => {
     e.preventDefault();
 
-    FormEngine.preventFollowLinkIfNotSaved(this.controlElement.getAttribute('href'));
+    const href = this.controlElement.getAttribute('href');
+    const url = new URL(href, window.location.origin);
+    const ownerUid = url.searchParams.get('P[uid]') || '';
+    if (ownerUid.startsWith('NEW')) {
+      // The record this field belongs to is itself still unsaved:
+      // Wizard/AddController can only link a newly created record back into
+      // an already-persisted uid, so a plain "leave without saving?" prompt
+      // would both discard this record AND silently fail to link anything.
+      // Deliberately not passing along this href's own P[returnUrl] here: for
+      // a field belonging to an inline/IRRE child that was itself added via
+      // AJAX (record_inline_create), that value is whatever URL rendered the
+      // child's markup at ajax-creation time. The ajax endpoint's own URL,
+      // not a real, navigable page. EditDocumentController computes the
+      // correct return-to-this-document URL itself once the save completes.
+      FormEngine.preventFollowAddRecordLinkIfNotSaved({
+        originalUid: ownerUid,
+        ownerTable: url.searchParams.get('P[table]') || '',
+        ownerField: url.searchParams.get('P[field]') || '',
+        table: url.searchParams.get('P[params][table]') || '',
+        pid: url.searchParams.get('P[params][pid]') || '',
+        setValue: url.searchParams.get('P[params][setValue]') || 'append',
+        flexFormPath: url.searchParams.get('P[flexFormPath]') || '',
+      });
+      return;
+    }
+
+    FormEngine.preventFollowLinkIfNotSaved(href);
   };
 }
 

package/backend/form-engine.ts

@@ -62,6 +62,7 @@ const enum FormAction {
   saveAndView = '_savedokview',
   saveAndNew = '_savedoknew',
   duplicate = '_duplicatedoc',
+  saveAndAddRecord = '_savedokaddrecord',
 }
 
 type OnChangeFieldHandlerCallback = (data: object, e: Event) => void;
@@ -134,7 +135,7 @@ export default (function() {
           btnClass: 'btn-' + Severity.getCssClass(Severity.warning),
           name: 'ok',
           trigger: () => {
-            FormEngine.closeModalsRecursive();
+            modal.hideModal();
             saveDocumentWithoutValidation();
           }
         }
@@ -900,6 +901,84 @@ export default (function() {
     }
   };
 
+  /**
+   * Show modal to confirm following a "+ add related record" (fieldControl.addRecord)
+   * link whose OWN record is itself still new/unsaved. Since Wizard/AddController
+   * can only link a newly created record back into an already-persisted uid,
+   * discarding here means abandoning the whole attempt (closing the document,
+   * same as preventExitIfNotSavedCallback) rather than following through to
+   * create an orphaned record that could never be linked back anyway. The
+   * only way to actually continue to the add-record wizard is "save first".
+   *
+   * @param {Object.<string, string>} addRecordParams
+   * @returns {Boolean}
+   */
+  FormEngine.preventFollowAddRecordLinkIfNotSaved = function(addRecordParams: {[key: string]: string}): boolean {
+    const title = backendAltDocLabels.get('label.confirm.add_record_unsaved_parent.title');
+    const content = backendAltDocLabels.get('label.confirm.add_record_unsaved_parent.content');
+    const buttons: Array<{text: string, btnClass: string, name: string, active?: boolean}> = [
+      {
+        text: backendAltDocLabels.get('buttons.confirm.close_without_save.no'),
+        btnClass: 'btn-default',
+        name: 'no'
+      },
+      {
+        text: backendAltDocLabels.get('buttons.confirm.close_without_save.yes'),
+        btnClass: 'btn-default',
+        name: 'yes'
+      }
+    ];
+    if (document.querySelector('.has-error') === null) {
+      buttons.push({
+        text: backendAltDocLabels.get('buttons.confirm.add_record_unsaved_parent.save'),
+        btnClass: 'btn-primary',
+        name: 'save',
+        active: true
+      });
+    }
+
+    const modal = Modal.confirm(title, content, Severity.warning, buttons);
+    modal.addEventListener('button.clicked', function(e: Event) {
+      modal.hideModal();
+      const name = (e.target as HTMLButtonElement).name;
+      if (name === 'yes') {
+        FormEngine.closeDocument();
+      } else if (name === 'save') {
+        FormEngine.saveAndContinueToAddRecord(addRecordParams);
+      }
+    });
+    return false;
+  };
+
+  /**
+   * Saves the current document, then (server-side, once the record this
+   * addRecordParams.originalUid placeholder was saved under is known)
+   * redirects on to Wizard/AddController for the field identified by
+   * addRecordParams, see FormAction::savedokaddrecord() /
+   * EditDocumentController::processData().
+   *
+   * @param {Object.<string, string>} addRecordParams
+   */
+  FormEngine.saveAndContinueToAddRecord = function(addRecordParams: {[key: string]: string}): void {
+    Object.keys(addRecordParams).forEach((key: string): void => {
+      const input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = 'addRecordAfterSave[' + key + ']';
+      input.value = addRecordParams[key];
+      FormEngine.formElement.append(input);
+    });
+    const actionInput = document.createElement('input');
+    actionInput.type = 'hidden';
+    actionInput.name = FormAction.saveAndAddRecord;
+    actionInput.value = '1';
+    FormEngine.formElement.append(actionInput);
+    // Submitted as a regular save on top: "_savedokaddrecord" is only understood by
+    // EditDocumentController, while other hosts of FormEngine forms (site configuration,
+    // constant editor, ...) test "_savedok" literally. Without it, such a form would
+    // neither save nor create anything and silently discard the submitted data.
+    submitFormWithAction(FormAction.save);
+  };
+
   /**
    * Show modal to confirm closing the document without saving
    */
@@ -954,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');
@@ -963,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');
   };
 
   /**

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]'));
+}