@shelamkoff/rector 1.0.1 → 1.0.3

package/dist/plugins/gallery/locale/en.d.ts

@@ -6,6 +6,14 @@ declare const _default: {
     'plugin.gallery.dropzone': string;
     'plugin.gallery.dropzoneUpload': string;
     'plugin.gallery.dropzoneText': string;
+    'plugin.gallery.dropzoneUrlPrefix': string;
+    'plugin.gallery.dropzoneUrl': string;
+    'plugin.gallery.urlEditorTitle': string;
+    'plugin.gallery.urlEditorLabel': string;
+    'plugin.gallery.urlEditorPlaceholder': string;
+    'plugin.gallery.sourceSubmit': string;
+    'plugin.gallery.sourceCancel': string;
+    'plugin.gallery.invalidUrl': string;
     'plugin.gallery.addMore': string;
     'plugin.gallery.delete': string;
     'plugin.gallery.deleteAll': string;

package/dist/plugins/gallery/locale/en.js

@@ -6,6 +6,14 @@ export default {
   'plugin.gallery.dropzone': 'or drag and drop files here',
   'plugin.gallery.dropzoneUpload': 'Upload',
   'plugin.gallery.dropzoneText': 'images from your device or drag and drop them here',
+  'plugin.gallery.dropzoneUrlPrefix': 'or',
+  'plugin.gallery.dropzoneUrl': 'insert by URL',
+  'plugin.gallery.urlEditorTitle': 'Insert image by URL',
+  'plugin.gallery.urlEditorLabel': 'Image URL',
+  'plugin.gallery.urlEditorPlaceholder': 'https://example.com/image.jpg',
+  'plugin.gallery.sourceSubmit': 'Insert',
+  'plugin.gallery.sourceCancel': 'Cancel',
+  'plugin.gallery.invalidUrl': 'Enter a valid image URL.',
   'plugin.gallery.addMore': 'Add more',
   'plugin.gallery.delete': 'Delete',
   'plugin.gallery.deleteAll': 'Delete all',
@@ -30,6 +38,6 @@ export default {
   'plugin.gallery.layoutAuto': 'Automatic layout',
   'plugin.gallery.layoutMasonry': 'Masonry layout',
   'plugin.gallery.layoutTriptych': 'Triptych layout',
-  'plugin.gallery.layoutTemplate': 'Layout template',
-  'plugin.gallery.emptyReadonly': 'No images',
-}
+  'plugin.gallery.layoutTemplate': 'Layout template',
+  'plugin.gallery.emptyReadonly': 'No images',
+}

package/dist/plugins/gallery/locale/ru.d.ts

@@ -6,6 +6,14 @@ declare const _default: {
     'plugin.gallery.dropzone': string;
     'plugin.gallery.dropzoneUpload': string;
     'plugin.gallery.dropzoneText': string;
+    'plugin.gallery.dropzoneUrlPrefix': string;
+    'plugin.gallery.dropzoneUrl': string;
+    'plugin.gallery.urlEditorTitle': string;
+    'plugin.gallery.urlEditorLabel': string;
+    'plugin.gallery.urlEditorPlaceholder': string;
+    'plugin.gallery.sourceSubmit': string;
+    'plugin.gallery.sourceCancel': string;
+    'plugin.gallery.invalidUrl': string;
     'plugin.gallery.addMore': string;
     'plugin.gallery.delete': string;
     'plugin.gallery.deleteAll': string;

package/dist/plugins/gallery/locale/ru.js

@@ -6,6 +6,14 @@ export default {
   'plugin.gallery.dropzone': 'или перетащите файлы сюда',
   'plugin.gallery.dropzoneUpload': 'Загрузите',
   'plugin.gallery.dropzoneText': 'изображения с устройства или перетащите их сюда',
+  'plugin.gallery.dropzoneUrlPrefix': 'или',
+  'plugin.gallery.dropzoneUrl': 'вставьте по URL',
+  'plugin.gallery.urlEditorTitle': 'Вставка изображения по URL',
+  'plugin.gallery.urlEditorLabel': 'URL изображения',
+  'plugin.gallery.urlEditorPlaceholder': 'https://example.com/image.jpg',
+  'plugin.gallery.sourceSubmit': 'Вставить',
+  'plugin.gallery.sourceCancel': 'Отмена',
+  'plugin.gallery.invalidUrl': 'Введите корректный URL изображения.',
   'plugin.gallery.addMore': 'Добавить ещё',
   'plugin.gallery.delete': 'Удалить',
   'plugin.gallery.deleteAll': 'Удалить всё',
@@ -30,6 +38,6 @@ export default {
   'plugin.gallery.layoutAuto': 'Автоматический макет',
   'plugin.gallery.layoutMasonry': 'Кладочный макет',
   'plugin.gallery.layoutTriptych': 'Триптих',
-  'plugin.gallery.layoutTemplate': 'Шаблон макета',
-  'plugin.gallery.emptyReadonly': 'Нет изображений',
-}
+  'plugin.gallery.layoutTemplate': 'Шаблон макета',
+  'plugin.gallery.emptyReadonly': 'Нет изображений',
+}

package/dist/plugins/gallery/settings.js

@@ -153,20 +153,25 @@ function buildStylesGroup(wrapper, state, deps, signal) {
   const group = createGroup(deps.t('styles', 'Styles'))
   const styles = state.data.styles
 
-  const makeStyleInput = (/** @type {string} */ key, /** @type {string} */ value) => {
-    const input = document.createElement('input')
-    input.type = 'text'
-    input.className = CSS.styleInput
-    input.value = value || ''
+  const makeStyleInput = (/** @type {string} */ key, /** @type {string} */ value) => {
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.className = CSS.styleInput
+    input.value = value || ''
     input.addEventListener('input', () => {
       deps.mutate(() => {
         if (input.value) styles[key] = input.value
         else delete styles[key]
-        applyGalleryStyles(wrapper, state)
-      })
-    }, { signal })
-    return input
-  }
+        applyGalleryStyles(wrapper, state)
+      })
+    }, { signal })
+    if (key === 'gap') {
+      input.addEventListener('change', () => {
+        if (state.data.layout === 'masonry') deps.reRender()
+      }, { signal })
+    }
+    return input
+  }
 
   const makeRow = (/** @type {string} */ label, /** @type {HTMLElement} */ input) => {
     const row = document.createElement('div')

package/dist/plugins/gallery/view-empty.d.ts

@@ -3,6 +3,7 @@
  * @property {(key: string, fallback: string) => string} t
  * @property {boolean} readOnly
  * @property {() => void} onUploadClick
+ * @property {() => void} onOpenUrlEditor
  * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null> }>} customActions
  * @property {(handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null>) => Promise<void>} runCustomAction
  * @property {(files: File[]) => void} onFilesDropped
