@jackuait/blok 0.9.0 → 0.10.0-beta.10

package/src/components/modules/paste/handlers/html-handler.ts

@@ -77,24 +77,28 @@ export class HtmlHandler extends BasePasteHandler implements PasteHandler {
       const isDetailsElement =
         node.nodeType === Node.ELEMENT_NODE &&
         (node as HTMLElement).tagName === 'DETAILS';
+      const isAsideElement =
+        node.nodeType === Node.ELEMENT_NODE &&
+        (node as HTMLElement).tagName === 'ASIDE';
 
-      if (!isDetailsElement) {
+      if (!isDetailsElement && !isAsideElement) {
         expandedNodes.push({ node });
         continue;
       }
 
-      const toggleExpandedIndex = expandedNodes.length;
+      const parentExpandedIndex = expandedNodes.length;
 
       expandedNodes.push({ node });
 
       // Only direct children are extracted (not deeply nested structures), which
       // is correct for Google Docs DETAILS format where children are flat siblings.
+      // For ASIDE, ALL children become child blocks (no SUMMARY to skip).
       const childElements = Array.from((node as HTMLElement).children).filter(
-        (child) => child.tagName !== 'SUMMARY'
+        (child) => isAsideElement || child.tagName !== 'SUMMARY'
       );
 
       for (const child of childElements) {
-        expandedNodes.push({ node: child, parentExpandedIndex: toggleExpandedIndex });
+        expandedNodes.push({ node: child, parentExpandedIndex });
       }
     }
 
@@ -247,12 +251,11 @@ export class HtmlHandler extends BasePasteHandler implements PasteHandler {
 
     const isSubstitutable = tags.includes(element.tagName);
 
-    // DETAILS is a container-type substitutable element. Always return it as an
-    // atomic block so the toggle tool's onPaste receives the full <details>
-    // element (including <summary> and children), rather than having them split
-    // into flat blocks when the paragraph tool's <p> registration triggers
-    // containsAnotherToolTags = true.
-    if (isSubstitutable && element.tagName === 'DETAILS') {
+    // DETAILS and ASIDE are container-type substitutable elements. Always return
+    // them as atomic blocks so the tool's onPaste receives the full element
+    // (including children), rather than having them split into flat blocks when
+    // the paragraph tool's <p> registration triggers containsAnotherToolTags = true.
+    if (isSubstitutable && (element.tagName === 'DETAILS' || element.tagName === 'ASIDE')) {
       return [...nodes, destNode, element];
     }
 

package/src/components/modules/paste/handlers/index.ts

@@ -7,3 +7,4 @@ export { HtmlHandler } from './html-handler';
 export { PatternHandler } from './pattern-handler';
 export { TableCellsHandler } from './table-cells-handler';
 export { TextHandler } from './text-handler';
+export { MarkdownHandler } from '../../../../markdown/markdown-handler';

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

@@ -9,6 +9,7 @@ import type { PasteHandler } from './handlers/base';
 import { BlokDataHandler } from './handlers/blok-data-handler';
 import { FilesHandler } from './handlers/files-handler';
 import { HtmlHandler } from './handlers/html-handler';
+import { MarkdownHandler } from '../../../markdown/markdown-handler';
 import { PatternHandler } from './handlers/pattern-handler';
 import { TableCellsHandler } from './handlers/table-cells-handler';
 import { TextHandler } from './handlers/text-handler';
@@ -50,6 +51,7 @@ export class Paste extends Module {
       new TableCellsHandler(this.Blok, this.toolRegistry, this.sanitizerBuilder),
       new FilesHandler(this.Blok, this.toolRegistry, this.sanitizerBuilder),
       new PatternHandler(this.Blok, this.toolRegistry, this.sanitizerBuilder),
+      new MarkdownHandler(this.Blok, this.toolRegistry, this.sanitizerBuilder),
       new HtmlHandler(this.Blok, this.toolRegistry, this.sanitizerBuilder),
       new TextHandler(this.Blok, this.toolRegistry, this.sanitizerBuilder, this.config),
     ];
@@ -192,6 +194,10 @@ export class Paste extends Module {
       return plainData;
     }
 
+    if (handler instanceof MarkdownHandler) {
+      return plainData;
+    }
+
     if (handler instanceof TextHandler) {
       return plainData;
     }

package/src/components/modules/renderer.ts

@@ -12,6 +12,14 @@ import {
 } from '../utils/data-model-transform';
 import { migrateMarkColors } from '../utils/color-migration';
 
+/**
+ * Map of legacy EditorJS tool names to their Blok equivalents.
+ * Used during rendering to transparently migrate old article data.
+ */
+const TOOL_ALIASES: Readonly<Record<string, string>> = {
+  delimiter: 'divider',
+};
+
 /**
  * Module that responsible for rendering Blocks on blok initialization
  */
@@ -111,6 +119,15 @@ export class Renderer extends Module {
               };
             }
 
+            const aliasTarget = TOOL_ALIASES[originalTool];
+
+            if (aliasTarget !== undefined && Tools.available.has(aliasTarget)) {
+              return {
+                tool: aliasTarget,
+                data: blockToolData,
+              };
+            }
+
             logLabeled(`Tool «${originalTool}» is not found. Check 'tools' property at the Blok config.`, 'warn');
 
             return {

package/src/components/modules/ui.ts

@@ -462,29 +462,17 @@ export class UI extends Module<UINodes> {
     this.nodes.wrapper.setAttribute(DATA_ATTR.interface, BLOK_INTERFACE_VALUE);
     this.nodes.wrapper.setAttribute(DATA_ATTR.editor, '');
     this.nodes.wrapper.setAttribute('data-blok-testid', 'blok-editor');
+    this.nodes.wrapper.setAttribute(DATA_ATTR.contentAlign, this.config.style?.contentAlign ?? 'left');
     if (this.isRtl) {
       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/ui/toolbox.ts

@@ -535,6 +535,15 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
       const userSearchTerms = tool.searchTerms ?? [];
       const mergedSearchTerms = [...new Set([...librarySearchTerms, ...userSearchTerms])];
 
+      // Resolve translated search aliases from searchTermKeys
+      for (const key of toolboxItem.searchTermKeys ?? []) {
+        const fullKey = `searchTerms.${key}`;
+
+        if (this.i18n.has(fullKey)) {
+          mergedSearchTerms.push(this.i18n.t(fullKey));
+        }
+      }
+
       // Use entry-level shortcut if available, otherwise fall back to tool-level shortcut (for first entry only)
       const shortcut = toolboxItem.shortcut ?? (displaySecondaryLabel ? tool.shortcut : undefined);
 

package/src/components/utils/caret/boundaries.ts

@@ -56,13 +56,24 @@ export const checkContenteditableSliceForEmptiness = (
   /**
    * Check if we have any tags in the slice
    * We should not ignore them to allow navigation inside (e.g. empty bold tag)
+   *
+   * When checking the right side, trailing <br> tags are browser artifacts
+   * in contenteditable elements (sentinels for cursor positioning after Shift+Enter).
+   * If the only significant tags are <br> and there's no text content,
+   * the slice is effectively empty — skip the early return.
    */
-  const hasSignificantTags = tempDiv.querySelectorAll(
+  const significantTags = tempDiv.querySelectorAll(
     'img, br, hr, input, area, base, col, embed, link, meta, param, source, track, wbr'
-  ).length > 0;
+  );
 
-  if (hasSignificantTags) {
-    return false;
+  if (significantTags.length > 0) {
+    const isOnlyTrailingBrs = direction === 'right'
+      && tempDiv.querySelectorAll('img, hr, input, area, base, col, embed, link, meta, param, source, track, wbr').length === 0
+      && textContent.trim() === '';
+
+    if (!isOnlyTrailingBrs) {
+      return false;
+    }
   }
 
   /**

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

@@ -1078,6 +1078,17 @@ export class PopoverDesktop extends PopoverAbstract {
 
     this.toggleNothingFoundMessage(isNothingFound);
 
+    // Recalculate position since popover height may have changed (trigger-based popovers only;
+    // non-trigger popovers use CSS variable positioning that doesn't need pixel recalculation)
+    if (this.trigger && this.nodes.popover.hasAttribute(DATA_ATTR.popoverOpened)) {
+      const { top, left, openTop, openLeft } = this.calculatePosition();
+
+      this.nodes.popover.style.top = `${top}px`;
+      this.nodes.popover.style.left = `${left}px`;
+      this.setOpenTop(openTop);
+      this.setOpenLeft(openLeft);
+    }
+
     // Build flippable elements list: top-level matches + promoted items
     const topLevelFlippable = isEmptyQuery
       ? this.flippableElements

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