typo3-typescript-sources 14.3.7 → 14.3.8

package/.last-synced-tag

@@ -1 +1 @@
-v14.3.7
+v14.3.8

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.7`
+- **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/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.ts

@@ -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');
   };
 
   /**

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);
@@ -335,6 +344,9 @@ class DragDrop {
 
   protected showDropZones(): void {
     document.querySelectorAll(Identifiers.dropZone).forEach((element: HTMLElement): 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) {

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 => {
@@ -96,6 +100,9 @@ class Paste {
   private activatePasteIcons(): void {
     if (this.pasteAfterLinkTemplate && this.pasteIntoLinkTemplate) {
       document.querySelectorAll('.t3js-page-new-ce').forEach((el: HTMLElement): void => {
+        if (!isContentTypeAllowedForTarget(this.itemOnClipboardCType, el)) {
+          return;
+        }
         const template = el.parentElement.dataset.page ? this.pasteIntoLinkTemplate : this.pasteAfterLinkTemplate;
         el.append(document.createRange().createContextualFragment(template));
       });

package/backend/login-refresh.ts

@@ -284,15 +284,7 @@ class LoginRefresh {
           active: false,
           btnClass: 'btn-primary',
           name: 'refreshSession',
-          trigger: async (e: Event, modal: ModalElement) => {
-            modal.querySelector('form').requestSubmit();
-            const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.login_refresh).get();
-            const data = await response.resolve();
-            modal.hideModal();
-            if (!data.refresh.success) {
-              modal.dispatchEvent(new Event('show-login-form'));
-            }
-          }
+          form: 'beLoginRefresh',
         }
       ],
       content: html`

package/backend/modal.ts

@@ -318,6 +318,7 @@ export class ModalElement extends LitElement {
             ${this.buttons.map(button => this.renderModalButton(button))}
           </div>
         `}
+        <div class="alert-container"></div>
       </dialog>
     `;
   }
@@ -389,6 +390,8 @@ export class ModalElement extends LitElement {
             if (this.ajaxCallback) {
               this.ajaxCallback(this);
             }
+            // Native autofocus only covers content present when the dialog opens
+            this.querySelector<HTMLElement>(`${Identifiers.body} [autofocus]`)?.focus();
             this.dispatchEvent(new CustomEvent('modal-loaded'));
           });
         })
@@ -944,11 +947,10 @@ class Modal {
     }
 
     currentModal.addEventListener('typo3-modal-shown', (): void => {
-      // focus the button which was configured as active button
-      const activeButton = currentModal.querySelector(`${Identifiers.footer} .t3js-active`) as HTMLInputElement | null;
-      if (activeButton !== null) {
-        activeButton.focus();
-      }
+      // Prefer an autofocus field over the active button
+      const focusTarget = currentModal.querySelector<HTMLElement>(`${Identifiers.body} [autofocus]`)
+        ?? currentModal.querySelector<HTMLElement>(`${Identifiers.footer} .t3js-active`);
+      focusTarget?.focus();
     });
 
     // Remove modal from Modal.instances when hidden
@@ -957,10 +959,15 @@ class Modal {
         const lastIndex = this.instances.length - 1;
         this.instances.splice(lastIndex, 1);
         this.currentModal = this.instances[lastIndex - 1];
+        remountAlertContainer(this.currentModal);
       }
     });
 
     currentModal.addEventListener('typo3-modal-hidden', (): void => {
+      // A notification shown while the modal closes is placed in it, and must not be removed along with it
+      if (currentModal.querySelector('#alert-container') !== null) {
+        remountAlertContainer(this.currentModal);
+      }
       currentModal.remove();
     });
 
@@ -970,12 +977,38 @@ class Modal {
       this.instances.push(currentModal);
     });
 
+    currentModal.addEventListener('typo3-modal-shown', (): void => {
+      remountAlertContainer(currentModal);
+    });
+
     document.body.appendChild(currentModal);
 
     return currentModal;
   }
 }
 
+const remountAlertContainer = (modal: ModalElement | undefined) => {
+  const alertContainer = document.querySelector<HTMLDivElement>('#alert-container');
+  if (alertContainer) {
+    const isOpen = alertContainer.matches(':popover-open');
+    let target: HTMLElement = document.body;
+    if (modal) {
+      target = modal.querySelector('.alert-container') ?? target;
+    }
+
+    if ('moveBefore' in target) {
+      target.moveBefore(alertContainer, null);
+    } else {
+      (target as HTMLElement).appendChild(alertContainer);
+    }
+
+    if (isOpen) {
+      alertContainer.hidePopover();
+      alertContainer.showPopover();
+    }
+  }
+};
+
 let modalObject: Modal = null;
 try {
   if (parent && parent.window.TYPO3 && parent.window.TYPO3.Modal) {