@jackuait/blok 0.9.0 → 0.10.0-beta.10

package/src/components/i18n/locales/zh/messages.json

@@ -71,6 +71,8 @@
   "tools.table.clearSelection": "清除",
   "tools.table.copySelection": "复制",
   "tools.table.cellColor": "颜色",
+  "tools.table.mergeCells": "合并单元格",
+  "tools.table.splitCell": "拆分单元格",
   "tools.table.headerColumn": "标题列",
   "tools.table.insertColumnLeft": "在左侧插入列",
   "tools.table.insertColumnRight": "在右侧插入列",
@@ -88,6 +90,42 @@
   "toolNames.strikethrough": "删除线",
   "toolNames.callout": "标注",
   "toolNames.divider": "分隔线",
+  "toolNames.quote": "引用",
+  "searchTerms.divider": "分割线",
+  "searchTerms.separator": "分隔符",
+  "searchTerms.delimiter": "定界符",
+  "searchTerms.splitter": "拆分线",
+  "searchTerms.paragraph": "段落",
+  "searchTerms.plain": "纯文本",
+  "searchTerms.title": "名称",
+  "searchTerms.header": "标头",
+  "searchTerms.heading": "标题",
+  "searchTerms.toggle": "折叠",
+  "searchTerms.collapsible": "可折叠",
+  "searchTerms.bullet": "项目符号",
+  "searchTerms.unordered": "无序",
+  "searchTerms.list": "列表",
+  "searchTerms.ordered": "有序",
+  "searchTerms.number": "编号",
+  "searchTerms.checkbox": "复选框",
+  "searchTerms.task": "任务",
+  "searchTerms.todo": "待办",
+  "searchTerms.check": "勾选",
+  "searchTerms.collapse": "收起",
+  "searchTerms.expand": "展开",
+  "searchTerms.accordion": "折叠面板",
+  "searchTerms.table": "表格",
+  "searchTerms.grid": "网格",
+  "searchTerms.spreadsheet": "电子表格",
+  "searchTerms.callout": "标注",
+  "searchTerms.note": "备注",
+  "searchTerms.info": "信息",
+  "searchTerms.warning": "警告",
+  "searchTerms.tip": "提示",
+  "searchTerms.alert": "提醒",
+  "searchTerms.quote": "引用",
+  "searchTerms.blockquote": "块引用",
+  "searchTerms.citation": "出处",
   "tools.callout.placeholder": "标注",
   "tools.callout.addEmoji": "添加表情",
   "tools.callout.editIcon": "编辑图标",
@@ -116,5 +154,34 @@
   "tools.callout.colorBlue": "蓝色",
   "tools.callout.colorPurple": "紫色",
   "tools.callout.colorPink": "粉色",
-  "tools.callout.colorRed": "红色"
+  "tools.callout.colorRed": "红色",
+  "tools.quote.size": "引用大小",
+  "tools.quote.placeholder": "引用",
+  "tools.quote.defaultSize": "默认",
+  "tools.quote.largeSize": "大",
+  "tools.code.codeTab": "代码",
+  "tools.code.previewTab": "预览",
+  "tools.table.placement": "位置",
+  "tools.table.placementTopLeft": "左上",
+  "tools.table.placementTopCenter": "居中上",
+  "tools.table.placementTopRight": "右上",
+  "tools.table.placementMiddleLeft": "左中",
+  "tools.table.placementMiddleCenter": "居中",
+  "tools.table.placementMiddleRight": "右中",
+  "tools.table.placementBottomLeft": "左下",
+  "tools.table.placementBottomCenter": "居中下",
+  "tools.table.placementBottomRight": "右下",
+  "toolNames.code": "代码",
+  "toolNames.inlineCode": "代码",
+  "tools.code.placeholder": "编写代码…",
+  "tools.code.language": "语言",
+  "tools.code.copied": "已复制！",
+  "tools.code.copyCode": "复制代码",
+  "tools.code.wrapLines": "自动换行",
+  "tools.code.searchLanguage": "搜索语言...",
+  "tools.code.lineNumbers": "行号",
+  "searchTerms.code": "代码",
+  "searchTerms.snippet": "片段",
+  "searchTerms.program": "程序",
+  "searchTerms.pre": "pre"
 }

package/src/components/icons/index.ts

@@ -297,6 +297,14 @@ export const IconHeaderRow = `
 </svg>
 `;
 
+// Preview/Eye icon
+export const IconPreview = `
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+  <circle cx="12" cy="12" r="3"/>
+</svg>
+`;
+
 // Table with highlighted left column (header column)
 export const IconHeaderColumn = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -433,6 +441,16 @@ export const IconHash = `
 </svg>
 `;
 
