@shelamkoff/rector 1.0.0

package/dist/plugins/toggle/index.js

@@ -0,0 +1,191 @@
+import { sanitizeHtml } from '../../core/sanitize.js'
+import { resolvePath } from '../../shared/resolvePath.js'
+import { BlockPluginAbstract } from '../BlockPluginAbstract.js'
+import { validateToggleData } from '../../shared/blockDataValidators.js'
+import { mapToggleTextFields } from '../../shared/mapTextFields.js'
+import { normalizeTextValue } from '../../shared/textFormat.js'
+import { READ_ONLY_INTERACTIVE_ATTRIBUTE } from '../../core/constants.js'
+
+const editorStyles = resolvePath('./toggle.css', import.meta.url)
+
+let toggleSequence = 0
+
+/** @type {WeakMap<HTMLElement, { open: boolean, context: import('../../core/types').BlockMutationContext }>} */
+const stateMap = new WeakMap()
+
+// Tabler icon: chevron-right (rotates when open)
+const ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v-3a3 3 0 0 1 3-3h13m-3-3l3 3l-3 3"/><path d="M20 12v3a3 3 0 0 1-3 3H4m3 3l-3-3l3-3"/></svg>'
+
+const ICON_CHEVRON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6l-6 6"/></svg>'
+
+/** Expandable rich-text block with an editable title and body. */
+export class Toggle extends BlockPluginAbstract {
+  static isTextBlock = false
+  static styles = [editorStyles]
+  type = 'toggle'
+  icon = ICON
+  inlineTools = true
+  mapTextFields = mapToggleTextFields
+
+  /**
+   * Return the localized toolbox label for this block.
+   * @returns {string}
+   */
+  get title() {
+    return this._t('title', 'Toggle')
+  }
+
+  /**
+   * Create the editable DOM owned by this block instance.
+   * @param {{ title?: string, content?: string, open?: boolean }} data
+   * @param {import('../../core/types').BlockMutationContext} context
+   * @returns {HTMLElement}
+   */
+  render(data, context) {
+    const bodyId = `oe-toggle-body-${++toggleSequence}`
+    const wrapper = document.createElement('div')
+    wrapper.classList.add('oe-toggle')
+    const open = data?.open === true
+    if (open) wrapper.classList.add('oe-toggle--open')
+    stateMap.set(wrapper, { open, context })
+
+    // Header (toggle trigger)
+    const header = document.createElement('div')
+    header.className = 'oe-toggle__header'
+
+    const chevron = document.createElement('button')
+    chevron.type = 'button'
+    chevron.className = 'oe-toggle__chevron'
+    chevron.innerHTML = ICON_CHEVRON
+    chevron.setAttribute('aria-label', this._t('toggleLabel', 'Show or hide content'))
+    chevron.setAttribute(READ_ONLY_INTERACTIVE_ATTRIBUTE, '')
+    chevron.setAttribute('aria-expanded', String(wrapper.classList.contains('oe-toggle--open')))
+    chevron.setAttribute('aria-controls', bodyId)
+    chevron.addEventListener('mousedown', (e) => e.preventDefault())
+    chevron.addEventListener('click', (e) => {
+      e.stopPropagation()
+      const operation = () => {
+        const open = wrapper.classList.toggle('oe-toggle--open')
+        chevron.setAttribute('aria-expanded', String(open))
+        const state = stateMap.get(wrapper)
+        if (state && !state.context.readOnly) state.open = open
+      }
+      if (context.readOnly) operation()
+      else context.mutate(operation)
+    })
+
+    const titleEl = document.createElement('div')
+    titleEl.className = 'oe-toggle__title'
+    titleEl.contentEditable = 'true'
+    titleEl.dataset.placeholder = this._t('titlePlaceholder', 'Toggle title...')
+    const title = normalizeTextValue(data?.title)
+    if (title) titleEl.innerHTML = sanitizeHtml(title)
+    titleEl.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        e.stopPropagation()
+        context.mutate(() => {
+          wrapper.classList.add('oe-toggle--open')
+          chevron.setAttribute('aria-expanded', 'true')
+          const state = stateMap.get(wrapper)
+          if (state) state.open = true
+        })
+        const body = wrapper.querySelector('.oe-toggle__body')
+        if (body) /** @type {HTMLElement} */ (body).focus()
+      }
+    })
+
+    header.append(chevron, titleEl)
+    wrapper.appendChild(header)
+
+    // Body (collapsible content)
+    const body = document.createElement('div')
+    body.className = 'oe-toggle__body'
+    body.id = bodyId
+    body.contentEditable = 'true'
+    body.dataset.placeholder = this._t('bodyPlaceholder', 'Hidden content...')
+    const content = normalizeTextValue(data?.content)
+    if (content) body.innerHTML = sanitizeHtml(content)
+    body.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.stopPropagation()
+      }
+    })
+
+    wrapper.appendChild(body)
+
+    return wrapper
+  }
+
+  /**
+   * Serialize the current block DOM into document data.
+   * @param {HTMLElement} element
+   * @returns {{ title: string, content: string, open: boolean }}
+   */
+  save(element) {
+    const title = element.querySelector('.oe-toggle__title')
+    const body = element.querySelector('.oe-toggle__body')
+    return {
+      title: sanitizeHtml(title?.innerHTML?.trim() || ''),
+      content: sanitizeHtml(body?.innerHTML?.trim() || ''),
+      open: stateMap.get(element)?.open ?? element.classList.contains('oe-toggle--open'),
+    }
+  }
+
+  /**
+   * Check whether serialized data satisfies this block's schema.
+   * @param {Record<string, unknown>} data @returns {boolean}
+   */
+  validate(data) {
+    return validateToggleData(data)
+  }
+
+  /**
+   * Check whether the block has no meaningful user content.
+   * @param {HTMLElement} element @returns {boolean}
+   */
+  isEmpty(element) {
+    const title = element.querySelector('.oe-toggle__title')
+    const body = element.querySelector('.oe-toggle__body')
+    return !title?.textContent?.trim() && !body?.textContent?.trim()
+  }
+
+  /**
+   * Extract neutral rich text that can initialize another block type.
+   * @param {HTMLElement} element @returns {{ text: string }}
+   */
+  exportData(element) {
+    const title = sanitizeHtml(element.querySelector('.oe-toggle__title')?.innerHTML?.trim() || '')
+    const content = sanitizeHtml(element.querySelector('.oe-toggle__body')?.innerHTML?.trim() || '')
+    return { text: [title, content].filter(Boolean).join('<br>') }
+  }
+
+  /**
+   * Merge incoming text into the current block.
+   * @param {HTMLElement} element
+   * @param {Record<string, unknown>} data
+   * @returns {void}
+   */
+  merge(element, data) {
+    const body = element.querySelector('.oe-toggle__body')
+    const text = normalizeTextValue(data?.text)
+    if (body && text) {
+      if (body.innerHTML.trim()) body.innerHTML += '<br>'
+      body.innerHTML += sanitizeHtml(text)
+      element.classList.add('oe-toggle--open')
+      element.querySelector('.oe-toggle__chevron')?.setAttribute('aria-expanded', 'true')
+      const state = stateMap.get(element)
+      if (state) state.open = true
+    }
+  }
+
+  /**
+   * Release state owned by one rendered block.
+   * @param {HTMLElement} element
+   * @returns {void}
+   */
+  destroy(element) {
+    stateMap.delete(element)
+  }
+
+}

