@jackuait/blok 0.7.1 → 0.7.2

package/src/styles/main.css

@@ -37,9 +37,11 @@
     `all: initial !important` — main editor wrapper (outermost boundary).
     Resets every property to its CSS initial value with !important priority,
     blocking even `!important` host-page styles from cascading in.
-    Blok's own Tailwind utility classes (applied to the same elements or
-    descendants) override this because they have equal or higher specificity
-    and appear later in the cascade.
+    However, `!important` declarations always beat normal declarations
+    regardless of specificity or source order, so Tailwind utility classes
+    applied to the wrapper element itself (e.g. `relative`, `z-1`) are
+    overridden. Properties that the wrapper needs must be explicitly
+    re-applied with `!important` below (same pattern as font-family/color).
 
   [data-blok-popover]:not([data-blok-popover-inline])
     Inherited-properties-only reset — toolbox/settings popovers, appended
@@ -72,6 +74,27 @@
 */
 [data-blok-interface=blok] {
   all: initial !important;
+
+  /*
+    Re-apply layout properties that `all: initial` resets.
+    The wrapper must be a positioned containing block so that
+    absolutely-positioned children (inline toolbar, main toolbar)
+    resolve against it rather than the document root. Without this,
+    the inline toolbar renders off-screen when the page is scrolled.
+  */
+  position: relative !important;
+  box-sizing: border-box !important;
+  display: block !important;
+  z-index: 1 !important;
+}
+
+/*
+  RTL direction is set conditionally via JS (ui.ts) using the
+  data-blok-rtl attribute. `all: initial` resets direction to `ltr`,
+  so we must re-apply it with !important when the attribute is present.
+*/
+[data-blok-interface=blok][data-blok-rtl=true] {
+  direction: rtl !important;
 }
 
 /* Font family — user-configurable via config.style.fontFamily */
@@ -327,8 +350,9 @@
   resize: vertical;
 }
 
-/* Remove inner padding in Chrome and Safari on macOS. */
-:where([data-blok-interface], [data-blok-popover]) ::-webkit-search-decoration {
+/* Remove inner padding and native cancel button in Chrome and Safari on macOS. */
+:where([data-blok-interface], [data-blok-popover]) ::-webkit-search-decoration,
+:where([data-blok-interface], [data-blok-popover]) ::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
 
@@ -394,10 +418,13 @@
   outline: none;
 }
 
