@jackuait/blok 0.7.0-beta.4 → 0.7.1

package/src/components/modules/drag/utils/ToggleSpringLoader.ts

@@ -0,0 +1,71 @@
+import type { Block } from '../../../block';
+
+const SPRING_LOAD_DELAY_MS = 500;
+const SPRING_LOADING_ATTR = 'data-blok-spring-loading';
+const SPRING_LOADED_ATTR = 'data-blok-spring-loaded';
+const SPRING_LOADED_DURATION_MS = 700;
+
+function isClosedToggle(block: Block): boolean {
+  return block.holder.querySelector('[data-blok-toggle-open="false"]') !== null;
+}
+
+/**
+ * Manages the spring-loading hover timer for collapsed toggle blocks during drag.
+ * After SPRING_LOAD_DELAY_MS of hovering over a closed toggle, it auto-expands it.
+ */
+export class ToggleSpringLoader {
+  private timerId: ReturnType<typeof setTimeout> | null = null;
+  private currentBlock: Block | null = null;
+
+  /**
+   * Called on every mousemove during drag with the current hovered block (or null).
+   * Starts/resets/cancels the spring-load timer as appropriate.
+   */
+  public update(block: Block | null): void {
+    if (block === this.currentBlock) {
+      return; // Same block — don't restart timer
+    }
+
+    this.clearTimer();
+
+    if (block === null || !isClosedToggle(block)) {
+      this.currentBlock = null;
+      return;
+    }
+
+    this.currentBlock = block;
+    block.holder.setAttribute(SPRING_LOADING_ATTR, '');
+
+    this.timerId = setTimeout(() => {
+      this.timerId = null;
+      if (this.currentBlock) {
+        this.currentBlock.holder.removeAttribute(SPRING_LOADING_ATTR);
+        this.currentBlock.call('expand');
+        this.currentBlock.holder.setAttribute(SPRING_LOADED_ATTR, '');
+        const expandedBlock = this.currentBlock;
+        setTimeout(() => expandedBlock.holder.removeAttribute(SPRING_LOADED_ATTR), SPRING_LOADED_DURATION_MS);
+        this.currentBlock = null;
+      }
+    }, SPRING_LOAD_DELAY_MS);
+  }
+
+  /**
+   * Cancels any pending spring-load timer and cleans up visual state.
+   * Call on drag end / cleanup.
+   */
+  public cancel(): void {
+    this.clearTimer();
+    this.currentBlock = null;
+  }
+
+  private clearTimer(): void {
+    if (this.timerId !== null) {
+      clearTimeout(this.timerId);
+      this.timerId = null;
+    }
+    if (this.currentBlock) {
+      this.currentBlock.holder.removeAttribute(SPRING_LOADING_ATTR);
+      this.currentBlock = null;
+    }
+  }
+}

package/src/components/modules/drag/utils/drag.constants.ts

