@shelamkoff/rector 1.0.1 → 1.0.2

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

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

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

@@ -6,6 +6,14 @@ export default {
   'plugin.image.dropzone': 'or drag and drop a file here',
   'plugin.image.dropzoneUpload': 'Upload',
   'plugin.image.dropzoneText': 'an image from your device or drag and drop it here',
+  'plugin.image.dropzoneUrlPrefix': 'or',
+  'plugin.image.dropzoneUrl': 'insert by URL',
+  'plugin.image.urlEditorTitle': 'Insert image by URL',
+  'plugin.image.urlEditorLabel': 'Image URL',
+  'plugin.image.urlEditorPlaceholder': 'https://example.com/image.jpg',
+  'plugin.image.sourceSubmit': 'Insert',
+  'plugin.image.sourceCancel': 'Cancel',
+  'plugin.image.invalidUrl': 'Enter a valid image URL.',
   'plugin.image.replace': 'Replace',
   'plugin.image.delete': 'Delete',
   'plugin.image.caption': 'Caption',
@@ -33,6 +41,6 @@ export default {
   'plugin.image.value.fill': 'Fill',
   'plugin.image.value.scale-down': 'Scale down',
   'plugin.image.value.solid': 'Solid',
-  'plugin.image.value.dashed': 'Dashed',
-  'plugin.image.emptyReadonly': 'No image',
-}
+  'plugin.image.value.dashed': 'Dashed',
+  'plugin.image.emptyReadonly': 'No image',
+}

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

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

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

@@ -6,6 +6,14 @@ export default {
   'plugin.image.dropzone': 'или перетащите файл сюда',
   'plugin.image.dropzoneUpload': 'Загрузите',
   'plugin.image.dropzoneText': 'изображение с устройства или перетащите его сюда',
+  'plugin.image.dropzoneUrlPrefix': 'или',
+  'plugin.image.dropzoneUrl': 'вставьте по URL',
+  'plugin.image.urlEditorTitle': 'Вставка изображения по URL',
+  'plugin.image.urlEditorLabel': 'URL изображения',
+  'plugin.image.urlEditorPlaceholder': 'https://example.com/image.jpg',
+  'plugin.image.sourceSubmit': 'Вставить',
+  'plugin.image.sourceCancel': 'Отмена',
+  'plugin.image.invalidUrl': 'Введите корректный URL изображения.',
   'plugin.image.replace': 'Заменить',
   'plugin.image.delete': 'Удалить',
   'plugin.image.caption': 'Подпись',
@@ -33,6 +41,6 @@ export default {
   'plugin.image.value.fill': 'Растянуть',
   'plugin.image.value.scale-down': 'Только уменьшать',
   'plugin.image.value.solid': 'Сплошная',
-  'plugin.image.value.dashed': 'Штриховая',
-  'plugin.image.emptyReadonly': 'Нет изображения',
-}
+  'plugin.image.value.dashed': 'Штриховая',
+  'plugin.image.emptyReadonly': 'Нет изображения',
+}

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

@@ -4,6 +4,7 @@
  * @property {boolean} readOnly
  * @property {(file: File) => void} onFileDropped
  * @property {() => void} onUploadClick
+ * @property {() => void} onOpenUrlEditor
  * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<{url: string, alt?: string} | null> }>} customActions
  * @property {(handler: (context: { signal: AbortSignal }) => Promise<{url: string, alt?: string} | null>) => Promise<void>} runCustomAction
  */
@@ -25,6 +26,7 @@ export type EmptyViewDeps = {
     readOnly: boolean;
     onFileDropped: (file: File) => void;
     onUploadClick: () => void;
+    onOpenUrlEditor: () => void;
     customActions: Array<{
         icon?: string;
         label: string;

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

@@ -1,14 +1,15 @@
-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 {(file: File) => void} onFileDropped
  * @property {() => void} onUploadClick
+ * @property {() => void} onOpenUrlEditor
  * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<{url: string, alt?: string} | null> }>} customActions
  * @property {(handler: (context: { signal: AbortSignal }) => Promise<{url: string, alt?: string} | null>) => Promise<void>} runCustomAction
  */
@@ -20,11 +21,11 @@ import { ICON_SELECT } from './icons.js'
  * Listeners are attached with the state's AbortSignal so they're
  * automatically removed on the next render or on disposal.
  *
