@shelamkoff/rector 1.0.1 → 1.0.2

package/dist/plugins/shared/sourceEditor.css

@@ -0,0 +1,165 @@
+.oe-source-editor {
+  position: absolute;
+  inset: 0;
+  z-index: var(--oe-plugin-dialog-z-index, 1200);
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  min-height: 220px;
+  padding: 16px;
+}
+
+.oe-source-editor--preloaded {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.oe-source-editor[data-oe-source-editor='html'] {
+  min-height: min(26rem, calc(100vh - 2rem));
+}
+
+.oe-source-editor__backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  background: var(--oe-overlay-dark, rgba(0, 0, 0, 0.7));
+  border: 0;
+  border-radius: inherit;
+  cursor: default;
+}
+
+.oe-source-editor__panel {
+  position: relative;
+  display: grid;
+  gap: 12px;
+  box-sizing: border-box;
+  width: min(100%, 32rem);
+  max-height: calc(100vh - 2rem);
+  padding: 16px;
+  overflow-y: auto;
+  background: var(--oe-surface-elevated, #1e1e24);
+  border: 1px solid var(--oe-border-hover, #2a2a2a);
+  border-radius: var(--oe-radius, 8px);
+  box-shadow: var(--oe-toolbar-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
+  text-align: left;
+}
+
+.oe-source-editor[data-oe-source-editor='url'] .oe-source-editor__panel {
+  width: min(100%, 28rem);
+}
+
+.oe-source-editor__title {
+  margin: 0;
+  color: var(--oe-text-1, #f5f5f5);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.oe-source-editor__label {
+  display: grid;
+  gap: 8px;
+  color: var(--oe-text-2, #c4c4c4);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.oe-source-editor__field {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 42px;
+  padding: 10px 12px;
+  resize: vertical;
+  color: var(--oe-text-1, #f5f5f5);
+  background: var(--oe-input-bg, #2c2c33);
+  border: 1px solid var(--oe-border-hover, #2a2a2a);
+  border-radius: var(--oe-radius-sm, 4px);
+  outline: none;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.oe-source-editor textarea.oe-source-editor__field {
+  min-height: 9rem;
+  max-height: min(40vh, 20rem);
+}
+
+.oe-source-editor__field:hover {
+  background: var(--oe-input-bg-hover, #353540);
+}
+
+.oe-source-editor .oe-source-editor__field:focus,
+.oe-source-editor .oe-source-editor__field:focus-visible {
+  border-color: var(--oe-border-hover, #2a2a2a);
+  outline: none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+
+.oe-source-editor__field[aria-invalid='true'] {
+  border-color: var(--oe-danger, #f87171);
+}
+
+.oe-source-editor__error {
+  color: var(--oe-danger-light, #fca5a5);
+  font-size: 13px;
+}
+
+.oe-source-editor__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.oe-source-editor__button {
+  min-height: 36px;
+  padding: 7px 14px;
+  border: 1px solid transparent;
+  border-radius: var(--oe-radius-sm, 4px);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.oe-source-editor__button--secondary {
+  color: var(--oe-text-1, #f5f5f5);
+  background: var(--oe-card, #111);
+  border-color: var(--oe-border-hover, #2a2a2a);
+}
+
+.oe-source-editor__button--secondary:hover {
+  background: var(--oe-card-hover, #191919);
+}
+
+.oe-source-editor__button--primary {
+  color: var(--oe-text-on-accent, #fff);
+  background: var(--oe-accent, #4357b4);
+}
+
+.oe-source-editor__button--primary:hover {
+  filter: brightness(1.08);
+}
+
+@media (max-width: 520px) {
+  .oe-source-editor {
+    padding: 10px;
+  }
+
+  .oe-source-editor__panel {
+    max-height: calc(100vh - 1.25rem);
+    padding: 14px;
+  }
+
+  .oe-source-editor__actions {
+    flex-direction: column-reverse;
+  }
+
+  .oe-source-editor__button {
+    width: 100%;
+  }
+}

package/dist/plugins/shared/sourceEditor.d.ts

@@ -0,0 +1,97 @@
+/**
+ * @typedef {Object} SourceEditorConfig
+ * @property {HTMLElement} wrapper Plugin wrapper that owns the editor.
+ * @property {AbortSignal} signal Plugin render lifecycle signal.
+ * @property {'url' | 'html'} kind Source value kind.
+ * @property {string} title Dialog title.
+ * @property {string} label Accessible field label.
+ * @property {string} placeholder Field placeholder.
+ * @property {string} submitText Submit button label.
+ * @property {string} cancelText Cancel button label.
+ * @property {string} invalidText Validation error.
+ * @property {(value: string) => string} normalize Sanitizes and validates input.
+ * @property {(value: string) => void} onSubmit Receives the normalized value.
+ */
+/**
+ * Build URL/HTML forms while the owning plugin view is rendered so their
+ * first style and layout pass does not happen in the user's click handler.
+ *
+ * @param {HTMLElement} wrapper Plugin wrapper that owns the editor.
+ * @param {AbortSignal} signal Plugin render lifecycle signal.
+ * @param {Array<'url' | 'html'>} kinds Forms used by the current plugin view.
+ * @returns {void}
+ */
+export function preloadSourceEditor(wrapper: HTMLElement, signal: AbortSignal, kinds: Array<"url" | "html">): void;
+/**
+ * Open an editor-owned URL or HTML input surface without relying on native
+ * browser prompts.
+ *
+ * @param {SourceEditorConfig} config Source editor configuration.
+ * @returns {{ close: () => void }}
+ */
+export function openSourceEditor(config: SourceEditorConfig): {
+    close: () => void;
+};
+export type SourceEditorConfig = {
+    /**
+     * Plugin wrapper that owns the editor.
+     */
+    wrapper: HTMLElement;
+    /**
+     * Plugin render lifecycle signal.
+     */
+    signal: AbortSignal;
+    /**
+     * Source value kind.
+     */
+    kind: "url" | "html";
+    /**
+     * Dialog title.
+     */
+    title: string;
+    /**
+     * Accessible field label.
+     */
+    label: string;
+    /**
+     * Field placeholder.
+     */
+    placeholder: string;
+    /**
+     * Submit button label.
+     */
+    submitText: string;
+    /**
+     * Cancel button label.
+     */
+    cancelText: string;
+    /**
+     * Validation error.
+     */
+    invalidText: string;
+    /**
+     * Sanitizes and validates input.
+     */
+    normalize: (value: string) => string;
+    /**
+     * Receives the normalized value.
+     */
+    onSubmit: (value: string) => void;
+};
+export type SourceEditorSurface = {
+    root: HTMLElement;
+    backdrop: HTMLButtonElement;
+    panel: HTMLFormElement;
+    title: HTMLHeadingElement;
+    labelText: HTMLSpanElement;
+    field: HTMLInputElement | HTMLTextAreaElement;
+    error: HTMLDivElement;
+    cancel: HTMLButtonElement;
+    submit: HTMLButtonElement;
+    signal: AbortSignal;
+    layer: {
+        open: () => void;
+        close: () => void;
+    };
+    destroy: () => void;
+};

package/dist/plugins/shared/sourceEditor.js

@@ -0,0 +1,260 @@
+import { createPluginLayer } from './layer.js'
+
+/**
+ * @typedef {Object} SourceEditorSurface
+ * @property {HTMLElement} root
+ * @property {HTMLButtonElement} backdrop
+ * @property {HTMLFormElement} panel
+ * @property {HTMLHeadingElement} title
+ * @property {HTMLSpanElement} labelText
+ * @property {HTMLInputElement | HTMLTextAreaElement} field
+ * @property {HTMLDivElement} error
+ * @property {HTMLButtonElement} cancel
+ * @property {HTMLButtonElement} submit
+ * @property {AbortSignal} signal
+ * @property {{ open: () => void, close: () => void }} layer
+ * @property {() => void} destroy
+ */
+
+/** @type {WeakMap<HTMLElement, { close: () => void, surface: SourceEditorSurface }>} */
+const activeEditors = new WeakMap()
+
+/** @type {WeakMap<HTMLElement, Map<'url' | 'html', SourceEditorSurface>>} */
+const surfaces = new WeakMap()
+
+/**
+ * @typedef {Object} SourceEditorConfig
+ * @property {HTMLElement} wrapper Plugin wrapper that owns the editor.
+ * @property {AbortSignal} signal Plugin render lifecycle signal.
+ * @property {'url' | 'html'} kind Source value kind.
+ * @property {string} title Dialog title.
+ * @property {string} label Accessible field label.
+ * @property {string} placeholder Field placeholder.
+ * @property {string} submitText Submit button label.
+ * @property {string} cancelText Cancel button label.
+ * @property {string} invalidText Validation error.
+ * @property {(value: string) => string} normalize Sanitizes and validates input.
+ * @property {(value: string) => void} onSubmit Receives the normalized value.
+ */
+
+/**
+ * Build URL/HTML forms while the owning plugin view is rendered so their
+ * first style and layout pass does not happen in the user's click handler.
+ *
+ * @param {HTMLElement} wrapper Plugin wrapper that owns the editor.
+ * @param {AbortSignal} signal Plugin render lifecycle signal.
+ * @param {Array<'url' | 'html'>} kinds Forms used by the current plugin view.
+ * @returns {void}
+ */
+export function preloadSourceEditor(wrapper, signal, kinds) {
+  if (signal.aborted) return
+  for (const kind of new Set(kinds)) ensureSurface(wrapper, signal, kind)
+}
+
+/**
+ * Open an editor-owned URL or HTML input surface without relying on native
+ * browser prompts.
+ *
+ * @param {SourceEditorConfig} config Source editor configuration.
+ * @returns {{ close: () => void }}
+ */
+export function openSourceEditor(config) {
+  if (config.signal.aborted) return { close() {} }
+  activeEditors.get(config.wrapper)?.close()
+
+  const surface = ensureSurface(config.wrapper, config.signal, config.kind)
+  if (!surface) return { close() {} }
+  const controller = new AbortController()
+  const { root, backdrop, panel, title, labelText, field, error, cancel, submit } = surface
+  backdrop.setAttribute('aria-label', config.cancelText)
+  panel.setAttribute('aria-label', config.title)
+  title.textContent = config.title
+  labelText.textContent = config.label
+  field.value = ''
+  field.placeholder = config.placeholder
+  field.removeAttribute('aria-invalid')
+  error.textContent = ''
+  error.hidden = true
+  cancel.textContent = config.cancelText
+  submit.textContent = config.submitText
+  setSurfaceVisible(surface, true)
+  surface.layer.open()
+
+  let closed = false
+  const close = () => {
+    if (closed) return
+    closed = true
+    if (activeEditors.get(config.wrapper)?.close === close) activeEditors.delete(config.wrapper)
+    controller.abort()
+    surface.layer.close()
+    setSurfaceVisible(surface, false)
+  }
+  activeEditors.set(config.wrapper, { close, surface })
+
+  config.signal.addEventListener('abort', close, { once: true, signal: controller.signal })
+  backdrop.addEventListener('click', close, { signal: controller.signal })
+  cancel.addEventListener('click', close, { signal: controller.signal })
+  root.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      event.stopPropagation()
+      close()
+    }
+  }, { signal: controller.signal })
+  panel.addEventListener('submit', (event) => {
+    event.preventDefault()
+    let value = ''
+    try {
+      value = config.normalize(field.value)
+    } catch {
+      value = ''
+    }
+    if (!value) {
+      error.textContent = config.invalidText
+      error.hidden = false
+      field.setAttribute('aria-invalid', 'true')
+      field.focus()
+      return
+    }
+    close()
+    config.onSubmit(value)
+  }, { signal: controller.signal })
+  field.addEventListener('input', () => {
+    error.hidden = true
+    field.removeAttribute('aria-invalid')
+  }, { signal: controller.signal })
+
+  queueMicrotask(() => {
+    if (!closed) field.focus({ preventScroll: true })
+  })
+
+  return { close }
+}
+
+/**
+ * @param {HTMLElement} wrapper
+ * @param {AbortSignal} signal
+ * @param {'url' | 'html'} kind
+ * @returns {SourceEditorSurface | null}
+ */
+function ensureSurface(wrapper, signal, kind) {
+  if (signal.aborted) return null
+
+  let owned = surfaces.get(wrapper)
+  if (!owned) {
+    owned = new Map()
+    surfaces.set(wrapper, owned)
+  }
+
+  const cached = owned.get(kind)
+  if (cached?.signal === signal && cached.root.isConnected) return cached
+  cached?.destroy()
+
+  const root = document.createElement('div')
+  root.className = 'oe-source-editor oe-source-editor--preloaded'
+  root.dataset.oeSourceEditor = kind
+  root.setAttribute('aria-hidden', 'true')
+  root.inert = true
+
+  const backdrop = document.createElement('button')
+  backdrop.type = 'button'
+  backdrop.className = 'oe-source-editor__backdrop'
+  backdrop.setAttribute('aria-label', 'Cancel')
+  backdrop.tabIndex = -1
+
+  const panel = document.createElement('form')
+  panel.className = 'oe-source-editor__panel'
+  panel.noValidate = true
+  panel.setAttribute('role', 'dialog')
+  panel.setAttribute('aria-modal', 'true')
+  panel.setAttribute('aria-label', 'Source')
+
+  const title = document.createElement('h3')
+  title.className = 'oe-source-editor__title'
+  title.textContent = 'Source'
+
+  const label = document.createElement('label')
+  label.className = 'oe-source-editor__label'
+  const labelText = document.createElement('span')
+  labelText.textContent = 'Source'
+
+  /** @type {HTMLInputElement | HTMLTextAreaElement} */
+  let field
+  if (kind === 'html') {
+    const textarea = document.createElement('textarea')
+    textarea.rows = 6
+    textarea.spellcheck = false
+    field = textarea
+  } else {
+    const input = document.createElement('input')
+    input.type = 'url'
+    input.inputMode = 'url'
+    input.setAttribute('autocomplete', 'url')
+    field = input
+  }
+  field.className = 'oe-source-editor__field'
+  field.required = true
+  label.append(labelText, field)
+
+  const error = document.createElement('div')
+  error.className = 'oe-source-editor__error'
+  error.setAttribute('role', 'alert')
+  error.hidden = true
+
+  const actions = document.createElement('div')
+  actions.className = 'oe-source-editor__actions'
+
+  const cancel = document.createElement('button')
+  cancel.type = 'button'
+  cancel.className = 'oe-source-editor__button oe-source-editor__button--secondary'
+  cancel.textContent = 'Cancel'
+
+  const submit = document.createElement('button')
+  submit.type = 'submit'
+  submit.className = 'oe-source-editor__button oe-source-editor__button--primary'
+  submit.textContent = 'Insert'
+
+  actions.append(cancel, submit)
+  panel.append(title, label, error, actions)
+  root.append(backdrop, panel)
+  wrapper.appendChild(root)
+
+  const layer = createPluginLayer(wrapper, signal)
+  /** @type {SourceEditorSurface} */
+  let surface
+  const destroy = () => {
+    const active = activeEditors.get(wrapper)
+    if (active?.surface === surface) active.close()
+    root.remove()
+    if (owned?.get(kind) === surface) owned.delete(kind)
+    if (owned?.size === 0) surfaces.delete(wrapper)
+  }
+  surface = {
+    root,
+    backdrop,
+    panel,
+    title,
+    labelText,
+    field,
+    error,
+    cancel,
+    submit,
+    signal,
+    layer,
+    destroy,
+  }
+  owned.set(kind, surface)
+  signal.addEventListener('abort', destroy, { once: true })
+  return surface
+}
+
+/**
+ * @param {SourceEditorSurface} surface
+ * @param {boolean} visible
+ * @returns {void}
+ */
+function setSurfaceVisible(surface, visible) {
+  surface.root.classList.toggle('oe-source-editor--preloaded', !visible)
+  surface.root.setAttribute('aria-hidden', String(!visible))
+  surface.root.inert = !visible
+}

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

@@ -13,23 +13,23 @@ import { normalizeCarouselData } from '../../../shared/carouselData.js'
 import { setSanitizedRawHtml } from '../../../shared/sanitize/sanitizeRawHtml.js'
 import { setSafeUrlAttribute } from '../../../shared/sanitize/sanitizeUrl.js'
 
-const styles = new URL('./styles.css', import.meta.url).href
+const styles = new URL('./styles.css', import.meta.url).href
 
-/**
- * Create the mixed-media carousel renderer and own its Carousel instances.
- * @param {string} classPrefix
- * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} locale
- * @returns {import('../../types').BlockRenderer<import('../../types').CarouselBlock>}
- */
-export function createCarouselRenderer(classPrefix, locale) {
+/**
+ * Create the mixed-media carousel renderer and own its Carousel instances.
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').CarouselBlock>}
+ */
+export function createCarouselRenderer(classPrefix, locale) {
   const p = `${classPrefix}-carousel-block`
   /** @type {WeakMap<HTMLElement, Carousel>} */
-  const instances = new WeakMap()
-  /** @param {string} key @param {string} fallback */
-  const t = (key, fallback) => {
-    const value = locale[`renderer.carousel.${key}`]
-    return typeof value === 'string' ? value : fallback
-  }
+  const instances = new WeakMap()
+  /** @param {string} key @param {string} fallback */
+  const t = (key, fallback) => {
+    const value = locale[`renderer.carousel.${key}`]
+    return typeof value === 'string' ? value : fallback
+  }
 
   return {
     type: 'carousel',
@@ -41,10 +41,11 @@ export function createCarouselRenderer(classPrefix, locale) {
       root.className = p
       root.setAttribute('aria-label', t('label', 'Content carousel'))
       if (data.options.aspectRatio && data.options.aspectRatio !== 'auto') {
+        root.classList.add(`${p}--fixed-ratio`)
         root.style.aspectRatio = data.options.aspectRatio
       }
 
-      const slides = data.slides.map(slide => {
+      const slides = data.slides.map(slide => {
         const content = () => {
           const figure = document.createElement('figure')
           figure.className = `${p}__slide`
@@ -80,14 +81,14 @@ export function createCarouselRenderer(classPrefix, locale) {
           ...(slide.type === 'image' && slide.src ? { thumb: slide.src } : {}),
           ...(slide.type === 'video' && slide.poster ? { thumb: slide.poster } : {}),
           meta: { id: slide.id, type: slide.type },
-        }
-      })
-
-      // Preserve mode may intentionally pass a normalized empty carousel.
-      // Avoid constructing a runtime instance with no navigable slides.
-      if (!slides.length) return root
-
-      const plugins = [createKeyboard({ scope: 'container' }), createSwipe({ mouse: true })]
+        }
+      })
+
+      // Preserve mode may intentionally pass a normalized empty carousel.
+      // Avoid constructing a runtime instance with no navigable slides.
+      if (!slides.length) return root
+
+      const plugins = [createKeyboard({ scope: 'container' }), createSwipe({ mouse: true })]
       if (data.options.navigation) plugins.push(createArrows())
       if (data.options.pagination) plugins.push(createDots())
       if (data.options.thumbnails) plugins.push(createThumbnails())

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

@@ -1,7 +1,13 @@
 .editor-carousel-block { position: relative; width: 100%; }
-.editor-carousel-block .carousel__viewport { border-radius: var(--er-radius); background: var(--er-surface); }
+.editor-carousel-block .carousel__viewport { border-radius: var(--er-radius); }
 .editor-carousel-block__slide { display: grid; place-items: center; box-sizing: border-box; width: 100%; min-height: 16rem; margin: 0; }
-.editor-carousel-block__slide img, .editor-carousel-block__slide video { display: block; width: 100%; height: 100%; max-height: 36rem; object-fit: contain; }
+.editor-carousel-block__slide img, .editor-carousel-block__slide video { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
+.editor-carousel-block--fixed-ratio .carousel__viewport { height: 100%; background: var(--er-surface); }
+.editor-carousel-block--fixed-ratio .carousel,
+.editor-carousel-block--fixed-ratio .carousel__track,
+.editor-carousel-block--fixed-ratio .editor-carousel-block__slide { height: 100%; min-height: 0; }
+.editor-carousel-block--fixed-ratio .editor-carousel-block__slide img,
+.editor-carousel-block--fixed-ratio .editor-carousel-block__slide video { height: 100%; max-height: 100%; object-fit: contain; }
 .editor-carousel-block__html { box-sizing: border-box; width: 100%; padding: 1rem; }
 .editor-carousel-block figcaption { box-sizing: border-box; width: 100%; padding: .625rem .875rem; color: var(--er-text-2); font-size: .8125rem; text-align: center; }
 .editor-carousel-block .carousel__arrow:focus-visible, .editor-carousel-block .carousel__dot:focus-visible, .editor-carousel-block .carousel__thumb:focus-visible { outline: 2px solid var(--er-accent); outline-offset: 2px; }