@jackuait/blok 0.3.1-beta.3 → 0.3.1-beta.7

package/README.md

@@ -44,10 +44,13 @@ Run the codemod to automatically update your codebase:
 
 ```bash
 # Preview changes (recommended first)
-npx blok-codemod ./src --dry-run
+npx migrate-from-editorjs ./src --dry-run
 
 # Apply changes
-npx blok-codemod ./src
+npx migrate-from-editorjs ./src
+
+# Process the entire project
+npx migrate-from-editorjs .
 ```
 
 The codemod handles:

package/codemod/README.md

@@ -8,16 +8,16 @@ Automatically migrate your codebase from EditorJS to Blok.
 
 ```bash
 # Dry run (preview changes without modifying files)
-npx blok-codemod ./src --dry-run
+npx @jackuait/migrate-from-editorjs ./src --dry-run
 
 # Apply changes
-npx blok-codemod ./src
+npx @jackuait/migrate-from-editorjs ./src
 
 # Process entire project
-npx blok-codemod .
+npx @jackuait/migrate-from-editorjs .
 
 # Verbose output
-npx blok-codemod ./src --verbose
+npx @jackuait/migrate-from-editorjs ./src --verbose
 ```
 
 ## What It Does

package/codemod/migrate-editorjs-to-blok.js

@@ -7,7 +7,7 @@
  * It transforms imports, class names, selectors, data attributes, and text references.
  *
  * Usage:
- *   npx blok-codemod [path] [options]
+ *   npx migrate-from-editorjs [path] [options]
  *
  * Options:
  *   --dry-run    Show changes without modifying files
@@ -15,9 +15,9 @@
  *   --help       Show help
  *
  * Examples:
- *   npx blok-codemod ./src
- *   npx blok-codemod ./src --dry-run
- *   npx blok-codemod .
+ *   npx migrate-from-editorjs ./src
+ *   npx migrate-from-editorjs ./src --dry-run
+ *   npx migrate-from-editorjs .
  */
 
 const fs = require('fs');
@@ -71,23 +71,99 @@ const CLASS_NAME_TRANSFORMS = [
 ];
 
 // CSS class transformations
