typo3-typescript-sources 13.4.20

package/rte-ckeditor/plugin/whitespace.ts

@@ -0,0 +1,114 @@
+import * as Core from '@ckeditor/ckeditor5-core';
+import * as UI from '@ckeditor/ckeditor5-ui';
+import * as Utils from '@ckeditor/ckeditor5-utils';
+import * as Typing from '@ckeditor/ckeditor5-typing';
+import type { InsertTextCommand } from '@ckeditor/ckeditor5-typing';
+
+/**
+ * CKEditor 5 Whitespace Plugin
+ *
+ * Add support for non breaking spaces
+ * - Make non breaking spaces visible
+ * - Shortcut for adding non breaking space:
+ *   - alt+shift+space on MacOS
+ *   - ctrl+shift+space on all other Systems
+ *
+ * Add support for soft hyphen
+ * - Make soft hyphens visible
+ * - Register button for editor ui: softhyphen
+ * - Shortcut for adding non breaking space:
+ *   - alt+shift+dash on MacOS
+ *   - ctrl+shift+dash on all other Systems
+ */
+export class Whitespace extends Core.Plugin {
+  static readonly pluginName = 'Whitespace';
+  static readonly requires = [ Typing.Typing ] as const;
+
+  public init(): void {
+    const editor = this.editor;
+    const inputCommand: InsertTextCommand = editor.commands.get('insertText');
+
+    // CKEditor should map Ctrl to Cmd on MacOs, but for
+    // some reason the shortcut is blocked and cannot be
+    // overwritten.
+    //
+    // For this reason we are using "Alt" as controlKey on MacOS.
+    // All other System use "Ctrl" as controlKey.
+    const controlKey = Utils.env.isMac ? 'Alt' : 'Ctrl';
+
+    editor.ui.componentFactory.add('softhyphen', locale => {
+      const button = new UI.ButtonView(locale);
+      button.label = 'Soft-Hyphen';
+      button.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" xml:space="preserve"><path d="M4.25 3C3.082 4.683 2 6.917 2 10.026 2 13.083 3.114 15.282 4.25 17H3c-1.008-1.425-2-3.624-2-6.974.016-3.384.992-5.583 2-7.026h1.25zM17 3c1.008 1.443 1.984 3.642 2 7.026 0 3.35-.992 5.549-2 6.974h-1.25c1.136-1.718 2.25-3.917 2.25-6.974 0-3.11-1.082-5.343-2.25-7.026H17zM6 9h8v2H6z"/></svg>';
+      button.keystroke = `${controlKey}+Shift+-`;
+      button.tooltip = true;
+      button.bind('isEnabled').to(inputCommand);
+      button.on('execute', () => this.insertSoftHyphen());
+      return button;
+    });
+
+    editor.keystrokes.set([controlKey, 'Shift', 189], (data, cancel) => {
+      this.insertSoftHyphen();
+      cancel();
+    });
+
+    editor.keystrokes.set([controlKey, 'Shift', 'Space'], (data, cancel) => {
+      this.insertNonBreakingSpace();
+      cancel();
+    });
+
+    editor.conversion.for('editingDowncast').add(downcastDispatcher => {
+      downcastDispatcher.on('insert:$text', (evt, data, conversionApi) => {
+        if (!conversionApi.consumable.consume(data.item, evt.name)) {
+          return;
+        }
+
+        const viewWriter = conversionApi.writer;
+        const chunks = data.item.data
+          // Using a regex caputure group in order for the
+          // split chars to be included in the `chunks` array
+          .split(/([\u00AD\u00A0])/)
+          .filter((value: string) => value !== '');
+        let currentPosition = data.range.start;
+
+        chunks.forEach((chunk: string) => {
+          const text = chunk === '\u00AD' ? '-' : chunk;
+          viewWriter.insert(
+            conversionApi.mapper.toViewPosition(currentPosition),
+            viewWriter.createText(text)
+          );
+
+          if (chunk === '\u00AD' || chunk === '\u00A0') {
+            const className = chunk === '\u00AD' ? 'softhyphen' : 'nbsp';
+            const id = Math.random().toString(16).slice(2);
+            const wrapper = viewWriter.createAttributeElement('span', { class: `ck ck-${className}` }, { id });
+            const wrapperRange = viewWriter.createRange(
+              conversionApi.mapper.toViewPosition(currentPosition),
+              conversionApi.mapper.toViewPosition(currentPosition.getShiftedBy(chunk.length))
+            );
+            viewWriter.wrap(wrapperRange, wrapper);
+          }
+
+          currentPosition = currentPosition.getShiftedBy(chunk.length);
+        });
+      }, { priority: 'high' });
+    });
+  }
+
+  private insertNonBreakingSpace(): void {
+    const editor = this.editor;
+
+    editor.execute('insertText', { text: '\u00A0' });
+    editor.editing.view.focus();
+  }
+
+  private insertSoftHyphen(): void {
+    const editor = this.editor;
+
+    editor.execute('insertText', { text: '\u00AD' });
+    editor.editing.view.focus();
+  }
+}
+
+// Provided for backwards compatibility
+export default Whitespace;

