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

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

@@ -56,6 +56,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": "אַרײַנשטעלן שפּאַלט רעכטס",
@@ -158,5 +160,28 @@
   "tools.quote.defaultSize": "שטאַנדאַרד",
   "tools.quote.largeSize": "גרויס",
   "tools.code.codeTab": "קאָד",
-  "tools.code.previewTab": "פֿאָרויסבליק"
+  "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/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": "在右侧插入列",
@@ -158,5 +160,28 @@
   "tools.quote.defaultSize": "默认",
   "tools.quote.largeSize": "大",
   "tools.code.codeTab": "代码",
-  "tools.code.previewTab": "预览"
+  "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

@@ -488,6 +488,17 @@ export const IconWrap = `
 </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)
@@ -577,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/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/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/stories/EditorModes.stories.ts

@@ -5,7 +5,6 @@
  * - ReadOnlyMode: Editor in read-only state
  * - EmptyEditor: Editor with no initial content
  * - ToolboxOpenedMode: Editor with toolbox popover open
- * - NarrowMode: Editor in constrained width container
  *
  * Do not duplicate these stories in other files.
  */
@@ -84,52 +83,6 @@ export const ReadOnlyMode: Story = {
   },
 };
 
-/**
- * Narrow mode - editor in a constrained width container.
- * Toolbar actions move inside the content area.
- */
-export const NarrowMode: Story = {
-  args: {
-    data: sampleData,
-    readOnly: false,
-    width: 400,
-  },
-  parameters: {
-    chromatic: { delay: 500 },
-  },
-  play: async ({ canvasElement, step }) => {
-    await step('Wait for editor and toolbar to initialize', async () => {
-      await waitFor(
-        () => {
-          const block = canvasElement.querySelector(BLOCK_TESTID);
-
-          expect(block).toBeInTheDocument();
-        },
-        TIMEOUT_INIT
-      );
-      // Wait for toolbar to be created (happens in requestIdleCallback)
-      await waitForToolbar(canvasElement);
-    });
-
-    await step('Click block to show toolbar in narrow mode', async () => {
-      const block = canvasElement.querySelector(BLOCK_TESTID);
-
-      if (block) {
-        simulateClick(block);
-      }
-
-      await waitFor(
-        () => {
-          const toolbar = canvasElement.querySelector(TOOLBAR_TESTID);
-
-          expect(toolbar).toHaveAttribute('data-blok-opened', 'true');
-        },
-        TIMEOUT_ACTION
-      );
-    });
-  },
-};
-
 /**
  * Empty editor state - no blocks.
  */
@@ -214,7 +167,6 @@ export const ToolboxOpenedMode: Story = {
   args: {
     data: sampleData,
     readOnly: false,
-    width: 450,
   },
   parameters: {
     chromatic: { delay: 500 },
@@ -269,18 +221,6 @@ export const ToolboxOpenedMode: Story = {
   },
 };
 
-/**
- * Compact narrow editor (mobile-like).
- */
-export const CompactNarrow: Story = {
-  args: {
-    data: sampleData,
-    readOnly: false,
-    width: 320,
-    minHeight: 200,
-  },
-};
-
 /**
  * RTL (Right-to-Left) mode for languages like Arabic and Hebrew.
  * Text direction and toolbar positioning are mirrored.

package/src/styles/main.css

@@ -491,7 +491,7 @@
 
   /* Spacing (also powers w-*, h-*, min-w-*, min-h-*, size-*) */
   --spacing-content-width: 650px;
-  --spacing-narrow-mode-padding: 50px;
+
   --spacing-toolbox-btn: 26px;
   --spacing-toolbox-btn-mobile: 36px;
   --spacing-icon: 20px;
@@ -1128,8 +1128,12 @@
 /**
  * Content alignment
  * Applies horizontal alignment to block content based on the editor's contentAlign setting.
- * Left alignment is the default (no margin needed).
+ * Left alignment overrides the mx-auto Tailwind class on [data-blok-element-content].
  */
+[data-blok-content-align="left"] [data-blok-element-content] {
+  margin-left: 0;
+}
+
 [data-blok-content-align="center"] [data-blok-element-content] {
   margin-left: auto;
   margin-right: auto;
@@ -1204,6 +1208,44 @@
   @apply p-0 m-0 min-h-[1.6em];
 }
 
+/* ─── Cell content placement ──────────────────────────────────── */
+
+[data-blok-cell-placement="top-center"] {
+  align-items: center;
+}
+
+[data-blok-cell-placement="top-right"] {
+  align-items: flex-end;
+}
+
+[data-blok-cell-placement="middle-left"] {
+  justify-content: center;
+}
+
+[data-blok-cell-placement="middle-center"] {
+  align-items: center;
+  justify-content: center;
+}
+
+[data-blok-cell-placement="middle-right"] {
+  align-items: flex-end;
+  justify-content: center;
+}
+
+[data-blok-cell-placement="bottom-left"] {
+  justify-content: flex-end;
+}
+
+[data-blok-cell-placement="bottom-center"] {
+  align-items: center;
+  justify-content: flex-end;
+}
+
+[data-blok-cell-placement="bottom-right"] {
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
 /**
  * Exclude bare 'color' from transition-property inside table cells.
  * StyleManager applies transition-colors (which includes 'color') for smooth

package/src/tools/callout/emoji-picker/index.ts

@@ -613,8 +613,9 @@ export class EmojiPicker {
       this._body.appendChild(section);
     }
 
-    // Standard categories
-    const byCategory = groupEmojisByCategory(emojis);
+    // Standard categories (exclude curated emojis to avoid duplicates)
+    const curatedSet = new Set(CURATED_CALLOUT_EMOJIS);
+    const byCategory = groupEmojisByCategory(emojis.filter(e => !curatedSet.has(e.native)));
 
     for (const [category, categoryEmojis] of byCategory) {
       visibleCategories.add(category);

package/src/tools/code/code-keyboard.ts

@@ -15,7 +15,7 @@ export function handleCodeKeydown(
   }
 
   if (event.key === 'Enter') {
-    insertNewline();
+    insertNewline(codeElement);
     return true;
   }
 
@@ -32,20 +32,27 @@ export function handleCodeKeydown(
   return false;
 }
 
-function insertNewline(): void {
+function insertNewline(codeElement: HTMLElement): void {
   const selection = window.getSelection();
   if (!selection || selection.rangeCount === 0) return;
 
   const range = selection.getRangeAt(0);
-  range.deleteContents();
 
-  const newline = document.createTextNode('\n');
-  range.insertNode(newline);
-  range.setStartAfter(newline);
-  range.collapse(true);
+  const preCaretRange = range.cloneRange();
+  preCaretRange.selectNodeContents(codeElement);
+  preCaretRange.setEnd(range.startContainer, range.startOffset);
+  const caretOffset = preCaretRange.toString().length;
 
-  selection.removeAllRanges();
-  selection.addRange(range);
+  const text = codeElement.textContent ?? '';
+  const before = text.substring(0, caretOffset);
+  const after = text.substring(caretOffset);
+
+  while (codeElement.firstChild) {
+    codeElement.removeChild(codeElement.firstChild);
+  }
+  codeElement.appendChild(document.createTextNode(before + '\n' + after));
+
+  restoreCaretOffset(codeElement, caretOffset + 1);
 }
 
 function insertTab(): void {

package/src/tools/code/constants.ts

@@ -34,6 +34,7 @@ export const LANGUAGES: LanguageEntry[] = [
   { id: 'swift', name: 'Swift' },
   { id: 'kotlin', name: 'Kotlin' },
   { id: 'latex', name: 'LaTeX' },
+  { id: 'mermaid', name: 'Mermaid' },
   { id: 'sql', name: 'SQL' },
   { id: 'html', name: 'HTML' },
   { id: 'css', name: 'CSS' },
@@ -56,11 +57,11 @@ export const WRAPPER_STYLES = 'flex flex-col rounded-lg bg-bg-secondary overflow
 export const HEADER_STYLES = 'flex items-center gap-1 px-3 py-1.5 border-b border-border-primary text-xs text-gray-text';
 export const LANGUAGE_BUTTON_STYLES = 'px-1.5 py-0.5 rounded cursor-pointer bg-transparent border-0 text-xs text-gray-text font-medium transition-colors can-hover:hover:bg-item-hover-bg select-none';
 export const HEADER_BUTTON_STYLES = 'p-1 rounded cursor-pointer bg-transparent border-0 text-gray-text transition-colors can-hover:hover:bg-item-hover-bg flex items-center justify-center';
-export const CODE_AREA_STYLES = 'px-4 py-3 font-mono text-sm leading-relaxed outline-hidden whitespace-pre-wrap overflow-x-auto min-h-[1.5em]';
+export const CODE_AREA_STYLES = 'block px-4 py-3 font-mono text-sm leading-relaxed outline-hidden whitespace-pre-wrap overflow-x-auto min-h-[1.5em]';
 export const COPIED_FEEDBACK_STYLES = 'text-xs text-gray-text font-medium select-none';
 
 // Languages that support preview rendering
-export const PREVIEWABLE_LANGUAGES = new Set(['latex']);
+export const PREVIEWABLE_LANGUAGES = new Set(['latex', 'mermaid']);
 
 // i18n keys — preview tabs
 export const CODE_TAB_KEY = 'tools.code.codeTab';
@@ -70,4 +71,26 @@ export const PREVIEW_TAB_KEY = 'tools.code.previewTab';
 export const TAB_STYLES = 'px-2 py-0.5 rounded text-xs font-medium cursor-pointer border-0 transition-colors select-none';
 export const TAB_ACTIVE_STYLES = 'bg-blue-500 text-white';
 export const TAB_INACTIVE_STYLES = 'bg-transparent text-gray-text can-hover:hover:bg-item-hover-bg';
-export const PREVIEW_AREA_STYLES = 'px-4 py-3 overflow-x-auto min-h-[1.5em]';
+export const PREVIEW_AREA_STYLES = 'px-4 py-3 overflow-x-auto min-h-[1.5em] flex justify-center';
+
+// Shiki theme names for syntax highlighting
+export const SHIKI_LIGHT_THEME = 'one-light';
+export const SHIKI_DARK_THEME = 'vitesse-dark';
+
+// CSS selector for dark mode (Tailwind convention)
+export const DARK_MODE_SELECTOR = '.dark';
+
+// Languages that support syntax highlighting (all except plain text)
+export const HIGHLIGHTABLE_LANGUAGES = new Set(
+  LANGUAGES
+    .map((lang) => lang.id)
+    .filter((id) => id !== DEFAULT_LANGUAGE)
+);
+
+// i18n key — line numbers toggle
+export const LINE_NUMBERS_KEY = 'tools.code.lineNumbers';
+
+// CSS — line number gutter
+export const CODE_BODY_STYLES = 'flex overflow-hidden';
+export const GUTTER_STYLES = 'select-none text-right pr-3 py-3 font-mono text-sm leading-relaxed text-gray-text/40 border-r border-border-primary shrink-0';
+export const GUTTER_LINE_STYLES = 'leading-relaxed';

package/src/tools/code/dom-builder.ts

@@ -8,16 +8,21 @@ import {
   TAB_ACTIVE_STYLES,
   TAB_INACTIVE_STYLES,
   PREVIEW_AREA_STYLES,
+  CODE_BODY_STYLES,
+  GUTTER_STYLES,
+  GUTTER_LINE_STYLES,
 } from './constants';
-import { IconCopy, IconWrap } from '../../components/icons';
+import { IconCopy, IconWrap, IconLineNumbers } from '../../components/icons';
 
 export interface CodeDOMRefs {
   wrapper: HTMLElement;
   languageButton: HTMLButtonElement;
+  lineNumbersButton: HTMLButtonElement;
   copyButton: HTMLButtonElement;
   wrapButton: HTMLButtonElement;
   preElement: HTMLPreElement;
   codeElement: HTMLElement;
+  gutterElement: HTMLElement;
   codeTab: HTMLButtonElement | null;
   previewTab: HTMLButtonElement | null;
   previewElement: HTMLDivElement | null;
@@ -29,6 +34,7 @@ export interface BuildCodeDOMOptions {
   readOnly: boolean;
   copyLabel: string;
   wrapLabel: string;
+  lineNumbersLabel?: string;
   previewable?: boolean;
   codeTabLabel?: string;
   previewTabLabel?: string;
@@ -61,7 +67,7 @@ function buildPreviewElements(
 }
 
 export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
-  const { code, languageName, readOnly, copyLabel, wrapLabel, previewable, codeTabLabel, previewTabLabel } = options;
+  const { code, languageName, readOnly, copyLabel, wrapLabel, lineNumbersLabel, previewable, codeTabLabel, previewTabLabel } = options;
 
   // Wrapper
   const wrapper = document.createElement('div');
@@ -96,6 +102,14 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
   wrapButton.setAttribute('aria-label', wrapLabel);
   wrapButton.setAttribute('data-blok-testid', 'code-wrap-btn');
 
+  // Line numbers toggle button
+  const lineNumbersButton = document.createElement('button');
+  lineNumbersButton.type = 'button';
+  lineNumbersButton.className = HEADER_BUTTON_STYLES;
+  lineNumbersButton.innerHTML = IconLineNumbers;
+  lineNumbersButton.setAttribute('aria-label', lineNumbersLabel ?? 'Line numbers');
+  lineNumbersButton.setAttribute('data-blok-testid', 'code-line-numbers-btn');
+
   // Copy button
   const copyButton = document.createElement('button');
   copyButton.type = 'button';
@@ -114,10 +128,24 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
   }
 
   if (!readOnly) {
-    codeElement.setAttribute('contenteditable', 'true');
+    codeElement.setAttribute('contenteditable', 'plaintext-only');
     codeElement.setAttribute('spellcheck', 'false');
   }
 
+  // Line number gutter
+  const gutterElement = document.createElement('div');
+  gutterElement.className = GUTTER_STYLES;
+  gutterElement.setAttribute('aria-hidden', 'true');
+  gutterElement.setAttribute('data-blok-testid', 'code-gutter');
+
+  const lineCount = code ? code.split('\n').length : 1;
+  Array.from({ length: lineCount }, (_, idx) => {
+    const lineEl = document.createElement('div');
+    lineEl.className = GUTTER_LINE_STYLES;
+    lineEl.textContent = String(idx + 1);
+    gutterElement.appendChild(lineEl);
+  });
+
   // Assemble header
   header.appendChild(languageButton);
   header.appendChild(spacer);
@@ -127,6 +155,7 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
     header.appendChild(previewTab);
   }
 
+  header.appendChild(lineNumbersButton);
   header.appendChild(wrapButton);
   header.appendChild(copyButton);
 
@@ -134,13 +163,19 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
   const preElement = document.createElement('pre');
   preElement.appendChild(codeElement);
 
+  // Code body container (flex: gutter + pre)
+  const codeBody = document.createElement('div');
+  codeBody.className = CODE_BODY_STYLES;
+  codeBody.appendChild(gutterElement);
+  codeBody.appendChild(preElement);
+
   // Assemble wrapper
   wrapper.appendChild(header);
-  wrapper.appendChild(preElement);
+  wrapper.appendChild(codeBody);
 
   if (previewElement) {
     wrapper.appendChild(previewElement);
   }
 
-  return { wrapper, languageButton, copyButton, wrapButton, preElement, codeElement, codeTab, previewTab, previewElement };
+  return { wrapper, languageButton, lineNumbersButton, copyButton, wrapButton, preElement, codeElement, gutterElement, codeTab, previewTab, previewElement };
 }