@jackuait/blok 0.7.2 → 0.7.3-beta.2

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

@@ -436,6 +436,15 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     if (blockContentElement) {
       this.toolboxInstance.updateLeftAlignElement(blockContentElement);
+
+      /**
+       * Sync toolbar content wrapper's margin with the block content element
+       * so toolbar buttons align with the block content edge, even when
+       * consumer CSS overrides the block content's margin.
+       */
+      if (this.nodes.content) {
+        this.nodes.content.style.marginLeft = getComputedStyle(blockContentElement).marginLeft;
+      }
     }
 
     /**
@@ -554,6 +563,20 @@ export class Toolbar extends Module<ToolbarNodes> {
       targetBlock.setupDraggable(settingsToggler, this.Blok.DragManager);
     }
 
+    /**
+     * Sync toolbar content wrapper's margin with the block content element
+     * so toolbar buttons align with the block content edge.
+     */
+    const blockContentElement = targetBlockHolder.querySelector<HTMLElement>(`[${DATA_ATTR.elementContent}]`);
+
+    if (blockContentElement) {
+      this.toolboxInstance.updateLeftAlignElement(blockContentElement);
+
+      if (this.nodes.content) {
+        this.nodes.content.style.marginLeft = getComputedStyle(blockContentElement).marginLeft;
+      }
+    }
+
     /**
      * Reset content offset for multi-block selection
      */
@@ -620,11 +643,14 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     /**
-     * Reset the content offset transform
+     * Reset the content offset transform and margin sync
      */
     if (this.nodes.actions) {
       this.nodes.actions.style.transform = '';
     }
+    if (this.nodes.content) {
+      this.nodes.content.style.marginLeft = '';
+    }
     this.positioner.setHoveredTarget(null);
 
     this.reset();

package/src/components/ui/toolbox.ts

@@ -375,6 +375,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
       },
       items: this.toolboxItemsToBeDisplayed,
       handleContentEditableNavigation: true,
+      minWidth: '250px',
     });
 
     this.popover.on(PopoverEvent.Closed, this.onPopoverClose);
@@ -478,7 +479,8 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     const toPopoverItem = (toolboxItem: ToolboxConfigEntry, tool: BlockToolAdapter, displaySecondaryLabel = true): PopoverItemParams => {
       // Get English title for search fallback
       const titleKey = toolboxItem.titleKey;
-      const englishTitleKey = titleKey ? `toolNames.${titleKey}` : undefined;
+      const resolvedTitleKey = titleKey?.includes('.') ? titleKey : `toolNames.${titleKey}`;
+      const englishTitleKey = titleKey ? resolvedTitleKey : undefined;
       const englishTitle = englishTitleKey
         ? this.api.i18n.getEnglishTranslation(englishTitleKey)
         : toolboxItem.title;

package/src/components/utils/data-model-transform.ts

@@ -39,6 +39,20 @@ interface LegacyListData {
   start?: number;
 }
 
+/**
+ * Legacy toggle list data structure for data model transformation.
+ * Old format: { title: string, isExpanded?: boolean, body: { blocks: [], time, version } }
+ */
+interface LegacyToggleListData {
+  title: string;
+  isExpanded?: boolean;
+  body?: {
+    time?: number;
+    blocks?: OutputBlockData[];
+    version?: string;
+  };
+}
+
 /**
  * Result of analyzing the input data format
  */
@@ -143,6 +157,20 @@ const isLegacyListBlock = (block: OutputBlockData): block is OutputBlockData<str
   return block.type === 'list' && isLegacyListData(block.data);
 };
 
+/**
+ * Check if a block is in legacy toggleList format
+ * Legacy format: { type: "toggleList", data: { title: "...", body: { blocks: [...] } } }
+ */
+const isLegacyToggleListBlock = (block: OutputBlockData): block is OutputBlockData<string, LegacyToggleListData> => {
+  if (block.type !== 'toggleList') {
+    return false;
+  }
+
+  const data = block.data as Record<string, unknown>;
+
+  return typeof data === 'object' && data !== null && 'title' in data;
+};
+
 /**
  * Check if a block contains nested hierarchy in its items
  */
@@ -179,9 +207,14 @@ export const analyzeDataFormat = (blocks: OutputBlockData[]): DataFormatAnalysis
   // Check if any block uses legacy list format (items[] array)
   const foundLegacyList = blocks.some(isLegacyListBlock);
 