+// Quote icon
+export const IconQuote = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 4v12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M9 6h7" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M9 10h7" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M9 14h5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
+`;
+
 export const IconCallout = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" y1="10" x2="15" y2="10"/><line x1="12" y1="7" x2="12" y2="13"/></svg>`;
 
 export const IconPaintRoller = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
@@ -448,6 +466,39 @@ export const IconDivider = `
 </svg>
 `;
 
+// Code inline icon (angle brackets: </>)
+export const IconCode = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m7 6-4 4 4 4m6-8 4 4-4 4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+// Code block icon (brackets with slash)
+export const IconCodeBlock = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m6 7-3 3 3 3m8-6 3 3-3 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m12 5-4 10" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
+`;
+
+// Line wrap icon
+export const IconWrap = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 6h12M4 10h8a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H9m0 0 2-2m-2 2 2 2" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+// Line numbers icon (gutter marks + code lines)
+export const IconLineNumbers = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7 4v12" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" opacity="0.35"/>
+  <circle cx="4.5" cy="7" r="0.75" fill="currentColor"/>
+  <circle cx="4.5" cy="10" r="0.75" fill="currentColor"/>
+  <circle cx="4.5" cy="13" r="0.75" fill="currentColor"/>
+  <path d="M10 7h6M10 10h6M10 13h4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
+`;
+
 // Emoji Picker Category Icons
 
 // Star icon (Callout category)
