@jackuait/blok 0.10.0-beta.16 → 0.10.0-beta.18

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

@@ -4,15 +4,14 @@ import {
   LANGUAGE_BUTTON_STYLES,
   HEADER_BUTTON_STYLES,
   CODE_AREA_STYLES,
-  TAB_STYLES,
-  TAB_ACTIVE_STYLES,
-  TAB_INACTIVE_STYLES,
   PREVIEW_AREA_STYLES,
   CODE_BODY_STYLES,
   GUTTER_STYLES,
   GUTTER_LINE_STYLES,
+  MORE_MENU_STYLES,
+  MORE_MENU_ITEM_STYLES,
 } from './constants';
-import { IconCopy, IconWrap, IconLineNumbers } from '../../components/icons';
+import { IconCopy, IconCode, IconChevronDown, IconEllipsis, IconWrap, IconLineNumbers } from '../../components/icons';
 
 export interface CodeDOMRefs {
   wrapper: HTMLElement;
@@ -23,9 +22,10 @@ export interface CodeDOMRefs {
   preElement: HTMLPreElement;
   codeElement: HTMLElement;
   gutterElement: HTMLElement;
-  codeTab: HTMLButtonElement | null;
-  previewTab: HTMLButtonElement | null;
+  previewToggleButton: HTMLButtonElement | null;
   previewElement: HTMLDivElement | null;
+  moreButton: HTMLButtonElement;
+  moreMenu: HTMLElement;
 }
 
 export interface BuildCodeDOMOptions {
@@ -36,38 +36,30 @@ export interface BuildCodeDOMOptions {
   wrapLabel: string;
   lineNumbersLabel?: string;
   previewable?: boolean;
-  codeTabLabel?: string;
-  previewTabLabel?: string;
+  previewToggleLabel?: string;
 }
 
 function buildPreviewElements(
-  codeTabLabel?: string,
-  previewTabLabel?: string,
-): { codeTab: HTMLButtonElement; previewTab: HTMLButtonElement; previewElement: HTMLDivElement } {
-  const codeTab = document.createElement('button');
+  previewToggleLabel?: string,
+): { previewToggleButton: HTMLButtonElement; previewElement: HTMLDivElement } {
+  const previewToggleButton = document.createElement('button');
 
-  codeTab.type = 'button';
-  codeTab.className = `${TAB_STYLES} ${TAB_INACTIVE_STYLES}`;
-  codeTab.textContent = codeTabLabel ?? 'Code';
-  codeTab.setAttribute('data-blok-testid', 'code-code-tab');
-
-  const previewTab = document.createElement('button');
-
-  previewTab.type = 'button';
-  previewTab.className = `${TAB_STYLES} ${TAB_ACTIVE_STYLES}`;
-  previewTab.textContent = previewTabLabel ?? 'Preview';
-  previewTab.setAttribute('data-blok-testid', 'code-preview-tab');
+  previewToggleButton.type = 'button';
+  previewToggleButton.className = HEADER_BUTTON_STYLES;
+  previewToggleButton.innerHTML = IconCode;
+  previewToggleButton.setAttribute('aria-label', previewToggleLabel ?? 'Preview');
+  previewToggleButton.setAttribute('data-blok-testid', 'code-preview-toggle-btn');
 
   const previewElement = document.createElement('div');
 
   previewElement.className = PREVIEW_AREA_STYLES;
   previewElement.setAttribute('data-blok-testid', 'code-preview');
 
-  return { codeTab, previewTab, previewElement };
+  return { previewToggleButton, previewElement };
 }
 
 export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
-  const { code, languageName, readOnly, copyLabel, wrapLabel, lineNumbersLabel, previewable, codeTabLabel, previewTabLabel } = options;
+  const { code, languageName, readOnly, copyLabel, wrapLabel, lineNumbersLabel, previewable, previewToggleLabel } = options;
 
   // Wrapper
   const wrapper = document.createElement('div');
@@ -77,38 +69,30 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
   const header = document.createElement('div');
   header.className = HEADER_STYLES;
 
-  // Language button (opens language picker)
+  // Language button (opens language picker) — includes text + chevron icon
   const languageButton = document.createElement('button');
   languageButton.type = 'button';
   languageButton.className = LANGUAGE_BUTTON_STYLES;
-  languageButton.textContent = languageName;
   languageButton.setAttribute('aria-haspopup', 'listbox');
   languageButton.setAttribute('data-blok-testid', 'code-language-btn');
 
+  const langText = document.createElement('span');
+  langText.textContent = languageName;
+  languageButton.appendChild(langText);
+
+  const chevronSpan = document.createElement('span');
+  chevronSpan.className = 'inline-flex items-center ml-0.5 -mr-0.5';
+  chevronSpan.innerHTML = IconChevronDown;
+  languageButton.appendChild(chevronSpan);
+
   // Spacer
   const spacer = document.createElement('div');
   spacer.className = 'flex-1';
 
-  // Tab buttons (only when previewable)
-  const { codeTab, previewTab, previewElement } = previewable
-    ? buildPreviewElements(codeTabLabel, previewTabLabel)
-    : { codeTab: null, previewTab: null, previewElement: null };
-
-  // Wrap toggle button
-  const wrapButton = document.createElement('button');
-  wrapButton.type = 'button';
-  wrapButton.className = HEADER_BUTTON_STYLES;
-  wrapButton.innerHTML = IconWrap;
-  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');
+  // Preview toggle button (only when previewable and not read-only)
+  const { previewToggleButton, previewElement } = previewable
+    ? buildPreviewElements(previewToggleLabel)
+    : { previewToggleButton: null, previewElement: null };
 
   // Copy button
   const copyButton = document.createElement('button');
@@ -118,6 +102,54 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
   copyButton.setAttribute('aria-label', copyLabel);
   copyButton.setAttribute('data-blok-testid', 'code-copy-btn');
 
+  // More button (ellipsis)
+  const moreButton = document.createElement('button');
+  moreButton.type = 'button';
+  moreButton.className = HEADER_BUTTON_STYLES;
+  moreButton.innerHTML = IconEllipsis;
+  moreButton.setAttribute('aria-label', 'More');
+  moreButton.setAttribute('aria-haspopup', 'true');
+  moreButton.setAttribute('data-blok-testid', 'code-more-btn');
+
+  // More menu dropdown
+  const moreMenu = document.createElement('div');
+  moreMenu.className = MORE_MENU_STYLES;
+  moreMenu.hidden = true;
+  moreMenu.setAttribute('data-blok-testid', 'code-more-menu');
+
+  // Line numbers toggle (inside more menu)
+  const lineNumbersButton = document.createElement('button');
+  lineNumbersButton.type = 'button';
+  lineNumbersButton.className = MORE_MENU_ITEM_STYLES;
+  lineNumbersButton.setAttribute('data-blok-testid', 'code-line-numbers-btn');
+
+  const lineNumIconSpan = document.createElement('span');
+  lineNumIconSpan.className = 'flex items-center justify-center w-5 h-5';
+  lineNumIconSpan.innerHTML = IconLineNumbers;
+  lineNumbersButton.appendChild(lineNumIconSpan);
+
+  const lineNumText = document.createElement('span');
+  lineNumText.textContent = lineNumbersLabel ?? 'Line numbers';
+  lineNumbersButton.appendChild(lineNumText);
+
+  // Wrap toggle (inside more menu)
+  const wrapButton = document.createElement('button');
+  wrapButton.type = 'button';
+  wrapButton.className = MORE_MENU_ITEM_STYLES;
+  wrapButton.setAttribute('data-blok-testid', 'code-wrap-btn');
+
+  const wrapIconSpan = document.createElement('span');
+  wrapIconSpan.className = 'flex items-center justify-center w-5 h-5';
+  wrapIconSpan.innerHTML = IconWrap;
+  wrapButton.appendChild(wrapIconSpan);
+
+  const wrapText = document.createElement('span');
+  wrapText.textContent = wrapLabel;
+  wrapButton.appendChild(wrapText);
+
+  moreMenu.appendChild(lineNumbersButton);
+  moreMenu.appendChild(wrapButton);
+
   // Code area
   const codeElement = document.createElement('code');
   codeElement.className = CODE_AREA_STYLES;
@@ -146,19 +178,23 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
     gutterElement.appendChild(lineEl);
   });
 
