React Code Editor Component

Create a functional and interactive code editor component in React using TypeScript. This component will serve as a basic foundation for rich text editing, allowing users to input and display code snippets with syntax highlighting.

Problem Description

You are tasked with building a React component that mimics a simple code editor. This component should allow users to type and edit text within a designated area, and it should visually highlight common programming language keywords and syntax. This is a foundational step for building more complex text editing tools, documentation platforms, or learning environments.

Key Requirements:

• Editable Text Area: The component must render an input area where users can type and edit text.
• Syntax Highlighting: Implement basic syntax highlighting for a predefined set of keywords and common language constructs (e.g., keywords, strings, numbers).
• React Component: The solution must be a reusable React component written in TypeScript.
• State Management: Manage the editor's content using React's state management.

Expected Behavior:

• When the user types in the editor, the text should update in real-time.
• Keywords, strings, and numbers within the editor should be displayed with distinct styles (e.g., different colors).
• The editor should handle multiple lines of text.

Edge Cases to Consider:

• Empty input.
• Input containing only whitespace.
• Special characters that might break highlighting logic.
• Long code snippets.

Examples

Example 1:

Input (initial content):
"function greet(name) {
  return 'Hello, ' + name;
}"

Output (rendered component with syntax highlighting):

Explanation: The function and return keywords are highlighted as "keyword". The string literal 'Hello, ' is highlighted as "string".

Example 2:

Input (initial content):
"const PI = 3.14159;
let count = 10;"

Output (rendered component with syntax highlighting):

Explanation: const and let are highlighted as "keyword". 3.14159 and 10 are highlighted as "number".

Constraints

• The syntax highlighting logic should be reasonably efficient. Avoid overly complex regex that might lead to performance issues on large inputs.
• The component should accept an optional initialContent prop to pre-populate the editor.
• The component should have an onChange prop that is called with the latest editor content whenever the content changes.
• You can define your own set of keywords and syntax patterns to highlight. For this challenge, consider highlighting:
  • Keywords (e.g., function, const, let, return, if, else, for, while)
  • Strings (e.g., enclosed in single or double quotes)
  • Numbers (integers and decimals)

Notes

• Consider using a textarea element for user input.
• For syntax highlighting, you will need to parse the text content and wrap matching patterns with <span> elements with appropriate CSS classes.
• You'll need to define corresponding CSS styles for these classes to achieve the visual highlighting.
• Think about how to handle line breaks and whitespace preservation in your rendering. A <pre> tag is often useful here.
• The complexity of the syntax highlighting can be scaled. For this challenge, a basic implementation covering common primitives is sufficient. You do not need to implement a full-fledged parser.