@shelamkoff/rector 1.0.0

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

@@ -0,0 +1,61 @@
+import type {} from './locale/keys.js'
+/** Collapsible rich-text disclosure block with an editable label. */
+export class Spoiler extends BlockPluginAbstract<Record<string, any>> {
+    static isTextBlock: boolean;
+    static styles: string[];
+    constructor(config?: Record<string, any>);
+    type: string;
+    icon: string;
+    inlineTools: boolean;
+    mapTextFields: typeof mapSpoilerTextFields;
+    /**
+     * Return the localized toolbox label for this block.
+     * @returns {string}
+     */
+    get title(): string;
+    /**
+     * Create the editable DOM owned by this block instance.
+     * @param {{ label?: string, content?: string }} data
+     * @param {import('../../core/types.js').BlockMutationContext} context
+     * @returns {HTMLElement}
+     */
+    render(data: {
+        label?: string;
+        content?: string;
+    }, context: import("../../core/types.js").BlockMutationContext): HTMLElement;
+    /**
+     * Serialize the current block DOM into document data.
+     * @param {HTMLElement} element
+     * @returns {{ label: string, content: string }}
+     */
+    save(element: HTMLElement): {
+        label: string;
+        content: string;
+    };
+    /**
+     * Check whether serialized data satisfies this block's schema.
+     * @param {Record<string, unknown>} data @returns {boolean}
+     */
+    validate(data: Record<string, unknown>): 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 { mapSpoilerTextFields } from '../../shared/mapTextFields.js';

package/dist/plugins/spoiler/index.js

@@ -0,0 +1,169 @@
+// =============================================================================
+// Spoiler — hidden text revealed on click
+//
+// Data: { label: string, content: string }
+// =============================================================================
+
+import { sanitizeHtml } from '../../core/sanitize.js'
+import { resolvePath } from '../../shared/resolvePath.js'
+import { BlockPluginAbstract } from '../BlockPluginAbstract.js'
+import { validateSpoilerData } from '../../shared/blockDataValidators.js'
+import { mapSpoilerTextFields } from '../../shared/mapTextFields.js'
+import { normalizeTextValue } from '../../shared/textFormat.js'
+import { READ_ONLY_INTERACTIVE_ATTRIBUTE } from '../../core/constants.js'
+
+const editorStyles = resolvePath('./spoiler.css', import.meta.url)
+
+// Tabler icon: eye-off
+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="M10.585 10.587a2 2 0 0 0 2.829 2.828"/><path d="M16.681 16.673a8.717 8.717 0 0 1-4.681 1.327c-3.6 0-6.6-2-9-6 1.272-2.12 2.712-3.678 4.32-4.674m2.86-1.146a9.055 9.055 0 0 1 1.82-.18c3.6 0 6.6 2 9 6-.666 1.11-1.379 2.067-2.138 2.87"/><path d="M3 3l18 18"/></svg>'
+let spoilerSequence = 0
+
+/** Collapsible rich-text disclosure block with an editable label. */
+export class Spoiler extends BlockPluginAbstract {
+  static isTextBlock = false
+  static styles = [editorStyles]
+  type = 'spoiler'
+  icon = ICON
+  inlineTools = true
+  mapTextFields = mapSpoilerTextFields
+
+  /**
+   * Return the localized toolbox label for this block.
+   * @returns {string}
+   */
+  get title() {
+    return this._t('title', 'Spoiler')
+  }
+
+  /**
+   * Create the editable DOM owned by this block instance.
+   * @param {{ label?: string, content?: string }} data
+   * @param {import('../../core/types').BlockMutationContext} context
+   * @returns {HTMLElement}
+   */
+  render(data, context) {
+    const wrapper = document.createElement('div')
+    wrapper.classList.add('oe-spoiler')
+
+    // Label (always visible)
+    const label = document.createElement('div')
+    label.className = 'oe-spoiler__label'
+    label.contentEditable = 'true'
+    label.dataset.placeholder = this._t('labelPlaceholder', 'Spoiler label...')
+    const labelText = normalizeTextValue(data?.label)
+    if (labelText) label.innerHTML = sanitizeHtml(labelText)
+    label.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        e.stopPropagation()
+        const content = wrapper.querySelector('.oe-spoiler__content')
+        if (content) /** @type {HTMLElement} */ (content).focus()
+      }
+    })
+
+    // Toggle button
+    const toggle = document.createElement('button')
+    toggle.type = 'button'
+    toggle.className = 'oe-spoiler__toggle'
+    toggle.innerHTML = ICON
+    toggle.title = this._t('toggle', 'Toggle spoiler')
+    toggle.setAttribute('aria-label', this._t('toggle', 'Toggle spoiler'))
+    toggle.setAttribute(READ_ONLY_INTERACTIVE_ATTRIBUTE, '')
+    toggle.setAttribute('aria-expanded', String(!context.readOnly))
+    toggle.querySelector('svg')?.setAttribute('aria-hidden', 'true')
+    toggle.addEventListener('mousedown', (e) => e.preventDefault())
+    toggle.addEventListener('click', (e) => {
+      e.stopPropagation()
+      const open = wrapper.classList.toggle('oe-spoiler--open')
+      toggle.setAttribute('aria-expanded', String(open))
+      content.hidden = !open
+    })
+
+    // Header row
+    const header = document.createElement('div')
+    header.className = 'oe-spoiler__header'
+    header.append(toggle, label)
+
+    // Hidden content
+    const content = document.createElement('div')
+    content.className = 'oe-spoiler__content'
+    content.id = `oe-spoiler-content-${++spoilerSequence}`
+    toggle.setAttribute('aria-controls', content.id)
+    content.contentEditable = 'true'
+    content.dataset.placeholder = this._t('contentPlaceholder', 'Hidden content...')
+    const contentText = normalizeTextValue(data?.content)
+    if (contentText) content.innerHTML = sanitizeHtml(contentText)
+    content.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.stopPropagation()
+      }
+    })
+
+    wrapper.append(header, content)
+
+    // Editing starts expanded; read-only display starts collapsed but remains
+    // revealable through a presentation-only control.
+    wrapper.classList.toggle('oe-spoiler--open', !context.readOnly)
+    content.hidden = context.readOnly
+
+    return wrapper
+  }
+
+  /**
+   * Serialize the current block DOM into document data.
+   * @param {HTMLElement} element
+   * @returns {{ label: string, content: string }}
+   */
+  save(element) {
+    const label = element.querySelector('.oe-spoiler__label')
+    const content = element.querySelector('.oe-spoiler__content')
+    return {
+      label: sanitizeHtml(label?.innerHTML?.trim() || ''),
+      content: sanitizeHtml(content?.innerHTML?.trim() || ''),
+    }
+  }
+
+  /**
+   * Check whether serialized data satisfies this block's schema.
+   * @param {Record<string, unknown>} data @returns {boolean}
+   */
+  validate(data) {
+    return validateSpoilerData(data)
+  }
+
+  /**
+   * Check whether the block has no meaningful user content.
+   * @param {HTMLElement} element @returns {boolean}
+   */
+  isEmpty(element) {
+    const label = element.querySelector('.oe-spoiler__label')
+    const content = element.querySelector('.oe-spoiler__content')
+    return !label?.textContent?.trim() && !content?.textContent?.trim()
+  }
+
+  /**
+   * Extract neutral rich text that can initialize another block type.
+   * @param {HTMLElement} element @returns {{ text: string }}
+   */
+  exportData(element) {
+    const label = sanitizeHtml(element.querySelector('.oe-spoiler__label')?.innerHTML?.trim() || '')
+    const content = sanitizeHtml(element.querySelector('.oe-spoiler__content')?.innerHTML?.trim() || '')
+    return { text: [label, 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 content = element.querySelector('.oe-spoiler__content')
+    const text = normalizeTextValue(data?.text)
+    if (content && text) {
+      if (content.innerHTML.trim()) content.innerHTML += '<br>'
+      content.innerHTML += sanitizeHtml(text)
+    }
+  }
+
+}

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    'plugin.spoiler.title': string;
+    'plugin.spoiler.labelPlaceholder': string;
+    'plugin.spoiler.contentPlaceholder': string;
+    'plugin.spoiler.toggle': string;
+};
+export default _default;

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

