[QA] How to show selected component's css into StyleManager

[gwtt]

I built an app following the demo page, but when I click a component its styles don’t appear in the Style Manager as expected. Do I need to configure something, or am I doing something wrong?
Could someone tell me what steps I should take to troubleshoot this problem?

I have to use "component.setStyle()" to achieve my desired effect

[mosh-tudor]

@gwtt

as expected

It's hard to understand what the problem is without seeing the code/demo or at least screenshots of what you have.

[gwtt]

Sorry, since I’m not a professional front-end engineer, I’m not sure which key parts of the code I should extract and present. The only thing I can do is show the GrapesJS function and the selected feature—the code is as follows:

Now I use 'component.setStyle(finalStyles)' to init component, but that is not high efficiently.

      const editorInstance = grapesjs.init({
        container: editorRef.value,
        height: '100%',
        width: '100%',
        fromElement: false,
        showOffsets: false,
        noticeOnUnload: false,
        i18n: {
          locale: 'en',
          localeFallback: 'en',
          messages: {
            en,
          },
        },
        storageManager: {
          type: 'memory',
        },
        components: content.body || '',
        style: content.inlineStyles || '',
        baseCss: `
          body: {
            background-color: inherit;
          }
          html, body {
            overflow-anchor: none !important;
            scroll-behavior: auto !important;
            overscroll-behavior: contain !important;
            scrollbar-gutter: stable both-edges;
          }
          img.gjs-plh-image {
            outline: none;
          }
        `,
        canvas: {
          styles: content.externalStyles.map(s => s.href).filter(Boolean),
        },
        panels: {
          defaults: [],
        },
        layerManager: {
          appendTo: layerRef.value,
        },
        colorPicker: {
          appendTo: stylesPanelRef.value,
        },
        styleManager: {
          appendTo: stylesPanelRef.value,
          sectors: mySectors,
          highlightChanged: true,
          highlightComputed: true,
          showComputed: true,
          clearProperties: true,
          avoidComputed: ['width', 'height'],
        },
        traitManager: {
          appendTo: propertiesPanelRef.value,
        },
        blockManager: {
          appendTo: componentRef.value,
        },
        deviceManager: {
          devices: [],
        },
        plugins: [
          customBasicPlugin,
          componentTypePlugin,
          myImagePlugin,
          myVideoPlugin,
          CustomBgType,
          pluginForms,
          styleBgPlugin,
          parserPostCSS,
        ],
        pluginsOpts: {
          [styleBgPlugin]: {
            propExtender: (prop: any) => {
              if (prop.property === 'background-image-color') {
                return { ...prop, default: '#ffffff' }
              }
              if (prop.property === 'background-image') {
                prop.type = 'custom-bg'
              }
              return prop
            },
          },
        },
      })

// Bind the event listener
editorInstance.on('component:selected', (component) => {
const um = editorInstance.UndoManager as any
um.stop()

// Clear the previous style-update handler
if (styleUpdateHandler.value) {
editorInstance.off('component:styleUpdate', styleUpdateHandler.value)
}

// Create a new style-update handler
styleUpdateHandler.value = (updatedComponent, property) => {
if (property && property.style && typeof property.style === 'object') {
const keys = Object.keys(property.style)
const selected = editorInstance.getSelected()
  if (keys.length === 1 && selected) {
    // Make sure the UndoManager has started
    um.start()

    // Log the operation
    customPageClickBiLogger.log({
      pageName: 'DesignPageEditor',
      customInfo: {
        projectId: +route.value?.query?.project_id,
        pageId,
        property: keys[0]!,
      },
      element: 'editor change',
    })
  }
}
}

// Bind the style-update event
editorInstance.on('component:styleUpdate', styleUpdateHandler.value)

// Perform the selection action via the skip method
um.skip(() => {
handleComponentSelected(component)
initComponentStyle(editorInstance, component, 'spark-custom')
})

// Start monitoring with a slight delay to ensure the selection is complete
setTimeout(() => {
um.start()
}, 1)
})

export function initComponentStyle(editor: Editor, component: Component, customClassPrefix = 'gjs-custom') {
  if (!editor || !component) {
    return
  }
  const componentId = component.getId()
  if (initStyleProcessing.has(componentId)) {
    return
  }
  initStyleProcessing.add(componentId)
  requestAnimationFrame(() => {
    try {
      const result = initCombinedSelector(editor, component, customClassPrefix)
      if (!result) {
        return
      }
      const { el, id } = result
      if (!el) {
        return
      }
      const finalStyles: Record<string, string> = {}
      const defaultProps = new Set<string>()
      const obtainedProps = new Map<string, string>()
      const sm = editor.StyleManager
      const sectors = sm.getSectors({ array: true }) as Sector[]
      const flexSector = sectors.find((s: any) => s.getId() === 'flex')
      const properties = flexSector?.properties?.toArray() || []
      const remainingProps = getRelevantProps(obtainedProps)
      if (remainingProps.length > 0) {
        const computedStyle = getComputedStyle(el)
        remainingProps.forEach((prop) => {
          if (!obtainedProps.has(prop) && styleProps.includes(prop)) {
            let val = computedStyle.getPropertyValue(prop)
            if (prop === 'background-position') {
              val = convertBackgroundPositionToKeywords(val)
            }
            for (const property of properties) {
              if (property.id === prop) {
                const list = property.attributes['list'] || []
                const value = list.find((item: any) => item.value === val)
                val = value ? val : ''
                break
              }
            }
            if (prop === 'background-position') {
              val = convertBackgroundPositionToKeywords(val)
            }
            if (prop === 'box-shadow') {
              val = normalizeBoxShadowValue(val)
            }
            if (val && val !== 'rgba(0, 0, 0, 0)' && val !== 'transparent' && val !== 'none' && val !== '0px') {
              finalStyles[prop] = val
              obtainedProps.set(prop, 'computed')
              defaultProps.add(prop)
            }
          }
        })
      }
      defaultStylesMap.set(id, defaultProps)
      component.off('change:style')
      if (Object.keys(finalStyles).length > 0) {
        component.setStyle(finalStyles)
      }
    } finally {
      initStyleProcessing.delete(componentId)
    }
  })
}