@jackuait/blok 0.10.0 → 0.10.2

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

@@ -2,30 +2,41 @@ import {
   WRAPPER_STYLES,
   HEADER_STYLES,
   LANGUAGE_BUTTON_STYLES,
+  HEADER_CONTROLS_STYLES,
   HEADER_BUTTON_STYLES,
+  HEADER_BUTTON_MATCHED_STYLES,
   CODE_AREA_STYLES,
   PREVIEW_AREA_STYLES,
   CODE_BODY_STYLES,
   GUTTER_STYLES,
   GUTTER_LINE_STYLES,
-  MORE_MENU_STYLES,
-  MORE_MENU_ITEM_STYLES,
+  VIEW_MODE_CONTAINER_STYLES,
+  VIEW_MODE_BUTTON_STYLES,
+  VIEW_MODE_BUTTON_ACTIVE_STYLES,
+  VIEW_MODE_PREVIEW_BUTTON_STYLES,
+  VIEW_MODE_PREVIEW_BUTTON_ACTIVE_STYLES,
+  SPLIT_CONTAINER_STYLES,
+  SPLIT_HALF_STYLES,
 } from './constants';
-import { IconCopy, IconCode, IconChevronDown, IconEllipsis, IconWrap, IconLineNumbers } from '../../components/icons';
+import type { CodeViewMode } from './constants';
+import { IconCopy, IconCode, IconPreview, IconSplitView, IconChevronDown } from '../../components/icons';
 
 export interface CodeDOMRefs {
   wrapper: HTMLElement;
   languageButton: HTMLButtonElement;
-  lineNumbersButton: HTMLButtonElement;
   copyButton: HTMLButtonElement;
-  wrapButton: HTMLButtonElement;
   preElement: HTMLPreElement;
   codeElement: HTMLElement;
   gutterElement: HTMLElement;
-  previewToggleButton: HTMLButtonElement | null;
+  viewModeContainer: HTMLElement | null;
   previewElement: HTMLDivElement | null;
-  moreButton: HTMLButtonElement;
-  moreMenu: HTMLElement;
+  splitContainer: HTMLElement | null;
+}
+
+export interface ViewModeLabels {
+  code: string;
+  preview: string;
+  split: string;
 }
 
 export interface BuildCodeDOMOptions {
@@ -33,33 +44,83 @@ export interface BuildCodeDOMOptions {
   languageName: string;
   readOnly: boolean;
   copyLabel: string;
-  wrapLabel: string;
-  lineNumbersLabel?: string;
   previewable?: boolean;
-  previewToggleLabel?: string;
+  viewModeLabels?: ViewModeLabels;
 }
 
-function buildPreviewElements(
-  previewToggleLabel?: string,
-): { previewToggleButton: HTMLButtonElement; previewElement: HTMLDivElement } {
-  const previewToggleButton = document.createElement('button');
+interface ViewModeElements {
+  viewModeContainer: HTMLElement;
+  previewElement: HTMLDivElement;
+  splitContainer: HTMLElement;
+}
 
-  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');
+function buildViewModeElements(
+  labels: ViewModeLabels,
+): ViewModeElements {
+  // Segmented control container
+  const viewModeContainer = document.createElement('div');
+
+  viewModeContainer.className = VIEW_MODE_CONTAINER_STYLES;
+  viewModeContainer.setAttribute('role', 'group');
+  viewModeContainer.setAttribute('data-blok-testid', 'code-view-mode');
+
+  const modes: Array<{ mode: CodeViewMode; icon: string; label: string }> = [
+    { mode: 'code', icon: IconCode, label: labels.code },
+    { mode: 'preview', icon: IconPreview, label: labels.preview },
+    { mode: 'split', icon: IconSplitView, label: labels.split },
+  ];
+
+  for (const { mode, icon, label } of modes) {
+    const button = document.createElement('button');
+    const isPreview = mode === 'preview';
+
+    button.type = 'button';
+    button.className = isPreview ? VIEW_MODE_PREVIEW_BUTTON_STYLES : VIEW_MODE_BUTTON_STYLES;
+    button.innerHTML = icon;
+    button.setAttribute('aria-label', label);
+    button.setAttribute('aria-pressed', 'false');
+    button.setAttribute('data-blok-testid', `code-mode-${mode}`);
+    button.setAttribute('data-mode', mode);
+    viewModeContainer.appendChild(button);
+  }
 
+  // Preview container
   const previewElement = document.createElement('div');
 
   previewElement.className = PREVIEW_AREA_STYLES;
   previewElement.setAttribute('data-blok-testid', 'code-preview');
 
-  return { previewToggleButton, previewElement };
+  // Split container — wraps code body + preview
+  const splitContainer = document.createElement('div');
+
+  splitContainer.className = SPLIT_CONTAINER_STYLES;
+  splitContainer.setAttribute('data-blok-testid', 'code-split-container');
+
+  return { viewModeContainer, previewElement, splitContainer };
+}
+
+/**
+ * Set the active view mode button styling and aria-pressed state.
+ */
+export function setActiveViewMode(viewModeContainer: HTMLElement, mode: CodeViewMode): void {
+  const buttons = Array.from(viewModeContainer.querySelectorAll<HTMLButtonElement>('[data-mode]'));
+
+  for (const btn of buttons) {
+    const isActive = btn.getAttribute('data-mode') === mode;
+    const isPreview = btn.getAttribute('data-mode') === 'preview';
+
+    btn.setAttribute('aria-pressed', String(isActive));
+
+    if (isPreview) {
+      btn.className = isActive ? VIEW_MODE_PREVIEW_BUTTON_ACTIVE_STYLES : VIEW_MODE_PREVIEW_BUTTON_STYLES;
+    } else {
+      btn.className = isActive ? VIEW_MODE_BUTTON_ACTIVE_STYLES : VIEW_MODE_BUTTON_STYLES;
+    }
+  }
 }
 
 export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
-  const { code, languageName, readOnly, copyLabel, wrapLabel, lineNumbersLabel, previewable, previewToggleLabel } = options;
+  const { code, languageName, readOnly, copyLabel, previewable, viewModeLabels } = options;
 
   // Wrapper
   const wrapper = document.createElement('div');
@@ -89,67 +150,27 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
   const spacer = document.createElement('div');
   spacer.className = 'flex-1';
 
-  // Preview toggle button (only when previewable and not read-only)
-  const { previewToggleButton, previewElement } = previewable
-    ? buildPreviewElements(previewToggleLabel)
-    : { previewToggleButton: null, previewElement: null };
+  // View mode segmented control — always built in edit mode, hidden for non-previewable languages
+  const viewModeResult = !readOnly && viewModeLabels
+    ? buildViewModeElements(viewModeLabels)
+    : null;
+
+  const viewModeContainer = viewModeResult?.viewModeContainer ?? null;
+  const previewElement = viewModeResult?.previewElement ?? null;
+  const splitContainer = viewModeResult?.splitContainer ?? null;
+
+  if (viewModeContainer) {
+    viewModeContainer.hidden = !previewable;
+  }
 
   // Copy button
   const copyButton = document.createElement('button');
   copyButton.type = 'button';
-  copyButton.className = HEADER_BUTTON_STYLES;
+  copyButton.className = previewable ? HEADER_BUTTON_MATCHED_STYLES : HEADER_BUTTON_STYLES;
   copyButton.innerHTML = IconCopy;
   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;
@@ -178,22 +199,21 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
     gutterElement.appendChild(lineEl);
   });
 