@@ -22,7 +22,7 @@ export const DRAG_CONFIG = {
  */
 export const PREVIEW_STYLES = {
   base: 'fixed pointer-events-none z-10000 opacity-80 transition-none',
-  content: 'relative mx-auto max-w-content',
+  content: 'relative mx-auto max-w-blok-content',
 } as const;
 
 /**

package/src/components/modules/index.ts

@@ -16,6 +16,7 @@ import { ToolbarAPI } from './api/toolbar';
 import { ToolsAPI } from './api/tools';
 import { TooltipAPI } from './api/tooltip';
 import { UiAPI } from './api/ui';
+import { WidthAPI } from './api/width';
 import { BlockEvents } from './blockEvents';
 import { BlockManager } from './blockManager';
 import { BlockSelection } from './blockSelection';
@@ -34,6 +35,7 @@ import { Toolbar } from './toolbar/index';
 import { InlineToolbar } from './toolbar/inline';
 import { Tools } from './tools';
 import { UI } from './ui';
+import { WidthManager } from './widthManager';
 import { YjsManager } from './yjs';
 
 /**
@@ -60,6 +62,7 @@ export {
   ToolbarAPI,
   TooltipAPI,
   UiAPI,
+  WidthAPI,
 
   // Toolbar Modules
   BlockSettings,
@@ -82,6 +85,7 @@ export {
   Saver,
   Tools,
   UI,
+  WidthManager,
   YjsManager,
 };
 
@@ -108,6 +112,7 @@ export const Modules = {
   ToolbarAPI,
   TooltipAPI,
   UiAPI,
+  WidthAPI,
 
   // Toolbar Modules
   BlockSettings,
@@ -130,5 +135,6 @@ export const Modules = {
   Saver,
   Tools,
   UI,
+  WidthManager,
   YjsManager,
-};
+};

package/src/components/modules/modificationsObserver.ts

@@ -135,6 +135,25 @@ export class ModificationsObserver extends Module {
     }, this.batchTime);
   }
 
+  /**
+   * Cleans up the module: disconnects the MutationObserver and cancels any
+   * pending batching timeout.  Called by the editor's destroy() chain so that
+   * webkit (and other browsers) can close the page cleanly without the
+   * MutationObserver firing on an already-destroyed instance or the pending
+   * setTimeout keeping the JS engine alive.
+   */
+  public destroy(): void {
+    this.disabled = true;
+    this.mutationObserver.disconnect();
+
+    if (this.batchingTimeout !== null) {
+      clearTimeout(this.batchingTimeout);
+      this.batchingTimeout = null;
+    }
+
+    this.batchingOnChangeQueue.clear();
+  }
+
   /**
    * Fired on every blocks wrapper dom change
    * @param mutations - mutations happened

package/src/components/modules/paste/constants.ts

@@ -21,6 +21,8 @@ export const SAFE_STRUCTURAL_TAGS = new Set<string>([
   'dl',
   'dt',
   'dd',
+  'details',
+  'summary',
 ]);
 
 /**

package/src/components/modules/paste/handlers/base.ts

@@ -115,6 +115,8 @@ export abstract class BasePasteHandler implements PasteHandler {
     if (isMultipleItems) {
       this.redirectToTableParentIfNeeded(data, BlockManager);
 
+      const insertedByIndex: Array<Awaited<ReturnType<BlokModules['BlockManager']['paste']>>> = [];
+
       for (const [index, pasteData] of data.entries()) {
         /**
          * Force each pasted block into its own Yjs undo entry so that
@@ -126,7 +128,15 @@ export abstract class BasePasteHandler implements PasteHandler {
          * captureTimeout get merged into a single undo entry.
          */
         this.Blok.YjsManager.stopCapturing();
-        await this.insertBlock(pasteData, index === 0 && canReplaceCurrentBlock);
+        const shouldReplace = index === 0 && canReplaceCurrentBlock && BlockManager.currentBlock?.isEmpty === true;
+        const block = shouldReplace
+          ? await BlockManager.paste(pasteData.tool, pasteData.event, true)
+          : await BlockManager.paste(pasteData.tool, pasteData.event);
+
+        Caret.setToBlock(block, Caret.positions.END);
+        insertedByIndex.push(block);
+
+        this.applyPastedBlockParent(block, pasteData, insertedByIndex, BlockManager);
       }
 
       BlockManager.currentBlock && Caret.setToBlock(BlockManager.currentBlock, Caret.positions.END);
@@ -146,6 +156,28 @@ export abstract class BasePasteHandler implements PasteHandler {
     await this.processInlinePaste(singleItem, canReplaceCurrentBlock);
   }
 
+  /**
+   * Wire up the parent relationship for a pasted block.
+   */
+  private applyPastedBlockParent(
+    block: Awaited<ReturnType<BlokModules['BlockManager']['paste']>>,
+    pasteData: PasteData,
+    insertedByIndex: Array<Awaited<ReturnType<BlokModules['BlockManager']['paste']>>>,
+    BlockManager: BlokModules['BlockManager']
+  ): void {
+    if (pasteData.parentPasteIndex !== undefined) {
+      const parentBlock = insertedByIndex[pasteData.parentPasteIndex];
+
+      if (parentBlock) {
+        BlockManager.setBlockParent(block, parentBlock.id);
+      }
+    } else if (block.parentId != null) {
+      // Root-level pasted block: clear any parent that was inherited from
+      // the predecessor (e.g. the previous child block that had a parent).
+      BlockManager.setBlockParent(block, null);
+    }
+  }
+
   /**
    * Insert a single block.
    */

package/src/components/modules/paste/handlers/html-handler.ts

