@jackuait/blok 0.7.3 → 0.8.0

package/src/tools/header/index.ts

@@ -21,7 +21,7 @@ import { DATA_ATTR } from '../../components/constants';
 import { IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconToggleH1, IconToggleH2, IconToggleH3 } from '../../components/icons';
 import { PLACEHOLDER_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
 import { twMerge } from '../../components/utils/tw';
-import { BODY_PLACEHOLDER_STYLES, TOGGLE_ATTR, TOGGLE_CHILDREN_STYLES } from '../toggle/constants';
+import { BODY_PLACEHOLDER_STYLES, TOGGLE_ATTR } from '../toggle/constants';
 import { buildArrow } from '../toggle/dom-builder';
 import { updateArrowState, updateBodyPlaceholderVisibility, updateChildrenVisibility } from '../toggle/toggle-lifecycle';
 import { handleHeaderToggleEnter, handleHeaderToggleBackspace } from './header-toggle-keyboard';
@@ -198,7 +198,7 @@ export class Header implements BlockTool {
   /**
    * Base styles for all header levels
    */
-  private static readonly BASE_STYLES = 'py-[3px] px-[2px] m-0 leading-[1.3]! outline-hidden [&_p]:p-0! [&_p]:m-0! [&_div]:p-0! [&_div]:m-0!';
+  private static readonly BASE_STYLES = 'py-[7px] px-[2px] m-0 leading-[1.3]! outline-hidden [&_p]:p-0! [&_p]:m-0! [&_div]:p-0! [&_div]:m-0!';
 
   /**
    * Styles
@@ -732,7 +732,8 @@ export class Header implements BlockTool {
     wrapper.appendChild(headerRow);
 
     const bodyPlaceholder = document.createElement('div');
-    bodyPlaceholder.className = BODY_PLACEHOLDER_STYLES;
+    // pl-8 (32px) matches the heading's left padding so body aligns with the title text start.
+    bodyPlaceholder.className = twMerge(BODY_PLACEHOLDER_STYLES, 'pl-8');
     bodyPlaceholder.setAttribute(TOGGLE_ATTR.toggleBodyPlaceholder, '');
     // Class changes on the body placeholder (show/hide) must not trigger didMutated →
     // syncBlockDataToYjs, which would create a spurious Yjs undo entry when a child
@@ -746,7 +747,8 @@ export class Header implements BlockTool {
     wrapper.appendChild(bodyPlaceholder);
 
     const childContainer = document.createElement('div');
-    childContainer.className = TOGGLE_CHILDREN_STYLES;
+    // pl-8 (32px) matches the heading's left padding so children align with the title text start.
+    childContainer.className = 'pl-8';
     childContainer.setAttribute(TOGGLE_ATTR.toggleChildren, '');
     // Block DOM mutations inside the children container from triggering the header tool's
     // didMutated → syncBlockDataToYjs path (same rationale as the toggle list tool).

package/src/tools/index.ts

@@ -32,6 +32,8 @@ export { ItalicInlineTool as Italic } from '../components/inline-tools/inline-to
 export { LinkInlineTool as Link } from '../components/inline-tools/inline-tool-link';
 export { ConvertInlineTool as Convert } from '../components/inline-tools/inline-tool-convert';
 export { MarkerInlineTool as Marker } from '../components/inline-tools/inline-tool-marker';
+export { UnderlineInlineTool as Underline } from '../components/inline-tools/inline-tool-underline';
+export { StrikethroughInlineTool as Strikethrough } from '../components/inline-tools/inline-tool-strikethrough';
 
 // Default tools configuration for convenience
 // Note: inlineToolbar defaults to true, so it doesn't need to be specified
@@ -48,4 +50,6 @@ export const defaultInlineTools = {
   italic: {},
   link: {},
   marker: {},
+  underline: {},
+  strikethrough: {},
 } as const;

package/src/tools/list/constants.ts

@@ -17,14 +17,14 @@ export const ORDERED_INDENT_PER_LEVEL = 26;
 /**
  * Base styles for list wrapper
  *
- * Matches paragraph spacing: py-[3px] from blok-block + mt-[2px] mb-px
+ * Matches paragraph spacing: py-[7px] from blok-block + mt-[2px] mb-px
  */
-export const BASE_STYLES = 'outline-hidden py-[3px] mt-[2px] mb-px';
+export const BASE_STYLES = 'outline-hidden py-[7px] mt-[2px] mb-px';
 
 /**
  * Styles for standard list items (unordered, ordered)
  */
-export const ITEM_STYLES = 'outline-hidden pl-0.5 leading-[1.5] items-center';
+export const ITEM_STYLES = 'outline-hidden pl-0.5 leading-[1.5] items-start';
 
 /**
  * Styles for checklist items

package/src/tools/list/dom-builder.ts

@@ -271,6 +271,7 @@ export const createMarker = (style: ListItemStyle, depth: number): HTMLElement =
     marker.style.paddingRight = '13px';
     marker.style.fontSize = '24px';
     marker.style.fontFamily = 'Arial';
+    marker.style.lineHeight = '1.5rem';
   }
 
   return marker;

package/src/tools/table/table-cell-blocks.ts

@@ -233,6 +233,19 @@ export class TableCellBlocks {
       const totalBlocks = this.api.blocks.getBlocksCount();
       const newBlock = this.api.blocks.insert(undefined, {}, {}, totalBlocks, true);
 
+      /**
+       * insertToDOM places the new block's holder adjacent (afterend) to the last
+       * block in the flat array, which is a cell paragraph inside the table grid.
+       * Move the holder out of the grid so focus lands outside the table.
+       */
+      const tableBlockApi = this.gridElement.contains(newBlock.holder)
+        ? this.api.blocks.getBlockByIndex(tableIndex)
+        : null;
+
+      if (tableBlockApi) {
+        tableBlockApi.holder.after(newBlock.holder);
+      }
+
       this.api.caret.setToBlock(newBlock.id, 'start');
     } finally {
       this.isExitingTable = false;
@@ -671,6 +684,18 @@ export class TableCellBlocks {
     // For those, check that the current block at the time of insertion belongs
     // to this table — indicating the user was editing inside a cell.
     if (!this.gridElement.contains(holder)) {
+      // If the holder is outside the table block's own wrapper (e.g. placed
+      // directly in the editor working area via appendToWorkingArea), it is
+      // a top-level block and must not be claimed into a cell.
+      const tableBlockIdx = this.api.blocks.getBlockIndex(this.tableBlockId);
+      const tableBlockApi = tableBlockIdx !== undefined
+        ? this.api.blocks.getBlockByIndex(tableBlockIdx)
+        : null;
+
+      if (tableBlockApi && !tableBlockApi.holder.contains(holder)) {
+        return;
+      }
+
       const currentIndex = this.api.blocks.getCurrentBlockIndex();
       const currentBlock = currentIndex >= 0
         ? this.api.blocks.getBlockByIndex(currentIndex)

package/src/tools/toggle/constants.ts

@@ -26,9 +26,9 @@ export const ARIA_LABEL_EXPAND_KEY = 'tools.toggle.ariaLabelExpand';
 /**
  * Base styles for toggle wrapper
  *
- * Matches paragraph spacing: py-[3px] from blok-block + mt-[2px] mb-px
+ * py-[7px] matches blok-block (paragraph); mt-[2px] mb-px provides block margin.
  */
-export const BASE_STYLES = 'outline-hidden py-[3px] mt-[2px] mb-px';
+export const BASE_STYLES = 'outline-hidden py-[7px] mt-[2px] mb-px';
 
 /**
  * Styles for toggle content area
@@ -52,14 +52,21 @@ export const ARROW_ICON = '<svg aria-hidden="true" width="12" height="12" viewBo
 
 /**
  * Styles for the body placeholder element
+ *
+ * Vertical padding matches a child paragraph's layout contribution:
+ *   - Paragraph element: py-[7px] (7px top, 7px bottom) + mt-px mb-px (1px margins)
+ *   - Combined per side: 7px padding + 1px margin = 8px
+ * Using fixed px values (not em) because py-[7px] and mt-px are also fixed.
+ *
+ * pl-7 (28px) aligns the placeholder with the title text start (arrow button width: 8px + 12px SVG + 8px = 28px).
  */
-export const BODY_PLACEHOLDER_STYLES = 'hidden pl-[1.1em] pt-[calc(0.5em+5px)] pb-[4px] text-gray-text leading-[1.5] cursor-pointer select-none';
+export const BODY_PLACEHOLDER_STYLES = 'hidden pl-7 pt-[8px] pb-[8px] text-gray-text leading-[1.5] cursor-pointer select-none';
 
 /**
  * Styles for the children container element.
- * pl-[1.1em] (~17.6px at 16px base) matches Notion's toggle children indent (margin-left: 1.1em).
+ * pl-7 (28px) aligns children with the toggle list title text start (arrow button total width).
  */
-export const TOGGLE_CHILDREN_STYLES = 'pl-[1.1em]';
+export const TOGGLE_CHILDREN_STYLES = 'pl-7';
 
 /**
  * Data attributes specific to the toggle tool