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

package/src/tools/callout/index.ts

@@ -7,6 +7,8 @@ import type {
   ToolboxConfig,
   ConversionConfig,
   ToolSanitizerConfig,
+  PasteConfig,
+  HTMLPasteEvent,
 } from '../../../types';
 import type { MenuConfig } from '../../../types/tools/menu-config';
 import { PopoverItemType } from '../../components/utils/popover';
@@ -177,6 +179,22 @@ export class CalloutTool implements BlockTool {
     return true;
   }
 
+  public onPaste(event: HTMLPasteEvent): void {
+    const content = event.detail.data;
+    const style = content.getAttribute('style') ?? '';
+    const bgMatch = /background(?:-color)?\s*:\s*([^;]+)/i.exec(style);
+
+    if (bgMatch?.[1]) {
+      const presetName = mapToNearestPresetName(bgMatch[1].trim(), 'bg');
+
+      if (presetName) {
+        this._data.backgroundColor = presetName;
+      }
+    }
+
+    this.applyColors();
+  }
+
   public renderSettings(): MenuConfig {
     if (this._colorPicker === null) {
       const picker = createColorPicker({
@@ -374,6 +392,12 @@ export class CalloutTool implements BlockTool {
     };
   }
 
+  public static get pasteConfig(): PasteConfig {
+    return {
+      tags: [{ ASIDE: { style: true } }],
+    };
+  }
+
   public static get sanitize(): ToolSanitizerConfig {
     return {
       emoji: false,

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

@@ -0,0 +1,135 @@
+import { TAB_STRING } from './constants';
+
+/**
+ * Handle keydown events inside the code block.
+ * Returns true if the event was handled (caller should preventDefault).
+ */
+export function handleCodeKeydown(
+  event: KeyboardEvent,
+  codeElement: HTMLElement,
+  onExit: () => void
+): boolean {
+  if (event.key === 'Enter' && event.shiftKey) {
+    onExit();
+    return true;
+  }
+
+  if (event.key === 'Enter') {
+    insertNewline();
+    return true;
+  }
+
+  if (event.key === 'Tab' && !event.shiftKey) {
+    insertTab();
+    return true;
+  }
+
+  if (event.key === 'Tab' && event.shiftKey) {
+    removeTab(codeElement);
+    return true;
+  }
+
+  return false;
+}
+
+function insertNewline(): 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);
+
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+function insertTab(): void {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+
+  const range = selection.getRangeAt(0);
+  range.deleteContents();
+
+  const tab = document.createTextNode(TAB_STRING);
+  range.insertNode(tab);
+  range.setStartAfter(tab);
+  range.collapse(true);
+
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+/**
+ * Count leading spaces on the line (up to TAB_STRING length).
+ */
+function countLeadingSpaces(lineContent: string): number {
+  const limit = Math.min(TAB_STRING.length, lineContent.length);
+  const match = lineContent.substring(0, limit).match(/^ */);
+
+  return match ? match[0].length : 0;
+}
+
+function removeTab(codeElement: HTMLElement): void {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+
+  const range = selection.getRangeAt(0);
+  const textContent = codeElement.textContent ?? '';
+
+  const preCaretRange = range.cloneRange();
+  preCaretRange.selectNodeContents(codeElement);
+  preCaretRange.setEnd(range.startContainer, range.startOffset);
+
+  const caretOffset = preCaretRange.toString().length;
+  const lineStart = textContent.lastIndexOf('\n', caretOffset - 1) + 1;
+  const lineContent = textContent.substring(lineStart);
+
+  const spacesToRemove = countLeadingSpaces(lineContent);
+
+  if (spacesToRemove === 0) return;
+
+  const before = textContent.substring(0, lineStart);
+  const after = textContent.substring(lineStart + spacesToRemove);
+  const updated = before + after;
+
+  // Replace text by clearing children and inserting a new text node
+  while (codeElement.firstChild) {
+    codeElement.removeChild(codeElement.firstChild);
+  }
+  codeElement.appendChild(document.createTextNode(updated));
+
+  const newCaretOffset = Math.max(lineStart, caretOffset - spacesToRemove);
+  restoreCaretOffset(codeElement, newCaretOffset);
+}
+
+function restoreCaretOffset(element: HTMLElement, offset: number): void {
+  const selection = window.getSelection();
+  if (!selection) return;
+
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+
+  const findNode = (accumulated: number): void => {
+    const current = walker.nextNode();
+    if (!current) return;
+
+    const nodeLength = (current.textContent ?? '').length;
+
+    if (accumulated + nodeLength >= offset) {
+      const range = document.createRange();
+      range.setStart(current, offset - accumulated);
+      range.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      return;
+    }
+
+    findNode(accumulated + nodeLength);
+  };
+
+  findNode(0);
+}

package/src/tools/code/constants.ts

@@ -0,0 +1,73 @@
+export const TOOL_NAME = 'code';
+
+// i18n keys
+export const PLACEHOLDER_KEY = 'tools.code.placeholder';
+export const LANGUAGE_KEY = 'tools.code.language';
+export const COPIED_KEY = 'tools.code.copied';
+export const COPY_CODE_KEY = 'tools.code.copyCode';
+export const WRAP_LINES_KEY = 'tools.code.wrapLines';
+export const SEARCH_LANGUAGE_KEY = 'tools.code.searchLanguage';
+
+// Default values
+export const DEFAULT_LANGUAGE = 'plain text';
+export const TAB_STRING = '  '; // 2 spaces
+
+// Language list — display name + lowercase identifier
+export interface LanguageEntry {
+  id: string;
+  name: string;
+}
+
+export const LANGUAGES: LanguageEntry[] = [
+  { id: 'plain text', name: 'Plain Text' },
+  { id: 'javascript', name: 'JavaScript' },
+  { id: 'typescript', name: 'TypeScript' },
+  { id: 'python', name: 'Python' },
+  { id: 'java', name: 'Java' },
+  { id: 'c', name: 'C' },
+  { id: 'cpp', name: 'C++' },
+  { id: 'csharp', name: 'C#' },
+  { id: 'go', name: 'Go' },
+  { id: 'rust', name: 'Rust' },
+  { id: 'ruby', name: 'Ruby' },
+  { id: 'php', name: 'PHP' },
+  { id: 'swift', name: 'Swift' },
+  { id: 'kotlin', name: 'Kotlin' },
+  { id: 'latex', name: 'LaTeX' },
+  { id: 'sql', name: 'SQL' },
+  { id: 'html', name: 'HTML' },
+  { id: 'css', name: 'CSS' },
+  { id: 'json', name: 'JSON' },
+  { id: 'yaml', name: 'YAML' },
+  { id: 'markdown', name: 'Markdown' },
+  { id: 'bash', name: 'Bash' },
+  { id: 'shell', name: 'Shell' },
+  { id: 'dockerfile', name: 'Dockerfile' },
+  { id: 'xml', name: 'XML' },
+  { id: 'graphql', name: 'GraphQL' },
+  { id: 'r', name: 'R' },
+  { id: 'scala', name: 'Scala' },
+  { id: 'dart', name: 'Dart' },
+  { id: 'lua', name: 'Lua' },
+];
+
+// CSS — Tailwind classes
+export const WRAPPER_STYLES = 'flex flex-col rounded-lg bg-bg-secondary overflow-hidden my-1';
+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 COPIED_FEEDBACK_STYLES = 'text-xs text-gray-text font-medium select-none';
+
+// Languages that support preview rendering
+export const PREVIEWABLE_LANGUAGES = new Set(['latex']);
+
+// i18n keys — preview tabs
+export const CODE_TAB_KEY = 'tools.code.codeTab';
+export const PREVIEW_TAB_KEY = 'tools.code.previewTab';
+
+// CSS — preview tab styles
+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]';

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

@@ -0,0 +1,146 @@
+import {
+  WRAPPER_STYLES,
+  HEADER_STYLES,
+  LANGUAGE_BUTTON_STYLES,
+  HEADER_BUTTON_STYLES,
+  CODE_AREA_STYLES,
+  TAB_STYLES,
+  TAB_ACTIVE_STYLES,
+  TAB_INACTIVE_STYLES,
+  PREVIEW_AREA_STYLES,
+} from './constants';
+import { IconCopy, IconWrap } from '../../components/icons';
+
+export interface CodeDOMRefs {
+  wrapper: HTMLElement;
+  languageButton: HTMLButtonElement;
+  copyButton: HTMLButtonElement;
+  wrapButton: HTMLButtonElement;
+  preElement: HTMLPreElement;
+  codeElement: HTMLElement;
+  codeTab: HTMLButtonElement | null;
+  previewTab: HTMLButtonElement | null;
+  previewElement: HTMLDivElement | null;
+}
+
+export interface BuildCodeDOMOptions {
+  code: string;
+  languageName: string;
+  readOnly: boolean;
+  copyLabel: string;
+  wrapLabel: string;
+  previewable?: boolean;
+  codeTabLabel?: string;
+  previewTabLabel?: string;
+}
+
+function buildPreviewElements(
+  codeTabLabel?: string,
+  previewTabLabel?: string,
+): { codeTab: HTMLButtonElement; previewTab: HTMLButtonElement; previewElement: HTMLDivElement } {
+  const codeTab = 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');
+
+  const previewElement = document.createElement('div');
+
+  previewElement.className = PREVIEW_AREA_STYLES;
+  previewElement.setAttribute('data-blok-testid', 'code-preview');
+
+  return { codeTab, previewTab, previewElement };
+}
+
+export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
+  const { code, languageName, readOnly, copyLabel, wrapLabel, previewable, codeTabLabel, previewTabLabel } = options;
+
+  // Wrapper
+  const wrapper = document.createElement('div');
+  wrapper.className = WRAPPER_STYLES;
+
+  // Header
+  const header = document.createElement('div');
+  header.className = HEADER_STYLES;
+
+  // Language button (opens language picker)
+  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');
+
+  // 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');
+
+  // Copy button
+  const copyButton = document.createElement('button');
+  copyButton.type = 'button';
+  copyButton.className = HEADER_BUTTON_STYLES;
+  copyButton.innerHTML = IconCopy;
+  copyButton.setAttribute('aria-label', copyLabel);
+  copyButton.setAttribute('data-blok-testid', 'code-copy-btn');
+
+  // Code area
+  const codeElement = document.createElement('code');
+  codeElement.className = CODE_AREA_STYLES;
+  codeElement.setAttribute('data-blok-testid', 'code-content');
+
+  if (code) {
+    codeElement.textContent = code;
+  }
+
+  if (!readOnly) {
+    codeElement.setAttribute('contenteditable', 'true');
+    codeElement.setAttribute('spellcheck', 'false');
+  }
+
+  // Assemble header
+  header.appendChild(languageButton);
+  header.appendChild(spacer);
+
+  if (codeTab && previewTab) {
+    header.appendChild(codeTab);
+    header.appendChild(previewTab);
+  }
+
+  header.appendChild(wrapButton);
+  header.appendChild(copyButton);
+
+  // Pre wrapper for semantic HTML
+  const preElement = document.createElement('pre');
+  preElement.appendChild(codeElement);
+
+  // Assemble wrapper
+  wrapper.appendChild(header);
+  wrapper.appendChild(preElement);
+
+  if (previewElement) {
+    wrapper.appendChild(previewElement);
+  }
+
+  return { wrapper, languageButton, copyButton, wrapButton, preElement, codeElement, codeTab, previewTab, previewElement };
+}