@jackuait/blok 0.10.0-beta.5 → 0.10.0-beta.7

package/src/components/modules/ui.ts

@@ -467,25 +467,12 @@ export class UI extends Module<UINodes> {
       this.nodes.wrapper.setAttribute(DATA_ATTR.rtl, 'true');
     }
     this.nodes.redactor = $.make('div', [
-      // Narrow mode: add left margin on non-mobile screens to make room for toolbar buttons
-      'not-mobile:group-data-[blok-narrow=true]:ml-(--spacing-narrow-mode-padding)',
-      // RTL narrow mode: add right margin instead
-      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:mr-(--spacing-narrow-mode-padding)',
-      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:ml-0',
       // Firefox empty contenteditable fix
       '[&_[contenteditable]:empty]:after:content-["\\feff_"]',
     ]);
     this.nodes.redactor.setAttribute(DATA_ATTR.redactor, '');
     this.nodes.redactor.setAttribute('data-blok-testid', 'redactor');
 
-    /**
-     * If Blok has injected into the narrow container, enable Narrow Mode
-     * @todo Forced layout. Get rid of this feature
-     */
-    if (this.nodes.holder.offsetWidth < this.contentRect.width) {
-      this.nodes.wrapper.setAttribute(DATA_ATTR.narrow, 'true');
-    }
-
     /**
      * Create dedicated bottom zone element
      */

package/src/components/modules/uiControllers/controllers/keyboard.ts

@@ -78,21 +78,6 @@ export class KeyboardController extends Controller {
         return;
       }
 
-      const target = event.target;
-
-      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-        return;
-      }
-
-      // Skip events from nested editors
-      if (target instanceof Element) {
-        const closestEditor = target.closest('[data-blok-testid="blok-editor"]');
-
-        if (closestEditor !== null && closestEditor !== this.Blok.UI.nodes.wrapper) {
-          return;
-        }
-      }
-
       if (KEYS_REQUIRING_CARET_CAPTURE.has(event.key)) {
         this.Blok.YjsManager.markCaretBeforeChange();
       }
