{"action":"created","issue":{"url":"https://api.github.com/repos/quilljs/quill/issues/1162","repository_url":"https://api.github.com/repos/quilljs/quill","labels_url":"https://api.github.com/repos/quilljs/quill/issues/1162/labels{/name}","comments_url":"https://api.github.com/repos/quilljs/quill/issues/1162/comments","events_url":"https://api.github.com/repos/quilljs/quill/issues/1162/events","html_url":"https://github.com/quilljs/quill/issues/1162","id":193495287,"node_id":"MDU6SXNzdWUxOTM0OTUyODc=","number":1162,"title":"Blots rendering depending on quill instance options","user":{"login":"artaommahe","id":1944061,"node_id":"MDQ6VXNlcjE5NDQwNjE=","avatar_url":"https://avatars2.githubusercontent.com/u/1944061?v=4","gravatar_id":"","url":"https://api.github.com/users/artaommahe","html_url":"https://github.com/artaommahe","followers_url":"https://api.github.com/users/artaommahe/followers","following_url":"https://api.github.com/users/artaommahe/following{/other_user}","gists_url":"https://api.github.com/users/artaommahe/gists{/gist_id}","starred_url":"https://api.github.com/users/artaommahe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/artaommahe/subscriptions","organizations_url":"https://api.github.com/users/artaommahe/orgs","repos_url":"https://api.github.com/users/artaommahe/repos","events_url":"https://api.github.com/users/artaommahe/events{/privacy}","received_events_url":"https://api.github.com/users/artaommahe/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2016-12-05T13:23:53Z","updated_at":"2018-06-06T16:47:31Z","closed_at":null,"author_association":"NONE","body":"Currently there is no other proper way to render Quill Delta on front-end for display only except using Quill instance in read-only mode. All other methods (third-party libs or own parser) are not suitable for this cause require all formats/blots double registering and also must copy existing Quill functional -  rendering Delta with registered Blots and passed settings (it's disscussed here #993 ).\r\nThere is some use-cases when complex Blots should be rendered different in edit and display mode, e.x. medium-like images/vieos that has descriptions field\r\n```html\r\n<!-- {{ smth }} is just marks for values places -->\r\n<div class=\"article__figure\" contenteditable=\"false\">\r\n    <!-- wrapper with image or video here -->\r\n    <div class=\"article__image\">\r\n        <img src=\"{{ src }}\" />\r\n    </div>\r\n\r\n    <!-- and different ways to edit caption - via contenteditable div or textarea -->\r\n    <div class=\"article__caption\" contenteditable=\"true\">\r\n        {{ caption }}\r\n    </div>\r\n    <!-- or -->\r\n    <div class=\"article__caption\">\r\n        <!-- view mode only, created in static create() by default -->\r\n        {{ caption }}\r\n        <!-- edit mode only, replaces plain text in constructor() -->\r\n        <textarea rows=\"1\">{{ caption }}</textarea>\r\n    </div>\r\n</div>\r\n```\r\n\r\nIn this case we need to display caption in editable mode (`contenteditable=\"true\"` or `<textarea>`) while editing and as plain text in display mode. \r\nCurrently there is no proper way to render same Blot depending on Quill instance options (edit/read-only mode). I'm using ugly-hack for this - in Blot `constructor()` check that closest Quill instance editor DOM node has `.ql-disabled` class and re-render part of markup that is awful."},"comment":{"url":"https://api.github.com/repos/quilljs/quill/issues/comments/395137156","html_url":"https://github.com/quilljs/quill/issues/1162#issuecomment-395137156","issue_url":"https://api.github.com/repos/quilljs/quill/issues/1162","id":395137156,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NTEzNzE1Ng==","user":{"login":"charrondev","id":1770056,"node_id":"MDQ6VXNlcjE3NzAwNTY=","avatar_url":"https://avatars0.githubusercontent.com/u/1770056?v=4","gravatar_id":"","url":"https://api.github.com/users/charrondev","html_url":"https://github.com/charrondev","followers_url":"https://api.github.com/users/charrondev/followers","following_url":"https://api.github.com/users/charrondev/following{/other_user}","gists_url":"https://api.github.com/users/charrondev/gists{/gist_id}","starred_url":"https://api.github.com/users/charrondev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/charrondev/subscriptions","organizations_url":"https://api.github.com/users/charrondev/orgs","repos_url":"https://api.github.com/users/charrondev/repos","events_url":"https://api.github.com/users/charrondev/events{/privacy}","received_events_url":"https://api.github.com/users/charrondev/received_events","type":"User","site_admin":false},"created_at":"2018-06-06T16:47:31Z","updated_at":"2018-06-06T16:47:31Z","author_association":"NONE","body":"This is really pretty easy to implement yourself.\r\n\r\n```ts\r\nclass MyEmbedBlot extends SomeBaseBlot {\r\n    /**\r\n     * Get the attached quill instance.\r\n     *\r\n     * This will _NOT_ work before attach() is called.\r\n     */\r\n    private get quill(): Quill | null {\r\n        if (!this.scroll || !this.scroll.domNode.parentNode) {\r\n            return null;\r\n        }\r\n\r\n        return Quill.find(this.scroll.domNode.parentNode!);\r\n    }\r\n}\r\n```\r\n\r\nThe quill instance is then available with `this.quill`. You just have to be aware of where in the lifecycle you call the method. For example calling the constructor, before `attach()` is called will not work because you don't have a scroll or parent blot yet."}}
{"actor":{"display_login":"charrondev"}}