@jackuait/blok 0.7.3 → 0.8.0

package/src/components/inline-tools/inline-tool-underline.ts

@@ -0,0 +1,408 @@
+import type { InlineTool, SanitizerConfig } from '../../../types';
+import type { MenuConfig } from '../../../types/tools';
+import { IconUnderline } from '../icons';
+
+import {
+  isRangeFormatted,
+  findFormattingAncestor,
+  hasFormattingAncestor,
+  collectFormattingAncestors,
+} from './utils/formatting-range-utils';
+
+/**
+ * Check if an element is an underline tag (<u>)
+ * @param element - The element to check
+ */
+const isUnderlineTag = (element: Element): boolean => {
+  return element.tagName === 'U';
+};
+
+/**
+ * Underline Tool
+ *
+ * Inline Toolbar Tool
+ *
+ * Style selected text with underline
+ */
+export class UnderlineInlineTool implements InlineTool {
+  /**
+   * Specifies Tool as Inline Toolbar Tool
+   * @returns {boolean}
+   */
+  public static isInline = true;
+
+  /**
+   * Title for the Inline Tool
+   */
+  public static title = 'Underline';
+
+  /**
+   * Translation key for i18n
+   */
+  public static titleKey = 'underline';
+
+  /**
+   * Sanitizer Rule
+   * Leave <u> tags
+   * @returns {object}
+   */
+  public static get sanitize(): SanitizerConfig {
+    return {
+      u: {},
+    } as SanitizerConfig;
+  }
+
+  /**
+   * Create button for Inline Toolbar
+   */
+  public render(): MenuConfig {
+    return {
+      icon: IconUnderline,
+      name: 'underline',
+      onActivate: () => {
+        this.toggleUnderline();
+      },
+      isActive: () => {
+        const selection = window.getSelection();
+
+        return selection ? this.isSelectionVisuallyUnderline(selection) : false;
+      },
+    };
+  }
+
+  /**
+   * Shortcut for underline tool
+   */
+  public static shortcut = 'CMD+U';
+
+  /**
+   * Apply or remove underline formatting using modern Selection API
+   */
+  private toggleUnderline(): void {
+    const selection = window.getSelection();
+
+    if (!selection || selection.rangeCount === 0) {
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+
+    if (range.collapsed) {
+      this.toggleCollapsedUnderline(range, selection);
+
+      return;
+    }
+
+    const shouldUnwrap = this.isRangeUnderline(range, { ignoreWhitespace: true });
+
+    if (shouldUnwrap) {
+      this.unwrapUnderlineTags(range);
+    } else {
+      this.wrapWithUnderline(range);
+    }
+  }
+
+  /**
+   * Handle toggle for collapsed selection (caret)
+   * @param range - Current range
+   * @param selection - Current selection
+   */
+  private toggleCollapsedUnderline(range: Range, selection: Selection): void {
+    const isUnderline = this.isRangeUnderline(range, { ignoreWhitespace: true });
+
+    if (isUnderline) {
+      const textNode = document.createTextNode('\u200B');
+
+      range.insertNode(textNode);
+      range.selectNode(textNode);
+      this.unwrapUnderlineTags(range);
+
+      const newRange = document.createRange();
+
+      newRange.setStart(textNode, 1);
+      newRange.setEnd(textNode, 1);
+
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+    } else {
+      const u = document.createElement('u');
+      const textNode = document.createTextNode('\u200B');
+
+      u.appendChild(textNode);
+      range.insertNode(u);
+
+      const newRange = document.createRange();
+
+      newRange.setStart(textNode, 1);
+      newRange.setEnd(textNode, 1);
+
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+    }
+  }
+
+  /**
+   * Check if current selection is within an underline tag
+   * @param selection - The Selection object to check
+   */
+  private isSelectionVisuallyUnderline(selection: Selection): boolean {
+    if (selection.rangeCount === 0) {
+      return false;
+    }
+
+    const range = selection.getRangeAt(0);
+
+    return this.isRangeUnderline(range, { ignoreWhitespace: true });
+  }
+
+  /**
+   * Check if a range contains underline text
+   * @param range - The range to check
+   * @param options - Options for checking underline status
+   */
+  private isRangeUnderline(range: Range, options: { ignoreWhitespace: boolean }): boolean {
+    return isRangeFormatted(range, isUnderlineTag, options);
+  }
+
+  /**
+   * Wrap selection with <u> tag
+   * @param range - The Range object containing the selection to wrap
+   */
+  private wrapWithUnderline(range: Range): void {
+    const html = this.getRangeHtmlWithoutUnderline(range);
+    const insertedRange = this.replaceRangeWithHtml(range, `<u>${html}</u>`);
+    const selection = window.getSelection();
+
+    if (selection && insertedRange) {
+      selection.removeAllRanges();
+      selection.addRange(insertedRange);
+    }
+  }
+
+  /**
+   * Remove underline tags (<u>) while preserving content
+   * @param range - The Range object containing the selection to unwrap
+   */
+  private unwrapUnderlineTags(range: Range): void {
+    const underlineAncestors = this.collectUnderlineAncestors(range);
+    const selection = window.getSelection();
+
+    if (!selection) {
+      return;
+    }
+
+    const marker = document.createElement('span');
+    const fragment = range.extractContents();
+
+    marker.appendChild(fragment);
+    this.removeNestedUnderline(marker);
+
+    range.insertNode(marker);
+
+    const markerRange = document.createRange();
+
+    markerRange.selectNodeContents(marker);
+    selection.removeAllRanges();
+    selection.addRange(markerRange);
+
+    for (; ;) {
+      const currentUnderline = this.findUnderlineElement(marker);
+
+      if (!currentUnderline) {
+        break;
+      }
+
+      this.moveMarkerOutOfUnderline(marker, currentUnderline);
+    }
+
+    const firstChild = marker.firstChild;
+    const lastChild = marker.lastChild;
+
+    this.unwrapElement(marker);
+
+    const finalRange = firstChild && lastChild ? (() => {
+      const newRange = document.createRange();
+
+      newRange.setStartBefore(firstChild);
+      newRange.setEndAfter(lastChild);
+
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+
+      return newRange;
+    })() : undefined;
+
+    if (!finalRange) {
+      selection.removeAllRanges();
+    }
+
+    underlineAncestors.forEach((element) => {
+      if (element.textContent.length === 0) {
+        element.remove();
+      }
+    });
+  }
+
+  /**
+   * Check if a node or any of its parents is an underline tag
+   * @param node - The node to check
+   */
+  private hasUnderlineParent(node: Node | null): boolean {
+    return hasFormattingAncestor(node, isUnderlineTag);
+  }
+
+  /**
+   * Find an underline element in the parent chain
+   * @param node - The node to start searching from
+   */
+  private findUnderlineElement(node: Node | null): HTMLElement | null {
+    return findFormattingAncestor(node, isUnderlineTag);
+  }
+
+  /**
+   * Collect all underline ancestor elements within a range
+   * @param range - The range to search for underline ancestors
+   */
+  private collectUnderlineAncestors(range: Range): HTMLElement[] {
+    return collectFormattingAncestors(range, isUnderlineTag);
+  }
+
+  /**
+   * Get HTML content of a range with underline tags removed
+   * @param range - The range to extract HTML from
+   */
+  private getRangeHtmlWithoutUnderline(range: Range): string {
+    const contents = range.cloneContents();
+
+    this.removeNestedUnderline(contents);
+
+    const container = document.createElement('div');
+
+    container.appendChild(contents);
+
+    return container.innerHTML;
+  }
+
+  /**
+   * Remove nested underline tags from a root node
+   * @param root - The root node to process
+   */
+  private removeNestedUnderline(root: ParentNode): void {
+    const underlineNodes = root.querySelectorAll('u');
+
+    underlineNodes.forEach((node) => {
+      this.unwrapElement(node);
+    });
+  }
+
+  /**
+   * Unwrap an element by moving its children to the parent
+   * @param element - The element to unwrap
+   */
+  private unwrapElement(element: Element): void {
+    const parent = element.parentNode;
+
+    if (!parent) {
+      element.remove();
+
+      return;
+    }
+
+    while (element.firstChild) {
+      parent.insertBefore(element.firstChild, element);
+    }
+
+    parent.removeChild(element);
+  }
+
+  /**
+   * Replace the current range contents with provided HTML snippet
+   * @param range - Range to replace
+   * @param html - HTML string to insert
+   */
+  private replaceRangeWithHtml(range: Range, html: string): Range | undefined {
+    const fragment = this.createFragmentFromHtml(html);
+    const firstInserted = fragment.firstChild ?? null;
+    const lastInserted = fragment.lastChild ?? null;
+
+    range.deleteContents();
+
+    if (!firstInserted || !lastInserted) {
+      return;
+    }
+
+    range.insertNode(fragment);
+
+    const newRange = document.createRange();
+
+    newRange.setStartBefore(firstInserted);
+    newRange.setEndAfter(lastInserted);
+
+    return newRange;
+  }
+
+  /**
+   * Convert an HTML snippet to a document fragment
+   * @param html - HTML string to convert
+   */
+  private createFragmentFromHtml(html: string): DocumentFragment {
+    const template = document.createElement('template');
+
+    template.innerHTML = html;
+
+    return template.content;
+  }
+
+  /**
+   * Move a temporary marker element outside of an underline ancestor while preserving content order
+   * @param marker - Marker element wrapping the selection contents
+   * @param underlineElement - Underline ancestor containing the marker
+   */
+  private moveMarkerOutOfUnderline(marker: HTMLElement, underlineElement: HTMLElement): void {
+    const parent = underlineElement.parentNode;
+
+    if (!parent) {
+      return;
+    }
+
+    // Remove empty text nodes to ensure accurate child count
+    Array.from(underlineElement.childNodes).forEach((node) => {
+      if (node.nodeType === Node.TEXT_NODE && (node.textContent ?? '').length === 0) {
+        node.remove();
+      }
+    });
+
+    const isOnlyChild = underlineElement.childNodes.length === 1 && underlineElement.firstChild === marker;
+
+    if (isOnlyChild) {
+      underlineElement.replaceWith(marker);
+
+      return;
+    }
+
+    const isFirstChild = underlineElement.firstChild === marker;
+
+    if (isFirstChild) {
+      parent.insertBefore(marker, underlineElement);
+
+      return;
+    }
+
+    const isLastChild = underlineElement.lastChild === marker;
+
+    if (isLastChild) {
+      parent.insertBefore(marker, underlineElement.nextSibling);
+
+      return;
+    }
+
+    const trailingClone = underlineElement.cloneNode(false) as HTMLElement;
+
+    while (marker.nextSibling) {
+      trailingClone.appendChild(marker.nextSibling);
+    }
+
+    parent.insertBefore(trailingClone, underlineElement.nextSibling);
+    parent.insertBefore(marker, trailingClone);
+  }
+}

package/src/components/modules/rectangleSelection.ts

@@ -65,6 +65,13 @@ export class RectangleSelection extends Module {
    */
   private mousedown = false;
 
+  /**
+   * Set when mousedown starts from a contentEditable element that is within the
+   * editor's horizontal content bounds.  Prevents the toolbar from re-opening via
+   * the BlockHovered event while the user is dragging.  Cleared on mouseup.
+   */
+  private mouseDownWithinBoundsFromContentEditable = false;
+
   /**
    *  Is scrolling now
    */
@@ -213,6 +220,7 @@ export class RectangleSelection extends Module {
    */
   public endSelection(): void {
     this.mousedown = false;
+    this.mouseDownWithinBoundsFromContentEditable = false;
     this.startX = 0;
     this.startY = 0;
     this.anchorBlockIndex = null;
@@ -229,6 +237,18 @@ export class RectangleSelection extends Module {
     return this.isRectSelectionActivated || this.mousedown;
   }
 
+  /**
+   * Returns true when the user pressed down a mouse button within the editor's horizontal
+   * content bounds, even if the click originated on a contentEditable element (in which
+   * case rubber-band selection is not started but the toolbar is still closed).
+   *
+   * Used by the Toolbar module to suppress toolbar reopening while the user is dragging
+   * inside the editor content area.
+   */
+  public get isMouseDownWithinBounds(): boolean {
+    return this.mouseDownWithinBoundsFromContentEditable;
+  }
+
   /**
    * Mark that selection is end
    */
@@ -305,6 +325,24 @@ export class RectangleSelection extends Module {
 
     if (!startedFromContentEditable) {
       this.startSelection(mouseEvent.pageX, mouseEvent.pageY, mouseEvent.shiftKey);
+
+      return;
+    }
+
+    /**
+     * When dragging starts from a contentEditable element, track whether the
+     * pointer is within the editor's horizontal content bounds.
+     * On the first subsequent mousemove (i.e. when the user actually drags rather
+     * than just clicking), the toolbar will be closed and hover-based reopening
+     * will be suppressed while the mouse button is held.
+     */
+    const scrollLeft = this.getScrollLeft();
+    const pointerX = mouseEvent.pageX - scrollLeft;
+    const contentRect = this.Blok.UI.contentRect;
+    const withinEditorHorizontally = pointerX >= contentRect.left && pointerX <= contentRect.right;
+
+    if (withinEditorHorizontally) {
+      this.mouseDownWithinBoundsFromContentEditable = true;
     }
   }
 
@@ -313,6 +351,16 @@ export class RectangleSelection extends Module {
    * @param {MouseEvent} mouseEvent - mouse event payload
    */
   private processMouseMove(mouseEvent: MouseEvent): void {
+    /**
+     * When the user clicked inside a contentEditable element within the editor's
+     * horizontal bounds and is now dragging, close the toolbar on the first move.
+     * We defer this to mousemove (rather than mousedown) so that a plain click
+     * does not accidentally close the toolbar.
+     */
+    if (this.mouseDownWithinBoundsFromContentEditable) {
+      this.Blok.Toolbar.close();
+    }
+
     this.changingRectangle(mouseEvent);
     this.scrollByZones(mouseEvent.clientY);
   }

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

@@ -1009,9 +1009,12 @@ export class Toolbar extends Module<ToolbarNodes> {
        */
       this.eventsDispatcher.on(BlockHovered, (data) => {
         /**
-         * Do not move toolbar during drag or rectangle selection operations
+         * Do not move toolbar during drag, rectangle selection, or when the user
+         * started a mouse-drag from within the editor's content area (even if the
+         * drag originated on a contentEditable element, i.e. rubber-band is not
+         * activated but the toolbar was closed and should stay closed).
          */
-        if (this.Blok.DragManager.isDragging || this.Blok.RectangleSelection.isRectActivated()) {
+        if (this.Blok.DragManager.isDragging || this.Blok.RectangleSelection.isRectActivated() || this.Blok.RectangleSelection.isMouseDownWithinBounds) {
           return;
         }
 

package/src/components/shared/color-picker.ts

@@ -165,7 +165,11 @@ export function createColorPicker(options: ColorPickerOptions): ColorPickerHandl
     defaultSwatch.addEventListener('click', () => {
       onColorSelect(null, mode.key);
     });
-    onHover(defaultSwatch, `${i18n.t('tools.marker.default')} ${i18n.t(mode.labelKey).toLowerCase()}`, { placement: 'top' });
+    const defaultLabel = i18n.t('tools.colorPicker.defaultSwatchLabel')
+      .replace('{default}', i18n.t('tools.marker.default'))
+      .replace('{mode}', i18n.t(mode.labelKey).toLowerCase());
+
+    onHover(defaultSwatch, defaultLabel.charAt(0).toUpperCase() + defaultLabel.slice(1), { placement: 'top' });
     grid.appendChild(defaultSwatch);
 
     for (const preset of presets) {
@@ -193,7 +197,11 @@ export function createColorPicker(options: ColorPickerOptions): ColorPickerHandl
       swatch.addEventListener('click', () => {
         onColorSelect(swatchColor, mode.key);
       });
-      onHover(swatch, `${i18n.t('tools.colorPicker.color.' + preset.name)} ${i18n.t(mode.labelKey).toLowerCase()}`, { placement: 'top' });
+      const colorLabel = i18n.t('tools.colorPicker.colorSwatchLabel')
+        .replace('{color}', i18n.t('tools.colorPicker.color.' + preset.name))
+        .replace('{mode}', i18n.t(mode.labelKey).toLowerCase());
+
+      onHover(swatch, colorLabel.charAt(0).toUpperCase() + colorLabel.slice(1), { placement: 'top' });
       grid.appendChild(swatch);
     }
   };

package/src/full.ts

@@ -19,6 +19,8 @@ import { BoldInlineTool as Bold } from './components/inline-tools/inline-tool-bo
 import { ItalicInlineTool as Italic } from './components/inline-tools/inline-tool-italic';
 import { LinkInlineTool as Link } from './components/inline-tools/inline-tool-link';
 import { MarkerInlineTool as Marker } from './components/inline-tools/inline-tool-marker';
+import { UnderlineInlineTool as Underline } from './components/inline-tools/inline-tool-underline';
+import { StrikethroughInlineTool as Strikethrough } from './components/inline-tools/inline-tool-strikethrough';
 import { Header } from './tools/header';
 import { ListItem as List } from './tools/list';
 import { Paragraph } from './tools/paragraph';
@@ -35,6 +37,8 @@ export {
   Italic,
   Link,
   Marker,
+  Underline,
+  Strikethrough,
   defaultBlockTools,
   defaultInlineTools,
 } from './tools';
@@ -68,6 +72,8 @@ export const allTools = {
   ...defaultTools,
   bold: { class: Bold },
   italic: { class: Italic },
-  link: { class: Link },
   marker: { class: Marker },
+  underline: { class: Underline },
+  strikethrough: { class: Strikethrough },
+  link: { class: Link },
 } as const;

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 */