typo3-typescript-sources 13.4.20

package/backend/clipboard-panel.ts

@@ -0,0 +1,240 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { until } from 'lit/directives/until';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
+import { classMap } from 'lit/directives/class-map';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import Notification from '@typo3/backend/notification';
+import '@typo3/backend/element/spinner-element';
+import '@typo3/backend/element/icon-element';
+
+enum CopyMode {
+  cut = 'cut',
+  copy = 'copy',
+}
+
+interface ClipboardData {
+  current: string;
+  copyMode: CopyMode;
+  elementCount: number;
+  tabs: Array<ClipboardTab>;
+  labels: Record<string, string>;
+}
+
+interface ClipboardTab {
+  identifier: string;
+  info: string;
+  title: string;
+  description: string;
+  items: Array<ClipboardTabItem>;
+}
+
+interface ClipboardTabItem {
+  identifier: string;
+  title: string;
+  icon: string;
+  thumb: string;
+  infoDataDispatch: DispatchArgs;
+}
+
+interface DispatchArgs {
+  action: string,
+  args: Array<any>
+}
+
+/**
+ * Module: @typo3/backend/clipboard-panel
+ *
+ * @example
+ * <typo3-backend-clipboard-panel return-url="/typo3/module" table="_FILE"></typo3-backend-clipboard-panel>
+ */
+@customElement('typo3-backend-clipboard-panel')
+export class ClipboardPanel extends LitElement {
+  @property({ type: String, attribute: 'return-url' }) returnUrl: string = '';
+  @property({ type: String }) table: string = '';
+
+  private static renderLoader(): TemplateResult {
+    return html`
+      <div class="panel panel-default">
+        <div class="panel-loader">
+          <typo3-backend-spinner size="small"></typo3-backend-spinner>
+        </div>
+      </div>
+    `;
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    // const renderRoot = this.attachShadow({mode: 'open'});
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      ${until(this.renderPanel(), ClipboardPanel.renderLoader())}
+    `;
+  }
+
+  private renderPanel(): Promise<TemplateResult> {
+    return (new AjaxRequest(top.TYPO3.settings.Clipboard.moduleUrl))
+      .withQueryArguments({ action: 'getClipboardData' })
+      .post({ table: this.table })
+      .then(async (response: AjaxResponse): Promise<TemplateResult> => {
+        const resolvedBody = await response.resolve();
+        if (resolvedBody.success === true && resolvedBody.data) {
+          const clipboardData: ClipboardData = resolvedBody.data;
+          return html`
+            <div class="panel panel-default" data-clipboard-panel>
+              <div class="panel-heading">
+                ${clipboardData.labels.clipboard}
+              </div>
+              <div class="table-fit">
+                <table class="table">
+                  <tbody>
+                    ${clipboardData.tabs.map((tab: ClipboardTab): TemplateResult => this.renderTab(tab, clipboardData))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          `;
+        } else {
+          return html`
+            <div class="alert alert-danger">Clipboard data could not be fetched</div>
+          `;
+        }
+      })
+      .catch((): TemplateResult => {
+        return html`
+          <div class="alert alert-danger">An error occurred while fetching clipboard data</div>
+        `;
+      });
+  }
+
+  private renderTab(tab: ClipboardTab, clipboardData: ClipboardData): TemplateResult {
+    return html`
+      <tr>
+        <td colspan="2" class="nowrap">
+          <button type="button" class="btn btn-link" aria-checked="${clipboardData.current === tab.identifier}" title="${tab.description}" data-action="setP" @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'setP': tab.identifier } })}">
+            ${clipboardData.current === tab.identifier ? html`
+              <typo3-backend-icon identifier="actions-check-circle-alt" size="small"></typo3-backend-icon>
+              ${tab.title}
+              ${tab.info}` : html`
+              <typo3-backend-icon identifier="actions-circle" size="small"></typo3-backend-icon>
+              <span class="text-body-secondary">
+                ${tab.title}
+                ${tab.info}
+              </span>
+            `}
+          </button>
+        </td>
+        <td class="col-control nowrap">
+          ${clipboardData.current !== tab.identifier ? nothing : html`
+            <div class="btn-group">
+              <input type="radio" class="btn-check" id="clipboard-copymode-copy" data-action="setCopyMode" ?checked=${clipboardData.copyMode === CopyMode.copy} @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'setCopyMode': '1' } })}">
+              <label class="btn btn-default btn-sm" for="clipboard-copymode-copy">
+                <typo3-backend-icon identifier="actions-edit-copy" size="small"></typo3-backend-icon>
+                ${clipboardData.labels.copyElements}
+              </label>
+              <input type="radio" class="btn-check" id="clipboard-copymode-move" data-action="setCopyMode" ?checked=${clipboardData.copyMode !== CopyMode.copy} @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'setCopyMode': '0' } })}">
+              <label class="btn btn-default btn-sm" for="clipboard-copymode-move">
+                <typo3-backend-icon identifier="actions-cut" size="small"></typo3-backend-icon>
+                ${clipboardData.labels.moveElements}
+              </label>
+            </div>
+            ${!clipboardData.elementCount ? nothing : html`
+              <button type="button" class="btn btn-default btn-sm" title="${clipboardData.labels.removeAll}" data-action="removeAll" @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'removeAll': tab.identifier } })}">
+                <typo3-backend-icon identifier="actions-minus" size="small"></typo3-backend-icon>
+                ${clipboardData.labels.removeAll}
+              </button>`}
+          `}
+        </td>
+      </tr>
+      ${clipboardData.current === tab.identifier && tab.items ? tab.items.map((tabItem: ClipboardTabItem): TemplateResult => this.renderTabItem(tabItem, tab.identifier, clipboardData)) : nothing}
+    `;
+  }
+
+  private renderTabItem(tabItem: ClipboardTabItem, tabIdentifier: string, clipboardData: ClipboardData): TemplateResult {
+    return html`
+      <tr>
+        <td class="col-icon nowrap ${classMap({ 'ps-4': !tabItem.identifier })}">
+          ${unsafeHTML(tabItem.icon)}
+        </td>
+        <td class="nowrap" style="width: 95%">
+          ${unsafeHTML(tabItem.title)}
+          ${tabIdentifier === 'normal' ? html`<strong>(${clipboardData.copyMode === CopyMode.copy ? html`${clipboardData.labels.copy}` : html`${clipboardData.labels.cut}`})</strong>` : nothing}
+          ${tabItem.thumb ? html`<div class="d-block">${unsafeHTML(tabItem.thumb)}</div>` : nothing}
+        </td>
+        <td class="col-control nowrap">
+          <div class="btn-group">
+            ${!tabItem.infoDataDispatch ? nothing : html`
+              <button type="button" class="btn btn-default btn-sm" data-dispatch-action="${tabItem.infoDataDispatch.action}" data-dispatch-args="${tabItem.infoDataDispatch.args}" title="${clipboardData.labels.info}">
+                <typo3-backend-icon identifier="actions-document-info" size="small"></typo3-backend-icon>
+              </button>
+            `}
+            ${!tabItem.identifier ? nothing : html`
+              <button type="button" class="btn btn-default btn-sm" title="${clipboardData.labels.removeItem}" data-action="remove" @click="${(event: PointerEvent) => this.updateClipboard(event,{ CB: { 'remove': tabItem.identifier } })}">
+                <typo3-backend-icon identifier="actions-minus" size="small"></typo3-backend-icon>
+                ${clipboardData.labels.removeItem}
+              </button>
+            `}
+          </div>
+        </td>
+      </tr>`;
+  }
+
+  private updateClipboard(event: PointerEvent, payload: object): void {
+    event.preventDefault();
+    const target: HTMLElement = event.currentTarget as HTMLElement;
+    (new AjaxRequest(top.TYPO3.settings.Clipboard.moduleUrl))
+      .post(payload)
+      .then(async (response: AjaxResponse): Promise<void> => {
+        const resolvedBody = await response.resolve();
+        if (resolvedBody.success === true) {
+          // In case action is provided, dispatch an event to let
+          // other components react on the updated clipboard state.
+          if (target.dataset.action) {
+            target.dispatchEvent(new CustomEvent('typo3:clipboard:' + target.dataset.action, {
+              detail: { payload: payload, response: resolvedBody },
+              bubbles: true,
+              cancelable: false
+            }));
+          }
+          // @todo Add possibility for a callback, e.g. to dispatch an event after clipboard data was updated
+          this.reloadModule();
+        } else {
+          Notification.error('Clipboard data could not be updated');
+        }
+      })
+      .catch((): void => {
+        Notification.error('An error occurred while updating clipboard data');
+      });
+  }
+
+  private reloadModule (): void {
+    if (this.returnUrl) {
+      this.ownerDocument.location.href = this.returnUrl;
+    } else {
+      this.ownerDocument.location.reload();
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-clipboard-panel': ClipboardPanel;
+  }
+}

package/backend/close-current-window.ts

@@ -0,0 +1,2 @@
+self.close();
+window.opener.location.reload();

package/backend/code-editor/autocomplete/completion-result.ts

@@ -0,0 +1,105 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import type { TsRef, TsRefType } from './ts-ref';
+import type { TreeNode } from './ts-parser';
+
+export type Proposal = {
+  type: string,
+  word?: string,
+  cssClass?: string,
+};
+
+export class CompletionResult {
+  private readonly tsRef: TsRef;
+  private readonly tsTreeNode: TreeNode;
+
+  constructor(tsRef: TsRef, tsTreeNode: TreeNode) {
+    this.tsRef = tsRef;
+    this.tsTreeNode = tsTreeNode;
+  }
+
+  /**
+   * returns the type of the currentTsTreeNode
+   */
+  public getType(): TsRefType | null {
+    const val = this.tsTreeNode.getValue();
+    if (this.tsRef.isType(val)) {
+      return this.tsRef.getType(val);
+    }
+    return null;
+  }
+
+  /**
+   * returns a list of possible path completions (proposals), which is:
+   * a list of the children of the current TsTreeNode (= userdefined properties)
+   * and a list of properties allowed for the current object in the TsRef
+   * remove all words from list that don't start with the string in filter
+   */
+  public getFilteredProposals(filter: string): Array<Proposal> {
+    const defined: Record<string, boolean> = {};
+    const propArr: Array<Proposal> = [];
+    const childNodes = this.tsTreeNode.getChildNodes();
+    const value = this.tsTreeNode.getValue();
+
+    // first get the childNodes of the Node (=properties defined by the user)
+    for (const key in childNodes) {
+      if (typeof childNodes[key].value !== 'undefined' && childNodes[key].value !== null) {
+        const propObj: Proposal = {} as Proposal;
+        propObj.word = key;
+        if (this.tsRef.typeHasProperty(value, childNodes[key].name)) {
+          this.tsRef.cssClass = 'definedTSREFProperty';
+          propObj.type = childNodes[key].value;
+        } else {
+          propObj.cssClass = 'userProperty';
+          if (this.tsRef.isType(childNodes[key].value)) {
+            propObj.type = childNodes[key].value;
+          } else {
+            propObj.type = '';
+          }
+        }
+        propArr.push(propObj);
+        defined[key] = true;
+      }
+    }
+
+    // then get the tsref properties
+    const props = this.tsRef.getPropertiesFromTypeId(this.tsTreeNode.getValue());
+    for (const key in props) {
+      // show just the TSREF properties - no properties of the array-prototype and no properties which have been defined by the user
+      if (typeof props[key].value !== 'undefined' && defined[key] !== true) {
+        const propObj = {
+          word: key,
+          cssClass: 'undefinedTSREFProperty',
+          type: props[key].value,
+        };
+        propArr.push(propObj);
+      }
+    }
+
+    const result: Array<Proposal> = [];
+    let wordBeginning = '';
+
+    for (let i = 0; i < propArr.length; i++) {
+      if (filter.length === 0) {
+        result.push(propArr[i]);
+        continue;
+      }
+      wordBeginning = propArr[i].word.substring(0, filter.length);
+      if (wordBeginning.toLowerCase() === filter.toLowerCase()) {
+        result.push(propArr[i]);
+      }
+    }
+    return result;
+  }
+}

package/backend/code-editor/autocomplete/ts-code-completion.ts

@@ -0,0 +1,142 @@
+/*
+ * 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: ./ts-code-completion
+ * Contains the TsCodeCompletion class
+ */
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import { TsRef } from './ts-ref';
+import { TsParser } from './ts-parser';
+import { CompletionResult, type Proposal } from './completion-result';
+
+import type { CodeMirror5CompatibleCompletionState } from '../language/typoscript';
+
+export type ContentObjectIdentifier = string;
+
+export type TsObjTree = {
+  c?: Record<string, TsObjTree>;
+  v?: ContentObjectIdentifier;
+};
+
+export class TsCodeCompletion {
+  public extTsObjTree: TsObjTree = {};
+  private readonly tsRef: TsRef;
+  private readonly parser: TsParser = null;
+  private proposals: Array<Proposal> = null;
+  private compResult: CompletionResult = null;
+
+  constructor(id: number) {
+    this.tsRef = new TsRef();
+    this.parser = new TsParser(this.tsRef, this.extTsObjTree);
+    this.tsRef.loadTsrefAsync();
+    this.loadExtTemplatesAsync(id);
+  }
+
+  /**
+   * Refreshes the code completion list based on the cursor's position
+   */
+  public refreshCodeCompletion(
+    completionState: CodeMirror5CompatibleCompletionState
+  ): Array<Proposal['word']> {
+    // the cursornode has to be stored cause inserted breaks have to be deleted after pressing enter if the codecompletion is active
+    const filter = this.getFilter(completionState);
+
+    // TODO: implement cases: operatorCompletion reference/copy path completion (formerly found in getCompletionResults())
+    const currentTsTreeNode = this.parser.buildTsObjTree(completionState);
+    this.compResult = new CompletionResult(
+      this.tsRef,
+      currentTsTreeNode
+    );
+
+    this.proposals = this.compResult.getFilteredProposals(filter);
+
+    const proposals: string[] = [];
+    for (let i = 0; i < this.proposals.length; i++) {
+      proposals[i] = this.proposals[i].word;
+    }
+
+    return proposals;
+  }
+
+  /**
+   * All external templates along the rootline have to be loaded,
+   * this function retrieves the JSON code by committing a AJAX request
+   */
+  private loadExtTemplatesAsync(id: number): void {
+    if (Number.isNaN(id) || id === 0) {
+      return null;
+    }
+    new AjaxRequest(TYPO3.settings.ajaxUrls.codeeditor_codecompletion_loadtemplates)
+      .withQueryArguments({ pageId: id })
+      .get()
+      .then(async (response) => {
+        this.extTsObjTree.c = await response.resolve();
+        this.resolveExtReferencesRec(this.extTsObjTree.c);
+      });
+  }
+
+  /**
+   * Since the references are not resolved server side we have to do it client-side
+   * Benefit: less loading time due to less data which has to be transmitted
+   *
+   * @param {Array} childNodes
+   */
+  private resolveExtReferencesRec(childNodes: Record<string, TsObjTree>): void {
+    for (const key of Object.keys(childNodes)) {
+      let childNode;
+      // if the childnode has a value and there is a part of a reference operator ('<')
+      // and it does not look like a html tag ('>')
+      if (childNodes[key].v && childNodes[key].v.startsWith('<') && !childNodes[key].v.includes('>')) {
+        const path = childNodes[key].v.replace(/</, '').trim();
+        // if there are still whitespaces it's no path
+        if (path.indexOf(' ') === -1) {
+          childNode = this.getExtChildNode(path);
+          // if the node was found - reference it
+          if (childNode !== null) {
+            childNodes[key] = childNode;
+          }
+        }
+      }
+      // if there was no reference-resolving then we go deeper into the tree
+      if (!childNode && childNodes[key].c) {
+        this.resolveExtReferencesRec(childNodes[key].c);
+      }
+    }
+  }
+
+  /**
+   * Get the child node of given path
+   */
+  private getExtChildNode(path: string): object {
+    let extTree = this.extTsObjTree;
+
+    const pathParts = path.split('.');
+    for (let i = 0; i < pathParts.length; i++) {
+      const pathSeg = pathParts[i];
+      if (typeof extTree.c === 'undefined' || typeof extTree.c[pathSeg] === 'undefined') {
+        return null;
+      }
+      extTree = extTree.c[pathSeg];
+    }
+    return extTree;
+  }
+
+  private getFilter(completionState: CodeMirror5CompatibleCompletionState): string {
+    if (completionState.completingAfterDot) {
+      return '';
+    }
+
+    return completionState.token.string.replace('.', '').replace(/\s/g, '');
+  }
+}