how to get monaco-editor value not from monaco provided api - javascript

Problem Background
I'm working on a browser plugin that facilitates recording LeetCode and I'm having trouble getting the solution to the problem
The problem is described as follows
LeetCode code is written with monaco editor support, the content is dynamically displayed and only part of the content is kept on the DOM
So I couldn't parse the DOM directly to get the user's code.
I tried to simulate the user's click behavior and dispatched click events to some elements of the monaco editor, but it didn't work
Do you have any good way to parse the monaco editor?

Related

Webpage responding differently to javascript .click() than a normal mouse click

When I click on a particular element on a webpage using multiple different variants of the .click() event e.g. document.querySelectorAll(selector)[pos].dispatchEvent(new MouseEvent('click', {{ bubbles: true, cancelable: true, view: window }})); or document.querySelectorAll(selector)[pos].click() the webpage doesn't load the corresponding page properly; in fact, some of these events used to work a few days ago but now don't work anymore and even if I send a reload request using javascript to the page, it doesn't show the expected dynamic elements and responsive code. Instead, it just shows a blank result where I expected information. It requires me sending a manual click event using my own mouse and clicking on the reload for the corresponding dynamic code to reappear.
Is there a way to properly and fully simulate a mouse click using javascript such that it is indistinguishable from a normal click? I've tried a few MouseEvents but perhaps I'm just configuring them wrong, or the webpage is responding differently to console executed commands.
I found a method of systematically clicking website elements largely untraceably. Basically use pyppeteer to locate the chosen element using document.querySelectorAll(*element class name*)[*position*].getBoundingClientRect()
Then click the element using pyautogui, I found using this method worked pretty well
def safeClick(baseX,baseY):
pyautogui.moveTo(baseX,baseY,1+random.random())
step=random.randrange(1,7)
for i in range(step):
baseX=baseX+random.random()
pyautogui.moveTo(baseX,baseY)
pyautogui.mouseDown(baseX,baseY)
time.sleep(random.random())
pyautogui.mouseUp(baseX,baseY)
Remember that in most browsers the getBoundingClientRect() coordinates are not exactly the same as the pyautogui coordinates, you'll need to use my answer here how to find offsets in any browser configuration.
EDIT: Note this answer works in python, if you're trying to use javascript I'm pretty sure it's largely impossible

<textarea>: ctrl + z breaks after changing the value content through javascript

I am making an HTML textarea that accepts tab key input using JavaScript.
When I searched for a solution on the web, I found this answer, but after some fiddling, I found out that ctrl+z stops working after I hit tab key.
Doing some more experiments revealed that changing the value attribute was likely the culprit of this problem. Here is a small scale code example that you can hopefully reproduce this behavior yourself.
https://codepen.io/MartianLord/pen/gORKPGp?editors=1010
I managed to find a workaround using document.execCommand to simulate the user input, but this method is deprecated as you can see here, so I am looking for a more up to date solution.
To support ctrl+z while using tab in <textarea>, you need to implement undo, redo functions to connect with <textarea>. When the <textarea> changes, record the changes in the history, and revert when ctrl+z key input occurs.
UndoRedojs is a library for this task.
I think there will be a lot of work to be done, such as setting the selection position, in order to fully implement it. I recommend using a text editor that has already been created.

Need a method to capture javascript events in WinForm webbrowser control

I have a WinForms app that uses a .NET webbrowser control. What I need to do, is wire up an event on the WinForms side to fire when a value is set (via javascript) in the loaded HTML page. I had success doing this with an onclick event of a button, but I can't seem to get it to work with a custom event. I don't know if this is a limitation in what the browser control can attach to event wise.
So essentially, I need that when a JS function is called in the HTML page and sets a value of a hidden input element (or it could be a regular input that I style to be hidden), I need to know that in WinForms. If it helps, I am using browser flags in this application to emulate IE11 instead of the default IE9 engine. The HTML page loaded is also mine so I can modify it any way needed to make this work properly. I would just use the onclick events of the buttons, but this is a gmaps integration where there can be upwards of 2000 buttons generated (one per marker placed) so it seems like a huge waste of resources to wire up 2000 onclick events when any of those button clicks only modify 4 input fields with the data I care about.
This project happens to be in VB.NET, but C# solutions would be fine as well. They can be transcoded or if the solution uses C# specific features, we can move this to a separate DLL and reference it.
After spending a lot of time on this today, I found a solution. It isn't a direct solution to the problem I posted, but it got me to where I needed to be. I am still interested in an answer to the original problem if anyone has one, but for now, what I found I could do was to create a class in .NET that I could assign to the ScriptingObject of the browser control and then call window.external.myFunctionName, where myFunctionName is a function within the .NET class. This works great for my specific problem, but would not work if I didn't also control the HTML page I was consuming with the browser. That is why I am still interested in alternate solutions if anyone has one. Thanks.

Executing external JS using innerHTML and appendChild

I've been playing around with the Material Design Lite library that Google just launched a few days ago, but have some questions, specifically on how to initiate (or execute?) external JS when the HTML changes using innerHTML and appendChild.
See the first example here. As you can see, the HTML for the menu is already within the HTML file when it is first loaded so the menu works fine.
But in this example, the HTML of the document is modified using JS. However, the menu does not work anymore because the script is not executing, I think.
How can I resolve this issue? What's a better way to achieve this result? I'm a newbie when it comes to JavaScript.
You will need to attach the proper event listener from the library. With this change (adding componentHandler.upgradeAllRegistered(); after appending the item) it should work:
document.body.appendChild(menu);
componentHandler.upgradeAllRegistered();
When the menu button is inserted dynamically (when the user clicks), it doesn't get assigned the event listeners to show the menu. I'm guessing that the material design library parses the HTML when it (the library) gets loaded (since you're loading it at the bottom of your HTML document). Since it's already loaded by the time the user clicks, it doesn't check the new element that has been inserted and can't assign it the event listeners.
If this is the case, you'll need to find a way to get the library to recognize your new button.

Tinymce get changed content

I'm using TinyMCE as a wysiwyg editor for a collaboration editor I'm working on. I need very granular changes that are made to the editor(Insert('a'), Delete(2), etc.). I see TinyMCE has a few events to handle this case, onchange_callback, and handle_event_callback. Neither one of these methods give you what changed to the editor, just the editor instance or the event. Is anyone aware of a method to just get changes to the editor, kind of like CodeMirror?
In order to do this you can save the editor content at a specified point of time and then compare it to the editor content to a later time.

Categories

Resources