typo3-typescript-sources 13.4.20

package/redirects/redirects-module.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 RegularEvent from '@typo3/core/event/regular-event';
+
+/**
+ * Module: @typo3/redirects/redirects-module
+ * @exports @typo3/redirects/redirects-module
+ */
+class RedirectsModule {
+  public constructor() {
+    const filterForm: HTMLFormElement = document.querySelector('form[data-on-submit="processNavigate"]');
+    if (filterForm !== null) {
+      new RegularEvent('change', this.executeSubmit.bind(this))
+        .delegateTo(document, '[data-on-change="submit"]');
+      new RegularEvent('submit', this.processNavigate.bind(this))
+        .bindTo(filterForm);
+    }
+  }
+
+  private executeSubmit(evt: Event): void {
+    const target = evt.target;
+    if (target instanceof HTMLSelectElement || (target instanceof HTMLInputElement && target.type === 'checkbox')) {
+      target.form.submit();
+    }
+  }
+
+  private processNavigate(evt: Event): void {
+    const target = evt.target;
+    if (!(target instanceof HTMLFormElement)) {
+      return;
+    }
+    evt.preventDefault();
+    const formField = target.elements.namedItem('paginator-target-page') as HTMLInputElement;
+    const numberOfPages = parseInt(formField.dataset.numberOfPages, 10);
+    let url = formField.dataset.url;
+    let page = parseInt(formField.value, 10);
+    if (page > numberOfPages) {
+      page = numberOfPages;
+    } else if (page < 1) {
+      page = 1;
+    }
+    url = url.replace('987654322', page.toString());
+    self.location.href = url;
+  }
+}
+
+export default new RedirectsModule();

package/rte-ckeditor/ckeditor5.ts

