@shelamkoff/rector 1.0.1 → 1.0.2

package/README.md

@@ -1,24 +1,25 @@
-# @shelamkoff/rector
-
-Rector is an extensible browser-native block editor with atomic undo and redo, versioned JSON documents, inline formatting, block plugins, and document rendering.
-
-## Documentation
-
-The complete guides, API reference, extension contracts, plugin catalog, and live demo are published with VitePress:
-
-- [English documentation](https://shelamkoff.github.io/editor/)
-- [Документация на русском](https://shelamkoff.github.io/editor/ru/)
-- [Live demo](https://shelamkoff.github.io/editor/#demo)
-
-## Installation
-
-```bash
-npm install @shelamkoff/rector
-```
-
-See the [getting started guide](https://shelamkoff.github.io/editor/guide/getting-started) for setup, required styles, plugin registration, document persistence, and lifecycle management.
-
-## Project
-
-- [Source code and issues](https://github.com/Shelamkoff/editor)
-- [MIT License](./LICENSE)
+# @shelamkoff/rector
+
+Rector is an extensible browser-native block editor with atomic undo and redo, versioned JSON documents, inline formatting, block plugins, and document rendering.
+![Editor demo](https://github.com/Shelamkoff/editor/blob/master/docs/public/editor.png)
+
+## Documentation
+
+The complete guides, API reference, extension contracts, plugin catalog, and live demo are published with VitePress:
+
+- [English documentation](https://shelamkoff.github.io/editor/)
+- [Документация на русском](https://shelamkoff.github.io/editor/ru/)
+- [Live demo](https://shelamkoff.github.io/editor/#demo)
+
+## Installation
+
+```bash
+npm install @shelamkoff/rector
+```
+
+See the [getting started guide](https://shelamkoff.github.io/editor/guide/getting-started) for setup, required styles, plugin registration, document persistence, and lifecycle management.
+
+## Project
+
+- [Source code and issues](https://github.com/Shelamkoff/editor)
+- [MIT License](./LICENSE)

package/dist/core/clipboard/Clipboard.d.ts

@@ -22,6 +22,7 @@ export class Clipboard {
      * @property {import('../types.js').InlinePluginContext} inlinePluginCtx
      * @property {import('../Diagnostics.js').Diagnostics} [diagnostics]
      * @property {(() => boolean)} [uiActivePredicate]
+     * @property {string} [pendingPasteLabel]
      */
     /**
      * @param {HTMLElement} rootEl
@@ -41,6 +42,7 @@ export class Clipboard {
         inlinePluginCtx: import("../types.js").InlinePluginContext;
         diagnostics?: import("../Diagnostics.js").Diagnostics;
         uiActivePredicate?: (() => boolean);
+        pendingPasteLabel?: string;
     });
     destroy(): void;
     #private;

package/dist/core/clipboard/Clipboard.js

@@ -8,6 +8,27 @@ import { cloneEditorData } from '../../shared/cloneEditorData.js'
 
 const MIME_TYPE = 'application/x-rector-editor'
 
+/**
+ * Core-owned progress UI for asynchronous file pastes. The plugin's pending
+ * element stays mounted so its upload lifecycle can continue, but is hidden
+ * until the completed block is committed to the document.
+ *
+ * @param {string} label
+ * @returns {HTMLElement}
+ */
+function createPendingPasteIndicator(label) {
+  const indicator = document.createElement('div')
+  indicator.className = 'oe-pending-paste__indicator'
+  indicator.setAttribute('role', 'status')
+  indicator.setAttribute('aria-label', label)
+
+  const spinner = document.createElement('span')
+  spinner.className = 'oe-pending-paste__spinner'
+  spinner.setAttribute('aria-hidden', 'true')
+  indicator.appendChild(spinner)
+  return indicator
+}
+
 /**
  * Extract plain text and HTML from a DOM Range.
  * @param {Range} range
@@ -118,6 +139,9 @@ export class Clipboard {
   /** @type {boolean} */
   #destroyed = false
 
+  /** @type {string} */
+  #pendingPasteLabel = 'Processing file'
+
   /**
    * @typedef {Object} ClipboardConfig
    * @property {import('../types').IBlockManager} blocks
@@ -133,6 +157,7 @@ export class Clipboard {
    * @property {import('../types').InlinePluginContext} inlinePluginCtx
    * @property {import('../Diagnostics').Diagnostics} [diagnostics]
    * @property {(() => boolean)} [uiActivePredicate]
+   * @property {string} [pendingPasteLabel]
    */
 
   /**
@@ -143,7 +168,7 @@ export class Clipboard {
     const {
       blocks, selection, plugins, defaultBlockType, crossBlockSelection,
       events, commands, blockOps, captureSnapshot, inlinePluginRegistry,
-      inlinePluginCtx, diagnostics, uiActivePredicate,
+      inlinePluginCtx, diagnostics, uiActivePredicate, pendingPasteLabel,
     } = config
     this.#rootEl = rootEl
     this.#blocks = blocks
@@ -158,6 +183,7 @@ export class Clipboard {
     this.#inlinePluginRegistry = inlinePluginRegistry
     this.#inlinePluginCtx = inlinePluginCtx
     this.#isUIActive = uiActivePredicate ?? null
+    this.#pendingPasteLabel = pendingPasteLabel || this.#pendingPasteLabel
 
     this.#blockOps = blockOps
     this.#router = new PasteRouter(plugins.values())
@@ -248,10 +274,10 @@ export class Clipboard {
       const blocksData = selectedBlocks.map(block => canonical.get(block.id) ?? block.save())
       const html = selectedBlocks.map((b) => b.contentElement.innerHTML).join('\n')
       const text = selectedBlocks.map((b) => b.contentElement.textContent).join('\n')
-      e.clipboardData?.setData('text/plain', text)
-      e.clipboardData?.setData('text/html', html)
-      e.clipboardData?.setData(MIME_TYPE, JSON.stringify(blocksData))
-    }
+      e.clipboardData?.setData('text/plain', text)
+      e.clipboardData?.setData('text/html', html)
+      e.clipboardData?.setData(MIME_TYPE, JSON.stringify(blocksData))
+    }
 
   }
 
@@ -280,10 +306,10 @@ export class Clipboard {
             this.#selection.setCaretToBlock(focusBlock.id, 'start')
           }
         }
-      } finally {
-        this.#events.emit(EditorEvent.UNDO_BATCH_END)
-      }
-    }
+      } finally {
+        this.#events.emit(EditorEvent.UNDO_BATCH_END)
+      }
+    }
 
   }
 
@@ -555,21 +581,23 @@ export class Clipboard {
       const initialData = plugin.onPaste({ type: 'file', file })
       if (!initialData) return null
 
-      element = plugin.render(initialData, {
-        mutate: (operation) => operation(),
-        splitBlock: () => {},
-        exitEmptyBlock: () => false,
-        readOnly: false,
-      })
-      if (!(element instanceof HTMLElement)) {
-        console.error(`[Clipboard] File paste plugin "${plugin.type}" did not return an HTMLElement`)
-        return null
+      element = plugin.render(initialData, {
+        mutate: (operation) => operation(),
+        splitBlock: () => {},
+        exitEmptyBlock: () => false,
+        readOnly: false,
+      })
+      if (!(element instanceof HTMLElement)) {
+        console.error(`[Clipboard] File paste plugin "${plugin.type}" did not return an HTMLElement`)
+        return null
       }
 
       shell = document.createElement('div')
       shell.className = 'oe-block oe-block--pending-paste'
       shell.dataset.blockType = plugin.type
-      shell.appendChild(element)
+      shell.setAttribute('aria-busy', 'true')
+      element.hidden = true
+      shell.append(createPendingPasteIndicator(this.#pendingPasteLabel), element)
       pendingHost.appendChild(shell)
 
       let cleaned = false
@@ -590,11 +618,11 @@ export class Clipboard {
       await plugin.waitForPaste?.(element)
       if (this.#destroyed || pending.cancelled) return null
 
-      const saved = plugin.save(element)
-      if (!saved || typeof saved !== 'object' || Array.isArray(saved)) {
-        console.error(`[Clipboard] File paste plugin "${plugin.type}" returned invalid data`)
-        return null
-      }
+      const saved = plugin.save(element)
+      if (!saved || typeof saved !== 'object' || Array.isArray(saved)) {
+        console.error(`[Clipboard] File paste plugin "${plugin.type}" returned invalid data`)
+        return null
+      }
       if (plugin.validate && !plugin.validate(saved)) return null
       return { type: plugin.type, data: cloneEditorData(saved) }
     } catch (error) {