-/* Never show a focus outline on contenteditable blocks — the text cursor
-   is sufficient affordance regardless of how focus was triggered. */
-[data-blok-interface] [contenteditable]:focus-visible,
-[data-blok-popover] [contenteditable]:focus-visible {
+/* Never show a focus outline on text-entry elements — the text cursor
+   is sufficient affordance regardless of how focus was triggered.
+   Browsers always match :focus-visible on these elements even on mouse
+   click (per CSS Selectors L4), so the :focus-visible restore rule below
+   would otherwise override element-level outline-hidden utilities. */
+[data-blok-interface] :is([contenteditable], input, textarea):focus-visible,
+[data-blok-popover] :is([contenteditable], input, textarea):focus-visible {
   outline: none;
 }
 
@@ -952,8 +979,9 @@
  * When the user types "/" to open the toolbox, the contenteditable
  * transforms to look like a search input with a placeholder.
  */
-[data-blok-slash-search] {
-  @apply bg-search-input-bg rounded-lg transition-colors duration-150 max-w-[240px];
+[data-blok-slash-search],
+[data-blok-slash-search]:focus-visible {
+  @apply bg-search-input-bg rounded-[4px] transition-colors duration-150 max-w-[240px];
 }
 
 [data-blok-slash-search]::after {

package/src/tools/paragraph/index.ts

@@ -346,11 +346,9 @@ export class Paragraph implements BlockTool {
 
     this._data = data;
 
-    queueMicrotask(() => {
-      if (this._element) {
-        this._element.innerHTML = this._data.text || '';
-      }
-    });
+    if (this._element) {
+      this._element.innerHTML = this._data.text || '';
+    }
   }
 
   /**

package/src/tools/table/index.ts

@@ -1395,6 +1395,20 @@ export class Table implements BlockTool {
       return;
     }
 
+    /**
+     * Single-cell (1×1) payloads should insert content inline at the caret
+     * position rather than replacing the entire target cell. This matches user
+     * expectations: copying one cell and pasting into another cell (or the same
+     * cell) appends/inserts the text instead of overwriting.
+     */
+    if (payload.rows === 1 && payload.cols === 1) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.insertSingleCellPayloadInline(payload.cells[0][0]);
+
+      return;
+    }
+
     e.preventDefault();
     e.stopPropagation();
 
@@ -1406,6 +1420,62 @@ export class Table implements BlockTool {
     this.pastePayloadIntoCells(gridEl, payload, targetRowIndex, targetColIndex);
   }
 
+  /**
+   * Insert the content of a single clipboard cell at the current caret position.
+   * Extracts text from each block and joins with line breaks.
+   */
+  private insertSingleCellPayloadInline(cell: { blocks: ClipboardBlockData[] }): void {
+    const html = cell.blocks
+      .map((block) => {
+        if (typeof block.data.text === 'string') {
+          return block.data.text;
+        }
+
+        return '';
+      })
+      .filter(Boolean)
+      .join('<br>');
+
+    if (!html) {
+      return;
+    }
+
+    const selection = window.getSelection();
+
+    if (!selection || selection.rangeCount === 0) {
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+
+    range.deleteContents();
+
+    const fragment = document.createDocumentFragment();
+    const wrapper = document.createElement('div');
+
+    wrapper.innerHTML = html;
+
+    Array.from(wrapper.childNodes).forEach((child) => fragment.appendChild(child));
+
+    if (fragment.childNodes.length === 0) {
+      fragment.appendChild(new Text());
+    }
+
+    const lastChild = fragment.lastChild as ChildNode;
+
+    range.insertNode(fragment);
+
+    const newRange = document.createRange();
+    const nodeToSetCaret = lastChild.nodeType === Node.TEXT_NODE ? lastChild : lastChild.firstChild;
+
+    if (nodeToSetCaret !== null && nodeToSetCaret.textContent !== null) {
+      newRange.setStart(nodeToSetCaret, nodeToSetCaret.textContent.length);
+    }
+
+    selection.removeAllRanges();
+    selection.addRange(newRange);
+  }
+
   private pastePayloadIntoCells(
     gridEl: HTMLElement,
     payload: TableCellsClipboard,

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

@@ -144,8 +144,8 @@ export class TableCellBlocks {
       return;
     }
 
-    // ArrowDown at last row -> exit table
-    if (event.key === 'ArrowDown' && position.row === this.getRowCount() - 1) {
+    // ArrowDown at last row -> exit table (skip if already handled by block-level navigation)
+    if (event.key === 'ArrowDown' && !event.defaultPrevented && position.row === this.getRowCount() - 1) {
       event.preventDefault();
       this.exitTableForward();
     }
@@ -492,7 +492,19 @@ export class TableCellBlocks {
       return;
     }
 
-    container.appendChild(block.holder);
+    // Insert at the correct DOM position based on the flat array order,
+    // so that pressing Enter on a non-last paragraph inserts the new block
+    // right after the current one instead of always at the end of the cell.
+    const blocksCount = this.api.blocks.getBlocksCount();
+    const nextSiblingHolder = Array.from(
+      { length: blocksCount - index - 1 },
+      (_, offset) => this.api.blocks.getBlockByIndex(index + 1 + offset)
+    ).find(
+      candidate => candidate?.holder.parentElement === container
+    )?.holder ?? null;
+
+    // insertBefore(el, null) is equivalent to appendChild
+    container.insertBefore(block.holder, nextSiblingHolder);
     this.api.blocks.setBlockParent(blockId, this.tableBlockId);
     this.stripPlaceholders(container);
   }

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

@@ -79,12 +79,12 @@ export function serializeCellsToClipboard(entries: CellEntry[]): TableCellsClipb
 }
 
 /**
- * Extract a plain-text representation from a single block's data.
+ * Extract the raw HTML content from a single block's data.
  *
  * Looks for `data.text` (string), then `data.items` (array of strings),
  * and falls back to an empty string.
  */
-function extractBlockText(block: ClipboardBlockData): string {
+function extractBlockHtml(block: ClipboardBlockData): string {
   const { data } = block;
 
   if (typeof data.text === 'string') {
@@ -100,6 +100,25 @@ function extractBlockText(block: ClipboardBlockData): string {
   return '';
 }
 
+/**
+ * Strip HTML tags from a string, returning only the visible text content.
+ */
+function stripHtmlTags(html: string): string {
+  const div = document.createElement('div');
+
+  div.innerHTML = html;
+
+  return div.textContent ?? '';
+}
+
+/**
+ * Extract a plain-text representation from a single block's data.
+ * HTML tags are stripped so only visible text remains.
+ */
+function extractBlockPlainText(block: ClipboardBlockData): string {
+  return stripHtmlTags(extractBlockHtml(block));
+}
+
 /**
  * Build an HTML `<table>` string that carries the clipboard payload in a
  * `data-blok-table-cells` attribute.
@@ -116,7 +135,7 @@ export function buildClipboardHtml(payload: TableCellsClipboard): string {
     .map((row) => {
       const cellsHtml = row
         .map((cell) => {
-          const text = cell.blocks.map(extractBlockText).join(' ');
+          const text = cell.blocks.map(extractBlockHtml).join(' ');
 
           const styles = [
             cell.color ? `background-color: ${cell.color}` : '',
@@ -145,7 +164,7 @@ export function buildClipboardHtml(payload: TableCellsClipboard): string {
 export function buildClipboardPlainText(payload: TableCellsClipboard): string {
   return payload.cells
     .map((row) =>
-      row.map((cell) => cell.blocks.map(extractBlockText).join(' ')).join('\t')
+      row.map((cell) => cell.blocks.map(extractBlockPlainText).join(' ')).join('\t')
     )
     .join('\n');
 }
@@ -406,7 +425,15 @@ export function parseClipboardHtml(html: string): TableCellsClipboard | null {
       return null;
     }
 
-    const jsonStr = raw.replace(/&#39;/g, "'").replace(/&quot;/g, '"');
+    // Browsers re-serialize clipboard HTML, encoding special characters inside
+    // attribute values as HTML entities. Decode them back before JSON.parse.
+    // Order matters: &amp; must be last to avoid double-decoding (e.g. &amp;lt; → &lt; → <).
+    const jsonStr = raw
+      .replace(/&#39;/g, "'")
+      .replace(/&quot;/g, '"')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&amp;/g, '&');
 
     return JSON.parse(jsonStr) as TableCellsClipboard;
   } catch {