@@ -0,0 +1,402 @@
+import { html, LitElement, type TemplateResult } from 'lit';
+import { customElement, property, queryAssignedElements } from 'lit/decorators';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import DebounceEvent from '@typo3/core/event/debounce-event';
+import { prefixAndRebaseCss } from '@typo3/rte-ckeditor/css-prefixer';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import type { Editor, EditorConfig, PluginConstructor } from '@ckeditor/ckeditor5-core';
+import type { WordCount, WordCountConfig } from '@ckeditor/ckeditor5-word-count';
+import type { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
+import type { GeneralHtmlSupportConfig } from '@ckeditor/ckeditor5-html-support';
+import type { TypingConfig } from '@ckeditor/ckeditor5-typing';
+import type { EventInfo } from '@ckeditor/ckeditor5-utils';
+import type { FullscreenConfig } from '@ckeditor/ckeditor5-fullscreen';
+
+type PluginModuleDescriptor = {
+  module: string,
+  exports: string[],
+};
+
+type CKEditor5Config = Omit<EditorConfig, 'toolbar'> & {
+  // in TYPO3 always `items` property is used, skipping `string[]`
+  toolbar?: { items: string[], shouldNotGroupWhenFull?: boolean };
+  importModules?: Array<string|PluginModuleDescriptor>;
+  removeImportModules?: Array<string|PluginModuleDescriptor>;
+  contentsCss?: string[];
+  width?: string|number;
+  height?: string|number;
+  readOnly?: boolean;
+  debug?: boolean;
+};
+
+type Typo3Plugin = PluginConstructor<Editor> & {overrides?: PluginConstructor<Editor>[]};
+type PluginModule = Record<string, Typo3Plugin>;
+
+const defaultPlugins: PluginModuleDescriptor[] = [
+  { module: '@ckeditor/ckeditor5-block-quote', exports: ['BlockQuote'] },
+  { module: '@ckeditor/ckeditor5-essentials', exports: ['Essentials'] },
+  { module: '@ckeditor/ckeditor5-find-and-replace', exports: ['FindAndReplace'] },
+  { module: '@ckeditor/ckeditor5-heading', exports: ['Heading'] },
+  { module: '@ckeditor/ckeditor5-indent', exports: ['Indent', 'IndentBlock'] },
+  { module: '@ckeditor/ckeditor5-link', exports: ['Link'] },
+  { module: '@ckeditor/ckeditor5-list', exports: ['List'] },
+  { module: '@ckeditor/ckeditor5-paragraph', exports: ['Paragraph'] },
+  { module: '@ckeditor/ckeditor5-clipboard', exports: ['PastePlainText'] },
+  { module: '@ckeditor/ckeditor5-paste-from-office', exports: ['PasteFromOffice'] },
+  { module: '@ckeditor/ckeditor5-remove-format', exports: ['RemoveFormat'] },
+  { module: '@ckeditor/ckeditor5-table', exports: ['Table', 'TableToolbar', 'TableProperties', 'TableCellProperties', 'TableCaption'] },
+  { module: '@ckeditor/ckeditor5-typing', exports: ['TextTransformation'] },
+  { module: '@ckeditor/ckeditor5-source-editing', exports: ['SourceEditing'] },
+  { module: '@ckeditor/ckeditor5-alignment', exports: ['Alignment'] },
+  { module: '@ckeditor/ckeditor5-style', exports: ['Style'] },
+  { module: '@ckeditor/ckeditor5-html-support', exports: ['GeneralHtmlSupport'] },
+  { module: '@ckeditor/ckeditor5-basic-styles', exports: ['Bold', 'Italic', 'Subscript', 'Superscript', 'Strikethrough', 'Underline'] },
+  { module: '@ckeditor/ckeditor5-special-characters', exports: ['SpecialCharacters', 'SpecialCharactersEssentials'] },
+  { module: '@ckeditor/ckeditor5-horizontal-line', exports: ['HorizontalLine'] },
+];
+
+/**
+ * Module: @typo3/rte_ckeditor/ckeditor5
+ *
+ * @example
+ * <typo3-rte-ckeditor-ckeditor5
+ *    options="[JSON]"
+ * ></typo3-rte-ckeditor-ckeditor5>
+ */
+@customElement('typo3-rte-ckeditor-ckeditor5')
+export class CKEditor5Element extends LitElement {
+
+  @property({ type: Object }) options?: CKEditor5Config = {};
+
+  @queryAssignedElements({ slot: 'textarea' }) target: HTMLElement[];
+
+  private readonly styleSheets: Map<CSSStyleSheet, true> = new Map();
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.prefixAndLoadContentsCss();
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(styleSheet => !this.styleSheets.has(styleSheet));
+    this.styleSheets.clear();
+  }
+
+  protected override firstUpdated(): void {
+    if (this.target[0] instanceof HTMLTextAreaElement) {
+      this.initCKEditor();
+    } else {
+      this.renderRoot.querySelector('slot[name="textarea"]').addEventListener('slotchange', () => this.initCKEditor(), { once: true });
+    }
+  }
+
+  protected async initCKEditor(): Promise<void> {
+    if (!(this.target[0] instanceof HTMLTextAreaElement)) {
+      throw new Error('No rich-text <textarea> content target found.');
+    }
+
+    const {
+      // options handled by this wrapper
+      importModules,
+      removeImportModules,
+      width,
+      height,
+      readOnly,
+      debug,
+
+      // options forwarded to CKEditor 5
+      toolbar,
+      placeholder,
+      htmlSupport,
+      wordCount,
+      typo3link,
+      removePlugins,
+      ...otherOptions
+    } = this.options;
+
+    if ('extraPlugins' in otherOptions) {
+      // Drop CKEditor 4 style extraPlugins which we do not support for CKEditor 5
+      // as this string-based list of plugin names works only for bundled plugins.
+      // `config.importModules` is used for CKEditor 5 instead
+      delete otherOptions.extraPlugins;
+    }
+    if ('contentsCss' in otherOptions) {
+      // Consumed in connectedCallback
+      delete otherOptions.contentsCss;
+    }
+
+    let fullscreenConfiguration: FullscreenConfig = {};
+    if ('fullscreen' in otherOptions) {
+      fullscreenConfiguration = otherOptions.fullscreen;
+      delete otherOptions.fullscreen;
+    }
+    // Set `.module-body` as the parent container to let users reach controls, e.g. the "Save" button
+    fullscreenConfiguration.container = document.querySelector('.module-body');
+
+    const plugins = await this.resolvePlugins(defaultPlugins, importModules, removeImportModules);
+
+    const config: EditorConfig = {
+      licenseKey: 'GPL',
+      ...otherOptions,
+      // link.defaultProtocol: 'https://'
+      toolbar,
+      plugins,
+      placeholder,
+      wordCount,
+      typo3link: typo3link || null,
+      removePlugins: removePlugins || [],
+      fullscreen: fullscreenConfiguration
+    };
+
+    if (htmlSupport !== undefined) {
+      config.htmlSupport = convertPseudoRegExp(htmlSupport) as GeneralHtmlSupportConfig;
+    }
+
+    if (config?.typing?.transformations !== undefined) {
+      // Implement variant of CKEditor's native buildQuotesRegExp() method.
+      // This allows to convert a 'pattern' sub-object into the proper object.
+      config.typing.transformations = convertPseudoRegExp(config.typing.transformations) as TypingConfig['transformations'];
+    }
+
+    ClassicEditor
+      .create(this.target[0], config)
+      .then((editor: ClassicEditor) => {
+        this.applyEditableElementStyles(editor, width, height);
+        this.handleWordCountPlugin(editor, wordCount);
+        this.applyReadOnly(editor, readOnly);
+        editor.model.document.on('change:data', (): void => {
+          editor.updateSourceElement();
+          this.target[0].dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+        });
+        if (editor.plugins.has('SourceEditing')) {
+          const sourceEditingPlugin = editor.plugins.get('SourceEditing') as SourceEditing;
+          sourceEditingPlugin.on('change:isSourceEditingMode', (eventInfo: EventInfo, eventName: string, isEnabled: boolean): void => {
+            for (const [ rootName ] of editor.editing.view.domRoots) {
+              // Behold, CKEditor doesn't exposes events for the edit textarea that replaces the editor UI
+              // therefore we have to register an `input` event handler ourselves.
+              // The neat thing: if the user switches back to wysiwyg mode, the textarea is disposed,
+              // we don't have to remove the event handler by ourselves.
+              if (isEnabled) {
+                const sourceEditingTextarea = editor.ui.getEditableElement(`sourceEditing:${rootName}`);
+                if (sourceEditingTextarea instanceof HTMLTextAreaElement) {
+                  new DebounceEvent('input', (): void => {
+                    // Force editor model update on input, this will dispatch `change:data`
+                    sourceEditingPlugin.updateEditorData();
+                  }, 100).bindTo(sourceEditingTextarea);
+                } else {
+                  throw new Error('Cannot find textarea related to source editing. Has CKEditor been upgraded?');
+                }
+              }
+            }
+          });
+        }
+
+        if (debug) {
+          import('@ckeditor/ckeditor5-inspector').then(({ default: CKEditorInspector }) => CKEditorInspector.attach(editor, { isCollapsed: true }));
+        }
+      });
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <slot name="textarea"></slot>
+      <slot></slot>
+    `;
+  }
+
+  private async resolvePlugins(
+    defaultPlugins: Array<PluginModuleDescriptor>,
+    importModulesOption: Array<string|PluginModuleDescriptor>|undefined,
+    removeImportModulesOption: Array<string|PluginModuleDescriptor>|undefined
+  ): Promise<Array<PluginConstructor<Editor>>> {
+    const removeImportModules: Array<PluginModuleDescriptor> = normalizeImportModules(removeImportModulesOption || []);
+    const importModules: Array<PluginModuleDescriptor> = normalizeImportModules([
+      ...defaultPlugins,
+      ...(importModulesOption || []),
+    ]).map((moduleDescriptor: PluginModuleDescriptor) => {
+      const { module } = moduleDescriptor;
+      let { exports } = moduleDescriptor;
+      for (const toRemove of removeImportModules) {
+        if (toRemove.module === module) {
+          exports = exports.filter(el => !toRemove.exports.includes(el));
+        }
+      }
+      return { module, exports };
+    });
+
+    const pluginModules: Array<{module: PluginModule, exports: string[]}> = await Promise.all(
+      importModules
+        .map(async (moduleDescriptor: PluginModuleDescriptor): Promise<{module: PluginModule, exports: string[]}> => {
+          try {
+            return {
+              module: await import(moduleDescriptor.module) as PluginModule,
+              exports: moduleDescriptor.exports,
+            };
+          } catch (e) {
+            console.error(`Failed to load CKEditor 5 module ${moduleDescriptor.module}`, e);
+            return {
+              module: null,
+              exports: []
+            };
+          }
+        })
+    );
+
+    const declaredPlugins: Array<Typo3Plugin> = [];
+    pluginModules.forEach(({ module, exports }) => {
+      for (const exportName of exports) {
+        if (exportName in module) {
+          declaredPlugins.push(module[exportName]);
+        } else {
+          console.error(`CKEditor 5 plugin export "${exportName}" not available in`, module);
+        }
+      }
+    });
+
+    // plugins that were overridden by other custom plugin implementations
+    const overriddenPlugins = declaredPlugins
+      .filter(plugin => plugin.overrides?.length > 0)
+      .map(plugin => plugin.overrides)
+      .flat(1);
+
+    // plugins, without those that have been overridden
+    return declaredPlugins
+      .filter(plugin => !overriddenPlugins.includes(plugin as PluginConstructor<Editor>));
+  }
+
+  private async prefixAndLoadContentsCss(): Promise<void> {
+    if (!Array.isArray(this.options.contentsCss)) {
+      return;
+    }
+    const styleSheetStates = await Promise.allSettled(
+      this.options.contentsCss.map(url => this.prefixContentsCss(url, this.getAttribute('id')))
+    );
+    const styleSheets = styleSheetStates
+      .map(state => state.status === 'fulfilled' ? state.value : null)
+      .filter(v => v !== null);
+    styleSheets.forEach(styleSheet => this.styleSheets.set(styleSheet, true));
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, ...styleSheets];
+  }
+
+  private async prefixContentsCss(url: string, fieldId: string): Promise<CSSStyleSheet> {
+    let content: string;
+    try {
+      const response = await new AjaxRequest(url).get();
+      content = await response.resolve();
+    } catch (e) {
+      console.error(`Failed to fetch CSS content for CKEditor 5 prefixing: "${url}"`, e);
+      throw new Error();
+    }
+    // see https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
+    const newParents = [
+      // Prefix custom stylesheets with id of the container element and a required `.ck-content` selector
+      `#${fieldId} .ck-content`,
+    ];
+
+    if (this.options.toolbar.items.includes('fullscreen')) {
+      // If the "fullscreen" action is available, prefix custom stylesheets with fullscreen class and a required `.ck-content` selector
+      newParents.push('.ck-fullscreen__editable .ck-content');
+    }
+    let prefixedCss = '';
+    for (const newParent of newParents) {
+      prefixedCss += prefixAndRebaseCss(content, url, newParent);
+    }
+
+    const styleSheet = new CSSStyleSheet();
+    await styleSheet.replace(
+      prefixedCss
+    );
+    return styleSheet;
+  }
+
+  private applyEditableElementStyles(editor: Editor, width: string|number|undefined, height: string|number|undefined): void {
+    const view = editor.editing.view;
+    const styles: Record<string, string|number|undefined> = {
+      'min-height': height,
+      'min-width': width,
+    };
+    Object.keys(styles).forEach((key) => {
+      const _assignment: string|number = styles[key];
+      if (!_assignment) {
+        return;
+      }
+      let assignment: string;
+      if (typeof _assignment === 'number' || !Number.isNaN(Number(assignment))) {
+        assignment = `${_assignment}px`;
+      } else {
+        assignment = _assignment;
+      }
+      view.change((writer) => {
+        writer.setStyle(key, assignment, view.document.getRoot());
+      });
+    });
+  }
+
+  /**
+   * see https://ckeditor.com/docs/ckeditor5/latest/features/word-count.html
+   */
+  private handleWordCountPlugin(editor: Editor, wordCount: WordCountConfig|undefined): void {
+    if (editor.plugins.has('WordCount') && (wordCount?.displayWords || wordCount?.displayCharacters)) {
+      const wordCountPlugin = editor.plugins.get('WordCount') as WordCount;
+      this.appendChild(wordCountPlugin.wordCountContainer);
+    }
+  }
+
+  /**
+   * see https://ckeditor.com/docs/ckeditor5/latest/features/read-only.html
+   */
+  private applyReadOnly(editor: Editor, readOnly: boolean): void {
+    if (readOnly) {
+      editor.enableReadOnlyMode('typo3-lock');
+    }
+  }
+}
+
+type RecurseMapInput = Record<string, unknown>|Array<unknown>|unknown;
+type PseudoRegExp = {
+  pattern: string,
+  flags?: string
+};
+
+function walkObj(data: RecurseMapInput, proc: (value: unknown) => unknown|null): RecurseMapInput {
+  if (typeof data === 'object') {
+    if (Array.isArray(data)) {
+      return data.map((element: RecurseMapInput) => proc(element) ?? walkObj(element, proc));
+    }
+    const newData: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(data)) {
+      newData[key] = proc(value) ?? walkObj(value, proc);
+    }
+    return newData;
+  }
+  return data;
+}
+
+function convertPseudoRegExp(data: RecurseMapInput): RecurseMapInput {
+  return walkObj(data, (entry: PseudoRegExp | unknown): RegExp | null => {
+    if (typeof entry === 'object' && 'pattern' in entry && typeof entry.pattern === 'string') {
+      const pseudoRegExp = entry as PseudoRegExp;
+      return new RegExp(pseudoRegExp.pattern, pseudoRegExp.flags || undefined);
+    }
+    return null;
+  });
+}
+
+function normalizeImportModules(modules: Array<string|PluginModuleDescriptor>): Array<PluginModuleDescriptor> {
+  return modules.map(moduleDescriptor => {
+    if (typeof moduleDescriptor === 'string') {
+      return {
+        module: moduleDescriptor,
+        exports: [ 'default' ],
+      };
+    }
+    return moduleDescriptor;
+  });
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-rte-ckeditor-ckeditor5': CKEditor5Element;
+  }
+}

