@shelamkoff/rector 1.0.0

package/dist/renderer/renderers/poll/index.js

@@ -0,0 +1,339 @@
+// @ts-check
+import { resolvePath } from '../../../shared/resolvePath.js'
+import {
+  applyLocalPollVote,
+  normalizePollData,
+  normalizePollResults,
+  shouldAcceptPollRevision,
+} from '../../../shared/pollData.js'
+import { setSafeUrlAttribute } from '../../../shared/sanitize/sanitizeUrl.js'
+
+const styles = resolvePath('./styles.css', import.meta.url)
+
+/**
+ * Interactive poll renderer. Author configuration stays in the document;
+ * remote counts and voters are owned by the mounted renderer instance.
+ * @param {string} classPrefix
+ * @param {Record<string, any>} locale
+ * @param {import('../../types').PollRendererConfig} [config]
+ * @returns {import('../../types').BlockRenderer<import('../../types').PollBlock>}
+ */
+export function createPollRenderer(classPrefix, locale, config = {}) {
+  const p = `${classPrefix}-poll`
+  /** @type {WeakMap<HTMLElement, {
+   *   data: import('../../types').PollData,
+   *   results: import('../../types').PollResults,
+   *   selected: Set<string>,
+   *   hasVoted: boolean,
+   *   loading: boolean,
+   *   submitting: boolean,
+   *   error: boolean,
+   *   connectionVersion: number,
+   *   loadVersion: number,
+   *   voteVersion: number,
+   *   controller: AbortController | null,
+   *   unsubscribe: (() => void) | null,
+   *   parseInline: import('../../types').InlineParser,
+   * }>} */
+  const states = new WeakMap()
+
+  /** @param {string} key @param {string} fallback */
+  const t = (key, fallback) => typeof locale[`renderer.poll.${key}`] === 'string'
+    ? locale[`renderer.poll.${key}`]
+    : fallback
+
+  /** @param {HTMLElement} wrapper @param {any} state @param {unknown} input @param {boolean} [confirmedVote] */
+  function accept(wrapper, state, input, confirmedVote = false) {
+    const next = normalizePollResults(input, state.data.options.map(option => option.id), config.maxVoters, state.data.type)
+    let accepted
+    try {
+      accepted = shouldAcceptPollRevision(next.revision, state.results.revision, config.compareRevisions)
+    } catch (error) {
+      fail(wrapper, state, error)
+      return
+    }
+    if (confirmedVote) state.hasVoted = true
+    if (!accepted) {
+      state.error = false
+      build(wrapper, state)
+      return
+    }
+    state.results = next
+    state.selected = new Set(next.currentUserVote || state.selected)
+    state.hasVoted ||= (next.currentUserVote?.length || 0) > 0
+    state.error = false
+    build(wrapper, state)
+  }
+
+  /** @param {HTMLElement} wrapper @param {any} state @param {unknown} error */
+  function fail(wrapper, state, error) {
+    state.error = true
+    try { config.onError?.(error) } catch {}
+    build(wrapper, state)
+  }
+
+  /** @param {any} state */
+  function showResults(state) {
+    if (state.data.resultsMode === 'hidden') return false
+    if (state.data.resultsMode === 'always') return true
+    return state.hasVoted
+  }
+
+  /** @param {HTMLElement} wrapper @param {any} state */
+  function build(wrapper, state) {
+    wrapper.replaceChildren()
+
+    if (state.data.question) {
+      const question = document.createElement('div')
+      question.className = `${p}__question`
+      question.appendChild(state.parseInline(state.data.question))
+      wrapper.appendChild(question)
+    }
+
+    const options = document.createElement('div')
+    options.className = `${p}__options`
+    const votes = new Map(state.results.options.map(option => [option.id, option.votes]))
+    for (const option of state.data.options) {
+      const row = document.createElement('div')
+      row.className = `${p}__option`
+      const marker = document.createElement('button')
+      marker.type = 'button'
+      marker.className = `${p}__marker ${p}__marker--${state.data.type}`
+      marker.setAttribute('aria-pressed', String(state.selected.has(option.id)))
+      if (state.selected.has(option.id)) marker.classList.add(`${p}__marker--selected`)
+      marker.disabled = state.submitting
+      marker.addEventListener('click', () => {
+        if (state.submitting) return
+        if (state.data.type === 'single') state.selected = new Set([option.id])
+        else if (state.selected.has(option.id)) state.selected.delete(option.id)
+        else state.selected.add(option.id)
+        build(wrapper, state)
+      })
+      row.appendChild(marker)
+
+      const content = document.createElement('div')
+      content.className = `${p}__option-content`
+      const text = document.createElement('span')
+      text.className = `${p}__option-text`
+      text.appendChild(state.parseInline(option.text))
+      marker.setAttribute('aria-label', `${t('selectOption', 'Select option')}: ${text.textContent || option.id}`)
+      content.appendChild(text)
+
+      if (showResults(state)) {
+        const count = votes.get(option.id) || 0
+        const pct = state.results.total > 0 ? Math.round((count / state.results.total) * 100) : 0
+        const bar = document.createElement('div')
+        bar.className = `${p}__bar`
+        const fill = document.createElement('div')
+        fill.className = `${p}__bar-fill`
+        fill.style.width = `${pct}%`
+        bar.appendChild(fill)
+        const label = document.createElement('span')
+        label.className = `${p}__pct`
+        label.textContent = `${pct}%`
+        content.append(bar, label)
+      }
+      row.appendChild(content)
+      options.appendChild(row)
+    }
+    wrapper.appendChild(options)
+
+    if (state.loading || state.error || (showResults(state) && state.results.total === 0)) {
+      const status = document.createElement('div')
+      status.className = `${p}__status${state.error ? ` ${p}__status--error` : ''}`
+      status.setAttribute('role', state.error ? 'alert' : 'status')
+      status.textContent = state.loading
+        ? t('loading', 'Loading results…')
+        : state.error
+          ? t('loadError', 'Could not load poll results')
+          : t('emptyResults', 'No votes yet')
+      wrapper.appendChild(status)
+    }
+
+    if (showResults(state) && state.results.voters?.length) {
+      const voters = document.createElement('div')
+      voters.className = `${p}__voters`
+      const title = document.createElement('strong')
+      title.textContent = `${t('voters', 'Voters')}: ${state.results.votersTotal ?? state.results.voters.length}`
+      voters.appendChild(title)
+      const list = document.createElement('ul')
+      for (const voter of state.results.voters) {
+        const item = document.createElement('li')
+        if (voter.avatar) {
+          const avatar = document.createElement('img')
+          setSafeUrlAttribute(avatar, 'src', voter.avatar, 'media')
+          avatar.alt = ''
+          avatar.width = 24
+          avatar.height = 24
+          item.appendChild(avatar)
+        }
+        const name = document.createElement('span')
+        name.textContent = voter.name || t('anonymousVoter', 'Anonymous voter')
+        item.appendChild(name)
+        list.appendChild(item)
+      }
+      voters.appendChild(list)
+      wrapper.appendChild(voters)
+    }
+
+    const submit = document.createElement('button')
+    submit.type = 'button'
+    submit.className = `${p}__submit`
+    submit.disabled = state.loading || state.submitting || state.selected.size === 0
+    submit.textContent = state.submitting ? t('submitting', 'Submitting…') : t('vote', 'Vote')
+    submit.addEventListener('click', () => vote(wrapper, state))
+    wrapper.appendChild(submit)
+  }
+
+  /** @param {HTMLElement} wrapper @param {any} state */
+  function vote(wrapper, state) {
+    if (state.submitting || state.selected.size === 0) return
+    const selected = [...state.selected]
+    if (!config.dataSource) {
+      state.results = applyLocalPollVote(
+        state.results,
+        state.results.currentUserVote || [],
+        selected,
+        state.data.options.map(option => option.id),
+      )
+      state.hasVoted = true
+      build(wrapper, state)
+      return
+    }
+    if (!state.data.pollId || !state.controller || state.controller.signal.aborted) {
+      fail(wrapper, state, new Error('Poll dataSource requires pollId'))
+      return
+    }
+    const connectionVersion = state.connectionVersion
+    const voteVersion = ++state.voteVersion
+    state.submitting = true
+    state.error = false
+    build(wrapper, state)
+
+    let voteRequest
+    try {
+      voteRequest = config.dataSource.vote({
+        pollId: state.data.pollId,
+        optionIds: selected,
+        revision: state.results.revision,
+        signal: state.controller.signal,
+      })
+    } catch (error) {
+      if (states.get(wrapper) === state && !state.controller.signal.aborted
+        && connectionVersion === state.connectionVersion && voteVersion === state.voteVersion) {
+        state.submitting = false
+        fail(wrapper, state, error)
+      }
+      return
+    }
+
+    void Promise.resolve(voteRequest).then(result => {
+      if (states.get(wrapper) === state && !state.controller.signal.aborted
+        && connectionVersion === state.connectionVersion && voteVersion === state.voteVersion) {
+        accept(wrapper, state, result, true)
+      }
+    }).catch(error => {
+      if (states.get(wrapper) === state && !state.controller.signal.aborted
+        && connectionVersion === state.connectionVersion && voteVersion === state.voteVersion) fail(wrapper, state, error)
+    }).finally(() => {
+      if (states.get(wrapper) === state && !state.controller.signal.aborted
+        && connectionVersion === state.connectionVersion && voteVersion === state.voteVersion) {
+        state.submitting = false
+        build(wrapper, state)
+      }
+    })
+  }
+
+  /** @param {HTMLElement} wrapper @param {any} state */
+  function connect(wrapper, state) {
+    if (!config.dataSource || !state.data.pollId) return
+    const controller = new AbortController()
+    state.controller = controller
+    const connectionVersion = ++state.connectionVersion
+    const loadVersion = ++state.loadVersion
+    state.voteVersion++
+    state.loading = true
+    build(wrapper, state)
+    if (config.dataSource.subscribe) {
+      try {
+        const unsubscribe = config.dataSource.subscribe({
+          pollId: state.data.pollId,
+          signal: controller.signal,
+          onUpdate: result => {
+            if (states.get(wrapper) !== state || controller.signal.aborted) return
+            state.loadVersion++
+            state.loading = false
+            accept(wrapper, state, result)
+          },
+          onError: error => {
+            if (states.get(wrapper) === state && !controller.signal.aborted) fail(wrapper, state, error)
+          },
+        })
+        if (typeof unsubscribe === 'function') state.unsubscribe = unsubscribe
+      } catch (error) {
+        fail(wrapper, state, error)
+      }
+    }
+    void Promise.resolve().then(() => config.dataSource.load({
+      pollId: state.data.pollId,
+      signal: controller.signal,
+    })).then(result => {
+      if (states.get(wrapper) === state && !controller.signal.aborted
+        && connectionVersion === state.connectionVersion && loadVersion === state.loadVersion) accept(wrapper, state, result)
+    }).catch(error => {
+      if (states.get(wrapper) === state && !controller.signal.aborted
+        && connectionVersion === state.connectionVersion && loadVersion === state.loadVersion) fail(wrapper, state, error)
+    }).finally(() => {
+      if (states.get(wrapper) === state && !controller.signal.aborted
+        && connectionVersion === state.connectionVersion && loadVersion === state.loadVersion) {
+        state.loading = false
+        build(wrapper, state)
+      }
+    })
+  }
+
+  return {
+    type: 'poll',
+    styles: [styles],
+    render(block, parseInline) {
+      let fallbackIndex = 0
+      const data = normalizePollData(block.data, () => `legacy-option-${++fallbackIndex}`)
+      const results = normalizePollResults(data.initialResults, data.options.map(option => option.id), config.maxVoters, data.type)
+      const wrapper = document.createElement('div')
+      wrapper.className = p
+      const state = {
+        data,
+        results,
+        selected: new Set(results.currentUserVote || []),
+        hasVoted: (results.currentUserVote?.length || 0) > 0,
+        loading: false,
+        submitting: false,
+        error: false,
+        connectionVersion: 0,
+        loadVersion: 0,
+        voteVersion: 0,
+        controller: null,
+        unsubscribe: null,
+        parseInline,
+      }
+      states.set(wrapper, state)
+      build(wrapper, state)
+      connect(wrapper, state)
+      return wrapper
+    },
+    destroy(element) {
+      const state = states.get(element)
+      if (!state) return
+      state.connectionVersion++
+      state.loadVersion++
+      state.voteVersion++
+      state.controller?.abort()
+      try { state.unsubscribe?.() } catch (error) {
+        try { config.onError?.(error) } catch {}
+      }
+      state.controller = null
+      state.unsubscribe = null
+      states.delete(element)
+    },
+  }
+}

