Insert text programmatically in WordPress Gutenberg Editor

To insert or modify text in the Gutenberg Rich Text Editor when a menu choice is selected, you need to interact with the Gutenberg block editor’s rich text APIs. Here’s a general approach to achieve this:

Access the Block’s Attributes: The first step is to retrieve the current attributes of the block you’re working with. This is usually done in the edit function of your block or in the component responsible for handling the block’s content.

Handle Selection and Caret Position: Gutenberg provides utilities to manage the selection and the caret position within a rich text field. You’ll need to use these utilities to determine where to insert or modify the text.

Modify the Text: Based on the current selection or caret position, modify the text as required. This could be inserting new text or changing the existing selected text.

Update the Block’s Attributes: After modifying the text, you need to update the block’s attributes with the new text content to reflect the changes in the editor.

Here’s a simplified example using a custom button in the toolbar of a rich text block:

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';

// Custom format type
const customFormatType = {
    name: 'my-plugin/custom-format',
    title: 'Custom Format',
    tagName: 'span', // The tag to wrap the selected text
    className: null,    // Use null if you don't need a specific class
    edit: ({ isActive, value, onChange }) => {
        const onClick = () => {
            const toInsert="Your custom text"; // Text to insert

            // Modify the rich text value
            const newValue = toggleFormat(value, {
                type: 'my-plugin/custom-format',
                attributes: {
                    style: 'your-custom-style', // Optional style or other attributes
                },
                text: toInsert,
            });

            // Update the block's content
            onChange(newValue);
        };

        return (
            <RichTextToolbarButton
                icon="editor-code" // Use your desired icon here
                title="Insert Custom Text"
                onClick={onClick}
                isActive={isActive}
            />
        );
    },
};

// Register the custom format
registerFormatType(customFormatType.name, customFormatType);

This code defines a custom format type with a button that, when clicked, inserts or modifies text at the caret position. The toggleFormat function is used here to apply the changes to the Rich Text content.

Keep in mind that this is a basic example. Depending on your specific requirements (like the complexity of the text manipulation or UI interactions), you might need a more advanced implementation. Remember to test your solution thoroughly to ensure it behaves as expected in different scenarios, such as with different block types or content structures.