{"action":"created","issue":{"url":"https://api.github.com/repos/Polymer/polymer/issues/5158","repository_url":"https://api.github.com/repos/Polymer/polymer","labels_url":"https://api.github.com/repos/Polymer/polymer/issues/5158/labels{/name}","comments_url":"https://api.github.com/repos/Polymer/polymer/issues/5158/comments","events_url":"https://api.github.com/repos/Polymer/polymer/issues/5158/events","html_url":"https://github.com/Polymer/polymer/issues/5158","id":307273285,"number":5158,"title":"contenteditable attribute of a div hanging with document.execCommand and insertunorderedlist","user":{"login":"stucker71","id":10757745,"avatar_url":"https://avatars0.githubusercontent.com/u/10757745?v=4","gravatar_id":"","url":"https://api.github.com/users/stucker71","html_url":"https://github.com/stucker71","followers_url":"https://api.github.com/users/stucker71/followers","following_url":"https://api.github.com/users/stucker71/following{/other_user}","gists_url":"https://api.github.com/users/stucker71/gists{/gist_id}","starred_url":"https://api.github.com/users/stucker71/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stucker71/subscriptions","organizations_url":"https://api.github.com/users/stucker71/orgs","repos_url":"https://api.github.com/users/stucker71/repos","events_url":"https://api.github.com/users/stucker71/events{/privacy}","received_events_url":"https://api.github.com/users/stucker71/received_events","type":"User","site_admin":false},"labels":[{"id":438484067,"url":"https://api.github.com/repos/Polymer/polymer/labels/2.x","name":"2.x","color":"c5def5","default":false},{"id":12296107,"url":"https://api.github.com/repos/Polymer/polymer/labels/bug","name":"bug","color":"fc2929","default":true},{"id":118319120,"url":"https://api.github.com/repos/Polymer/polymer/labels/p2","name":"p2","color":"fbca04","default":false},{"id":118319130,"url":"https://api.github.com/repos/Polymer/polymer/labels/platform","name":"platform","color":"d8ba95","default":false}],"state":"closed","locked":false,"assignee":{"login":"TimvdLippe","id":5948271,"avatar_url":"https://avatars3.githubusercontent.com/u/5948271?v=4","gravatar_id":"","url":"https://api.github.com/users/TimvdLippe","html_url":"https://github.com/TimvdLippe","followers_url":"https://api.github.com/users/TimvdLippe/followers","following_url":"https://api.github.com/users/TimvdLippe/following{/other_user}","gists_url":"https://api.github.com/users/TimvdLippe/gists{/gist_id}","starred_url":"https://api.github.com/users/TimvdLippe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TimvdLippe/subscriptions","organizations_url":"https://api.github.com/users/TimvdLippe/orgs","repos_url":"https://api.github.com/users/TimvdLippe/repos","events_url":"https://api.github.com/users/TimvdLippe/events{/privacy}","received_events_url":"https://api.github.com/users/TimvdLippe/received_events","type":"User","site_admin":false},"assignees":[{"login":"TimvdLippe","id":5948271,"avatar_url":"https://avatars3.githubusercontent.com/u/5948271?v=4","gravatar_id":"","url":"https://api.github.com/users/TimvdLippe","html_url":"https://github.com/TimvdLippe","followers_url":"https://api.github.com/users/TimvdLippe/followers","following_url":"https://api.github.com/users/TimvdLippe/following{/other_user}","gists_url":"https://api.github.com/users/TimvdLippe/gists{/gist_id}","starred_url":"https://api.github.com/users/TimvdLippe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TimvdLippe/subscriptions","organizations_url":"https://api.github.com/users/TimvdLippe/orgs","repos_url":"https://api.github.com/users/TimvdLippe/repos","events_url":"https://api.github.com/users/TimvdLippe/events{/privacy}","received_events_url":"https://api.github.com/users/TimvdLippe/received_events","type":"User","site_admin":false}],"milestone":null,"comments":0,"created_at":"2018-03-21T14:40:21Z","updated_at":"2018-03-27T18:14:02Z","closed_at":"2018-03-27T18:14:02Z","author_association":"NONE","body":"### Description\r\nI'm writing a very basic WYSIWYG rich editor using `contenteditable`  attribute of a `div` but experiencing issues with `document.execCommand` and executing the command `insertunorderedlist`. If you select and highlight the text you want to insert an unordered list and click insert button then it either fails to work correctly using Chrome (latest version) or if using Safari (latest version High Sierra), just hangs. If you try this outside of Polymer (plain old html and javascript) it works fine. Here's the code:\r\n\r\n```\r\n<link rel=\"import\" href=\"../../bower_components/polymer/polymer-element.html\">\r\n\r\n<dom-module id=\"polymerbasic-app\">\r\n  <template>\r\n    <style>\r\n      :host {\r\n        display: block;\r\n      }\r\n    </style>\r\n\r\n    <button on-click=\"_insertunorderedlist\" type=\"button\">Insert Unordered List</button>\r\n\r\n    <div id=\"textBox\" contenteditable=\"true\">\r\n      Bullet One\r\n      <br> Bullet Two\r\n      <br> Bullet Three\r\n    </div>\r\n  </template>\r\n\r\n  <script>\r\n    /**\r\n     * @customElement\r\n     * @polymer\r\n     */\r\n    class PolymerbasicApp extends Polymer.Element {\r\n      static get is() { return 'polymerbasic-app'; }\r\n      static get properties() {\r\n        return {\r\n          prop1: {\r\n            type: String,\r\n            value: 'polymerbasic-app'\r\n          }\r\n        };\r\n\r\n      }\r\n      _insertunorderedlist() {\r\n        document.execCommand(\"insertunorderedlist\", false, null); this.$.textBox.focus();\r\n      }\r\n\r\n    }\r\n\r\n    window.customElements.define(PolymerbasicApp.is, PolymerbasicApp);\r\n  </script>\r\n</dom-module>\r\n```\r\n\r\n#### Steps to Reproduce\r\nSelect and highlight Bullet One, Bullet Two, and Bullet Three text and click on insert button using Safari or other browser.\r\n\r\n#### Expected Results\r\nhtml Unordered list.\r\n\r\n#### Actual Results\r\nHangs, or does not behave correctly.\r\n\r\n### Browsers Affected\r\n- [ x] Chrome\r\n- [ x] Firefox\r\n- [ x] Edge\r\n- [ x] Safari 9\r\n- [ x] Safari 8\r\n- [ x] IE 11\r\n\r\n### Versions\r\n<!--\r\n`Polymer.version` will show the version for Polymer\r\n`bower ls` or `npm ls` will show the version of webcomponents.js or webcomponents-lite.js\r\n-->\r\n- Polymer: v2.6.0\r\n- webcomponents: v1.1.0\r\n"},"comment":{"url":"https://api.github.com/repos/Polymer/polymer/issues/comments/376623195","html_url":"https://github.com/Polymer/polymer/issues/5158#issuecomment-376623195","issue_url":"https://api.github.com/repos/Polymer/polymer/issues/5158","id":376623195,"user":{"login":"TimvdLippe","id":5948271,"avatar_url":"https://avatars3.githubusercontent.com/u/5948271?v=4","gravatar_id":"","url":"https://api.github.com/users/TimvdLippe","html_url":"https://github.com/TimvdLippe","followers_url":"https://api.github.com/users/TimvdLippe/followers","following_url":"https://api.github.com/users/TimvdLippe/following{/other_user}","gists_url":"https://api.github.com/users/TimvdLippe/gists{/gist_id}","starred_url":"https://api.github.com/users/TimvdLippe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TimvdLippe/subscriptions","organizations_url":"https://api.github.com/users/TimvdLippe/orgs","repos_url":"https://api.github.com/users/TimvdLippe/repos","events_url":"https://api.github.com/users/TimvdLippe/events{/privacy}","received_events_url":"https://api.github.com/users/TimvdLippe/received_events","type":"User","site_admin":false},"created_at":"2018-03-27T18:14:02Z","updated_at":"2018-03-27T18:14:02Z","author_association":"CONTRIBUTOR","body":"It appears that this is actually an issue with the implementation of shadow dom in the browsers, rather than a Polymer issue. Please see this JSBin (http://jsbin.com/muziyafuda/edit?html,console,output) that shows the issue in Chrome, where the non-shadow dom version (top) works, but the shadow dom version (bottom) does not work.\r\n\r\nI have filed https://bugs.chromium.org/p/chromium/issues/detail?id=826406 for Chrome and https://bugs.webkit.org/show_bug.cgi?id=184049 for Safari, so the browser vendors can address this issue."}}
{"actor":{"display_login":"TimvdLippe"}}