react-style-editor icon indicating copy to clipboard operation
react-style-editor copied to clipboard

When deleting all content from the editor, it's no longer editable.

Open mishelka opened this issue 3 years ago • 2 comments

Problem description:

  • When deleting all content from the editor, it's no longer editable.

Steps to reproduce:

  1. The editor at the beginning. Have only one item to edit. Mine was initialized from redux state. If you have more elements, perform every step for each one from last to first element. image
  2. Uncheck the root element. Result: image
  3. Click on the content, delete it with Backspace, then click somewhere else to apply the change. Result: image
  4. Click on the checkbox. Result: image The checkbox along with all content dissapeared and it's no longer possible to add anything because the editor stopped reacting to clicks. Here is the remaining content in the HTML tree: image

Tried solutions:

After the value changes to an empty string, I tried to externally change the value in the onChange event handler method using react's ref, but I am unable to set the style editor's value or content by any way (please see code below).

Possible solutions:

  • a) Add a setValue() function for the editor, that could handle such cases.
  • b) Don't allow the editor to delete the last element.

Code:

const handleStyleChange = (value) => {
    console.log(styleEditorRef.current); //no value here
//    console.log(styleEditorRef.current.props.value); //not possible
    console.log(value);
};
//... render:
<StyleEditor
    defaultValue={editedTemplate.documents[activePageId]?.innerDocument?.style}
    className={styles.StyleEditor}
    onChange={handleStyleChange}
    ref={styleEditorRef}
/>

mishelka avatar Mar 11 '22 13:03 mishelka

I managed to reproduce the problem and it seems to be related to whitespace issues. After going through your steps of erasing everything, the following sample works fine (it leaves a gray area behind it which is still editable upon click):

div{}

However, the same sample with an \n at the end manifests the reported issue:

div{}

Until I fix it properly, please trim your CSS string before passing it to StyleEditor.

Aurelain avatar Mar 11 '22 20:03 Aurelain

Thank you, it seems to work well with trim(). Looking forward to the new editor version! :)

mishelka avatar Mar 13 '22 11:03 mishelka