@jackuait/blok 0.7.3 → 0.8.1

package/src/stories/MarkerColors.stories.ts

@@ -93,8 +93,8 @@ const INLINE_TOOLBAR_TESTID = '[data-blok-testid="inline-toolbar"]';
 const CONTENTEDITABLE_SELECTOR = '[contenteditable="true"]';
 const MARKER_TOOL_SELECTOR = '[data-blok-item-name="marker"]';
 const MARKER_PICKER_SELECTOR = '[data-blok-testid="marker-picker"]';
-const MARKER_TAB_BG_SELECTOR = '[data-blok-testid="marker-tab-background-color"]';
-const MARKER_GRID_SELECTOR = '[data-blok-testid="marker-grid"]';
+const MARKER_COLOR_SECTION_SELECTOR = '[data-blok-testid="marker-section-color"] button';
+const MARKER_BG_SECTION_SELECTOR = '[data-blok-testid="marker-section-background-color"] button';
 const TIMEOUT_INIT = { timeout: 5000 };
 const TIMEOUT_ACTION = { timeout: 5000 };
 
@@ -411,8 +411,7 @@ export const PickerTextTab: Story = {
 
       await waitFor(
         () => {
-          const grid = document.querySelector(MARKER_GRID_SELECTOR);
-          const swatches = grid?.querySelectorAll('button');
+          const swatches = document.querySelectorAll(MARKER_COLOR_SECTION_SELECTOR);
 
           expect(swatches?.length).toBe(10);
         },
@@ -434,24 +433,14 @@ export const PickerBackgroundTab: Story = {
     chromatic: { delay: 500 },
   },
   play: async ({ canvasElement, step }) => {
-    await step('Open marker picker', async () => {
+    await step('Open marker picker and verify background section', async () => {
       await openMarkerPicker(canvasElement);
-    });
-
-    await step('Switch to background tab', async () => {
-      const bgTab = document.querySelector(MARKER_TAB_BG_SELECTOR);
-
-      expect(bgTab).toBeInTheDocument();
-
-      if (bgTab) {
-        simulateClick(bgTab);
-      }
 
       await waitFor(
         () => {
-          const grid = document.querySelector(MARKER_GRID_SELECTOR);
+          const swatches = document.querySelectorAll(MARKER_BG_SECTION_SELECTOR);
 
-          expect(grid?.querySelectorAll('button')?.length).toBe(10);
+          expect(swatches?.length).toBe(10);
         },
         TIMEOUT_ACTION
       );
@@ -475,7 +464,7 @@ export const PickerDefaultButton: Story = {
 
       await waitFor(
         () => {
-          const defaultBtn = document.querySelector('[data-blok-testid="marker-default-btn"]');
+          const defaultBtn = document.querySelector('[data-blok-testid="marker-swatch-color-default"]');
 
           expect(defaultBtn).toBeInTheDocument();
         },
@@ -502,13 +491,12 @@ export const PickerNoActiveSwatch: Story = {
 
       await waitFor(
         () => {
-          const grid = document.querySelector(MARKER_GRID_SELECTOR);
-          const swatches = grid?.querySelectorAll('button');
+          const swatches = document.querySelectorAll(MARKER_COLOR_SECTION_SELECTOR);
 
           expect(swatches?.length).toBe(10);
 
           swatches?.forEach((swatch) => {
-            expect(swatch.className).not.toContain('ring-black/30');
+            expect(swatch.className).not.toContain('ring-swatch-ring-hover');
           });
         },
         TIMEOUT_ACTION
@@ -581,9 +569,9 @@ export const PickerActiveTextSwatch: Story = {
       // Verify the red swatch has the active ring
       await waitFor(
         () => {
-          const redSwatch = document.querySelector('[data-blok-testid="marker-swatch-red"]');
+          const redSwatch = document.querySelector('[data-blok-testid="marker-swatch-color-red"]');
 
-          expect(redSwatch?.className).toContain('ring-black/30');
+          expect(redSwatch?.className).toContain('ring-swatch-ring-hover');
         },
         TIMEOUT_ACTION
       );
@@ -653,21 +641,12 @@ export const PickerActiveBackgroundSwatch: Story = {
         TIMEOUT_ACTION
       );
 
-      // Switch to background tab
-      const bgTab = document.querySelector(MARKER_TAB_BG_SELECTOR);
-
-      expect(bgTab).toBeInTheDocument();
-
-      if (bgTab) {
-        simulateClick(bgTab);
-      }
-
       // Verify the orange swatch has the active ring
       await waitFor(
         () => {
-          const orangeSwatch = document.querySelector('[data-blok-testid="marker-swatch-orange"]');
+          const orangeSwatch = document.querySelector('[data-blok-testid="marker-swatch-background-color-orange"]');
 
-          expect(orangeSwatch?.className).toContain('ring-black/30');
+          expect(orangeSwatch?.className).toContain('ring-swatch-ring-hover');
         },
         TIMEOUT_ACTION
       );

package/src/styles/main.css

@@ -1041,7 +1041,7 @@
  */
 @utility blok-block {
   /* Base Blok styles - applied to block tool wrappers */
-  @apply py-[3px] px-[2px] [&::-webkit-input-placeholder]:leading-normal!;
+  @apply py-[7px] px-[2px] [&::-webkit-input-placeholder]:leading-normal!;
 }
 @utility blok-inline-tool-button {
   /* Inline Tools styles */

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