Repository: excalidraw/excalidraw
File: src/components/Trans.tsx (TypeScript)

Code before:
  ];

  format.split(REGEXP).forEach((match) => {
    if (match === undefined || match.length === 0) {
      return;
    }

    const tagStartMatch = match.match(TAG_START_REGEXP);

    if (tagStartMatch !== null) {
      // Set the tag name as the name if it's one of the props, eg for "Please
      // <link>click the button</link> to continue" tagStartMatch[1] = "link"
      // and props contain "link" then it will be pushed to stack.
      const name = tagStartMatch[1];
      if (props.hasOwnProperty(name)) {
        stack.push({
          name,
          children: [],
        });
      } else {
        console.warn(
          `Trans: missed to pass in variable start/end ${match} for interpolating ${format}`,
        );
      }

      return;
    }

    const tagEndMatch = match.match(TAG_END_REGEXP);

    if (tagEndMatch !== null) {
      // The match is </tag>. This means we need to now replace the content with
      // its actual value in prop eg format = "Please <link>click the
      // button</link> to continue", match = "</link>", stack last item name =
      // "link" and props.link = (el) => <a href="https://example.com">{el}</a>
      // then its prop value will be pushed to "link"'s children so on DOM when
      // rendering it's rendered as <a href="https://example.com">click the
      // button</a>

      if (tagEndMatch[1] === stack[stack.length - 1].name) {
        const item = stack.pop()!;
        const itemChildren = React.createElement(
          React.Fragment,
          {},
          ...item.children,
        );
        const fn = props[item.name];
        if (typeof fn === "function") {
          stack[stack.length - 1].children.push(fn(itemChildren));
        }
      } else {

Review comment (suggestion):
this shouldn't be needed if we use `else If` instead of multiple ifs and readability wise will be better as well

Code after:
    [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
  },
): React.ReactNode[] => {
  const stack: { name: string; children: React.ReactNode[] }[] = [
    {
      name: "",
      children: [],
    },
  ];

  format
    .split(SPLIT_REGEX)
    .filter(Boolean)
    .forEach((match) => {
      const tagStartMatch = match.match(TAG_START_REGEXP);
      const tagEndMatch = match.match(TAG_END_REGEXP);
      const keyMatch = match.match(KEY_REGEXP);

      if (tagStartMatch !== null) {
        // The match is <tag>. Set the tag name as the name if it's one of the
        // props, e.g. for "Please <link>click the button</link> to continue"
        // tagStartMatch[1] = "link" and props contain "link" then it will be
        // pushed to stack.
        const name = tagStartMatch[1];
        if (props.hasOwnProperty(name)) {
          stack.push({
            name,
            children: [],
          });
        } else {
          console.warn(
            `Trans: missed to pass in prop ${name} for interpolating ${format}`,
          );
        }
      } else if (tagEndMatch !== null) {
        // If tag end match is found, this means we need to replace the content with
        // its actual value in prop e.g. format = "Please <link>click the
        // button</link> to continue", tagEndMatch is for "</link>", stack last item name =
        // "link" and props.link = (el) => <a
        // href="https://example.com">{el}</a> then its prop value will be
        // pushed to "link"'s children so on DOM when rendering it's rendered as
        // <a href="https://example.com">click the button</a>
        const name = tagEndMatch[1];
        if (name === stack[stack.length - 1].name) {
          const item = stack.pop()!;
          const itemChildren = React.createElement(
            React.Fragment,
            {},
            ...item.children,
          );
          const fn = props[item.name];