@shelamkoff/rector 1.0.0

package/dist/plugins/image/image.css

@@ -0,0 +1,559 @@
+.oe-image {
+  border-radius: 0.5rem;
+  overflow-anchor: none;
+  text-align: center;
+  outline: none;
+}
+
+.oe-image--loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.oe-image--filled {
+  /* filled state */
+}
+
+/* ── Select state ──────────────────────────────────────────────────────────── */
+
+.oe-image__select {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 2rem;
+  border: 2px dashed var(--oe-border, #2e2e35);
+  border-radius: 0.5rem;
+  text-align: center;
+  transition: border-color 0.2s;
+}
+
+.oe-image__select:hover,
+.oe-image__select--dragover {
+  border-color: var(--oe-accent, #4357b4);
+}
+
+.oe-image__select-icon {
+  color: var(--oe-text-3, #5a5a64);
+}
+
+/* Dropzone text */
+.oe-image__select-text {
+  font-size: 0.8125rem;
+  color: var(--oe-text-3, #5a5a64);
+  line-height: 1.5;
+}
+
+.oe-image__select-link {
+  background: none; border: none; padding: 0; font: inherit; outline: none;
+  color: var(--oe-accent, #4357b4);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.oe-image__select-link:hover {
+  color: var(--oe-accent, #4357b4);
+  text-decoration: underline;
+}
+
+.oe-image__select-actions {
+  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem;
+}
+.oe-image__select-action {
+  display: inline-flex; align-items: center; gap: 0.375rem;
+  padding: 0.375rem 0.625rem; border: 1px solid var(--oe-border);
+  border-radius: 0.375rem; background: var(--oe-surface-2); color: var(--oe-text-2);
+  font: inherit; font-size: 0.75rem; cursor: pointer;
+}
+.oe-image__select-action:hover { color: var(--oe-text-1); border-color: var(--oe-border-hover); }
+.oe-image__select-action svg { width: 14px; height: 14px; }
+
+/* Action bar drill-down view */
+.oe-image__actions-view {
+  display: contents;
+}
+
+.oe-image__action-chevron {
+  margin-left: 0.125rem;
+  opacity: 0.5;
+}
+
+/* ── Image container ───────────────────────────────────────────────────────── */
+
+.oe-image__image-container {
+  position: relative;
+  line-height: 0;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  overflow-anchor: none;
+  width: fit-content;
+}
+
+.oe-image__image {
+  width: 100%;
+  display: block;
+  border-radius: 0.375rem;
+}
+
+/* ── Caption ───────────────────────────────────────────────────────────────── */
+
+.oe-image__caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0.25rem 0.5rem;
+  background: var(--oe-image-caption-bg, rgba(0, 0, 0, 0.6));
+  color: var(--oe-image-caption-text, #fff);
+  font-size: 0.75rem;
+  outline: none;
+  min-height: 1.25rem;
+  max-height: 3rem;
+  overflow-y: auto;
+  line-height: 1.3;
+  text-align: center;
+}
+.oe-image__caption[data-empty="true"]::before {
+  content: attr(data-placeholder);
+  color: var(--oe-text-3, #908c8c);
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+.oe-image__caption:focus::before,
+.oe-image__caption:not(:empty)::before {
+  display: none;
+}
+.oe-image__caption:focus {
+  background: var(--oe-image-caption-bg, rgba(0, 0, 0, 0.6));
+}
+
+/* ── Toggle styles ─────────────────────────────────────────────────────────── */
+
+.oe-image--with-border .oe-image__image {
+  border: 3px solid var(--oe-border, #2e2e35);
+}
+
+/* Expanded: image breaks out of editor content width */
+.oe-image--expanded {
+  margin-left: -2rem;
+  margin-right: -2rem;
+}
+.oe-image--expanded .oe-image__image {
+  width: 100%;
+  border-radius: 0;
+}
+
+.oe-image--with-bg .oe-image__image-container {
+  background: var(--oe-surface, #25252b);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.oe-image--with-bg .oe-image__image {
+  max-width: 60%;
+  margin: 0 auto;
+}
+
+/* ── Action bar (filled state) ─────────────────────────────────────────────── */
+
+.oe-image__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  margin-top: 0.5rem;
+  background: var(--oe-surface, #0e0e10);
+  border: 1px solid var(--oe-border, #1a1a1f);
+  border-radius: 0.5rem;
+  padding: 0.1875rem;
+}
+
+.oe-image__action-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3125rem;
+  padding: 0.3125rem 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--oe-text-1, #fff);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s;
+  white-space: nowrap;
+  line-height: 1;
+  isolation: isolate;
+  font-family: inherit;
+}
+.oe-image__action-btn::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 0.375rem;
+  background: var(--oe-accent, #4357b4);
+  transform: scale(0);
+  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+  z-index: -1;
+  backface-visibility: hidden;
+}
+.oe-image__action-btn:hover::before {
+  transform: scale(1);
+}
+.oe-image__action-btn--danger { color: var(--oe-danger, #f87171); }
+.oe-image__action-btn--danger::before { background: var(--oe-danger, #f87171); }
+.oe-image__action-btn--danger:hover { color: var(--oe-text-on-accent, #fff); }
+.oe-image__action-btn svg {
+  flex-shrink: 0;
+}
+
+.oe-image__actions-sep {
+  width: 1px;
+  height: 1.125rem;
+  background: var(--oe-border, #1a1a1f);
+  margin: 0 0.0625rem;
+  flex-shrink: 0;
+}
+
+/* ── Settings dropdown ─────────────────────────────────────────────────────── */
+
+.oe-image__dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.oe-image__dropdown-panel {
+  display: none;
+  position: absolute;
+  left: 0;
+  width: 20rem;
+  max-height: 24rem;
+  overflow-y: auto;
+  background: var(--oe-card, #111);
+  border: 1px solid var(--oe-border-hover, #2a2a2a);
+  border-radius: 8px;
+  box-shadow: var(--oe-toolbar-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
+  padding: 12px;
+  z-index: 100;
+}
+
+.oe-image__dropdown--open .oe-image__dropdown-panel {
+  display: block;
+}
+
+/* ── Style form ────────────────────────────────────────────────────────────── */
+
+.oe-image__style-form {
+  min-width: 0;
+}
+
+.oe-image__style-group {
+  margin-bottom: 10px;
+}
+.oe-image__style-group:last-child {
+  margin-bottom: 0;
+}
+
+.oe-image__style-group-title {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--oe-text-3, #6e6e78);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 6px;
+}
+
+.oe-image__style-row {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.oe-image__style-row:last-child {
+  margin-bottom: 0;
+}
+
+.oe-image__style-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--oe-text-2, #9898a0);
+  white-space: nowrap;
+}
+.oe-image__style-label > span {
+  min-width: 36px;
+  flex-shrink: 0;
+}
+
+.oe-image__style-input {
+  width: 100%;
+  min-width: 0;
+  height: 22px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 4px;
+  background: var(--oe-input-bg, #2c2c33);
+  color: var(--oe-text-1, #e8e8ec);
+  font-size: 11px;
+  font-family: inherit;
+  outline: none;
+  transition: background 0.12s;
+}
+.oe-image__style-input:hover {
+  background: var(--oe-input-bg-hover, #353540);
+}
+.oe-image__style-input:focus {
+  background: var(--oe-input-bg-hover, #353540);
+  outline: none;
+}
+.oe-image__style-input:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.oe-image__style-input::placeholder {
+  color: var(--oe-text-3, #5a5a64);
+}
+
+/* ── Custom select ─────────────────────────────────────────────────────────── */
+
+.oe-image__custom-select {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+
+.oe-image__custom-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 22px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 4px;
+  background: var(--oe-input-bg, #2c2c33);
+  color: var(--oe-text-1, #e8e8ec);
+  font-size: 11px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.12s;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.oe-image__custom-select-trigger:hover {
+  background: var(--oe-input-bg-hover, #353540);
+}
+
+.oe-image__custom-select--open .oe-image__custom-select-trigger {
+  background: var(--oe-input-bg-hover, #353540);
+}
+
+.oe-image__custom-select-arrow {
+  margin-left: 0.25rem;
+  flex-shrink: 0;
+  opacity: 0.4;
+  transition: transform 0.15s;
+}
+
+.oe-image__custom-select--open .oe-image__custom-select-arrow {
+  transform: rotate(180deg);
+}
+
+.oe-image__custom-select-options {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--oe-card, #111);
+  border: 1px solid var(--oe-border-hover, #2a2a2a);
+  border-radius: 6px;
+  box-shadow: var(--oe-toolbar-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
+  z-index: 110;
+  padding: 3px;
+  max-height: 10rem;
+  overflow-y: auto;
+}
+
+.oe-image__custom-select--open .oe-image__custom-select-options {
+  display: block;
+}
+
+.oe-image__custom-select-option {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+  border-radius: 4px;
+  color: var(--oe-text-1, #e8e8ec);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.oe-image__custom-select-option:hover {
+  background: var(--oe-input-bg, #2c2c33);
+  color: var(--oe-text-1, #e8e8ec);
+}
+
+.oe-image__custom-select-option--selected {
+  color: var(--oe-accent-text, #a78bfa);
+  background: rgba(67, 87, 180, 0.08);
+}
+
+.oe-image__custom-select-check {
+  display: flex;
+  align-items: center;
+  color: var(--oe-accent-text, #a78bfa);
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+
+/* ── Color picker (native) ─────────────────────────────────────────────────── */
+
+.oe-image__style-color {
+  width: 22px;
+  height: 22px;
+  min-width: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: none;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+}
+.oe-image__style-color::-webkit-color-swatch-wrapper {
+  padding: 1px;
+}
+.oe-image__style-color::-webkit-color-swatch {
+  border: none;
+  border-radius: 6px;
+}
+
+/* ── Switch (toggle) ───────────────────────────────────────────────────────── */
+
+.oe-image__switch-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.oe-image__switch-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--oe-text-2, #9898a0);
+}
+
+.oe-image__switch {
+  position: relative;
+  width: 28px;
+  height: 16px;
+  border: none;
+  border-radius: 8px;
+  background: var(--oe-border-hover, #2a2a2a);
+  cursor: pointer;
+  transition: background 0.2s;
+  padding: 0;
+  outline: none;
+}
+.oe-image__switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--oe-text-3, #908c8c);
+  transition: transform 0.2s, background 0.2s;
+}
+.oe-image__switch--active {
+  background: var(--oe-accent, #4357b4);
+}
+.oe-image__switch--active::after {
+  transform: translateX(12px);
+  background: #fff;
+}
+
+/* ── Light theme ───────────────────────────────────────────────────────────── */
+
+.oe-theme-light .oe-image__select {
+  border-color: var(--oe-border, #e0e0e0);
+}
+
+.oe-theme-light .oe-image__select:hover,
+.oe-theme-light .oe-image__select--dragover {
+  border-color: var(--oe-accent, #4357b4);
+}
+
+.oe-theme-light .oe-image__select-action-btn:hover {
+  background: var(--oe-surface-hover, #f0f0f0);
+}
+
+.oe-theme-light .oe-image__actions {
+  background: var(--oe-surface, #fafafa);
+  border-color: var(--oe-border, #e0e0e0);
+}
+
+.oe-theme-light .oe-image__action-btn {
+  color: var(--oe-text-1, #1a1a1a);
+}
+
+.oe-theme-light .oe-image__dropdown-panel {
+  background: var(--oe-card, #fff);
+  border-color: var(--oe-border-hover, #d4d4d4);
+  box-shadow: var(--oe-toolbar-shadow, 0 8px 24px rgba(0, 0, 0, 0.1));
+}
+
+.oe-theme-light .oe-image__style-input {
+  background: var(--oe-input-bg, #f0f0f0);
+  color: var(--oe-text-1, #1a1a1a);
+}
+.oe-theme-light .oe-image__style-input:hover,
+.oe-theme-light .oe-image__style-input:focus {
+  background: var(--oe-input-bg-hover, #e8e8e8);
+}
+
+.oe-theme-light .oe-image__custom-select-trigger {
+  background: var(--oe-input-bg, #f0f0f0);
+  color: var(--oe-text-1, #1a1a1a);
+}
+.oe-theme-light .oe-image__custom-select-trigger:hover,
+.oe-theme-light .oe-image__custom-select--open .oe-image__custom-select-trigger {
+  background: var(--oe-input-bg-hover, #e8e8e8);
+}
+
+.oe-theme-light .oe-image__custom-select-options {
+  background: var(--oe-card, #fff);
+  border-color: var(--oe-border-hover, #d4d4d4);
+  box-shadow: var(--oe-toolbar-shadow, 0 8px 24px rgba(0, 0, 0, 0.1));
+}
+
+.oe-theme-light .oe-image__custom-select-option:hover {
+  background: var(--oe-input-bg, #f0f0f0);
+}
+
+.oe-theme-light .oe-image__switch {
+  background: var(--oe-border, #e5e5e5);
+}
+
+.oe-theme-light .oe-image__switch::after {
+  background: #fff;
+}

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

@@ -0,0 +1,129 @@
+import type {} from './locale/keys.js'
+/**
+ * @typedef {{ url: string, alt?: string }} ImageSourceResult
+ * @typedef {(file: File, context: { signal: AbortSignal }) => Promise<ImageSourceResult>} ImageUpload
+ * @typedef {(context: { signal: AbortSignal }) => Promise<ImageSourceResult | null>} ImageSourceHandler
+ * @typedef {{ icon?: string, label: string, handler: ImageSourceHandler }} ImageSourceAction
+ *
+ * @typedef {Object} ImageConfig
+ * @property {ImageUpload} [uploadFile] Uploads a browser file. Without this callback the plugin reads the file into a data URL stored in the document.
+ * @property {ImageSourceAction[]} [actions] Additional application-owned image sources. `icon` is trusted application markup; never pass user-authored HTML.
+ * @property {boolean} [injectStyles=true] Whether the editor should load the built-in image stylesheet.
+ * @property {string} [css] Additional stylesheet URL, or the replacement URL when `injectStyles` is `false`.
+ */
+/**
+ * Block plugin for images. Public surface implements `BlockPlugin`.
+ * Internal logic is split across:
+ *  - `state.js` — per-block state container (replaces module WeakMap)
+ *  - `uploader.js` — file upload pipeline (HTTP or data-URL fallback)
+ *  - `view-empty.js`/`view-filled.js` — DOM rendering for the two states
+ *  - `settings.js` — settings dropdown form
+ *  - `styles.js` — inline style application
+ *
+ * @extends {BlockPluginAbstract<ImageConfig>}
+ */
+export class Image extends BlockPluginAbstract<ImageConfig> {
+    static isTextBlock: boolean;
+    static styles: string[];
+    /**
+     * Create an Image instance with the supplied consumer configuration.
+     * @param {ImageConfig} [config]
+     */
+    constructor(config?: ImageConfig);
+    type: string;
+    icon: string;
+    inlineTools: boolean;
+    pasteConfig: {
+        files: string[];
+        patterns: RegExp[];
+    };
+    /**
+     * Return the localized toolbox label for this block.
+     * @returns {string}
+     */
+    get title(): string;
+    /**
+     * Create the editable DOM owned by this block instance.
+     * @param {Record<string, unknown>} data
+     * @param {import('../../core/types.js').BlockMutationContext} context
+     * @returns {HTMLElement}
+     */
+    render(data: Record<string, unknown>, context: import("../../core/types.js").BlockMutationContext): HTMLElement;
+    /**
+     * Serialize the current block DOM into document data.
+     * @param {HTMLElement} element
+     * @returns {Record<string, unknown>}
+     */
+    save(element: HTMLElement): Record<string, unknown>;
+    /**
+     * 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 text that can initialize another block type.
+     * @param {HTMLElement} element
+     * @returns {Record<string, unknown>}
+     */
+    exportData(element: HTMLElement): Record<string, unknown>;
+    /**
+     * Handle supported pasted content for this block.
+     * @param {import('../../types.js').PasteEvent} event
+     * @returns {Record<string, unknown> | null}
+     */
+    onPaste(event: import("../../types.js").PasteEvent): Record<string, unknown> | null;
+    /**
+     * Keep a file paste inside one undo transaction until its upload finishes.
+     * @param {HTMLElement} element
+     * @returns {Promise<void>}
+     */
+    waitForPaste(element: HTMLElement): Promise<void>;
+    /**
+     * Release listeners and resources owned by this block element.
+     * @param {HTMLElement} element
+     * @returns {void}
+     */
+    destroy(element: HTMLElement): void;
+    #private;
+}
+export type ImageSourceResult = {
+    url: string;
+    alt?: string;
+};
+export type ImageUpload = (file: File, context: {
+    signal: AbortSignal;
+}) => Promise<ImageSourceResult>;
+export type ImageSourceHandler = (context: {
+    signal: AbortSignal;
+}) => Promise<ImageSourceResult | null>;
+export type ImageSourceAction = {
+    icon?: string;
+    label: string;
+    handler: ImageSourceHandler;
+};
+export type ImageConfig = {
+    /**
+     * Uploads a browser file. Without this callback the plugin reads the file into a data URL stored in the document.
+     */
+    uploadFile?: ImageUpload;
+    /**
+     * Additional application-owned image sources. `icon` is trusted application markup; never pass user-authored HTML.
+     */
+    actions?: ImageSourceAction[];
+    /**
+     * Whether the editor should load the built-in image stylesheet.
+     */
+    injectStyles?: boolean;
+    /**
+     * Additional stylesheet URL, or the replacement URL when `injectStyles` is `false`.
+     */
+    css?: string;
+};
+import { BlockPluginAbstract } from '../BlockPluginAbstract.js';