@shelamkoff/rector 1.0.0

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

@@ -0,0 +1,93 @@
+// @ts-check
+import { resolvePath } from '../../../shared/resolvePath.js'
+import { setSafeUrlAttribute } from '../../../shared/sanitize/sanitizeUrl.js'
+
+const styles = resolvePath('./styles.css', import.meta.url)
+
+/**
+ * Apply user-configured inline styles to the image and figure.
+ * Width-related styles are skipped when expanded mode is active.
+ * @param {HTMLImageElement} img
+ * @param {HTMLElement} figure
+ * @param {import('../../types').ImageStyles} styles
+ * @param {boolean} [expanded]
+ * @param {boolean} [withBackground]
+ * @returns {void}
+ */
+function applyInlineStyles(img, figure, styles, expanded, withBackground) {
+  if (styles.objectFit) img.style.objectFit = styles.objectFit
+  if (styles.objectPosition) img.style.objectPosition = styles.objectPosition
+  if (styles.height) img.style.height = styles.height
+  if (styles.maxHeight) img.style.maxHeight = styles.maxHeight
+  if (styles.minHeight) img.style.minHeight = styles.minHeight
+
+  if (!expanded) {
+    if (styles.width) img.style.width = styles.width
+    if (styles.maxWidth) img.style.maxWidth = styles.maxWidth
+    if (styles.minWidth) img.style.minWidth = styles.minWidth
+  }
+
+  if (styles.borderStyle && styles.borderStyle !== 'none') {
+    img.style.borderStyle = styles.borderStyle
+    img.style.borderWidth = styles.borderWidth || '1px'
+    img.style.borderColor = styles.borderColor || '#2e2e35'
+  }
+  if (styles.borderRadius) img.style.borderRadius = styles.borderRadius
+
+  if (styles.backgroundColor && withBackground) figure.style.backgroundColor = styles.backgroundColor
+}
+
+/**
+ * Image block renderer
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} _locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').ImageBlock>}
+ */
+export function createImageRenderer(classPrefix, _locale) {
+  return {
+    type: 'image',
+    styles: [styles],
+
+    /**
+     * @param {import('../../types').ImageBlock} block
+     * @param {import('../../types').InlineParser} parseInline
+     * @returns {HTMLElement}
+     */
+    render(block, parseInline) {
+      const { file, caption, withBorder, expanded, withBackground, styles } = block.data
+
+      const figure = document.createElement('figure')
+      figure.className = `${classPrefix}-image`
+
+      if (withBorder) figure.classList.add(`${classPrefix}-image--bordered`)
+      if (expanded) figure.classList.add(`${classPrefix}-image--expanded`)
+      if (withBackground) figure.classList.add(`${classPrefix}-image--background`)
+
+      const img = document.createElement('img')
+      img.className = `${classPrefix}-image__picture`
+      setSafeUrlAttribute(img, 'src', file.url, 'media')
+
+      let figcaption = null
+      if (caption) {
+        figcaption = document.createElement('figcaption')
+        figcaption.className = `${classPrefix}-image__caption`
+        figcaption.appendChild(parseInline(caption))
+      }
+      img.alt = figcaption?.textContent?.trim() || ''
+
+      if (file.width) img.width = file.width
+      if (file.height) img.height = file.height
+
+      img.loading = 'lazy'
+
+      // Apply user-configured inline styles
+      if (styles) applyInlineStyles(img, figure, styles, expanded, withBackground)
+
+      figure.appendChild(img)
+
+      if (figcaption) figure.appendChild(figcaption)
+
+      return figure
+    },
+  }
+}

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

@@ -0,0 +1,40 @@
+.editor-image {
+  width: fit-content;
+}
+
+.editor-image__picture {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--er-radius-sm);
+}
+
+.editor-image--bordered .editor-image__picture {
+  border: 1px solid var(--er-border);
+}
+
+.editor-image--expanded {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: none;
+}
+
+.editor-image--expanded .editor-image__picture {
+  width: 100%;
+  border-radius: 0;
+}
+
+.editor-image--background {
+  padding: 16px;
+  background-color: var(--er-surface);
+  border-radius: var(--er-radius);
+}
+
+.editor-image__caption {
+  margin-top: 8px;
+  font-size: 13px;
+  color: var(--er-text-3);
+  text-align: center;
+}

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

