Ability to check if an element was edited

[ronaldohoch]

Hello artf and all contributors

I have a task that we call "Nice to have" :P
The task:
Identify that an element on the canvas has not been edited or styled.

For example:
Opens a new document.
Plays a plain text with the example text, usually a lorem ipsum.
At some point, I want to warn the user that he hasn't edited the current text.

I thought about editing all the element blocks to receive an attribute, eg data-has-edited and checking that attribute programmatically, but it seemed soooo laborious.

Is there a "Grapesjs way" to achieve it?

[Vac1911]

Code

Hey! I was working on the same thing and solved it by updating the Text component type. (as mentioned in docs)

import grapesjs from '../../../lib/grapesjs'

export default (editor: grapesjs.Editor) => {
    const Component = editor.DomComponents.getType('text')
    return {
        extend: 'text',
        model: {
            ...Component.model.prototype,
            defaults: {
                ...Component.model.prototype.defaults,
                isPlaceholder: false,
            },
            init() {
                if (this.get('isPlaceholder')) {
                    this._placeholder = this.getInnerHTML()
                    this._updateListener = this.onUpdate.bind(this)
                    this.em.on('component:update', this._updateListener)
                }
            },
            onUpdate(model: grapesjs.Component) {
                if (this.contains(model) || this.getId() === model.getId()) {
                    if (this._placeholder !== this.getInnerHTML()) {
                        this.em.off('component:update', this._updateListener)
                        this.set('isPlaceholder', false)
                    }
                }
            },
        },
        view: Component.view,
        isComponent: Component.isComponent,
    }
}

Explanation

I considered making a new component type but realized it would be messy. A TextPlaceholder component would need to change its own type when changed, otherwise half of your text components would be running around as different types. In addition, extending the Text component type would not work either because I already had types which extended text, such as a Heading type, which means I would also need to make a HeadingPlaceholder type.

I also thought about making some sort of trait to handle this, so that way I could add it to component I wanted and easily remove it (example in docs). However I don't believe there is a way to add a trait in a component definition, which means the traits would have to be added at runtime (after the block is dropped onto the canvas).

To ensure compatibility with existing blocks and data, nothing is set as a placeholder by default, and all that needs to be done for text to return to its default behavior is to set the isPlaceholder property to false. Also keeping it as a boolean means the placeholder value does not need to be declared, and can be assumed to be the current value when initialized. I also tried allowing the component definitions to be passed through a property named 'placeholder' and copied into the the components property, however that would have required manually writing something to parse the definitions because the init lifecycle hook is called after grapesjs has already parsed the components.

The method getInnerHTML was deliberately chose over alternatives as the best way to detect a change.

• Using the event change:content only worked for plain text, otherwise the editor would convert the content into components and not use this property.
• The event change:components does not initially if fire if the text was declared as an html string, nor will it actually fire from a change on a child component as the local events don't bubble like DOM events.
• We cannot assume the generic change event is actually a change that caused by an edit because it fires on things like selecting the component.

There is still the issue of events not bubbling, meaning we don't know when we should be checking if the component was edited. We could do it on any change detected through the global event however I am unsure of the potential performance impact as every text component on the page would be checking to see if it was edited, every time the user changes their selection.

Also the component:update event is preferred here as we don't care about events like collapsing a section in the style manager.

To work around that potential issue a global event listener is only created for text which is a placeholder, and before the edit check actually takes place, it ensures that the change actually happened to the placeholder or inside the placeholder. After it is detected that the component is no longer a placeholder, the event listener is removed to prevent unnecessary processing.

Usage

I was unsure of when the user should be warned that they haven't changed placeholder text.

I will probably do when the user attempts to save (as I am not using auto saving for remote storage). Some the reason I used the approach of storing the isPlaceholder flag on the model is so whenever the warning should happen: we don't need to do the processing to determine if a component has been edited, all at the same time.

To check every component we can do:

editor.getWrapper().findType('text').every(component => component.get('isPlaceholder') == false)

[ronaldohoch]

Hello @Vac1911 Thank you for that! You have made the most explained answer in this repo 😍
It worked to my purpose! I have had made some changes to get it work here, check:

I'm using javascript not ts Yet, legacy code yet :/

export default (editor, opts = {}) => {
  const domc = editor.DomComponents;
  const Component = editor.DomComponents.getType('text')

  domc.addType('text', {
    extend: 'text',
    model: {
        ...Component.model.prototype,
        defaults: {
            ...Component.model.prototype.defaults,
            isPlaceholder: true, // I have changed here to true
        },
        init() {
            if (this.get('isPlaceholder')) {
                this._placeholder = this.getInnerHTML()
                this._updateListener = this.onUpdate.bind(this)
                this.em.on('component:update', this._updateListener);
            }
        },
        onUpdate(model) {
            // Changed here to test if the model have the component instead component has model
            if (model.contains(this) || this.getId() === model.getId()) {
                if (this._placeholder !== this.getInnerHTML()) {
                    this.em.off('component:update', this._updateListener)
                    this.set('isPlaceholder', false)
                }
            }
        },
    },
    view: Component.view,
    isComponent: Component.isComponent
  });
};