Portal/rsconcept/frontend/src/utils/codemirror.ts

/**
 * Module: CodeMirror customizations.
 */
import { syntaxTree } from '@codemirror/language';
import { NodeType, Tree, TreeCursor } from '@lezer/common';
import { EditorState, ReactCodeMirrorRef, SelectionRange } from '@uiw/react-codemirror';

import { ReferenceTokens } from '@/features/rsform/components/RefsInput/parse';
import { RefEntity } from '@/features/rsform/components/RefsInput/parse/parser.terms';
import { GlobalTokens } from '@/features/rsform/components/RSInput/rslang';
import { parseEntityReference, parseSyntacticReference } from '@/features/rsform/models/languageAPI';
import { SyntaxTree } from '@/features/rsform/models/rslang';

import { PARAMETER } from './constants';

/**
 * Represents syntax tree node data.
 */
interface SyntaxNode {
  type: NodeType;
  from: number;
  to: number;
}

/**
 * Represents syntax tree cursor data.
 */
interface CursorNode extends SyntaxNode {
  isLeaf: boolean;
}

function cursorNode({ type, from, to }: TreeCursor, isLeaf = false): CursorNode {
  return { type, from, to, isLeaf };
}

interface TreeTraversalOptions {
  beforeEnter?: (cursor: TreeCursor) => void;
  onEnter: (node: CursorNode) => false | void;
  onLeave?: (node: CursorNode) => false | void;
}

/**
 * Implements depth-first traversal.
 */
export function traverseTree(tree: Tree, { beforeEnter, onEnter, onLeave }: TreeTraversalOptions) {
  const cursor = tree.cursor();
  for (;;) {
    let node = cursorNode(cursor);
    let leave = false;
    const enter = !node.type.isAnonymous;
    if (enter && beforeEnter) beforeEnter(cursor);
    node.isLeaf = !cursor.firstChild();
    if (enter) {
      leave = true;
      if (onEnter(node) === false) return;
    }
    if (!node.isLeaf) continue;
    for (;;) {
      node = cursorNode(cursor, node.isLeaf);
      if (leave && onLeave) if (onLeave(node) === false) return;
      leave = cursor.type.isAnonymous;
      node.isLeaf = false;
      if (cursor.nextSibling()) break;
      if (!cursor.parent()) return;
      leave = true;
    }
  }
}

/**
 * Prints tree to compact string.
 */
export function printTree(tree: Tree): string {
  const state = {
    output: '',
    prefixes: [] as string[]
  };
  traverseTree(tree, {
    onEnter: node => {
      state.output += '[';
      state.output += node.type.name;
    },
    onLeave: () => {
      state.output += ']';
    }
  });
  return state.output;
}

/**
 * Transform Tree to {@link SyntaxTree}.
 */
export function transformAST(tree: Tree): SyntaxTree {
  const result: SyntaxTree = [];
  const parents: number[] = [];
  const cursor = tree.cursor();
  let finished = false;
  let leave = true;
  while (!finished) {
    let node = cursorNode(cursor);
    node.isLeaf = !cursor.firstChild();

    leave = true;
    result.push({
      uid: result.length,
      parent: parents.length > 0 ? parents[parents.length - 1] : result.length,
      typeID: node.type.id,
      start: node.from,
      finish: node.to,
      data: {
        dataType: 'string',
        value: node.type.name == '⚠' ? PARAMETER.errorNodeLabel : node.type.name
      }
    });
    parents.push(result.length - 1);

    if (!node.isLeaf) continue;

    for (;;) {
      node = cursorNode(cursor, node.isLeaf);
      if (leave) {
        parents.pop();
      }

      leave = cursor.type.isAnonymous;
      node.isLeaf = false;
      if (cursor.nextSibling()) {
        break;
      }
      if (!cursor.parent()) {
        finished = true;
        break;
      }
      leave = true;
    }
  }
  return result;
}

/**
 * Retrieves a list of all nodes, containing given range and corresponding to a filter.
 */
export function findEnvelopingNodes(start: number, finish: number, tree: Tree, filter?: number[]): SyntaxNode[] {
  const result: SyntaxNode[] = [];
  tree.cursor().iterate(node => {
    if ((!filter || filter.includes(node.type.id)) && node.to >= start && node.from <= finish) {
      result.push({
        type: node.type,
        to: node.to,
        from: node.from
      });
    }
  });
  return result;
}

/**
 * Retrieves a list of all nodes, contained in given range and corresponding to a filter.
 */