@@ -21,6 +22,7 @@ export type EmptyViewDeps = {
     t: (key: string, fallback: string) => string;
     readOnly: boolean;
     onUploadClick: () => void;
+    onOpenUrlEditor: () => void;
     customActions: Array<{
         icon?: string;
         label: string;

package/dist/plugins/gallery/view-empty.js

@@ -1,13 +1,14 @@
-import { renderDropzone } from '../shared/dropzone.js'
-import { isSupportedImageFile } from '../shared/fileInput.js'
+import { renderDropzone } from '../shared/dropzone.js'
+import { isSupportedImageFile } from '../shared/fileInput.js'
 import { CSS } from './css.js'
 import { ICON_SELECT } from './icons.js'
 
 /**
- * @typedef {Object} EmptyViewDeps
- * @property {(key: string, fallback: string) => string} t
- * @property {boolean} readOnly
+ * @typedef {Object} EmptyViewDeps
+ * @property {(key: string, fallback: string) => string} t
+ * @property {boolean} readOnly
  * @property {() => void} onUploadClick
+ * @property {() => void} onOpenUrlEditor
  * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null> }>} customActions
  * @property {(handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null>) => Promise<void>} runCustomAction
  * @property {(files: File[]) => void} onFilesDropped
@@ -17,11 +18,11 @@ import { ICON_SELECT } from './icons.js'
  * Render the empty-state dropzone for the Gallery plugin.
  * Replaces wrapper contents and removes the `filled` class.
  *
- * @param {HTMLElement} wrapper
- * @param {import('./state.js').GalleryState} state
- * @param {EmptyViewDeps} deps
- * @returns {void}
- */
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {EmptyViewDeps} deps
+ * @returns {void}
+ */
 export function renderEmptyView(wrapper, state, deps) {
   state.resetTransient()
 
@@ -38,18 +39,23 @@ export function renderEmptyView(wrapper, state, deps) {
     filled: CSS.filled,
   }, {
     iconHtml: ICON_SELECT,
-    uploadText: deps.t('dropzoneUpload', 'Upload'),
-    afterText: deps.t('dropzoneText', 'images from your device or drag and drop them here'),
-    readOnly: deps.readOnly,
-    emptyText: deps.t('emptyReadonly', 'No images'),
+    uploadText: deps.t('dropzoneUpload', 'Upload'),
+    afterText: deps.t('dropzoneText', 'images from your device or drag and drop them here'),
+    readOnly: deps.readOnly,
+    emptyText: deps.t('emptyReadonly', 'No images'),
     onUploadClick: deps.onUploadClick,
+    inlineActions: [{
+      prefix: deps.t('dropzoneUrlPrefix', 'or'),
+      label: deps.t('dropzoneUrl', 'insert by URL'),
+      onSelect: deps.onOpenUrlEditor,
+    }],
     actions: deps.customActions.map(action => ({
       icon: action.icon,
       label: action.label,
       onSelect: () => { void deps.runCustomAction(action.handler) },
     })),
     onDrop: (dt) => {
-      const files = [...(dt.files || [])].filter(isSupportedImageFile)
+      const files = [...(dt.files || [])].filter(isSupportedImageFile)
       if (files.length > 0) deps.onFilesDropped(files)
     },
   })

package/dist/plugins/gallery/view-filled.d.ts

@@ -9,7 +9,7 @@
  * @property {(operation: () => void) => void} mutate
  * @property {(files: File[]) => void} onFilesDropped
  * @property {() => void} onTriggerFileInput
- * @property {() => void} onPromptUrl
+ * @property {() => void} onOpenUrlEditor
  * @property {() => void} onDeleteAll
  * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null> }>} customActions
  * @property {(handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null>) => Promise<void>} runCustomAction
