Class Code

packages/2d/src/lib/components/Code.ts:139–526

 */
@nodeName('CodeBlock')
export class Code extends Shape {
  /**
   * Create a standalone code signal.
   *
   * @param initial - The initial code.
   * @param highlighter - Custom highlighter to use.
   */
  public static createSignal(
    initial: PossibleCodeScope,
    highlighter?: SignalValue<CodeHighlighter>,
  ): CodeSignal<void> {
    return new CodeSignalContext<void>(
      initial,
      undefined,
      highlighter,
    ).toSignal();
  }

  public static defaultHighlighter: CodeHighlighter | null = null;
  /**
   * The code highlighter to use for this code node.
   *
   * @remarks
   * Defaults to a shared {@link code.LezerHighlighter}.
   */
  @initial(() => Code.defaultHighlighter)
  @signal()
  public declare readonly highlighter: SimpleSignal<
    CodeHighlighter | null,
    this
  >;

  /**
   * The code to display.
   */
  @codeSignal()
  public declare readonly code: CodeSignal<this>;

  /**
   * Custom drawing logic for the code.
   *
   * @remarks
   * Check out {@link DrawHooks} for available render hooks.
   *
   * @example
   * Make the unselected code blurry and transparent:
   * ```tsx
   * <Code
   *   drawHooks={{
   *     token(ctx, text, position, color, selection) {
   *       const blur = map(3, 0, selection);
   *       const alpha = map(0.5, 1, selection);
   *       ctx.globalAlpha *= alpha;
   *       ctx.filter = `blur(${blur}px)`;
   *       ctx.fillStyle = color;
   *       ctx.fillText(text, position.x, position.y);
   *     },
   *   }}