package/rte-ckeditor/css-prefixer.ts

@@ -0,0 +1,94 @@
+import * as csstree from 'css-tree';
+import type { CssNode, Selector, Url } from 'css-tree';
+
+type NodeProcessor = (node: CssNode) => void;
+
+export function prefixAndRebaseCss(contents: string, currentPath: string, prefix: string): string {
+  const ast = csstree.parse(contents);
+  const prefixer = cssPrefixer(prefix);
+  const relocator = cssRelocator(currentPath);
+  csstree.walk(ast, (node) => {
+    relocator(node);
+    return prefixer(node);
+  });
+  return csstree.generate(ast);
+}
+
+export function cssRelocator(currentPath: string): NodeProcessor {
+  return (node: CssNode): void => {
+    if (node.type !== 'Url') {
+      return;
+    }
+
+    const url: Url = node;
+    if (
+      url.value.startsWith('data:') ||
+      url.value.startsWith('/') ||
+      url.value.includes('://')
+    ) {
+      return;
+    }
+
+    const absoluteUrl = new URL(currentPath.replace(/\?.+/, '') + '/../' + url.value, document.baseURI);
+    url.value = absoluteUrl.pathname + absoluteUrl.search + absoluteUrl.hash;
+  };
+}
+
+export function cssPrefixer(prefix: string): NodeProcessor {
+  if (prefix === '') {
+    return (): void => {
+      return;
+    };
+  }
+
+  return (node: CssNode): void|typeof csstree.walk.skip => {
+    if (node.type !== 'Selector') {
+      return;
+    }
+    const selector: Selector = node;
+    if (selector.children.isEmpty) {
+      return csstree.walk.skip;
+    }
+
+    const prefixAst = csstree.parse(prefix + '{}');
+    const prefixSelector = csstree.find(prefixAst, (node) => node.type === 'Selector') as Selector;
+    if (prefixSelector === null) {
+      throw new Error(`Failed to parse "${prefix}" as CSS prefix`);
+    }
+
+    if (
+      selector.children.first.type === 'PseudoClassSelector' &&
+      selector.children.first.name === 'root'
+    ) {
+      /* Replace `:root foo bar {}` with `#prefix foo bar {}` */
+      selector.children.shift();
+      selector.children.prependList(prefixSelector.children);
+      return csstree.walk.skip;
+    }
+
+    /* Replace `html foo bar {}` or `body foo bar {}` with `#prefix foo bar {}` */
+    let htmlBodyHasBeenReplaced = false;
+    selector.children.forEach((childNode, item) => {
+      if (
+        childNode.type === 'TypeSelector' &&
+        ['html', 'body'].includes(childNode.name.toLowerCase())
+      ) {
+        if (!htmlBodyHasBeenReplaced) {
+          selector.children.replace(item, prefixSelector.children);
+          htmlBodyHasBeenReplaced = true;
+        } else {
+          /* Ensure `html body` is replaced with `#prefix` instead of `#prefix #prefix` */
+          selector.children.remove(item);
+        }
+      }
+    });
+    if (htmlBodyHasBeenReplaced) {
+      return csstree.walk.skip;
+    }
+
+    selector.children.unshift({ type: 'Combinator', loc: null, name: ' ' });
+    selector.children.prependList(prefixSelector.children);
+
+    return csstree.walk.skip;
+  };
+}

