react-contenteditable | React component for a div with editable contents | Editor library

@scope decorator is a solution

1. Install all these dependencies in dev. In my case I am using typescript, if you are using javascript, skip types. Run npm i -D and all these dependencies.

   @types/enzyme @types/enzyme-adapter-react-16 enzyme enzyme-adapter-react-16 jest-environment-enzyme jest-enzyme @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest ts-jest

2. In root of your project, create a file named jest.config.js and inside put this code :

module.exports = { preset: 'ts-jest', testEnvironment: 'node', modulePathIgnorePatterns: ["/dist/"], };

1. In the same root of the project, create a file called jest.config.unit.js and put this code there:

You can convert react elements to markup using ReactDOMServer.renderToStaticMarkup(element). This would help with the styles, but not with the click handler:

You could use facebook's draftjs.org, where specifically this example seems very similar to what you are looking for: https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/tweet/tweet.html

You can use this DatePicker which allow you to have a customInput

The final line should be React.element = "default"; as the component is the direct export of the library, not a member of it.

The reason that your focus is lost is because the component is getting remounted instead of re-rendered.

Now one reason this things happens is because you add a key prop to the component that changes between re-renders. When this happens React things that the component has changed and remounts it.

Now you add a key key={this.props.date} on the div and I assume on each change on contentEditable date prop might ahve changed causing each and every child of it to remount

You also do not need a key prop unless you are returning elements from a loop

you could simply write your code like

It looks like for testing input you should use fireEvent.input. So following:

onClick is a React property so react-contenteditable wouldn't know what to do with it - since html expects plain html

A hacky way to achieve what you want - or pretty close to it - is:

1. Create an onClickContentEditable function and is it as onClick for ContentEditable
2. Add an innerRef to ContentEditable
3. in onClickContentEditable, then the clicked element is ContentEditable do nothing - since we want to interact only with the children of ContentEditable
4. Based on DOM attributes of the clicked element (tagName, className ...etc) fun with it! :) In onClickContentEditable you can check the DOM attributes of the clicked element and take action accordingly. You could create a class to mark the element you want to click.

You can test this implementation here - the sandbox is forked from the complex react-contenteditable example. I logged the interactions in the console.

Hope it helps!