[Documents] - highlight editable elements is missing (#3776)

* added the highlight editable draft version

* updated styles

* Automatic frontend build

* added the icon and moved it in the sidebar

* updated styles

* added tranlsations

* Automatic frontend build

* updated the icon

* updated the HighlightEditablesButton styles

* updated the translation key value

* updated the sdk export of the InheritanceOverlay

* Automatic frontend build

---------

Co-authored-by: ValeriaMaltseva <11871778+ValeriaMaltseva@users.noreply.github.com>

Author: ValeriaMaltseva

assets/js/src/core/app/public-api/document-editor-iframe/editable-data/editable-data.ts

@@ -28,12 +28,17 @@ export interface DocumentEditableApi {
   getEditableDefinitions: () => AbstractDocumentEditableDefinition[]
   registerDynamicEditables: (editables: AbstractDocumentEditableDefinition[]) => void
   unregisterDynamicEditables: (editableIds: string[]) => void
+  getHighlightEditables: () => boolean
+  setHighlightEditables: (highlight: boolean) => void
+  subscribeHighlightEditables: (listener: (highlight: boolean) => void) => () => void
 }
 
 class DocumentEditableApiImpl implements DocumentEditableApi {
   private values: Record<string, ValueType> = {}
   private inheritanceState: Record<string, boolean> = {}
   private dynamicEditables: Record<string, AbstractDocumentEditableDefinition> = {}
+  private highlightEditables = false
+  private readonly highlightListeners = new Set<(highlight: boolean) => void>()
 
   getValues (forApi: boolean = false): Record<string, ValueType> {
     if (!forApi) {
@@ -86,6 +91,33 @@ class DocumentEditableApiImpl implements DocumentEditableApi {
     Object.assign(this.inheritanceState, inheritanceState)
   }
 
+  getHighlightEditables (): boolean {
+    return this.highlightEditables
+  }
+
+  setHighlightEditables (highlight: boolean): void {
+    if (this.highlightEditables === highlight) {
+      return
+    }
+
+    this.highlightEditables = highlight
+    this.highlightListeners.forEach((listener) => {
+      try {
+        listener(highlight)
+      } catch (error) {
+        console.warn('Could not notify highlight-editables listener:', error)
+      }
+    })
+  }
+
+  subscribeHighlightEditables (listener: (highlight: boolean) => void): () => void {
+    this.highlightListeners.add(listener)
+
+    return () => {
+      this.highlightListeners.delete(listener)
+    }
+  }
+
   registerDynamicEditables (editables: AbstractDocumentEditableDefinition[]): void {
     for (const editable of editables) {
       this.dynamicEditables[editable.id] = editable

assets/js/src/core/app/public-api/document/document-api.ts

@@ -13,7 +13,7 @@ import { markDocumentEditablesAsModified, selectDocumentById } from '@Pimcore/mo
 import { iframeDocumentEditorRegistry } from './iframe-registry'
 import { documentSaveService, SaveTaskType } from '@Pimcore/modules/document/services'
 import { debounce, isNil } from 'lodash'
-import { type AreablockGroupedTypes, setDocumentAreablockTypes, mergeDocumentAreablockTypes, setDocumentTimeSliderVisible } from '@Pimcore/modules/document/document-editor-slice'
+import { type AreablockGroupedTypes, setDocumentAreablockTypes, mergeDocumentAreablockTypes, setDocumentTimeSliderVisible, setDocumentHighlightEditables, selectDocumentHighlightEditables } from '@Pimcore/modules/document/document-editor-slice'
 import { type PublicApiDocumentEditorIframe } from '../document-editor-iframe'
 import { type IframeRef } from '@Pimcore/components/iframe/iframe'
 
@@ -31,6 +31,8 @@ export interface DocumentApi {
   notifyAreablockTypes: (documentId: number, editableTypeId: string, areablockTypes: AreablockGroupedTypes) => void
   mergeAreablockTypes: (documentId: number, editableTypeId: string, areablockTypes: AreablockGroupedTypes) => void
   notifyTimeSliderVisible: (documentId: number, visible: boolean) => void
+  setHighlightEditables: (documentId: number, highlight: boolean) => void
+  getHighlightEditables: (documentId: number) => boolean
   isIframeReady: (documentId: number) => boolean
   onReady: (documentId: number, callback: () => void) => void
 }
@@ -120,6 +122,22 @@ class DocumentApiImpl implements DocumentApi {
     store.dispatch(setDocumentTimeSliderVisible({ documentId, visible }))
   }
 
+  setHighlightEditables (documentId: number, highlight: boolean): void {
+    store.dispatch(setDocumentHighlightEditables({ documentId, highlight }))
+
+    if (iframeDocumentEditorRegistry.isIframeRegistered(documentId)) {
+      try {
+        this.getIframeApi(documentId).documentEditable.setHighlightEditables(highlight)
+      } catch (error) {
+        console.warn(`Could not push highlight-editables state to iframe for document ${documentId}:`, error)
+      }
+    }
+  }
+
+  getHighlightEditables (documentId: number): boolean {
+    return selectDocumentHighlightEditables(store.getState(), documentId)
+  }
+
   isIframeReady (documentId: number): boolean {
     return iframeDocumentEditorRegistry.isIframeReady(documentId)
   }

assets/js/src/core/assets/icons/highlight.inline.svg

@@ -0,0 +1,25 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { createStyles } from '@Pimcore/modules/ant-design/styles/create-styles'
+
+export const useStyles = createStyles(({ token, css }) => {
+  return {
+    highlightEditablesButton: css`
+      &:hover {
+        background-color: ${token.colorFillAlter} !important;
+      }
+    `,
+
+    highlightEditablesButtonActive: css`
+      background-color: ${token.colorFillAlter} !important;
+    `
+  }
+})

assets/js/src/core/modules/document/actions/highlight-editables/highlight-editables-button.styles.tsx

@@ -0,0 +1,54 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import { IconButton } from '@Pimcore/components/icon-button/icon-button'
+import { DocumentContext } from '@Pimcore/modules/document/document-provider'
+import { useDocumentDraft } from '@Pimcore/modules/document/hooks/use-document-draft'
+import { useAppSelector } from '@Pimcore/app/store'
+import { selectDocumentHighlightEditables } from '@Pimcore/modules/document/document-editor-slice'
+import { getPimcoreStudioApi } from '@Pimcore/app/public-api/helpers/api-helper'
+import { useStyles } from './highlight-editables-button.styles'
+
+const TYPES_WITH_EDITABLES = ['page', 'snippet', 'email']
+
+export const HighlightEditablesButton = (): React.JSX.Element | null => {
+  const { t } = useTranslation()
+  const { styles } = useStyles()
+
+  const { id } = useContext(DocumentContext)
+  const { document } = useDocumentDraft(id)
+  const isHighlighted = useAppSelector((state) => selectDocumentHighlightEditables(state, id))
+
+  if (document?.type === undefined || !TYPES_WITH_EDITABLES.includes(document.type)) {
+    return null
+  }
+
+  const toggleHighlight = (): void => {
+    try {
+      const { document: documentApi } = getPimcoreStudioApi()
+      documentApi.setHighlightEditables(id, !isHighlighted)
+    } catch (error) {
+      console.warn('Could not toggle highlight-editables state:', error)
+    }
+  }
+
+  return (
+    <IconButton
+      className={ cn(styles.highlightEditablesButton, { [styles.highlightEditablesButtonActive]: isHighlighted }) }
+      icon={ { value: 'highlight', colorToken: 'colorPrimary' } }
+      onClick={ toggleHighlight }
+      tooltip={ { title: t('document.highlight-editables'), placement: 'left' } }
+      type="link"
+    />
+  )
+}

assets/js/src/core/modules/document/actions/highlight-editables/highlight-editables-button.tsx

@@ -25,11 +25,13 @@ export type AreablockGroupedTypes = Record<string, AreablockTypeEntry[]>
 export interface DocumentEditorState {
   documentAreablocks: Record<number, Record<string, AreablockGroupedTypes>>
   timeSliderVisible: Record<number, boolean>
+  highlightEditables: Record<number, boolean>
 }
 
 const initialState: DocumentEditorState = {
   documentAreablocks: {},
-  timeSliderVisible: {}
+  timeSliderVisible: {},
+  highlightEditables: {}
 }
 
 const documentEditorSlice = createSlice({
@@ -64,6 +66,9 @@ const documentEditorSlice = createSlice({
     setDocumentTimeSliderVisible: (state, action: PayloadAction<{ documentId: number, visible: boolean }>) => {
       state.timeSliderVisible[action.payload.documentId] = action.payload.visible
     },
+    setDocumentHighlightEditables: (state, action: PayloadAction<{ documentId: number, highlight: boolean }>) => {
+      state.highlightEditables[action.payload.documentId] = action.payload.highlight
+    },
     removeDocument: (state, action: PayloadAction<number>) => {
       const documentId = action.payload
       if (state.documentAreablocks[documentId] !== undefined) {
@@ -74,15 +79,20 @@ const documentEditorSlice = createSlice({
         const { [documentId]: removed, ...remainingTimeSliderVisible } = state.timeSliderVisible
         state.timeSliderVisible = remainingTimeSliderVisible
       }
+      if (state.highlightEditables[documentId] !== undefined) {
+        const { [documentId]: removed, ...remainingHighlightEditables } = state.highlightEditables
+        state.highlightEditables = remainingHighlightEditables
+      }
     },
     clearAllDocuments: (state) => {
       state.documentAreablocks = {}
       state.timeSliderVisible = {}
+      state.highlightEditables = {}
     }
   }
 })
 
-export const { setDocumentAreablockTypes, mergeDocumentAreablockTypes, setDocumentTimeSliderVisible, removeDocument, clearAllDocuments } = documentEditorSlice.actions
+export const { setDocumentAreablockTypes, mergeDocumentAreablockTypes, setDocumentTimeSliderVisible, setDocumentHighlightEditables, removeDocument, clearAllDocuments } = documentEditorSlice.actions
 
 export const selectDocumentEditorState = (state: any): DocumentEditorState => state['document-editor']
 
@@ -122,6 +132,13 @@ export const selectDocumentTimeSliderVisible = createSelector(
   }
 )
 
+export const selectDocumentHighlightEditables = createSelector(
+  [selectDocumentEditorState, (_state: any, documentId: number) => documentId],
+  (documentEditorState, documentId) => {
+    return documentEditorState.highlightEditables[documentId] ?? false
+  }
+)
+
 export const selectDocumentHasAreablocks = createSelector(
   [selectDocumentAreablockGroupedTypes],
   (areablockGroupedTypes) => {

assets/js/src/core/modules/document/document-editor-slice.ts

@@ -10,20 +10,13 @@
 
 import React from 'react'
 import { Icon } from '@Pimcore/components/icon/icon'
-import { type ISidebarEntry } from '@Pimcore/modules/element/sidebar/sidebar-manager'
+import { type ISidebarButton, type ISidebarEntry } from '@Pimcore/modules/element/sidebar/sidebar-manager'
 import { type IDocumentContext } from '@Pimcore/modules/document/document-provider'
-import {
-  ContentSettingsSidebar
-} from '../sidebar/tabs/content-settings/content-settings-sidebar'
-import {
-  AreablockTypesSidebar
-} from '../sidebar/tabs/areablock-types/areablock-types-sidebar'
-import {
-  NavigationSidebar
-} from '../sidebar/tabs/navigation/navigation-sidebar'
-import {
-  DocumentConfigurationSidebar
-} from '../sidebar/tabs/document-configuration/document-configuration-sidebar'
+import { HighlightEditablesButton } from '@Pimcore/modules/document/actions/highlight-editables/highlight-editables-button'
+import { ContentSettingsSidebar } from '../sidebar/tabs/content-settings/content-settings-sidebar'
+import { AreablockTypesSidebar } from '../sidebar/tabs/areablock-types/areablock-types-sidebar'
+import { NavigationSidebar } from '../sidebar/tabs/navigation/navigation-sidebar'
+import { DocumentConfigurationSidebar } from '../sidebar/tabs/document-configuration/document-configuration-sidebar'
 import { checkAreablockTypesVisibility } from '../sidebar/visibility/areablock-types-visibility'
 import { checkSettingsVisibility } from '../sidebar/visibility/content-settings-visibility'
 import { checkNavigationVisibility } from '../sidebar/visibility/navigation-visibility'
@@ -59,3 +52,9 @@ export const SIDEBAR_DOCUMENT_CONFIGURATION: ISidebarEntry<IDocumentContext> = {
   tooltip: 'document-configuration.sidebar-title',
   isVisible: checkSettingsVisibility
 }
+
+export const SIDEBAR_HIGHLIGHT_EDITABLES: ISidebarButton = {
+  key: 'highlight-editables',
+  icon: <Icon value="highlight" />,
+  component: <HighlightEditablesButton />
+}

assets/js/src/core/modules/document/editor/shared-tab-manager/sidebar-definitions.tsx

@@ -26,7 +26,7 @@ export const EditablesLoader = ({ editableDefinitions }: EditablesLoaderProps):
   const documentEditableRegistry = useInjection<DynamicTypeDocumentEditableRegistry>(serviceIds['DynamicTypes/DocumentEditableRegistry'])
   const apiInitialized = useRef(false)
   const [isInitialized, setIsInitialized] = useState(false)
-  const { initializeData, notifyReady, initializeInheritanceState } = useDocumentEditor()
+  const { initializeData, notifyReady, initializeInheritanceState, initializeHighlightEditables } = useDocumentEditor()
   const { id: documentId } = useContext(DocumentContext)
 
   const getInitialData = (editableDefinitions: AbstractDocumentEditableDefinition[]): Record<string, { type: string, data: any }> => {
@@ -54,10 +54,12 @@ export const EditablesLoader = ({ editableDefinitions }: EditablesLoaderProps):
     if (!apiInitialized.current) {
       initializeData(getInitialData(editableDefinitions))
       initializeInheritanceState(getInitialInheritanceState(editableDefinitions))
+      initializeHighlightEditables()
+
       apiInitialized.current = true
       setIsInitialized(true)
     }
-  }, [editableDefinitions, initializeData, initializeInheritanceState])
+  }, [editableDefinitions, initializeData, initializeInheritanceState, initializeHighlightEditables])
 
   useEffect(() => {
     if (apiInitialized.current) {

assets/js/src/core/modules/document/editor/shared-tab-manager/tabs/edit/components/editables-renderer/editables-loader.tsx

@@ -25,6 +25,7 @@ export interface DocumentEditorContextProps {
   getInheritanceState: (key: string) => boolean
   setInheritanceState: (key: string, inherited: boolean) => void
   initializeInheritanceState: (inheritanceState: Record<string, boolean>) => void
+  initializeHighlightEditables: () => void
 }
 
 export const useDocumentEditor = (): DocumentEditorContextProps => {
@@ -89,6 +90,16 @@ export const useDocumentEditor = (): DocumentEditorContextProps => {
     getDocumentEditableApi().initializeInheritanceState(inheritanceState)
   }
 
+  const initializeHighlightEditables = (): void => {
+    try {
+      const { document: documentApi } = getPimcoreStudioApi()
+
+      getDocumentEditableApi().setHighlightEditables(documentApi.getHighlightEditables(id))
+    } catch (error) {
+      console.warn('Could not initialize highlight-editables state from parent:', error)
+    }
+  }
+
   const triggerSaveAndReload = useCallback((): void => {
     try {
       const { document: documentApi } = getPimcoreStudioApi()
@@ -121,6 +132,7 @@ export const useDocumentEditor = (): DocumentEditorContextProps => {
     notifyReady,
     getInheritanceState,
     setInheritanceState,
-    initializeInheritanceState
+    initializeInheritanceState,
+    initializeHighlightEditables
   }
 }

assets/js/src/core/modules/document/editor/shared-tab-manager/tabs/edit/hooks/use-document-editor.tsx

@@ -26,7 +26,8 @@ import { Icon } from '@Pimcore/components/icon/icon'
 import {
   SIDEBAR_AREABLOCK_TYPES,
   SIDEBAR_CONTENT_SETTINGS,
-  SIDEBAR_DOCUMENT_CONFIGURATION
+  SIDEBAR_DOCUMENT_CONFIGURATION,
+  SIDEBAR_HIGHLIGHT_EDITABLES
 } from '../../shared-tab-manager/sidebar-definitions'
 import {
   EmailSettingsSidebar
@@ -58,5 +59,7 @@ moduleSystem.registerModule({
     })
     emailSidebarManager.registerEntry(SIDEBAR_CONTENT_SETTINGS)
     emailSidebarManager.registerEntry(SIDEBAR_DOCUMENT_CONFIGURATION)
+
+    emailSidebarManager.registerButton(SIDEBAR_HIGHLIGHT_EDITABLES)
   }
 })