@jackuait/blok 0.7.0-beta.1 → 0.7.0-beta.2

package/src/tools/toggle/index.ts

@@ -13,6 +13,7 @@ import type {
   ConversionConfig,
   ToolSanitizerConfig,
   PasteConfig,
+  PasteEvent,
 } from '../../../types';
 import type { MenuConfig } from '../../../types/tools/menu-config';
 
@@ -115,6 +116,26 @@ export class ToggleItem implements BlockTool {
     );
   }
 
+  public onPaste(event: PasteEvent): void {
+    const detail = event.detail;
+
+    if (!('data' in detail)) {
+      return;
+    }
+
+    const content = detail.data as HTMLElement;
+    const summary = content.querySelector('summary');
+    const text = summary !== null ? summary.innerHTML : content.innerHTML;
+
+    this._data = { text };
+
+    const contentEl = this.getContentElement();
+
+    if (contentEl !== null) {
+      contentEl.innerHTML = text;
+    }
+  }
+
   public setData(newData: ToggleItemData): boolean {
     const result = setToggleItemData(
       this._data,
@@ -124,6 +145,8 @@ export class ToggleItem implements BlockTool {
 
     this._data = result.newData;
 
+    this.updateChildrenVisibility();
+
     return result.inPlace;
   }
 
@@ -191,6 +214,8 @@ export class ToggleItem implements BlockTool {
 
     if (event.key === 'Backspace') {
       void this.handleBackspace(event);
+
+      return;
     }
   }
 
@@ -225,10 +250,6 @@ export class ToggleItem implements BlockTool {
     }
   }
 
-  public static get shortcut(): string {
-    return 'CMD+ALT+7';
-  }
-
   public static get toolbox(): ToolboxConfig {
     return {
       icon: IconToggleList,
@@ -236,6 +257,7 @@ export class ToggleItem implements BlockTool {
       titleKey: 'toggleList',
       name: TOOL_NAME,
       searchTerms: ['toggle', 'collapse', 'expand', 'accordion'],
+      shortcut: '>',
     };
   }
 

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

@@ -28,10 +28,13 @@ export interface ToggleKeyboardContext {
 /**
  * Handle Enter key - sync content from DOM and split the block at the caret position.
  *
+ * When the toggle is open and the caret is at the end of the content,
+ * creates a child paragraph inside the toggle instead of splitting.
+ *
  * @param context - The toggle keyboard context
  */
 export const handleToggleEnter = async (context: ToggleKeyboardContext): Promise<void> => {
-  const { api, blockId, data, getContentElement, syncContentFromDOM } = context;
+  const { api, blockId, data, getContentElement, syncContentFromDOM, isOpen } = context;
 
   syncContentFromDOM();
 
@@ -51,6 +54,18 @@ export const handleToggleEnter = async (context: ToggleKeyboardContext): Promise
 
   const currentBlockIndex = api.blocks.getBlockIndex(blockId) ?? api.blocks.getCurrentBlockIndex();
 
+  /**
+   * When toggle is open and caret is at the end (no content after caret),
+   * create a child paragraph inside the toggle rather than a sibling toggle.
+   */
+  if (isOpen && afterContent === '') {
+    const newBlock = api.blocks.insert('paragraph', { text: '' }, {}, currentBlockIndex + 1, true);
+
+    api.blocks.setBlockParent(newBlock.id, blockId);
+
+    return;
+  }
+
   api.blocks.splitBlock(
     blockId,
     { text: beforeContent },
@@ -76,7 +91,9 @@ export const handleToggleBackspace = async (
   context: ToggleKeyboardContext,
   event: KeyboardEvent
 ): Promise<void> => {
-  const { api, blockId, data, getContentElement } = context;
+  const { api, blockId, data, getContentElement, syncContentFromDOM } = context;
+
+  syncContentFromDOM();
 
   if (blockId === undefined) {
     return;

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

@@ -56,6 +56,7 @@ export const updateArrowState = (arrowEl: HTMLElement, wrapper: HTMLElement, isO
 
   style.transform = isOpen ? 'rotate(90deg)' : '';
   arrowEl.setAttribute('aria-label', isOpen ? 'Collapse' : 'Expand');
+  arrowEl.setAttribute('aria-expanded', String(isOpen));
   wrapper.setAttribute(TOGGLE_ATTR.toggleOpen, String(isOpen));
 };
 

package/src/tools/toggle/toggle-shortcuts.ts

@@ -1,16 +1,17 @@
 /**
  * Toggle Shortcuts - Manages the collapse/expand-all keyboard shortcut (CMD+ALT+T).
  *
- * Iterates all blocks in the editor and toggles all toggle blocks:
- * - If any toggle is collapsed, expands all
- * - If all toggles are expanded, collapses all
+ * Iterates all blocks in the editor and toggles all collapsible blocks
+ * (toggle blocks and toggle headings):
+ * - If any collapsible block is collapsed, expands all
+ * - If all collapsible blocks are expanded, collapses all
  */
 
 import type { API } from '../../../types';
 
 import { Shortcuts } from '../../components/utils/shortcuts';
 
-import { TOGGLE_ATTR, TOOL_NAME } from './constants';
+import { TOGGLE_ATTR } from './constants';
 
 const COLLAPSE_EXPAND_ALL_SHORTCUT = 'CMD+ALT+T';
 
@@ -73,8 +74,8 @@ export class ToggleShortcuts {
   }
 
   /**
-   * Toggle all toggle blocks.
-   * If any toggle is collapsed, expand all. If all are expanded, collapse all.
+   * Toggle all collapsible blocks (toggle blocks and toggle headings).
+   * If any is collapsed, expand all. If all are expanded, collapse all.
    */
   private toggleAll(): void {
     const blockCount = this.api.blocks.getBlocksCount();
@@ -83,12 +84,17 @@ export class ToggleShortcuts {
     for (const i of Array.from({ length: blockCount }, (_, idx) => idx)) {
       const block = this.api.blocks.getBlockByIndex(i);
 
-      if (block === undefined || block.name !== TOOL_NAME) {
+      if (block === undefined) {
         continue;
       }
 
       const toggleWrapper = block.holder.querySelector(`[${TOGGLE_ATTR.toggleOpen}]`);
-      const isOpen = toggleWrapper?.getAttribute(TOGGLE_ATTR.toggleOpen) === 'true';
+
+      if (toggleWrapper === null) {
+        continue;
+      }
+
+      const isOpen = toggleWrapper.getAttribute(TOGGLE_ATTR.toggleOpen) === 'true';
 
       toggleBlocks.push({ call: (method: string) => block.call(method), isOpen });
     }

package/types/utils/popover/popover.d.ts

@@ -78,6 +78,14 @@ export interface PopoverParams {
    * Use 'auto' to fit content width.
    */
   width?: string;
+
+  /**
+   * Optional element whose left edge should be used for horizontal positioning.
+   * When provided, the popover's left position uses this element's left coordinate
+   * instead of the trigger's left. Useful for aligning the toolbox popover to the
+   * block content area rather than to the plus button.
+   */
+  leftAlignElement?: HTMLElement;
 }
 
 

package/dist/chunks/index-CZmRzRIX.mjs

@@ -1,78 +0,0 @@
-import { ae as s, t as f } from "./inline-tool-convert-CvFW2iie.mjs";
-const a = {
-  wrapper: s(
-    "fixed z-2 bottom-5 left-5",
-    'font-[-apple-system,BlinkMacSystemFont,"Segoe_UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira_Sans","Droid_Sans","Helvetica_Neue",sans-serif]'
-  ),
-  notification: s(
-    "relative w-[230px] mt-[15px] py-[13px] px-4",
-    "bg-white shadow-notify rounded-[5px]",
-    "text-sm leading-[1.4em] wrap-break-word",
-    'before:content-[""] before:absolute before:block before:top-0 before:left-0',
-    "before:w-[3px] before:h-[calc(100%-6px)] before:m-[3px] before:rounded-[5px] before:bg-transparent"
-  ),
-  crossBtn: s(
-    "absolute top-[7px] right-[15px] w-2.5 h-2.5 p-[5px] opacity-55 cursor-pointer",
-    'before:content-[""] before:absolute before:left-[9px] before:top-[5px] before:h-3 before:w-0.5 before:bg-[#575d67] before:-rotate-45',
-    'after:content-[""] after:absolute after:left-[9px] after:top-[5px] after:h-3 after:w-0.5 after:bg-[#575d67] after:rotate-45',
-    "hover:opacity-100"
-  ),
-  btnsWrapper: "flex flex-row flex-nowrap mt-[5px]",
-  btn: "border-none rounded-[3px] text-[13px] py-[5px] px-2.5 cursor-pointer last:ml-2.5",
-  okBtn: "bg-[#34c992] shadow-[0_1px_1px_0_rgba(18,49,35,0.05)] text-white hover:bg-[#2db583]",
-  cancelBtn: "bg-[#f2f5f7] shadow-[0_2px_1px_0_rgba(16,19,29,0)] text-[#656b7c] hover:bg-[#e9ecee]",
-  input: s(
-    "max-w-[130px] py-[5px] px-2.5 bg-[#f7f7f7] border-0 rounded-[3px]",
-    "text-[13px] text-[#656b7c] outline-hidden",
-    "placeholder:text-[#656b7c] focus:placeholder:text-[rgba(101,107,124,0.3)]"
-  ),
-  successNotification: s(
-    "bg-[#fafffe]!",
-    "before:bg-[#41ffb1]!"
-  ),
-  errorNotification: s(
-    "bg-[#fffbfb]!",
-    "before:bg-[#fb5d5d]!"
-  )
-}, d = (e) => {
-  const t = document.createElement("DIV"), o = document.createElement("DIV"), r = e.message, n = e.style, c = () => n === "success" ? a.successNotification : n === "error" ? a.errorNotification : "";
-  return t.className = f(a.notification, c()), n ? t.setAttribute("data-blok-testid", `notification-${n}`) : t.setAttribute("data-blok-testid", "notification"), t.innerHTML = r, o.className = a.crossBtn, o.setAttribute("data-blok-testid", "notification-cross"), o.addEventListener("click", () => t.remove()), t.appendChild(o), t;
-}, p = (e) => {
-  const t = d(e), o = document.createElement("div"), r = document.createElement("button"), n = document.createElement("button"), c = t.querySelector('[data-blok-testid="notification-cross"]'), i = e.cancelHandler, l = e.okHandler;
-  return o.className = a.btnsWrapper, o.setAttribute("data-blok-testid", "notification-buttons-wrapper"), r.innerHTML = e.okText || "Confirm", n.innerHTML = e.cancelText || "Cancel", r.className = s(a.btn, a.okBtn), n.className = s(a.btn, a.cancelBtn), r.setAttribute("data-blok-testid", "notification-confirm-button"), n.setAttribute("data-blok-testid", "notification-cancel-button"), i && typeof i == "function" && n.addEventListener("click", i), i && typeof i == "function" && c && c.addEventListener("click", i), l && typeof l == "function" && r.addEventListener("click", l), r.addEventListener("click", () => t.remove()), n.addEventListener("click", () => t.remove()), o.appendChild(r), o.appendChild(n), t.appendChild(o), t;
-}, b = (e) => {
-  const t = d(e), o = document.createElement("div"), r = document.createElement("button"), n = document.createElement("input"), c = t.querySelector('[data-blok-testid="notification-cross"]'), i = e.cancelHandler, l = e.okHandler;
-  return o.className = a.btnsWrapper, r.innerHTML = e.okText || "Ok", r.className = s(a.btn, a.okBtn), n.className = a.input, n.setAttribute("data-blok-testid", "notification-input"), e.placeholder && n.setAttribute("placeholder", e.placeholder), e.default && (n.value = e.default), e.inputType && (n.type = e.inputType), i && typeof i == "function" && c && c.addEventListener("click", i), l && typeof l == "function" && r.addEventListener("click", () => {
-    l(n.value);
-  }), r.addEventListener("click", () => t.remove()), o.appendChild(n), o.appendChild(r), t.appendChild(o), t;
-}, u = () => {
-  const e = document.createElement("DIV");
-  return e.className = a.wrapper, e.setAttribute("data-blok-testid", "notifier-container"), e;
-}, m = 8e3, x = () => {
-  const e = document.querySelector('[data-blok-testid="notifier-container"]');
-  if (e)
-    return e;
-  const t = u();
-  return document.body.appendChild(t), t;
-}, k = (e) => {
-  if (!e.message)
-    return;
-  const t = x(), o = e.time || m, r = (() => {
-    const n = e.type;
-    if (n === "confirm")
-      return p(e);
-    if (n === "prompt")
-      return b(e);
-    const c = d(e);
-    return window.setTimeout(() => {
-      c.remove();
-    }, o), c;
-  })();
-  t && r && (t.appendChild(r), r.className = `${r.className} animate-notify-bounce-in`, r.setAttribute("data-blok-bounce-in", "true"));
-}, h = {
-  show: k
-};
-export {
-  h as Notifier,
-  k as show
-};