glacambre
commented
4 years ago I've been working on this for a week now and I can't get writing to work. The following code is enough to retrieve text:
let elem = document.querySelector(selec) as any;
let editorState : any = undefined;
do {
const prop = Object.keys(elem).find(k => k.startsWith("__reactInternalInstance"));
if (elem[prop] === undefined) {
return elem.innerText;
}
// TODO: replace with optional chaining once the build system supports it
editorState = Object
.values(((elem[prop] || {}).child || {}).pendingProps || {})
.find((state: any) => (typeof (state || {}).getCurrentContent) === "function");
elem = elem.parentElement;
} while (editorState === undefined);
return editorState.getCurrentContent().getPlainText();But to write, you need to find something that has an onChange method and call it. This works really well when done from the debugger:
// Attempt to change the content of a draftjs element by recursively traversing
// all of its attributes and seeing if they have an `onChange` function.
function recurseChange(list, i, text) {
// If the end of the list has been reached, abort
if (i >= list.length)
return;
let current_object = list[i];
// If current_object is not in fact an object, skip to next list element
if (current_object === undefined || current_object === null)
return recurseChange(list, i+1, text);
// Add children of current_object that are not in the list to the list
Object.values(current_object).forEach(obj => {
if (!list.includes(obj)) {
list.push(v);
}
})
if (current_object.onChange !== undefined) {
try {
const newContentState = current_object.editorState.getCurrentContent().constructor.createFromText(text);
const newEditorState = current_object.editorState.constructor.createWithContent(newContentState);
current_object.onChange(newEditorState);
} catch (e) {}
}
const current_text = document.activeElement.__reactInternalInstance$XXX.child.pendingProps.editorState.getCurrentContent().getPlainText();
if (current_text === text) {
throw "Success!";
}
return recurseChange(list, i+1, text);
}But doesn't from the extension. I'd need the help of someone who understands what draftjs does behind the scenes.
jedenastka
https://www.npmjs.com/package/draft-js
It is highly likely that this would solve issues with Reddit, Twitter, Facebook and many other react websites.
Related issues: https://github.com/glacambre/firenvim/issues/625, https://github.com/glacambre/firenvim/issues/322