typo3-typescript-sources 13.4.20 → 13.4.22

package/.github/workflows/sync-and-publish.yml

@@ -178,6 +178,10 @@ jobs:
           cat > README.md << 'EOF'
           # TYPO3 TypeScript Sources
 
+          [![Sync and Publish](https://github.com/maikschneider/typo3-typescript-sources/actions/workflows/sync-and-publish.yml/badge.svg)](https://github.com/maikschneider/typo3-typescript-sources/actions/workflows/sync-and-publish.yml)
+          [![npm version](https://badge.fury.io/js/typo3-typescript-sources.svg)](https://www.npmjs.com/package/typo3-typescript-sources)
+          [![License: GPL v2](https://img.shields.io/badge/License-GPL%20v2-blue.svg)](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html)
+
           This repository contains the TypeScript sources from the TYPO3 Core, automatically extracted and published to npm.
 
           ## 📦 Installation
@@ -225,12 +229,12 @@ jobs:
           Source: https://github.com/TYPO3/typo3/tree/${TYPO3_VERSION}
           Path: Build/Sources/TypeScript/"
           
-          # Erstelle Tag
+          # Erstelle Tag (entferne v-Prefix falls vorhanden)
           NPM_VERSION="${TYPO3_VERSION#v}"
-          git tag -a "v${NPM_VERSION}" -m "Release ${NPM_VERSION} from TYPO3 ${TYPO3_VERSION}"
+          git tag -a "${NPM_VERSION}" -m "Release ${NPM_VERSION} from TYPO3 ${TYPO3_VERSION}"
           
           git push origin main
-          git push origin "v${NPM_VERSION}"
+          git push origin "${NPM_VERSION}"
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -254,7 +258,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.PAT_TOKEN }}
         with:
-          tag_name: v${{ needs.check-and-sync.outputs.typo3_version }}
+          tag_name: ${{ needs.check-and-sync.outputs.typo3_version }}
           release_name: TYPO3 ${{ needs.check-and-sync.outputs.typo3_version }}
           body: |
             Synchronized with TYPO3 Core ${{ needs.check-and-sync.outputs.typo3_version }}

package/.last-synced-tag

@@ -1 +1 @@
-v13.4.20
+v13.4.22

package/README.md

@@ -1,5 +1,9 @@
 # TYPO3 TypeScript Sources
 
+[![Sync and Publish](https://github.com/maikschneider/typo3-typescript-sources/actions/workflows/sync-and-publish.yml/badge.svg)](https://github.com/maikschneider/typo3-typescript-sources/actions/workflows/sync-and-publish.yml)
+[![npm version](https://badge.fury.io/js/typo3-typescript-sources.svg)](https://www.npmjs.com/package/typo3-typescript-sources)
+[![License: GPL v2](https://img.shields.io/badge/License-GPL%20v2-blue.svg)](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html)
+
 This repository contains the TypeScript sources from the TYPO3 Core, automatically extracted and published to npm.
 
 ## 📦 Installation
@@ -12,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:** `v13.4.20`
+- **Current TYPO3 Version:** `v13.4.22`
 
 ## 📝 License
 

package/backend/date-time-picker.ts

@@ -185,6 +185,8 @@ class DateTimePicker {
           // collides with using altInput – sigh.
           self.altInput.id = self.input.id;
           self.input.removeAttribute('id');
+          // Disable browser autofill to prevent interference with the datepicker
+          self.altInput.setAttribute('autocomplete', 'off');
           self.altInput.clearable();
           if (self.input.dataset.formengineInputName !== undefined) {
             self.altInput.dataset.formengineDatepickerRealInputName = self.input.dataset.formengineInputName;
@@ -196,6 +198,13 @@ class DateTimePicker {
               self.altInput.classList.toggle('has-error', !e.detail.isValid);
             }
           });
+
+          // Move the hidden input (self.input) to right after the clearable wrapper
+          // This prevents it from affecting :first-child CSS selectors while maintaining proper DOM order
+          const wrapper = self.altInput.closest('.form-control-clearable-wrapper');
+          if (wrapper !== null) {
+            wrapper.insertAdjacentElement('afterend', self.input);
+          }
         }
       },
       onChange: (dates: Date[], currentDateString: string, self: flatpickr.Instance): void => {

package/backend/form-engine-link-browser-adapter.ts

@@ -72,9 +72,13 @@ export default (function() {
       const attributeValues = LinkBrowser.getLinkAttributeValues();
       // encode link on server
       attributeValues.url = input;
+      const searchParams = new URLSearchParams();
+      for (const [key, value] of Object.entries(attributeValues)) {
+        searchParams.set(key, value);
+      }
 
       (new AjaxRequest(TYPO3.settings.ajaxUrls.link_browser_encodetypolink))
-        .withQueryArguments(attributeValues)
+        .withQueryArguments(searchParams)
         .get()
         .then(async (response: AjaxResponse): Promise<void> => {
           const data: Response = await response.resolve();

package/backend/security/element/csp-reports.ts

@@ -96,6 +96,7 @@ export class CspReports extends LitElement {
   @state() suggestions: MutationSuggestion[] = [];
 
   private peripheralEvent: RegularEvent;
+  private previouslyFocusedRow: HTMLElement | null = null;
 
   public override connectedCallback(): void {
     super.connectedCallback();
@@ -114,6 +115,17 @@ export class CspReports extends LitElement {
     this.peripheralEvent?.release();
   }
 
+  protected override updated(changedProperties: Map<string, any>): void {
+    super.updated(changedProperties);
+    if (changedProperties.has('selectedReport') && this.selectedReport !== null) {
+      // Focus the details panel when a report is selected
+      this.updateComplete.then(() => {
+        const detailsPanel = this.querySelector('#report-details') as HTMLElement;
+        detailsPanel?.focus();
+      });
+    }
+  }
+
   protected override createRenderRoot(): HTMLElement | ShadowRoot {
     return this;
   }
@@ -148,7 +160,11 @@ export class CspReports extends LitElement {
                 ` : nothing}
                 ${this.reports.map((report: SummarizedCspReport) => html`
                   <tr class=${classMap({ 'table-info': this.selectedReport === report })} data-mutation-group=${report.mutationHashes.join('-')}
-                      @click=${() => this.selectReport(report)}>
+                      @click=${() => this.selectReport(report)}
+                      @keydown=${(e: KeyboardEvent) => this.handleReportKeydown(e, report)}
+                      tabindex="0"
+                      role="button"
+                      aria-label="${lll('label.showDetails', report.details.effectiveDirective, report.details.blockedUri) || 'Show details'}">
                     <td>${report.created}</td>
                     <td>${report.scope}</td>
                     <td>
@@ -218,7 +234,7 @@ export class CspReports extends LitElement {
     const report = this.selectedReport;
     return html`${report ? html`
       <div class="infolist-info-record">
-        <div class="card mb-0">
+        <div class="card mb-0" tabindex="-1" id="report-details" @keydown=${(e: KeyboardEvent) => this.handleDetailsKeydown(e)}>
           <div class="card-header">
             <h3>${ lll('label.details') || 'Details'}</h3>
           </div>
@@ -309,14 +325,75 @@ export class CspReports extends LitElement {
   private selectReport(report: SummarizedCspReport): void {
     this.suggestions = [];
     if (report !== null && this.selectedReport !== report) {
+      // Store the currently focused element before changing selection
+      this.previouslyFocusedRow = document.activeElement as HTMLElement;
       this.selectedReport = report;
       this.invokeHandleReportAction(report)
         .then((suggestions: MutationSuggestion[]) => this.suggestions = suggestions);
     } else {
       this.selectedReport = null;
+      // Restore focus to the previously focused row when closing
+      if (this.previouslyFocusedRow) {
+        this.updateComplete.then(() => {
+          this.previouslyFocusedRow?.focus();
+          this.previouslyFocusedRow = null;
+        });
+      }
+    }
+  }
+
+  private handleReportKeydown(event: KeyboardEvent, report: SummarizedCspReport): void {
+    // Handle Enter/Space to select report
+    if (event.key === 'Enter' || event.key === 'Space' || event.key === ' ') {
+      event.preventDefault();
+      this.selectReport(report);
+      return;
+    }
+
+    // Arrow key navigation
+    const currentRow = event.currentTarget as HTMLElement;
+    let targetRow: HTMLElement | null = null;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        targetRow = currentRow.nextElementSibling as HTMLElement;
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        targetRow = currentRow.previousElementSibling as HTMLElement;
+        break;
+      case 'Home':
+        event.preventDefault();
+        targetRow = currentRow.parentElement?.firstElementChild as HTMLElement;
+        break;
+      case 'End':
+        event.preventDefault();
+        targetRow = currentRow.parentElement?.lastElementChild as HTMLElement;
+        break;
+      default:
+        return;
+    }
+
+    if (targetRow && targetRow.hasAttribute('tabindex')) {
+      targetRow.focus();
+    }
+  }
+
+  private handleDetailsKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.selectReport(null);
     }
   }
 
+  private focusFirstReportRow(): void {
+    this.updateComplete.then(() => {
+      const firstRow = this.querySelector('tbody tr[tabindex="0"]') as HTMLElement;
+      firstRow?.focus();
+    });
+  }
+
   private selectScope(scope: string): void {
     this.selectedScope = scope;
     this.fetchReports();
@@ -363,14 +440,16 @@ export class CspReports extends LitElement {
     (new AjaxRequest(this.controlUri))
       .post({ action: 'muteReport', summaries: [report.summary] })
       .then((response: AjaxResponse) => response.resolve('application/json'))
-      .then((response: CspReportUuids) => this.filterReports(...response.uuids));
+      .then((response: CspReportUuids) => this.filterReports(...response.uuids))
+      .then(() => this.focusFirstReportRow());
   }
 
   private invokeDeleteReportAction(report: SummarizedCspReport): void {
     (new AjaxRequest(this.controlUri))
       .post({ action: 'deleteReport', summaries: [report.summary] })
       .then((response: AjaxResponse) => response.resolve('application/json'))
-      .then((response: CspReportUuids) => this.filterReports(...response.uuids));
+      .then((response: CspReportUuids) => this.filterReports(...response.uuids))
+      .then(() => this.focusFirstReportRow());
   }
 
   private invokeDeleteReportsAction(): void {

package/backend/tree/tree.ts

@@ -1117,22 +1117,26 @@ export class Tree extends LitElement {
 
   protected createNodeContentLabel(node: TreeNodeInterface): TemplateResult
   {
-    let label = (node.prefix || '') + node.name + (node.suffix || '');
-    // make a text node out of it, and strip out any HTML (this is because the return value uses html()
-    // instead of text() which is needed to avoid XSS in a page title
-    const labelNode = document.createElement('div');
-    labelNode.textContent = label;
-    label = labelNode.innerHTML;
+    const label = (node.prefix || '') + node.name + (node.suffix || '');
+
+    let nodeContent: Array<TemplateResult|string> | string = label;
     if (this.searchTerm) {
       // Escape all meta characters of regular expressions: ( ) [ ] $ * + ? . { } / | ^ -
-      const regexp = new RegExp(this.searchTerm.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi');
-      label = label.replace(regexp, '<span class="node-highlight-text">$&</span>');
+      // Also wrap the search term in a capture group so the regex split retains the separator
+      const regexp = new RegExp(`(${this.searchTerm.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&')})`, 'gi');
+      const parts = label.split(regexp);
+      if (parts.length > 1) {
+        // grouped regex splits contain the match in every second spot, to keep things short we use a modulo-flip with the index
+        nodeContent = parts.map((part, index): TemplateResult | string =>
+          (index % 2 === 1) ? html`<span class="node-highlight-text">${part}</span>` : part
+        );
+      }
     }
 
     return html`
       <div class="node-contentlabel">
-      <div class="node-name" .innerHTML="${label}"></div>
-      ${node.note ? html`<div class="node-note">${node.note}</div>` : nothing }
+        <div class="node-name">${nodeContent}</div>
+        ${node.note ? html`<div class="node-note">${node.note}</div>` : nothing}
       </div>`;
   }
 

package/install/renderable/language-packs.ts

@@ -279,6 +279,7 @@ export class ExtensionMatrixElement extends LitElement {
             <button class="btn btn-default" title=${tooltip}
               @click=${() => this.dispatchEvent(new CustomEvent<DownloadPacksEvent>('download-packs', eventData))}>
               <typo3-backend-icon identifier="actions-download" size="small"></typo3-backend-icon>
+              ${language}
             </button>
           </td>
         `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typo3-typescript-sources",
-  "version": "13.4.20",
+  "version": "13.4.22",
   "description": "TYPO3 Core TypeScript Sources - Extracted from TYPO3/typo3 repository",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "typo3": {
     "sourceRepository": "https://github.com/TYPO3/typo3",
-    "sourceTag": "v13.4.20",
+    "sourceTag": "v13.4.22",
     "sourcePath": "Build/Sources/TypeScript"
   }
 }

package/rte-ckeditor/plugin/typo3-link.ts

@@ -254,6 +254,7 @@ export class Typo3UnlinkCommand extends Core.Command {
         writer.removeAttribute('linkTarget', range);
         writer.removeAttribute('linkTitle', range);
         writer.removeAttribute('linkRel', range);
+        writer.removeAttribute('linkDataRteError', range);
       }
     });
   }
@@ -735,11 +736,43 @@ export class Typo3LinkUI extends Core.Plugin {
     return position.getAncestors().find((ancestor: any) => LinkUtils.isLinkElement(ancestor));
   }
 
+  /**
+   * Expands the current selection to encompass the entire link element.
+   * This prevents link splitting when editing a link with partial text selection.
+   */
+  private expandSelectionToFullLink(): void {
+    const model = this.editor.model;
+    const selection = model.document.selection;
+
+    // Only expand if we have a link attribute in the selection
+    if (!selection.hasAttribute('linkHref')) {
+      return;
+    }
+
+    const linkHref = selection.getAttribute('linkHref') as string;
+    if (!linkHref) {
+      return;
+    }
+
+    model.change(writer => {
+      const position = selection.getFirstPosition();
+      // Find the full range of the link using the linkHref attribute
+      const linkRange = Typing.findAttributeRange(position, 'linkHref', linkHref, model);
+
+      if (linkRange) {
+        // Expand selection to cover the entire link
+        writer.setSelection(linkRange);
+      }
+    });
+  }
+
   private openLinkBrowser(editor: Core.Editor): void {
     const linkCommand = editor.commands.get('link') as unknown as Typo3LinkCommand;
     let additionalParameters = '';
 
+    // If editing an existing link, expand selection to full link first
     if (linkCommand.value) {
+      this.expandSelectionToFullLink();
       additionalParameters += '&P[curUrl][url]=' + encodeURIComponent(linkCommand.value);
       for (const [attr, value] of Object.entries(linkCommand.attrs)) {
         additionalParameters += '&P[curUrl][' + encodeURIComponent(attr) + ']=' + encodeURIComponent(value);

package/workspaces/preview.ts

@@ -40,6 +40,7 @@ enum Identifiers {
  * buttons, preview mode selector, preview slider and so on.
  */
 class Preview extends Workspaces {
+  override ajaxRoute: string = 'workspace_preview';
   private currentSlidePosition: number = 100;
   private readonly elements: { [key: string]: HTMLElement } = {};
 

package/workspaces/workspaces.ts

@@ -19,6 +19,8 @@ import { default as Modal, type ModalElement } from '@typo3/backend/modal';
 import { html } from 'lit';
 
 export default class Workspaces {
+  protected readonly ajaxRoute: string = 'workspace_dispatch';
+
   /**
    * Renders the send to stage window
    * @param {Object} response
@@ -70,7 +72,7 @@ export default class Workspaces {
   protected sendRemoteRequest(payload: object, progressContainer: string = '#workspace-content-wrapper'): Promise<AjaxResponse> {
     NProgress.configure({ parent: progressContainer, showSpinner: false });
     NProgress.start();
-    return (new AjaxRequest(TYPO3.settings.ajaxUrls.workspace_dispatch)).post(
+    return (new AjaxRequest(TYPO3.settings.ajaxUrls[this.ajaxRoute])).post(
       payload,
       {
         headers: {