package/dist/renderer/renderers/poll/styles.css

@@ -0,0 +1,148 @@
+.editor-poll {
+  padding: 18px;
+  background-color: var(--er-surface);
+  border: 1px solid var(--er-border);
+  border-radius: var(--er-radius);
+}
+
+.editor-poll__question {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--er-text-1);
+  margin-bottom: 14px;
+}
+
+.editor-poll__options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.editor-poll__option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.editor-poll__marker {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--er-border-hover);
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+
+.editor-poll__marker--single {
+  border-radius: 50%;
+}
+
+.editor-poll__marker--multiple {
+  border-radius: 3px;
+}
+
+.editor-poll__marker--selected {
+  border-color: var(--er-accent);
+  background: var(--er-accent);
+  box-shadow: inset 0 0 0 3px var(--er-surface);
+}
+
+.editor-poll__marker:focus-visible,
+.editor-poll__submit:focus-visible {
+  outline: 2px solid var(--er-accent);
+  outline-offset: 2px;
+}
+
+.editor-poll__option-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.editor-poll__option-text {
+  flex: 1;
+  font-size: 14px;
+  color: var(--er-text-2);
+}
+
+.editor-poll__bar {
+  width: 80px;
+  height: 6px;
+  background: var(--er-border);
+  border-radius: 3px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.editor-poll__bar-fill {
+  height: 100%;
+  background: var(--er-accent);
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.editor-poll__pct {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--er-text-3);
+  min-width: 32px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.editor-poll__status {
+  margin-top: 12px;
+  color: var(--er-text-3);
+  font-size: 12px;
+}
+
+.editor-poll__status--error {
+  color: #dc2626;
+}
+
+.editor-poll__submit {
+  margin-top: 12px;
+  padding: 7px 12px;
+  border: 1px solid var(--er-accent);
+  border-radius: 6px;
+  background: var(--er-accent);
+  color: #fff;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.editor-poll__submit:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.editor-poll__voters {
+  margin-top: 12px;
+  color: var(--er-text-2);
+  font-size: 12px;
+}
+
+.editor-poll__voters ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  margin: 6px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.editor-poll__voters li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.editor-poll__voters img {
+  border-radius: 50%;
+  object-fit: cover;
+}

package/dist/renderer/renderers/quote/README.md

@@ -0,0 +1,33 @@
+# Quote renderer
+
+Renderer for the `quote` block. It converts persisted block data into renderer-owned DOM.
+
+The `@shelamkoff/rector/renderer` entry contains the synchronous built-in preset, so `@shelamkoff/carousel` and `@shelamkoff/expose` must be installed before importing it. Passing `blockTypes: []` prevents default renderer construction but does not change ESM module resolution.
+
+## Usage
+
+```js
+import { createEditorRenderer } from '@shelamkoff/rector/renderer'
+import { createQuoteRenderer } from '@shelamkoff/rector/renderer/renderers/quote'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createQuoteRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// When the mounted output is removed:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Typical data
+
+```json
+{ "text": "Quote", "caption": "Author" }
+```
+
+The `text` and `caption` fields use the shared inline parser. The renderer declares one stylesheet and creates no listeners or external instances.
+
+When styles are declared, the explicit `EditorRenderer.injectStyles()` call shown above acquires them and its returned owner releases them.
+
+The VitePress guide documents renderer ownership, inline widget reconstruction, styles, cleanup, and security boundaries.

package/dist/renderer/renderers/quote/README.ru.md

@@ -0,0 +1,33 @@
+# Рендерер Quote
+
+Преобразует сохранённый блок `quote` в принадлежащий рендереру DOM.
+
+Синхронная точка входа `@shelamkoff/rector/renderer` включает все встроенные рендереры, поэтому до её импорта установите `@shelamkoff/carousel` и `@shelamkoff/expose`. Значение `blockTypes: []` отключает создание встроенных рендереров, но не меняет правила разрешения модулей ESM.
+
+## Использование
+
+```js
+import { createEditorRenderer } from '@shelamkoff/rector/renderer'
+import { createQuoteRenderer } from '@shelamkoff/rector/renderer/renderers/quote'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createQuoteRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// При удалении добавленного результата:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Типичные данные
+
+```json
+{ "text": "Текст цитаты", "caption": "Автор" }
+```
+
+Поля `text` и `caption` проходят общий обработчик внутристрочной разметки. Рендерер объявляет одну таблицу стилей и не создаёт обработчиков или сторонних экземпляров.
+
+Если рендерер объявляет стили, показанный выше явный вызов `EditorRenderer.injectStyles()` подключает их, а возвращённый владелец освобождает.
+
+Жизненный цикл, восстановление внутристрочных виджетов, стили и границы безопасности описаны в последовательном руководстве VitePress.

package/dist/renderer/renderers/quote/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Quote block renderer — callout style with icon
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes.js').LocaleValue>} _locale
+ * @returns {import('../../types.js').BlockRenderer<import('../../types.js').QuoteBlock>}
+ */
+export function createQuoteRenderer(classPrefix: string, _locale: Record<string, import("../../../shared/localeTypes.js").LocaleValue>): import("../../types.js").BlockRenderer<import("../../types.js").QuoteBlock>;

package/dist/renderer/renderers/quote/index.js

@@ -0,0 +1,59 @@
+// @ts-check
+import { resolvePath } from '../../../shared/resolvePath.js'
+import { mapQuoteTextFields as mapTextFields } from '../../../shared/mapTextFields.js'
+
+const styles = resolvePath('./styles.css', import.meta.url)
+
+// Tabler icon: quote
+const ICON_QUOTE = `<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="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/></svg>`
+
+/**
+ * Quote block renderer — callout style with icon
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} _locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').QuoteBlock>}
+ */
+export function createQuoteRenderer(classPrefix, _locale) {
+  return {
+    type: 'quote',
+    styles: [styles],
+    mapTextFields,
+
+    /**
+     * @param {import('../../types').QuoteBlock} block
+     * @param {import('../../types').InlineParser} parseInline
+     * @returns {HTMLElement}
+     */
+    render(block, parseInline) {
+      const { text, caption } = block.data
+
+      const blockquote = document.createElement('blockquote')
+      blockquote.className = `${classPrefix}-quote`
+
+      const icon = document.createElement('span')
+      icon.className = `${classPrefix}-quote__icon`
+      icon.setAttribute('aria-hidden', 'true')
+      icon.innerHTML = ICON_QUOTE
+
+      const body = document.createElement('div')
+      body.className = `${classPrefix}-quote__body`
+
+      const content = document.createElement('p')
+      content.className = `${classPrefix}-quote__text`
+      content.appendChild(parseInline(text))
+      body.appendChild(content)
+
+      if (caption) {
+        const cite = document.createElement('cite')
+        cite.className = `${classPrefix}-quote__caption`
+        cite.appendChild(parseInline(caption))
+        body.appendChild(cite)
+      }
+
+      blockquote.appendChild(icon)
+      blockquote.appendChild(body)
+
+      return blockquote
+    },
+  }
+}

package/dist/renderer/renderers/quote/styles.css

@@ -0,0 +1,43 @@
+.editor-quote {
+  display: flex;
+  gap: 16px;
+  padding: 20px 24px;
+  background-color: var(--er-quote-bg);
+  border: 1px solid var(--er-quote-border);
+  border-radius: var(--er-radius);
+}
+
+.editor-quote__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 2px;
+  color: var(--er-quote-accent);
+}
+
+.editor-quote__icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.editor-quote__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.editor-quote__text {
+  margin: 0;
+  line-height: var(--er-line-height);
+  color: var(--er-text-2);
+}
+
+.editor-quote__caption {
+  display: block;
+  margin-top: 10px;
+  font-size: 13px;
+  color: var(--er-text-3);
+}
+
+.editor-quote__caption::before {
+  content: '— ';
+}