@@ -0,0 +1,6 @@
+export default {
+  'plugin.spoiler.title': 'Spoiler',
+  'plugin.spoiler.labelPlaceholder': 'Spoiler label...',
+  'plugin.spoiler.contentPlaceholder': 'Hidden content...',
+  'plugin.spoiler.toggle': 'Toggle spoiler',
+}

package/dist/plugins/spoiler/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/spoiler/locale/ru.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    'plugin.spoiler.title': string;
+    'plugin.spoiler.labelPlaceholder': string;
+    'plugin.spoiler.contentPlaceholder': string;
+    'plugin.spoiler.toggle': string;
+};
+export default _default;

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

@@ -0,0 +1,6 @@
+export default {
+  'plugin.spoiler.title': 'Спойлер',
+  'plugin.spoiler.labelPlaceholder': 'Заголовок спойлера...',
+  'plugin.spoiler.contentPlaceholder': 'Скрытый контент...',
+  'plugin.spoiler.toggle': 'Показать/скрыть',
+}

package/dist/plugins/spoiler/spoiler.css

@@ -0,0 +1,101 @@
+/* =============================================================================
+   Spoiler plugin — hidden text revealed on click
+   ============================================================================= */
+
+.oe-spoiler {
+  border: 1px solid var(--oe-border, #2e2e35);
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+/* ── Header ───────────────────────────────────────────────────────────────── */
+
+.oe-spoiler__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.375rem;
+  padding: 0.625rem 0.75rem;
+}
+
+.oe-spoiler__toggle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  border-radius: 4px;
+  background: var(--oe-surface-2, #1a1a1f);
+  color: var(--oe-text-3, #6e6e78);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+  outline: none;
+  padding: 0;
+}
+
+.oe-spoiler__toggle:hover {
+  color: var(--oe-accent, #4357b4);
+  background: rgba(67, 87, 180, 0.1);
+}
+
+.oe-spoiler--open .oe-spoiler__toggle {
+  color: var(--oe-accent, #4357b4);
+}
+
+.oe-spoiler__label {
+  flex: 1;
+  min-width: 0;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  outline: none;
+  line-height: 1.5;
+}
+
+.oe-spoiler__label:empty::before {
+  content: attr(data-placeholder);
+  color: var(--oe-text-3, #6e6e78);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ── Content (hidden by default on frontend, always visible in edit) ────── */
+
+.oe-spoiler__content {
+  display: none;
+  padding: 0 0.75rem 0.75rem;
+  margin: 0 0.75rem;
+  padding-left: 0;
+  margin-left: 2.625rem;
+  border-top: 1px solid var(--oe-border, #2e2e35);
+  padding-top: 0.625rem;
+  font-size: 0.875rem;
+  color: var(--oe-text-2, #9898a0);
+  outline: none;
+  line-height: 1.6;
+}
+
+.oe-spoiler--open .oe-spoiler__content {
+  display: block;
+}
+
+.oe-spoiler__content:empty::before {
+  content: attr(data-placeholder);
+  color: var(--oe-text-3, #6e6e78);
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+/* ── Light theme ──────────────────────────────────────────────────────────── */
+
+.oe-theme-light .oe-spoiler {
+  border-color: var(--oe-border, #e0e0e0);
+}
+
+.oe-theme-light .oe-spoiler__toggle {
+  background: var(--oe-surface-2, #f0f0f0);
+}
+
+.oe-theme-light .oe-spoiler__content {
+  border-top-color: var(--oe-border, #e0e0e0);
+}

package/dist/plugins/table/README.md

@@ -0,0 +1,55 @@
+# Table block plugin
+
+Editable table with an optional heading row.
+
+## Install and register
+
+```bash
+npm install @shelamkoff/rector
+```
+
+```js
+import { createEditor } from '@shelamkoff/rector'
+import { Table } from '@shelamkoff/rector/plugins/table'
+import '@shelamkoff/rector/styles/editor.css'
+
+const editor = createEditor({
+  holder: document.querySelector('#editor'),
+  plugins: [new Table()],
+})
+```
+
+The registered block type is `table`. The class is also exported by the complete `@shelamkoff/rector/plugins` preset and can be loaded through `@shelamkoff/rector/plugins/async`.
+
+## Data
+
+```json
+{ "withHeadings": true, "content": [["Name", "Value"], ["A", "1"]] }
+```
+
+### Field reference
+
+| Field | Required | Meaning and constraints |
+| --- | --- | --- |
+| `content` | yes | Non-empty rectangular array of rows with at least one column. Every cell must be a string. New tables start as a 3-by-3 grid. |
+| `withHeadings` | no | Boolean indicating whether the first row is a heading row; defaults to `false`. |
+
+Cells store sanitized inline HTML. Every cell supports the editor's enabled inline tools and persistent inline widgets; widget data is marshalled through the block-level `inline` map in the same way as other rich-text blocks.
+
+## 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; row/column editing; heading-row setting; table paste; 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/table`. The VitePress guide documents configuration, commands and history, extension contracts, document migrations, styling, security, and lifecycle in a sequential form.

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

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

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

@@ -0,0 +1,85 @@
+import type {} from './locale/keys.js'
+/** Editable rich-text table with row, column, and heading controls. */
+export class Table extends BlockPluginAbstract<Record<string, any>> {
+    static isTextBlock: boolean;
+    static styles: string[];
+    constructor(config?: Record<string, any>);
+    type: string;
+    icon: string;
+    inlineTools: boolean;
+    mapTextFields: typeof mapTableTextFields;
+    pasteConfig: {
+        tags: string[];
+    };
+    /**
+     * Return the localized toolbox label for this block.
+     * @returns {string}
+     */
+    get title(): string;
+    /**
+     * Create the editable DOM owned by this block instance.
+     * @param {{ content?: string[][], withHeadings?: boolean }} data
+     * @param {import('../../core/types.js').BlockMutationContext} context
+     * @returns {HTMLElement}
+     */
+    render(data: {
+        content?: string[][];
+        withHeadings?: boolean;
+    }, context: import("../../core/types.js").BlockMutationContext): HTMLElement;
+    /**
+     * Render block settings controls (add/remove row/col, toggle header).
+     * @param {HTMLElement} element
+     * @returns {HTMLElement[]}
+     */
+    renderSettings(element: HTMLElement): HTMLElement[];
+    /**
+     * Handle settings action for table operations.
+     * @param {HTMLElement} element — the table wrapper
+     * @param {string} action
+     * @returns {null}
+     */
+    onSettingsAction(element: HTMLElement, action: string): null;
+    /**
+     * Serialize the current block DOM into document data.
+     * @param {HTMLElement} element
+     * @returns {{ content: string[][], withHeadings: boolean }}
+     */
+    save(element: HTMLElement): {
+        content: string[][];
+        withHeadings: boolean;
+    };
+    /**
+     * Check whether serialized data satisfies this block's schema.
+     * @param {{ content?: string[][] }} data
+     * @returns {boolean}
+     */
+    validate(data: {
+        content?: string[][];
+    }): boolean;
+    /**
+     * Extract neutral text that can initialize another block type.
+     * @param {HTMLElement} element
+     * @returns {{ text: string }}
+     */
+    exportData(element: HTMLElement): {
+        text: string;
+    };
+    /**
+     * Check whether the block has no meaningful user content.
+     * @param {HTMLElement} element
+     * @returns {boolean}
+     */
+    isEmpty(element: HTMLElement): boolean;
+    /**
+     * Handle pasted table elements.
+     * @param {import('../../types.js').TagPasteEvent} event
+     * @returns {{ content: string[][], withHeadings: boolean } | null}
+     */
+    onPaste(event: import("../../types.js").TagPasteEvent): {
+        content: string[][];
+        withHeadings: boolean;
+    } | null;
+    #private;
+}
+import { BlockPluginAbstract } from '../BlockPluginAbstract.js';
+import { mapTableTextFields } from '../../shared/mapTextFields.js';