+// Handles both with dot (.ce-block) and without dot (ce-block) patterns
 const CSS_CLASS_TRANSFORMS = [
-  // Editor wrapper classes
-  { pattern: /\.codex-editor(?![\w-])/g, replacement: '.blok-editor' },
-  { pattern: /\.codex-editor--narrow/g, replacement: '.blok-editor--narrow' },
-  { pattern: /\.codex-editor--rtl/g, replacement: '.blok-editor--rtl' },
-  // CE prefix classes (commonly used)
-  { pattern: /\.ce-block(?![\w-])/g, replacement: '[data-blok-testid="block-wrapper"]' },
-  { pattern: /\.ce-block--selected/g, replacement: '[data-blok-selected="true"]' },
-  { pattern: /\.ce-block--stretched/g, replacement: '[data-blok-stretched="true"]' },
-  { pattern: /\.ce-block__content/g, replacement: '[data-blok-testid="block-content"]' },
-  { pattern: /\.ce-toolbar(?![\w-])/g, replacement: '[data-blok-testid="toolbar"]' },
-  { pattern: /\.ce-toolbar__plus/g, replacement: '[data-blok-testid="plus-button"]' },
-  { pattern: /\.ce-toolbar__settings-btn/g, replacement: '[data-blok-testid="settings-toggler"]' },
-  { pattern: /\.ce-toolbar__actions/g, replacement: '[data-blok-testid="toolbar-actions"]' },
-  { pattern: /\.ce-inline-toolbar/g, replacement: '[data-blok-testid="inline-toolbar"]' },
-  { pattern: /\.ce-popover(?![\w-])/g, replacement: '[data-blok-testid="popover-container"]' },
-  { pattern: /\.ce-popover-item/g, replacement: '[data-blok-testid="popover-item"]' },
+  // Editor wrapper classes (codex-editor)
+  { pattern: /\.codex-editor__redactor(?![\w-])/g, replacement: '[data-blok-redactor]' },
+  { pattern: /\.codex-editor--narrow(?![\w-])/g, replacement: '[data-blok-narrow="true"]' },
+  { pattern: /\.codex-editor--rtl(?![\w-])/g, replacement: '[data-blok-rtl="true"]' },
+  { pattern: /\.codex-editor(?![\w-])/g, replacement: '[data-blok-editor]' },
+  // Without dot prefix (for string literals, classList operations)
+  { pattern: /(['"`])codex-editor__redactor(['"`])/g, replacement: '$1data-blok-redactor$2' },
+  { pattern: /(['"`])codex-editor--narrow(['"`])/g, replacement: '$1data-blok-narrow$2' },
+  { pattern: /(['"`])codex-editor--rtl(['"`])/g, replacement: '$1data-blok-rtl$2' },
+  { pattern: /(['"`])codex-editor(['"`])/g, replacement: '$1data-blok-editor$2' },
+
+  // Block classes (ce-block)
+  { pattern: /\.ce-block--selected(?![\w-])/g, replacement: '[data-blok-selected="true"]' },
+  { pattern: /\.ce-block--stretched(?![\w-])/g, replacement: '[data-blok-stretched="true"]' },
+  { pattern: /\.ce-block--focused(?![\w-])/g, replacement: '[data-blok-focused="true"]' },
+  { pattern: /\.ce-block__content(?![\w-])/g, replacement: '[data-blok-element-content]' },
+  { pattern: /\.ce-block(?![\w-])/g, replacement: '[data-blok-element]' },
+  // Without dot prefix
+  { pattern: /(['"`])ce-block--selected(['"`])/g, replacement: '$1data-blok-selected$2' },
+  { pattern: /(['"`])ce-block--stretched(['"`])/g, replacement: '$1data-blok-stretched$2' },
+  { pattern: /(['"`])ce-block--focused(['"`])/g, replacement: '$1data-blok-focused$2' },
+  { pattern: /(['"`])ce-block__content(['"`])/g, replacement: '$1data-blok-element-content$2' },
+  { pattern: /(['"`])ce-block(['"`])/g, replacement: '$1data-blok-element$2' },
+
+  // Toolbar classes (ce-toolbar)
+  { pattern: /\.ce-toolbar__plus(?![\w-])/g, replacement: '[data-blok-testid="plus-button"]' },
+  { pattern: /\.ce-toolbar__settings-btn(?![\w-])/g, replacement: '[data-blok-settings-toggler]' },
+  { pattern: /\.ce-toolbar__actions(?![\w-])/g, replacement: '[data-blok-testid="toolbar-actions"]' },
+  { pattern: /\.ce-toolbar(?![\w-])/g, replacement: '[data-blok-toolbar]' },
+  // Without dot prefix
+  { pattern: /(['"`])ce-toolbar__plus(['"`])/g, replacement: '$1data-blok-testid="plus-button"$2' },
+  { pattern: /(['"`])ce-toolbar__settings-btn(['"`])/g, replacement: '$1data-blok-settings-toggler$2' },
+  { pattern: /(['"`])ce-toolbar__actions(['"`])/g, replacement: '$1data-blok-testid="toolbar-actions"$2' },
+  { pattern: /(['"`])ce-toolbar(['"`])/g, replacement: '$1data-blok-toolbar$2' },
+
+  // Inline toolbar classes (ce-inline-toolbar, ce-inline-tool)
+  { pattern: /\.ce-inline-tool--link(?![\w-])/g, replacement: '[data-blok-testid="inline-tool-link"]' },
+  { pattern: /\.ce-inline-tool--bold(?![\w-])/g, replacement: '[data-blok-testid="inline-tool-bold"]' },
+  { pattern: /\.ce-inline-tool--italic(?![\w-])/g, replacement: '[data-blok-testid="inline-tool-italic"]' },
+  { pattern: /\.ce-inline-tool(?![\w-])/g, replacement: '[data-blok-testid="inline-tool"]' },
+  { pattern: /\.ce-inline-toolbar(?![\w-])/g, replacement: '[data-blok-testid="inline-toolbar"]' },
+  // Without dot prefix
+  { pattern: /(['"`])ce-inline-tool--link(['"`])/g, replacement: '$1data-blok-testid="inline-tool-link"$2' },
+  { pattern: /(['"`])ce-inline-tool--bold(['"`])/g, replacement: '$1data-blok-testid="inline-tool-bold"$2' },
+  { pattern: /(['"`])ce-inline-tool--italic(['"`])/g, replacement: '$1data-blok-testid="inline-tool-italic"$2' },
+  { pattern: /(['"`])ce-inline-tool(['"`])/g, replacement: '$1data-blok-testid="inline-tool"$2' },
+  { pattern: /(['"`])ce-inline-toolbar(['"`])/g, replacement: '$1data-blok-testid="inline-toolbar"$2' },
+
+  // Popover classes (ce-popover)
+  { pattern: /\.ce-popover--opened(?![\w-])/g, replacement: '[data-blok-popover][data-blok-opened="true"]' },
+  { pattern: /\.ce-popover__container(?![\w-])/g, replacement: '[data-blok-popover-container]' },
+  { pattern: /\.ce-popover-item--focused(?![\w-])/g, replacement: '[data-blok-focused="true"]' },
+  { pattern: /\.ce-popover-item(?![\w-])/g, replacement: '[data-blok-testid="popover-item"]' },
+  { pattern: /\.ce-popover(?![\w-])/g, replacement: '[data-blok-popover]' },
+  // Without dot prefix
+  { pattern: /(['"`])ce-popover--opened(['"`])/g, replacement: '$1data-blok-popover$2' },
+  { pattern: /(['"`])ce-popover__container(['"`])/g, replacement: '$1data-blok-popover-container$2' },
+  { pattern: /(['"`])ce-popover-item--focused(['"`])/g, replacement: '$1data-blok-focused$2' },
+  { pattern: /(['"`])ce-popover-item(['"`])/g, replacement: '$1data-blok-testid="popover-item"$2' },
+  { pattern: /(['"`])ce-popover(['"`])/g, replacement: '$1data-blok-popover$2' },
+
+  // Tool-specific classes (ce-paragraph, ce-header)
+  { pattern: /\.ce-paragraph(?![\w-])/g, replacement: '[data-blok-tool="paragraph"]' },
+  { pattern: /\.ce-header(?![\w-])/g, replacement: '[data-blok-tool="header"]' },
+  // Without dot prefix
+  { pattern: /(['"`])ce-paragraph(['"`])/g, replacement: '$1data-blok-tool="paragraph"$2' },
+  { pattern: /(['"`])ce-header(['"`])/g, replacement: '$1data-blok-tool="header"$2' },
+
+  // Conversion toolbar
+  { pattern: /\.ce-conversion-toolbar(?![\w-])/g, replacement: '[data-blok-testid="conversion-toolbar"]' },
+  { pattern: /\.ce-conversion-tool(?![\w-])/g, replacement: '[data-blok-testid="conversion-tool"]' },
+  { pattern: /(['"`])ce-conversion-toolbar(['"`])/g, replacement: '$1data-blok-testid="conversion-toolbar"$2' },
+  { pattern: /(['"`])ce-conversion-tool(['"`])/g, replacement: '$1data-blok-testid="conversion-tool"$2' },
+
+  // Settings and tune classes
+  { pattern: /\.ce-settings(?![\w-])/g, replacement: '[data-blok-testid="block-settings"]' },
+  { pattern: /\.ce-tune(?![\w-])/g, replacement: '[data-blok-testid="block-tune"]' },
+  { pattern: /(['"`])ce-settings(['"`])/g, replacement: '$1data-blok-testid="block-settings"$2' },
+  { pattern: /(['"`])ce-tune(['"`])/g, replacement: '$1data-blok-testid="block-tune"$2' },
+
+  // Stub block
+  { pattern: /\.ce-stub(?![\w-])/g, replacement: '[data-blok-stub]' },
+  { pattern: /(['"`])ce-stub(['"`])/g, replacement: '$1data-blok-stub$2' },
+
+  // Drag and drop
+  { pattern: /\.ce-drag-handle(?![\w-])/g, replacement: '[data-blok-drag-handle]' },
+  { pattern: /(['"`])ce-drag-handle(['"`])/g, replacement: '$1data-blok-drag-handle$2' },
+
+  // Additional state classes
+  { pattern: /\.ce-ragged-right(?![\w-])/g, replacement: '[data-blok-ragged-right="true"]' },
+  { pattern: /(['"`])ce-ragged-right(['"`])/g, replacement: '$1data-blok-ragged-right$2' },
 ];
 
 // Data attribute transformations
@@ -119,6 +195,9 @@ const HOLDER_TRANSFORMS = [
   { pattern: /getElementById\s*\(\s*['"]editorjs['"]\s*\)/g, replacement: "getElementById('blok')" },
 ];
 
+// Bundled tools - add new tools here as they are bundled with Blok
+const BUNDLED_TOOLS = ['Header', 'Paragraph'];
+
 // Tool configuration transformations
 const TOOL_CONFIG_TRANSFORMS = [
   // Handle class property syntax
@@ -196,6 +275,108 @@ function applyTransforms(content, transforms, fileName) {
   return { result, changes };
 }
 
+/**
+ * Ensures that Blok is properly imported when bundled tools (Blok.Header, Blok.Paragraph, etc.) are used.
+ * This function checks if the content uses any Blok.* tool references and ensures there's a proper import.
+ *
+ * Handles the following scenarios:
+ * 1. No existing @jackuait/blok import -> adds `import Blok from '@jackuait/blok'`
+ * 2. Named imports only (e.g., `import { BlokConfig } from '@jackuait/blok'`) -> adds Blok default import
+ * 3. Default import with different name -> adds Blok to named imports
+ * 4. Already has Blok default import -> no changes needed
+ */
+function ensureBlokImport(content) {
+  // Check if content uses any Blok.* tool (e.g., Blok.Header, Blok.Paragraph)
+  const blokToolPattern = new RegExp(`Blok\\.(${BUNDLED_TOOLS.join('|')})`, 'g');
+  const usesBlokTools = blokToolPattern.test(content);
+
+  if (!usesBlokTools) {
+    return { result: content, changed: false };
+  }
+
+  // Check if Blok is already available as a default import
+  // Matches: import Blok from '@jackuait/blok' or import Blok, { ... } from '@jackuait/blok'
+  const hasBlokDefaultImport = /import\s+Blok\s*(?:,\s*\{[^}]*\}\s*)?from\s*['"]@jackuait\/blok['"]/.test(content);
+
+  if (hasBlokDefaultImport) {
+    return { result: content, changed: false };
+  }
+
+  // Check for existing @jackuait/blok import patterns
+  const namedOnlyImportPattern = /import\s*\{([^}]+)\}\s*from\s*['"]@jackuait\/blok['"];?/;
+  const defaultWithNamedPattern = /import\s+(\w+)\s*,\s*\{([^}]+)\}\s*from\s*['"]@jackuait\/blok['"];?/;
+  const defaultOnlyPattern = /import\s+(\w+)\s+from\s*['"]@jackuait\/blok['"];?/;
+
+  let result = content;
+
+  // Case 1: Named imports only -> add Blok default import
+  // e.g., `import { BlokConfig } from '@jackuait/blok'` -> `import Blok, { BlokConfig } from '@jackuait/blok'`
+  const namedOnlyMatch = content.match(namedOnlyImportPattern);
+  if (namedOnlyMatch) {
+    const namedImports = namedOnlyMatch[1];
+    result = content.replace(
+      namedOnlyImportPattern,
+      `import Blok, {${namedImports}} from '@jackuait/blok';`
+    );
+    return { result, changed: true };
+  }
+
+  // Case 2: Default import with different name + named imports -> add Blok to named imports
+  // e.g., `import Editor, { BlokConfig } from '@jackuait/blok'` -> `import Editor, { Blok, BlokConfig } from '@jackuait/blok'`
+  const defaultWithNamedMatch = content.match(defaultWithNamedPattern);
+  if (defaultWithNamedMatch) {
+    const defaultName = defaultWithNamedMatch[1];
+    const namedImports = defaultWithNamedMatch[2];
+    // Check if Blok is already in named imports
+    if (!/\bBlok\b/.test(namedImports)) {
+      result = content.replace(
+        defaultWithNamedPattern,
+        `import ${defaultName}, { Blok, ${namedImports.trim()} } from '@jackuait/blok';`
+      );
+      return { result, changed: true };
+    }
+    return { result: content, changed: false };
+  }
+
+  // Case 3: Default import only with different name -> add Blok to named imports
+  // e.g., `import Editor from '@jackuait/blok'` -> `import Editor, { Blok } from '@jackuait/blok'`
+  const defaultOnlyMatch = content.match(defaultOnlyPattern);
+  if (defaultOnlyMatch) {
+    const defaultName = defaultOnlyMatch[1];
+    if (defaultName !== 'Blok') {
+      result = content.replace(
+        defaultOnlyPattern,
+        `import ${defaultName}, { Blok } from '@jackuait/blok';`
+      );
+      return { result, changed: true };
+    }
+    return { result: content, changed: false };
+  }
+
+  // Case 4: No @jackuait/blok import at all -> add new import at the top (after any existing imports)
+  // Find the last import statement to insert after it
+  const importStatements = content.match(/^import\s+.+from\s+['"][^'"]+['"];?\s*$/gm);
+  if (importStatements && importStatements.length > 0) {
+    const lastImport = importStatements[importStatements.length - 1];
+    const lastImportIndex = content.lastIndexOf(lastImport);
+    const insertPosition = lastImportIndex + lastImport.length;
+    result =
+      content.slice(0, insertPosition) +
+      "\nimport Blok from '@jackuait/blok';" +
+      content.slice(insertPosition);
+  } else {
+    // No imports found, add at the very beginning (after shebang if present)
+    const shebangMatch = content.match(/^#!.*\n/);
+    if (shebangMatch) {
+      result = shebangMatch[0] + "import Blok from '@jackuait/blok';\n" + content.slice(shebangMatch[0].length);
+    } else {
+      result = "import Blok from '@jackuait/blok';\n" + content;
+    }
+  }
+
+  return { result, changed: true };
+}
+
 function transformFile(filePath, dryRun = false) {
   const content = fs.readFileSync(filePath, 'utf8');
   let transformed = content;
@@ -262,6 +443,15 @@ function transformFile(filePath, dryRun = false) {
     allChanges.push(...changes.map((c) => ({ ...c, category: 'tool-config' })));
   }
 
+  // Ensure Blok is imported if bundled tools are used (JS/TS only)
+  if (isJsFile) {
+    const { result, changed } = ensureBlokImport(transformed);
+    if (changed) {
+      transformed = result;
+      allChanges.push({ category: 'imports', pattern: 'ensureBlokImport', count: 1, note: 'Added Blok import for bundled tools' });
+    }
+  }
+
   // Apply text transforms (JS/TS/HTML) - replace "EditorJS" with "Blok"
   if (isJsFile || isHtmlFile) {
     const { result, changes } = applyTransforms(transformed, TEXT_TRANSFORMS, filePath);
@@ -339,7 +529,7 @@ function printHelp() {
 EditorJS to Blok Codemod
 
 Usage:
-  npx blok-codemod [path] [options]
+  npx migrate-from-editorjs [path] [options]
 
 Arguments:
   path          Directory or file to transform (default: current directory)
@@ -350,19 +540,26 @@ Options:
   --help        Show this help message
 
 Examples:
-  npx blok-codemod ./src
-  npx blok-codemod ./src --dry-run
-  npx blok-codemod . --verbose
+  npx migrate-from-editorjs ./src
+  npx migrate-from-editorjs ./src --dry-run
+  npx migrate-from-editorjs . --verbose
 
 What this codemod does:
   • Transforms EditorJS imports to Blok imports
   • Updates type names (EditorConfig → BlokConfig)
   • Replaces 'new EditorJS()' with 'new Blok()'
-  • Converts CSS selectors (.ce-* → [data-blok-*])
+  • Converts CSS class selectors to data attributes:
+    - .codex-editor* → [data-blok-editor], [data-blok-redactor], etc.
+    - .ce-block* → [data-blok-element], [data-blok-selected], etc.
+    - .ce-toolbar* → [data-blok-toolbar], [data-blok-settings-toggler], etc.
+    - .ce-inline-toolbar, .ce-inline-tool* → [data-blok-testid="inline-*"]
+    - .ce-popover* → [data-blok-popover], [data-blok-popover-container], etc.
+    - .ce-paragraph, .ce-header → [data-blok-tool="paragraph|header"]
   • Updates data attributes (data-id → data-blok-id)
   • Changes default holder from 'editorjs' to 'blok'
   • Updates package.json dependencies
   • Converts bundled tool imports (Header, Paragraph)
+  • Ensures Blok is imported when using bundled tools (Blok.Header, etc.)
 
 Note: After running, you may need to manually:
   • Update any custom tool implementations
@@ -484,6 +681,8 @@ module.exports = {
   transformFile,
   updatePackageJson,
   applyTransforms,
+  ensureBlokImport,
+  BUNDLED_TOOLS,
   IMPORT_TRANSFORMS,
   TYPE_TRANSFORMS,
   CLASS_NAME_TRANSFORMS,

package/codemod/package.json

@@ -1,11 +1,10 @@
 {
-  "name": "@jackuait/blok-codemod",
+  "name": "@jackuait/migrate-from-editorjs",
   "version": "1.0.0",
   "description": "Codemod to migrate from EditorJS to Blok",
   "main": "migrate-editorjs-to-blok.js",
   "bin": {
-    "blok-codemod": "./migrate-editorjs-to-blok.js",
-    "migrate-editorjs-to-blok": "./migrate-editorjs-to-blok.js"
+    "migrate-from-editorjs": "./migrate-editorjs-to-blok.js"
   },
   "keywords": [
     "blok",

package/codemod/test.js

@@ -4,6 +4,8 @@
 
 const {
   applyTransforms,
+  ensureBlokImport,
+  BUNDLED_TOOLS,
   IMPORT_TRANSFORMS,
   TYPE_TRANSFORMS,
   CLASS_NAME_TRANSFORMS,
@@ -113,19 +115,25 @@ console.log('\n🎨 CSS Class Transformations\n');
 test('transforms .codex-editor class', () => {
   const input = `.codex-editor { color: red; }`;
   const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
-  assertEqual(result, `.blok-editor { color: red; }`);
+  assertEqual(result, `[data-blok-editor] { color: red; }`);
 });
 
 test('transforms .codex-editor--narrow modifier', () => {
   const input = `.codex-editor--narrow { width: 100%; }`;
   const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
-  assertEqual(result, `.blok-editor--narrow { width: 100%; }`);
+  assertEqual(result, `[data-blok-narrow="true"] { width: 100%; }`);
+});
+
+test('transforms .codex-editor__redactor class', () => {
+  const input = `.codex-editor__redactor { padding: 20px; }`;
+  const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
+  assertEqual(result, `[data-blok-redactor] { padding: 20px; }`);
 });
 
 test('transforms .ce-block class', () => {
   const input = `.ce-block { margin: 10px; }`;
   const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
-  assertEqual(result, `[data-blok-testid="block-wrapper"] { margin: 10px; }`);
+  assertEqual(result, `[data-blok-element] { margin: 10px; }`);
 });
 
 test('transforms .ce-block--selected class', () => {
@@ -137,7 +145,7 @@ test('transforms .ce-block--selected class', () => {
 test('transforms .ce-toolbar class', () => {
   const input = `document.querySelector('.ce-toolbar')`;
   const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
-  assertEqual(result, `document.querySelector('[data-blok-testid="toolbar"]')`);
+  assertEqual(result, `document.querySelector('[data-blok-toolbar]')`);
 });
 
 test('transforms .ce-inline-toolbar class', () => {
@@ -146,6 +154,66 @@ test('transforms .ce-inline-toolbar class', () => {
   assertEqual(result, `[data-blok-testid="inline-toolbar"] { display: flex; }`);
 });
 
+test('transforms .ce-paragraph class', () => {
+  const input = `.ce-paragraph { line-height: 1.6; }`;
+  const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
+  assertEqual(result, `[data-blok-tool="paragraph"] { line-height: 1.6; }`);
+});
+
+test('transforms .ce-header class', () => {
+  const input = `.ce-header { font-weight: bold; }`;
+  const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
+  assertEqual(result, `[data-blok-tool="header"] { font-weight: bold; }`);
+});
+
+test('transforms .ce-inline-tool--link class', () => {
+  const input = `.ce-inline-tool--link { color: blue; }`;
+  const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
+  assertEqual(result, `[data-blok-testid="inline-tool-link"] { color: blue; }`);
+});
+
+test('transforms .ce-inline-tool--bold class', () => {
+  const input = `.ce-inline-tool--bold { font-weight: bold; }`;
+  const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
+  assertEqual(result, `[data-blok-testid="inline-tool-bold"] { font-weight: bold; }`);
+});
+
+test('transforms .ce-inline-tool--italic class', () => {
+  const input = `.ce-inline-tool--italic { font-style: italic; }`;
+  const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
+  assertEqual(result, `[data-blok-testid="inline-tool-italic"] { font-style: italic; }`);
+});
+
+test('transforms .ce-popover class', () => {
+  const input = `.ce-popover { position: absolute; }`;
+  const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
+  assertEqual(result, `[data-blok-popover] { position: absolute; }`);
+});
+
+test('transforms .ce-popover--opened class', () => {
+  const input = `.ce-popover--opened { display: block; }`;
+  const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
+  assertEqual(result, `[data-blok-popover][data-blok-opened="true"] { display: block; }`);
+});
+
+test('transforms .ce-popover__container class', () => {
+  const input = `.ce-popover__container { overflow: hidden; }`;
+  const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
+  assertEqual(result, `[data-blok-popover-container] { overflow: hidden; }`);
+});
+
+test('transforms class names without dot prefix (string literals)', () => {
+  const input = `element.classList.add('ce-block');`;
+  const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
+  assertEqual(result, `element.classList.add('data-blok-element');`);
+});
+
+test('transforms codex-editor in string literals', () => {
+  const input = `const wrapper = document.querySelector("codex-editor");`;
+  const { result } = applyTransforms(input, CSS_CLASS_TRANSFORMS);
+  assertEqual(result, `const wrapper = document.querySelector("data-blok-editor");`);
+});
+
 // ============================================================================
 // Data Attribute Tests
 // ============================================================================
@@ -291,6 +359,152 @@ test('does not transform unrelated EditorJS-like strings', () => {
   assertEqual(result, input);
 });
 
+// ============================================================================
+// Ensure Blok Import Tests
+// ============================================================================
+
+console.log('\n📥 Ensure Blok Import\n');
+
+test('adds Blok import when using Blok.Header with no existing import', () => {
+  const input = `const editor = new Blok({
+  tools: { header: Blok.Header }
+});`;
+  const { result, changed } = ensureBlokImport(input);
+  assertEqual(changed, true, 'Should indicate change');
+  assertEqual(result.includes("import Blok from '@jackuait/blok';"), true, 'Should add Blok import');
+});
+
+test('adds Blok import after existing imports', () => {
+  const input = `import React from 'react';
+import { useState } from 'react';
+
+const editor = new Blok({
+  tools: { header: Blok.Header }
+});`;
+  const { result, changed } = ensureBlokImport(input);
+  assertEqual(changed, true, 'Should indicate change');
+  // Check that Blok import is added after existing imports
+  const blokImportIndex = result.indexOf("import Blok from '@jackuait/blok';");
+  const lastReactImportIndex = result.indexOf("import { useState } from 'react';");
+  assertEqual(blokImportIndex > lastReactImportIndex, true, 'Blok import should be after existing imports');
+});
+
+test('adds Blok to named-only import from @jackuait/blok', () => {
+  const input = `import { BlokConfig } from '@jackuait/blok';
+
+const config: BlokConfig = {
+  tools: { header: Blok.Header }
+};`;
+  const { result, changed } = ensureBlokImport(input);
+  assertEqual(changed, true, 'Should indicate change');
+  assertEqual(result.includes("import Blok, { BlokConfig } from '@jackuait/blok';"), true, 'Should add Blok default import');
+});
+
+test('adds Blok to named imports when default import has different name', () => {
+  const input = `import Editor, { BlokConfig } from '@jackuait/blok';
+
+const config: BlokConfig = {
+  tools: { header: Blok.Header }
+};`;
+  const { result, changed } = ensureBlokImport(input);
+  assertEqual(changed, true, 'Should indicate change');
+  assertEqual(result.includes("import Editor, { Blok, BlokConfig } from '@jackuait/blok';"), true, 'Should add Blok to named imports');
+});
+
+test('adds Blok as named import when default import has different name (no existing named imports)', () => {
+  const input = `import Editor from '@jackuait/blok';
+
+const editor = new Editor({
+  tools: { header: Blok.Header }
+});`;
+  const { result, changed } = ensureBlokImport(input);
+  assertEqual(changed, true, 'Should indicate change');
+  assertEqual(result.includes("import Editor, { Blok } from '@jackuait/blok';"), true, 'Should add Blok as named import');
+});
+
+test('does not modify when Blok is already default imported', () => {
+  const input = `import Blok from '@jackuait/blok';
+
+const editor = new Blok({
+  tools: { header: Blok.Header }
+});`;
+  const { result, changed } = ensureBlokImport(input);
+  assertEqual(changed, false, 'Should not indicate change');
+  assertEqual(result, input, 'Content should be unchanged');
+});
+
+test('does not modify when Blok is already default imported with named imports', () => {
+  const input = `import Blok, { BlokConfig } from '@jackuait/blok';
+
+const editor = new Blok({
+  tools: { header: Blok.Header }
+});`;
+  const { result, changed } = ensureBlokImport(input);
+  assertEqual(changed, false, 'Should not indicate change');
+  assertEqual(result, input, 'Content should be unchanged');
+});
+
+test('does not modify when no Blok tools are used', () => {
+  const input = `import { BlokConfig } from '@jackuait/blok';
+
+const config: BlokConfig = {};`;
+  const { result, changed } = ensureBlokImport(input);
+  assertEqual(changed, false, 'Should not indicate change when no Blok.* tools used');
+  assertEqual(result, input, 'Content should be unchanged');
+});
+
+test('detects Blok.Paragraph usage', () => {
+  const input = `const editor = new Blok({
+  tools: { paragraph: Blok.Paragraph }
+});`;
+  const { result, changed } = ensureBlokImport(input);
+  assertEqual(changed, true, 'Should detect Blok.Paragraph');
+  assertEqual(result.includes("import Blok from '@jackuait/blok';"), true, 'Should add Blok import');
+});
+
+test('handles multiple Blok tools usage', () => {
+  const input = `const editor = new Blok({
+  tools: {
+    header: Blok.Header,
+    paragraph: Blok.Paragraph
+  }
+});`;
+  const { result, changed } = ensureBlokImport(input);
+  assertEqual(changed, true, 'Should detect multiple Blok tools');
+  assertEqual(result.includes("import Blok from '@jackuait/blok';"), true, 'Should add Blok import');
+});
+
+test('full migration adds Blok import for bundled tools', () => {
+  // This simulates a complete migration from EditorJS with bundled tools
+  const input = `import EditorJS from '@editorjs/editorjs';
+import Header from '@editorjs/header';
+import Paragraph from '@editorjs/paragraph';
+
+const editor = new EditorJS({
+  holder: 'editorjs',
+  tools: {
+    header: {
+      class: Header,
+    },
+    paragraph: {
+      class: Paragraph,
+    },
+  },
+});`;
+
+  let result = input;
+  result = applyTransforms(result, IMPORT_TRANSFORMS).result;
+  result = applyTransforms(result, CLASS_NAME_TRANSFORMS).result;
+  result = applyTransforms(result, HOLDER_TRANSFORMS).result;
+  result = applyTransforms(result, TOOL_CONFIG_TRANSFORMS).result;
+  result = ensureBlokImport(result).result;
+
+  // After transformation, should have Blok import (since original EditorJS import becomes @jackuait/blok)
+  assertEqual(result.includes("from '@jackuait/blok'"), true, 'Should have @jackuait/blok import');
+  assertEqual(result.includes('class: Blok.Header'), true, 'Should use Blok.Header');
+  assertEqual(result.includes('class: Blok.Paragraph'), true, 'Should use Blok.Paragraph');
+});
+
 // ============================================================================
 // Summary
 // ============================================================================