-  if (foundLegacyList) {
+  // Check if any block uses legacy toggleList format
+  const foundLegacyToggle = blocks.some(isLegacyToggleListBlock);
+
+  if (foundLegacyList || foundLegacyToggle) {
     // Check if there's actual nesting for the hasHierarchy flag
-    const hasNesting = blocks.some(hasNestedItems);
+    const hasNesting = blocks.some(hasNestedItems) || blocks.some(block =>
+      isLegacyToggleListBlock(block) && block.data.body?.blocks !== undefined && block.data.body.blocks.length > 0
+    );
 
     return { format: 'legacy', hasHierarchy: hasNesting };
   }
@@ -268,6 +301,49 @@ const expandListToHierarchical = (
   return blocks;
 };
 
+/**
+ * Expand a legacy toggleList block into flat toggle block + child blocks
+ */
+const expandToggleListToHierarchical = (
+  block: OutputBlockData<string, LegacyToggleListData>
+): OutputBlockData[] => {
+  const blocks: OutputBlockData[] = [];
+  const toggleId = block.id ?? generateBlockId();
+  const bodyBlocks = block.data.body?.blocks ?? [];
+
+  // Collect child IDs, ensuring each child has an ID
+  const childIds: BlockId[] = [];
+  const childBlocks: OutputBlockData[] = [];
+
+  for (const childBlock of bodyBlocks) {
+    const childId = childBlock.id ?? generateBlockId();
+
+    childIds.push(childId);
+    childBlocks.push({
+      ...childBlock,
+      id: childId,
+      parent: toggleId,
+    });
+  }
+
+  // Create the toggle block with mapped fields
+  const toggleBlock: OutputBlockData = {
+    id: toggleId,
+    type: 'toggle',
+    data: {
+      text: block.data.title,
+      ...(typeof block.data.isExpanded === 'boolean' ? { isOpen: block.data.isExpanded } : {}),
+    },
+    ...(block.tunes !== undefined ? { tunes: block.tunes } : {}),
+    ...(childIds.length > 0 ? { content: childIds } : {}),
+  };
+
+  blocks.push(toggleBlock);
+  blocks.push(...childBlocks);
+
+  return blocks;
+};
+
 /**
  * Expand legacy nested format to hierarchical flat-with-references format
  * @param blocks - array of blocks potentially containing nested structures
@@ -282,6 +358,11 @@ export const expandToHierarchical = (blocks: OutputBlockData[]): OutputBlockData
       // Type guard narrows block.data to LegacyListData
       const expanded = expandListToHierarchical(block.data, block.tunes);
 
+      expandedBlocks.push(...expanded);
+    } else if (isLegacyToggleListBlock(block)) {
+      // Expand toggleList to flat toggle + child blocks
+      const expanded = expandToggleListToHierarchical(block);
+
       expandedBlocks.push(...expanded);
     } else {
       // Non-list blocks pass through unchanged (with guaranteed ID)
@@ -411,6 +492,60 @@ const processRootListItem = (
   return listBlock;
 };
 
+/**
+ * Process a root toggle block and convert to a legacy toggleList block
+ */
+const processRootToggleItem = (
+  block: OutputBlockData,
+  blockMap: Map<BlockId, OutputBlockData>,
+  processedIds: Set<BlockId>
+): OutputBlockData => {
+  markBlockAsProcessed(block.id, processedIds);
+
+  const data: unknown = block.data;
+  const text = isObjectWithText(data) ? data.text : '';
+  const isOpen = typeof (data as Record<string, unknown>)?.isOpen === 'boolean'
+    ? (data as Record<string, unknown>).isOpen as boolean
+    : undefined;
+
+  // Collect child blocks
+  const childBlocks: OutputBlockData[] = [];
+  const contentIds = block.content ?? [];
+
+  for (const childId of contentIds) {
+    const childBlock = blockMap.get(childId);
+
+    if (childBlock) {
+      markBlockAsProcessed(childId, processedIds);
+      childBlocks.push(stripHierarchyFields(childBlock));
+    }
+  }
+
+  const legacyBlock: OutputBlockData = {
+    id: block.id,
+    type: 'toggleList',
+    data: {
+      title: text,
+      ...(isOpen !== undefined ? { isExpanded: isOpen } : {}),
+      ...(childBlocks.length > 0 ? {
+        body: {
+          blocks: childBlocks,
+        },
+      } : {}),
+    },
+    ...(block.tunes !== undefined ? { tunes: block.tunes } : {}),
+  };
+
+  return legacyBlock;
+};
+
+/**
+ * Check if a block is a flat-model toggle block
+ */
+const isFlatModelToggleBlock = (block: OutputBlockData): boolean => {
+  return block.type === 'toggle';
+};
+
 /**
  * Check if a block is a flat-model list block (has 'text' field instead of 'items')
  */
@@ -441,10 +576,11 @@ export const collapseToLegacy = (blocks: OutputBlockData[]): OutputBlockData[] =
     }
   }
 
-  // If no flat-model list blocks, just strip hierarchy fields and return
+  // If no flat-model list or toggle blocks, just strip hierarchy fields and return
   const hasFlatListBlocks = blocks.some(isFlatModelListBlock);
+  const hasFlatToggleBlocks = blocks.some(isFlatModelToggleBlock);
 
-  if (!hasFlatListBlocks) {
+  if (!hasFlatListBlocks && !hasFlatToggleBlocks) {
     return blocks.map(stripHierarchyFields);
   }
 
@@ -461,7 +597,9 @@ export const collapseToLegacy = (blocks: OutputBlockData[]): OutputBlockData[] =
 
     const isFlatListBlock = isFlatModelListBlock(block);
     const isRootListItem = isFlatListBlock && !block.parent;
-    const isNonListItem = !isFlatListBlock;
+    const isFlatToggleBlock = isFlatModelToggleBlock(block);
+    const isRootToggleItem = isFlatToggleBlock && !block.parent;
+    const isNonListItem = !isFlatListBlock && !isFlatToggleBlock;
 
     if (isRootListItem) {
       const listBlock = processRootListItem(block, blockMap, processedIds);
@@ -469,6 +607,12 @@ export const collapseToLegacy = (blocks: OutputBlockData[]): OutputBlockData[] =
       result.push(listBlock);
     }
 
+    if (isRootToggleItem) {
+      const toggleBlock = processRootToggleItem(block, blockMap, processedIds);
+
+      result.push(toggleBlock);
+    }
+
     if (isNonListItem) {
       result.push(stripHierarchyFields(block));
       markBlockAsProcessed(block.id, processedIds);