@jackuait/blok 0.10.0-beta.5 → 0.10.0-beta.7

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

@@ -32,7 +32,10 @@ export interface KeyboardContext {
 /**
  * Handle Enter key - split content or exit list
  */
-export const handleEnter = async (context: KeyboardContext): Promise<void> => {
+export const handleEnter = async (
+  context: KeyboardContext,
+  depthValidator?: ListDepthValidator
+): Promise<void> => {
   const { api, blockId, data, element, getContentElement } = context;
 
   const selection = window.getSelection();
@@ -45,7 +48,7 @@ export const handleEnter = async (context: KeyboardContext): Promise<void> => {
 
   // If current item is empty, handle based on depth
   if (currentContent === '' || currentContent === '<br>') {
-    await exitListOrOutdent(context);
+    await exitListOrOutdent(context, depthValidator);
     return;
   }
 
@@ -98,13 +101,16 @@ export const handleEnter = async (context: KeyboardContext): Promise<void> => {
 /**
  * Exit list or outdent when pressing Enter on empty item
  */
-const exitListOrOutdent = async (context: KeyboardContext): Promise<void> => {
+const exitListOrOutdent = async (
+  context: KeyboardContext,
+  depthValidator?: ListDepthValidator
+): Promise<void> => {
   const { api, blockId, getDepth } = context;
   const currentDepth = getDepth();
 
   // If nested, outdent instead of exiting
   if (currentDepth > 0) {
-    await handleOutdent(context);
+    await handleOutdent(context, depthValidator);
     return;
   }
 
@@ -193,16 +199,11 @@ export const handleIndent = async(
   const { api, blockId, data, syncContentFromDOM, getDepth } = context;
 
   const currentBlockIndex = api.blocks.getCurrentBlockIndex();
-  if (currentBlockIndex === 0) return;
-
-  const previousBlock = api.blocks.getBlockByIndex(currentBlockIndex - 1);
-  if (!previousBlock || previousBlock.name !== TOOL_NAME) return;
-
   const currentDepth = getDepth();
-  const previousBlockDepth = depthValidator.getBlockDepth(previousBlock);
+  const maxAllowedDepth = depthValidator.getMaxAllowedDepth(currentBlockIndex);
 
-  // Can only indent to at most one level deeper than the previous item
-  if (currentDepth > previousBlockDepth) return;
+  // Can only indent if current depth is below the maximum
+  if (currentDepth >= maxAllowedDepth) return;
 
   // Sync current content before updating
   syncContentFromDOM();
@@ -222,9 +223,45 @@ export const handleIndent = async(
 };
 
 /**
- * Handle Shift+Tab key - outdent the list item
+ * Reduce depth by 1 for all descendant list items following the given block.
+ * Stops at non-list blocks or blocks with depth <= the parent's original depth.
  */
-export const handleOutdent = async(context: KeyboardContext): Promise<void> => {
+const cascadeDepthReduction = async (
+  api: API,
+  blockId: string | undefined,
+  parentOriginalDepth: number,
+  depthValidator: ListDepthValidator
+): Promise<void> => {
+  const startIndex = blockId
+    ? api.blocks.getBlockIndex(blockId) ?? api.blocks.getCurrentBlockIndex()
+    : api.blocks.getCurrentBlockIndex();
+  const blocksCount = api.blocks.getBlocksCount();
+
+  const processDescendant = async (index: number): Promise<void> => {
+    if (index >= blocksCount) return;
+
+    const block = api.blocks.getBlockByIndex(index);
+
+    if (!block || block.name !== TOOL_NAME) return;
+
+    const blockDepth = depthValidator.getBlockDepth(block);
+
+    if (blockDepth <= parentOriginalDepth) return;
+
+    await api.blocks.update(block.id, { depth: blockDepth - 1 });
+    await processDescendant(index + 1);
+  };
+
+  await processDescendant(startIndex + 1);
+};
+
+/**
+ * Handle Shift+Tab key - outdent the list item and cascade to descendants
+ */
+export const handleOutdent = async(
+  context: KeyboardContext,
+  depthValidator?: ListDepthValidator
+): Promise<void> => {
   const { api, blockId, data, syncContentFromDOM, getDepth } = context;
 
   const currentDepth = getDepth();
@@ -245,6 +282,11 @@ export const handleOutdent = async(context: KeyboardContext): Promise<void> => {
     depth: newDepth,
   });
 
+  // Cascade depth reduction to descendant list items
+  if (depthValidator) {
+    await cascadeDepthReduction(api, blockId, currentDepth, depthValidator);
+  }
+
   // Restore focus to the updated block after DOM has been updated
   setCaretToBlockContent(api, updatedBlock);
 };

package/src/tools/list/list-lifecycle.ts

@@ -16,6 +16,7 @@ export interface RenderContext {
   placeholder: string;
   itemColor: string | undefined;
   itemSize: string | undefined;
+  markerDepth?: number;
   setupItemPlaceholder: (element: HTMLElement) => void;
   onCheckboxChange: (checked: boolean, content: HTMLElement | null) => void;
   keydownHandler: ((event: KeyboardEvent) => void) | undefined;
@@ -25,7 +26,7 @@ export interface RenderContext {
  * Render the list item
  */
 export const renderListItem = (context: RenderContext): HTMLElement => {
-  const { data, readOnly, placeholder, itemColor, itemSize, setupItemPlaceholder, onCheckboxChange, keydownHandler } = context;
+  const { data, readOnly, placeholder, itemColor, itemSize, markerDepth, setupItemPlaceholder, onCheckboxChange, keydownHandler } = context;
 
   const result = buildListItem({
     data,
@@ -33,6 +34,7 @@ export const renderListItem = (context: RenderContext): HTMLElement => {
     placeholder,
     itemColor,
     itemSize,
+    markerDepth,
     keydownHandler,
   });
 

package/src/tools/list/marker-calculator.ts

@@ -191,6 +191,43 @@ export class ListMarkerCalculator {
     return this.findFirstItemIndex(index - 1, targetDepth, remainingCount - 1, targetStyle);
   }
 
+  /**
+   * Get the base depth of the contiguous list run containing the block at blockIndex.
+   * Walks backward until a non-list block or the start of the editor is reached,
+   * then returns the depth of the first list item in that run.
+   *
+   * @param blockIndex - The block index to look up
+   * @returns The depth of the first list item in the run
+   */
+  getGroupBaseDepth(blockIndex: number): number {
+    const findFirstListIndex = (index: number): number => {
+      if (index <= 0) {
+        return 0;
+      }
+      const prevBlock = this.blocks.getBlockByIndex(index - 1);
+      if (!prevBlock || prevBlock.name !== TOOL_NAME) {
+        return index;
+      }
+      return findFirstListIndex(index - 1);
+    };
+
+    const firstListIndex = findFirstListIndex(blockIndex);
+    const firstBlock = this.blocks.getBlockByIndex(firstListIndex);
+    return this.getBlockDepth(firstBlock);
+  }
+
+  /**
+   * Get the visual depth for marker display.
+   * Returns the depth relative to the list group's base, clamped to >= 0.
+   *
+   * @param blockIndex - The block index
+   * @param actualDepth - The block's actual depth
+   * @returns The visual depth for marker formatting
+   */
+  getVisualDepth(blockIndex: number, actualDepth: number): number {
+    return Math.max(0, actualDepth - this.getGroupBaseDepth(blockIndex));
+  }
+
   /**
    * Get the depth of a block by reading from its DOM.
    */

package/src/tools/list/ordered-marker-manager.ts

@@ -77,7 +77,8 @@ export class OrderedMarkerManager {
       : startValue;
 
     const actualNumber = actualStartValue + siblingIndex;
-    const markerText = this.markerCalculator.formatNumber(actualNumber, blockDepth);
+    const visualDepth = this.markerCalculator.getVisualDepth(blockIndex, blockDepth);
+    const markerText = this.markerCalculator.formatNumber(actualNumber, visualDepth);
 
     marker.textContent = markerText;
   }
@@ -241,7 +242,8 @@ export class OrderedMarkerManager {
       : startValue;
 
     const actualNumber = actualStartValue + siblingIndex;
-    const markerText = this.markerCalculator.formatNumber(actualNumber, blockDepth);
+    const visualDepth = this.markerCalculator.getVisualDepth(blockIndex, blockDepth);
+    const markerText = this.markerCalculator.formatNumber(actualNumber, visualDepth);
 
     marker.textContent = markerText;
   }

package/src/tools/table/core/table-commands.ts

@@ -77,6 +77,20 @@ export interface SetColWidthsCommand {
   readonly widths: readonly number[] | undefined;
 }
 
+export interface MergeCellsCommand {
+  readonly type: 'merge-cells';
+  readonly minRow: number;
+  readonly maxRow: number;
+  readonly minCol: number;
+  readonly maxCol: number;
+}
+
+export interface SplitCellCommand {
+  readonly type: 'split-cell';
+  readonly row: number;
+  readonly col: number;
+}
+
 export interface ReplaceAllCommand {
   readonly type: 'replace-all';
   readonly data: TableData;
@@ -96,4 +110,6 @@ export type TableCommand =
   | RemoveBlockFromCellCommand
   | SetCellBlocksCommand
   | SetColWidthsCommand
+  | MergeCellsCommand
+  | SplitCellCommand
   | ReplaceAllCommand;

package/src/tools/table/core/table-controller.ts

@@ -83,6 +83,12 @@ export class TableController {
       case 'set-col-widths':
         return this.handleSetColWidths(command.widths ? [...command.widths] : undefined);
 
+      case 'merge-cells':
+        return this.handleMergeCells(command.minRow, command.maxRow, command.minCol, command.maxCol);
+
+      case 'split-cell':
+        return this.handleSplitCell(command.row, command.col);
+
       case 'replace-all':
         return this.handleReplaceAll(command.data);
     }
@@ -223,6 +229,29 @@ export class TableController {
     };
   }
 
+  private handleMergeCells(minRow: number, maxRow: number, minCol: number, maxCol: number): TableDomainEvent {
+    const result = this.model.mergeCells({ minRow, maxRow, minCol, maxCol });
+
+    return {
+      type: 'cells-merged',
+      minRow,
+      maxRow,
+      minCol,
+      maxCol,
+      blocksToRelocate: result.blocksToRelocate,
+    };
+  }
+
+  private handleSplitCell(row: number, col: number): TableDomainEvent {
+    this.model.splitCell(row, col);
+
+    return {
+      type: 'cell-split',
+      row,
+      col,
+    };
+  }
+
   private handleReplaceAll(data: TableData): TableDomainEvent {
     this.model.replaceAll(data);
 

package/src/tools/table/core/table-events.ts

@@ -81,6 +81,21 @@ export interface ColWidthsChangedEvent {
   readonly widths: readonly number[] | undefined;
 }
 
+export interface CellsMergedEvent {
+  readonly type: 'cells-merged';
+  readonly minRow: number;
+  readonly maxRow: number;
+  readonly minCol: number;
+  readonly maxCol: number;
+  readonly blocksToRelocate: readonly string[];
+}
+
+export interface CellSplitEvent {
+  readonly type: 'cell-split';
+  readonly row: number;
+  readonly col: number;
+}
+
 export interface ModelReplacedEvent {
   readonly type: 'model-replaced';
 }
@@ -99,4 +114,6 @@ export type TableDomainEvent =
   | BlockRemovedFromCellEvent
   | CellBlocksSetEvent
   | ColWidthsChangedEvent
+  | CellsMergedEvent
+  | CellSplitEvent
   | ModelReplacedEvent;

package/src/tools/table/index.ts

@@ -25,9 +25,10 @@ import {
 } from './table-cell-clipboard';
 import type { CellColorMode } from './table-cell-color-picker';
 import { TableCellSelection } from './table-cell-selection';
-import { TableGrid, ROW_ATTR, CELL_ATTR } from './table-core';
+import { TableGrid, ROW_ATTR, CELL_ATTR, CELL_ROW_ATTR, CELL_COL_ATTR } from './table-core';
 import {
   applyCellColors,
+  applyCellPlacements,
   applyPixelWidths,
   computeHalfAvgWidth,
   computeInitialColWidth,
@@ -54,7 +55,7 @@ import { TableRowColControls } from './table-row-col-controls';
 import type { RowColAction } from './table-row-col-controls';
 import { registerAdditionalRestrictedTools } from './table-restrictions';
 import { TableScrollHaze } from './table-scroll-haze';
-import type { ClipboardBlockData, LegacyCellContent, TableCellsClipboard, TableData, TableConfig } from './types';
+import type { CellPlacement, ClipboardBlockData, LegacyCellContent, TableCellsClipboard, TableData, TableConfig } from './types';
 
 const DEFAULT_ROWS = 3;
 const DEFAULT_COLS = 3;
@@ -200,6 +201,120 @@ export class Table implements BlockTool {
     this.scrollHaze = null;
   }
 
+  /**
+   * Rebuild the <tbody> from the current model state.
+   * Generates a new table via createGridFromModel (with correct colspan/rowspan),
+   * transplants existing block holders into the new cells, and swaps the tbody.
+   */
+  private rebuildTableBody(): void {
+    const gridEl = this.gridElement;
+
+    if (!gridEl) {
+      return;
+    }
+
+    const oldTbody = gridEl.querySelector('tbody');
+
+    if (!oldTbody) {
+      return;
+    }
+
+    // Collect all existing block holders by ID before replacing tbody
+    const blockHolders = new Map<string, HTMLElement>();
+
+    oldTbody.querySelectorAll('[data-blok-id]').forEach(el => {
+      const id = el.getAttribute('data-blok-id');
+
+      if (id) {
+        blockHolders.set(id, el as HTMLElement);
+      }
+    });
+
+    // Build new table from model (has correct colspan/rowspan structure)
+    const newTable = this.grid.createGridFromModel(this.model);
+    const newTbody = newTable.querySelector('tbody');
+
+    if (!newTbody) {
+      return;
+    }
+
+    // Move block holders from old cells to new cells
+    const content = this.model.snapshot().content;
+
+    this.mountBlockHoldersInNewTbody(content, newTbody, blockHolders);
+
+    // Replace old tbody with new
+    oldTbody.replaceWith(newTbody);
+  }
+
+  /**
+   * Mount block holders into the new tbody cells based on model content.
+   * Extracted to keep rebuildTableBody under nesting depth limit.
+   */
+  private mountBlockHoldersInNewTbody(
+    content: TableData['content'],
+    newTbody: Element,
+    blockHolders: Map<string, HTMLElement>
+  ): void {
+    content.forEach((rowData, r) => {
+      rowData.forEach((cellContent, c) => {
+        if (typeof cellContent === 'string') {
+          return;
+        }
+
+        if (cellContent.mergedInto) {
+          return;
+        }
+
+        const newCell = newTbody.querySelector(
+          `[${CELL_ROW_ATTR}="${r}"][${CELL_COL_ATTR}="${c}"]`
+        );
+
+        if (!newCell) {
+          return;
+        }
+
+        const container = newCell.querySelector(`[${CELL_BLOCKS_ATTR}]`);
+
+        if (!container) {
+          return;
+        }
+
+        cellContent.blocks.forEach(blockId => {
+          const holder = blockHolders.get(blockId);
+
+          if (holder) {
+            container.appendChild(holder);
+          }
+        });
+      });
+    });
+  }
+
+  /**
+   * Check if the model's content contains any merged cells.
+   */
+  private modelHasMerges(): boolean {
+    const snapshot = this.model.snapshot();
+
+    return snapshot.content.some(row =>
+      row.some(cell =>
+        typeof cell !== 'string' && ((cell.colspan ?? 1) > 1 || (cell.rowspan ?? 1) > 1)
+      )
+    );
+  }
+
+  /**
+   * Create a flat grid (no merge handling) using createGrid.
+   * Extracted from render() to keep it readable.
+   */
+  private createFlatGrid(): HTMLTableElement {
+    const rows = this.initialContent?.length || this.config.rows || DEFAULT_ROWS;
+    const cols = this.initialContent?.reduce((max, row) => Math.max(max, row?.length ?? 0), 0) || this.config.cols || DEFAULT_COLS;
+
+    return this.grid.createGrid(rows, cols, this.model.colWidths);
+  }
+
   /**
    * Initialize all visual subsystems on a grid element.
    * Shared by rendered(), setData(), and onPaste() to ensure consistent
@@ -234,7 +349,7 @@ export class Table implements BlockTool {
 
   public static get pasteConfig(): PasteConfig {
     return {
-      tags: ['TABLE', 'TR', 'TH', 'TD'],
+      tags: ['TABLE', 'TR', { TH: { style: true } }, { TD: { style: true } }],
     };
   }
 
@@ -260,7 +375,7 @@ export class Table implements BlockTool {
 
           return style.length > 0 ? { style: true } : {};
         },
-        a: { href: true },
+        a: { href: true, target: '_blank', rel: 'nofollow' },
         input: { type: true, checked: true },
       },
     };
@@ -309,12 +424,14 @@ export class Table implements BlockTool {
 
     this.isNewTable = (this.initialContent?.length ?? 0) === 0;
 
-    const rows = this.initialContent?.length || this.config.rows || DEFAULT_ROWS;
-    const cols = this.initialContent?.reduce((max, row) => Math.max(max, row?.length ?? 0), 0) || this.config.cols || DEFAULT_COLS;
+    const hasContent = (this.initialContent?.length ?? 0) > 0;
+    const hasMerges = hasContent && this.modelHasMerges();
 
-    const gridEl = this.grid.createGrid(rows, cols, this.model.colWidths);
+    const gridEl = hasMerges
+      ? this.grid.createGridFromModel(this.model)
+      : this.createFlatGrid();
 
-    if ((this.initialContent?.length ?? 0) > 0) {
+    if (hasContent && !hasMerges) {
       this.grid.fillGrid(gridEl, this.initialContent ?? []);
     }
 
@@ -388,7 +505,9 @@ export class Table implements BlockTool {
 
     if (this.readOnly) {
       mountCellBlocksReadOnly(gridEl, content, this.api, this.blockId ?? '');
-      applyCellColors(gridEl, this.model.snapshot().content);
+      const snap = this.model.snapshot();
+      applyCellColors(gridEl, snap.content);
+      applyCellPlacements(gridEl, snap.content);
       this.initScrollHaze();
 
       return;
@@ -430,7 +549,9 @@ export class Table implements BlockTool {
     }
 
     this.initSubsystems(gridEl);
-    applyCellColors(gridEl, this.model.snapshot().content);
+    const snapInit = this.model.snapshot();
+    applyCellColors(gridEl, snapInit.content);
+    applyCellPlacements(gridEl, snapInit.content);
 
     if (this.isNewTable) {
       this.cellSelection?.selectRange({ minRow: 0, maxRow: 0, minCol: 0, maxCol: 0 });
@@ -541,7 +662,9 @@ export class Table implements BlockTool {
     }
 
     if (this.readOnly) {
-      applyCellColors(gridEl, this.model.snapshot().content);
+      const snapRO = this.model.snapshot();
+      applyCellColors(gridEl, snapRO.content);
+      applyCellPlacements(gridEl, snapRO.content);
 
       return;
     }
@@ -602,7 +725,9 @@ export class Table implements BlockTool {
       this.rowColControls.restoreVisibleGrips(savedGripIndices.col, savedGripIndices.row);
     }
 
-    applyCellColors(gridEl, this.model.snapshot().content);
+    const snapSet = this.model.snapshot();
+    applyCellColors(gridEl, snapSet.content);
+    applyCellPlacements(gridEl, snapSet.content);
   }
 
   public onPaste(event: HTMLPasteEvent): void {
@@ -695,7 +820,9 @@ export class Table implements BlockTool {
       }, true);
 
       this.initSubsystems(gridEl);
-      applyCellColors(gridEl, this.model.snapshot().content);
+      const snapPaste = this.model.snapshot();
+      applyCellColors(gridEl, snapPaste.content);
+      applyCellPlacements(gridEl, snapPaste.content);
     }
   }
 
@@ -1183,6 +1310,38 @@ export class Table implements BlockTool {
     });
   }
 
+  private handleCellPlacementChange(cells: HTMLElement[], placement: CellPlacement): void {
+    const gridEl = this.gridElement;
+
+    if (!gridEl) {
+      return;
+    }
+
+    this.runTransactedStructuralOp(() => {
+      for (const cell of cells) {
+        const coord = getCellPosition(gridEl, cell);
+
+        if (!coord) {
+          continue;
+        }
+
+        this.model.setCellPlacement(coord.row, coord.col, placement === 'top-left' ? undefined : placement);
+
+        const blocksContainer = cell.querySelector<HTMLElement>(`[${CELL_BLOCKS_ATTR}]`);
+
+        if (!blocksContainer) {
+          continue;
+        }
+
+        if (placement === 'top-left') {
+          blocksContainer.removeAttribute('data-blok-cell-placement');
+        } else {
+          blocksContainer.setAttribute('data-blok-cell-placement', placement);
+        }
+      }
+    });
+  }
+
   private collectCellBlockData(
     cells: HTMLElement[],
   ): Array<{ row: number; col: number; blocks: ClipboardBlockData[]; color?: string; textColor?: string }> {
@@ -1333,6 +1492,30 @@ export class Table implements BlockTool {
       onColorChange: (cells, color, mode) => {
         this.handleCellColorChange(cells, color, mode);
       },
+      onPlacementChange: (cells, placement) => {
+        this.handleCellPlacementChange(cells, placement);
+      },
+      getCellPlacement: (row, col) => {
+        return this.model.getCellPlacement(row, col);
+      },
+      canMergeCells: (range) => {
+        return this.model.canMergeCells(range);
+      },
+      onMergeCells: (range) => {
+        this.runTransactedStructuralOp(() => {
+          this.model.mergeCells(range);
+          this.rebuildTableBody();
+        });
+      },
+      isMergedCell: (row, col) => {
+        return this.model.isMergedCell(row, col);
+      },
+      onSplitCell: (row, col) => {
+        this.runTransactedStructuralOp(() => {
+          this.model.splitCell(row, col);
+          this.rebuildTableBody();
+        });
+      },
     });
   }
 

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

@@ -1,6 +1,6 @@
 import type { API } from '../../../types';
 
-import { CELL_ATTR, ROW_ATTR } from './table-core';
+import { CELL_ATTR, ROW_ATTR, CELL_COL_ATTR } from './table-core';
 import type { TableModel } from './table-model';
 import type { LegacyCellContent, CellContent } from './types';
 import { isCellWithBlocks } from './types';
@@ -330,6 +330,12 @@ export class TableCellBlocks {
    * Get the number of columns in the table (based on first row)
    */
   private getColumnCount(): number {
+    const colgroup = this.gridElement.querySelector('colgroup');
+
+    if (colgroup) {
+      return colgroup.querySelectorAll('col').length;
+    }
+
     const firstRow = this.gridElement.querySelector('[data-blok-table-row]');
 
     return firstRow?.querySelectorAll('[data-blok-table-cell]').length ?? 0;
@@ -346,9 +352,7 @@ export class TableCellBlocks {
       return null;
     }
 
-    const cells = rowEl.querySelectorAll('[data-blok-table-cell]');
-
-    return (cells[col] as HTMLElement | undefined) ?? null;
+    return rowEl.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${col}"]`) ?? null;
   }
 
   /**
@@ -368,11 +372,10 @@ export class TableCellBlocks {
         return;
       }
 
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
       const normalizedRow: CellContent[] = [];
 
       rowData.forEach((cellContent, colIndex) => {
-        const cell = cells[colIndex] as HTMLElement | undefined;
+        const cell = row.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${colIndex}"]`);
 
         if (!cell) {
           return;

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

@@ -1,5 +1,5 @@
 import type { SanitizerConfig } from '../../../types/configs/sanitizer-config';
-import type { ClipboardBlockData, TableCellsClipboard } from './types';
+import type { CellPlacement, ClipboardBlockData, TableCellsClipboard } from './types';
 import { mapToNearestPresetColor } from '../../components/utils/color-mapping';
 import { clean } from '../../components/utils/sanitizer';
 
@@ -33,6 +33,7 @@ interface CellEntry {
   blocks: ClipboardBlockData[];
   color?: string;
   textColor?: string;
+  placement?: CellPlacement;
 }
 
 /**
@@ -73,6 +74,10 @@ export function serializeCellsToClipboard(entries: CellEntry[]): TableCellsClipb
     if (entry.textColor !== undefined) {
       cells[r][c].textColor = entry.textColor;
     }
+
+    if (entry.placement !== undefined) {
+      cells[r][c].placement = entry.placement;
+    }
   }
 
   return { rows, cols, cells };
@@ -185,7 +190,7 @@ const CELL_SANITIZE_CONFIG: SanitizerConfig = {
   i: true,
   em: true,
   br: true,
-  a: { href: true },
+  a: { href: true, target: '_blank', rel: 'nofollow' },
   mark: (node: Element): { [attr: string]: boolean | string } => {
     const el = node as HTMLElement;
     const style = el.style;