- * @param {HTMLElement} wrapper
- * @param {import('./state.js').ImageState} state
- * @param {EmptyViewDeps} deps
- * @returns {void}
- */
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').ImageState} state
+ * @param {EmptyViewDeps} deps
+ * @returns {void}
+ */
 export function renderEmptyView(wrapper, state, deps) {
   state.resetTransient()
 
@@ -41,10 +42,15 @@ export function renderEmptyView(wrapper, state, deps) {
     filled: CSS.filled,
   }, {
     iconHtml: ICON_SELECT,
-    uploadText: deps.t('dropzoneUpload', 'Upload'),
-    afterText: deps.t('dropzoneText', 'an image from your device or drag and drop it here'),
-    readOnly: deps.readOnly,
-    emptyText: deps.t('emptyReadonly', 'No image'),
+    uploadText: deps.t('dropzoneUpload', 'Upload'),
+    afterText: deps.t('dropzoneText', 'an image from your device or drag and drop it here'),
+    inlineActions: [{
+      prefix: deps.t('dropzoneUrlPrefix', 'or'),
+      label: deps.t('dropzoneUrl', 'insert by URL'),
+      onSelect: deps.onOpenUrlEditor,
+    }],
+    readOnly: deps.readOnly,
+    emptyText: deps.t('emptyReadonly', 'No image'),
     onUploadClick: deps.onUploadClick,
     actions: deps.customActions.map(action => ({
       icon: action.icon,
@@ -53,7 +59,7 @@ export function renderEmptyView(wrapper, state, deps) {
     })),
     onDrop: (dt) => {
       const file = dt.files[0]
-      if (file && isSupportedImageFile(file)) {
+      if (file && isSupportedImageFile(file)) {
         deps.onFileDropped(file)
       }
     },

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

@@ -3,7 +3,7 @@
  * @property {(key: string, fallback: string) => string} t
  * @property {boolean} readOnly
  * @property {() => void} onTriggerFileInput
- * @property {() => void} onPromptUrl
+ * @property {() => void} onOpenUrlEditor
  * @property {() => void} onDelete
  * @property {(operation: () => void) => void} mutate
  * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<{url: string, alt?: string} | null> }>} customActions
@@ -27,7 +27,7 @@ export type FilledViewDeps = {
     t: (key: string, fallback: string) => string;
     readOnly: boolean;
     onTriggerFileInput: () => void;
-    onPromptUrl: () => void;
+    onOpenUrlEditor: () => void;
     onDelete: () => void;
     mutate: (operation: () => void) => void;
     customActions: Array<{

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

@@ -8,13 +8,14 @@ import {
 } from './icons.js'
 import { applyInlineStyles } from './styles.js'
 import { buildSettingsPanel } from './settings.js'
+import { createPluginLayer } from '../shared/layer.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} onTriggerFileInput
- * @property {() => void} onPromptUrl
+ * @property {() => void} onOpenUrlEditor
  * @property {() => void} onDelete
  * @property {(operation: () => void) => void} mutate
  * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<{url: string, alt?: string} | null> }>} customActions
@@ -29,11 +30,11 @@ import { buildSettingsPanel } from './settings.js'
  * Listeners use the state's AbortSignal — automatically removed on the next
  * render or on disposal.
  *
- * @param {HTMLElement} wrapper
- * @param {import('./state.js').ImageState} state
- * @param {FilledViewDeps} deps
- * @returns {void}
- */
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').ImageState} state
+ * @param {FilledViewDeps} deps
+ * @returns {void}
+ */
 export function renderFilledView(wrapper, state, deps) {
   state.resetTransient()
   wrapper.innerHTML = ''
@@ -45,24 +46,24 @@ export function renderFilledView(wrapper, state, deps) {
   container.className = CSS.imageContainer
 
   const img = document.createElement('img')
-  img.className = CSS.image
-  setSafeUrlAttribute(img, 'src', state.data.file.url, 'media')
-  applyInlineStyles(state, img, container)
+  img.className = CSS.image
+  setSafeUrlAttribute(img, 'src', state.data.file.url, 'media')
+  applyInlineStyles(state, img, container)
   container.appendChild(img)
 
-  // Caption
-  const caption = renderCaption(state, signal, deps)
-  img.alt = caption.textContent?.trim() || ''
-  if (!deps.readOnly) {
-    caption.addEventListener('input', () => {
-      img.alt = caption.textContent?.trim() || ''
-    }, { signal })
-  }
+  // Caption
+  const caption = renderCaption(state, signal, deps)
+  img.alt = caption.textContent?.trim() || ''
+  if (!deps.readOnly) {
+    caption.addEventListener('input', () => {
+      img.alt = caption.textContent?.trim() || ''
+    }, { signal })
+  }
   container.appendChild(caption)
   wrapper.appendChild(container)
 
   // Action bar
-  if (!deps.readOnly) wrapper.appendChild(renderActions(wrapper, state, deps, signal))
+  if (!deps.readOnly) wrapper.appendChild(renderActions(wrapper, state, deps, signal))
 }
 
 /**
@@ -74,7 +75,7 @@ export function renderFilledView(wrapper, state, deps) {
 function renderCaption(state, signal, deps) {
   const caption = document.createElement('div')
   caption.className = CSS.caption
-  caption.contentEditable = deps.readOnly ? 'false' : 'true'
+  caption.contentEditable = deps.readOnly ? 'false' : 'true'
   caption.dataset.placeholder = deps.t('caption', 'Caption')
 
   if (state.data.caption) {
@@ -96,23 +97,23 @@ function renderCaption(state, signal, deps) {
     }
   }
 
-  if (!deps.readOnly) {
-    caption.addEventListener('input', syncEmpty, { signal })
-    caption.addEventListener('focus', () => caption.removeAttribute('data-empty'), { signal })
-    caption.addEventListener('blur', () => {
-      if (!caption.textContent?.trim()) {
-        caption.innerHTML = ''
-        caption.setAttribute('data-empty', 'true')
-        state.data.caption = ''
-      }
-    }, { signal })
-    caption.addEventListener('keydown', (e) => {
-      if (e.key === 'Backspace' && !caption.textContent?.trim()) {
-        e.preventDefault()
-        e.stopPropagation()
-      }
-    }, { signal })
-  }
+  if (!deps.readOnly) {
+    caption.addEventListener('input', syncEmpty, { signal })
+    caption.addEventListener('focus', () => caption.removeAttribute('data-empty'), { signal })
+    caption.addEventListener('blur', () => {
+      if (!caption.textContent?.trim()) {
+        caption.innerHTML = ''
+        caption.setAttribute('data-empty', 'true')
+        state.data.caption = ''
+      }
+    }, { signal })
+    caption.addEventListener('keydown', (e) => {
+      if (e.key === 'Backspace' && !caption.textContent?.trim()) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }, { signal })
+  }
 
   return caption
 }
@@ -135,27 +136,33 @@ 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 closeSettings = () => {
+    dropdown.classList.remove(CSS.dropdownOpen)
+    settingsBtn.setAttribute('aria-expanded', 'false')
+    settingsLayer.close()
+  }
 
   settingsBtn.addEventListener('click', (e) => {
     e.stopPropagation()
     const isOpen = dropdown.classList.contains(CSS.dropdownOpen)
-    if (isOpen) {
-      dropdown.classList.remove(CSS.dropdownOpen)
-      settingsBtn.setAttribute('aria-expanded', 'false')
-    } else {
+    if (isOpen) {
+      closeSettings()
+    } else {
+      settingsLayer.open()
       panel.style.top = ''
       panel.style.bottom = ''
-      dropdown.classList.add(CSS.dropdownOpen)
-      settingsBtn.setAttribute('aria-expanded', 'true')
+      dropdown.classList.add(CSS.dropdownOpen)
+      settingsBtn.setAttribute('aria-expanded', 'true')
 
       const btnRect = settingsBtn.getBoundingClientRect()
       const panelRect = panel.getBoundingClientRect()
@@ -173,19 +180,17 @@ function renderActions(wrapper, state, deps, 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 })
+    if (!dropdown.contains(/** @type {Node} */ (e.target))) {
+      closeSettings()
+    }
+  }, { signal })
+
+  dropdown.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape' || !dropdown.classList.contains(CSS.dropdownOpen)) return
+    event.preventDefault()
+    closeSettings()
+    settingsBtn.focus()
+  }, { signal })
 
   const sep1 = makeSep()
 
