title: CKEditor5 Listening to Change Event and Updating Model
body: <p>I'm trying to create a widget in CkEditor5 with two parts:</p>
  
  <p>1) an input for a plain text version of a formula (what I want saved in the model and on getData)</p>
  
  <p>2) a live preview of that text formula rendered with KaTeX (what should actually be displayed in the editor).</p>
  
  <p>I ran into <a href="https://github.com/ckeditor/ckeditor5-widget/issues/87" rel="nofollow noreferrer">a bug with the WidgetToolbar</a>, so my current approach is simply to insert two custom block elements, one of which functions as a input and the other functions as the preview. When the document changes, I'm trying to check to see if the contents of the input has changed, and insert it into the preview (I haven't got to actually transforming it yet).</p>
  
  <p>Here's the code I use to insert my elements (it's wired up to a custom button): </p>
  
  <pre><code>function createFormula( writer, editor ) {
      const formula = writer.createElement('formula');
      const formulaInput = writer.createElement('formulaInput');
      const formulaPreview = writer.createElement('formulaPreview');
      let formulaInputValue = null;
  
      editor.model.document.on('change:data', (eventInfo) =&gt; {
  
        if (formulaInput &amp;&amp; formulaInput._children &amp;&amp; formulaInput._children._nodes &amp;&amp; formulaInput._children._nodes[0]) {
          let newValue = formulaInput._children._nodes[0]._data;
  
          if(formulaInputValue !== newValue) {
              formulaInputValue = newValue;
              writer.insertText(formulaInputValue, formulaPreview);
          }
  
        }
  
  
      });
  
  
      writer.append( formulaInput, formula );
      writer.append( formulaPreview, formula );
  
      return formula;
  }
  </code></pre>
  
  <p>Even though the writer.insertText appears inside editor.model.document.on('change:data') I get an error message: </p>
  
  <pre><code>Uncaught CKEditorError: writer-incorrect-use: Trying to use a writer outside the change() block
  </code></pre>
  
  <p>I'm kind of stumped for how to accomplish the task of listening to changes in one element and inserting content into another.  I noticed that there's a <a href="https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_element-Element.html" rel="nofollow noreferrer">'change' event associated with elements</a>, but that's not an actual method one can use to listen to changes on elements. If document.on('change:data') doesn't count as a change block, what does? Is there a better way to listen? Are there any examples of this? I've been coming through the CkEditor5 docs and other plugins, but I haven't identified any helpful examples.</p>