@@ -0,0 +1,47 @@
+/**
+ * Get all supported block types
+ * @returns {import('../types.js').BlockType[]}
+ */
+export function getSupportedBlockTypes(): import("../types.js").BlockType[];
+/**
+ * Create all default renderers
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../shared/localeTypes.js').LocaleValue>} locale
+ * @param {import('../types.js').BlockType[]} [types]
+ * @param {Record<string, unknown>} [configs]
+ * @returns {Map<string, import('../types.js').BlockRenderer>}
+ */
+export function createDefaultRenderers(classPrefix: string, locale: Record<string, import("../../shared/localeTypes.js").LocaleValue>, types?: import("../types.js").BlockType[], configs?: Record<string, unknown>): Map<string, import("../types.js").BlockRenderer>;
+/**
+ * Create a single renderer by type
+ * @template {import('../types.js').OutputBlockData} T
+ * @param {T['type']} type
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../shared/localeTypes.js').LocaleValue>} [locale]
+ * @param {unknown} [config]
+ * @returns {import('../types.js').BlockRenderer<T> | null}
+ */
+export function createRenderer<T extends import("../types.js").OutputBlockData>(type: T["type"], classPrefix: string, locale?: Record<string, import("../../shared/localeTypes.js").LocaleValue>, config?: unknown): import("../types.js").BlockRenderer<T> | null;
+export type RendererFactory = (prefix: string, locale: Record<string, import("../../shared/localeTypes.js").LocaleValue>, config?: unknown) => import("../types.js").BlockRenderer;
+import { createParagraphRenderer } from './paragraph/index.js';
+import { createHeaderRenderer } from './heading/index.js';
+import { createListRenderer } from './list/index.js';
+import { createQuoteRenderer } from './quote/index.js';
+import { createCodeRenderer } from './code/index.js';
+import { createImageRenderer } from './image/index.js';
+import { createDelimiterRenderer } from './delimiter/index.js';
+import { createTableRenderer } from './table/index.js';
+import { createChecklistRenderer } from './checklist/index.js';
+import { createWarningRenderer } from './warning/index.js';
+import { createEmbedRenderer } from './embed/index.js';
+import { createRawRenderer } from './raw/index.js';
+import { createGalleryRenderer } from './gallery/index.js';
+import { createCarouselRenderer } from './carousel/index.js';
+import { createAttachesRenderer } from './attaches/index.js';
+import { createLinkPreviewRenderer } from './link-preview/index.js';
+import { createToggleRenderer } from './toggle/index.js';
+import { createColumnsRenderer } from './columns/index.js';
+import { createSpoilerRenderer } from './spoiler/index.js';
+import { createPollRenderer } from './poll/index.js';
+import { createPersonRenderer } from './person/index.js';
+export { createParagraphRenderer, createHeaderRenderer, createListRenderer, createQuoteRenderer, createCodeRenderer, createImageRenderer, createDelimiterRenderer, createTableRenderer, createChecklistRenderer, createWarningRenderer, createEmbedRenderer, createRawRenderer, createGalleryRenderer, createCarouselRenderer, createAttachesRenderer, createLinkPreviewRenderer, createToggleRenderer, createColumnsRenderer, createSpoilerRenderer, createPollRenderer, createPersonRenderer };

package/dist/renderer/renderers/index.js