@@ -209,10 +214,10 @@ function renderActions(wrapper, state, deps, signal) {
 
   // Delete (icon only)
   const deleteBtn = document.createElement('button')
-  deleteBtn.type = 'button'
-  deleteBtn.className = `${CSS.actionBtn} ${CSS.actionBtnDanger}`
-  deleteBtn.innerHTML = ICON_TRASH
-  deleteBtn.setAttribute('aria-label', deps.t('delete', 'Delete'))
+  deleteBtn.type = 'button'
+  deleteBtn.className = `${CSS.actionBtn} ${CSS.actionBtnDanger}`
+  deleteBtn.innerHTML = ICON_TRASH
+  deleteBtn.setAttribute('aria-label', deps.t('delete', 'Delete'))
   deleteBtn.addEventListener('mousedown', (e) => e.preventDefault(), { signal })
   deleteBtn.addEventListener('click', (e) => {
     e.stopPropagation()
@@ -264,7 +269,7 @@ function showReplaceView(actions, mainView, deps, signal) {
 
   view.appendChild(makeActionBtn(
     `${ICON_URL} URL`,
-    () => { deps.onPromptUrl(); restore() },
+    () => { deps.onOpenUrlEditor(); restore() },
     signal,
   ))
 

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

@@ -20,6 +20,7 @@
  * @property {string} afterText Localized text after the upload link.
  * @property {() => void} onUploadClick Opens the file input.
  * @property {(dataTransfer: DataTransfer) => void} onDrop Handles dropped files.
+ * @property {Array<{ label: string, prefix?: string, onSelect: () => void }>} [inlineActions]
  * @property {Array<{ icon?: string, label: string, onSelect: () => void }>} [actions]
  * @property {boolean} [readOnly] Render a non-interactive empty state.
  * @property {string} [emptyText] Text shown for an empty read-only block.
@@ -90,6 +91,11 @@ export type DropzoneConfig = {
      * Handles dropped files.
      */
     onDrop: (dataTransfer: DataTransfer) => void;
+    inlineActions?: Array<{
+        label: string;
+        prefix?: string;
+        onSelect: () => void;
+    }>;
     actions?: Array<{
         icon?: string;
         label: string;

package/dist/plugins/shared/dropzone.js

@@ -5,38 +5,39 @@
 
 /**
  * @typedef {Object} DropzoneCssMap
- * @property {string} select Wrapper class.
- * @property {string} selectIcon Icon container class.
- * @property {string} selectText Text container class.
- * @property {string} selectLink Upload link class.
- * @property {string} dropzoneActive Class added during dragover.
- * @property {string} filled Class removed from the wrapper during rendering.
- * @property {string} [selectActions] Optional application-source list class.
- * @property {string} [selectAction] Optional application-source button class.
+ * @property {string} select Wrapper class.
+ * @property {string} selectIcon Icon container class.
+ * @property {string} selectText Text container class.
+ * @property {string} selectLink Upload link class.
+ * @property {string} dropzoneActive Class added during dragover.
+ * @property {string} filled Class removed from the wrapper during rendering.
+ * @property {string} [selectActions] Optional application-source list class.
+ * @property {string} [selectAction] Optional application-source button class.
  */
 
 /**
  * @typedef {Object} DropzoneConfig
- * @property {string} iconHtml SVG icon markup.
- * @property {string} uploadText Localized upload-link text.
- * @property {string} afterText Localized text after the upload link.
- * @property {() => void} onUploadClick Opens the file input.
- * @property {(dataTransfer: DataTransfer) => void} onDrop Handles dropped files.
- * @property {Array<{ icon?: string, label: string, onSelect: () => void }>} [actions]
- * @property {boolean} [readOnly] Render a non-interactive empty state.
- * @property {string} [emptyText] Text shown for an empty read-only block.
+ * @property {string} iconHtml SVG icon markup.
+ * @property {string} uploadText Localized upload-link text.
+ * @property {string} afterText Localized text after the upload link.
+ * @property {() => void} onUploadClick Opens the file input.
+ * @property {(dataTransfer: DataTransfer) => void} onDrop Handles dropped files.
+ * @property {Array<{ label: string, prefix?: string, onSelect: () => void }>} [inlineActions]
+ * @property {Array<{ icon?: string, label: string, onSelect: () => void }>} [actions]
+ * @property {boolean} [readOnly] Render a non-interactive empty state.
+ * @property {string} [emptyText] Text shown for an empty read-only block.
  */
 
 /**
  * Render a dropzone (empty-state) view into a wrapper element.
  * Clears the wrapper, removes the `filled` class, and wires drag-and-drop.
  *
- * @param {HTMLElement} wrapper Block wrapper element.
- * @param {AbortSignal} signal Enables automatic listener cleanup.
- * @param {DropzoneCssMap} css — plugin-specific CSS class names
- * @param {DropzoneConfig} config — icon, text, and callbacks
- * @returns {void}
- */
+ * @param {HTMLElement} wrapper Block wrapper element.
+ * @param {AbortSignal} signal Enables automatic listener cleanup.
+ * @param {DropzoneCssMap} css — plugin-specific CSS class names
+ * @param {DropzoneConfig} config — icon, text, and callbacks
+ * @returns {void}
+ */
 export function renderDropzone(wrapper, signal, css, config) {
   wrapper.innerHTML = ''
   wrapper.classList.remove(css.filled)
@@ -48,17 +49,17 @@ export function renderDropzone(wrapper, signal, css, config) {
   icon.className = css.selectIcon
   icon.innerHTML = config.iconHtml
 
-  const text = document.createElement('div')
-  text.className = css.selectText
-
-  if (config.readOnly) {
-    text.textContent = config.emptyText || config.afterText
-    select.append(icon, text)
-    wrapper.appendChild(select)
-    return
-  }
-
-  const uploadLink = document.createElement('button')
+  const text = document.createElement('div')
+  text.className = css.selectText
+
+  if (config.readOnly) {
+    text.textContent = config.emptyText || config.afterText
+    select.append(icon, text)
+    wrapper.appendChild(select)
+    return
+  }
+
+  const uploadLink = document.createElement('button')
   uploadLink.type = 'button'
   uploadLink.className = css.selectLink
   uploadLink.textContent = config.uploadText
@@ -67,9 +68,19 @@ export function renderDropzone(wrapper, signal, css, config) {
     config.onUploadClick()
   }, { signal })
 
-  const afterText = document.createTextNode(' ' + config.afterText)
-
-  text.append(uploadLink, afterText)
+  text.append(uploadLink, document.createTextNode(' ' + config.afterText))
+  for (const action of config.inlineActions || []) {
+    if (action.prefix) text.append(document.createTextNode(' ' + action.prefix + ' '))
+    const button = document.createElement('button')
+    button.type = 'button'
+    button.className = css.selectLink
+    button.textContent = action.label
+    button.addEventListener('click', (event) => {
+      event.stopPropagation()
+      action.onSelect()
+    }, { signal })
+    text.appendChild(button)
+  }
   select.append(icon, text)
 
   if (css.selectActions && css.selectAction && config.actions?.length) {

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

@@ -0,0 +1,13 @@
+/**
+ * Keep a plugin surface above neighbouring editor blocks while it is open.
+ * Calls are reference-counted so a source editor can coexist with a settings
+ * panel owned by the same block.
+ *
+ * @param {HTMLElement} owner Element inside the plugin block.
+ * @param {AbortSignal} signal Plugin render lifecycle signal.
+ * @returns {{ open: () => void, close: () => void }}
+ */
+export function createPluginLayer(owner: HTMLElement, signal: AbortSignal): {
+    open: () => void;
+    close: () => void;
+};

package/dist/plugins/shared/layer.js

@@ -0,0 +1,45 @@
+const openLayers = new WeakMap()
+
+/**
+ * Keep a plugin surface above neighbouring editor blocks while it is open.
+ * Calls are reference-counted so a source editor can coexist with a settings
+ * panel owned by the same block.
+ *
+ * @param {HTMLElement} owner Element inside the plugin block.
+ * @param {AbortSignal} signal Plugin render lifecycle signal.
+ * @returns {{ open: () => void, close: () => void }}
+ */
+export function createPluginLayer(owner, signal) {
+  /** @type {HTMLElement | null} */
+  let block = null
+  let opened = false
+
+  const close = () => {
+    if (!opened || !block) return
+    const currentBlock = block
+    opened = false
+    block = null
+    const next = Math.max(0, (openLayers.get(currentBlock) || 1) - 1)
+    if (next === 0) {
+      openLayers.delete(currentBlock)
+      currentBlock.removeAttribute('data-oe-layer-open')
+      return
+    }
+    openLayers.set(currentBlock, next)
+  }
+
+  signal.addEventListener('abort', close, { once: true })
+
+  return {
+    open() {
+      if (opened || signal.aborted) return
+      const candidate = owner.closest('.oe-block')
+      if (!(candidate instanceof HTMLElement)) return
+      block = candidate
+      opened = true
+      openLayers.set(block, (openLayers.get(block) || 0) + 1)
+      block.setAttribute('data-oe-layer-open', 'true')
+    },
+    close,
+  }
+}