package/dist/plugins/toggle/locale/en.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    'plugin.toggle.title': string;
+    'plugin.toggle.titlePlaceholder': string;
+    'plugin.toggle.bodyPlaceholder': string;
+    'plugin.toggle.toggleLabel': string;
+};
+export default _default;

package/dist/plugins/toggle/locale/en.js

@@ -0,0 +1,6 @@
+export default {
+  'plugin.toggle.title': 'Toggle',
+  'plugin.toggle.titlePlaceholder': 'Toggle title...',
+  'plugin.toggle.bodyPlaceholder': 'Hidden content...',
+  'plugin.toggle.toggleLabel': 'Show or hide content',
+}

package/dist/plugins/toggle/locale/keys.d.ts

@@ -0,0 +1,5 @@
+import enLocale from './en.js'
+
+declare module '../../../core/types.js' {
+  interface I18nMessages extends Record<keyof typeof enLocale, string> {}
+}

package/dist/plugins/toggle/locale/ru.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    'plugin.toggle.title': string;
+    'plugin.toggle.titlePlaceholder': string;
+    'plugin.toggle.bodyPlaceholder': string;
+    'plugin.toggle.toggleLabel': string;
+};
+export default _default;

package/dist/plugins/toggle/locale/ru.js

@@ -0,0 +1,6 @@
+export default {
+  'plugin.toggle.title': 'Аккордеон',
+  'plugin.toggle.titlePlaceholder': 'Заголовок...',
+  'plugin.toggle.bodyPlaceholder': 'Скрытый контент...',
+  'plugin.toggle.toggleLabel': 'Показать или скрыть содержимое',
+}