@@ -0,0 +1,125 @@
+// @ts-check
+import { createParagraphRenderer } from './paragraph/index.js'
+import { createHeaderRenderer } from './heading/index.js'
+import { createListRenderer } from './list/index.js'
+import { createQuoteRenderer } from './quote/index.js'
+import { createCodeRenderer } from './code/index.js'
+import { createImageRenderer } from './image/index.js'
+import { createDelimiterRenderer } from './delimiter/index.js'
+import { createTableRenderer } from './table/index.js'
+import { createChecklistRenderer } from './checklist/index.js'
+import { createWarningRenderer } from './warning/index.js'
+import { createEmbedRenderer } from './embed/index.js'
+import { createRawRenderer } from './raw/index.js'
+import { createGalleryRenderer } from './gallery/index.js'
+import { createCarouselRenderer } from './carousel/index.js'
+import { createAttachesRenderer } from './attaches/index.js'
+import { createLinkPreviewRenderer } from './link-preview/index.js'
+import { createToggleRenderer } from './toggle/index.js'
+import { createColumnsRenderer } from './columns/index.js'
+import { createSpoilerRenderer } from './spoiler/index.js'
+import { createPollRenderer } from './poll/index.js'
+import { createPersonRenderer } from './person/index.js'
+import { BLOCK_TYPES } from '../../shared/blockTypes.js'
+
+/**
+ * @typedef {(prefix: string, locale: Record<string, import('../../shared/localeTypes').LocaleValue>, config?: unknown) => import('../types').BlockRenderer} RendererFactory
+ */
+
+// Factory functions map for Rector document block types.
+/** @type {Record<import('../types').BlockType, RendererFactory>} */
+const rendererFactories = {
+  paragraph: createParagraphRenderer,
+  heading: createHeaderRenderer,
+  list: createListRenderer,
+  quote: createQuoteRenderer,
+  code: createCodeRenderer,
+  image: createImageRenderer,
+  delimiter: createDelimiterRenderer,
+  table: createTableRenderer,
+  checklist: createChecklistRenderer,
+  warning: createWarningRenderer,
+  embed: createEmbedRenderer,
+  raw: createRawRenderer,
+  gallery: createGalleryRenderer,
+  carousel: createCarouselRenderer,
+  attaches: createAttachesRenderer,
+  linkPreview: createLinkPreviewRenderer,
+  toggle: createToggleRenderer,
+  columns: createColumnsRenderer,
+  spoiler: createSpoilerRenderer,
+  poll: createPollRenderer,
+  person: createPersonRenderer,
+}
+
+/**
+ * Get all supported block types
+ * @returns {import('../types').BlockType[]}
+ */
+export function getSupportedBlockTypes() {
+  return [...BLOCK_TYPES]
+}
+
+/**
+ * Create all default renderers
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../shared/localeTypes').LocaleValue>} locale
+ * @param {import('../types').BlockType[]} [types]
+ * @param {Record<string, unknown>} [configs]
+ * @returns {Map<string, import('../types').BlockRenderer>}
+ */
+export function createDefaultRenderers(classPrefix, locale, types = getSupportedBlockTypes(), configs = {}) {
+  /** @type {Map<string, import('../types').BlockRenderer>} */
+  const renderers = new Map()
+
+  for (const type of new Set(types)) {
+    const factory = rendererFactories[type]
+    if (!factory) continue
+    renderers.set(type, factory(classPrefix, locale, configs[type]))
+  }
+
+  return renderers
+}
+
+/**
+ * Create a single renderer by type
+ * @template {import('../types').OutputBlockData} T
+ * @param {T['type']} type
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../shared/localeTypes').LocaleValue>} [locale]
+ * @param {unknown} [config]
+ * @returns {import('../types').BlockRenderer<T> | null}
+ */
+export function createRenderer(type, classPrefix, locale, config) {
+  const factory = rendererFactories[/** @type {import('../types').BlockType} */ (type)]
+
+  if (!factory) {
+    return null
+  }
+
+  return /** @type {import('../types').BlockRenderer<T>} */ (factory(classPrefix, locale || {}, config))
+}
+
+export {
+  createParagraphRenderer,
+  createHeaderRenderer,
+  createListRenderer,
+  createQuoteRenderer,
+  createCodeRenderer,
+  createImageRenderer,
+  createDelimiterRenderer,
+  createTableRenderer,
+  createChecklistRenderer,
+  createWarningRenderer,
+  createEmbedRenderer,
+  createRawRenderer,
+  createGalleryRenderer,
+  createCarouselRenderer,
+  createAttachesRenderer,
+  createLinkPreviewRenderer,
+  createToggleRenderer,
+  createColumnsRenderer,
+  createSpoilerRenderer,
+  createPollRenderer,
+  createPersonRenderer,
+}

