Custom version of 'Switch Visibility' command to change the colour of the dashed outline for specific components

[benryanwilliams]

I've copied the default Switch Visibility command into my own custom command and got it all working as before. However, now I want the dashed outline for components of type 'conditional-text' to be green, but am unsure of how to achieve this.

My thinking is that I can just add dashed outlines to all components as before, but at the same time get all of the 'conditional-text' components and add green dashed outlines separately using the same methodology, but I'm struggling to access the frames of the 'conditional-text' components.

This is what I've done so far:

import { bindAll } from "underscore"

export default (editor) => {
  // Add command
  return {
    init() {
      bindAll(this, "_onFramesChange")
    },

    run() {
      this.toggleVis(editor)
    },

    stop() {
      this.toggleVis(editor, 0)
    },

    toggleVis(ed, active = 1) {
      if (!ed.Commands.isActive("preview")) {
        const cv = ed.Canvas
        const mth = active ? "on" : "off"
        console.log(cv.getFrames())
        cv.getFrames().forEach((frame) => this._upFrame(frame, active))
        cv.getModel()[mth]("change:frames", this._onFramesChange)
        this._highlightConditionalComponents(ed)
      }
    },

    _upFrame(frame, active) {
      const method = active ? "add" : "remove"
      frame.view.getBody().classList[method](`${this.ppfx}dashed`)
    },

    _onFramesChange(m, frames) {
      frames.forEach((frame) => this._upFrame(frame, 1))
    },

    _highlightConditionalComponents(ed) {
      this._getAllComponents(ed.DomComponents.getWrapper()).filter((component) => {
        return component.isInstanceOf("conditional-text")
      })
      .forEach((conditionalComponent) => {
        // Here I want to get the frame for the component and apply the same logic as within '_upFrame'
        console.log(conditionalComponent)
      })
    },

    _getAllComponents(model, result = []) {
      result.push(model)
      model.components().each((mod) => this._getAllComponents(mod, result))
      return result
    },
  }
}

1. Is there a way to get the frame from a component so that it can be input into a separate _greenUpFrame function?

2. How would I edit the frame.view.getBody().classList[method](`${this.ppfx}dashed`) part of the function so that the dashes are green?

N.B. the console.log(conditionalComponent) line returns the 4 conditional components added to the canvas as expected.

Any help would be massively appreciated, thanks in advance!

[artf]

Hi @benryanwilliams I'm wondering if for your case using canvasCss might be enough

grapesjs.init({
  // ...
  canvasCss: `
   .gjs-dashed *[data-gjs-highlightable][data-gjs-type="conditional-text"] {
     outline-color: green;
   }`,
})

[benryanwilliams]

Hi @artf, in addition to this, I've noticed that if you use the 'wrap for style' button within the text editor, an outline is not displayed for the new component. Sometimes the user of the template builder will need to be able to do this and then convert it to a 'conditional-text' component, which I've managed to implement. However, since outlines of these are not shown by the sw-visibility command, they do not appear highlighted green (or at all). Please see below images for an example:

1. Select 'et dolore' and click 'wrap for style':

2. The outline of 'et dolore' is not shown, but instead only the previous component's outline is:

Is this the intended functionality of the 'wrap for style' button? If so, is there any way to show the outlines of the 'wrapped for style' components also?

[artf]

Yeah, the outline is not applied inside the text component for better readability but I guess in your case you might only need to update the CSS to force the outline even if the highlightable is not applied

grapesjs.init({
  // ...
  canvasCss: `
   .gjs-dashed [data-gjs-type="conditional-text"] {
     outline-color: green;
   }`,
})

[benryanwilliams]

@artf - That sounds like it would be ideal but for some reason it doesn't make a difference. See below images for reference (it looks like it should work based on the styling of the conditional text component as seen in the second screenshot). I've tried upping the z-index of the component and that also does nothing.

1. I have selected the conditional text component (which was created inside the outer text component using the 'wrap for style' button, then converting to a conditional text component):

2. The whole screen after inspecting the conditional text component and deselecting it (as you can see the style of the component seems to be correct but it doesn't appear with a green outline):

Any ideas? Many thanks for your help with this!

[artf]

oh yeah, you have to include also outline-style: dashed; as it exists only on elements with data-gjs-highlightable

[benryanwilliams]

Amazing, thanks so much again, all working perfectly!