@shelamkoff/rector 1.0.4 → 1.0.5

package/dist/plugins/quote/README.md

@@ -11,7 +11,6 @@ npm install @shelamkoff/rector
 ```js
 import { createEditor } from '@shelamkoff/rector'
 import { Quote } from '@shelamkoff/rector/plugins/quote'
-import '@shelamkoff/rector/styles/editor.css'
 
 const editor = createEditor({
   holder: document.querySelector('#editor'),

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

@@ -11,7 +11,6 @@ npm install @shelamkoff/rector
 ```js
 import { createEditor } from '@shelamkoff/rector'
 import { Quote } from '@shelamkoff/rector/plugins/quote'
-import '@shelamkoff/rector/styles/editor.css'
 
 const editor = createEditor({
   holder: document.querySelector('#editor'),

package/dist/plugins/raw/README.md

@@ -11,7 +11,6 @@ npm install @shelamkoff/rector
 ```js
 import { createEditor } from '@shelamkoff/rector'
 import { Raw } from '@shelamkoff/rector/plugins/raw'
-import '@shelamkoff/rector/styles/editor.css'
 
 const editor = createEditor({
   holder: document.querySelector('#editor'),

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

@@ -11,7 +11,6 @@ npm install @shelamkoff/rector
 ```js
 import { createEditor } from '@shelamkoff/rector'
 import { Raw } from '@shelamkoff/rector/plugins/raw'
-import '@shelamkoff/rector/styles/editor.css'
 
 const editor = createEditor({
   holder: document.querySelector('#editor'),

package/dist/plugins/spoiler/README.md

@@ -11,7 +11,6 @@ npm install @shelamkoff/rector
 ```js
 import { createEditor } from '@shelamkoff/rector'
 import { Spoiler } from '@shelamkoff/rector/plugins/spoiler'
-import '@shelamkoff/rector/styles/editor.css'
 
 const editor = createEditor({
   holder: document.querySelector('#editor'),

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

@@ -11,7 +11,6 @@ npm install @shelamkoff/rector
 ```js
 import { createEditor } from '@shelamkoff/rector'
 import { Spoiler } from '@shelamkoff/rector/plugins/spoiler'
-import '@shelamkoff/rector/styles/editor.css'
 
 const editor = createEditor({
   holder: document.querySelector('#editor'),

package/dist/plugins/table/README.md

@@ -11,7 +11,6 @@ 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'),

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

@@ -11,7 +11,6 @@ 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'),

package/dist/plugins/toggle/README.md

@@ -11,7 +11,6 @@ npm install @shelamkoff/rector
 ```js
 import { createEditor } from '@shelamkoff/rector'
 import { Toggle } from '@shelamkoff/rector/plugins/toggle'
-import '@shelamkoff/rector/styles/editor.css'
 
 const editor = createEditor({
   holder: document.querySelector('#editor'),

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

@@ -11,7 +11,6 @@ npm install @shelamkoff/rector
 ```js
 import { createEditor } from '@shelamkoff/rector'
 import { Toggle } from '@shelamkoff/rector/plugins/toggle'
-import '@shelamkoff/rector/styles/editor.css'
 
 const editor = createEditor({
   holder: document.querySelector('#editor'),

package/dist/plugins/warning/README.md

@@ -11,7 +11,6 @@ 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'),

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

@@ -11,7 +11,6 @@ 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'),

package/dist/renderer/index.js

@@ -16,8 +16,8 @@ const baseCssUrl = new URL('./styles/base.css', import.meta.url).href
  * Renders Rector document blocks to DOM elements.
  */
 export class EditorRenderer {
-  /** @type {{ classPrefix: string, throwOnUnknown: boolean, theme: 'dark' | 'light', validationMode: 'preserve' | 'strict', onValidationError?: (issue: { blockId?: string, type: string }) => void }} */
-  #config
+  /** @type {{ injectStyles: boolean, classPrefix: string, throwOnUnknown: boolean, theme: 'dark' | 'light', validationMode: 'preserve' | 'strict', onValidationError?: (issue: { blockId?: string, type: string }) => void }} */
+  #config
   /** @type {Map<string, import('./types').BlockRenderer>} */
   #renderers
   /** @type {Map<string, import('./types').InlinePluginLike>} */
@@ -39,12 +39,22 @@ export class EditorRenderer {
   /** Built-in types use the same neutral validators as their editor plugins. */
   #defaultRendererTypes = new Set()
 
-  /** @type {import('./types').InlineParser} */
-  #parseInline
+  /** @type {import('./types').InlineParser} */
+  #parseInline
+
+  /** @type {{ destroy(): void } | null} */
+  #styleOwner = null
+
+  /** @type {string} */
+  #styleKey = ''
 
-  /** @param {import('./types').RendererConfig} [config] */
-  constructor(config = {}) {
-    this.#config = {
+  /** @param {import('./types').RendererConfig} [config] */
+  constructor(config = {}) {
+    if (config.injectStyles !== undefined && typeof config.injectStyles !== 'boolean') {
+      throw new TypeError('EditorRenderer injectStyles must be a boolean')
+    }
+    this.#config = {
+      injectStyles: config.injectStyles ?? true,
       classPrefix: config.classPrefix ?? 'editor',
       throwOnUnknown: config.throwOnUnknown ?? true,
       theme: config.theme ?? 'dark',
@@ -117,10 +127,16 @@ export class EditorRenderer {
    * @param {import('./types').OutputBlockData} block
    * @returns {HTMLElement}
    */
-  renderBlock(block) {
-    const entry = this.#createRenderedBlock(block)
-    this.#detachedBlocks.set(entry.element, entry)
-    return entry.element
+  renderBlock(block) {
+    this.#ensureStyles()
+    try {
+      const entry = this.#createRenderedBlock(block)
+      this.#detachedBlocks.set(entry.element, entry)
+      return entry.element
+    } catch (error) {
+      this.#releaseAutomaticStylesIfIdle()
+      throw error
+    }
   }
 
   /**
@@ -196,7 +212,8 @@ export class EditorRenderer {
    * @param {import('./types').OutputData} data
    * @returns {HTMLElement}
    */
-  render(data) {
+  render(data) {
+    this.#ensureStyles()
     const wrapper = document.createElement('div')
     const theme = this.#config.theme
     wrapper.className = `${this.#config.classPrefix}-content`
@@ -212,9 +229,10 @@ export class EditorRenderer {
           wrapper.appendChild(entry.element)
         }
       }
-    } catch (error) {
-      for (const entry of created) this.#disposeRenderedElement(entry)
-      throw error
+    } catch (error) {
+      for (const entry of created) this.#disposeRenderedElement(entry)
+      this.#releaseAutomaticStylesIfIdle()
+      throw error
     }
 
     this.#detachedDocuments.set(wrapper, created)
@@ -260,7 +278,8 @@ export class EditorRenderer {
    * @param {HTMLElement} container
    * @returns {void}
    */
-  renderTo(data, container) {
+  renderTo(data, container) {
+    this.#ensureStyles()
     const mounted = this.#mountedContainers.get(container)
     const wrapper = mounted?.wrapper ?? document.createElement('div')
     if (!mounted) {
@@ -306,9 +325,10 @@ export class EditorRenderer {
         next.set(key, { element, type: block.type, signature, renderer: owner })
         ordered.push(element)
       }
-    } catch (error) {
-      for (const entry of created) this.#disposeRenderedElement(entry)
-      throw error
+    } catch (error) {
+      for (const entry of created) this.#disposeRenderedElement(entry)
+      this.#releaseAutomaticStylesIfIdle()
+      throw error
     }
 
     for (const [key, entry] of previous) {
@@ -329,7 +349,7 @@ export class EditorRenderer {
    * container, or every resource owned by this renderer instance.
    * @param {HTMLElement} [target]
    */
-  destroy(target) {
+  destroy(target) {
     const containers = target
       ? (this.#mountedContainers.has(target) ? [target] : [])
       : [...this.#mountedContainers.keys()]
@@ -358,12 +378,14 @@ export class EditorRenderer {
     const blocks = target
       ? (this.#detachedBlocks.has(target) ? [target] : [])
       : [...this.#detachedBlocks.keys()]
-    for (const element of blocks) {
+    for (const element of blocks) {
       const entry = this.#detachedBlocks.get(element)
       if (entry) this.#disposeRenderedElement(entry)
       this.#detachedBlocks.delete(element)
-      element.replaceChildren()
-    }
+      element.replaceChildren()
+    }
+
+    this.#releaseAutomaticStylesIfIdle(!target)
   }
 
   /**
@@ -378,7 +400,7 @@ export class EditorRenderer {
    * Collect all CSS URLs from base styles and registered renderers
    * @returns {string[]}
    */
-  getStyleUrls() {
+  getStyleUrls() {
     /** @type {Set<string>} */
     const urls = new Set([baseCssUrl])
 
@@ -388,8 +410,31 @@ export class EditorRenderer {
       }
     }
 
-    return [...urls]
-  }
+    return [...urls]
+  }
+
+  #ensureStyles() {
+    if (!this.#config.injectStyles) return
+    const urls = this.getStyleUrls()
+    const key = urls.join('\n')
+    if (this.#styleOwner && this.#styleKey === key) return
+    const nextOwner = acquireStyleUrls(urls)
+    this.#styleOwner?.destroy()
+    this.#styleOwner = nextOwner
+    this.#styleKey = key
+  }
+
+  /** Release automatic styles after the last rendered result, or unconditionally. */
+  #releaseAutomaticStylesIfIdle(force = false) {
+    if (!force && (
+      this.#mountedContainers.size > 0
+      || this.#detachedDocuments.size > 0
+      || this.#detachedBlocks.size > 0
+    )) return
+    this.#styleOwner?.destroy()
+    this.#styleOwner = null
+    this.#styleKey = ''
+  }
 
   /**
    * Inject <link> tags for all collected CSS URLs

package/dist/renderer/types.d.ts

@@ -418,8 +418,10 @@ export interface BlockRenderer<T extends OutputBlockData = OutputBlockData> {
     mapTextFields?(data: T['data'], transform: (html: string) => string): void
 }
 
-export interface RendererConfig {
-    /** Namespace used by generated renderer classes. Default: 'editor'. */
+export interface RendererConfig {
+    /** Automatically load base and registered-renderer styles on first render. Default: true. */
+    injectStyles?: boolean
+    /** Namespace used by generated renderer classes. Default: 'editor'. */
     classPrefix?: string
     /** Throw for an unregistered block instead of rendering a placeholder. Default: true. */
     throwOnUnknown?: boolean

package/dist/shared/cloneEditorData.js

@@ -11,10 +11,17 @@ import { assertJsonValue } from './jsonData.js'
  * @param {T} value
  * @returns {T}
  */
-export function cloneEditorData(value) {
-  assertJsonValue(value)
-  if (typeof structuredClone === 'function') {
-    return structuredClone(value)
-  }
-  return JSON.parse(JSON.stringify(value))
-}
+export function cloneEditorData(value) {
+  assertJsonValue(value)
+  if (typeof structuredClone === 'function') {
+    try {
+      return structuredClone(value)
+    } catch (error) {
+      const errorName = error && typeof error === 'object' && 'name' in error
+        ? error.name
+        : undefined
+      if (errorName !== 'DataCloneError') throw error
+    }
+  }
+  return JSON.parse(JSON.stringify(value))
+}

package/dist/shared/styleRegistry.js

@@ -2,8 +2,13 @@
 const entries = new Map()
 
 /** @param {string[]} urls */
-export function acquireStyleUrls(urls) {
-  const tracked = []
+export function acquireStyleUrls(urls) {
+  const head = globalThis.document?.head
+  if (!head || typeof head.appendChild !== 'function') {
+    return { destroy() {} }
+  }
+
+  const tracked = []
   for (const url of new Set(urls)) {
     const existing = entries.get(url)
     if (existing) {
@@ -13,7 +18,7 @@ export function acquireStyleUrls(urls) {
       link.rel = 'stylesheet'
       link.href = url
       link.dataset.oeStyle = ''
-      document.head.appendChild(link)
+      head.appendChild(link)
       entries.set(url, { count: 1, link })
     }
     tracked.push(url)

package/dist/styles/inline-plugins/color.css

@@ -0,0 +1 @@
+@import '@shelamkoff/color-picker/styles.css';

package/dist/styles/inline-plugins/mention.css

@@ -0,0 +1 @@
+@import '../../inline-plugins/mention/styles.css';

package/dist/styles/plugins/attaches.css

@@ -0,0 +1,2 @@
+@import '../../plugins/attaches/attaches.css';
+@import '../../plugins/shared/sourceEditor.css';

package/dist/styles/plugins/carousel.css

@@ -0,0 +1,2 @@
+@import '../../plugins/carousel/carousel.css';
+@import '../../plugins/shared/sourceEditor.css';

package/dist/styles/plugins/checklist.css

@@ -0,0 +1 @@
+@import '../../plugins/checklist/checklist.css';

package/dist/styles/plugins/code.css

@@ -0,0 +1 @@
+@import '../../plugins/code/code.css';

package/dist/styles/plugins/columns.css

@@ -0,0 +1 @@
+@import '../../plugins/columns/columns.css';

package/dist/styles/plugins/delimiter.css

@@ -0,0 +1 @@
+@import '../../plugins/delimiter/delimiter.css';

package/dist/styles/plugins/embed.css

@@ -0,0 +1 @@
+@import '../../plugins/embed/embed.css';

package/dist/styles/plugins/gallery.css

@@ -0,0 +1,2 @@
+@import '../../plugins/gallery/gallery.css';
+@import '../../plugins/shared/sourceEditor.css';

package/dist/styles/plugins/heading.css

@@ -0,0 +1 @@
+@import '../../plugins/heading/heading.css';

package/dist/styles/plugins/image.css

@@ -0,0 +1,2 @@
+@import '../../plugins/image/image.css';
+@import '../../plugins/shared/sourceEditor.css';

package/dist/styles/plugins/link-preview.css

@@ -0,0 +1 @@
+@import '../../plugins/link-preview/link-preview.css';

package/dist/styles/plugins/list.css

@@ -0,0 +1 @@
+@import '../../plugins/list/list.css';

package/dist/styles/plugins/paragraph.css

@@ -0,0 +1 @@
+@import '../../plugins/paragraph/paragraph.css';

package/dist/styles/plugins/person.css

@@ -0,0 +1,2 @@
+@import '../../plugins/person/person.css';
+@import '@shelamkoff/cropper/styles.css';

package/dist/styles/plugins/poll.css

@@ -0,0 +1 @@
+@import '../../plugins/poll/poll.css';

package/dist/styles/plugins/quote.css

@@ -0,0 +1 @@
+@import '../../plugins/quote/quote.css';

package/dist/styles/plugins/raw.css

@@ -0,0 +1 @@
+@import '../../plugins/raw/raw.css';

package/dist/styles/plugins/spoiler.css

@@ -0,0 +1 @@
+@import '../../plugins/spoiler/spoiler.css';

package/dist/styles/plugins/table.css

@@ -0,0 +1 @@
+@import '../../plugins/table/table.css';

package/dist/styles/plugins/toggle.css

@@ -0,0 +1 @@
+@import '../../plugins/toggle/toggle.css';

package/dist/styles/plugins/warning.css

@@ -0,0 +1 @@
+@import '../../plugins/warning/warning.css';

package/dist/styles/renderer.css

@@ -0,0 +1 @@
+@import '../renderer/styles/base.css';

package/dist/styles/renderers/attaches.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/attaches/styles.css';

package/dist/styles/renderers/carousel.css

@@ -0,0 +1,2 @@
+@import '../../renderer/renderers/carousel/styles.css';
+@import '@shelamkoff/carousel/styles.css';

package/dist/styles/renderers/checklist.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/checklist/styles.css';

package/dist/styles/renderers/code.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/code/styles.css';

package/dist/styles/renderers/columns.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/columns/styles.css';

package/dist/styles/renderers/delimiter.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/delimiter/styles.css';

package/dist/styles/renderers/embed.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/embed/styles.css';

package/dist/styles/renderers/gallery.css

@@ -0,0 +1,2 @@
+@import '../../renderer/renderers/gallery/styles.css';
+@import '@shelamkoff/expose/styles.css';

package/dist/styles/renderers/heading.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/heading/styles.css';

package/dist/styles/renderers/image.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/image/styles.css';

package/dist/styles/renderers/link-preview.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/link-preview/styles.css';

package/dist/styles/renderers/list.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/list/styles.css';

package/dist/styles/renderers/paragraph.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/paragraph/styles.css';

package/dist/styles/renderers/person.css

@@ -0,0 +1,2 @@
+@import '../../renderer/renderers/person/styles.css';
+@import '@shelamkoff/carousel/styles.css';

package/dist/styles/renderers/poll.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/poll/styles.css';

package/dist/styles/renderers/quote.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/quote/styles.css';

package/dist/styles/renderers/raw.css

@@ -0,0 +1 @@
+/* Raw rendering relies only on the shared renderer stylesheet. */

package/dist/styles/renderers/spoiler.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/spoiler/styles.css';

package/dist/styles/renderers/table.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/table/styles.css';

package/dist/styles/renderers/toggle.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/toggle/styles.css';

package/dist/styles/renderers/warning.css

@@ -0,0 +1 @@
+@import '../../renderer/renderers/warning/styles.css';

package/dist/styles.css

@@ -0,0 +1,46 @@
+@import './styles/editor.css';
+@import './styles/renderer.css';
+@import './styles/plugins/paragraph.css';
+@import './styles/plugins/heading.css';
+@import './styles/plugins/list.css';
+@import './styles/plugins/quote.css';
+@import './styles/plugins/code.css';
+@import './styles/plugins/image.css';
+@import './styles/plugins/delimiter.css';
+@import './styles/plugins/table.css';
+@import './styles/plugins/checklist.css';
+@import './styles/plugins/warning.css';
+@import './styles/plugins/embed.css';
+@import './styles/plugins/raw.css';
+@import './styles/plugins/gallery.css';
+@import './styles/plugins/carousel.css';
+@import './styles/plugins/attaches.css';
+@import './styles/plugins/link-preview.css';
+@import './styles/plugins/toggle.css';
+@import './styles/plugins/columns.css';
+@import './styles/plugins/spoiler.css';
+@import './styles/plugins/poll.css';
+@import './styles/plugins/person.css';
+@import './styles/inline-plugins/color.css';
+@import './styles/inline-plugins/mention.css';
+@import './styles/renderers/paragraph.css';
+@import './styles/renderers/heading.css';
+@import './styles/renderers/list.css';
+@import './styles/renderers/quote.css';
+@import './styles/renderers/code.css';
+@import './styles/renderers/image.css';
+@import './styles/renderers/delimiter.css';
+@import './styles/renderers/table.css';
+@import './styles/renderers/checklist.css';
+@import './styles/renderers/warning.css';
+@import './styles/renderers/embed.css';
+@import './styles/renderers/raw.css';
+@import './styles/renderers/gallery.css';
+@import './styles/renderers/carousel.css';
+@import './styles/renderers/attaches.css';
+@import './styles/renderers/link-preview.css';
+@import './styles/renderers/toggle.css';
+@import './styles/renderers/columns.css';
+@import './styles/renderers/spoiler.css';
+@import './styles/renderers/poll.css';
+@import './styles/renderers/person.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shelamkoff/rector",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Extensible browser-native block editor with atomic history, versioned JSON, and document rendering",
   "type": "module",
   "sideEffects": [
@@ -34,10 +34,11 @@
       "types": "./dist/inline-plugins/color.d.ts",
       "import": "./dist/inline-plugins/color.js"
     },
-    "./inline-plugins/mention": {
-      "types": "./dist/inline-plugins/mention/index.d.ts",
-      "import": "./dist/inline-plugins/mention/index.js"
-    },
+    "./inline-plugins/mention": {
+      "types": "./dist/inline-plugins/mention/index.d.ts",
+      "import": "./dist/inline-plugins/mention/index.js"
+    },
+    "./inline-plugins/*/styles.css": "./dist/styles/inline-plugins/*.css",
     "./inline-tools": {
       "types": "./dist/inline-tools/defaults.d.ts",
       "import": "./dist/inline-tools/defaults.js"
@@ -65,16 +66,19 @@
       "types": "./dist/renderer/renderers/async.d.ts",
       "import": "./dist/renderer/renderers/async.js"
     },
-    "./renderer/renderers/*": {
-      "types": "./dist/renderer/renderers/*/index.d.ts",
-      "import": "./dist/renderer/renderers/*/index.js"
-    },
+    "./renderer/renderers/*": {
+      "types": "./dist/renderer/renderers/*/index.d.ts",
+      "import": "./dist/renderer/renderers/*/index.js"
+    },
+    "./renderer/renderers/*/styles.css": "./dist/styles/renderers/*.css",
     "./locale/*": {
       "types": "./dist/locale/*.d.ts",
       "import": "./dist/locale/*.js"
     },
-    "./styles/editor.css": "./dist/styles/editor.css",
-    "./styles/renderer.css": "./dist/renderer/styles/base.css",
+    "./styles.css": "./dist/styles.css",
+    "./styles/editor.css": "./dist/styles/editor.css",
+    "./styles/renderer.css": "./dist/styles/renderer.css",
+    "./plugins/*/styles.css": "./dist/styles/plugins/*.css",
     "./styles/themes/*": "./dist/core/themes/*.css",
     "./package.json": "./package.json"
   },