package/dist/plugins/toggle/toggle.css

@@ -0,0 +1,101 @@
+.oe-toggle {
+  border: 1px solid var(--oe-border, #2e2e35);
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+/* ── Header ───────────────────────────────────────────────────────────────── */
+
+.oe-toggle__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.375rem;
+  padding: 0.625rem 0.75rem;
+  cursor: default;
+}
+
+.oe-toggle__chevron {
+  appearance: none;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+  color: var(--oe-text-3, #6e6e78);
+  transition: transform 0.2s ease, color 0.15s;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.oe-toggle__chevron:focus-visible {
+  outline: 2px solid var(--oe-accent, #4357b4);
+  outline-offset: 2px;
+}
+
+.oe-toggle__chevron:hover {
+  color: var(--oe-accent, #4357b4);
+}
+
+.oe-toggle--open .oe-toggle__chevron {
+  transform: rotate(90deg);
+}
+
+.oe-toggle__title {
+  flex: 1;
+  min-width: 0;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  outline: none;
+  line-height: 1.4;
+}
+
+.oe-toggle__title:empty::before {
+  content: attr(data-placeholder);
+  color: var(--oe-text-3, #6e6e78);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ── Body (collapsible) ───────────────────────────────────────────────────── */
+
+.oe-toggle__body {
+  display: none;
+  padding: 0 0.75rem 0.75rem 2.375rem;
+  font-size: 0.875rem;
+  color: var(--oe-text-2, #9898a0);
+  outline: none;
+  line-height: 1.6;
+  border-top: 1px solid var(--oe-border, #2e2e35);
+  margin: 0 0.75rem;
+  padding-top: 0.625rem;
+  padding-left: 0;
+  margin-left: 2.375rem;
+  margin-right: 0;
+}
+
+.oe-toggle--open .oe-toggle__body {
+  display: block;
+}
+
+.oe-toggle__body:empty::before {
+  content: attr(data-placeholder);
+  color: var(--oe-text-3, #6e6e78);
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+/* ── Light theme ──────────────────────────────────────────────────────────── */
+
+.oe-theme-light .oe-toggle {
+  border-color: var(--oe-border, #e0e0e0);
+}
+
+.oe-theme-light .oe-toggle__body {
+  border-top-color: var(--oe-border, #e0e0e0);
+}

package/dist/plugins/warning/README.md

@@ -0,0 +1,55 @@
+# Warning block plugin
+
+Callout block with editable title and message fields.
+
+## Install and register
+
+```bash
+npm install @shelamkoff/rector
+```
+
+```js
+import { createEditor } from '@shelamkoff/rector'
+import { Warning } from '@shelamkoff/rector/plugins/warning'
+import '@shelamkoff/rector/styles/editor.css'
+
+const editor = createEditor({
+  holder: document.querySelector('#editor'),
+  plugins: [new Warning()],
+})
+```
+
+The registered block type is `warning`. The class is also exported by the complete `@shelamkoff/rector/plugins` preset and can be loaded through `@shelamkoff/rector/plugins/async`.
+
+## Data
+
+```json
+{ "title": "Note", "message": "Important details" }
+```
+
+### Field reference
+
+| Field | Required | Meaning and constraints |
+| --- | --- | --- |
+| `title` | yes | String containing sanitized inline HTML; it may be empty. |
+| `message` | yes | String containing sanitized inline HTML; it may be empty. |
+
+At least one of `title` and `message` must be non-blank. Both fields support inline-widget marshaling.
+
+## Configuration
+
+Every built-in block plugin accepts two style ownership options: `injectStyles?: boolean` defaults to `true`; set it to `false` when the host bundles that plugin's CSS. `css?: string` adds one host-provided stylesheet URL after the plugin default, or acts as the replacement URL when default injection is disabled.
+
+## Capabilities
+
+Inline formatting; editable title/message; merge; validation; export for conversion.
+
+## Undo, lifecycle, and styles
+
+User actions exposed by the plugin enter the command pipeline through the supplied `context.mutate()` capability, so each completed action is one undo/redo step. The editor reference-counts the plugin's declared stylesheet URLs. Removing a block calls its cleanup hook; removing the editor calls `destroy()` for every remaining block and then releases shared plugin resources.
+
+Do not remove the editor holder without first calling `editor.destroy()`.
+
+## Document output
+
+Use the matching renderer from `@shelamkoff/rector/renderer/renderers/warning`. The VitePress guide documents configuration, commands and history, extension contracts, document migrations, styling, security, and lifecycle in a sequential form.

package/dist/plugins/warning/README.ru.md

@@ -0,0 +1,56 @@
+# Блочный плагин Warning
+
+Выделенный информационный блок с редактируемыми заголовком и сообщением.
+
+## Установка и регистрация
+
+```bash
+npm install @shelamkoff/rector
+```
+
+```js
+import { createEditor } from '@shelamkoff/rector'
+import { Warning } from '@shelamkoff/rector/plugins/warning'
+import '@shelamkoff/rector/styles/editor.css'
+
+const editor = createEditor({
+  holder: document.querySelector('#editor'),
+  plugins: [new Warning()],
+})
+```
+
+Тип блока — `warning`. Класс также экспортируется общей точкой входа `@shelamkoff/rector/plugins` и может загружаться по типу документа через `@shelamkoff/rector/plugins/async`.
+
+## Данные
+
+```json
+{ "title": "Примечание", "message": "Важные подробности" }
+```
+
+### Поля данных
+
+| Поле | Обязательно | Назначение и ограничения |
+| --- | --- | --- |
+| `title` | да | Строка с очищенным внутристрочным HTML; может быть пустой. |
+| `message` | да | Строка с очищенным внутристрочным HTML; может быть пустой. |
+
+Хотя бы одно из полей `title` и `message` должно быть непустым. Оба поля поддерживают сохранение внутристрочных виджетов.
+
+## Конфигурация
+
+Каждый встроенный блочный плагин принимает два параметра владения стилями: `injectStyles?: boolean` по умолчанию равен `true`; укажите `false`, если приложение само включает CSS этого плагина. `css?: string` добавляет URL таблицы стилей приложения после стандартной, а при отключённой стандартной инъекции служит URL замены.
+
+
+## Возможности
+
+Форматирование; редактирование обоих полей; объединение; проверка данных; преобразование блока.
+
+## История, жизненный цикл и стили
+
+Действия плагина входят в конвейер команд через предоставленный контекст `mutate()`, поэтому одно завершённое действие создаёт один шаг отмены и повтора. Редактор подсчитывает владельцев объявленных URL стилей. Удаление блока вызывает его метод освобождения ресурсов; `editor.destroy()` освобождает оставшиеся блоки и общие ресурсы.
+
+Не удаляйте контейнер редактора до вызова `editor.destroy()`.
+
+## Вывод документа
+
+Используйте фабричную функцию из `@shelamkoff/rector/renderer/renderers/warning`. Последовательное руководство VitePress описывает проверку данных, миграции, разработку расширений, диагностику, безопасность и стили.

package/dist/plugins/warning/index.d.ts

@@ -0,0 +1,66 @@
+import type {} from './locale/keys.js'
+/** Warning callout with an editable title and message. */
+export class Warning extends BlockPluginAbstract<Record<string, any>> {
+    static isTextBlock: boolean;
+    static styles: string[];
+    constructor(config?: Record<string, any>);
+    type: string;
+    icon: string;
+    inlineTools: boolean;
+    mapTextFields: typeof mapWarningTextFields;
+    /**
+     * Return the localized toolbox label for this block.
+     * @returns {string}
+     */
+    get title(): string;
+    /**
+     * Create the editable DOM owned by this block instance.
+     * @param {{ title?: string, message?: string }} data
+     * @returns {HTMLElement}
+     */
+    render(data: {
+        title?: string;
+        message?: string;
+    }): HTMLElement;
+    /**
+     * Serialize the current block DOM into document data.
+     * @param {HTMLElement} element
+     * @returns {{ title: string, message: string }}
+     */
+    save(element: HTMLElement): {
+        title: string;
+        message: string;
+    };
+    /**
+     * Check whether serialized data satisfies this block's schema.
+     * @param {{ title?: string, message?: string }} data
+     * @returns {boolean}
+     */
+    validate(data: {
+        title?: string;
+        message?: string;
+    }): boolean;
+    /**
+     * Check whether the block has no meaningful user content.
+     * @param {HTMLElement} element
+     * @returns {boolean}
+     */
+    isEmpty(element: HTMLElement): boolean;
+    /**
+     * Extract neutral rich text that can initialize another block type.
+     * @param {HTMLElement} element
+     * @returns {{ text: string }}
+     */
+    exportData(element: HTMLElement): {
+        text: string;
+    };
+    /**
+     * Merge incoming text into the current block.
+     * @param {HTMLElement} element
+     * @param {Record<string, unknown>} data
+     * @returns {void}
+     */
+    merge(element: HTMLElement, data: Record<string, unknown>): void;
+}
+import { BlockPluginAbstract } from '../BlockPluginAbstract.js';
+import { mapWarningTextFields } from '../../shared/mapTextFields.js';

package/dist/plugins/warning/index.js

@@ -0,0 +1,167 @@
+// =============================================================================
+// Warning — callout/notice block with title and message
+//
+// Data: { title: string, message: string }
+// =============================================================================
+
+import { sanitizeHtml } from '../../core/sanitize.js'
+import { resolvePath } from '../../shared/resolvePath.js'
+import { BlockPluginAbstract } from '../BlockPluginAbstract.js'
+import { validateWarningData } from '../../shared/blockDataValidators.js'
+import { normalizeTextValue } from '../../shared/textFormat.js'
+import { mapWarningTextFields } from '../../shared/mapTextFields.js'
+
+const editorStyles = resolvePath('./warning.css', import.meta.url)
+
+// Tabler icon: alert-triangle
+const ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z"/><path d="M12 16h.01"/></svg>'
+
+// Large icon for the warning block
+const ICON_LARGE = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z"/><path d="M12 16h.01"/></svg>'
+
+/** Warning callout with an editable title and message. */
+export class Warning extends BlockPluginAbstract {
+  static isTextBlock = false
+  static styles = [editorStyles]
+  type = 'warning'
+  icon = ICON
+  inlineTools = true
+  mapTextFields = mapWarningTextFields
+
+  /**
+   * Return the localized toolbox label for this block.
+   * @returns {string}
+   */
+  get title() {
+    return this._t('title', 'Warning')
+  }
+
+  /**
+   * Create the editable DOM owned by this block instance.
+   * @param {{ title?: string, message?: string }} data
+   * @returns {HTMLElement}
+   */
+  render(data) {
+    const wrapper = document.createElement('div')
+    wrapper.classList.add('oe-warning')
+    wrapper.setAttribute('role', 'note')
+
+    const icon = document.createElement('div')
+    icon.className = 'oe-warning__icon'
+    icon.setAttribute('aria-hidden', 'true')
+    icon.innerHTML = ICON_LARGE
+
+    const content = document.createElement('div')
+    content.className = 'oe-warning__content'
+
+    const titleEl = document.createElement('div')
+    titleEl.className = 'oe-warning__title'
+    titleEl.contentEditable = 'true'
+    titleEl.dataset.placeholder = this._t('titlePlaceholder', 'Title')
+    const title = normalizeTextValue(data?.title)
+    if (title) titleEl.innerHTML = sanitizeHtml(title)
+
+    const messageEl = document.createElement('div')
+    messageEl.className = 'oe-warning__message'
+    messageEl.contentEditable = 'true'
+    messageEl.dataset.placeholder = this._t('messagePlaceholder', 'Message')
+    const message = normalizeTextValue(data?.message)
+    if (message) messageEl.innerHTML = sanitizeHtml(message)
+
+    // Tab between title and message
+    titleEl.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        e.stopPropagation()
+        messageEl.focus()
+      }
+      if (e.key === 'Tab' && !e.shiftKey) {
+        e.preventDefault()
+        e.stopPropagation()
+        messageEl.focus()
+      }
+    })
+
+    messageEl.addEventListener('keydown', (e) => {
+      if (e.key === 'Tab' && e.shiftKey) {
+        e.preventDefault()
+        e.stopPropagation()
+        titleEl.focus()
+      }
+      // Keep an ordinary Enter inside the message instead of letting the
+      // editor split the block. The browser still inserts the line break.
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.stopPropagation()
+      }
+    })
+
+    content.append(titleEl, messageEl)
+    wrapper.append(icon, content)
+
+    return wrapper
+  }
+
+  /**
+   * Serialize the current block DOM into document data.
+   * @param {HTMLElement} element
+   * @returns {{ title: string, message: string }}
+   */
+  save(element) {
+    const title = element.querySelector('.oe-warning__title')
+    const message = element.querySelector('.oe-warning__message')
+    return {
+      title: sanitizeHtml(title?.innerHTML?.trim() || ''),
+      message: sanitizeHtml(message?.innerHTML?.trim() || ''),
+    }
+  }
+
+  /**
+   * Check whether serialized data satisfies this block's schema.
+   * @param {{ title?: string, message?: string }} data
+   * @returns {boolean}
+   */
+  validate(data) {
+    return validateWarningData(data)
+  }
+
+  /**
+   * Check whether the block has no meaningful user content.
+   * @param {HTMLElement} element
+   * @returns {boolean}
+   */
+  isEmpty(element) {
+    const title = element.querySelector('.oe-warning__title')
+    const message = element.querySelector('.oe-warning__message')
+    return !title?.textContent?.trim() && !message?.textContent?.trim()
+  }
+
+  /**
+   * Extract neutral rich text that can initialize another block type.
+   * @param {HTMLElement} element
+   * @returns {{ text: string }}
+   */
+  exportData(element) {
+    const title = sanitizeHtml(element.querySelector('.oe-warning__title')?.innerHTML?.trim() || '')
+    const message = sanitizeHtml(element.querySelector('.oe-warning__message')?.innerHTML?.trim() || '')
+    return { text: [title, message].filter(Boolean).join('<br>') }
+  }
+
+  /**
+   * Merge incoming text into the current block.
+   * @param {HTMLElement} element
+   * @param {Record<string, unknown>} data
+   * @returns {void}
+   */
+  merge(element, data) {
+    const message = element.querySelector('.oe-warning__message')
+    const text = normalizeTextValue(data?.text)
+    if (message && text) {
+      if (message.innerHTML.trim()) {
+        message.innerHTML += '<br>' + sanitizeHtml(text)
+      } else {
+        message.innerHTML = sanitizeHtml(text)
+      }
+    }
+  }
+
+}

package/dist/plugins/warning/locale/en.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    'plugin.warning.title': string;
+    'plugin.warning.titlePlaceholder': string;
+    'plugin.warning.messagePlaceholder': string;
+};
+export default _default;