-  // Assemble header
+  // Assemble header: [language] [spacer] [preview toggle?] [copy] [more ▸ menu]
   header.appendChild(languageButton);
   header.appendChild(spacer);
 
-  if (codeTab && previewTab) {
-    header.appendChild(codeTab);
-    header.appendChild(previewTab);
+  if (previewToggleButton) {
+    header.appendChild(previewToggleButton);
   }
 
-  header.appendChild(lineNumbersButton);
-  header.appendChild(wrapButton);
   header.appendChild(copyButton);
 
+  // More wrapper (relative position anchor for absolute dropdown)
+  const moreWrapper = document.createElement('div');
+  moreWrapper.className = 'relative';
+  moreWrapper.appendChild(moreButton);
+  moreWrapper.appendChild(moreMenu);
+  header.appendChild(moreWrapper);
+
   // Pre wrapper for semantic HTML
   const preElement = document.createElement('pre');
   preElement.appendChild(codeElement);
@@ -177,5 +213,5 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
     wrapper.appendChild(previewElement);
   }
 
-  return { wrapper, languageButton, lineNumbersButton, copyButton, wrapButton, preElement, codeElement, gutterElement, codeTab, previewTab, previewElement };
+  return { wrapper, languageButton, lineNumbersButton, copyButton, wrapButton, preElement, codeElement, gutterElement, previewToggleButton, previewElement, moreButton, moreMenu };
 }

