[Bug] Draggable property added in the final HTML text components
Question
This bug is also on the online demo : https://grapesjs.com/demo.html
- Add a Text Block to the page, start typing and hiting enter to make several break lines.
- Unselect the block.
- Double click on the block to start editing again.
Now if you click on the "view code" button, you will see that the HTML nodes inside the Text Block have some draggable="true attributes.
This always occure at step three. The first time you edit the text and add break lines, everything is fine, as long as you do not want to edit the block again later.
The problem is, in the final HTML displayed on a website, these attributes are still there. You can not select anything because the navigator interpreting the draggable attributes.
And yes I am saving in database both of the html and components separately
It seems like a bug to me, or I misunderstood something else

Answers (3)
Ok I'll try to check this out
@alexiswbr using the below snippet, the div's will become br's as the expected behaviour:
var iframeBody = editor.Canvas.getBody();
$(iframeBody).on("keydown", "[contenteditable]", e => {
// trap the return key being pressed
if (e.keyCode === 13) {
e.preventDefault();
// insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)
e.target.ownerDocument.execCommand("insertHTML", false, "<br><br>");
// prevent the default behaviour of return key pressed
return false;
}
});
I use such way to prevent transformation to component and keep original html.
Just override component that you need, for example text or create new.
Maybe it's not good solution, but it works :)
export default (editor, type) => {
const comps = editor.DomComponents;
const typeToExtend = comps.getType(type);
const modelToExtend = typeToExtend.model;
comps.addType(type, {
model: modelToExtend.extend({
init() {
if (modelToExtend.prototype.init) {
modelToExtend.prototype.init.apply(this, arguments);
}
const models = this.components().models;
if (models.length) {
const elem = models.reduce((content, component) => {
content.append(component.get('rawContent') || component.get('content'));
return content;
}, document.createElement('div'));
for (let i = models.length; i !== 0; i--) {
models[i - 1].remove();
}
this.set({content: elem.innerHTML});
}
}
}, {
isComponent(el) {
if (el && el.parentElement && el.parentElement.dataset && el.parentElement.dataset.gjsType === type) {
return {
type: type,
content: el,
rawContent: el,
tagName: 'raw_html'
};
}
return false;
}
}),
view: typeToExtend.view
});
}
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3579
BUG: RTE misplaced when opened right after dropping `activeOnRender` component
Version: 0.17.4 Are you able to reproduce the bug from the demo?[x] Yes[ ] No Steps to reproduce:Go to the demoDrop a "Text" block inside t...
Issue #2294
[Bug] Text components are removed with an error if they are dragged while you are editing their contents
This can replicated in the demo: https://grapesjs.com/demo.htmlDrag in a text nodeDouble click to activate the RTEDrag the text component i...
Issue #1394
[Bug]: Pasting multiple paragraphs aren't editable until Grapes reloads
https://grapesjs.com/demo.htmlIn the double click into the text "All text blocks could..." to trigger editing mode.Paste this text in: The...
Issue #1396
[Bug] Background image layers
Bug: when your pre-defined block or saved templates have two or more background layers, if you add a new layer, a lot of new empty layers a...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.