@@ -104,20 +89,6 @@ export class KeyboardController extends Controller {
    * @param event - keyboard event
    */
   private handleKeydown(event: KeyboardEvent): void {
-    const target = event.target;
-
-    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-      return;
-    }
-
-    if (target instanceof Element) {
-      const closestEditor = target.closest('[data-blok-testid="blok-editor"]');
-
-      if (closestEditor !== null && closestEditor !== this.Blok.UI.nodes.wrapper) {
-        return;
-      }
-    }
-
     const key = event.key ?? '';
 
     switch (key) {

package/src/components/modules/uiControllers/controllers/selection.ts

@@ -167,22 +167,10 @@ export class SelectionController extends Controller {
    * @returns true if current block should be updated
    */
   private shouldUpdateCurrentBlock(): boolean {
-    const focusedElement = Selection.anchorElement;
-
-    if (!focusedElement || !this.wrapperElement) {
-      return false;
-    }
-
     /**
-     * Skip updating current block when focus is inside a nested editor instance.
-     * The closest editor wrapper must match this instance's wrapper.
+     * Always update current block when focus moves to a different block.
+     * This handles Tab key navigation, programmatic focus, and accessibility tools.
      */
-    const closestEditor = focusedElement.closest('[data-blok-testid="blok-editor"]');
-
-    if (closestEditor !== null && closestEditor !== this.wrapperElement) {
-      return false;
-    }
-
     return true;
   }
 }

package/src/components/ui/toolbox.ts

@@ -411,6 +411,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
 
     this.popover = new PopoverClass({
+      scopeElement: this.api.ui.nodes.redactor,
       trigger: this.triggerElement || this.nodes.toolbox,
       leftAlignElement: this.leftAlignElement,
       messages: {

package/src/components/utils/popover/popover-position.ts

@@ -32,9 +32,7 @@ export interface ResolvedPosition {
 
 /**
  * Determines whether the popover should flip to the alternate side.
- * Returns true only when the popover fits on the alternate side but not the preferred side.
- * When neither side fits, stays on the preferred side so the popover remains adjacent
- * to the anchor instead of getting clamped to a distant boundary edge.
+ * Returns true when the popover doesn't fit on the preferred side and the alternate side has more (or equal) space.
  */
 function shouldFlip(popoverDimension: number, spaceOnPreferred: number, spaceOnAlternate: number): boolean {
   if (popoverDimension <= spaceOnPreferred) {
@@ -45,7 +43,7 @@ function shouldFlip(popoverDimension: number, spaceOnPreferred: number, spaceOnA
     return true;
   }
 
-  return false;
+  return spaceOnAlternate > spaceOnPreferred;
 }
 
 /**

package/src/markdown/index.ts

@@ -0,0 +1,63 @@
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import type { Extension as MdastExtension } from 'mdast-util-from-markdown';
+import { gfm } from 'micromark-extension-gfm';
+import { gfmFromMarkdown } from 'mdast-util-gfm';
+import type { Extension as MicromarkExtension } from 'micromark-util-types';
+import type { OutputBlockData } from '../../types/data-formats/output-data';
+import type { MarkdownImportConfig } from './types';
+import { mdastToBlocks } from './mdast-to-blocks';
+
+export type { MarkdownImportConfig, ToolMapEntry } from './types';
+
+const MATH_SIGNAL = /\$\$[\s\S]+?\$\$|(?<!\$)\$(?!\$)(?=\S)[^$]+(?<=\S)\$(?!\$)/;
+
+/**
+ * Lazily load math micromark/mdast extensions only when needed.
+ */
+async function loadMathExtensions(): Promise<{
+  mathSyntax: MicromarkExtension;
+  mathFromMarkdown: MdastExtension;
+}> {
+  const [{ math }, { mathFromMarkdown }] = await Promise.all([
+    import('micromark-extension-math'),
+    import('mdast-util-math'),
+  ]);
+
+  return { mathSyntax: math(), mathFromMarkdown: mathFromMarkdown() };
+}
+
+/**
+ * Convert a Markdown string to an array of Blok OutputBlockData.
+ *
+ * @param md - Markdown source string
+ * @param config - Optional configuration for tool mapping, GFM, and extensions
+ * @returns Array of OutputBlockData ready for `blok.blocks.render()` or `blok.blocks.insertMany()`
+ */
+export async function markdownToBlocks(md: string, config: MarkdownImportConfig = {}): Promise<OutputBlockData[]> {
+  const enableGfm = config.gfm !== false;
+  const hasMath = MATH_SIGNAL.test(md);
+
+  const extensions = [
+    ...(enableGfm ? [gfm()] : []),
+    ...(config.extensions ?? []),
+  ];
+
+  const mdastExtensions = [
+    ...(enableGfm ? [gfmFromMarkdown()] : []),
+    ...(config.mdastExtensions ?? []),
+  ];
+
+  if (hasMath) {
+    const { mathSyntax, mathFromMarkdown } = await loadMathExtensions();
+
+    extensions.push(mathSyntax);
+    mdastExtensions.push(mathFromMarkdown);
+  }
+
+  const tree = fromMarkdown(md, {
+    extensions,
+    mdastExtensions,
+  });
+
+  return mdastToBlocks(tree, config);
+}

package/src/markdown/markdown-handler.ts

@@ -0,0 +1,110 @@
+import type { BlockToolData } from '../../types';
+import type { BlokModules } from '../types-internal/blok-modules';
+import type { SanitizerConfigBuilder } from '../components/modules/paste/sanitizer-config';
+import type { ToolRegistry } from '../components/modules/paste/tool-registry';
+import type { HandlerContext } from '../components/modules/paste/types';
+import type { PasteHandler } from '../components/modules/paste/handlers/base';
+import { BasePasteHandler } from '../components/modules/paste/handlers/base';
+import { Block } from '../components/block';
+
+/**
+ * Patterns that indicate text is likely Markdown rather than plain text.
+ * Each must be unlikely to appear in normal prose.
+ */
+const MARKDOWN_SIGNALS: RegExp[] = [
+  /^#{1,6}\s/m,                   // ATX headings: # Heading
+  /^```/m,                         // Fenced code blocks
+  /\|\s*---/,                      // GFM table separator: | --- |
+  /^- \[[ x]\]/m,                  // Task list items: - [ ] or - [x]
+  /\[.+?\]\(.+?\)/,               // Markdown links: [text](url)
+  /\*\*.+?\*\*/,                   // Bold: **text**
+  /!\[/,                           // Image: ![
+  /\$\$[\s\S]+?\$\$/,             // Block math: $$...$$
+  /(?<!\$)\$(?!\$)(?=\S)[^$]+(?<=\S)\$(?!\$)/, // Inline math: $...$
+];
+
+/**
+ * Check if a plain-text string contains strong Markdown signals.
+ */
+export function hasMarkdownSignals(text: string): boolean {
+  if (!text) {
+    return false;
+  }
+
+  return MARKDOWN_SIGNALS.some((pattern) => pattern.test(text));
+}
+
+/**
+ * Paste handler that detects and converts Markdown text.
+ * Priority 30: between TextHandler (10) and HtmlHandler (40).
+ * Lazy-loads the converter on first use.
+ *
+ * Uses BlockManager.insertMany() to insert converted blocks directly,
+ * preserving all block data (list depth, table cells, etc.) that
+ * would be lost if mapped through the DOM-based paste pipeline.
+ */
+export class MarkdownHandler extends BasePasteHandler implements PasteHandler {
+  constructor(
+    Blok: BlokModules,
+    toolRegistry: ToolRegistry,
+    sanitizerBuilder: SanitizerConfigBuilder
+  ) {
+    super(Blok, toolRegistry, sanitizerBuilder);
+  }
+
+  canHandle(data: unknown): number {
+    if (typeof data !== 'string' || !data.trim()) {
+      return 0;
+    }
+
+    return hasMarkdownSignals(data) ? 30 : 0;
+  }
+
+  async handle(data: unknown, context: HandlerContext): Promise<boolean> {
+    if (typeof data !== 'string') {
+      return false;
+    }
+
+    const { markdownToBlocks } = await import('./index');
+    const outputBlocks = await markdownToBlocks(data);
+
+    if (!outputBlocks.length) {
+      return false;
+    }
+
+    const { BlockManager, Caret } = this.Blok;
+
+    // Replace empty default block if present
+    const currentBlock = BlockManager.currentBlock;
+    const shouldReplace = context.canReplaceCurrentBlock && currentBlock !== undefined && currentBlock.isEmpty;
+    const insertIndex = shouldReplace
+      ? BlockManager.currentBlockIndex
+      : BlockManager.currentBlockIndex + 1;
+
+    // Compose Block instances from OutputBlockData
+    const blocksToInsert = outputBlocks.map(({ id, type, data: blockData, parent }) =>
+      BlockManager.composeBlock({
+        id,
+        tool: type,
+        data: blockData as BlockToolData,
+        parentId: parent,
+      })
+    );
+
+    BlockManager.insertMany(blocksToInsert, insertIndex);
+
+    // Remove the replaced empty block
+    if (shouldReplace && currentBlock !== undefined) {
+      await BlockManager.removeBlock(currentBlock, false);
+    }
+
+    // Set caret to end of last inserted block
+    const lastBlock = blocksToInsert[blocksToInsert.length - 1];
+
+    if (lastBlock instanceof Block) {
+      Caret.setToBlock(lastBlock, Caret.positions.END);
+    }
+
+    return true;
+  }
+}