Strip all styling from pasted text in DraftJS? - reactjs

When pasting text from word or another source into draftjs the formatting comes along for the ride, I tried stripping the styling data like so:
onChange={(newEditorState) => {
const raw = convertToRaw(newEditorState.getCurrentContent())
for (let i = 0; i < raw.blocks.length; i++){
raw.blocks[i].type = "unstyled"
}
let newContent = convertFromRaw(raw)
newEditorState
const newState = EditorState.push(state, newContent, "change-block-type")
setState(newState)
}} />
Which worked except typing ended up being reversed on input after that, which was very confusing.

It seems like the stripPastedStyles option is what you're looking for:
Set whether to remove all information except plaintext from pasted content.
This should be used if your editor does not support rich styles.
Default is false.

Related

Emojis become question marks after re-render in contentEditable

I've created a simple text editor and I've also created the possibility to add emojis. The problem is that when I click an emoji the emoji is added and visible, but the previous existing emojis are replaced with question marks. My contentEditable div is controlled, meaning that whenever an emoji is added it causes a re-render. I got this problem in the following if case of my algorithm:
childValue = childValue.substring(0, caretPosition) + emoji + childValue.substring(caretPosition + 1, childValue.length)
childValue isn't a state variable, it's value is used to update a constant variable that will be used to update the state variable representing the contentEditable's dangerouslySetInnerHTML property, the caretPosition is perfect.
Any ideas why I might have this issue?
This solution from https://stackoverflow.com/a/59793087/14550434 combined with HTML escaping should do the trick:
var p = document.querySelector("p");
var childValue = "Some sample text";
var caretPosition = 5;
var emoji = "😀";
const emojiToString = (emoji) =>
` &#x${emoji.codePointAt(0).toString(16)}; `;
childValue =
childValue.substring(0, caretPosition) + emojiToString(emoji) +
childValue.substring(caretPosition, childValue.length);
p.innerHTML = childValue;
<p></p>
I solved this issue. I figured out that 'substring' was messing everything up, so I did the following:
newChildValue = Array.from(childValue);
childValue = newChildValue.slice(0, caretPosition).join('') + emoji + newChildValue.slice(caretPosition).join('');
This way I avoid using 'substring' as Array.from(str) splits a string into individual unicode characters without breaking them between bytes.

TestCafe loop over elements and check if class exists within Set

I have a table with a column of icons. Each Icon has a class of "test" and then "test" + [some rating]. The rating could be A, B, C, XX, YY. I'd like to select the group of icons and loop over them, pop off the last class (the one with the rating) and then expect that my Set of classConsts contains the class in question. I've done a bunch of research but can only find examples of interacting with each of the elements, I'm not sure what I'm doing wrong when trying to check the classes on each instead. Any help is appreciated, thanks.
The below code blows up when i call mrArray.nth saying it's not a function (sorry its a bit messy, had to change some variable names around)
test('Sers are verified', async t => {
const IconArr = Selector('#testtable .test');
var count = await IconArr().count;
var myArray = await IconArr();
const classConsts = ["testClassA", "testClassB", "testClassC", "testClassXX", "testClassYY"]
let mySet = new Set(classConsts);
for(let i = 1; i <= count; i++){
console.log(mySet.has(myArray.nth(i).classNames.pop()));
};
});
myArray is no longer a Selector object after you execute it as an asynchronous function. Please refer to the following help article for more information DOMNodeState.
Also, the index starts with 0, not 1. Your code may look as follows:
for(let i = 0; i \< count; i++){
let classes = await IconArr().nth(i).classNames;
console.log(mySet.has(classes.pop()));
};
You can always debug your test cases to see what goes wrong:
https://devexpress.github.io/testcafe/documentation/recipes/debugging/chrome-dev-tools.html

How to get a line from one json file and another from a different json file using node.js

I am trying to combine lists of information from different .txt files.
Example:
(text1.txt):
type1
type2
type3
(text2.txt):
variable1
variable2
variable3
I want the program to give me something like this:
(I can set the separator character but I will use ':' for the example)
type1:variable1
type1:variable2
type1:variable3
type2:variable1
type2:variable2
type2:variable3
type3:variable1
type3:variable2
type3:variable3
Does anyone know how I would even start to go about that in node.js
I know I can create an array from each file using this:
var txt1Array = fs.readFileSync('./text1.txt').toString().split("\n");
var txt2Array = fs.readFileSync('./text2.txt').toString().split("\n");
But after that, I don't know how to set up a for loop to add all of the text2 files after each text1 file data pieces.
EDIT: if anyone doesn't know, fs.readFileSync is how im getting the data from the different text files...
Something like that for example ?
const txt1Array = fs.readFileSync('./text1.txt').toString().split("\n");
const txt2Array = fs.readFileSync('./text2.txt').toString().split("\n");
const resultArray = [];
for (let str1 of txt1Array) {
for (let str2 of txt2Array) {
resultArray.push(`${str1}:${str2}`);
}
}
It seems too simple, maybe I didn't get right the question.

How do I get the text from the li tag

How do I get the text from the li tag? I want to find the text "Password is required." only, not the text inside strong tag.
<li><strong>Error:</strong> Password is required.</li>
You need to show your code for somebody to give a complete answer. I guess that you already know how to do something like the following
WebElement something = driver.FindElement(By.CssSelector(?))
string s = something.Text;
The next bit seems to be where you are stuck. There you need to parse the string s. That is nothing to do with Selenium-Webdriver. You could do something like
string[] s2 = s.split(new string[] {">","<"});
were the last element in s2 would be your answer here. This would be totally non generic though. Is this a situation in which you always want to purge html?
Here is the method developed in python.
def get_text_exclude_children(element):
return driver.execute_script(
"""
var parent = arguments[0];
var child = parent.firstChild;
var textValue = "";
while(child) {
if (child.nodeType === Node.TEXT_NODE)
textValue += child.textContent;
child = child.nextSibling;
}
return textValue;""",
element).strip()
How to use in this:
liElement = driver.find_element_by_xpath("//li")
liOnlyText = get_text_exclude_children(liElement)
print(liOnlyText)
Please use your possible strategy to get the element, this method need an element from which you need the text (without children text).

google apps script: setValues from array, taken from html form onSubmit in google sheets

In Google Sheets, I have a sidebar using html, with a form which runs processForm(this) upon submission. The form was created based on the headings in the sheet, which is why I am using the headings to retrieve the values from the form. The code seems to work fine until I try to use setValues(). There is no error, but nothing seems to happen at that line. Please let me know what I might be doing wrong. Thanks.
function processForm(formObject) {
var headers = getHeaders();
var newRow = [];
for (var i = 0; i < headers.length; i++) {
newRow.push(formObject["" + headers[i]]); // TODO: convert objects to appropriate formats
}
var sheet = SpreadsheetApp.getActiveSheet();
var range = sheet.getRange(parseInt(formObject.row)+1, 1, 1, headers.length)
Logger.log(JSON.stringify(newRow)); // example output: ["John","Smith","male","6615554109","","example_email#yahoo.com"]
range.setValues(newRow); // values not getting set
}
Change last line:
range.setValues([newRow]);
(thanks for the solution, Serge insas!)

Resources