{"action":"created","issue":{"url":"https://api.github.com/repos/artf/grapesjs/issues/460","repository_url":"https://api.github.com/repos/artf/grapesjs","labels_url":"https://api.github.com/repos/artf/grapesjs/issues/460/labels{/name}","comments_url":"https://api.github.com/repos/artf/grapesjs/issues/460/comments","events_url":"https://api.github.com/repos/artf/grapesjs/issues/460/events","html_url":"https://github.com/artf/grapesjs/issues/460","id":269317411,"number":460,"title":"When the component's view modifies the HTML, text components are no longer editable","user":{"login":"roytang","id":4228,"avatar_url":"https://avatars0.githubusercontent.com/u/4228?v=4","gravatar_id":"","url":"https://api.github.com/users/roytang","html_url":"https://github.com/roytang","followers_url":"https://api.github.com/users/roytang/followers","following_url":"https://api.github.com/users/roytang/following{/other_user}","gists_url":"https://api.github.com/users/roytang/gists{/gist_id}","starred_url":"https://api.github.com/users/roytang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/roytang/subscriptions","organizations_url":"https://api.github.com/users/roytang/orgs","repos_url":"https://api.github.com/users/roytang/repos","events_url":"https://api.github.com/users/roytang/events{/privacy}","received_events_url":"https://api.github.com/users/roytang/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-10-28T13:29:38Z","updated_at":"2017-11-04T13:43:16Z","closed_at":null,"author_association":"NONE","body":"I'm trying to build a custom component that contains some lorem ipsum text in the content, for editing once it's on the canvas. But I also want to modify the HTML in the view (to add some content that I want shown in the editor but not in the saved HTML). I tried something like this:\r\n\r\n```\r\n  comps.addType('section-test', {\r\n    // Define the Model\r\n    model: defaultModel.extend({\r\n      // Extend default properties\r\n      defaults: Object.assign({}, defaultModel.prototype.defaults, {\r\n        draggable: 'body, body div'\r\n      }),\r\n    },\r\n    {\r\n      isComponent: function(el) {\r\n        if(el.tagName == \"SECTION\"){\r\n          return {type: 'section-test'};\r\n        }\r\n      },\r\n    }),\r\n\r\n    // Define the View\r\n    view: defaultType.view.extend({\r\n      // The render() should return 'this'\r\n      render: function () {\r\n        // Extend the original render method\r\n        defaultType.view.prototype.render.apply(this, arguments);\r\n        //this.el.placeholder = 'Text here'; // <- Doesn't affect the final HTML code\r\n        var html = this.el.innerHTML;\r\n        html = \"<h1>ABC</h1>\" + html;\r\n        this.el.innerHTML = html;\r\n\r\n        return this;\r\n      },\r\n    })\r\n  });\r\n  blockManager.add('section-typography', {\r\n    label: 'Text section',\r\n    category: 'Sections',\r\n    content: `<section class=\"bdg-sect\">\r\n      <h1 class=\"heading\">Insert title here</h1>\r\n      <p class=\"paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>\r\n      </section>`,\r\n    attributes: {class:'gjs-fonts gjs-f-h1p'}\r\n  });    \r\n```\r\n\r\nThe issue is if I modify the render() function as above, the text components in the Text section (the h1 and the p) can no longer have their text edited by double-clicking on the text. \r\n\r\nIs there a better way to do what I want to do?\r\n\r\nThanks!"},"comment":{"url":"https://api.github.com/repos/artf/grapesjs/issues/comments/341898004","html_url":"https://github.com/artf/grapesjs/issues/460#issuecomment-341898004","issue_url":"https://api.github.com/repos/artf/grapesjs/issues/460","id":341898004,"user":{"login":"roytang","id":4228,"avatar_url":"https://avatars0.githubusercontent.com/u/4228?v=4","gravatar_id":"","url":"https://api.github.com/users/roytang","html_url":"https://github.com/roytang","followers_url":"https://api.github.com/users/roytang/followers","following_url":"https://api.github.com/users/roytang/following{/other_user}","gists_url":"https://api.github.com/users/roytang/gists{/gist_id}","starred_url":"https://api.github.com/users/roytang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/roytang/subscriptions","organizations_url":"https://api.github.com/users/roytang/orgs","repos_url":"https://api.github.com/users/roytang/repos","events_url":"https://api.github.com/users/roytang/events{/privacy}","received_events_url":"https://api.github.com/users/roytang/received_events","type":"User","site_admin":false},"created_at":"2017-11-04T13:43:16Z","updated_at":"2017-11-04T13:43:16Z","author_association":"NONE","body":"I tried the above, as follows:\r\n\r\n  var textType = comps.getType('text');\r\n  comps.addType('section-test', {\r\n    // Define the Model\r\n    model: defaultModel.extend({\r\n      // Extend default properties\r\n      defaults: Object.assign({}, defaultModel.prototype.defaults, {\r\n        draggable: 'body, body div'\r\n      }),\r\n    },\r\n    {\r\n      isComponent: function(el) {\r\n        if(el.tagName == \"SECTION\"){\r\n          return {type: 'section-test'};\r\n        }\r\n      },\r\n    }),\r\n\r\n    // Define the View\r\n    view: textType.view.extend({\r\n      // The render() should return 'this'\r\n      render: function () {\r\n        // Extend the original render method\r\n        defaultType.view.prototype.render.apply(this, arguments);\r\n        //this.el.placeholder = 'Text here'; // <- Doesn't affect the final HTML code\r\n        var html = this.el.innerHTML;\r\n        html = \"<h1>ABC</h1>\" + html;\r\n        this.el.innerHTML = html;\r\n\r\n        return this;\r\n      },\r\n    })\r\n  });\r\n  blockManager.add('section-typography', {\r\n    label: 'Text section',\r\n    category: 'Sections',\r\n    content: `<section class=\"bdg-sect\">\r\n      <h1 class=\"heading\">Click here to edit title</h1>\r\n      <p class=\"paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>\r\n      </section>`,\r\n    attributes: {class:'gjs-fonts gjs-f-h1p'}\r\n  });    \r\n\r\nBut I'm still unable to edit the text in the h1 and p elements after dropping the component on the canvas. :("}}
{"actor":{"display_login":"roytang"}}