Repository: motion-canvas/motion-canvas
File: packages/2d/src/components/Text.ts (TypeScript)

Code before:
    const wrap = this.layout.styles.whiteSpace !== 'nowrap';
    const range = document.createRange();

    if (wrap) {
      let line = '';
      const lineRect = rect();
      for (const childNode of this.layout.element.childNodes) {
        if (!childNode.textContent) {
          continue;
        }

        range.selectNodeContents(childNode);
        const rangeRect = range.getBoundingClientRect();

        const x = width / -2 + rangeRect.left - parentRect.left;
        const y = height / -2 + rangeRect.top - parentRect.top;

        if (lineRect.y === y) {
          lineRect.width += rangeRect.width;
          line += childNode.textContent;
        } else {
          this.drawText(context, line, lineRect);
          lineRect.x = x;
          lineRect.y = y;
          lineRect.width = rangeRect.width;
          lineRect.height = rangeRect.height;
          line = childNode.textContent;
        }
      }

      this.drawText(context, line, lineRect);
    } else if (this.layout.element.firstChild) {
      range.selectNodeContents(this.layout.element.firstChild);
      const rangeRect = range.getBoundingClientRect();
      rangeRect.x = width / -2 + rangeRect.left - parentRect.left;
      rangeRect.y = height / -2 + rangeRect.top - parentRect.top;
      this.drawText(context, this.text(), rangeRect);
    }
  }

  protected drawText(
    context: CanvasRenderingContext2D,
    text: string,
    rect: Rect,
  ) {
    if (this.lineWidth() <= 0) {
      context.fillText(text, rect.x, rect.y + rect.height / 2, rect.width);
    } else if (this.strokeFirst()) {
      context.strokeText(text, rect.x, rect.y + rect.height / 2, rect.width);
      context.fillText(text, rect.x, rect.y + rect.height / 2, rect.width);
    } else {

Review comment (suggestion):
I don't think you should bother with checking for `wrap` and branching the code here. I believe the wrap branch will gracefully handle a singe text node just fine.

Code after:
    const range = document.createRange();
    let line = '';
    const lineRect = rect();
    for (const childNode of this.layout.element.childNodes) {
      if (!childNode.textContent) {
        continue;
      }

      range.selectNodeContents(childNode);
      const rangeRect = range.getBoundingClientRect();

      const x = width / -2 + rangeRect.left - parentRect.left;
      const y = height / -2 + rangeRect.top - parentRect.top;

      if (lineRect.y === y) {
        lineRect.width += rangeRect.width;
        line += childNode.textContent;
      } else {
        this.drawText(context, line, lineRect);
        lineRect.x = x;
        lineRect.y = y;
        lineRect.width = rangeRect.width;
        lineRect.height = rangeRect.height;
        line = childNode.textContent;
      }
    }

    this.drawText(context, line, lineRect);
  }

  protected drawText(
    context: CanvasRenderingContext2D,
    text: string,
    rect: Rect,
  ) {
    if (this.lineWidth() <= 0) {
      context.fillText(text, rect.x, rect.y + rect.height / 2);
    } else if (this.strokeFirst()) {
      context.strokeText(text, rect.x, rect.y + rect.height / 2);
      context.fillText(text, rect.x, rect.y + rect.height / 2);
    } else {
      context.fillText(text, rect.x, rect.y + rect.height / 2);
      context.strokeText(text, rect.x, rect.y + rect.height / 2);
    }
  }

  protected override applyFontChanges() {
    super.applyFontChanges();
    const wrap = this.layout.styles.whiteSpace !== 'nowrap';
    const text = this.text();