@jackuait/blok 0.10.0-beta.4 → 0.10.0-beta.6

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;
+  }
+}

package/src/markdown/mdast-to-blocks.ts

@@ -0,0 +1,418 @@
+import type { Root, Nodes, List, ListItem, PhrasingContent, Table, Blockquote, RootContent } from 'mdast';
+import type { OutputBlockData } from '../../types/data-formats/output-data';
+import type { MarkdownImportConfig } from './types';
+import { phrasingToHtml } from './phrasing-to-html';
+
+/**
+ * Creates a scoped ID generator. Each call to mdastToBlocks gets a fresh generator.
+ */
+function createIdGenerator(): () => string {
+  const prefix = `md-${Date.now().toString(36)}`;
+  const state = { counter: 0 };
+
+  return () => `${prefix}-${(state.counter++).toString(36)}`;
+}
+
+/**
+ * Convert an mdast tree to an array of Blok OutputBlockData.
+ */
+export function mdastToBlocks(tree: Root, config: MarkdownImportConfig = {}): OutputBlockData[] {
+  const generateId = createIdGenerator();
+
+  return convertNodes(tree.children, config, 0, generateId);
+}
+
+function convertNodes(
+  nodes: RootContent[],
+  config: MarkdownImportConfig,
+  listDepth: number,
+  generateId: () => string,
+): OutputBlockData[] {
+  const blocks: OutputBlockData[] = [];
+
+  for (const node of nodes) {
+    const result = convertNode(node, config, listDepth, generateId);
+
+    if (result) {
+      blocks.push(...result);
+    }
+  }
+
+  return blocks;
+}
+
+function convertNode(
+  node: RootContent,
+  config: MarkdownImportConfig,
+  listDepth: number,
+  generateId: () => string,
+): OutputBlockData[] | null {
+  // 1. Check toolMap first
+  if (config.toolMap?.[node.type]) {
+    return handleToolMap(node, config, generateId);
+  }
+
+  // 2. Built-in handlers
+  const builtInResult = handleBuiltInNode(node, config, listDepth, generateId);
+
+  if (builtInResult !== undefined) {
+    return builtInResult;
+  }
+
+  // 3. onUnknownNode hook
+  if (config.onUnknownNode) {
+    return tryOnUnknownNode(config.onUnknownNode, node);
+  }
+
+  // 4. Fallback: extract any text content as paragraph
+  if ('value' in node && typeof node.value === 'string') {
+    return [makeParagraph(escapeHtml(node.value), generateId)];
+  }
+
+  return null;
+}
+
+/**
+ * Handle built-in node types. Returns undefined if node type is not built-in.
+ */
+function handleBuiltInNode(
+  node: RootContent,
+  config: MarkdownImportConfig,
+  listDepth: number,
+  generateId: () => string,
+): OutputBlockData[] | null | undefined {
+  if (node.type === 'paragraph') {
+    return handleParagraph(node.children as Array<{ type: string; value?: string; children?: unknown[] }>, generateId);
+  }
+
+  if (node.type === 'heading') {
+    return [makeBlock('header', { text: phrasingToHtml(node.children), level: node.depth }, generateId)];
+  }
+
+  if (node.type === 'thematicBreak') {
+    return [makeBlock('divider', {}, generateId)];
+  }
+
+  if (node.type === 'list') {
+    return handleList(node, config, listDepth, generateId);
+  }
+
+  if (node.type === 'blockquote') {
+    return handleBlockquote(node, generateId);
+  }
+
+  if (node.type === 'table') {
+    return handleTable(node, generateId);
+  }
+
+  if (node.type === 'code') {
+    return [makeBlock('code', {
+      code: node.value,
+      language: node.lang ?? 'plain text',
+    }, generateId)];
+  }
+
+  if (node.type === 'math') {
+    return [makeBlock('code', { code: node.value, language: 'latex' }, generateId)];
+  }
+
+  if (node.type === 'html') {
+    return handleFallback(node, config, escapeHtml(node.value), generateId);
+  }
+
+  return undefined;
+}
+
+type ParagraphChild = { type: string; value?: string; children?: unknown[] };
+
+/**
+ * Convert a paragraph's phrasing children to blocks.
+ * Splits on inlineMath nodes, emitting each as a latex code block.
+ */
+function handleParagraph(children: ParagraphChild[], generateId: () => string): OutputBlockData[] {
+  const hasInlineMath = children.some(c => c.type === 'inlineMath');
+
+  if (!hasInlineMath) {
+    return [makeParagraph(phrasingToHtml(children as PhrasingContent[]), generateId)];
+  }
+
+  return splitOnInlineMath(children, generateId);
+}
+
+function splitOnInlineMath(children: ParagraphChild[], generateId: () => string): OutputBlockData[] {
+  const blocks: OutputBlockData[] = [];
+  const segments = groupByInlineMath(children);
+
+  for (const segment of segments) {
+    if (segment.type === 'math') {
+      blocks.push(makeBlock('code', { code: segment.value, language: 'latex' }, generateId));
+      continue;
+    }
+
+    const text = phrasingToHtml(segment.nodes as PhrasingContent[]).trim();
+
+    if (text) {
+      blocks.push(makeParagraph(text, generateId));
+    }
+  }
+
+  return blocks;
+}
+
+type MathSegment = { type: 'math'; value: string } | { type: 'text'; nodes: ParagraphChild[] };
+
+function groupByInlineMath(children: ParagraphChild[]): MathSegment[] {
+  const segments: MathSegment[] = [];
+  const textNodes: ParagraphChild[] = [];
+
+  for (const child of children) {
+    if (child.type !== 'inlineMath') {
+      textNodes.push(child);
+      continue;
+    }
+
+    if (textNodes.length > 0) {
+      segments.push({ type: 'text', nodes: [...textNodes] });
+      textNodes.length = 0;
+    }
+
+    segments.push({ type: 'math', value: child.value ?? '' });
+  }
+
+  if (textNodes.length > 0) {
+    segments.push({ type: 'text', nodes: textNodes });
+  }
+
+  return segments;
+}
+
+function tryOnUnknownNode(
+  onUnknownNode: (node: Nodes) => OutputBlockData[] | null,
+  node: RootContent,
+): OutputBlockData[] | null {
+  try {
+    return onUnknownNode(node as Nodes);
+  } catch (e) {
+    console.warn(`markdownToBlocks: onUnknownNode threw for node type "${node.type}"`, e);
+
+    return null;
+  }
+}
+
+function handleToolMap(
+  node: RootContent,
+  config: MarkdownImportConfig,
+  generateId: () => string,
+): OutputBlockData[] {
+  const toolMap = config.toolMap;
+
+  if (!toolMap) {
+    return [];
+  }
+
+  const entry = toolMap[node.type];
+
+  try {
+    const block: OutputBlockData = {
+      id: generateId(),
+      type: entry.tool,
+      data: entry.data(node as Nodes),
+    };
+
+    if (entry.children) {
+      const childBlocks = entry.children(
+        node as Nodes,
+        (childNodes) => convertNodes(childNodes as RootContent[], config, 0, generateId),
+      );
+
+      return [block, ...childBlocks];
+    }
+
+    return [block];
+  } catch (e) {
+    console.warn(`markdownToBlocks: toolMap handler threw for node type "${node.type}"`, e);
+
+    return [];
+  }
+}
+
+function handleList(
+  list: List,
+  config: MarkdownImportConfig,
+  depth: number,
+  generateId: () => string,
+): OutputBlockData[] {
+  const blocks: OutputBlockData[] = [];
+
+  for (const [index, item] of list.children.entries()) {
+    blocks.push(...handleListItem(item, list, config, depth, index, generateId));
+  }
+
+  return blocks;
+}
+
+function resolveListStyle(isChecklist: boolean, ordered: boolean | null | undefined): string {
+  if (isChecklist) {
+    return 'checklist';
+  }
+
+  return ordered ? 'ordered' : 'unordered';
+}
+
+function handleListItem(
+  item: ListItem,
+  list: List,
+  config: MarkdownImportConfig,
+  depth: number,
+  index: number,
+  generateId: () => string,
+): OutputBlockData[] {
+  const blocks: OutputBlockData[] = [];
+  const isChecklist = item.checked !== null && item.checked !== undefined;
+  const style = resolveListStyle(isChecklist, list.ordered);
+
+  // Extract text from the first paragraph child
+  const paragraphChild = item.children.find(
+    (c): c is Extract<typeof c, { type: 'paragraph' }> => c.type === 'paragraph',
+  );
+  const text = paragraphChild ? phrasingToHtml(paragraphChild.children) : '';
+
+  const data: Record<string, unknown> = { text, style, depth };
+
+  if (isChecklist) {
+    data.checked = item.checked;
+  }
+
+  if (list.ordered && index === 0 && list.start !== null && list.start !== undefined && list.start !== 1) {
+    data.start = list.start;
+  }
+
+  blocks.push(makeBlock('list', data, generateId));
+
+  // Process nested lists (increase depth)
+  for (const child of item.children) {
+    if (child.type === 'list') {
+      blocks.push(...handleList(child, config, depth + 1, generateId));
+    }
+  }
+
+  return blocks;
+}
+
+function handleBlockquote(bq: Blockquote, generateId: () => string): OutputBlockData[] {
+  const parts: string[] = [];
+
+  for (const child of bq.children) {
+    if (child.type === 'paragraph') {
+      parts.push(phrasingToHtml(child.children));
+      continue;
+    }
+
+    if (!('children' in child) || !Array.isArray(child.children)) {
+      continue;
+    }
+
+    // For non-paragraph flow content, extract text
+    const innerPhrasing = child.children.filter(
+      (c): c is PhrasingContent => 'value' in c || 'children' in c,
+    );
+
+    if (innerPhrasing.length > 0) {
+      parts.push(phrasingToHtml(innerPhrasing));
+    }
+  }
+
+  return [makeBlock('quote', { text: parts.join('<br>'), size: 'default' }, generateId)];
+}
+
+function handleTable(table: Table, generateId: () => string): OutputBlockData[] {
+  const blocks: OutputBlockData[] = [];
+  const tableId = generateId();
+  const content: Array<Array<{ blocks: string[] }>> = [];
+
+  for (const row of table.children) {
+    const rowContent = processTableRow(row.children, tableId, blocks, generateId);
+
+    content.push(rowContent);
+  }
+
+  const tableBlock: OutputBlockData = {
+    id: tableId,
+    type: 'table',
+    data: {
+      withHeadings: table.children.length > 1,
+      withHeadingColumn: false,
+      content,
+    },
+  };
+
+  // Table block first, then cell blocks
+  return [tableBlock, ...blocks];
+}
+
+function processTableRow(
+  cells: Table['children'][number]['children'],
+  tableId: string,
+  blocks: OutputBlockData[],
+  generateId: () => string,
+): Array<{ blocks: string[] }> {
+  const rowContent: Array<{ blocks: string[] }> = [];
+
+  for (const cell of cells) {
+    const cellText = phrasingToHtml(cell.children);
+    const cellBlockId = generateId();
+
+    blocks.push({
+      id: cellBlockId,
+      type: 'paragraph',
+      data: { text: cellText },
+      parent: tableId,
+    });
+
+    rowContent.push({ blocks: [cellBlockId] });
+  }
+
+  return rowContent;
+}
+
+function handleFallback(
+  node: RootContent,
+  config: MarkdownImportConfig,
+  fallbackText: string,
+  generateId: () => string,
+): OutputBlockData[] | null {
+  // Try onUnknownNode first for unmapped block types
+  if (config.onUnknownNode) {
+    const result = tryOnUnknownNode(config.onUnknownNode, node);
+
+    // null means "skip this node" — respect the caller's decision
+    // non-null means the hook handled it
+    if (result === null) {
+      return null;
+    }
+
+    return result;
+  }
+
+  return [makeParagraph(fallbackText, generateId)];
+}
+
+function makeParagraph(text: string, generateId: () => string): OutputBlockData {
+  return makeBlock('paragraph', { text }, generateId);
+}
+
+function makeBlock(type: string, data: Record<string, unknown>, generateId: () => string): OutputBlockData {
+  return {
+    id: generateId(),
+    type,
+    data,
+  };
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}