@@ -537,3 +588,30 @@ export const IconEmojiFlag = `
   <path d="M5 3c2 0 3 1.5 5 1.5S14 3 16 3v8c-2 0-3 1.5-5 1.5S7 11 5 11" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
+
+// Merge cells icon (two cells merging into one)
+export const IconMergeCells = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 4v12" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-dasharray="1.5 2"/>
+  <path d="M5.5 7 8.5 10 5.5 13" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14.5 7 11.5 10 14.5 13" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+// Split cell icon (one cell splitting into two)
+export const IconSplitCell = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 3v18"/><path d="M8 8l4 4-4 4"/><path d="M16 8l-4 4 4 4"/></svg>`;
+
+// Placement icon (3x3 alignment dot grid)
+export const IconPlacement = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="6" cy="6" r="1.25" fill="currentColor"/>
+  <circle cx="10" cy="6" r="1.25" fill="currentColor"/>
+  <circle cx="14" cy="6" r="1.25" fill="currentColor"/>
+  <circle cx="6" cy="10" r="1.25" fill="currentColor"/>
+  <circle cx="10" cy="10" r="1.25" fill="currentColor"/>
+  <circle cx="14" cy="10" r="1.25" fill="currentColor"/>
+  <circle cx="6" cy="14" r="1.25" fill="currentColor"/>
+  <circle cx="10" cy="14" r="1.25" fill="currentColor"/>
+  <circle cx="14" cy="14" r="1.25" fill="currentColor"/>
+</svg>
+`;

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

@@ -0,0 +1,399 @@
+import type { InlineTool, SanitizerConfig } from '../../../types';
+import type { MenuConfig } from '../../../types/tools';
+import { IconCode } from '../icons';
+
+import {
+  isRangeFormatted,
+  findFormattingAncestor,
+  collectFormattingAncestors,
+} from './utils/formatting-range-utils';
+
+/**
+ * Check if an element is a code tag (<code>)
+ * @param element - The element to check
+ */
+const isCodeTag = (element: Element): boolean => {
+  return element.tagName === 'CODE';
+};
+
+/**
+ * Code Inline Tool
+ *
+ * Inline Toolbar Tool
+ *
+ * Style selected text with inline code
+ */
+export class CodeInlineTool implements InlineTool {
+  /**
+   * Specifies Tool as Inline Toolbar Tool
+   * @returns {boolean}
+   */
+  public static isInline = true;
+
+  /**
+   * Title for the Inline Tool
+   */
+  public static title = 'Code';
+
+  /**
+   * Translation key for i18n
+   */
+  public static titleKey = 'inlineCode';
+
+  /**
+   * Sanitizer Rule
+   * Leave <code> tags
+   * @returns {object}
+   */
+  public static get sanitize(): SanitizerConfig {
+    return {
+      code: {},
+    } as SanitizerConfig;
+  }
+
+  /**
+   * Create button for Inline Toolbar
+   */
+  public render(): MenuConfig {
+    return {
+      icon: IconCode,
+      name: 'code',
+      onActivate: () => {
+        this.toggleCode();
+      },
+      isActive: () => {
+        const selection = window.getSelection();
+
+        return selection ? this.isSelectionVisuallyCode(selection) : false;
+      },
+    };
+  }
+
+  /**
+   * Shortcut for code tool
+   */
+  public static shortcut = 'CMD+E';
+
+  /**
+   * Apply or remove code formatting using modern Selection API
+   */
+  private toggleCode(): void {
+    const selection = window.getSelection();
+
+    if (!selection || selection.rangeCount === 0) {
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+
+    if (range.collapsed) {
+      this.toggleCollapsedCode(range, selection);
+
+      return;
+    }
+
+    const shouldUnwrap = this.isRangeCode(range, { ignoreWhitespace: true });
+
+    if (shouldUnwrap) {
+      this.unwrapCodeTags(range);
+    } else {
+      this.wrapWithCode(range);
+    }
+  }
+
+  /**
+   * Handle toggle for collapsed selection (caret)
+   * @param range - Current range
+   * @param selection - Current selection
+   */
+  private toggleCollapsedCode(range: Range, selection: Selection): void {
+    const isCode = this.isRangeCode(range, { ignoreWhitespace: true });
+
+    if (isCode) {
+      const textNode = document.createTextNode('\u200B');
+
+      range.insertNode(textNode);
+      range.selectNode(textNode);
+      this.unwrapCodeTags(range);
+
+      const newRange = document.createRange();
+
+      newRange.setStart(textNode, 1);
+      newRange.setEnd(textNode, 1);
+
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+    } else {
+      const code = document.createElement('code');
+      const textNode = document.createTextNode('\u200B');
+
+      code.appendChild(textNode);
+      range.insertNode(code);
+
+      const newRange = document.createRange();
+
+      newRange.setStart(textNode, 1);
+      newRange.setEnd(textNode, 1);
+
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+    }
+  }
+
+  /**
+   * Check if current selection is within a code tag
+   * @param selection - The Selection object to check
+   */
+  private isSelectionVisuallyCode(selection: Selection): boolean {
+    if (selection.rangeCount === 0) {
+      return false;
+    }
+
+    const range = selection.getRangeAt(0);
+
+    return this.isRangeCode(range, { ignoreWhitespace: true });
+  }
+
+  /**
+   * Check if a range contains code text
+   * @param range - The range to check
+   * @param options - Options for checking code status
+   */
+  private isRangeCode(range: Range, options: { ignoreWhitespace: boolean }): boolean {
+    return isRangeFormatted(range, isCodeTag, options);
+  }
+
+  /**
+   * Wrap selection with <code> tag
+   * @param range - The Range object containing the selection to wrap
+   */
+  private wrapWithCode(range: Range): void {
+    const html = this.getRangeHtmlWithoutCode(range);
+    const insertedRange = this.replaceRangeWithHtml(range, `<code>${html}</code>`);
+    const selection = window.getSelection();
+
+    if (selection && insertedRange) {
+      selection.removeAllRanges();
+      selection.addRange(insertedRange);
+    }
+  }
+
+  /**
+   * Remove code tags (<code>) while preserving content
+   * @param range - The Range object containing the selection to unwrap
+   */
+  private unwrapCodeTags(range: Range): void {
+    const codeAncestors = this.collectCodeAncestors(range);
+    const selection = window.getSelection();
+
+    if (!selection) {
+      return;
+    }
+
+    const marker = document.createElement('span');
+    const fragment = range.extractContents();
+
+    marker.appendChild(fragment);
+    this.removeNestedCode(marker);
+
+    range.insertNode(marker);
+
+    const markerRange = document.createRange();
+
+    markerRange.selectNodeContents(marker);
+    selection.removeAllRanges();
+    selection.addRange(markerRange);
+
+    for (; ;) {
+      const currentCode = this.findCodeElement(marker);
+
+      if (!currentCode) {
+        break;
+      }
+
+      this.moveMarkerOutOfCode(marker, currentCode);
+    }
+
+    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();
+    }
+
+    codeAncestors.forEach((element) => {
+      if (element.textContent.length === 0) {
+        element.remove();
+      }
+    });
+  }
+
+  /**
+   * Find a code element in the parent chain
+   * @param node - The node to start searching from
+   */
+  private findCodeElement(node: Node | null): HTMLElement | null {
+    return findFormattingAncestor(node, isCodeTag);
+  }
+
+  /**
+   * Collect all code ancestor elements within a range
+   * @param range - The range to search for code ancestors
+   */
+  private collectCodeAncestors(range: Range): HTMLElement[] {
+    return collectFormattingAncestors(range, isCodeTag);
+  }
+
+  /**
+   * Get HTML content of a range with code tags removed
+   * @param range - The range to extract HTML from
+   */
+  private getRangeHtmlWithoutCode(range: Range): string {
+    const contents = range.cloneContents();
+
+    this.removeNestedCode(contents);
+
+    const container = document.createElement('div');
+
+    container.appendChild(contents);
+
+    return container.innerHTML;
+  }
+
+  /**
+   * Remove nested code tags from a root node
+   * @param root - The root node to process
+   */
+  private removeNestedCode(root: ParentNode): void {
+    const codeNodes = root.querySelectorAll('code');
+
+    codeNodes.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 a code ancestor while preserving content order
+   * @param marker - Marker element wrapping the selection contents
+   * @param codeElement - Code ancestor containing the marker
+   */
+  private moveMarkerOutOfCode(marker: HTMLElement, codeElement: HTMLElement): void {
+    const parent = codeElement.parentNode;
+
+    if (!parent) {
+      return;
+    }
+
+    // Remove empty text nodes to ensure accurate child count
+    Array.from(codeElement.childNodes).forEach((node) => {
+      if (node.nodeType === Node.TEXT_NODE && (node.textContent ?? '').length === 0) {
+        node.remove();
+      }
+    });
+
+    const isOnlyChild = codeElement.childNodes.length === 1 && codeElement.firstChild === marker;
+
+    if (isOnlyChild) {
+      codeElement.replaceWith(marker);
+
+      return;
+    }
+
+    const isFirstChild = codeElement.firstChild === marker;
+
+    if (isFirstChild) {
+      parent.insertBefore(marker, codeElement);
+
+      return;
+    }
+
+    const isLastChild = codeElement.lastChild === marker;
+
+    if (isLastChild) {
+      parent.insertBefore(marker, codeElement.nextSibling);
+
+      return;
+    }
+
+    const trailingClone = codeElement.cloneNode(false) as HTMLElement;
+
+    while (marker.nextSibling) {
+      trailingClone.appendChild(marker.nextSibling);
+    }
+
+    parent.insertBefore(trailingClone, codeElement.nextSibling);
+    parent.insertBefore(marker, trailingClone);
+  }
+}

package/src/components/modules/api/blocks.ts

@@ -1,6 +1,7 @@
 import type { BlockToolData, OutputBlockData, OutputData, ToolConfig } from '../../../../types';
 import type { BlockAPI as BlockAPIInterface, Blocks } from '../../../../types/api';
 import type { BlockTuneData } from '../../../../types/block-tunes/block-tune-data';
+import type { MarkdownImportConfig } from '../../../markdown/types';
 import { isInsideTableCell, isRestrictedInTableCell } from '../../../tools/table/table-restrictions';
 import { Module } from '../../__module';
 import { Block } from '../../block';
@@ -245,6 +246,22 @@ export class BlocksAPI extends Module {
     }
   }
 
+  /**
+   * Import Markdown string as blocks.
+   * Lazy-loads the markdown converter on first call.
+   * @param md - Markdown source string
+   * @param options - Optional configuration for tool mapping and extensions
+   */
+  public async importMarkdown(md: string, options?: MarkdownImportConfig): Promise<OutputData> {
+    const { markdownToBlocks } = await import('../../../markdown/index');
+    const blocks = await markdownToBlocks(md, options);
+    const data: OutputData = { blocks };
+
+    await this.render(data);
+
+    return data;
+  }
+
   /**
    * Insert new Block and returns it's API
    * @param {string} type — Tool name

package/src/components/modules/api/ui.ts

@@ -17,9 +17,6 @@ export class UiAPI extends Module {
       get isMobile(): boolean {
         return uiModule.isMobile;
       },
-      /**
-       * There can be added some UI methods, like toggleThinMode() etc
-       */
     };
   }
 

package/src/components/modules/blockEvents/composers/blockSelectionKeys.ts

@@ -32,19 +32,36 @@ export class BlockSelectionKeys extends BlockEventComposer {
    */
   private canIndentSelectedListItems(): boolean {
     const { BlockSelection, BlockManager } = this.Blok;
+    const selectedSet = new Set(BlockSelection.selectedBlocks);
 
     for (const block of BlockSelection.selectedBlocks) {
       const blockIndex = BlockManager.getBlockIndex(block);
 
-      if (blockIndex === undefined || blockIndex === 0) {
+      if (blockIndex === undefined) {
         return false;
       }
 
-      const previousBlock = BlockManager.getBlockByIndex(blockIndex - 1);
+      const previousBlock = blockIndex > 0
+        ? BlockManager.getBlockByIndex(blockIndex - 1)
+        : undefined;
 
-      if (!previousBlock || previousBlock.name !== LIST_TOOL_NAME) {
+      const isFirstInGroup = !previousBlock || previousBlock.name !== LIST_TOOL_NAME;
+
+      // First-in-group items can nest one level; mid-list items can't exceed previous depth
+      if (isFirstInGroup && this.getListBlockDepth(block) >= 1) {
         return false;
       }
+      if (isFirstInGroup) {
+        continue;
+      }
+
+      /**
+       * If the predecessor is also selected, both will be indented together,
+       * so the relative depth difference is preserved — skip the check.
+       */
+      if (selectedSet.has(previousBlock)) {
+        continue;
+      }
 
       if (this.getListBlockDepth(block) > this.getListBlockDepth(previousBlock)) {
         return false;