package/rte-ckeditor/legacy/ckeditor5-bundle.ts

@@ -0,0 +1,17 @@
+export * as Core from '@ckeditor/ckeditor5-core';
+export * as UI from '@ckeditor/ckeditor5-ui';
+export * as Engine from '@ckeditor/ckeditor5-engine';
+export * as Utils from '@ckeditor/ckeditor5-utils';
+
+export * as Clipboard from '@ckeditor/ckeditor5-clipboard';
+export * as Essentials from '@ckeditor/ckeditor5-essentials';
+export * as Link from '@ckeditor/ckeditor5-link';
+
+export * as Typing from '@ckeditor/ckeditor5-typing';
+export * as Widget from '@ckeditor/ckeditor5-widget';
+
+// single or prefixed exports
+export { WordCount } from '@ckeditor/ckeditor5-word-count';
+export { LinkUtils } from '@ckeditor/ckeditor5-link';
+
+console.warn('The module "@typo3/ckeditor5-bundle.js" has been marked as deprecated. Please use "@ckeditor/ckeditor5-*" modules directly.');

package/rte-ckeditor/legacy/ckeditor5-inspector.ts

@@ -0,0 +1,2 @@
+export { default as CKEditorInspector } from '@ckeditor/ckeditor5-inspector';
+console.warn('The module "@typo3/ckeditor5-inspector.js" has been marked as deprecated. Please use "@ckeditor/ckeditor5-inspector" instead.');