Giters

BeaconCMS / live_monaco_editor

Monaco Editor component for Phoenix LiveView

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Form posts incomplete data after 10lines

rliebling opened this issue · comments

commented

I can reproduce this by running iex -S mix dev in this project. If you edit the file_c box adding up to 10 lines all works fine. but, as soon as you add an 11th line incomplete data is sent to the handle_event call (and output in the iex -S mix dev console. basically you get the 11th line onwards. It seems like the editor is using 10line windows of text to serialize as part of the form data.

I am willing to investigate this more, but am rather confused right now on how this is supposed to work. Does this project (the elixir project) do anything to make the form stuff work? Or, does the monaco editor keep some textarea or other form element in sync with the text of the monaco editor so that live_monaco_editor does not need to do anything? If so, then this seems to be an issue with the underlying monaco editor - which I believe is the case, although it may be intended behavior.

Again, starting this as a discussion. And, it may well be a case of user-error, although i hoped the iex -S mix dev eliminated that chance. thanks in advance for any help/guidance you can provide!

commented

Hey @rliebling thanks for looking into it. The monaco editor and phx-change aren't playing nice together so I recommend https://github.com/BeaconCMS/live_monaco_editor#fetching-the-editor-value instead to fetch the editor content value.

I'd like to make it work but I'm afraid that may require deeper changes to Phoenix or even the Monaco editor, making such feature not viable. But before ruling it out it's worth investigating a bit more.

commented

@leandrocp thanks for the reply (as well as for the project). I haven't had much time but did try looking at this code, the livebook code and the monaco code. I will try to spend more time soon. Meanwhile, can you help me understand how this project (live_monaco_editor) is supposed to work for form submissions? Am I correct that

  • the monaco editor itself is creating the textarea element (that live_monaco_editor assigns the desired name to), and
  • the monaco editor is updating the data in that textarea to keep it in sync with the contents of the editor
  • so, the problem I reported is that monaco is not updating the textarea as expected by live_monaco_editor once 10lines of text is reached? An alternative explanation might be that phx-change handling is not retrieving the value of the textarea successfully, which I suppose might relate to the timing of the value being set by monaco versus being read by liveview.

anyway, appreciate any insight/pointers you might have, and happy to followup on my own when i find time. Of course, i might also just resort to explicitly fetching the editor value as you already suggested :)

commented

It's actually a bit more complicated :D
Monaco will create a textarea but the actual content is kept inside a tree of div>span elements. AFAIK it works this way so Monaco can render visual elements, syntax highlight, and so on, ie: have total control of the editor. So I suspect the textarea works like a buffer and phx-change won't capture all the content. My initial thought was to somehow intercept the change event, capture the entire editor content, and update the value. But I'm not sure if that's doable.

commented

AFAIK it's impossible to avoid the change event if you place the editor inside of the form, one alternative is to have the editor sitting outside of the form, with an extra attribute on the form which is a hidden input in the form you proxy events to. I have this working locally and do not have the error anymore with missing out on the editor contents.

commented

I'll see if I get time soon :). Have made my own components so not technically using LME anymore. But will be easy enough to add changes to the this.

commented

To help with that problem I've released a new version with a new :change option that mimics phx-change but doesn't have those limitations. See #19 and https://github.com/BeaconCMS/live_monaco_editor#inside-forms

I'm closing this one for now but feel free to reopen it or add more comments. Thanks!