package/dist/renderer/renderers/link-preview/README.md

@@ -0,0 +1,43 @@
+# LinkPreview renderer
+
+Renderer for the `linkPreview` 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 { createLinkPreviewRenderer } from '@shelamkoff/rector/renderer/renderers/link-preview'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createLinkPreviewRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// When the mounted output is removed:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Typical data
+
+```json
+{
+  "url": "https://example.com",
+  "title": "Example",
+  "description": "",
+  "image": "",
+  "favicon": "",
+  "domain": "example.com",
+  "template": "notion"
+}
+```
+
+The [link-preview plugin field reference](../../../plugins/link-preview/README.md#field-reference) is the canonical persisted-data contract shared by the editor and renderer.
+
+The destination uses the external-link URL policy and image sources use the media URL policy; text fields are assigned as text. 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/link-preview/README.ru.md

@@ -0,0 +1,43 @@
+# Рендерер LinkPreview
+
+Преобразует сохранённый блок `linkPreview` в принадлежащий рендереру DOM.
+
+Синхронная точка входа `@shelamkoff/rector/renderer` включает все встроенные рендереры, поэтому до её импорта установите `@shelamkoff/carousel` и `@shelamkoff/expose`. Значение `blockTypes: []` отключает создание встроенных рендереров, но не меняет правила разрешения модулей ESM.
+
+## Использование
+
+```js
+import { createEditorRenderer } from '@shelamkoff/rector/renderer'
+import { createLinkPreviewRenderer } from '@shelamkoff/rector/renderer/renderers/link-preview'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createLinkPreviewRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// При удалении добавленного результата:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Типичные данные
+
+```json
+{
+  "url": "https://example.com",
+  "title": "Пример",
+  "description": "",
+  "image": "",
+  "favicon": "",
+  "domain": "example.com",
+  "template": "notion"
+}
+```
+
+Канонический контракт сохраняемых данных, общий для редактора и рендерера, приведён в [справочнике полей плагина предпросмотра ссылки](../../../plugins/link-preview/README.ru.md#поля-данных).
+
+Адрес назначения проходит политику внешних ссылок, а изображения — политику URL для медиафайлов; текстовые поля добавляются как текст. Рендерер объявляет одну таблицу стилей и не создаёт обработчиков или сторонних экземпляров.
+
+Если рендерер объявляет стили, показанный выше явный вызов `EditorRenderer.injectStyles()` подключает их, а возвращённый владелец освобождает.
+
+Жизненный цикл, восстановление внутристрочных виджетов, стили и границы безопасности описаны в последовательном руководстве VitePress.

package/dist/renderer/renderers/link-preview/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Link preview (bookmark) block renderer with 7 templates support.
+ * Mirrors the editor plugin: horizontal, compact, large-top, minimal, twitter, notion, split.
+ *
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes.js').LocaleValue>} _locale
+ * @returns {import('../../types.js').BlockRenderer<import('../../types.js').LinkPreviewBlock>}
+ */
+export function createLinkPreviewRenderer(classPrefix: string, _locale: Record<string, import("../../../shared/localeTypes.js").LocaleValue>): import("../../types.js").BlockRenderer<import("../../types.js").LinkPreviewBlock>;

package/dist/renderer/renderers/link-preview/index.js

@@ -0,0 +1,118 @@
+// @ts-check
+import { resolvePath } from '../../../shared/resolvePath.js'
+import { sanitizeUrl, setSafeUrlAttribute } from '../../../shared/sanitize/sanitizeUrl.js'
+
+const styles = resolvePath('./styles.css', import.meta.url)
+
+// Tabler icon: external-link
+const ICON_EXTERNAL = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6h-6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6"/><path d="M11 13l9-9"/><path d="M15 4h5v5"/></svg>`
+
+const TEMPLATES = ['horizontal', 'compact', 'large-top', 'minimal', 'twitter', 'notion', 'split']
+
+/**
+ * Link preview (bookmark) block renderer with 7 templates support.
+ * Mirrors the editor plugin: horizontal, compact, large-top, minimal, twitter, notion, split.
+ *
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} _locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').LinkPreviewBlock>}
+ */
+export function createLinkPreviewRenderer(classPrefix, _locale) {
+    const p = `${classPrefix}-link-preview`
+
+    return {
+        type: 'linkPreview',
+        styles: [styles],
+
+        /**
+         * @param {import('../../types').LinkPreviewBlock} block
+         * @param {import('../../types').InlineParser} _parseInline
+         * @returns {HTMLElement}
+         */
+        render(block, _parseInline) {
+            const { url, title, description, image, favicon, domain } = block.data
+            const requestedTpl = block.data.template
+            const tpl = (requestedTpl && TEMPLATES.includes(requestedTpl)) ? requestedTpl : 'notion'
+
+            const card = document.createElement('a')
+            card.className = `${p} ${p}--${tpl}`
+            const href = sanitizeUrl(url, {
+                policy: 'external', allowRelative: false, fallback: '',
+            })
+            if (href) card.href = href
+            card.target = '_blank'
+            card.rel = 'noopener noreferrer'
+
+            // Notion: large favicon before content
+            if (tpl === 'notion' && favicon) {
+                const bigFav = document.createElement('img')
+                bigFav.className = `${p}__favicon-large`
+                setSafeUrlAttribute(bigFav, 'src', favicon || '', 'media')
+                bigFav.width = 32
+                bigFav.height = 32
+                bigFav.alt = ''
+                bigFav.loading = 'lazy'
+                card.appendChild(bigFav)
+            }
+
+            // Content
+            const content = document.createElement('div')
+            content.className = `${p}__content`
+
+            const titleText = title || url
+            const titleEl = document.createElement('div')
+            titleEl.className = `${p}__title`
+            titleEl.textContent = titleText
+            content.appendChild(titleEl)
+
+            if (description) {
+                const descEl = document.createElement('div')
+                descEl.className = `${p}__desc`
+                descEl.textContent = description
+                content.appendChild(descEl)
+            }
+
+            // Domain line
+            const domainLine = document.createElement('div')
+            domainLine.className = `${p}__domain`
+
+            // Favicon (not for notion — it has large favicon instead)
+            if (favicon && tpl !== 'notion') {
+                const fav = document.createElement('img')
+                fav.className = `${p}__favicon`
+                setSafeUrlAttribute(fav, 'src', favicon, 'media')
+                fav.width = 14
+                fav.height = 14
+                fav.alt = ''
+                fav.loading = 'lazy'
+                domainLine.appendChild(fav)
+            }
+
+            const domainText = document.createElement('span')
+            domainText.textContent = domain || url
+            domainLine.appendChild(domainText)
+
+            const ext = document.createElement('span')
+            ext.className = `${p}__external`
+            ext.innerHTML = ICON_EXTERNAL
+            domainLine.appendChild(ext)
+
+            content.appendChild(domainLine)
+            card.appendChild(content)
+
+            // Image (not for minimal/notion templates)
+            if (image && tpl !== 'minimal' && tpl !== 'notion') {
+                const imgWrap = document.createElement('div')
+                imgWrap.className = `${p}__image`
+                const img = document.createElement('img')
+                setSafeUrlAttribute(img, 'src', image, 'media')
+                img.alt = title || ''
+                img.loading = 'lazy'
+                imgWrap.appendChild(img)
+                card.appendChild(imgWrap)
+            }
+
+            return card
+        },
+    }
+}