@dotcms/uve 0.0.1-beta.2 → 0.0.1-beta.21

package/internal.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/internal";

package/internal.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./internal.cjs.js').default;

package/internal.cjs.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var internal = require('./index.cjs2.js');
+require('./types.cjs.js');
+
+
+
+Object.defineProperty(exports, "Blocks", {
+	enumerable: true,
+	get: function () { return internal.Blocks; }
+});
+exports.CUSTOM_NO_COMPONENT = internal.CUSTOM_NO_COMPONENT;
+exports.DEVELOPMENT_MODE = internal.DEVELOPMENT_MODE;
+exports.EMPTY_CONTAINER_STYLE_ANGULAR = internal.EMPTY_CONTAINER_STYLE_ANGULAR;
+exports.EMPTY_CONTAINER_STYLE_REACT = internal.EMPTY_CONTAINER_STYLE_REACT;
+exports.END_CLASS = internal.END_CLASS;
+exports.PRODUCTION_MODE = internal.PRODUCTION_MODE;
+exports.START_CLASS = internal.START_CLASS;
+Object.defineProperty(exports, "__DOTCMS_UVE_EVENT__", {
+	enumerable: true,
+	get: function () { return internal.__DOTCMS_UVE_EVENT__; }
+});
+exports.__UVE_EVENTS__ = internal.__UVE_EVENTS__;
+exports.__UVE_EVENT_ERROR_FALLBACK__ = internal.__UVE_EVENT_ERROR_FALLBACK__;
+exports.combineClasses = internal.combineClasses;
+exports.computeScrollIsInBottom = internal.computeScrollIsInBottom;
+exports.findDotCMSElement = internal.findDotCMSElement;
+exports.findDotCMSVTLData = internal.findDotCMSVTLData;
+exports.getClosestDotCMSContainerData = internal.getClosestDotCMSContainerData;
+exports.getColumnPositionClasses = internal.getColumnPositionClasses;
+exports.getContainersData = internal.getContainersData;
+exports.getContentletsInContainer = internal.getContentletsInContainer;
+exports.getDotCMSContainerData = internal.getDotCMSContainerData;
+exports.getDotCMSContentletsBound = internal.getDotCMSContentletsBound;
+exports.getDotCMSPageBounds = internal.getDotCMSPageBounds;
+exports.getDotContainerAttributes = internal.getDotContainerAttributes;
+exports.getDotContentletAttributes = internal.getDotContentletAttributes;
+exports.isValidBlocks = internal.isValidBlocks;
+exports.setBounds = internal.setBounds;

package/internal.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './internal.cjs.js';
+export { _default as default } from './internal.cjs.default.js';

package/internal.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/internal";

package/internal.esm.js

@@ -0,0 +1,2 @@
+export { B as Blocks, C as CUSTOM_NO_COMPONENT, D as DEVELOPMENT_MODE, c as EMPTY_CONTAINER_STYLE_ANGULAR, b as EMPTY_CONTAINER_STYLE_REACT, E as END_CLASS, P as PRODUCTION_MODE, S as START_CLASS, d as __DOTCMS_UVE_EVENT__, _ as __UVE_EVENTS__, a as __UVE_EVENT_ERROR_FALLBACK__, l as combineClasses, k as computeScrollIsInBottom, i as findDotCMSElement, j as findDotCMSVTLData, h as getClosestDotCMSContainerData, m as getColumnPositionClasses, o as getContainersData, p as getContentletsInContainer, f as getDotCMSContainerData, e as getDotCMSContentletsBound, g as getDotCMSPageBounds, q as getDotContainerAttributes, n as getDotContentletAttributes, r as isValidBlocks, s as setBounds } from './index.esm2.js';
+import './types.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/uve",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.21",
   "description": "Official JavaScript library for interacting with Universal Visual Editor (UVE)",
   "repository": {
     "type": "git",
@@ -13,12 +13,6 @@
     "UVE",
     "Universal Visual Editor"
   ],
-  "author": "dotcms <dev@dotcms.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/dotCMS/core/issues"
-  },
-  "homepage": "https://github.com/dotCMS/core/tree/main/core-web/libs/sdk/client/README.md",
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -32,8 +26,33 @@
       "types": "./types.esm.d.ts",
       "import": "./types.cjs.mjs",
       "default": "./types.cjs.js"
