typo3-typescript-sources 13.4.20

package/backend/code-editor/element/code-mirror-element.ts

@@ -0,0 +1,282 @@
+/*
+ * 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 { LitElement, html, css, type TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+import {
+  EditorView,
+  lineNumbers,
+  highlightSpecialChars,
+  drawSelection,
+  keymap,
+  placeholder,
+  type ViewUpdate,
+  type KeyBinding
+} from '@codemirror/view';
+import { EditorState, Compartment, type Extension } from '@codemirror/state';
+import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
+import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { executeJavaScriptModuleInstruction, loadModule, resolveSubjectRef, type JavaScriptItemPayload } from '@typo3/core/java-script-item-processor';
+import '@typo3/backend/element/spinner-element';
+
+/**
+ * Module: @typo3/backend/code-editor/element/code-mirror-element
+ * Renders CodeMirror into FormEngine
+ */
+@customElement('typo3-t3editor-codemirror')
+export class CodeMirrorElement extends LitElement {
+  static override styles = css`
+    :host {
+      position: relative;
+      display: block;
+    }
+
+    :host([fullscreen]) {
+      position: fixed;
+      inset: 64px 0 0;
+      z-index: 9;
+    }
+
+    :host([fullscreen]) .cm-scroller {
+      min-height: initial;
+      max-height: 100%;
+    }
+
+    :host([autoheight]) .cm-scroller {
+      max-height: initial;
+    }
+
+    .codemirror-label {
+      font-size: .875em;
+      opacity: .75;
+    }
+
+    .codemirror-label-top {
+      margin-bottom: .25rem;
+    }
+
+    .codemirror-label-bottom {
+      margin-top: .25rem;
+    }
+
+    typo3-backend-spinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .cm-editor {
+      overflow: hidden;
+      border-radius: var(--typo3-input-border-radius);
+      border: var(--typo3-input-border-width) solid var(--typo3-input-border-color);
+      transition: outline-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    .cm-focused {
+      border-color: var(--typo3-input-focus-border-color);
+      outline-offset: 0;
+      outline: .25rem solid color-mix(in srgb, var(--typo3-form-control-focus-border-color), transparent 25%);
+    }
+
+    .cm-gutters {
+      height: auto !important;
+      position: relative !important;
+    }
+
+    .cm-content {
+      min-height: calc(8px + 12px * 1.4 * var(--rows, 18)) !important;
+    }
+
+    .cm-scroller {
+      min-height: 100%;
+      max-height: calc(100dvh - 10rem);
+    }
+  `;
+
+  @property({ type: Object }) mode: JavaScriptItemPayload = null;
+  @property({ type: Array }) addons: JavaScriptItemPayload[] = [];
+  @property({ type: Array }) keymaps: JavaScriptItemPayload[] = [];
+
+  @property({ type: Number }) lineDigits: number = 0;
+  @property({ type: Boolean, reflect: true }) autoheight: boolean = false;
+  @property({ type: Boolean }) nolazyload: boolean = false;
+  @property({ type: Boolean }) readonly: boolean = false;
+  @property({ type: Boolean, reflect: true }) fullscreen: boolean = false;
+
+  @property({ type: String }) label: string;
+  @property({ type: String }) placeholder: string;
+  @property({ type: String }) panel: string = 'bottom';
+
+  @state() editorTheme: Compartment = null;
+  @state() editorView: EditorView = null;
+
+  /**
+   * @internal
+   */
+  public setContent(newContent: string): void {
+    if (this.editorView !== null) {
+      this.editorView.dispatch({
+        changes: {
+          from: 0,
+          to: this.editorView.state.doc.length,
+          insert: newContent
+        }
+      });
+    }
+  }
+
+  /**
+   * @internal
+   */
+  public getContent(): string {
+    return this.editorView.state.doc.toString();
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      ${this.label && this.panel === 'top' ? html`<div class="codemirror-label codemirror-label-top">${this.label}</div>` : ''}
+      <div id="codemirror-parent" @keydown=${(e: KeyboardEvent) => this.onKeydown(e)}></div>
+      ${this.label && this.panel === 'bottom' ? html`<div class="codemirror-label codemirror-label-bottom">${this.label}</div>` : ''}
+      ${this.editorView === null ? html`<typo3-backend-spinner size="large"></typo3-backend-spinner>` : ''}
+    `;
+  }
+
+  protected override firstUpdated(): void {
+    if (this.nolazyload) {
+      this.initializeEditor(<HTMLTextAreaElement>this.firstElementChild);
+      return;
+    }
+    const observerOptions = {
+      root: document.body
+    };
+    const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]): void => {
+      entries.forEach((entry: IntersectionObserverEntry): void => {
+        if (entry.intersectionRatio > 0) {
+          observer.unobserve(entry.target);
+          if (this.firstElementChild && this.firstElementChild.nodeName.toLowerCase() === 'textarea') {
+            this.initializeEditor(<HTMLTextAreaElement>this.firstElementChild);
+          }
+        }
+      });
+    }, observerOptions);
+
+    observer.observe(this);
+  }
+
+  private onKeydown(event: KeyboardEvent): void {
+    if (event.ctrlKey && event.altKey && event.key === 'f') {
+      event.preventDefault();
+      this.fullscreen = true;
+    }
+    if (event.key === 'Escape' && this.fullscreen) {
+      event.preventDefault();
+      this.fullscreen = false;
+    }
+  }
+
+  private async initializeEditor(textarea: HTMLTextAreaElement): Promise<void> {
+    const updateListener = EditorView.updateListener.of((v: ViewUpdate) => {
+      if (v.docChanged) {
+        textarea.value = v.state.doc.toString();
+        textarea.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      }
+    });
+
+    if (this.lineDigits > 0) {
+      this.style.setProperty('--rows', this.lineDigits.toString());
+    } else if (textarea.getAttribute('rows')) {
+      this.style.setProperty('--rows', textarea.getAttribute('rows'));
+    }
+
+    this.editorTheme = new Compartment();
+    const extensions: Extension[] = [
+      this.editorTheme.of([]),
+      updateListener,
+      lineNumbers(),
+      highlightSpecialChars(),
+      drawSelection(),
+      EditorState.allowMultipleSelections.of(true),
+      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    ];
+
+    if (this.readonly) {
+      extensions.push(EditorState.readOnly.of(true));
+    }
+
+    if (this.placeholder) {
+      extensions.push(placeholder(this.placeholder));
+    }
+
+    if (this.mode) {
+      const modeImplementation = <Extension[]>await executeJavaScriptModuleInstruction(this.mode);
+      extensions.push(...modeImplementation);
+    }
+
+    if (this.addons.length > 0) {
+      extensions.push(...await Promise.all(this.addons.map(moduleInstruction => executeJavaScriptModuleInstruction(moduleInstruction))));
+    }
+
+    const keymaps: KeyBinding[] = [
+      ...defaultKeymap,
+      indentWithTab,
+    ];
+    if (this.keymaps.length > 0) {
+      const dynamicKeymaps: KeyBinding[][] = await Promise.all(this.keymaps.map(keymap => loadModule(keymap).then((module) => resolveSubjectRef(module, keymap))));
+      dynamicKeymaps.forEach(keymap => keymaps.push(...keymap));
+    }
+    extensions.push(keymap.of(keymaps));
+
+    this.editorView = new EditorView({
+      state: EditorState.create({
+        doc: textarea.value,
+        extensions
+      }),
+      parent: this.renderRoot.querySelector('#codemirror-parent'),
+      root: this.renderRoot as ShadowRoot
+    });
+
+    this.toggleDarkMode(this.darkModeEnabled());
+    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    darkModeMediaQuery.addEventListener('change', (): void => {
+      this.toggleDarkMode(this.darkModeEnabled());
+    });
+  }
+
+  private darkModeEnabled(): boolean {
+    const computedStyle = window.getComputedStyle(this);
+    const colorScheme = computedStyle.colorScheme;
+    if (colorScheme === 'light only' || colorScheme === 'light') {
+      return false;
+    } else if (colorScheme === 'dark only' || colorScheme === 'dark') {
+      return true;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  private toggleDarkMode(enabled: boolean): void {
+    this.editorView.dispatch({
+      effects: this.editorTheme.reconfigure(
+        enabled ? oneDark : []
+      )
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-t3editor-codemirror': CodeMirrorElement;
+  }
+}

package/backend/code-editor/language/typoscript.ts

@@ -0,0 +1,181 @@
+import DocumentService from '@typo3/core/document-service';
+import { StreamLanguage, LanguageSupport } from '@codemirror/language';
+import { TypoScriptStreamParserFactory } from '../stream-parser/typoscript';
+import { TsCodeCompletion } from '../autocomplete/ts-code-completion';
+import { syntaxTree } from '@codemirror/language';
+import type { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+import type { SyntaxNodeRef } from '@lezer/common';
+
+interface Token {
+  type: string;
+  string: string;
+  start: number;
+  end: number;
+}
+
+export interface CodeMirror5CompatibleCompletionState {
+  lineTokens: Token[][];
+  currentLineNumber: number;
+  currentLine: string;
+  lineCount: number;
+  completingAfterDot: boolean,
+  token?: Token
+}
+
+/**
+ * Module: @typo3/backend/code-editor/language/typoscript
+ *
+ * Entry Point module for CodeMirror v6 language highlighting and code completion for TypoScript.
+ * This module combines our CodeMirror v5 style typoscript parser (via the StreamLanguage shim) and
+ * our CodeMirror v5 style TypoScript hinter (via an own CodeMirror v5 state shim).
+ *
+ * @todo: This is ideally to be replaced by an own CodeMirror v6 style parser/completion logic
+ *        based on lezer.codemirror.net at some point.
+ */
+export function typoscript() {
+  const language = StreamLanguage.define(
+    new TypoScriptStreamParserFactory().create()
+  );
+
+
+  const completion = language.data.of({
+    autocomplete: complete
+  });
+
+  return new LanguageSupport(language, [completion]);
+}
+
+const tsCodeCompletionInitializer = (async (): Promise<TsCodeCompletion> => {
+  await DocumentService.ready();
+  const effectivePid = parseInt((document.querySelector('input[name="effectivePid"]') as HTMLInputElement)?.value, 10);
+  return new TsCodeCompletion(effectivePid);
+})();
+
+export async function complete(context: CompletionContext): Promise<CompletionResult | null> {
+  if (!context.explicit) {
+    return null;
+  }
+
+  const cm5state = parseCodeMirror5CompatibleCompletionState(context);
+  const tokenPos = context.pos - (cm5state.completingAfterDot ? 1 : 0);
+  const token = syntaxTree(context.state).resolveInner(tokenPos, -1);
+  const tokenValue = token.name === 'Document' || cm5state.completingAfterDot ? '' : context.state.sliceDoc(token.from, tokenPos);
+  const completionStart = token.name === 'Document' || cm5state.completingAfterDot ? context.pos : token.from;
+
+  let tokenMetadata: Token = {
+    start: token.from,
+    end: tokenPos,
+    string: tokenValue,
+    type: token.name
+  };
+
+  // If it's not a 'word-style' token, ignore the token.
+  if (!/^[\w$_]*$/.test(tokenValue)) {
+    tokenMetadata = {
+      start: context.pos,
+      end: context.pos,
+      string: '',
+      type: tokenValue === '.' ? 'property' : null
+    };
+  }
+  cm5state.token = tokenMetadata;
+
+  const tsCodeCompletion = await tsCodeCompletionInitializer;
+  const keywords = tsCodeCompletion.refreshCodeCompletion(cm5state);
+
+  if ((token.name === 'string' || token.name === 'comment') && tokenIsSubStringOfKeywords(tokenValue, keywords)) {
+    return null;
+  }
+
+  const completions = getCompletions(tokenValue, keywords);
+  return {
+    from: completionStart,
+    options: completions.map((result: string) => {
+      return { label: result, type: 'keyword' };
+    })
+  };
+}
+
+function parseCodeMirror5CompatibleCompletionState(context: CompletionContext): CodeMirror5CompatibleCompletionState {
+  const lineCount = context.state.sliceDoc().split(context.state.lineBreak).length;
+  const currentLineNumber = context.state.sliceDoc(0, context.pos).split(context.state.lineBreak).length;
+  const currentLine = context.state.sliceDoc().split(context.state.lineBreak)[currentLineNumber - 1];
+  const lastChar = context.state.sliceDoc(context.pos - 1, context.pos);
+  const completingAfterDot = lastChar === '.';
+  const lineTokens = extractCodemirror5StyleLineTokens(lineCount, context);
+
+  return {
+    lineTokens,
+    currentLineNumber,
+    currentLine,
+    lineCount,
+    completingAfterDot
+  };
+}
+
+function extractCodemirror5StyleLineTokens(lineCount: number, context: CompletionContext): Token[][] {
+  const lineTokens = Array(lineCount).fill('').map((): Token[] => []);
+
+  let lastToken = 0;
+  let lineNumber = 1;
+  syntaxTree(context.state).cursor().iterate((node: SyntaxNodeRef): void => {
+    const type = node.type.name || node.name;
+    if (type === 'Document') {
+      return;
+    }
+    const start = node.from;
+    const end = node.to;
+    // syntaxTree(..).cursor().iterate() doesn't deliver all tokens that we are interested in (like dots) – that is because our legacy
+    // stream parser doesn't perform proper tokenization.
+    // Insert content as null-type token into the lineToken array.
+    if (lastToken < start) {
+      context.state.sliceDoc(lastToken, start).split(context.state.lineBreak).forEach((part: string) => {
+        if (part) {
+          lineTokens[Math.min(lineNumber - 1, lineCount - 1)].push({ type: null, string: part, start: lastToken, end: lastToken + part.length });
+          lineNumber++;
+          lastToken += part.length;
+        }
+      });
+    }
+    const string = context.state.sliceDoc(node.from, node.to);
+    lineNumber = context.state.sliceDoc(0, node.from).split(context.state.lineBreak).length;
+    lineTokens[lineNumber - 1].push({ type, string, start, end });
+    lastToken = end;
+  });
+  if (lastToken < context.state.doc.length) {
+    lineTokens[lineNumber - 1].push({ type: null, string: context.state.sliceDoc(lastToken), start: lastToken, end: context.state.doc.length });
+  }
+
+  return lineTokens;
+}
+
+
+function tokenIsSubStringOfKeywords(token: string, keywords: string[]): boolean {
+  const tokenLength = token.length;
+  for (let i = 0; i < keywords.length; ++i) {
+    if (token === keywords[i].substr(tokenLength)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function getCompletions(token: string, keywords: string[]) {
+  const found = new Set();
+
+  const maybeAdd = (str: string) => {
+    if (str.lastIndexOf(token, 0) === 0 && !found.has(str)) {
+      found.add(str);
+    }
+  };
+
+  for (let i = 0, e = keywords.length; i < e; ++i) {
+    maybeAdd(keywords[i]);
+  }
+
+  const completions = Array.from(found);
+  completions.sort();
+
+  return completions;
+}