export function findContainedNodes(start: number, finish: number, tree: Tree, filter?: number[]): SyntaxNode[] {
  const result: SyntaxNode[] = [];
  tree.cursor().iterate(node => {
    if ((!filter || filter.includes(node.type.id)) && node.to <= finish && node.from >= start) {
      result.push({
        type: node.type,
        to: node.to,
        from: node.from
      });
    }
  });
  return result;
}

/**
 * Retrieves globalID from position in Editor.
 */
export function findAliasAt(pos: number, state: EditorState) {
  const { from: lineStart, to: lineEnd, text } = state.doc.lineAt(pos);
  const nodes = findEnvelopingNodes(pos, pos, syntaxTree(state), GlobalTokens);
  let alias = '';
  let start = 0;
  let end = 0;
  nodes.forEach(node => {
    if (node.to <= lineEnd && node.from >= lineStart) {
      alias = text.slice(node.from - lineStart, node.to - lineStart);
      start = node.from;
      end = node.to;
    }
  });
  return { alias, start, end };
}

/**
 * Retrieves reference from position in Editor.
 */
export function findReferenceAt(pos: number, state: EditorState) {
  const nodes = findEnvelopingNodes(pos, pos, syntaxTree(state), ReferenceTokens);
  if (nodes.length !== 1) {
    return undefined;
  }
  const start = nodes[0].from;
  const end = nodes[0].to;
  const text = state.doc.sliceString(start, end);
  if (nodes[0].type.id === RefEntity) {
    return { ref: parseEntityReference(text), start, end };
  } else {
    return { ref: parseSyntacticReference(text), start, end };
  }
}

/**
 * Wrapper class for CodeMirror editor.
 *
 * Assumes single range selection.
 */
export class CodeMirrorWrapper {
  ref: Required<ReactCodeMirrorRef>;

  constructor(object: Required<ReactCodeMirrorRef>) {
    this.ref = object;
  }

  getText(from: number, to: number): string {
    return this.ref.view.state.doc.sliceString(from, to);
  }

  getWord(position: number): SelectionRange | null {
    return this.ref.view.state.wordAt(position);
  }

  getSelection(): SelectionRange {
    return this.ref.view.state.selection.main;
  }

  getSelectionText(): string {
    const selection = this.getSelection();
    return this.ref.view.state.doc.sliceString(selection.from, selection.to);
  }

  setSelection(from: number, to: number) {
    this.ref.view.dispatch({
      selection: {
        anchor: from,
        head: to
      }
    });
  }

  insertChar(key: string) {
    this.replaceWith(key);
  }

  replaceWith(data: string) {
    this.ref.view.dispatch(this.ref.view.state.replaceSelection(data));
  }

  envelopeWith(left: string, right: string) {
    const selection = this.getSelection();
    const newSelection = !selection.empty
      ? {
          anchor: selection.from,
          head: selection.to + left.length + right.length
        }
      : {
          anchor: selection.to + left.length + right.length - 1
        };
    this.ref.view.dispatch({
      changes: [
        { from: selection.from, insert: left },
        { from: selection.to, insert: right }
      ],
      selection: newSelection
    });
  }

  /**
   * Access list of SyntaxNodes contained in current selection.
   */
  getContainedNodes(tokenFilter?: number[]): SyntaxNode[] {
    const selection = this.getSelection();
    return findContainedNodes(selection.from, selection.to, syntaxTree(this.ref.view.state), tokenFilter);
  }

  /**
   * Access list of SyntaxNodes enveloping current selection.
   */
  getEnvelopingNodes(tokenFilter?: number[]): SyntaxNode[] {
    const selection = this.getSelection();
    return findEnvelopingNodes(selection.from, selection.to, syntaxTree(this.ref.view.state), tokenFilter);
  }

  /**
   * Access list of SyntaxNodes contained in documents.
   */
  getAllNodes(tokenFilter?: number[]): SyntaxNode[] {
    return findContainedNodes(0, this.ref.view.state.doc.length, syntaxTree(this.ref.view.state), tokenFilter);
  }

  /**
   * Enlarges selection to nearest spaces.
   *
   * If tokenFilter is provided then minimal valid token is selected.
   */
  fixSelection(tokenFilter?: number[]) {
    const selection = this.getSelection();
    if (tokenFilter) {
      const nodes = findEnvelopingNodes(selection.from, selection.to, syntaxTree(this.ref.view.state), tokenFilter);
      if (nodes.length > 0) {
        const target = nodes[nodes.length - 1];
        this.setSelection(target.from, target.to);
        return;
      }
    }
    const startWord = this.ref.view.state.wordAt(selection.from);
    const endWord = this.ref.view.state.wordAt(selection.to);
    if (startWord || endWord) {
      this.setSelection(startWord?.from ?? selection.from, endWord?.to ?? selection.to);
    }
  }
}