package/rte-ckeditor/rte-link-browser.ts

@@ -0,0 +1,112 @@
+/*
+ * 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 LinkBrowser, { type LinkAttributes } from '@typo3/backend/link-browser';
+import Modal from '@typo3/backend/modal';
+import RegularEvent from '@typo3/core/event/regular-event';
+import { type Typo3LinkDict, LINK_ALLOWED_ATTRIBUTES, addLinkPrefix } from '@typo3/rte-ckeditor/plugin/typo3-link';
+import type * as Core from '@ckeditor/ckeditor5-core';
+import type { ModelPosition } from '@ckeditor/ckeditor5-engine/src/model/position';
+
+/**
+ * Module: @typo3/rte-ckeditor/rte-link-browser
+ * LinkBrowser communication with parent window
+ */
+class RteLinkBrowser {
+  protected editor: Core.Editor = null;
+  protected selectionStartPosition: ModelPosition = null;
+  protected selectionEndPosition: ModelPosition = null;
+
+  public initialize(): void {
+    this.editor = Modal.currentModal.userData.editor;
+    this.selectionStartPosition = Modal.currentModal.userData.selectionStartPosition;
+    this.selectionEndPosition = Modal.currentModal.userData.selectionEndPosition;
+
+    const removeLinkElement = document.querySelector('.t3js-removeCurrentLink');
+    if (removeLinkElement !== null) {
+      new RegularEvent('click', (e: Event): void => {
+        e.preventDefault();
+        this.restoreSelection();
+        this.editor.execute('unlink');
+        Modal.dismiss();
+      }).bindTo(removeLinkElement);
+    }
+  }
+
+  /**
+   * Store the final link
+   *
+   * @param {String} link The select element or anything else which identifies the link (e.g. "page:<pageUid>" or "file:<uid>")
+   */
+  public finalizeFunction(link: string): void {
+    const attributes = LinkBrowser.getLinkAttributeValues();
+    const queryParams = attributes.params ? attributes.params : '';
+    delete attributes.params;
+
+    const linkText = ''; // @todo future feature: e.g. add page title as link-text (if applicable)
+    const linkAttrs = this.convertAttributes(attributes, linkText);
+
+    this.restoreSelection();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    this.editor.execute('link', this.sanitizeLink(link, queryParams), linkAttrs);
+
+    Modal.dismiss();
+  }
+
+  private restoreSelection(): void {
+    this.editor.model.change((writer) => {
+      const ranges = [writer.createRange(this.selectionStartPosition, this.selectionEndPosition)];
+      writer.setSelection(ranges);
+    });
+  }
+
+  private convertAttributes(attributes: LinkAttributes, text?: string): Typo3LinkDict {
+    const linkAttr: { attrs: { [key: string]: string}, linkText?: string} = { attrs: {} };
+    for (const [attribute, value] of Object.entries(attributes)) {
+      if (LINK_ALLOWED_ATTRIBUTES.includes(attribute)) {
+        linkAttr.attrs[addLinkPrefix(attribute)] = value;
+      }
+    }
+    if (typeof text === 'string' && text !== '') {
+      linkAttr.linkText = text;
+    }
+    return linkAttr as Typo3LinkDict;
+  }
+
+  private sanitizeLink(link: string, queryParams: string): string {
+    // @todo taken from previous code - enhance generation
+    // Make sure, parameters and anchor are in correct order
+    const linkMatch = link.match(/^([a-z0-9]+:\/\/[^:/?#]+(?:\/?[^?#]*)?)(\??[^#]*)(#?.*)$/);
+    if (linkMatch && linkMatch.length > 0) {
+      link = linkMatch[1] + linkMatch[2];
+      const paramsPrefix = linkMatch[2].length > 0 ? '&' : '?';
+      if (queryParams.length > 0) {
+        if (queryParams.startsWith('&')) {
+          queryParams = queryParams.substr(1);
+        }
+        // If params is set, append it
+        if (queryParams.length > 0) {
+          link += paramsPrefix + queryParams;
+        }
+      }
+      link += linkMatch[3];
+    }
+    return link;
+  }
+}
+
+// @todo check whether this is still required - if, document why/where
+const rteLinkBrowser = new RteLinkBrowser();
+export default rteLinkBrowser;
+LinkBrowser.finalizeFunction = (link: string): void => { rteLinkBrowser.finalizeFunction(link); };

package/rte-ckeditor/tests/css-prefixer-test.ts

@@ -0,0 +1,314 @@
+import { prefixAndRebaseCss } from '@typo3/rte-ckeditor/css-prefixer.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/rte-ckeditor/css-prefixer-test', () => {
+  describe('relative URL in css is relocated', () => {
+    it('relocates URLs', () => {
+      const result = prefixAndRebaseCss(
+        `
+          foo {
+            background-image: url('../foo.png?v=2')
+          }
+        `,
+        '/assets/css/style.css?v=3',
+        ''
+      );
+
+      expect(result).to.equal('foo{background-image:url(/assets/foo.png?v=2)}');
+    });
+    it('relocates URLs with fragment', () => {
+      const result = prefixAndRebaseCss(
+        `
+          foo {
+            background-image: url('../foo.png?v=2#bar')
+          }
+        `,
+        '/assets/css/style.css?v=3',
+        ''
+      );
+
+      expect(result).to.equal('foo{background-image:url(/assets/foo.png?v=2#bar)}');
+    });
+  });
+  describe('data URI in css is not relocated', () => {
+    it('does not relocate data URIs', () => {
+      const result = prefixAndRebaseCss(
+        `
+          foo {
+            background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAUAAAAALAAAAAABAAEAQAICRAEAOw==')
+          }
+        `,
+        '/assets/css/style.css?v=3',
+        ''
+      );
+
+      expect(result).to.equal('foo{background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAUAAAAALAAAAAABAAEAQAICRAEAOw==)}');
+    });
+  });
+  describe('css is prefixed', () => {
+    interface CssDataSet {
+      prefix: string,
+      source: string,
+      target: string,
+    }
+    function cssIsPrefixedForScssDataProvider(): Record<string, CssDataSet> {
+      return {
+        mini: {
+          prefix: '#foo',
+          source: 'div, bar {}',
+          target: '#foo div,#foo bar{}',
+        },
+        rootSelector: {
+          prefix: '#foo',
+          source: ':root {}',
+          target: '#foo{}',
+        },
+        htmlSelector: {
+          prefix: '#foo',
+          source: 'html {}',
+          target: '#foo{}',
+        },
+        bodySelector: {
+          prefix: '#foo',
+          source: 'body {}',
+          target: '#foo{}',
+        },
+        htmlAndBodySelector: {
+          prefix: '#foo',
+          source: 'html body foo {}',
+          target: '#foo  foo{}',
+        },
+        minified: {
+          prefix: '#foo .bar',
+          source: 'div{color:#abc;}body{color:#abc;}',
+          target: '#foo .bar div{color:#abc}\n#foo .bar{color:#abc}',
+        },
+        chained: {
+          prefix: 'foo',
+          source: 'body,html{color:#abc}html,body{color:#abc}',
+          target: 'foo,foo{color:#abc}\nfoo,foo{color:#abc}',
+        },
+        emptyIdSelector: {
+          prefix: 'foo',
+          source: '#html {}',
+          target: 'foo #html{}',
+        },
+        emptyClassSelector: {
+          prefix: 'foo',
+          source: '.html {}',
+          target: 'foo .html{}',
+        },
+        customElementsSelector: {
+          prefix: 'foo',
+          source: 'my---html---div { color: #abc; }',
+          target: 'foo my---html---div{color:#abc}',
+        },
+        strangeCustomSelectors: {
+          prefix: 'foo',
+          source: 'my___html___div { color: #abc; }',
+          target: 'foo my___html___div{color:#abc}',
+        },
+        hasSelector: {
+          prefix: 'foo',
+          source: 'ul li:has(> p.text-center) { color: red; }',
+          target: 'foo ul li:has(>p.text-center){color:red}',
+        },
+        hasOnRootSelector: {
+          prefix: 'foo',
+          source: ':root:has(>header) { color: red; }',
+          target: 'foo:has(>header){color:red}',
+        },
+        hasSelectorWithInvalidNestingSelector: {
+          prefix: 'foo',
+          source: 'ul li:has(& > p.text-center) { color: red; }',
+          target: 'foo ul li:has(&>p.text-center){color:red}',
+        },
+        whereSelector: {
+          prefix: 'foo',
+          source: ':where(ol, ul) :where(ol, ul) ol { color: red; }',
+          target: 'foo :where(ol,ul) :where(ol,ul) ol{color:red}',
+        },
+        isSelector: {
+          prefix: 'foo',
+          source: ':is(ol, ul) :is(ol, ul) ol { color: red; }',
+          target: 'foo :is(ol,ul) :is(ol,ul) ol{color:red}',
+        },
+        containerQuery: {
+          prefix: 'foo',
+          source: '.card h2 { font-size: 1em; } @container (min-width: 700px) { .card h2 { font-size: 2em; } }',
+          target: 'foo .card h2{font-size:1em}\n@container (min-width:700px){foo .card h2{font-size:2em}\n}',
+        },
+        supportsQuery: {
+          prefix: 'foo',
+          source: '@supports selector(.a) { .a{ display:block } }',
+          target: '@supports selector(foo .a){foo .a{display:block}\n}',
+        },
+        complete: {
+          prefix: 'foo',
+          source: getOriginCss(),
+          target: getPrefixedCss(),
+        },
+      };
+    }
+
+    for (const [name, dataSet] of Object.entries(cssIsPrefixedForScssDataProvider())) {
+      it('can prefix ' + name, () => {
+        const target = prefixAndRebaseCss(dataSet.source, 'foo.css', dataSet.prefix)
+          .replace(/}/g, '}\n').trim();
+        expect(target).to.equal(dataSet.target);
+      });
+    }
+  });
+});
+
+
+export function getOriginCss() {
+  return`
+body{margin:0}
+
+html,
+body{margin:0}
+
+body,
+html{margin:0}
+
+BODY{margin:0}
+
+HTML,
+BODY{margin:0}
+
+BODY,
+HTML{margin:0}
+
+.someclass{padding:0} body,html{margin:0}
+
+body {margin:0}
+body { margin:0; }
+body     {margin:0}
+
+body{
+    padding: 0;
+}
+
+body{
+    padding: 0;
+}
+
+body{
+    font-family: var(--bs-body-font-family);
+}
+
+body,
+body {
+    padding: 0;
+}
+
+body > :first-child {
+    margin-top: 0;
+}
+
+body[dir="ltr"] blockquote {
+    padding-left: 20px;
+    border-left-width: 5px;
+}
+
+body[dir="rtl"] ol,
+body[dir="rtl"] ul,
+body[dir="rtl"] dl {
+    padding: 0;
+}
+
+.some body[dir="rtl"] ol,
+.some body[dir="rtl"] ul,
+.some body[dir="rtl"] dl {
+    padding: 0;
+}
+
+/* minified version */
+body{margin:0}html,body{margin:0}body,html{margin:0}.someclass{padding:0} body,html{margin:0}body {margin:0}body     {margin:0}body{padding: 0;}body{padding: 0;}
+
+/* NO CHANGES HERE */
+body-unofindmemargin {
+    padding: 0
+}
+
+#body {
+    padding: 0;
+}
+
+.body {}
+
+.body-some {}
+.some-body {}
+
+html-unofindmemargin {
+    padding: 0
+}
+
+#html {
+    padding: 0;
+}
+
+.html {}
+
+.html-some {}
+.some-html {}
+
+/* minified version */
+body-unofindmemargin {padding: 0} #body {padding: 0;} .body {} .body-some {} .some-body {} html-unofindmemargin {padding: 0} #html {padding: 0;} .html {} .html-some {} .some-html {}
+`;
+}
+
+export function getPrefixedCss() {
+  return `
+foo{margin:0}
+foo,foo{margin:0}
+foo,foo{margin:0}
+foo{margin:0}
+foo,foo{margin:0}
+foo,foo{margin:0}
+foo .someclass{padding:0}
+foo,foo{margin:0}
+foo{margin:0}
+foo{margin:0}
+foo{margin:0}
+foo{padding:0}
+foo{padding:0}
+foo{font-family:var(--bs-body-font-family)}
+foo,foo{padding:0}
+foo>:first-child{margin-top:0}
+foo[dir="ltr"] blockquote{padding-left:20px;border-left-width:5px}
+foo[dir="rtl"] ol,foo[dir="rtl"] ul,foo[dir="rtl"] dl{padding:0}
+.some foo[dir="rtl"] ol,.some foo[dir="rtl"] ul,.some foo[dir="rtl"] dl{padding:0}
+foo{margin:0}
+foo,foo{margin:0}
+foo,foo{margin:0}
+foo .someclass{padding:0}
+foo,foo{margin:0}
+foo{margin:0}
+foo{margin:0}
+foo{padding:0}
+foo{padding:0}
+foo body-unofindmemargin{padding:0}
+foo #body{padding:0}
+foo .body{}
+foo .body-some{}
+foo .some-body{}
+foo html-unofindmemargin{padding:0}
+foo #html{padding:0}
+foo .html{}
+foo .html-some{}
+foo .some-html{}
+foo body-unofindmemargin{padding:0}
+foo #body{padding:0}
+foo .body{}
+foo .body-some{}
+foo .some-body{}
+foo html-unofindmemargin{padding:0}
+foo #html{padding:0}
+foo .html{}
+foo .html-some{}
+foo .some-html{}
+`.trim();
+}

package/scheduler/scheduler-add-group.ts

@@ -0,0 +1,119 @@
+/*
+ * 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 Modal from '@typo3/backend/modal';
+import { html, type TemplateResult } from 'lit';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import type ResponseInterface from '@typo3/backend/ajax-data-handler/response-interface';
+import Notification from '@typo3/backend/notification';
+import { lll } from '@typo3/core/lit-helper';
+
+/**
+ * Module: @typo3/scheduler/scheduler-add-groups
+ * @exports @typo3/scheduler/scheduler-add-groups
+ */
+class SchedulerAddGroups {
+  selector: string = '.t3js-create-group';
+
+  constructor() {
+    this.initialize();
+  }
+
+  public initialize(): void {
+    const element = document.querySelector(this.selector) as HTMLElement;
+    if(element) {
+      element.addEventListener('click', (button: MouseEvent) => {
+        button.preventDefault();
+        const content: TemplateResult = html`
+          <form name="scheduler-create-group" @submit=${this.createGroup}>
+            <label class="form-label" for="actionCreateGroup">Group name</label>
+            <input class="form-control" id="actionCreateGroup" required="" name="action[createGroup]" autofocus type="text">
+          </form>
+        `;
+
+        const modal = Modal.advanced({
+          content: content,
+          title: lll('scheduler.createGroup') || 'New group',
+          size: Modal.sizes.small,
+          buttons: [
+            {
+              trigger: (): void => Modal.dismiss(),
+              text: lll('scheduler.modalCancel') || 'Cancel',
+              btnClass: 'btn-default',
+              name: 'cancel'
+            },{
+              trigger: (): void => {
+                const form: HTMLFormElement = Modal.currentModal.querySelector('form[name="scheduler-create-group"]');
+                form.requestSubmit();
+              },
+              text: lll('scheduler.modalOk') || 'Create group',
+              btnClass: 'btn-primary',
+              name: 'ok'
+            }
+          ]
+        });
+
+        modal.addEventListener('typo3-modal-shown', (): void => {
+          const input: HTMLInputElement = Modal.currentModal.querySelector('input[name="action[createGroup]"]');
+          input.focus();
+        });
+      });
+    }
+  }
+
+  private createGroup(e: Event): Promise<ResponseInterface | void> {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const name = formData.get('action[createGroup]').toString();
+    const newUid = 'NEW' + Math.random().toString(36).slice(2, 7);
+    const params = '&data[tx_scheduler_task_group][' + newUid + '][pid]=0' +
+      '&data[tx_scheduler_task_group][' + newUid + '][groupName]=' + encodeURIComponent(name);
+
+    return (new AjaxRequest(TYPO3.settings.ajaxUrls.record_process)).post(params, {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
+    })
+      .then(async (response: AjaxResponse): Promise<ResponseInterface> => {
+        return await response.resolve();
+      }).then((result: ResponseInterface): ResponseInterface => {
+        if (result.hasErrors) {
+          Notification.error(lll('scheduler.group.error.title'), lll('scheduler.group.error.message') + ' "' + name + '"!');
+        }
+
+        result.messages.forEach((message) => {
+          Notification.info(message.title, message.message);
+        });
+
+        return result;
+      }).catch(() => {
+        Notification.error(lll('scheduler.group.error.title'), lll('scheduler.group.error.message') + ' "' + name + '"!');
+      }).finally(() => {
+        const select = (document as Document).querySelector('#task_group');
+        if(select) {
+          // This is an ugly hack to pre-select the created group.
+          const form = ((document as Document).forms[0] as HTMLFormElement);
+          const selectLatestGroup: HTMLInputElement = form.querySelector('[name="tx_scheduler[select_latest_group]"]');
+
+          selectLatestGroup.value = '1';
+          form.submit();
+        } else {
+          window.location.reload();
+        }
+
+        Modal.dismiss();
+      });
+  }
+}
+
+export default new SchedulerAddGroups();