Визуальный редактор + компонент темы

Моя цель — чтобы при добавлении пользователем ссылки на конкретный URL (домен + базовый путь) она автоматически отображалась со специальным форматированием.

Мне удаётся реализовать это в отрендеренном посте с помощью decorateCookedElement(), но я не могу понять, как подключиться к отображению в визуальном редакторе (Rich Text Editor), чтобы настроить вид ссылки там.

Существуют ли какие-либо возможности api, которые можно использовать внутри apiInitializer компонента темы для кастомизации рендеринга в визуальном редакторе?

Я пытался избежать необходимости создавать плагин, который работал бы непосредственно на сервере… и пока не нашёл более простого решения, но открыт к альтернативным идеям! (Например, я не хочу отключать OneBox для этого домена в целом, так как у не-SPA маркетинговых страниц есть хорошие теги OpenGraph для OneBox)

Исторический подход: decorateCookedElement()

Раньше я делал нечто подобное для видео с Bunny.net (соответствующий пост): позволял стандартному рендерингу (OneBox видео) происходить, а затем использовал decorateCookedElement() для применения некоторых исправлений к видео от Bunny.net (ссылка на URL стриминга) (theme-initializer.gjs#L8-L15), например, соотношение сторон, возможность полноэкранного режима и т.д.

Для видео с Bunny это работало отлично, так как в редакторе всегда отображался серый плейсхолдер OneBox Video (серый блок с белым значком видео), поэтому контент там не требовал доработки.

Проблема с визуальным редактором

Сложность использования decorateCookedElement() для моей текущей цели — замены ссылок на конкретный URL (домен + базовый путь) — возникает, когда пользователь вставляет такую ссылку на отдельной строке в визуальном редакторе и нажимает Enter. Редактор преобразует её в OneBox, и я не смог понять, есть ли способ подключиться к этому процессу рендеринга или как-то иначе его настроить.

Эта конкретная ссылка ведёт на функцию в Single Page App (статический хостинг), поэтому она не предоставляет достаточно осмысленный набор тегов OpenGraph / мета-тегов, из-за чего OneBox выглядит неинтуитивно. Я заметил, что участники сообщества оборачивают свои ссылки для импорта в фигурные скобки кода и используют другие обходные пути.

Поэтому я подумал: если бы я мог настроить, как именно эта ссылка отображается в визуальном редакторе, пользователи видели бы более интуитивный формат и охотнее его использовали.

5 лайков