@servicetitan/dte-unlayer 0.41.0 → 0.43.0

package/src/unlayer-interface.tsx

@@ -51,6 +51,12 @@ export interface UnlayerEditorCustomTool {
     groupUrl?: string;
 }
 
+export interface HideToolConfigActions {
+    deleteAction?: boolean;
+    duplicateAction?: boolean;
+    closeAction?: boolean;
+}
+
 export interface CreateUnlayerEditorProps {
     tools: UnlayerEditorCustomTool[];
     newSnapshot?: UnlayerEditorTwin;
@@ -67,4 +73,6 @@ export interface CreateUnlayerEditorProps {
     noCoreTools?: boolean;
     latest?: boolean;
     blocks?: boolean;
+    preselectToolSlug?: string;
+    hideToolConfigActions?: HideToolConfigActions;
 }

package/src/unlayer.tsx

@@ -2,7 +2,7 @@ import { editorCoreScript, editorCoreStyles, editorCoreTools } from './editor-co
 import { constGenericsEditor } from './shared/const';
 import { unlayerSupportedFonts } from './shared/fonts';
 import { unlayerCustomToolsGetRegisterUrls } from './tools';
-import { CreateUnlayerEditorProps } from './unlayer-interface';
+import { CreateUnlayerEditorProps, HideToolConfigActions } from './unlayer-interface';
 
 export interface UnlayerExport {
     html: string;
@@ -61,9 +61,64 @@ export const versions = {
     schema: 5,
 };
 
+export const handlePreselectTool = (preselectToolSlug: string) => {
+    return `
+        const element = document.querySelector('.u_content_custom_${preselectToolSlug}');
+        if (element) {
+            element.click();
+        }
+    `;
+};
+
+export const prepareToolConfigActionsVisibility = (
+    hideToolConfigActions?: HideToolConfigActions
+) => {
+    if (!hideToolConfigActions) {
+        return '';
+    }
+
+    let styles = '';
+
+    if (hideToolConfigActions.deleteAction) {
+        styles += `
+            .blockbuilder-options-header .icon-delete {
+                display: none !important;
+            }
+        `;
+    }
+
+    if (hideToolConfigActions.duplicateAction) {
+        styles += `
+            .blockbuilder-options-header .icon-duplicate {
+                display: none !important;
+            }
+        `;
+    }
+
+    if (hideToolConfigActions.closeAction) {
+        styles += `
+            .blockbuilder-options-header .icon-close {
+                display: none !important;
+            }
+        `;
+    }
+
+    return styles;
+};
+
 export const createUnlayerEditor = (
     container: HTMLDivElement,
-    { customCSS, customJS, latest, mergeTags, noCoreTools, tools, units }: CreateUnlayerEditorProps
+    {
+        customCSS,
+        customJS,
+        hideToolConfigActions,
+        latest,
+        mergeTags,
+        noCoreTools,
+        preselectToolSlug,
+        tools,
+        units,
+    }: CreateUnlayerEditorProps
 ): Unlayer => {
     const customScripts = [
         editorCoreScript,
@@ -71,11 +126,21 @@ export const createUnlayerEditor = (
         'window.dteStore.sendData("--core-loaded")',
         ...unlayerCustomToolsGetRegisterUrls(tools),
         ...(customJS ? (Array.isArray(customJS) ? customJS : [customJS]) : []),
+        /*
+         * @TODO this is workaround for preselecting tool, will be better to use unlayer functionality for this
+         * but it is not implemented yet
+         */
+        preselectToolSlug ? handlePreselectTool(preselectToolSlug) : '',
         'window.dteStore.sendData("--data-loaded")',
     ].filter(js => !!js?.trim());
     const customStyles = [
         editorCoreStyles,
         ...(customCSS ? (Array.isArray(customCSS) ? customCSS : [customCSS]) : []),
+        /*
+         * @TODO this is workaround for hiding delete, duplicate and close buttons from tool config.
+         * Will be better to use unlayer functionality for this but it is not implemented yet
+         */
+        prepareToolConfigActionsVisibility(hideToolConfigActions),
     ].filter(css => !!css?.trim());
 
     /**