+    },
+    "./internal": {
+      "module": "./internal.esm.js",
+      "types": "./internal.esm.d.ts",
+      "import": "./internal.cjs.mjs",
+      "default": "./internal.cjs.js"
     }
   },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./src/index.d.ts"
+      ],
+      "types": [
+        "./src/types.d.ts"
+      ],
+      "internal": [
+        "./src/internal.d.ts"
+      ]
+    }
+  },
+  "author": "dotcms <dev@dotcms.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dotCMS/core/issues"
+  },
+  "homepage": "https://github.com/dotCMS/core/tree/main/core-web/libs/sdk/uve/README.md",
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
   "types": "./index.esm.d.ts"

package/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/core/core.utils';
+export * from './lib/editor/public';

package/src/internal/constants.d.ts

@@ -0,0 +1,76 @@
+import { UVEEventSubscriber, UVEEventType } from '../lib/types/editor/public';
+/**
+ * Events that can be subscribed to in the UVE
+ *
+ * @internal
+ * @type {Record<UVEEventType, UVEEventSubscriber>}
+ */
+export declare const __UVE_EVENTS__: Record<UVEEventType, UVEEventSubscriber>;
+/**
+ * Default UVE event
+ *
+ * @param {string} event - The event to subscribe to.
+ * @internal
+ */
+export declare const __UVE_EVENT_ERROR_FALLBACK__: (event: string) => {
+    unsubscribe: () => void;
+    event: string;
+};
+/**
+ * Development mode
+ *
+ * @internal
+ */
+export declare const DEVELOPMENT_MODE = "development";
+/**
+ * Production mode
+ *
+ * @internal
+ */
+export declare const PRODUCTION_MODE = "production";
+/**
+ * End class
+ *
+ * @internal
+ */
+export declare const END_CLASS = "col-end-";
+/**
+ * Start class
+ *
+ * @internal
+ */
+export declare const START_CLASS = "col-start-";
+/**
+ * Empty container style for React
+ *
+ * @internal
+ */
+export declare const EMPTY_CONTAINER_STYLE_REACT: {
+    width: string;
+    backgroundColor: string;
+    display: string;
+    justifyContent: string;
+    alignItems: string;
+    color: string;
+    height: string;
+};
+/**
+ * Empty container style for Angular
+ *
+ * @internal
+ */
+export declare const EMPTY_CONTAINER_STYLE_ANGULAR: {
+    width: string;
+    'background-color': string;
+    display: string;
+    'justify-content': string;
+    'align-items': string;
+    color: string;
+    height: string;
+};
+/**
+ * Custom no component
+ *
+ * @internal
+ */
+export declare const CUSTOM_NO_COMPONENT = "CustomNoComponent";

package/src/internal/events.d.ts

@@ -0,0 +1,66 @@
+import { UVEEventHandler, UVEEventType } from '../types';
+/**
+ * Subscribes to content changes in the UVE editor
+ *
+ * @param {UVEEventHandler} callback - Function to be called when content changes are detected
+ * @returns {Object} Object containing unsubscribe function and event type
+ * @returns {Function} .unsubscribe - Function to remove the event listener
+ * @returns {UVEEventType} .event - The event type being subscribed to
+ * @internal
+ */
+export declare function onContentChanges(callback: UVEEventHandler): {
+    unsubscribe: () => void;
+    event: UVEEventType;
+};
+/**
+ * Subscribes to page reload events in the UVE editor
+ *
+ * @param {UVEEventHandler} callback - Function to be called when page reload is triggered
+ * @returns {Object} Object containing unsubscribe function and event type
+ * @returns {Function} .unsubscribe - Function to remove the event listener
+ * @returns {UVEEventType} .event - The event type being subscribed to
+ * @internal
+ */
+export declare function onPageReload(callback: UVEEventHandler): {
+    unsubscribe: () => void;
+    event: UVEEventType;
+};
+/**
+ * Subscribes to request bounds events in the UVE editor
+ *
+ * @param {UVEEventHandler} callback - Function to be called when bounds are requested
+ * @returns {Object} Object containing unsubscribe function and event type
+ * @returns {Function} .unsubscribe - Function to remove the event listener
+ * @returns {UVEEventType} .event - The event type being subscribed to
+ * @internal
+ */
+export declare function onRequestBounds(callback: UVEEventHandler): {
+    unsubscribe: () => void;
+    event: UVEEventType;
+};
+/**
+ * Subscribes to iframe scroll events in the UVE editor
+ *
+ * @param {UVEEventHandler} callback - Function to be called when iframe scroll occurs
+ * @returns {Object} Object containing unsubscribe function and event type
+ * @returns {Function} .unsubscribe - Function to remove the event listener
+ * @returns {UVEEventType} .event - The event type being subscribed to
+ * @internal
+ */
+export declare function onIframeScroll(callback: UVEEventHandler): {
+    unsubscribe: () => void;
+    event: UVEEventType;
+};
+/**
+ * Subscribes to contentlet hover events in the UVE editor
+ *
+ * @param {UVEEventHandler} callback - Function to be called when a contentlet is hovered
+ * @returns {Object} Object containing unsubscribe function and event type
+ * @returns {Function} .unsubscribe - Function to remove the event listener
+ * @returns {UVEEventType} .event - The event type being subscribed to
+ * @internal
+ */
+export declare function onContentletHovered(callback: UVEEventHandler): {
+    unsubscribe: () => void;
+    event: UVEEventType;
+};

