Implement Rich Text Editor Component with Material UI

[uparkalau]

Description:

The task involves creating a rich text editor component for the content management interface as shown in the attached screenshot. The interface should be broken down into smaller, reusable components . The components should be integrated with Material UI.

Components:

• [x] Toolbar: A component for the toolbar. This should include icons for formatting options such as bold, italic, hyperlink, header, quote, code snippet, and others including an ellipsis for more options. Use Material UI's IconButton for the icons.

• [x] TextArea: A component for the text area where users can input and format their text. This should support different formatting options passed as props.

• [x] Tabs: A component for switching between 'Editor' and 'Preview' views. Use Material UI's Tabs and Tab components.

Tasks:

• Create the above components with their respective functionalities.
• Ensure that the components are reusable for other project area and their styles are consistent with the rest of the application.
• Integrate the components with Material UI and customize the styles as needed.
• Write tests for each component to ensure they work as expected.
• Document each component in the codebase for future reference.

There is example of implementation for Popup, figma https://www.figma.com/design/MLPbP1HM2L9ON6f88pHTee/User-onboarding?node-id=0-1&t=p8i05HjYo4ihqe9j-0

[gorkem-bwl]

@VladimirParkalov last week we have discussed this with Thomas and simplified things a bit on the icons. We also decided that the components don't need to be reused elsewhere (e.g toolbar/textarea/tabs are just one component). FYI.