[BUG|/QUESTION] Strange characters (Â) within CSS/HTML preview; Elements are not deleted completely

[renepardon]

BUG

• Are you using the latest release (older versions are NOT supported)?

0.14.50

• Are you facing the bug with your local copy of GrapesJS or with the current demo?

It's a local copy. The used verions (including plugins) are:

"dependencies": {
    "ckeditor": "^4.11.1",
    "grapesjs": "^0.14.50",
    "grapesjs-blocks-basic": "^0.1.8",
    "grapesjs-blocks-bootstrap4": "^0.1.3",
    "grapesjs-plugin-ckeditor": "0.0.9",
    "grapesjs-preset-webpage": "^0.1.10"
}

I'm working on MacOS and tested with latest Chrome: 70.0.3538.110 (Offizieller Build) (64-Bit)

• What is the expected behavior?

  1. When deleting an element I expect all the related HTML being removed from the source preview as well
  2. There shouldn't be those strange (invisible) characters. Â This looks ugly and is not helpful
  3. The default viewport should be adjusted to "mobile" (mobile first) But the corresponding setting is not recognized

• What happens instead? All elements were deleted but there is still an empty div-container in the viewport. There are strange charaters within CSS (and also the HTML preview). The default viewport width is 100% instead of the mobile one.

• If you're able to reproduce the bug indicate all the necessary steps Have a look to my full implementation here:

https://gist.github.com/renepardon/91db8b10a1dea1f8d0d855af945c89a8

I've installed all the packages with npm and copied the required files to the /vendor/grapejs folder

[artf]

All elements were deleted but there is still an empty div-container in the viewport

You don't explain steps to reproduce this issue, but please check in Layers first. I'm pretty much sure you don't delete some kind of wrapper, which has no style so you just can't see it on the canvas

There are strange charaters within CSS (and also the HTML preview)

I can't reproduce it, also in the demo it's all ok. Try to update your files

The default viewport width is 100% instead of the mobile one

For the mobile-first approach check this https://github.com/artf/grapesjs/issues/900#issuecomment-369560034

[renepardon]

Hi @artf even with the provided link https://gist.github.com/renepardon/91db8b10a1dea1f8d0d855af945c89a8 you were not able to reproduce it?

[artf]

I can't reproduce it due to missing resources (and as I said, it's probably a problem with your files...)

    <link href="/vendor/grapejs/css/grapes.min.css" rel="stylesheet"/>
    <link href="/vendor/grapejs/grapesjs-preset-webpage.min.css" rel="stylesheet"/>

    <script src="/vendor/ckeditor/ckeditor.js"></script>

    <script src="/vendor/grapejs/grapes.min.js"></script>
    <script src="/vendor/grapejs/grapesjs-preset-webpage.min.js"></script>
    <script src="/vendor/grapejs/grapesjs-plugin-ckeditor.min.js"></script>
    <script src="/vendor/grapejs/grapesjs-blocks-bootstrap4.min.js"></script>

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.