package/src/tools/code/index.ts

@@ -26,11 +26,7 @@ import {
   LANGUAGE_KEY,
   COPIED_FEEDBACK_STYLES,
   PREVIEWABLE_LANGUAGES,
-  CODE_TAB_KEY,
-  PREVIEW_TAB_KEY,
-  TAB_STYLES,
-  TAB_ACTIVE_STYLES,
-  TAB_INACTIVE_STYLES,
+  PREVIEW_TOGGLE_KEY,
   PREVIEW_AREA_STYLES,
   GUTTER_LINE_STYLES,
 } from './constants';
@@ -76,8 +72,7 @@ export class CodeTool implements BlockTool {
       wrapLabel: this.api.i18n.t(WRAP_LINES_KEY),
       lineNumbersLabel: this.api.i18n.t(LINE_NUMBERS_KEY),
       previewable: this.readOnly ? false : isPreviewable,
-      codeTabLabel: this.api.i18n.t(CODE_TAB_KEY),
-      previewTabLabel: this.api.i18n.t(PREVIEW_TAB_KEY),
+      previewToggleLabel: this.api.i18n.t(PREVIEW_TOGGLE_KEY),
     });
 
     this._dom = dom;
@@ -86,7 +81,10 @@ export class CodeTool implements BlockTool {
     dom.gutterElement.hidden = !this._lineNumbers;
     dom.lineNumbersButton.addEventListener('click', () => this.toggleLineNumbers());
 
-    // Read-only + previewable: show preview only, hide code, no tabs
+    // More menu toggle
+    dom.moreButton.addEventListener('click', () => this.toggleMoreMenu());
+
+    // Read-only + previewable: show preview only, hide code, no toggle
     if (this.readOnly && isPreviewable) {
       const previewEl = document.createElement('div');
 
@@ -99,8 +97,8 @@ export class CodeTool implements BlockTool {
       void this.renderPreview();
     }
 
-    // Edit mode + previewable: show tabs, default to preview
-    if (!this.readOnly && isPreviewable && dom.codeTab && dom.previewTab && dom.previewElement) {
+    // Edit mode + previewable: show preview toggle, default to preview
+    if (!this.readOnly && isPreviewable && dom.previewToggleButton && dom.previewElement) {
       this._previewActive = true;
       dom.preElement.hidden = true;
       dom.gutterElement.hidden = true;
@@ -108,8 +106,7 @@ export class CodeTool implements BlockTool {
       this._previewContainer = dom.previewElement;
       void this.renderPreview();
 
-      dom.codeTab.addEventListener('click', () => this.showCode());
-      dom.previewTab.addEventListener('click', () => this.showPreview());
+      dom.previewToggleButton.addEventListener('click', () => this.togglePreview());
     }
 
     if (!this.readOnly) {
@@ -156,8 +153,16 @@ export class CodeTool implements BlockTool {
     void this.highlightCode();
   }
 
+  private togglePreview(): void {
+    if (this._previewActive) {
+      this.showCode();
+    } else {
+      this.showPreview();
+    }
+  }
+
   private showCode(): void {
-    if (!this._dom?.previewElement || !this._dom.codeTab || !this._dom.previewTab) {
+    if (!this._dom?.previewElement || !this._dom.previewToggleButton) {
       return;
     }
 
@@ -165,12 +170,10 @@ export class CodeTool implements BlockTool {
     this._dom.preElement.hidden = false;
     this._dom.gutterElement.hidden = !this._lineNumbers;
     this._dom.previewElement.hidden = true;
-    this._dom.codeTab.className = `${TAB_STYLES} ${TAB_ACTIVE_STYLES}`;
-    this._dom.previewTab.className = `${TAB_STYLES} ${TAB_INACTIVE_STYLES}`;
   }
 
   private showPreview(): void {
-    if (!this._dom?.previewElement || !this._dom.codeTab || !this._dom.previewTab) {
+    if (!this._dom?.previewElement || !this._dom.previewToggleButton) {
       return;
     }
 
@@ -178,13 +181,19 @@ export class CodeTool implements BlockTool {
     this._dom.preElement.hidden = true;
     this._dom.gutterElement.hidden = true;
     this._dom.previewElement.hidden = false;
-    this._dom.codeTab.className = `${TAB_STYLES} ${TAB_INACTIVE_STYLES}`;
-    this._dom.previewTab.className = `${TAB_STYLES} ${TAB_ACTIVE_STYLES}`;
 
     // Re-render preview with current code content
     void this.renderPreview();
   }
 
+  private toggleMoreMenu(): void {
+    if (!this._dom) {
+      return;
+    }
+
+    this._dom.moreMenu.hidden = !this._dom.moreMenu.hidden;
+  }
+
   private async renderPreview(): Promise<void> {
     if (!this._previewContainer) {
       return;
@@ -281,7 +290,12 @@ export class CodeTool implements BlockTool {
     this._data.language = id;
 
     if (this._dom) {
-      this._dom.languageButton.textContent = this.getLanguageName(id);
+      // Update the text span inside the language button (first child)
+      const textSpan = this._dom.languageButton.querySelector('span');
+
+      if (textSpan) {
+        textSpan.textContent = this.getLanguageName(id);
+      }
     }
 
     this._picker?.setActiveLanguage(id);

package/src/tools/table/table-cell-blocks.ts

@@ -1067,7 +1067,9 @@ export class TableCellBlocks {
 
     const savedScrollY = window.scrollY;
 
-    const deletePromises = blockIndices.map(index => this.api.blocks.delete(index));
+    const deletePromises = blockIndices.map(index => {
+      return this.api.blocks.delete(index);
+    });
 
     void Promise.all(deletePromises).then(() => {
       if (window.scrollY !== savedScrollY) {