@dotcms/client 0.0.1-alpha.50 → 0.0.1-alpha.52

package/index.cjs.js

@@ -1100,6 +1100,7 @@ exports.NOTIFY_CLIENT = void 0;
 
 const INITIAL_DOT_UVE = {
     editContentlet,
+    initInlineEditing,
     reorderMenu,
     lastScrollYPosition: 0
 };
@@ -1164,10 +1165,6 @@ exports.CLIENT_ACTIONS = void 0;
      * Tell the editor to edit a contentlet
      */
     CLIENT_ACTIONS["EDIT_CONTENTLET"] = "edit-contentlet";
-    /**
-     * Tell the editor to open the block editor sidebar
-     */
-    CLIENT_ACTIONS["INIT_BLOCK_EDITOR_INLINE_EDITING"] = "init-editor-inline-editing";
     /**
      * Tell the editor to do nothing
      */
@@ -1560,6 +1557,30 @@ function editContentlet(contentlet) {
     });
 }
 /**
+ * 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>
+ * ```
+ */
+function initInlineEditing(type, data) {
+    postMessageToEditor({
+        action: exports.CLIENT_ACTIONS.INIT_INLINE_EDITING,
+        payload: {
+            type,
+            data
+        }
+    });
+}
+/*
  * Reorders the menu based on the provided configuration.
  *
  * @param {ReorderMenuConfig} [config] - Optional configuration for reordering the menu.
@@ -2013,6 +2034,7 @@ exports.editContentlet = editContentlet;
 exports.getPageRequestParams = getPageRequestParams;
 exports.graphqlToPageEntity = graphqlToPageEntity;
 exports.initEditor = initEditor;
+exports.initInlineEditing = initInlineEditing;
 exports.isInsideEditor = isInsideEditor;
 exports.postMessageToEditor = postMessageToEditor;
 exports.reorderMenu = reorderMenu;

package/index.esm.js

@@ -1098,6 +1098,7 @@ var NOTIFY_CLIENT;
 
 const INITIAL_DOT_UVE = {
     editContentlet,
+    initInlineEditing,
     reorderMenu,
     lastScrollYPosition: 0
 };
@@ -1162,10 +1163,6 @@ var CLIENT_ACTIONS;
      * Tell the editor to edit a contentlet
      */
     CLIENT_ACTIONS["EDIT_CONTENTLET"] = "edit-contentlet";
-    /**
-     * Tell the editor to open the block editor sidebar
-     */
-    CLIENT_ACTIONS["INIT_BLOCK_EDITOR_INLINE_EDITING"] = "init-editor-inline-editing";
     /**
      * Tell the editor to do nothing
      */
@@ -1558,6 +1555,30 @@ function editContentlet(contentlet) {
     });
 }
 /**
+ * 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>
+ * ```
+ */
+function initInlineEditing(type, data) {
+    postMessageToEditor({
+        action: CLIENT_ACTIONS.INIT_INLINE_EDITING,
+        payload: {
+            type,
+            data
+        }
+    });
+}
+/*
  * Reorders the menu based on the provided configuration.
  *
  * @param {ReorderMenuConfig} [config] - Optional configuration for reordering the menu.
@@ -2005,4 +2026,4 @@ const getPageRequestParams = ({ path = '', params = {} }) => {
     };
 };
 
-export { CLIENT_ACTIONS, DotCmsClient, NOTIFY_CLIENT, destroyEditor, editContentlet, getPageRequestParams, graphqlToPageEntity, initEditor, isInsideEditor, postMessageToEditor, reorderMenu, updateNavigation };
+export { CLIENT_ACTIONS, DotCmsClient, NOTIFY_CLIENT, destroyEditor, editContentlet, getPageRequestParams, graphqlToPageEntity, initEditor, initInlineEditing, isInsideEditor, postMessageToEditor, reorderMenu, updateNavigation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/client",
-  "version": "0.0.1-alpha.50",
+  "version": "0.0.1-alpha.52",
   "description": "Official JavaScript library for interacting with DotCMS REST APIs.",
   "repository": {
     "type": "git",

package/src/index.d.ts

@@ -1,7 +1,8 @@
 import { ClientConfig, DotCmsClient } from './lib/client/sdk-js-client';
 import { CLIENT_ACTIONS, postMessageToEditor } from './lib/editor/models/client.model';
 import { CustomClientParams, DotCMSPageEditorConfig, EditorConfig } from './lib/editor/models/editor.model';
+import { InlineEditorData, INLINE_EDITING_EVENT_KEY, InlineEditEventData } from './lib/editor/models/inline-event.model';
 import { NOTIFY_CLIENT } from './lib/editor/models/listeners.model';
-import { destroyEditor, editContentlet, reorderMenu, initEditor, isInsideEditor, updateNavigation } from './lib/editor/sdk-editor';
+import { destroyEditor, editContentlet, reorderMenu, initEditor, isInsideEditor, updateNavigation, initInlineEditing } from './lib/editor/sdk-editor';
 import { getPageRequestParams, graphqlToPageEntity } from './lib/utils';
-export { graphqlToPageEntity, getPageRequestParams, isInsideEditor, editContentlet, reorderMenu, DotCmsClient, DotCMSPageEditorConfig, CLIENT_ACTIONS, NOTIFY_CLIENT, CustomClientParams, postMessageToEditor, EditorConfig, initEditor, updateNavigation, destroyEditor, ClientConfig };
+export { graphqlToPageEntity, getPageRequestParams, isInsideEditor, editContentlet, reorderMenu, DotCmsClient, DotCMSPageEditorConfig, CLIENT_ACTIONS, NOTIFY_CLIENT, CustomClientParams, postMessageToEditor, EditorConfig, initEditor, updateNavigation, destroyEditor, ClientConfig, initInlineEditing, InlineEditEventData, InlineEditorData, INLINE_EDITING_EVENT_KEY };

package/src/lib/editor/models/client.model.d.ts

@@ -1,4 +1,4 @@
-import { editContentlet, reorderMenu } from '../sdk-editor';
+import { editContentlet, initInlineEditing, reorderMenu } from '../sdk-editor';
 declare global {
     interface Window {
         dotUVE: DotUVE;
@@ -65,10 +65,6 @@ export declare enum CLIENT_ACTIONS {
      * Tell the editor to edit a contentlet
      */
     EDIT_CONTENTLET = "edit-contentlet",
