tsx-langflow-ai-langflow-insert-only

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before1import type React from "react";
2import { forwardRef } from "react";
3import GmailIconSVG from "./gmail";
4
5export const GmailIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
6  (props, ref) => {
7    return <GmailIconSVG ref={ref} {...props} />;
8  },
9);
10

After1import type React from "react";
2import { forwardRef } from "react";
3import GmailIconSVG from "./gmail";
4
5export const GmailIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
6  (props, ref) => {
7    return (
8      <span
9        style={{
10          display: "inline-grid",
11          width: 22,
12          height: 22,
13          placeItems: "center",
14          flexShrink: 0,
15        }}
16      >
17        <GmailIconSVG ref={ref} {...props} />
18      </span>
19    );
20  },
21);
22

Before1import type React from "react";
2import { forwardRef } from "react";
3import GmailIconSVG from "./gmail";
4
5export const GmailIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
6  (props, ref) => {
7    return <GmailIconSVG ref={ref} {...props} />;
8  },
9);
10

After1import type React from "react";
2import { forwardRef } from "react";
3import GmailIconSVG from "./gmail";
4
5export const GmailIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
6  (props, ref) => {
7    return (
8      <span
9        style={{
10          display: "inline-grid",
11          width: 22,
12          height: 22,
13          placeItems: "center",
14          flexShrink: 0,
15        }}
16      >
17        <GmailIconSVG ref={ref} {...props} />
18      </span>
19    );
20  },
21);
22

Before1import type React from "react";
2import { forwardRef } from "react";
3import GmailIconSVG from "./gmail";
4
5export const GmailIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
6  (props, ref) => {
7    return <GmailIconSVG ref={ref} {...props} />;
8  },
9);
10

After1import type React from "react";
2import { forwardRef } from "react";
3import GmailIconSVG from "./gmail";
4
5export const GmailIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
6  (props, ref) => {
7    return (
8      <span
9        style={{
10          display: "inline-grid",
11          width: 22,
12          height: 22,
13          placeItems: "center",
14          flexShrink: 0,
15        }}
16      >
17        <GmailIconSVG ref={ref} {...props} />
18      </span>
19    );
20  },
21);
22

Before

program

import_statement

import "import"

type "type"

import_clause

identifier "React"

from "from"

string

" "\""

string_fragment "react"

" "\""

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "forwardRef"

} "}"

from "from"

string

" "\""

string_fragment "react"

" "\""

; ";"

import_statement

import "import"

import_clause

identifier "GmailIconSVG"

from "from"

string

" "\""

string_fragment "./gmail"

" "\""

; ";"

export_statement

export "export"

lexical_declaration

const "const"

variable_declarator

identifier "GmailIcon"

= "="

call_expression

identifier "forwardRef"

type_arguments

< "<"

type_identifier "SVGSVGElement"

, ","

generic_type

nested_type_identifier

identifier "React"

. "."

type_identifier "PropsWithChildren"

type_arguments

< "<"

object_type

{ "{"

} "}"

> ">"

arguments

( "("

arrow_function

formal_parameters

( "("

required_parameter

identifier "props"

, ","

required_parameter

identifier "ref"

) ")"

=> "=>"

statement_block

{ "{"

return_statement

return "return"

jsx_self_closing_element

< "<"

identifier "GmailIconSVG"

jsx_attribute

property_identifier "ref"

= "="

jsx_expression

{ "{"

identifier "ref"

} "}"

jsx_expression

{ "{"

spread_element

... "..."

identifier "props"

} "}"

/> "/>"

; ";"

} "}"

, ","

) ")"

; ";"

After

program

import_statement

import "import"

type "type"

import_clause

identifier "React"

from "from"

string

" "\""

string_fragment "react"

" "\""

; ";"

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "forwardRef"

} "}"

from "from"

string

" "\""

string_fragment "react"

" "\""

; ";"

import_statement

import "import"

import_clause

identifier "GmailIconSVG"

from "from"

string

" "\""

string_fragment "./gmail"

" "\""

; ";"

export_statement

export "export"

lexical_declaration

const "const"

variable_declarator

identifier "GmailIcon"

= "="

call_expression

identifier "forwardRef"

type_arguments

< "<"

type_identifier "SVGSVGElement"

, ","

generic_type

nested_type_identifier

identifier "React"

. "."

type_identifier "PropsWithChildren"

type_arguments

< "<"

object_type

{ "{"

} "}"

> ">"

arguments

( "("

arrow_function

formal_parameters

( "("

required_parameter

identifier "props"

, ","

required_parameter

identifier "ref"

) ")"

=> "=>"

statement_block

{ "{"

return_statement

return "return"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "span"

jsx_attribute

property_identifier "style"

= "="

jsx_expression

{ "{"

object

{ "{"

pair

property_identifier "display"

: ":"

string

" "\""

string_fragment "inline-grid"

" "\""

, ","

pair

property_identifier "width"

: ":"

number "22"

, ","

pair

property_identifier "height"

: ":"

number "22"

, ","

pair

property_identifier "placeItems"

: ":"

string

" "\""

string_fragment "center"

" "\""

, ","

pair

property_identifier "flexShrink"

: ":"

number "0"

, ","

} "}"

> ">"

jsx_self_closing_element

< "<"

identifier "GmailIconSVG"

jsx_attribute

property_identifier "ref"

= "="

jsx_expression

{ "{"

identifier "ref"

} "}"

jsx_expression

{ "{"

spread_element

... "..."

identifier "props"

} "}"

/> "/>"

jsx_closing_element

</ "</"

identifier "span"

> ">"

) ")"

; ";"

} "}"

, ","

) ")"

; ";"

Keybindings

j / k: next / previous visible node (tree panels)
h / l: collapse / expand the focused node
g / G: jump to first / last visible node
Tab: switch focus between Before/After panels
/: search: jump to next node whose text contains a given string
a: jump the other panel to this node's mapped counterpart
i: hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v: cycle the view: split / code only / tree only
p: cycle what the code view renders: the node mapping, then each human painting
r: mark this fixture as reviewed, or forget the mark (kept in this browser only)
n: open a random fixture not yet marked as reviewed
?: toggle this help