@jackuait/blok 0.6.0-beta.9 → 0.7.0-beta.1

package/src/components/utils/popover/popover.const.ts

@@ -5,19 +5,19 @@
  */
 export const css = {
   // Popover container - base styles
-  popoverContainer: 'absolute flex flex-col overflow-hidden box-border opacity-0 pointer-events-none p-0 border-none z-[4] max-h-0 min-w-[var(--width)] w-[var(--width)] rounded-lg shadow-[0_3px_15px_-3px_theme(colors.popover-shadow)] left-[var(--popover-left)] top-[var(--popover-top)] bg-popover-bg',
+  popoverContainer: 'absolute flex flex-col overflow-hidden box-border opacity-0 pointer-events-none p-0 border-none z-4 max-h-0 min-w-(--width) w-(--width) rounded-xl shadow-[0_4px_20px_-4px_var(--color-popover-shadow),0_0_0_0.5px_rgba(0,0,0,0.06)] left-(--popover-left) top-(--popover-top) bg-popover-bg',
 
   // Popover container - mobile styles (applied conditionally)
   // Reset left/top from base class since inset shorthand may not properly override them in twMerge
   popoverContainerMobile: 'fixed max-w-none rounded-[10px] min-w-[calc(100%-var(--offset)*2)] left-auto top-auto inset-[auto_var(--offset)_calc(var(--offset)+env(safe-area-inset-bottom))_var(--offset)]',
 
   // Popover container - opened state
-  popoverContainerOpened: 'opacity-100 pointer-events-auto p-1 max-h-[var(--max-height)] border border-popover-border animate-[panelShowing_100ms_ease]',
+  popoverContainerOpened: 'opacity-100 pointer-events-auto p-1.5 max-h-(--max-height) border border-popover-border animate-[panelShowing_100ms_ease]',
 
   // Popover overlay
   popoverOverlay: 'hidden bg-dark',
 
-  items: 'overflow-y-auto overscroll-contain',
+  items: 'overflow-y-auto overscroll-contain [scrollbar-gutter:stable] pr-1',
 };
 
 /**

package/src/components/utils/sanitizer.ts

@@ -30,11 +30,11 @@
 import HTMLJanitor from 'html-janitor';
 
 import type { BlockToolData, SanitizerConfig, SanitizerRule } from '../../../types';
-import type { TagConfig } from '../../../types/configs/sanitizer-config';
+import type { TagConfig, ToolSanitizerConfig } from '../../../types/configs/sanitizer-config';
 import type { SavedData } from '../../../types/data-formats';
 import { deepMerge, isBoolean, isEmpty, isFunction, isObject, isString } from '../utils';
 
-type DeepSanitizerRule = SanitizerConfig | SanitizerRule | boolean;
+type DeepSanitizerRule = SanitizerConfig | SanitizerRule;
 
 /**
  * Recursive type for data that can contain nested arrays
@@ -55,7 +55,7 @@ const UNSAFE_URL_ATTR_FALLBACK_PATTERN =
  */
 export const sanitizeBlocks = (
   blocksData: Array<Pick<SavedData, 'data' | 'tool'>>,
-  sanitizeConfig: SanitizerConfig | ((toolName: string) => SanitizerConfig | undefined),
+  sanitizeConfig: SanitizerConfig | ToolSanitizerConfig | ((toolName: string) => SanitizerConfig | ToolSanitizerConfig | undefined),
   globalSanitizer: SanitizerConfig = {} as SanitizerConfig
 ): Array<Pick<SavedData, 'data' | 'tool'>> => {
   return blocksData.map((block) => {
@@ -400,6 +400,27 @@ const mergeTagRules = (globalRules: SanitizerConfig, fieldRules: SanitizerConfig
     merged[tag] = cloneTagConfig(globalValue);
   }
 
+  /**
+   * Include tags from field rules that are not present in global rules.
+   * Tool-specific sanitize configs should be able to allow tags
+   * beyond what the global config defines.
+   */
+  if (!fieldRules) {
+    return merged;
+  }
+
+  for (const tag in fieldRules) {
+    if (!Object.prototype.hasOwnProperty.call(fieldRules, tag)) {
+      continue;
+    }
+
+    if (Object.prototype.hasOwnProperty.call(merged, tag)) {
+      continue;
+    }
+
+    merged[tag] = cloneTagConfig(fieldRules[tag]);
+  }
+
   return merged;
 };
 

package/src/components/utils/tw.ts

@@ -17,9 +17,15 @@ const CLASS_PATTERNS: Array<{ pattern: RegExp; getGroup: (match: RegExpMatchArra
   // Min-width: min-w-* classes conflict with each other
   { pattern: /^min-w-(.+)$/, getGroup: () => 'min-w' },
 
+  // Max-height: max-h-* classes conflict with each other
+  { pattern: /^max-h-(.+)$/, getGroup: () => 'max-h' },
+
   // Height: h-* classes conflict with each other
   { pattern: /^h-(.+)$/, getGroup: () => 'h' },
 
+  // Min-height: min-h-* classes conflict with each other
+  { pattern: /^min-h-(.+)$/, getGroup: () => 'min-h' },
+
   // Display: block, inline-block, flex, hidden, etc.
   { pattern: /^(block|inline-block|inline|flex|inline-flex|grid|inline-grid|hidden|contents|flow-root|list-item)$/, getGroup: () => 'display' },
 
@@ -78,7 +84,7 @@ const CLASS_PATTERNS: Array<{ pattern: RegExp; getGroup: (match: RegExpMatchArra
   { pattern: /^gap-(.+)$/, getGroup: () => 'gap' },
 
   // Border radius: rounded-*
-  { pattern: /^rounded(-.*)?$/, getGroup: () => 'rounded' },
+  { pattern: /^rounded(-.*)?$/, getGroup: () => 'rounded-sm' },
 
   // Visibility: visible, invisible
   { pattern: /^(visible|invisible)$/, getGroup: () => 'visibility' },
@@ -114,13 +120,19 @@ const CLASS_PATTERNS: Array<{ pattern: RegExp; getGroup: (match: RegExpMatchArra
   { pattern: /^leading-(.+)$/, getGroup: () => 'leading' },
 
   // Outline: outline-*
-  { pattern: /^outline(-.*)?$/, getGroup: () => 'outline' },
+  { pattern: /^outline(-.*)?$/, getGroup: () => 'outline-solid' },
+
+  // Border width/style: border, border-0, border-none
+  { pattern: /^border(?:-(?:none|0))?$/, getGroup: () => 'border-w' },
+
+  // Border side width: border-{t,r,b,l}(-{suffix})?
+  { pattern: /^border-([trlb])(?:-|$)/, getGroup: (m) => `border-${m[1]}` },
 
-  // Border: border-*
-  { pattern: /^border(-.*)?$/, getGroup: () => 'border' },
+  // Border color: everything else with border- prefix
+  { pattern: /^border-.+$/, getGroup: () => 'border-color' },
 
   // Shadow: shadow-*
-  { pattern: /^shadow(-.*)?$/, getGroup: () => 'shadow' },
+  { pattern: /^shadow(-.*)?$/, getGroup: () => 'shadow-sm' },
 ];
 
 /**

package/src/full.ts

@@ -18,6 +18,7 @@
 import { BoldInlineTool as Bold } from './components/inline-tools/inline-tool-bold';
 import { ItalicInlineTool as Italic } from './components/inline-tools/inline-tool-italic';
 import { LinkInlineTool as Link } from './components/inline-tools/inline-tool-link';
+import { MarkerInlineTool as Marker } from './components/inline-tools/inline-tool-marker';
 import { Header } from './tools/header';
 import { ListItem as List } from './tools/list';
 import { Paragraph } from './tools/paragraph';
@@ -29,9 +30,11 @@ export {
   Paragraph,
   Header,
   List,
+  Toggle,
   Bold,
   Italic,
   Link,
+  Marker,
   defaultBlockTools,
   defaultInlineTools,
 } from './tools';
@@ -66,4 +69,5 @@ export const allTools = {
   bold: { class: Bold },
   italic: { class: Italic },
   link: { class: Link },
+  marker: { class: Marker },
 } as const;

package/src/stories/Header.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/html-vite';
 
 import { Header,  type HeaderConfig  } from '../tools/header';
+import { Marker } from '../tools';
 
 import { createEditorContainer } from './helpers';
 import type { EditorFactoryOptions } from './helpers';
@@ -35,6 +36,19 @@ const createEditor = (args: HeaderArgs): HTMLElement => createEditorContainer({
   },
 });
 
+const markerHeaderTools = {
+  header: {
+    class: Header,
+    inlineToolbar: true,
+  },
+  marker: Marker,
+};
+
+const createMarkerEditor = (args: HeaderArgs): HTMLElement => createEditorContainer({
+  ...args,
+  tools: markerHeaderTools,
+});
+
 const meta: Meta<HeaderArgs> = {
   title: 'Components/Header',
   tags: ['autodocs'],
@@ -139,3 +153,95 @@ export const AllLevelsCustomStyles: Story = {
   },
   render: createCustomHeaderEditor,
 };
+
+// ---------------------------------------------------------------------------
+//  Headers with color markers
+// ---------------------------------------------------------------------------
+
+const PRESETS = [
+  { name: 'gray', text: '#787774', bg: '#f1f1ef' },
+  { name: 'brown', text: '#9f6b53', bg: '#f4eeee' },
+  { name: 'orange', text: '#d9730d', bg: '#fbecdd' },
+  { name: 'yellow', text: '#cb9b00', bg: '#fbf3db' },
+  { name: 'green', text: '#448361', bg: '#edf3ec' },
+  { name: 'teal', text: '#2b9a8f', bg: '#e4f5f3' },
+  { name: 'blue', text: '#337ea9', bg: '#e7f3f8' },
+  { name: 'purple', text: '#9065b0', bg: '#f6f3f9' },
+  { name: 'pink', text: '#c14c8a', bg: '#f9f0f5' },
+  { name: 'red', text: '#d44c47', bg: '#fdebec' },
+];
+
+const textMark = (hex: string, label: string): string =>
+  `<mark style="color: ${hex}; background-color: transparent">${label}</mark>`;
+
+const bgMark = (hex: string, label: string): string =>
+  `<mark style="background-color: ${hex}">${label}</mark>`;
+
+/**
+ * H2 header with all 10 text-color presets applied as inline marks.
+ */
+export const HeaderTextColors: Story = {
+  args: {
+    data: {
+      time: Date.now(),
+      version: '1.0.0',
+      blocks: [
+        {
+          id: 'header-text-colors',
+          type: 'header',
+          data: {
+            text: PRESETS.map((p) => textMark(p.text, p.name)).join(' '),
+            level: 2,
+          },
+        },
+      ],
+    },
+  },
+  render: createMarkerEditor,
+};
+
+/**
+ * H2 header with all 10 background-color presets applied as inline marks.
+ */
+export const HeaderBackgroundColors: Story = {
+  args: {
+    data: {
+      time: Date.now(),
+      version: '1.0.0',
+      blocks: [
+        {
+          id: 'header-bg-colors',
+          type: 'header',
+          data: {
+            text: PRESETS.map((p) => bgMark(p.bg, p.name)).join(' '),
+            level: 2,
+          },
+        },
+      ],
+    },
+  },
+  render: createMarkerEditor,
+};
+
+/**
+ * H1 through H6, each with a different preset text color applied.
+ * Shows color markers render correctly at every heading level.
+ */
+export const HeaderLevelsWithColors: Story = {
+  args: {
+    minHeight: 500,
+    data: {
+      time: Date.now(),
+      version: '1.0.0',
+      blocks: PRESETS.slice(0, 6).map((p, i) => ({
+        id: `header-level-color-${i + 1}`,
+        type: 'header',
+        data: {
+          text: `Heading ${i + 1} in ${textMark(p.text, p.name)}`,
+          level: i + 1,
+        },
+      })),
+    },
+  },
+  render: createMarkerEditor,
+};