@@ -66,74 +66,131 @@ export class HtmlHandler extends BasePasteHandler implements PasteHandler {
 
     const nodes = this.getNodes(wrapper);
 
-    return nodes
-      .map((node) => {
-        const nodeData = (() => {
-          switch (node.nodeType) {
-            case Node.DOCUMENT_FRAGMENT_NODE: {
-              const fragmentWrapper = dom$.make('div');
-
-              fragmentWrapper.appendChild(node);
-
-              return {
-                content: fragmentWrapper,
-                tool: Tools.defaultTool,
-                isBlock: false,
-              };
-            }
-
-            case Node.ELEMENT_NODE: {
-              const elementContent = node as HTMLElement;
-              const tagSubstitute = this.toolRegistry.findToolForTag(elementContent.tagName) ?? undefined;
-
-              return {
-                content: elementContent,
-                tool: tagSubstitute?.tool ?? Tools.defaultTool,
-                isBlock: true,
-              };
-            }
-
-            default:
-              return null;
+    // Pre-expand DETAILS nodes: extract child elements (non-summary) before
+    // sanitization strips them, and carry a parentExpandedIndex reference so
+    // we can remap to final post-filter indices later.
+    type NodeEntry = { node: Node; parentExpandedIndex?: number };
+
+    const expandedNodes: NodeEntry[] = [];
+
+    for (const node of nodes) {
+      const isDetailsElement =
+        node.nodeType === Node.ELEMENT_NODE &&
+        (node as HTMLElement).tagName === 'DETAILS';
+
+      if (!isDetailsElement) {
+        expandedNodes.push({ node });
+        continue;
+      }
+
+      const toggleExpandedIndex = expandedNodes.length;
+
+      expandedNodes.push({ node });
+
+      // Only direct children are extracted (not deeply nested structures), which
+      // is correct for Google Docs DETAILS format where children are flat siblings.
+      const childElements = Array.from((node as HTMLElement).children).filter(
+        (child) => child.tagName !== 'SUMMARY'
+      );
+
+      for (const child of childElements) {
+        expandedNodes.push({ node: child, parentExpandedIndex: toggleExpandedIndex });
+      }
+    }
+
+    // Map expanded nodes to intermediate results, preserving original index.
+    type MappedEntry = { data: PasteData; originalIndex: number } | null;
+
+    const mapped: MappedEntry[] = expandedNodes.map(({ node, parentExpandedIndex }, originalIndex) => {
+      const nodeData = (() => {
+        switch (node.nodeType) {
+          case Node.DOCUMENT_FRAGMENT_NODE: {
+            const fragmentWrapper = dom$.make('div');
+
+            fragmentWrapper.appendChild(node);
+
+            return {
+              content: fragmentWrapper,
+              tool: Tools.defaultTool,
+              isBlock: false,
+            };
           }
-        })();
 
-        if (!nodeData) {
-          return null;
+          case Node.ELEMENT_NODE: {
+            const elementContent = node as HTMLElement;
+            const tagSubstitute = this.toolRegistry.findToolForTag(elementContent.tagName) ?? undefined;
+
+            return {
+              content: elementContent,
+              tool: tagSubstitute?.tool ?? Tools.defaultTool,
+              isBlock: true,
+            };
+          }
+
+          default:
+            return null;
         }
+      })();
 
-        const { content, tool, isBlock } = nodeData;
+      if (!nodeData) {
+        return null;
+      }
 
-        const toolTags = this.buildToolTags(tool);
+      const { content, tool, isBlock } = nodeData;
 
-        const structuralSanitizeConfig = this.sanitizerBuilder.getStructuralTagsConfig(content);
-        const customConfig: SanitizerConfig = { ...structuralSanitizeConfig, ...toolTags, ...tool.baseSanitizeConfig, br: {} };
-        const sanitizedContent = this.sanitizeContent(content, customConfig);
+      const toolTags = this.buildToolTags(tool);
 
-        if (!sanitizedContent) {
-          return null;
-        }
+      const structuralSanitizeConfig = this.sanitizerBuilder.getStructuralTagsConfig(content);
+      const customConfig: SanitizerConfig = { ...structuralSanitizeConfig, ...toolTags, ...tool.baseSanitizeConfig, br: {} };
+      const sanitizedContent = this.sanitizeContent(content, customConfig);
 
-        const event = this.composePasteEvent('tag', {
-          data: sanitizedContent,
-        });
+      if (!sanitizedContent) {
+        return null;
+      }
 
-        return {
+      const event = this.composePasteEvent('tag', {
+        data: sanitizedContent,
+      });
+
+      return {
+        data: {
           content: sanitizedContent,
           isBlock,
           tool: tool.name,
           event,
-        };
-      })
-      .filter((data): data is PasteData => {
-        if (!data) {
-          return false;
-        }
-        const isContentEmpty = dom$.isEmpty(data.content);
-        const isSingleTag = dom$.isSingleTag(data.content);
+          parentPasteIndex: parentExpandedIndex,
+        },
+        originalIndex,
+      };
+    });
+
+    // Filter, tracking the mapping from original (expandedNodes) index → final index.
+    const oldToNewIndex = new Map<number, number>();
+    const filtered: PasteData[] = [];
+
+    for (const entry of mapped) {
+      if (!entry) {
+        continue;
+      }
+      const { data, originalIndex } = entry;
+      const isContentEmpty = dom$.isEmpty(data.content);
+      const isSingleTag = dom$.isSingleTag(data.content);
 
-        return !isContentEmpty || isSingleTag;
-      });
+      if (!isContentEmpty || isSingleTag) {
+        oldToNewIndex.set(originalIndex, filtered.length);
+        filtered.push(data);
+      }
+    }
+
+    // Remap parentPasteIndex from expandedNodes indices to final filtered indices.
+    for (const item of filtered) {
+      if (item.parentPasteIndex !== undefined) {
+        // undefined means parent was filtered out → child becomes root-level
+        item.parentPasteIndex = oldToNewIndex.get(item.parentPasteIndex);
+      }
+    }
+
+    return filtered;
   }
 
   /**
@@ -189,6 +246,16 @@ export class HtmlHandler extends BasePasteHandler implements PasteHandler {
     const toolTags = tool ? this.toolRegistry.getToolTags(tool.name) : [];
 
     const isSubstitutable = tags.includes(element.tagName);
+
+    // DETAILS is a container-type substitutable element. Always return it as an
+    // atomic block so the toggle tool's onPaste receives the full <details>
+    // element (including <summary> and children), rather than having them split
+    // into flat blocks when the paragraph tool's <p> registration triggers
+    // containsAnotherToolTags = true.
+    if (isSubstitutable && element.tagName === 'DETAILS') {
+      return [...nodes, destNode, element];
+    }
+
     const isBlockElement = dom$.blockElements.includes(element.tagName.toLowerCase());
     const isStructuralElement = SAFE_STRUCTURAL_TAGS.has(element.tagName.toLowerCase());
     const containsAnotherToolTags = Array

package/src/components/modules/paste/index.ts

@@ -3,6 +3,7 @@ import { Module } from '../../__module';
 import { Dom as dom$ } from '../../dom';
 import { composeSanitizerConfig, clean } from '../../utils/sanitizer';
 
+import { SAFE_STRUCTURAL_TAGS } from './constants';
 import { preprocessGoogleDocsHtml } from './google-docs-preprocessor';
 import type { PasteHandler } from './handlers/base';
 import { BlokDataHandler } from './handlers/blok-data-handler';
@@ -202,8 +203,12 @@ export class Paste extends Module {
     // Build sanitize config first
     const toolsTags = this.sanitizerBuilder.buildToolsTagsConfig(this.toolRegistry.toolsTags);
     const inlineSanitizeConfig = this.Blok.Tools.getAllInlineToolsSanitizeConfig();
+    const structuralTagsConfig = Object.fromEntries(
+      [...SAFE_STRUCTURAL_TAGS].map((tag) => [tag, {}])
+    ) as SanitizerConfig;
     const customConfig = composeSanitizerConfig(
       this.config.sanitizer as SanitizerConfig,
+      structuralTagsConfig,
       toolsTags,
       inlineSanitizeConfig,
       { br: {} }

package/src/components/modules/paste/types.ts

@@ -36,6 +36,11 @@ export interface PasteData {
   content: HTMLElement;
   event: PasteEvent;
   isBlock: boolean;
+  /**
+   * Index into the current paste batch that is this block's parent.
+   * When set, `insertPasteData` will call `setBlockParent` after inserting.
+   */
+  parentPasteIndex?: number;
 }
 
 /**