Wysiwyg

The WYSIWYG (What You See Is What You Get) Editor is a rich text editor component designed to offer users an intuitive interface for creating and editing content with various formatting options. It provides a wide array of tools for content creation, including text formatting, image handling, table management, and more.

Features

🖋️ Rich Text Editing: Allows users to format text, insert images, manage tables, and create structured content with ease.

📊 Content Statistics: Displays real-time statistics such as character and word count, aiding in content creation and management.

🔗 Custom Menus: Includes a variety of custom menus for managing content blocks, links, images, tables, and more.

📐 Advanced Layout Options: Supports multi-column layouts and table structures within the content, offering flexibility in content design.

🖼️ Image Management: Integrates with custom image upload handlers, enabling users to upload, manage, and position images within the editor.

🔄 Dynamic Content Loading: Supports loading initial content for editing, making it ideal for both content creation and editing workflows.

What's Included

< Editor />

The Editor component is a forward-ref wrapper around the BlockEditor from the @start-base/block-editor. It provides a comprehensive and highly customizable WYSIWYG (What You See Is What You Get) editor that allows users to create and edit rich content with ease.

The Editor component leverages the powerful features of the BlockEditor, which include:

1. Text Formatting: Provides rich text formatting options such as bold, italic, underline, strikethrough, headings, and lists.
2. Multimedia Handling: Includes support for images, videos, and other multimedia elements.
3. Table Management: Allows for the creation and management of tables within the editor, including row and column customization.
4. Link Management: Integrates a link menu for adding and managing hyperlinks within the content.
5. Custom Content Blocks: Supports the creation of custom content blocks, allowing for advanced content structuring.
6. Toolbar Customization: Offers options to customize the toolbar to suit the specific needs of the content being created.
7. Bubble Menu: An optional floating toolbar that provides contextual editing tools based on the selected content.

Editor Props

Prop Name	Type	Default	Description
onChange	function	null	A callback function that is triggered whenever the content of the editor changes. Receives the editor's content as a parameter.
error	object	null	An error object that, if present, will display an error message below the editor.
upload	function	null	A custom function for handling image uploads. This function should return a URL for the uploaded image.
lang	string	'en-US'	The language setting for the editor's UI.
bubble	boolean	false	Determines whether the editor uses a bubble menu (contextual toolbar) instead of a static toolbar.
initialContent	object	null	The initial content to be loaded into the editor, useful for editing existing content.
showStatistics	boolean	true	If true, displays statistics such as character and word count.
toolbarOptions	object	{}	Configuration object to customize which tools are available in the toolbar. Options include toolbar, alignment, multimedia, code, mathematics.