Hi @kuhelbeher I'm still trying to achieve that too, but here's a tip that can help us to achieve it.
I'll post here if I figure out a way.
See this issue #2772 

@RJCAM thanks for tip, I tried that, but problem with this approach is that it disables script for component, not the whole template.

Once the editor and its components are loaded it's hard to think about disabling JS, think about a component with custom scripts that binds events all around the DOM (maybe even using some external plugin).
The only way it could be possibly done is to reload the entire Frame (with the current components state), once some configuration flag (eg. via `Canvas.enableScripts(false)`) is updated, and prevent their append [here](https://github.com/artf/grapesjs/blob/29abac0d77e2dda681dce10be3d7fa92b80fd5bb/src/canvas/view/CanvasView.js#L281).
PRs are welcome :)

FEAT: Disable scripts on canvas

Can you provide an example? Ideally using https://jsfiddle.net/szLp8h4n

Hello,

For future questions or technical issues, which aren't bugs, GitHub's [Discussions](https://github.com/artf/grapesjs/discussions) tab is the place to be.

Don't forget to close this issue if it is resolved or write a new detailed message in [Discussions](https://github.com/artf/grapesjs/discussions) -> [Q&A](https://github.com/artf/grapesjs/discussions/categories/q-a) category (and close this issue).

Thank you for your understanding.

How to resolve one section to another section drag-drop overlapping issue?  

Mouse hovering overlaping on text toolbar ckeditor/richtext editor

The thumbnail/image which it puts into the editor should be scaling to fit the container. I'm seeing it at original size on first-load, all subsequent block adds correctly fit whichever column they are dropped into. If you look at the export code, you can also see that the first time you drop a block in, it does not update the css. On subsequent blocks it's added

A couple of screenshots demonstrating the behaviour I'm seeing...

<img width="1021" alt="Screen Shot 2019-11-06 at 11 32 16" src="https://user-images.githubusercontent.com/19346508/68294968-394ba600-0089-11ea-941a-e441d3469c6f.png">

<img width="1003" alt="Screen Shot 2019-11-06 at 11 32 33" src="https://user-images.githubusercontent.com/19346508/68294986-3fda1d80-0089-11ea-8be3-323152923b73.png">


> i guess this is related to this one and probably this one @artf

mmm not really

Changing `modelThumbElement.setAttributes({"data-gallery":fileName});` to use `addAttributes` seems to fix it, but I'm not sure what is really happening (I'd expect the "wrong" behavior all the time, not only the first time). I'll investigate on this later

Custom component not pulling through style on first add.