@@ -34,7 +34,7 @@ export type FilledViewDeps = {
     mutate: (operation: () => void) => void;
     onFilesDropped: (files: File[]) => void;
     onTriggerFileInput: () => void;
-    onPromptUrl: () => void;
+    onOpenUrlEditor: () => void;
     onDeleteAll: () => void;
     customActions: Array<{
         icon?: string;

package/dist/plugins/gallery/view-filled.js

@@ -10,14 +10,16 @@ import {
 } from './layout.js'
 import { applyGalleryStyles } from './styles.js'
 import { buildSettingsPanel } from './settings.js'
-import {
-  attachExternalDrop, createEmptySlot, createFilledSlot, createOverflowItem,
-} from './slot.js'
+import {
+  attachExternalDrop, createEmptySlot, createFilledSlot, createOverflowItem,
+} from './slot.js'
+import { createPluginLayer } from '../shared/layer.js'
+import { mountGalleryMasonry } from '../../shared/galleryMasonry.js'
 
 /**
- * @typedef {Object} FilledViewDeps
- * @property {(key: string, fallback: string) => string} t
- * @property {boolean} readOnly
+ * @typedef {Object} FilledViewDeps
+ * @property {(key: string, fallback: string) => string} t
+ * @property {boolean} readOnly
  * @property {() => void} syncCaptions
  * @property {() => import('./state.js').GalleryState | undefined} getState
  * @property {() => void} reRender
@@ -25,7 +27,7 @@ import {
  * @property {(operation: () => void) => void} mutate
  * @property {(files: File[]) => void} onFilesDropped
  * @property {() => void} onTriggerFileInput
- * @property {() => void} onPromptUrl
+ * @property {() => void} onOpenUrlEditor
  * @property {() => void} onDeleteAll
  * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null> }>} customActions
  * @property {(handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null>) => Promise<void>} runCustomAction
@@ -35,11 +37,11 @@ import {
  * Render the filled-state Gallery view: template grid (or masonry) +
  * optional overflow row + action bar.
  *
- * @param {HTMLElement} wrapper
- * @param {import('./state.js').GalleryState} state
- * @param {FilledViewDeps} deps
- * @returns {void}
- */
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {FilledViewDeps} deps
+ * @returns {void}
+ */
 export function renderFilledView(wrapper, state, deps) {
   state.resetTransient()
   wrapper.innerHTML = ''
@@ -54,7 +56,7 @@ export function renderFilledView(wrapper, state, deps) {
   }
 
   applyGalleryStyles(wrapper, state)
-  if (!deps.readOnly) wrapper.appendChild(renderActions(wrapper, state, deps, signal))
+  if (!deps.readOnly) wrapper.appendChild(renderActions(wrapper, state, deps, signal))
 }
 
 /**
@@ -65,21 +67,27 @@ export function renderFilledView(wrapper, state, deps) {
  * @param {FilledViewDeps} deps
  * @param {AbortSignal} signal
  */
-function renderMasonry(wrapper, state, deps, signal) {
-  const grid = document.createElement('div')
-  grid.className = `${CSS.grid} eg--masonry`
-
-  const slotDeps = makeSlotDeps(deps)
-
-  state.data.images.forEach((img, i) => {
-    const slot = createFilledSlot(img, i, signal, slotDeps)
-    slot.dataset.index = String(i)
-    grid.appendChild(slot)
-  })
-
+function renderMasonry(wrapper, state, deps, signal) {
+  const grid = document.createElement('div')
+  grid.className = `${CSS.grid} eg--masonry`
+
+  const slotDeps = makeSlotDeps(deps)
+  /** @type {HTMLElement[]} */
+  const slots = []
+
+  state.data.images.forEach((img, i) => {
+    const slot = createFilledSlot(img, i, signal, slotDeps)
+    slot.dataset.index = String(i)
+    const image = /** @type {HTMLImageElement | null} */ (slot.querySelector(`.${CSS.slotImg}`))
+    if (image) image.loading = 'eager'
+    slots.push(slot)
+    grid.appendChild(slot)
+  })
+
   if (!deps.readOnly) attachExternalDrop(grid, signal, deps.onFilesDropped)
-  wrapper.appendChild(grid)
-}
+  wrapper.appendChild(grid)
+  mountGalleryMasonry(grid, slots, { signal })
+}
 
 /**
  * Slot-based: fixed template + optional overflow row.
@@ -125,20 +133,20 @@ function renderSlotBased(wrapper, state, deps, signal) {
       const slot = createFilledSlot(img, idx, signal, slotDeps)
       slot.dataset.slot = String(idx)
 
-      const imgEl = /** @type {HTMLImageElement | null} */ (slot.querySelector(`.${CSS.slotImg}`))
-      if (imgEl) {
-        let ready = false
-        const onReady = () => {
-          if (ready) return
-          ready = true
-          orientations[idx] = classifyOrientation(imgEl.naturalWidth, imgEl.naturalHeight)
-          loadedCount++
-          if (loadedCount >= slotCount) onAllLoaded()
-        }
-        imgEl.addEventListener('load', onReady, { once: true, signal })
-        imgEl.addEventListener('error', onReady, { once: true, signal })
-        if (imgEl.complete) queueMicrotask(onReady)
-      }
+      const imgEl = /** @type {HTMLImageElement | null} */ (slot.querySelector(`.${CSS.slotImg}`))
+      if (imgEl) {
+        let ready = false
+        const onReady = () => {
+          if (ready) return
+          ready = true
+          orientations[idx] = classifyOrientation(imgEl.naturalWidth, imgEl.naturalHeight)
+          loadedCount++
+          if (loadedCount >= slotCount) onAllLoaded()
+        }
+        imgEl.addEventListener('load', onReady, { once: true, signal })
+        imgEl.addEventListener('error', onReady, { once: true, signal })
+        if (imgEl.complete) queueMicrotask(onReady)
+      }
       grid.appendChild(slot)
     }
   } else {
@@ -155,7 +163,7 @@ function renderSlotBased(wrapper, state, deps, signal) {
     }
   }
 
