andcmatias / grapesjs-code-editor Goto Github PK
View Code? Open in Web Editor NEWGrapesJS plugin Code Editor using Monaco Editor
GrapesJS plugin Code Editor using Monaco Editor
I tried this plugin as a replacement for grapesjs-component-code-editor.
Unfortunately I bumped into a bug:
When I click on the apply button in the HTML section every CSS content that was previously in the CSS section gets dismissed.
It can be tried in the Demo: https://codepen.io/Anderson-Caldeireiro-Matias/pen/jOXrvgJ
Add a Text component which naturally has a 10px padding and try to edit the HTML content with the side panel. After applying, the padding gets dismissed.
Hey @andcmatias
thanks for accepting my PRs
However when I updated the package I noticed that there is no new built version in the dist folder yet.
I tried to import the index.js from the src folder instead. But then I got an error in styles.scss
It seems to me that styles.scss is not a real scss file. I have sass interpreter in my project and it seems to me that you don't. Therefore I guess webpack doesn't try to interpret it as a real scss file.
If I remove the 'export default' line from the beginning and ticks, then another error occurs that it misses the $prefix variable.
If I rename it locally to styles.js it works as expected.
I'm not quite into scss but grapesjs-component-code-editor does this differently (it also has sass as dependency)
If you do not wish to bother to research and apply the scss handling, would you care to either rename the file to styles.js (and import it by that name in the index.js)
Or build and upload a new dist version?
Thx
With grapesjs-component-code-editor when I select a component that has a child component, the CSS editor field lists the CSS definiton of both components
this plugin however only lists the CSS of the currently selected component. This may be an intentional design choice.
But unfortunately when the parent component is selected and HTML content gets applied, the CSS definitions of the child element get dismissed.
Again I can see that this plugin has similarities with grapesjs-component-code-editor which updates the CSS editor field with this code part:
this.cssCodeEditor.setContent(this.editor.CodeManager.getCode(this.component, 'css', {
cssc: this.editor.Css
}));
You use the same solution only for the wrapper (root) component. I don't know for that reason, but maybe instead of using the
if (component.attributes.type === 'wrapper')
the
if (component.components().length)
as condition that handles CSS of nested components would be more approprate.
Unfortunately this is not enough as the CSS of the child component appears in the css editor field, but still doesn't get saved this way.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.