-    /**
-     * Tell the editor to open the block editor sidebar
-     */
-    INIT_BLOCK_EDITOR_INLINE_EDITING = "init-editor-inline-editing",
     /**
      * Tell the editor to do nothing
      */
@@ -95,6 +91,7 @@ type PostMessageProps<T> = {
 export declare function postMessageToEditor<T = unknown>(message: PostMessageProps<T>): void;
 export interface DotUVE {
     editContentlet: typeof editContentlet;
+    initInlineEditing: typeof initInlineEditing;
     reorderMenu: typeof reorderMenu;
     lastScrollYPosition: number;
 }

package/src/lib/editor/models/inline-event.model.d.ts

@@ -0,0 +1,9 @@
+export type INLINE_EDITING_EVENT_KEY = 'BLOCK_EDITOR' | 'WYSIWYG';
+export interface InlineEditorData {
+    inode: string;
+    language: number;
+    contentType: string;
+    fieldName: string;
+    content: Record<string, unknown>;
+}
+export type InlineEditEventData = InlineEditorData;

package/src/lib/editor/sdk-editor.d.ts

@@ -1,4 +1,5 @@
 import { DotCMSPageEditorConfig, ReorderMenuConfig } from './models/editor.model';
+import { INLINE_EDITING_EVENT_KEY, InlineEditEventData } from './models/inline-event.model';
 import { Contentlet } from '../client/content/shared/types';
 /**
  * Updates the navigation in the editor.
@@ -20,15 +21,21 @@ export declare function updateNavigation(pathname: string): void;
  */
 export declare function editContentlet<T>(contentlet: Contentlet<T>): void;
 /**
- * Reorders the menu based on the provided configuration.
+ * Initializes the inline editing in the editor.
  *
- * @param {ReorderMenuConfig} [config] - Optional configuration for reordering the menu.
- * @param {number} [config.startLevel=1] - The starting level of the menu to reorder.
- * @param {number} [config.depth=2] - The depth of the menu to reorder.
+ * @export
+ * @param {INLINE_EDITING_EVENT_KEY} type
+ * @param {InlineEditEventData} eventData
+ * @return {*}
  *
- * This function constructs a URL for the reorder menu page with the specified
- * start level and depth, and sends a message to the editor to perform the reorder action.
+ *  * @example
+ * ```html
+ * <div onclick="initInlineEditing('BLOCK_EDITOR', { inode, languageId, contentType, fieldName, content })">
+ *      ${My Content}
+ * </div>
+ * ```
  */
+export declare function initInlineEditing(type: INLINE_EDITING_EVENT_KEY, data?: InlineEditEventData): void;
 export declare function reorderMenu(config?: ReorderMenuConfig): void;
 /**
  * Checks if the code is running inside an editor.

package/src/lib/editor/utils/traditional-vtl.utils.d.ts

@@ -1,5 +1,4 @@
 /**
  * Listen for block editor inline event.
- *
  */
 export declare const listenBlockEditorInlineEvent: () => void;