Как получить выделенную строку при использовании кнопки на панели инструментов в Gutenberg?

Вопрос или проблема

(function ( wp ) {
    var lqdNotesButton = function( props ) {
        return wp.element.createElement(
            wp.blockEditor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Blank It',
                onClick: function () {
                    props.onChange( wp.richText.toggleFormat(
                        props.value,
                        { type: 'lqdnotes/blankit' }
                    ));
                },
            }
        );
    };

    wp.richText.registerFormatType(
        'lqdnotes/blankit', {
            title: 'Blank It',
            tagName: 'span',
            className: 'lqdnotes-blank-it',
            edit: lqdNotesButton,
        }
    );
} )( window.wp );

    registerFormatType(type, {
        title,
        tagName,
        tagEnd,
        className,
        edit({isActive, value, onChange}) {
            // Получение выбранной строки.
            const text = getTextContent(slice(value));
            const toInsert = tagName + text + tagEnd;
            //const onClick = () => onChange( insert( value, toInsert ) );
            const onClick = () => {
                element = create({
                    'html' : toInsert
                });
                if( element.formats.length === 0 ) {
                    return;
                }
                for ( let i = element.formats[0].length - 1; i >= 0; i-- ) {
                    value = toggleFormat(value, element.formats[0][i]);
                }
                onChange(value);
            };

            return (
                createElement(Fragment, null,
                    createElement(RichTextShortcut, {
                        type : 'primary',
                        character,
                        onUse: onClick
                    }),
                    createElement(RichTextToolbarButton, {
                        icon,
                        title,
                        onClick          : onClick,
                        isActive         : isActive,
                        shortcutType     : 'primary',
                        shortcutCharacter: character,
                        className        : `toolbar-button-with-text toolbar-button__advanced-${name}`
                    })
                )
            )
        }
    });

.

Ответ или решение

Чтобы решить вашу задачу с заменой выделенного текста на элемент input в редакторе блоков Gutenberg, необходимо более детально разобраться в API, предоставляемом WordPress для работы с форматами текста. Вы планируете заменять выделенный текст на элемент <input> с классом и уникальным идентификатором, основанным на первых 15 символах выделенного текста. Для реализации этого функционала важно учитывать как получить текст из выделения, так и правильно модифицировать редактор для добавления необходимых элементов. Рассмотрим теоретическую часть, пример и применение этого решения на практике.

Теория

Gutenberg предоставляет API для работы с форматами в текстовых блоках редактора. Функции для работы с выделениями, такими как getTextContent() и slice(), позволяют вам извлекать текст, который был выделен пользователем. Когда мы используем эти функции в нашем расширении, мы можем не только изменять формат текста, обернув его определёнными HTML тегами, но также полностью заменять его другим содержимым, например элементом <input>.

Основные шаги, которые будут задействованы в решении:

1. Получение выделенного текста из блока.
2. Создание нового элемента <input>, который заменит выделенный текст.
3. Назначение этому элементу уникального идентификатора, который будет основан на содержимом выделенного текста.
4. Внедрение нового элемента обратно в текстовый блок с помощью соответствующих API функций Gutenberg.

Пример

Ниже приведен пример кода, который поможет вам понять, как это можно реализовать:

(function (wp) {
    const { registerFormatType, toggleFormat, getActiveFormat } = wp.richText;
    const { RichTextToolbarButton } = wp.blockEditor;
    const { Fragment } = wp.element;

    const createInputWithID = (selectedText, index) => {
        // Создание уникального ID из первых 15 символов текста
        const truncatedText = selectedText.substring(0, 15).replace(/\s+/g, '');
        const uniqueID = `${truncatedText}lqd${index.toString().padStart(4, '0')}`;
        return `<input type="text" class="lqdnotes-blanked" id="${uniqueID}"/>`;
    };

    const lqdNotesButton = function (props) {
        return wp.element.createElement(
            RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Blank It',
                onClick: function () {
                    const selectedText = wp.richText.getTextContent(wp.richText.slice(props.value));
                    if (selectedText) {
                        const toInsert = createInputWithID(selectedText, Math.floor(Math.random() * 10000));
                        // Здесь добавьте логику для замены текста новым элементом input
                        // Например, используя wp.richText.insert или аналогичную функцию
                        props.onChange(wp.richText.insert(props.value, toInsert));
                    }
                },
            }
        );
    };

    registerFormatType('lqdnotes/blankit', {
        title: 'Blank It',
        tagName: 'span', // Можно оставить пустым, так как мы заменяем это на input
        className: 'lqdnotes-blank-it',
        edit: lqdNotesButton,
    });
})(window.wp);

Применение

Теперь, когда у вас есть эта структура кода, вы можете протестировать её в вашем окружении WordPress и при необходимости адаптировать. Этот код должен быть частью плагина или custom script для вашего сайта. Убедитесь, что используются все зависимости и скрипты были корректно подключены.

Кроме того, важно обратить внимание на такие моменты:

• Соответствие идентификаторов, чтобы избежать конфликтов, если несколько полей создаются с одним и тем же текстом.
• Устойчивость скрипта к потенциальным ошибкам (если, например, выделенный текст пустой или слишком короткий).
• Проверьте, что работает с различными типами текстовых блоков, если планируете использовать это решение в разных контекстах.

Этот процесс требует хорошего понимания принципов работы Gutenberg и WordPress в целом. Если вы следуете приведённому выше коду и инструкциям, вы сможете создать функционал, который точно соответствует вашим требованиям.