Hi there! have you tried using [setStyle](https://github.com/artf/grapesjs/blob/7d1dff957d62bbbaefd75b042e4092ae6f28e3d1/src/dom_components/model/Component.js#L403) ?
cheers.

I'd expect something like this to work (update `style-default`)

```js
editor.DomComponents.addType('mj-text', {
	model: {
		defaults: {
			'style-default': {
				// your new styles...
			}
		}
	}
})
```

Be sure to load your plugin after the mjml one

Hello @artf, thanks for your reply. this is the exact same code, that i tried out. This one works if I use "style" instead of "style-default". 

[BUG / QUESTION] Deleting default styles does not work

Do you mean during the editing? Do you see it good if you deselect the component?

Yes during the editing. My idea was to implement the pseudo elements. When you select component to select state like hover, but to be :after or :before.
The problem is that I need to set content: '' in the css rule and all the styles are applied on the main element.

Ok but is it correct once you deselect the component?

[QUESTIONS] How to set style for pseudo elements (:after and :before)

Ok, but what will you do with the **output** (Angular components) of the editor? I mean, how you will use it at the end?
Anyway, I see two different approaches to this kind of situation:

1. Create a custom render for each component (the exact thing/concept I've made with MJML). This is the most accurate approach because I should see in the canvas the exact component of the framework (eg. obviously if the renderer uses the same "compiler", in your case the Angular framework). Probably not the easiest approach as you have to grasp a good knowledge about both frameworks (eg. in your case Angular and GrapesJS) but for sure the best in the long term, once the renderer is implemented new components could be integrated without any hassle

1. You can create a kind of **placeholder component**, when the result will be always an HTML of your Angular components but the view is totally up to you to build. Example:
```js
editor.DomComponents.addType('InputGroup', {
	model: {
		defaults: {
			// The tag name that will be used in the final code
			tagName: 'InputGroup',
			attributes: { customProp: 'val1' },
			// You would use traits to customize custom properties
			traits: [
				{
					type: 'select',
					name: 'customProp',
					options: [
						{ value: 'val1', name: 'Value 1' },
						{ value: 'val2', name: 'Value 2' },
					]
				}
			]
		}
	},
	view: {
		// eg. You can customize the tag in the canvas
		// By default, the view will use the same tag of the model
		tagName: 'div',
		onRender() {
			// What the user see in the canvas is totally up to you
			// it can be a simple image as a placeholder or
			// you can make it as much close to the original markup
			const attrs = this.model.getAttributes();
			this.el.innerHTML = `<div>
				My custom HTML for this component<br>
				My custom prop: ${attrs['customProp']}
			</div>`;
		}
	}
});
```
This is the easiest but as you can see you have to setup a new view for each component.

@adelliinaa let's start from a simple question because I don't understand, what kind of editor are you trying to create? A builder for Angular components?!?

I want to create a form builder similar to the one which you created with the MJML components, but using Angular CLI instead of JS. And yes, the customed components which I want to integrate within GrapesJS are built in Angular as well.

Custom Component Integration

This shows you how to find issues with performances https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

Hi @iggolob can you provide an example of a template and exact steps to reproduce the issue (talking about the fact is slower when you select a component)?

Hi @artf 
The news letter demo page can be used to reproduce the issue ( https://grapesjs.com/demo-newsletter-editor.html ).
As a template you can use the preset HTML set for the demo page. Just copy the HTML from Export template option.
Now if you import that template it should be done almost immediately. But if you select any component, doesn't matter if image, text, cell or table and try to import, then it takes a noticeable long time, like a few seconds.
Hopefully this information is sufficient, I can also try to make a video, showing the steps.

SetComponents is sometimes very slow

Seems like the issue is due to different empty "textnode"s you have in your JSON. How do you obtain that structure?

Hey @artf,

Thanks for pointing that out. The JSON came from an internal example with more components and the missing bits must've been converted to empty textnodes.

I've removed the empty textnodes in the jsfiddle, but still seem to be getting the issue with the "sqh-header" landing in the wrong spot. Any other clues?

Cheers

Please update the live demo with cleaned JSON

[Bug] Drag and drop rendering improperly

Hi @artf, thanks for the reply. 

The custom build is not necessary anymore, because the fix was inside the latest [release](https://github.com/ckeditor/ckeditor5/releases/tag/v11.1.1). I'm using the @ckeditor/ckeditor5-editor-inline build version.

 I'll check out the BountySource and give it a try. :) 

@Unsigno The code should be a new plugin that can be provided in the GrapesJS like [grapesjs-plugin-ckeditor](https://github.com/artf/grapesjs-plugin-ckeditor), just that this plugin should support ckeditor5 (grapesjs-plugin-ckeditor5).

@gabrigcl developed a great part of the mentioned plugin already, you can get the code in this [task](https://github.com/artf/grapesjs/issues/1236). 

As mentioned above the problem is that the bullet points and number points are created without a problem, but the Bold, Italic and Link option aren't. Let me know if you need any additional information. 

I wish you a great day! 


Hi @FrciSmrci I can't say it's one of my priorities but you can actually evaluate opening a bounty on https://www.bountysource.com/teams/grapesjs and see if someone else can check it out. 
BTW I'd prefer an integration with the original CKEditor 5 and not some fork

ckeditor 5 [enhancement]

@artf and @shlomoko, I will explain the step little by little. Firstly, I need to use Jquery but you can use other library or integrate inside the GrapesJS engine. In my case I wanted to do it transparent to the engine.
1) I have two hidden div element in the main index HTML outside of the iframe that grapesJS is generated in runtime:
```

<div class="device-resolution hidden">
    <div class="dr-type">Phone - Landscape</div>
    <div class="dr-measure">Affects 767px and below"</div>
</div>

<div class="iframe-handle-container hidden">
    <div class="handle right-handle">
         <div class="gutter-handle"></div>
         <div class="tab-handle"></div>
         <div class="dim-indicator"></div>
         <div class="js-mobile-list  mobile-wrapper">
              .....
        </div>

    </div>
    <div class="handle left-handle"></div>

</div>
```
 - The first div called "device-resolution" will show the device resolution compatible with this screen size.
- The second div contains:
-- The gutter
-- The left and right vertical bar that wrap the body when the gutter is pressed

The following piece of code is the stylesheet used:
```
/* RESEZING GLUTTER */
.iframe-handle-container .handle {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 14;
}
.iframe-handle-container .handle:before {
    content: "";
    position: absolute;
    top: 0;
    left: -3px;
    width: 4px;
    height: 100%;
    background: #178df7;
    display: none;
}
.iframe-handle-container .right-handle {
    left: -1px;
    width: 14px;
}
.iframe-handle-container .left-handle {
    left: -1px;
    width: 3px;
    pointer-events: all;
    cursor: col-resize;
}
.iframe-handle-container .tab-handle {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 38px;
    margin-top: -19px;
    background: #808080;
    cursor: col-resize;
    pointer-events: all;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.iframe-handle-container .tab-handle:before,
.iframe-handle-container .tab-handle:after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: #a6a6a6;
}
.iframe-handle-container .tab-handle:before {
    left: 5px;
}
.iframe-handle-container .tab-handle:after {
    left: 8px;
}
.iframe-handle-container .tab-handle:hover {
    background: #178df7;
}
.iframe-handle-container .tab-handle:hover:before,
.iframe-handle-container .tab-handle:hover:after {
    background: #48a5f9;
}
.iframe-handle-container .gutter-handle {
    position: absolute;
    top: 0;
    left: -3px;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    pointer-events: all;
}
.iframe-handle-container:hover .handle:before {
    display: block;
}
.iframe-handle-container:hover .tab-handle {
    background: #178df7;
    border-color: #178df7;
}
.iframe-handle-container:hover .tab-handle:before,
.iframe-handle-container:hover .tab-handle:after {
    background: #48a5f9;
}

.dim-indicator {
    position: absolute;
    top: 10%;
    height: 24px;
    margin-left: 22px;
    pointer-events: all;
    font-size: 14px;
    display: none;
    padding: 2px 9px;
    border-radius: 4px !important;
    color: #ffffff;
    /* font-weight: bold; */
    width: 156px;
    background-color: rgb(0, 0, 0);
}

.mobile-wrapper{
    position: absolute;
    top: 15%;
    margin-left: -30px;
    pointer-events: all;
    color: #ffffff;
    width: 340px;
    padding: 14px;
}

.mobile-list li{
    background: #808080;
    padding: 3px;
    border-radius: 4px !important;
    margin-bottom: 5px;
    list-style-type: none;
    padding-left: 11px;
}
```
2) When the user clicks on a device screen icon I'm showing the handler to resize the canvas.
--- To do that I created a method called "initDeviceEventHandle" that is in charge of initialising the gutter handler and another method called "showDeviceResolution" that create a clone copy of the two DIV that we explained above.
```
 editor.Commands.add('set-device-tablet', {
                run: function(editor, sender)
                {
                 .....
                },
                stop: function stop(editor, sender) {
                  
                    var device = deviceManager.get('Tablet High Resolution');               
                    showDeviceResolution("tablet_portrait", device);
                    initDeviceEventHandle(device);

                }
            });

/**
     * This function will receive a screen type and it will prompt the description on the left side of the canvas.
     *
     * @param type
     * @param device
     */
    var showDeviceResolution = function (type, device){
        var name, description;
        var width = device.attributes.widthMedia;

        // To reduce a little bit the width so we can move the handle until this size
        var reduceWidth = width - maxReduceScreenPreviewSize;
        $(".gjs-frame").width(reduceWidth);

        switch (type) {
            case "mobile_portrait":
                name = "Phone - Portrait";
                description = "Affects - " + width  + " and below";

                break;
            case "mobile_landscape":
                name = "Phone - Landscape";
                description = "Affects - " + width +" and below";

                break;
            case "tablet_portrait":
                name = "Tablet - Portrait";
                description = "Affects - " + width +" and below";


        }


        const deviceResolution = $(document).find(".gjs-cv-canvas").find(".device-resolution");

        if (deviceResolution.length > 0){
            deviceResolution.addClass("hidden");
            deviceResolution.find(".dr-type").html(name);
            deviceResolution.find(".dr-measure").html(description);



        } else {

            var copyDeviceResolution =  $(document).find(".device-resolution").clone(true,true);
            copyDeviceResolution.find(".dr-type").html(name);
            copyDeviceResolution.find(".dr-measure").html(description);
            $(document).find(".gjs-cv-canvas").prepend(copyDeviceResolution);


        }

        const glutterResize = $(document).find(".gjs-cv-canvas").find(".iframe-handle-container");

        if (glutterResize.length > 0){
            glutterResize.addClass("hidden");


        } else {
           // If the div is not created yet inside the iframe then we include it.
            var copyGlutterResize =  $(document).find(".iframe-handle-container").clone(true,true);
            $(".gjs-frame").before(copyGlutterResize);


        }

        // We force to refresh the screen because then we will update all dimensions
        setTimeout(function () {
            $(window).trigger('resize');
        }, 600);

    };


 /**
     * This function initializes device glutter handle
     *
     */
    var initDeviceEventHandle = function (device) {

        try {
              
                var maxDeviceSize =  parseInt(device.attributes.widthMedia,10);

                // To reduce a little bit the width so we can move the handle until this size
                var reduceWidth = maxDeviceSize - maxReduceScreenPreviewSize;
                $(".gjs-frame").width(reduceWidth);

                var widthIframe = 0; // Current iframe Width
                var maxLeftPos = 0;
                var finalwidth   = 0;

                $(".right-handle").draggable({
                    axis: "x",
                    start: function(event, ui) {
                        widthIframe = $(".gjs-frame").width();

                    },
                    drag: function(event, ui) {
                      
                        try {

                            if ( $(".gjs-cv-canvas").find(".handle-mask").length == 0 ){
                               // We need to create a mask to avoid in the moment that we are dragging to move the pointer over the iframe and losing then the control of the resizing.
                                $(".gjs-cv-canvas").append('<div class="handle-mask" style="position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0;"></div>');
                            }

                            // We need to change the iframe width dynamically
                            const total = ui.position.left - ui.originalPosition.left;
                            var width = widthIframe + 2*total;
                            
                            $('.js-mobile-list').find(".mobile-item").addClass("hidden");
 
                            if(width > maxDeviceSize || width < minReduceScreenPreviewSize){
                                ui.position.left = maxLeftPos;

                            } else {
                                // Set the iframe width
                                maxLeftPos = ui.position.left;
                                $(".gjs-frame").width(width);
                                finalwidth = width;

                                // Set the position left of the left handle
                                var left =  $(".gjs-frame")[0].offsetLeft;
                                $(".left-handle").css("left", left);
                                
                                var leftDesc = left - 162; // 162 = the right panel width
                                $(".device-resolution").css("left", leftDesc);
                                $('.dim-indicator').html('Screen size  ' + width + 'px').fadeIn('slow');

                            }
                           // After dragging we need to refresh the editor to re-calculate the highlight border in the element selected.
                            editor.refresh();

                        } catch (err) {
                            console.error(err);
                        }
                    },
                    stop: function(event, ui) {
                      
                        try {
                            $(".handle-mask").remove();
                            
                        } catch (err) {
                            console.error(err);
                        }
                    }

                });



        } catch (err) {
            console.error(err);
        }
    };
```
 3) This point is important to do it because when we are resizing the screen then we need also to control as well the gutter.
So in the editor "load" method, I'm including a new function to check if the user is resizing the canvas or the screen size. This is called "getWindowDims".

 ```
editor.on('load', function() {
 // Control that the screen size is not too small
            getWindowDims();
}

/**
     * Function to determine Viewport Size
     */
    var getWindowDims = function() {
        var doc = document, w = window;
        var docEl = (doc.compatMode && doc.compatMode === 'CSS1Compat')?
            doc.documentElement: doc.body;

        var width = docEl.clientWidth;
        var height = docEl.clientHeight;

        // mobile zoomed in?
        if ( w.innerWidth && width > w.innerWidth ) {
            width = w.innerWidth;
            height = w.innerHeight;
        }

        // IMPORTANT!!!!
        // Glutter Handle information
        var glutterHandleObj = $(document).find(".gjs-cv-canvas").find(".iframe-handle-container");
        if (glutterHandleObj.length > 0){

            var leftGlutterHandleBar = glutterHandleObj.find(".left-handle");
            var rightGlutterHandleBar = glutterHandleObj.find(".right-handle");

            var leftOffset = $('.gjs-frame')[0].offsetLeft;
            var rightOffset =  $('.gjs-frame')[0].offsetLeft + $('.gjs-frame').width();

            leftGlutterHandleBar.css("cssText", "left: " + leftOffset  + "px !important");
            rightGlutterHandleBar.css("cssText", "left: " + rightOffset  + "px !important");
            glutterHandleObj.removeClass("hidden");

        }

        return {width: width, height: height};
    };
```


I hope this will be useful. Don't hesite to ask me any doubts.
Demo link: http://recordit.co/RTEaUphDZ6

No @shlomoko, canvas is not resizable but I'd be glad to see a PR for that (possibly with the same logic used in panels)

Hi @artf, I've just implemented a resizing canvas bar but I don't know if exist a way to refresh the position of the highlight borders. Take a look in the video please: http://recordit.co/jKlppYg2dD
gjs-badge
gjs-toolbar
Best regards.

Inactive issues in GrapesJS