@jackuait/blok 0.4.1-beta.11 → 0.4.1-beta.12

package/src/styles/main.css

@@ -84,17 +84,20 @@
 }
 
 [data-drop-indicator]::before {
-  @apply content-[''] absolute -translate-x-1/2 w-full max-w-content h-1.5 rounded-sm bg-[#d4e3fc] pointer-events-none z-10;
-  left: calc(50% + var(--drop-indicator-depth, 0) * 12px);
+  @apply content-[''] absolute w-full max-w-content h-1.5 rounded-sm bg-[#d4e3fc] pointer-events-none z-10;
+  left: 50%;
+  margin-left: calc(var(--drop-indicator-depth, 0) * 12px);
   max-width: calc(650px - var(--drop-indicator-depth, 0) * 24px);
 }
 
 [data-drop-indicator="bottom"]::before {
-  @apply translate-y-1/2 bottom-0;
+  @apply bottom-0;
+  transform: translateX(-50%) translateY(50%);
 }
 
 [data-drop-indicator="top"]::before {
-  @apply -translate-y-1/2 top-0;
+  @apply top-0;
+  transform: translateX(-50%) translateY(-50%);
 }
 
 /**

package/src/tools/header/index.ts

@@ -641,6 +641,7 @@ export class Header implements BlockTool {
       name: `header-${level.number}`,
       data: { level: level.number },
       searchTerms: [`h${level.number}`, 'title', 'header', 'heading'],
+      shortcut: '#'.repeat(level.number),
     }));
   }
 }

package/src/tools/list/index.ts

@@ -17,7 +17,7 @@ import type {
   PasteEvent,
   ToolboxConfig,
   ConversionConfig,
-  SanitizerConfig,
+  ToolSanitizerConfig,
   PasteConfig,
 } from '../../../types';
 import type { MenuConfig } from '../../../types/tools/menu-config';
@@ -183,7 +183,7 @@ export class ListItem implements BlockTool {
    */
   private static pendingMarkerUpdate = false;
 
-  sanitize?: SanitizerConfig | undefined;
+  sanitize?: ToolSanitizerConfig | undefined;
 
   private normalizeData(data: ListItemData | Record<string, never>): ListItemData {
     const defaultStyle = this._settings.defaultStyle || 'unordered';
@@ -1665,11 +1665,15 @@ export class ListItem implements BlockTool {
     };
   }
 
-  public static get sanitize(): SanitizerConfig {
+  public static get sanitize(): ToolSanitizerConfig {
     return {
       text: {
         br: true,
-        a: true,
+        a: {
+          href: true,
+          target: '_blank',
+          rel: 'nofollow',
+        },
         b: true,
         i: true,
         mark: true,
@@ -1797,6 +1801,7 @@ export class ListItem implements BlockTool {
         data: { style: 'unordered' },
         name: 'bulleted-list',
         searchTerms: ['ul', 'bullet', 'unordered', 'list'],
+        shortcut: '-',
       },
       {
         icon: IconListNumbered,
@@ -1805,6 +1810,7 @@ export class ListItem implements BlockTool {
         data: { style: 'ordered' },
         name: 'numbered-list',
         searchTerms: ['ol', 'ordered', 'number', 'list'],
+        shortcut: '1.',
       },
       {
         icon: IconListChecklist,
@@ -1813,6 +1819,7 @@ export class ListItem implements BlockTool {
         data: { style: 'checklist' },
         name: 'check-list',
         searchTerms: ['checkbox', 'task', 'todo', 'check', 'list'],
+        shortcut: '[]',
       },
     ];
   }

package/types/configs/sanitizer-config.d.ts

@@ -4,7 +4,7 @@
  */
 export type TagConfig = boolean | { [attr: string]: boolean | string };
 
-export type SanitizerRule = TagConfig | ((el: Element) => TagConfig)
+export type SanitizerRule = TagConfig | ((el: Element) => TagConfig);
 
 export interface SanitizerConfig {
   /**
@@ -41,3 +41,27 @@ export interface SanitizerConfig {
    */
   [key: string]: SanitizerRule;
 }
+
+/**
+ * Sanitizer config for Block Tools that supports field-specific tag rules.
+ * Use this when your tool's data has multiple fields that each need different sanitization.
+ *
+ * @example Field-specific sanitization
+ * ```typescript
+ * static get sanitize(): ToolSanitizerConfig {
+ *   return {
+ *     text: {
+ *       br: true,
+ *       a: { href: true, target: '_blank', rel: 'nofollow' }
+ *     },
+ *     caption: {
+ *       b: true,
+ *       i: true
+ *     }
+ *   };
+ * }
+ * ```
+ */
+export interface ToolSanitizerConfig {
+  [key: string]: SanitizerRule | SanitizerConfig;
+}

package/types/index.d.ts

@@ -72,6 +72,7 @@ export {
   BlokConfig,
   SanitizerConfig,
   SanitizerRule,
+  ToolSanitizerConfig,
   PasteConfig,
   LogLevels,
   ConversionConfig,

package/types/tools/block-tool.d.ts

@@ -1,4 +1,4 @@
-import { ConversionConfig, PasteConfig, SanitizerConfig } from '../configs';
+import { ConversionConfig, PasteConfig, ToolSanitizerConfig } from '../configs';
 import { BlockToolData } from './block-tool-data';
 import { BaseTool, BaseToolConstructable, BaseToolConstructorOptions } from './tool';
 import { ToolConfig } from './tool-config';
@@ -15,7 +15,7 @@ export interface BlockTool extends BaseTool {
   /**
    * Sanitizer rules description
    */
-  sanitize?: SanitizerConfig;
+  sanitize?: ToolSanitizerConfig;
 
   /**
    * Process Tool's element in DOM and return raw data

package/types/tools/tool-settings.d.ts

@@ -52,6 +52,13 @@ export interface ToolboxConfigEntry {
    * Terms are matched case-insensitively.
    */
   searchTerms?: string[];
+
+  /**
+   * Shortcut hint to display in the toolbox (e.g., '#', '##', '-', '1.', '[]').
+   * This is displayed as a secondary label next to the tool title.
+   * Unlike tool-level shortcuts, these are per-entry hints for tools with multiple variants.
+   */
+  shortcut?: string;
 }
 
 /**

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

@@ -45,6 +45,12 @@ export interface PopoverItemChildren {
    * Useful for items like link tool that render custom content instead of a dropdown list.
    */
   hideChevron?: boolean;
+
+  /**
+   * Width of the nested popover. Defaults to '280px'.
+   * Use 'auto' to fit content width.
+   */
+  width?: string;
 }
 
 /**

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

@@ -65,6 +65,12 @@ export interface PopoverParams {
    * Used to close nested popover and return focus to parent.
    */
   onNavigateBack?: () => void;
+
+  /**
+   * Width of the popover. Defaults to '280px'.
+   * Use 'auto' to fit content width.
+   */
+  width?: string;
 }