@craftile/core 0.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Craftile Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@craftile/core",
+  "version": "0.1.0",
+  "description": "Framework-agnostic block editor engine for Craftile",
+  "keywords": [
+    "craftile",
+    "block-editor",
+    "cms",
+    "editor",
+    "blocks"
+  ],
+  "license": "MIT",
+  "authors": [
+    {
+      "name": "Eldo Magan",
+      "email": "magan.eldo@gmail.com"
+    }
+  ],
+  "type": "module",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./vue": "./src/vue/index.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@craftile/event-bus": "0.1.0",
+    "@craftile/types": "0.1.0"
+  },
+  "devDependencies": {
+    "vitest": "^3.2.4",
+    "vue": "^3.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/craftile/editor.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "vitest"
+  }
+}

package/src/blocks-manager.ts

@@ -0,0 +1,115 @@
+import type { BlockSchema } from '@craftile/types';
+
+export class BlocksManager {
+  protected schemas: Map<string, BlockSchema> = new Map();
+  private patternCache = new Map<string, RegExp>();
+
+  /**
+   * Register a new block schema
+   */
+  register(type: string, schema: BlockSchema): void {
+    if (this.schemas.has(type)) {
+      throw new Error(`Block type '${type}' is already registered`);
+    }
+
+    this.schemas.set(type, schema);
+  }
+
+  /**
+   * Register multiple block schemas at once
+   */
+  registerMany(schemas: Record<string, BlockSchema>): void {
+    for (const [type, schema] of Object.entries(schemas)) {
+      this.register(type, schema);
+    }
+  }
+
+  /**
+   * Unregister a block schema
+   */
+  unregister(type: string): boolean {
+    return this.schemas.delete(type);
+  }
+
+  /**
+   * Get a block schema by type
+   */
+  get(type: string): BlockSchema | undefined {
+    return this.schemas.get(type);
+  }
+
+  /**
+   * Check if a block type is registered
+   */
+  has(type: string): boolean {
+    return this.schemas.has(type);
+  }
+
+  /**
+   * Get all registered schemas as a record
+   */
+  getAll(): Record<string, BlockSchema> {
+    const result: Record<string, BlockSchema> = {};
+
+    for (const [type, schema] of this.schemas.entries()) {
+      result[type] = schema;
+    }
+
+    return result;
+  }
+
+  /**
+   * Find block types that match a predicate
+   */
+  find(predicate: (type: string, schema: BlockSchema) => boolean): string[] {
+    const result: string[] = [];
+
+    for (const [type, schema] of this.schemas.entries()) {
+      if (predicate(type, schema)) {
+        result.push(type);
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Validate if a block type can be a child of another type
+   */
+  canBeChild(childType: string, parentType: string): boolean {
+    const parentSchema = this.get(parentType);
+
+    if (!parentSchema || !parentSchema.accepts) {
+      return false;
+    }
+
+    return parentSchema.accepts.some((pattern) => this.matchesPattern(childType, pattern));
+  }
+
+  /**
+   * Get all registered block types
+   */
+  getTypes(): string[] {
+    return Array.from(this.schemas.keys());
+  }
+
+  /**
+   * Check if a child type matches a pattern from the accepts list
+   * Supports glob-style wildcards: '*', '@theme/*', '*-button', '*type*', etc.
+   */
+  private matchesPattern(childType: string, pattern: string): boolean {
+    if (pattern === '*') {
+      return true;
+    }
+
+    if (!this.patternCache.has(pattern)) {
+      const withPlaceholders = pattern.replace(/\*/g, '__WILDCARD__');
+      const escapedPattern = withPlaceholders.replace(/[.+?^${}()|[\]\\]/g, '\\$&');
+      const regexPattern = '^' + escapedPattern.replace(/__WILDCARD__/g, '.*') + '$';
+
+      this.patternCache.set(pattern, new RegExp(regexPattern));
+    }
+
+    return this.patternCache.get(pattern)!.test(childType);
+  }
+}

package/src/commands/duplicate-block.ts

@@ -0,0 +1,203 @@
+import type { Command, EngineEmitFn } from '../types';
+import type { Block, Page } from '@craftile/types';
+import { generateId } from '../utils';
+
+export interface DuplicateBlockOptions {
+  blockId: string;
+  emit: EngineEmitFn;
+}
+
+export class DuplicateBlockCommand implements Command {
+  private page: Page;
+  private blockId: string;
+
+  // State for reverting
+  private duplicatedBlockId!: string;
+  private duplicatedBlock?: Block;
+  private parentId?: string | null;
+  private insertIndex!: number;
+  private regionName?: string | null;
+  private emit: EngineEmitFn;
+
+  constructor(page: Page, options: DuplicateBlockOptions) {
+    this.page = page;
+    this.blockId = options.blockId;
+    this.emit = options.emit;
+  }
+
+  apply(): void {
+    const originalBlock = this.page.blocks[this.blockId];
+    if (!originalBlock) {
+      throw new Error(`Block not found: ${this.blockId}`);
+    }
+
+    this.duplicatedBlockId = generateId();
+
+    this.duplicatedBlock = this.cloneBlockWithNewIds(originalBlock, this.duplicatedBlockId, originalBlock.parentId);
+
+    this.determineInsertLocation();
+
+    this.insertDuplicatedBlock();
+
+    this.emit('block:duplicate', {
+      originalBlockId: this.blockId,
+      newBlockId: this.duplicatedBlockId,
+      newBlock: this.duplicatedBlock,
+      parentId: this.parentId || undefined,
+      index: this.insertIndex,
+      regionName: this.regionName || undefined,
+    });
+  }
+
+  revert(): void {
+    if (!this.duplicatedBlock || !this.duplicatedBlockId) {
+      return;
+    }
+
+    this.removeDuplicatedBlock();
+  }
+
+  getBlockId(): string {
+    return this.blockId;
+  }
+
+  getDuplicatedBlockId(): string {
+    return this.duplicatedBlockId;
+  }
+
+  getDuplicatedBlock(): Block | undefined {
+    return this.duplicatedBlock;
+  }
+
+  getParentId(): string | null | undefined {
+    return this.parentId;
+  }
+
+  getInsertIndex(): number {
+    return this.insertIndex;
+  }
+
+  getRegionName(): string | null | undefined {
+    return this.regionName;
+  }
+
+  private cloneBlockWithNewIds(block: Block, newId: string, newParentId?: string): Block {
+    const clonedBlock: Block = {
+      ...structuredClone(block),
+      id: newId,
+      parentId: newParentId,
+      children: [],
+    };
+
+    if (block.children && block.children.length > 0) {
+      for (const childId of block.children) {
+        const childBlock = this.page.blocks[childId];
+        if (childBlock) {
+          const newChildId = generateId();
+          this.cloneBlockWithNewIds(childBlock, newChildId, newId);
+          clonedBlock.children.push(newChildId);
+        }
+      }
+    }
+
+    this.page.blocks[newId] = clonedBlock;
+
+    return clonedBlock;
+  }
+
+  private determineInsertLocation(): void {
+    const originalBlock = this.page.blocks[this.blockId];
+    if (!originalBlock) {
+      throw new Error(`Block not found: ${this.blockId}`);
+    }
+
+    this.parentId = originalBlock.parentId || null;
+
+    if (this.parentId) {
+      const parent = this.page.blocks[this.parentId];
+      if (parent) {
+        const index = parent.children.indexOf(this.blockId);
+        this.insertIndex = index !== -1 ? index + 1 : parent.children.length;
+      } else {
+        this.insertIndex = 0;
+      }
+    } else {
+      const region = this.page.regions.find((r) => r.blocks.includes(this.blockId));
+      if (region) {
+        const index = region.blocks.indexOf(this.blockId);
+        this.regionName = region.name;
+        this.insertIndex = index + 1;
+      } else {
+        this.regionName = this.page.regions[0].name || 'main';
+        this.insertIndex = this.page.regions[0].blocks.length || 0;
+      }
+    }
+  }
+
+  private insertDuplicatedBlock(): void {
+    if (!this.duplicatedBlock) {
+      return;
+    }
+
+    if (this.parentId) {
+      const targetParent = this.page.blocks[this.parentId];
+      if (!targetParent) {
+        throw new Error(`Parent block not found: ${this.parentId}`);
+      }
+
+      targetParent.children.splice(this.insertIndex, 0, this.duplicatedBlockId);
+    } else {
+      let targetRegion = this.page.regions.find((r) => r.name === this.regionName);
+
+      if (!targetRegion) {
+        targetRegion = { name: this.regionName || 'main', blocks: [] };
+        this.page.regions.push(targetRegion);
+      }
+
+      targetRegion.blocks.splice(this.insertIndex, 0, this.duplicatedBlockId);
+    }
+  }
+
+  private removeDuplicatedBlock(): void {
+    if (!this.duplicatedBlockId) {
+      return;
+    }
+
+    this.removeBlockAndChildren(this.duplicatedBlockId);
+
+    if (this.parentId) {
+      // Remove from parent's children array
+      const targetParent = this.page.blocks[this.parentId];
+      if (targetParent) {
+        const index = targetParent.children.indexOf(this.duplicatedBlockId);
+        if (index !== -1) {
+          targetParent.children.splice(index, 1);
+        }
+      }
+    } else {
+      // Remove from region
+      if (this.page.regions) {
+        const targetRegion = this.page.regions.find((r) => r.name === this.regionName);
+        if (targetRegion) {
+          const index = targetRegion.blocks.indexOf(this.duplicatedBlockId);
+          if (index !== -1) {
+            targetRegion.blocks.splice(index, 1);
+          }
+        }
+      }
+    }
+  }
+
+  private removeBlockAndChildren(blockId: string): void {
+    const block = this.page.blocks[blockId];
+    if (!block) {
+      return;
+    }
+
+    for (const childId of block.children) {
+      this.removeBlockAndChildren(childId);
+    }
+
+    delete this.page.blocks[blockId];
+  }
+}

package/src/commands/insert-block.ts

@@ -0,0 +1,143 @@
+import type { Block, BlockSchema, Page } from '@craftile/types';
+import type { Command, EngineEmitFn } from '../types';
+import { generateId } from '../utils';
+
+export interface InsertBlockOptions {
+  blockType: string;
+  parentId?: string;
+  regionName?: string;
+  index?: number;
+  properties?: Record<string, any>;
+  blockSchema?: BlockSchema;
+  emit: EngineEmitFn;
+}
+
+export class InsertBlockCommand implements Command {
+  private page: Page;
+  private blockType: string;
+  private parentId?: string;
+  private regionName?: string;
+  private index?: number;
+  private blockId: string;
+  private properties: Record<string, any>;
+  private insertedBlock?: Block;
+  private actualIndex?: number;
+  private emit: EngineEmitFn;
+
+  constructor(page: Page, options: InsertBlockOptions) {
+    this.page = page;
+    this.blockType = options.blockType;
+    this.parentId = options.parentId;
+    this.regionName = options.regionName;
+    this.index = options.index;
+    this.blockId = generateId();
+    this.emit = options.emit;
+
+    this.properties = this.buildProperties(options.blockSchema);
+  }
+
+  apply(): void {
+    this.insertedBlock = {
+      type: this.blockType,
+      id: this.blockId,
+      properties: this.properties,
+      children: [],
+      parentId: undefined, // Will be set if inserting as child
+    };
+
+    this.page.blocks[this.blockId] = this.insertedBlock;
+
+    if (this.parentId) {
+      const parent = this.page.blocks[this.parentId];
+
+      if (!parent) {
+        throw new Error(`Parent block not found: ${this.parentId}`);
+      }
+
+      this.insertedBlock.parentId = parent.id;
+
+      if (this.index !== undefined && this.index >= 0 && this.index <= parent.children.length) {
+        parent.children.splice(this.index, 0, this.blockId);
+        this.actualIndex = this.index;
+      } else {
+        parent.children.push(this.blockId);
+        this.actualIndex = parent.children.length - 1;
+      }
+    } else {
+      // Insert as top-level block (to the specified region)
+      const targetRegionName = this.regionName || this.page.regions[0].name;
+      let targetRegion = this.page.regions.find((r) => r.name === targetRegionName);
+
+      if (!targetRegion) {
+        targetRegion = { name: targetRegionName, blocks: [] };
+        this.page.regions.push(targetRegion);
+      }
+
+      if (this.index !== undefined && this.index >= 0 && this.index <= targetRegion.blocks.length) {
+        targetRegion.blocks.splice(this.index, 0, this.blockId);
+        this.actualIndex = this.index;
+      } else {
+        targetRegion.blocks.push(this.blockId);
+        this.actualIndex = targetRegion.blocks.length - 1;
+      }
+    }
+
+    this.emit('block:insert', {
+      blockId: this.blockId,
+      block: this.insertedBlock,
+      parentId: this.parentId,
+      index: this.actualIndex,
+      regionName: this.regionName || this.page.regions[0].name,
+    });
+  }
+
+  revert(): void {
+    if (!this.insertedBlock) {
+      return;
+    }
+
+    delete this.page.blocks[this.blockId];
+
+    if (this.parentId) {
+      const parent = this.page.blocks[this.parentId];
+      if (parent && this.actualIndex !== undefined) {
+        parent.children.splice(this.actualIndex, 1);
+      }
+    } else {
+      const targetRegionName = this.regionName || this.page.regions[0].name;
+      const targetRegion = this.page.regions.find((r) => r.name === targetRegionName);
+
+      if (targetRegion && this.actualIndex !== undefined) {
+        targetRegion.blocks.splice(this.actualIndex, 1);
+      }
+    }
+
+    this.emit('block:remove', {
+      blockId: this.blockId,
+      block: this.insertedBlock,
+      parentId: this.parentId,
+    });
+  }
+
+  getBlockId(): string {
+    return this.blockId;
+  }
+
+  getInsertedBlock(): Block | undefined {
+    return this.insertedBlock;
+  }
+
+  private buildProperties(blockSchema?: BlockSchema): Record<string, any> {
+    const properties: Record<string, any> = {};
+
+    if (blockSchema?.properties) {
+      for (const field of blockSchema.properties) {
+        if (field.default !== undefined) {
+          properties[field.id] = field.default;
+        }
+      }
+    }
+
+    return properties;
+  }
+}

package/src/commands/move-block.ts

@@ -0,0 +1,182 @@
+import type { Block, Page } from '@craftile/types';
+import type { Command, EngineEmitFn } from '../types';
+
+export interface MoveBlockOptions {
+  blockId: string;
+  targetParentId?: string;
+  targetIndex?: number;
+  targetRegionName?: string;
+  emit: EngineEmitFn;
+}
+
+export class MoveBlockCommand implements Command {
+  private page: Page;
+  private blockId: string;
+  private targetParentId?: string;
+  private targetIndex?: number;
+  private targetRegionName?: string;
+
+  // State for reverting
+  private blockToMove?: Block;
+  private originalParentId?: string;
+  private originalIndex!: number;
+  private originalRegionName?: string;
+
+  private emit: EngineEmitFn;
+
+  constructor(page: Page, options: MoveBlockOptions) {
+    this.page = page;
+    this.blockId = options.blockId;
+    this.targetParentId = options.targetParentId;
+    this.targetIndex = options.targetIndex;
+    this.targetRegionName = options.targetRegionName;
+    this.emit = options.emit;
+  }
+
+  apply(): void {
+    this.blockToMove = this.page.blocks[this.blockId];
+
+    if (!this.blockToMove) {
+      throw new Error(`Block not found: ${this.blockId}`);
+    }
+
+    if (this.targetParentId && !this.page.blocks[this.targetParentId]) {
+      throw new Error(`Target parent not found: ${this.targetParentId}`);
+    }
+
+    this.originalParentId = this.blockToMove.parentId;
+
+    // First we remove the block from the current position
+    if (this.originalParentId) {
+      const parent = this.page.blocks[this.originalParentId];
+      if (parent) {
+        this.originalIndex = parent.children.indexOf(this.blockId);
+        if (this.originalIndex !== -1) {
+          parent.children.splice(this.originalIndex, 1);
+        }
+      }
+    } else {
+      // it is a region level block
+      const region = this.page.regions.find((r) => r.blocks.includes(this.blockId));
+      if (region) {
+        this.originalIndex = region.blocks.indexOf(this.blockId);
+        this.originalRegionName = region.name;
+        region.blocks.splice(this.originalIndex, 1);
+      }
+    }
+
+    // the we insert the block at the new position
+    if (this.targetParentId) {
+      const targetParent = this.page.blocks[this.targetParentId];
+      this.blockToMove.parentId = this.targetParentId;
+
+      if (this.targetIndex !== undefined && this.targetIndex >= 0 && this.targetIndex <= targetParent.children.length) {
+        targetParent.children.splice(this.targetIndex, 0, this.blockId);
+      } else {
+        targetParent.children.push(this.blockId);
+      }
+    } else {
+      this.blockToMove.parentId = undefined;
+
+      const regionName = this.targetRegionName || this.page.regions[0].name || 'main';
+      let targetRegion = this.page.regions.find((r) => r.name === regionName);
+
+      if (!targetRegion) {
+        targetRegion = { name: regionName, blocks: [] };
+        this.page.regions.push(targetRegion);
+      }
+
+      if (this.targetIndex !== undefined && this.targetIndex >= 0 && this.targetIndex <= targetRegion.blocks.length) {
+        targetRegion.blocks.splice(this.targetIndex, 0, this.blockId);
+      } else {
+        targetRegion.blocks.push(this.blockId);
+      }
+    }
+
+    this.emit('block:move', {
+      blockId: this.blockId,
+      targetParentId: this.targetParentId,
+      targetIndex: this.targetIndex,
+      targetRegionName: this.targetRegionName,
+      sourceParentId: this.originalParentId || null,
+      sourceRegionName: this.originalRegionName || null,
+      sourceIndex: this.originalIndex,
+    });
+  }
+
+  revert(): void {
+    if (!this.blockToMove || this.originalIndex === undefined) {
+      return;
+    }
+
+    if (this.blockToMove.parentId) {
+      const currentParent = this.page.blocks[this.blockToMove.parentId];
+      if (currentParent) {
+        const index = currentParent.children.indexOf(this.blockId);
+        if (index !== -1) {
+          currentParent.children.splice(index, 1);
+        }
+      }
+    } else {
+      const region = this.page.regions.find((r) => r.blocks.includes(this.blockId));
+      if (region) {
+        const index = region.blocks.indexOf(this.blockId);
+        if (index !== -1) {
+          region.blocks.splice(index, 1);
+        }
+      }
+    }
+
+    this.blockToMove.parentId = this.originalParentId;
+
+    if (this.originalParentId) {
+      const originalParent = this.page.blocks[this.originalParentId];
+      if (originalParent) {
+        originalParent.children.splice(this.originalIndex, 0, this.blockId);
+      }
+    } else if (this.originalRegionName) {
+      const region = this.page.regions.find((r) => r.name === this.originalRegionName);
+      if (region) {
+        region.blocks.splice(this.originalIndex, 0, this.blockId);
+      }
+    }
+
+    this.emit('block:move', {
+      blockId: this.blockId,
+      targetParentId: this.originalParentId,
+      targetIndex: this.originalIndex,
+      targetRegionName: this.originalRegionName,
+      sourceParentId: this.targetParentId || null,
+      sourceRegionName: this.targetRegionName || null,
+      sourceIndex: this.targetIndex || 0,
+    });
+  }
+
+  getBlockId(): string {
+    return this.blockId;
+  }
+
+  getTargetParentId(): string | undefined {
+    return this.targetParentId;
+  }
+
+  getTargetIndex(): number | undefined {
+    return this.targetIndex;
+  }
+
+  getTargetRegionName(): string | undefined {
+    return this.targetRegionName;
+  }
+
+  getSourceParentId(): string | null {
+    return this.originalParentId || null;
+  }
+
+  getSourceRegionName(): string | null {
+    return this.originalRegionName || null;
+  }
+
+  getSourceIndex(): number {
+    return this.originalIndex;
+  }
+}