Two way data binding is not working

[hariprasadiit]

I think two way data binding for the content is not working.

steps to reproduce.

1. set the initial content.
2. if we edit content in the editor, the changes will update the property from the host.
3. try to change the property by some other means. it will not update the editor content.

probable cause :

polymer-quill respects the data binding system. but after setting the initial content to the quill, data flow is only one way, i.e from quill to content property.

probably it can be solved by using an observer to observe the content property, then change the quill content whenever it changes.

I'll try to use observer to see if this solves the problem.

[hariprasadiit]

using observer doesn't solve the problem. It creates new problem of duplicate content being set to the quill editor and also resets the cursor position.

probably providing method to change entire content of the quill might work?

[chuckh]

I still trying to figure this one out. Once I do I will update.

[chuckh]

Just release a new version of polymer-quill 0.6.0. I added a change event which I got working with saving and loading using iron-localstorage. See the 4th demo (last) at https://chuckh.github.io/polymer-quill/components/polymer-quill/demo/.

I also was able to use the change event to get real time editing working with Firebase.

[hariprasadiit]

Hi Chuck,

Thanks for the update.

two way data binding is still not working. from polymer-quill to host, data binding is working but not the other way. so i don't see any use for change event.

it seems you've set an observer for the content but it's not implemented. I've tried observer approach, but it creates additional problems. so if we want to reset the quill editor content,i think it's better to expose a function to do that.

like

in polymer-quill

resetContent : function(content){
          this.quill.root.innerHTML = content  // for save as HTML
     }

usage in host

this.$.quillEditor.resetContent(content);

[misterzorgy]

unfortunately the problem didn't solved. I think @hariprasadiit suggested good solution of this problem. I used invokation on this function in _contentChanged handler in async mode and this worked for me. Can you update this in new version? thank you

[chuckh]

@hariprasadiit @misterzorgy I made the suggested change on this commit c8067ab with some additional logic. Let me know if this fixes this issue.

[chuckh]

I just released polymer-quill version 0.8.0 https://github.com/chuckh/polymer-quill/releases/tag/v0.8.0. This includes the following:

• Updated to Quill 1.1.8
• useContentReset flag, set true to use @hariprasadiit above fix use-content-reset="true"
• Added more demos
• polymer-html-render renders Quill HTML. More info at: https://chuckh.github.io/polymer-quill/components/polymer-quill/#polymer-quill-html-render
• and more

[petecarapetyan]

In my situation, when useContentReset is true then my editor goes haywire and resets focus to the beginning of document as I am typing. But I still need this to bring in external docs from db.

So what I do is useContentReset to true, set content, then useContentReset to false. Decent workaround.

[AutumnSky]

@petecarapetyan yes, I have same issue. your solution works to me. thank you.
code here.

<polymer-quill
                    id="quillEditor"
                    store-as="html"
                    save-interval="500"
                    content="{{commentContent}}"></polymer-quill>

this.$.quillEditor.useContentReset = true;
this.commentContent = "";
this.$.quillEditor.setContent();
this.$.quillEditor.useContentReset = false;

[atifwaqar]

@AutumnSky I'm new to Polymer. Can you please tell me where have you placed the following code :

this.$.quillEditor.useContentReset = true;
this.commentContent = "";
this.$.quillEditor.setContent();
this.$.quillEditor.useContentReset = false;

[AutumnSky]

@atifwaqar apply that logic to where you want to reset quillEditor's content.
In my case, set the content to null when user complete sending text.
or, set the default string when user first see the polymer editor.

another code here.

var quillEditor = this.$$('#quillEditor');
quillEditor.useContentReset = true;
this.formData = {
"title": this.document.title,
"content": this.document.content
};
quillEditor.setContent();
quillEditor.useContentReset = false;

ps. Sorry for poor English...

[ghost]

I see the same issue as @petecarapetyan, wherein use-content-reset constantly moves the caret to the start of the editing area. The data itself has updated properly from the JS code, at least. Any chance the attribute could work without this bug?