package/src/internal/index.d.ts

@@ -0,0 +1 @@
+export * from './constants';

package/src/internal.d.ts

@@ -0,0 +1,6 @@
+export * from './internal/index';
+export * from './lib/types/editor/internal';
+export * from './lib/types/events/internal';
+export * from './lib/dom/dom.utils';
+export * from './lib/editor/internal';
+export * from './lib/types/block-editor-renderer/internal';

package/src/lib/{utils.d.ts → core/core.utils.d.ts}

@@ -1,4 +1,4 @@
-import { UVEState } from './types';
+import { UVEState, UVEEventSubscription, UVEEventType, UVEEventPayloadMap } from '../types/editor/public';
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
  *
@@ -28,3 +28,22 @@ import { UVEState } from './types';
  * ```
  */
 export declare function getUVEState(): UVEState | undefined;
+/**
+ * Creates a subscription to a UVE event.
+ *
+ * @param eventType - The type of event to subscribe to
+ * @param callback - The callback function that will be called when the event occurs
+ * @returns An event subscription that can be used to unsubscribe
+ *
+ * @example
+ * ```ts
+ * // Subscribe to page changes
+ * const subscription = createUVESubscription(UVEEventType.CONTENT_CHANGES, (changes) => {
+ *   console.log('Content changes:', changes);
+ * });
+ *
+ * // Later, unsubscribe when no longer needed
+ * subscription.unsubscribe();
+ * ```
+ */
+export declare function createUVESubscription<T extends UVEEventType>(eventType: T, callback: (payload: UVEEventPayloadMap[T] extends undefined ? void : UVEEventPayloadMap[T]) => void): UVEEventSubscription;

package/src/lib/dom/dom.utils.d.ts

@@ -0,0 +1,206 @@
+import { DotCMSContainerBound, DotCMSContentletBound } from '../types/editor/internal';
+import { DotContainerAttributes, DotContentletAttributes, EditableContainerData } from '../types/editor/public';
+import { DotCMSColumnContainer, DotCMSContentlet, DotCMSPageAsset, DotPageAssetLayoutColumn } from '../types/page/public';
+/**
+ * Calculates the bounding information for each page element within the given containers.
+ *
+ * @export
+ * @param {HTMLDivElement[]} containers - An array of HTMLDivElement representing the containers.
+ * @return {DotCMSContainerBound[]} An array of objects containing the bounding information for each page element.
+ * @example
+ * ```ts
+ * const containers = document.querySelectorAll('.container');
+ * const bounds = getDotCMSPageBounds(containers);
+ * console.log(bounds);
+ * ```
+ */
+export declare function getDotCMSPageBounds(containers: HTMLDivElement[]): DotCMSContainerBound[];
+/**
+ * Calculates the bounding information for each contentlet inside a container.
+ *
+ * @export
+ * @param {DOMRect} containerRect - The bounding rectangle of the container.
+ * @param {HTMLDivElement[]} contentlets - An array of HTMLDivElement representing the contentlets.
+ * @return {DotCMSContentletBound[]} An array of objects containing the bounding information for each contentlet.
+ * @example
+ * ```ts
+ * const containerRect = container.getBoundingClientRect();
+ * const contentlets = container.querySelectorAll('.contentlet');
+ * const bounds = getDotCMSContentletsBound(containerRect, contentlets);
+ * console.log(bounds); // Element bounds within the container
+ * ```
+ */
+export declare function getDotCMSContentletsBound(containerRect: DOMRect, contentlets: HTMLDivElement[]): DotCMSContentletBound[];
+/**
+ * Get container data from VTLS.
+ *
+ * @export
+ * @param {HTMLElement} container - The container element.
+ * @return {object} An object containing the container data.
+ * @example
+ * ```ts
+ * const container = document.querySelector('.container');
+ * const data = getContainerData(container);
+ * console.log(data);
+ * ```
+ */
+export declare function getDotCMSContainerData(container: HTMLElement): {
+    acceptTypes: string;
+    identifier: string;
+    maxContentlets: string;
+    uuid: string;
+};
+/**
+ * Get the closest container data from the contentlet.
+ *
+ * @export
+ * @param {Element} element - The contentlet element.
+ * @return {object | null} An object containing the closest container data or null if no container is found.
+ * @example
+ * ```ts
+ * const contentlet = document.querySelector('.contentlet');
+ * const data = getClosestDotCMSContainerData(contentlet);
+ * console.log(data);
+ * ```
+ */
+export declare function getClosestDotCMSContainerData(element: Element): {
+    acceptTypes: string;
+    identifier: string;
+    maxContentlets: string;
+    uuid: string;
+} | null;
+/**
+ * Find the closest contentlet element based on HTMLElement.
+ *
+ * @export
+ * @param {HTMLElement | null} element - The starting element.
+ * @return {HTMLElement | null} The closest contentlet element or null if not found.
+ * @example
+ * const element = document.querySelector('.some-element');
+ * const contentlet = findDotCMSElement(element);
+ * console.log(contentlet);
+ */
+export declare function findDotCMSElement(element: HTMLElement | null): HTMLElement | null;
+/**
+ * Find VTL data within a target element.
+ *
+ * @export
+ * @param {HTMLElement} target - The target element to search within.
+ * @return {Array<{ inode: string, name: string }> | null} An array of objects containing VTL data or null if none found.
+ * @example
+ * ```ts
+ * const target = document.querySelector('.target-element');
+ * const vtlData = findDotCMSVTLData(target);
+ * console.log(vtlData);
+ * ```
+ */
+export declare function findDotCMSVTLData(target: HTMLElement): {
+    inode: string | undefined;
+    name: string | undefined;
+}[] | null;
+/**
+ * Check if the scroll position is at the bottom of the page.
+ *
+ * @export
+ * @return {boolean} True if the scroll position is at the bottom, otherwise false.
+ * @example
+ * ```ts
+ * if (dotCMSScrollIsInBottom()) {
+ *     console.log('Scrolled to the bottom');
+ * }
+ * ```
+ */
+export declare function computeScrollIsInBottom(): boolean;
+/**
+ *
+ *
+ * Combine classes into a single string.
+ *
+ * @param {string[]} classes
+ * @returns {string} Combined classes
+ */
+export declare const combineClasses: (classes: string[]) => string;
+/**
+ *
+ *
+ * Calculates and returns the CSS Grid positioning classes for a column based on its configuration.
+ * Uses a 12-column grid system where columns are positioned using grid-column-start and grid-column-end.
+ *
+ * @example
+ * ```typescript
+ * const classes = getColumnPositionClasses({
+ *   leftOffset: 1, // Starts at the first column
+ *   width: 6      // Spans 6 columns
+ * });
+ * // Returns: { startClass: 'col-start-1', endClass: 'col-end-7' }
+ * ```
+ *
+ * @param {DotPageAssetLayoutColumn} column - Column configuration object
+ * @param {number} column.leftOffset - Starting position (0-based) in the grid
+ * @param {number} column.width - Number of columns to span
+ * @returns {{ startClass: string, endClass: string }} Object containing CSS class names for grid positioning
+ */
+export declare const getColumnPositionClasses: (column: DotPageAssetLayoutColumn) => {
+    startClass: string;
+    endClass: string;
+};
+/**
+ *
+ *
+ * Helper function that returns an object containing the dotCMS data attributes.
+ * @param {DotCMSContentlet} contentlet - The contentlet to get the attributes for
+ * @param {string} container - The container to get the attributes for
+ * @returns {DotContentletAttributes} The dotCMS data attributes
+ */
+export declare function getDotContentletAttributes(contentlet: DotCMSContentlet, container: string): DotContentletAttributes;
+/**
+ *
+ *
+ * Retrieves container data from a DotCMS page asset using the container reference.
+ * This function processes the container information and returns a standardized format
+ * for container editing.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @throws {Error} When page asset is invalid or container is not found
+ * @returns {EditableContainerData} Formatted container data for editing
+ *
+ * @example
+ * const containerData = getContainersData(pageAsset, containerRef);
+ * // Returns: { uuid: '123', identifier: 'cont1', acceptTypes: 'type1,type2', maxContentlets: 5 }
+ */
+export declare const getContainersData: (dotCMSPageAsset: DotCMSPageAsset, columContainer: DotCMSColumnContainer) => EditableContainerData | null;
+/**
+ *
+ *
+ * Retrieves the contentlets (content items) associated with a specific container.
+ * Handles different UUID formats and provides warning for missing contentlets.
+ *
+ * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
+ * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
+ * @returns {DotCMSContentlet[]} Array of contentlets in the container
+ *
+ * @example
+ * const contentlets = getContentletsInContainer(pageAsset, containerRef);
+ * // Returns: [{ identifier: 'cont1', ... }, { identifier: 'cont2', ... }]
+ */
+export declare const getContentletsInContainer: (dotCMSPageAsset: DotCMSPageAsset, columContainer: DotCMSColumnContainer) => DotCMSContentlet[];
+/**
+ *
+ *
+ * Generates the required DotCMS data attributes for a container element.
+ * These attributes are used by DotCMS for container identification and functionality.
+ *
+ * @param {EditableContainerData} params - Container data including uuid, identifier, acceptTypes, and maxContentlets
+ * @returns {DotContainerAttributes} Object containing all necessary data attributes
+ *
+ * @example
+ * const attributes = getDotContainerAttributes({
+ *   uuid: '123',
+ *   identifier: 'cont1',
+ *   acceptTypes: 'type1,type2',
+ *   maxContentlets: 5
+ * });
+ * // Returns: { 'data-dot-object': 'container', 'data-dot-identifier': 'cont1', ... }
+ */
+export declare function getDotContainerAttributes({ uuid, identifier, acceptTypes, maxContentlets }: EditableContainerData): DotContainerAttributes;

package/src/lib/editor/internal.d.ts

@@ -0,0 +1,23 @@
+import { BlockEditorState, DotCMSContainerBound } from '@dotcms/uve/internal';
+import { Block } from '@dotcms/uve/types';
+/**
+ * Sets the bounds of the containers in the editor.
+ * Retrieves the containers from the DOM and sends their position data to the editor.
+ * @private
+ * @memberof DotCMSPageEditor
+ */
+export declare function setBounds(bounds: DotCMSContainerBound[]): void;
+/**
+ * Validates the structure of a Block Editor block.
+ *
+ * This function checks that:
+ * 1. The blocks parameter is a valid object
+ * 2. The block has a 'doc' type
+ * 3. The block has a valid content array that is not empty
+ *
+ * @param {Block} blocks - The blocks structure to validate
+ * @returns {BlockEditorState} Object containing validation state and any error message
+ * @property {boolean} BlockEditorState.isValid - Whether the blocks structure is valid
+ * @property {string | null} BlockEditorState.error - Error message if invalid, null if valid
+ */
+export declare const isValidBlocks: (blocks: Block) => BlockEditorState;

package/src/lib/editor/public.d.ts

@@ -0,0 +1,62 @@
+import { DotCMSReorderMenuConfig, DotCMSUVEMessage } from '../types/editor/internal';
+import { Contentlet, DotCMSUVEConfig } from '../types/editor/public';
+import { DotCMSInlineEditingPayload, DotCMSInlineEditingType } from '../types/events/public';
+/**
+ * Post message to dotcms page editor
+ *
+ * @export
+ * @template T
+ * @param {DotCMSUVEMessage<T>} message
+ */
+export declare function sendMessageToUVE<T = unknown>(message: DotCMSUVEMessage<T>): void;
+/**
+ * You can use this function to edit a contentlet in the editor.
+ *
+ * Calling this function inside the editor, will prompt the UVE to open a dialog to edit the contentlet.
+ *
+ * @export
+ * @template T
+ * @param {Contentlet<T>} contentlet - The contentlet to edit.
+ */
+export declare function editContentlet<T>(contentlet: Contentlet<T>): void;
+export declare function reorderMenu(config?: DotCMSReorderMenuConfig): void;
+/**
+ * Initializes the inline editing in the editor.
+ *
+ * @export
+ * @param {INLINE_EDITING_EVENT_KEY} type
+ * @param {InlineEditEventData} eventData
+ * @return {*}
+ *
+ *  * @example
+ * ```html
+ * <div onclick="initInlineEditing('BLOCK_EDITOR', { inode, languageId, contentType, fieldName, content })">
+ *      ${My Content}
+ * </div>
+ * ```
+ */
+export declare function initInlineEditing(type: DotCMSInlineEditingType, data?: DotCMSInlineEditingPayload): void;
+/**
+ * Initializes the Universal Visual Editor (UVE) with required handlers and event listeners.
+ *
+ * This function sets up:
+ * - Scroll handling
+ * - Empty contentlet styling
+ * - Block editor inline event listening
+ * - Client ready state
+ * - UVE event subscriptions
+ *
+ * @returns {Object} An object containing the cleanup function
+ * @returns {Function} destroyUVESubscriptions - Function to clean up all UVE event subscriptions
+ *
+ * @example
+ * ```typescript
+ * const { destroyUVESubscriptions } = initUVE();
+ *
+ * // When done with UVE
+ * destroyUVESubscriptions();
+ * ```
+ */
+export declare function initUVE(config?: DotCMSUVEConfig): {
+    destroyUVESubscriptions: () => void;
+};

package/src/lib/types/block-editor-renderer/internal.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Enum representing the different types of blocks available in the Block Editor
+ *
+ * @export
+ * @enum {string}
+ */
+export declare enum Blocks {
+    /** Represents a paragraph block */
+    PARAGRAPH = "paragraph",
+    /** Represents a heading block */
+    HEADING = "heading",
+    /** Represents a text block */
+    TEXT = "text",
+    /** Represents a bullet/unordered list block */
+    BULLET_LIST = "bulletList",
+    /** Represents an ordered/numbered list block */
+    ORDERED_LIST = "orderedList",
+    /** Represents a list item within a list block */
+    LIST_ITEM = "listItem",
+    /** Represents a blockquote block */
+    BLOCK_QUOTE = "blockquote",
+    /** Represents a code block */
+    CODE_BLOCK = "codeBlock",
+    /** Represents a hard break (line break) */
+    HARDBREAK = "hardBreak",
+    /** Represents a horizontal rule/divider */
+    HORIZONTAL_RULE = "horizontalRule",
+    /** Represents a DotCMS image block */
+    DOT_IMAGE = "dotImage",
+    /** Represents a DotCMS video block */
+    DOT_VIDEO = "dotVideo",
+    /** Represents a table block */
+    TABLE = "table",
+    /** Represents a DotCMS content block */
+    DOT_CONTENT = "dotContent"
+}
+/**
+ * Represents the validation state of a Block Editor instance
+ *
+ * @interface BlockEditorState
+ * @property {boolean} isValid - Whether the blocks structure is valid
+ * @property {string | null} error - Error message if blocks are invalid, null otherwise
+ */
+export interface BlockEditorState {
+    error: string | null;
+}

package/src/lib/types/block-editor-renderer/public.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Represents a Mark used by text content in the Block Editor
+ *
+ * @export
+ * @interface Mark
+ */
+export interface Mark {
+    type: string;
+    attrs: Record<string, string>;
+}
+/**
+ * Represents a Content Node used by the Block Editor
+ *
+ * @export
+ * @interface ContentNode
+ */
+export interface ContentNode {
+    /** The type of content node */
+    type: string;
+    /** Child content nodes */
+    content?: ContentNode[];
+    /** Optional attributes for the node */
+    attrs?: Record<string, any>;
+    /** Optional marks applied to text content */
+    marks?: Mark[];
+    /** Optional text content */
+    text?: string;
+}
+/**
+ * Represents a Block in the Block Editor
+ *
+ * @export
+ * @interface Block
+ */
+export interface Block {
+    content?: ContentNode[];
+    type: string;
+}