-  if (!deps.readOnly) attachExternalDrop(grid, signal, deps.onFilesDropped)
+  if (!deps.readOnly) attachExternalDrop(grid, signal, deps.onFilesDropped)
   wrapper.appendChild(grid)
 
   if (overflowImages.length > 0) {
@@ -167,7 +175,7 @@ function renderSlotBased(wrapper, state, deps, signal) {
       overflow.appendChild(createOverflowItem(img, globalIdx, signal, slotDeps))
     })
 
-    if (!deps.readOnly) attachExternalDrop(overflow, signal, deps.onFilesDropped)
+    if (!deps.readOnly) attachExternalDrop(overflow, signal, deps.onFilesDropped)
     wrapper.appendChild(overflow)
   }
 }
@@ -180,9 +188,9 @@ function renderSlotBased(wrapper, state, deps, signal) {
  * @returns {import('./slot.js').SlotDeps}
  */
 function makeSlotDeps(deps) {
-  return {
-    t: deps.t,
-    readOnly: deps.readOnly,
+  return {
+    t: deps.t,
+    readOnly: deps.readOnly,
     syncCaptions: deps.syncCaptions,
     getState: deps.getState,
     onRemoveImage: (index) => {
@@ -229,37 +237,41 @@ function renderActions(wrapper, state, deps, signal) {
   dropdown.className = CSS.dropdown
 
   const settingsBtn = document.createElement('button')
-  settingsBtn.type = 'button'
-  settingsBtn.className = CSS.actionBtn
-  settingsBtn.innerHTML = `${ICON_SETTINGS} ${deps.t('settings', 'Settings')}`
-  settingsBtn.setAttribute('aria-haspopup', 'true')
-  settingsBtn.setAttribute('aria-expanded', 'false')
-
-  const panel = buildSettingsPanel(wrapper, state, settingsDeps)
-  panel.setAttribute('role', 'group')
-  panel.setAttribute('aria-label', deps.t('settings', 'Settings'))
+  settingsBtn.type = 'button'
+  settingsBtn.className = CSS.actionBtn
+  settingsBtn.innerHTML = `${ICON_SETTINGS} ${deps.t('settings', 'Settings')}`
+  settingsBtn.setAttribute('aria-haspopup', 'true')
+  settingsBtn.setAttribute('aria-expanded', 'false')
+
+  const panel = buildSettingsPanel(wrapper, state, settingsDeps)
+  panel.setAttribute('role', 'group')
+  panel.setAttribute('aria-label', deps.t('settings', 'Settings'))
+  const settingsLayer = createPluginLayer(wrapper, signal)
+  const setSettingsOpen = (open) => {
+    dropdown.classList.toggle(CSS.dropdownOpen, open)
+    settingsBtn.setAttribute('aria-expanded', String(open))
+    if (open) settingsLayer.open()
+    else settingsLayer.close()
+  }
 
   settingsBtn.addEventListener('click', (e) => {
     e.stopPropagation()
-    const open = dropdown.classList.toggle(CSS.dropdownOpen)
-    settingsBtn.setAttribute('aria-expanded', String(open))
+    setSettingsOpen(!dropdown.classList.contains(CSS.dropdownOpen))
   }, { signal })
 
   dropdown.append(settingsBtn, panel)
 
   document.addEventListener('click', (e) => {
     if (!dropdown.contains(/** @type {Node} */ (e.target))) {
-      dropdown.classList.remove(CSS.dropdownOpen)
-      settingsBtn.setAttribute('aria-expanded', 'false')
-    }
-  }, { signal })
-  dropdown.addEventListener('keydown', (event) => {
-    if (event.key !== 'Escape' || !dropdown.classList.contains(CSS.dropdownOpen)) return
-    event.preventDefault()
-    dropdown.classList.remove(CSS.dropdownOpen)
-    settingsBtn.setAttribute('aria-expanded', 'false')
-    settingsBtn.focus()
-  }, { signal })
+      setSettingsOpen(false)
+    }
+  }, { signal })
+  dropdown.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape' || !dropdown.classList.contains(CSS.dropdownOpen)) return
+    event.preventDefault()
+    setSettingsOpen(false)
+    settingsBtn.focus()
+  }, { signal })
 
   // Main view container (for drill-down hide/show)
   const mainView = document.createElement('div')
@@ -283,9 +295,9 @@ function renderActions(wrapper, state, deps, signal) {
   // Delete all
   const deleteAllBtn = document.createElement('button')
   deleteAllBtn.type = 'button'
-  deleteAllBtn.className = `${CSS.actionBtn} ${CSS.actionBtnDanger}`
-  deleteAllBtn.innerHTML = ICON_TRASH
-  deleteAllBtn.setAttribute('aria-label', deps.t('deleteAll', 'Delete all'))
+  deleteAllBtn.className = `${CSS.actionBtn} ${CSS.actionBtnDanger}`
+  deleteAllBtn.innerHTML = ICON_TRASH
+  deleteAllBtn.setAttribute('aria-label', deps.t('deleteAll', 'Delete all'))
   deleteAllBtn.addEventListener('mousedown', (e) => e.preventDefault(), { signal })
   deleteAllBtn.addEventListener('click', (e) => {
     e.stopPropagation()
@@ -335,7 +347,7 @@ function showAddView(actions, mainView, deps, signal) {
 
   view.appendChild(makeActionBtn(
     `${ICON_URL} URL`,
-    () => { deps.onPromptUrl(); restore() },
+    () => { deps.onOpenUrlEditor(); restore() },
     signal,
   ))
 

package/dist/plugins/image/image.css

@@ -1,4 +1,5 @@
 .oe-image {
+  position: relative;
   border-radius: 0.5rem;
   overflow-anchor: none;
   text-align: center;
@@ -239,7 +240,7 @@
   border-radius: 8px;
   box-shadow: var(--oe-toolbar-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
   padding: 12px;
-  z-index: 100;
+  z-index: var(--oe-plugin-panel-z-index, 1100);
 }
 
 .oe-image__dropdown--open .oe-image__dropdown-panel {
@@ -377,7 +378,7 @@
   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;
+  z-index: var(--oe-plugin-popover-z-index, 1120);
   padding: 3px;
   max-height: 10rem;
   overflow-y: auto;
@@ -516,6 +517,10 @@
   color: var(--oe-text-1, #1a1a1a);
 }
 
+.oe-theme-light .oe-image__action-btn:hover {
+  color: var(--oe-text-on-accent, #fff);
+}
+
 .oe-theme-light .oe-image__dropdown-panel {
   background: var(--oe-card, #fff);
   border-color: var(--oe-border-hover, #d4d4d4);