-  // Assemble header: [language] [spacer] [preview toggle?] [copy] [more ▸ menu]
+  // Assemble header: [language] [spacer] [controls: view mode? | copy]
   header.appendChild(languageButton);
   header.appendChild(spacer);
 
-  if (previewToggleButton) {
-    header.appendChild(previewToggleButton);
+  // Controls container — hidden by default, visible on wrapper hover
+  const controls = document.createElement('div');
+  controls.className = HEADER_CONTROLS_STYLES;
+
+  if (viewModeContainer) {
+    controls.appendChild(viewModeContainer);
   }
 
-  header.appendChild(copyButton);
+  controls.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);
+  header.appendChild(controls);
 
   // Pre wrapper for semantic HTML
   const preElement = document.createElement('pre');
@@ -207,11 +227,24 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
 
   // Assemble wrapper
   wrapper.appendChild(header);
-  wrapper.appendChild(codeBody);
 
-  if (previewElement) {
-    wrapper.appendChild(previewElement);
+  if (splitContainer && previewElement) {
+    // Edit mode: always wrap code body + preview in split container.
+    // previewElement is hidden initially; shown when a previewable language is active.
+    const codeHalf = document.createElement('div');
+    codeHalf.className = SPLIT_HALF_STYLES;
+    codeHalf.appendChild(codeBody);
+
+    const previewHalf = document.createElement('div');
+    previewHalf.className = SPLIT_HALF_STYLES;
+    previewHalf.appendChild(previewElement);
+
+    splitContainer.appendChild(codeHalf);
+    splitContainer.appendChild(previewHalf);
+    wrapper.appendChild(splitContainer);
+  } else {
+    wrapper.appendChild(codeBody);
   }
 
-  return { wrapper, languageButton, lineNumbersButton, copyButton, wrapButton, preElement, codeElement, gutterElement, previewToggleButton, previewElement, moreButton, moreMenu };
+  return { wrapper, languageButton, copyButton, preElement, codeElement, gutterElement, viewModeContainer, previewElement, splitContainer };
 }