react-contenteditable 3.3.2 → 3.3.6

package/.github/workflows/main.yml

@@ -0,0 +1,28 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2.4.0
+      - run: npm ci
+      - run: npm test

package/README.md

@@ -52,11 +52,28 @@ class MyComponent extends React.Component {
 |disabled|use true to disable editing|Boolean|
 |onChange|called whenever `innerHTML` changes|Function|
 |onBlur|called whenever the html element is [blurred](https://developer.mozilla.org/en-US/docs/Web/Events/blur)|Function|
+|onFocus|event fires when an element has received [focus](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event)|Function|
 |onKeyUp|called whenever a key is released|Function|
 |onKeyDown|called whenever a key is pressed |Function|
 |className|the element's [CSS class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class)|String|
 |style|a collection of CSS properties to apply to the element|Object|
 
+## Known Issues
+If you are using hooks, please see [this issue](https://github.com/lovasoa/react-contenteditable/issues/161). Using this component with [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate) doesn't work, but you can still use [`useRef`](https://reactjs.org/docs/hooks-reference.html#useref) : 
+
+```js
+const text = useRef('');
+
+const handleChange = evt => {
+    text.current = evt.target.value;
+};
+
+const handleBlur = () => {
+    console.log(text.current);
+};
+
+return <ContentEditable html={text.current} onBlur={handleBlur} onChange={handleChange} />
+```
 
 ## Examples
 

package/lib/react-contenteditable.d.ts

@@ -10,9 +10,9 @@ export default class ContentEditable extends React.Component<Props> {
     render(): React.ReactElement<{
         ref: any;
         onInput: (originalEvt: React.SyntheticEvent<any, Event>) => void;
-        onBlur: (event: React.FocusEvent<HTMLDivElement>) => void;
-        onKeyUp: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-        onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        onBlur: React.FocusEventHandler<HTMLDivElement>;
+        onKeyUp: React.KeyboardEventHandler<HTMLDivElement>;
+        onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
         contentEditable: boolean;
         dangerouslySetInnerHTML: {
             __html: string;
@@ -25,28 +25,27 @@ export default class ContentEditable extends React.Component<Props> {
         slot?: string | undefined;
         title?: string | undefined;
         color?: string | undefined;
-        key?: string | number | undefined;
+        translate?: "yes" | "no" | undefined;
+        prefix?: string | undefined;
         children?: React.ReactNode;
+        key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
-        defaultValue?: string | string[] | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         contextMenu?: string | undefined;
-        draggable?: boolean | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         placeholder?: string | undefined;
-        spellCheck?: boolean | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
         tabIndex?: number | undefined;
-        inputMode?: string | undefined;
-        is?: string | undefined;
         radioGroup?: string | undefined;
-        role?: string | undefined;
+        role?: React.AriaRole | undefined;
         about?: string | undefined;
         datatype?: string | undefined;
         inlist?: any;
-        prefix?: string | undefined;
         property?: string | undefined;
         resource?: string | undefined;
         typeof?: string | undefined;
@@ -62,9 +61,11 @@ export default class ContentEditable extends React.Component<Props> {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        inputMode?: "search" | "numeric" | "none" | "text" | "tel" | "url" | "email" | "decimal" | undefined;
+        is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: boolean | "false" | "true" | undefined;
-        'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+        'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
         'aria-busy'?: boolean | "false" | "true" | undefined;
         'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-colcount'?: number | undefined;
@@ -97,7 +98,7 @@ export default class ContentEditable extends React.Component<Props> {
         'aria-posinset'?: number | undefined;
         'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-readonly'?: boolean | "false" | "true" | undefined;
-        'aria-relevant'?: "all" | "text" | "additions" | "additions text" | "removals" | undefined;
+        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
         'aria-required'?: boolean | "false" | "true" | undefined;
         'aria-roledescription'?: string | undefined;
         'aria-rowcount'?: number | undefined;
@@ -110,166 +111,166 @@ export default class ContentEditable extends React.Component<Props> {
         'aria-valuemin'?: number | undefined;
         'aria-valuenow'?: number | undefined;
         'aria-valuetext'?: string | undefined;
-        onCopy?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onCopyCapture?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onCut?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onCutCapture?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onPaste?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onPasteCapture?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionEnd?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionEndCapture?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionStart?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionStartCapture?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionUpdate?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionUpdateCapture?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onFocus?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
-        onFocusCapture?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
-        onBlurCapture?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
-        onChangeCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onBeforeInput?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onBeforeInputCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onInputCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onReset?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onResetCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onSubmit?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onSubmitCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onInvalid?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onInvalidCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onLoad?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onError?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onErrorCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onKeyDownCapture?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
-        onKeyPress?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
-        onKeyPressCapture?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
-        onKeyUpCapture?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
-        onAbort?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onAbortCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onCanPlay?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onCanPlayCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onCanPlayThrough?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onCanPlayThroughCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onDurationChange?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onDurationChangeCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEmptied?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEmptiedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEncrypted?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEncryptedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEnded?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEndedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadedData?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadedDataCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadedMetadata?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadedMetadataCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadStart?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadStartCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPause?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPauseCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPlay?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPlayCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPlaying?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPlayingCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onProgress?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onProgressCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onRateChange?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onRateChangeCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSeeked?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSeekedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSeeking?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSeekingCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onStalled?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onStalledCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSuspend?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSuspendCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onTimeUpdate?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onTimeUpdateCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onVolumeChange?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onVolumeChangeCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onWaiting?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onWaitingCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onAuxClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onAuxClickCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onClickCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onContextMenu?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onContextMenuCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onDoubleClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onDoubleClickCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onDrag?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragEnd?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragEndCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragEnter?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragEnterCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragExit?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragExitCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragLeave?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragLeaveCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragOver?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragOverCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragStart?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragStartCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDrop?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDropCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseDownCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseEnter?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseLeave?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseMove?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseMoveCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseOut?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseOutCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseOver?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseOverCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseUpCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onSelect?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSelectCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onTouchCancel?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchCancelCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchEnd?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchEndCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchMove?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchMoveCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchStart?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchStartCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onPointerDown?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerDownCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerMove?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerMoveCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerUp?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerUpCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerCancel?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerCancelCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerEnter?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerEnterCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerLeave?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerLeaveCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerOver?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerOverCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerOut?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerOutCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onGotPointerCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onGotPointerCaptureCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onLostPointerCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onLostPointerCaptureCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onScroll?: ((event: React.UIEvent<HTMLDivElement>) => void) | undefined;
-        onScrollCapture?: ((event: React.UIEvent<HTMLDivElement>) => void) | undefined;
-        onWheel?: ((event: React.WheelEvent<HTMLDivElement>) => void) | undefined;
-        onWheelCapture?: ((event: React.WheelEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationStart?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationStartCapture?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationEnd?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationEndCapture?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationIteration?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationIterationCapture?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onTransitionEnd?: ((event: React.TransitionEvent<HTMLDivElement>) => void) | undefined;
-        onTransitionEndCapture?: ((event: React.TransitionEvent<HTMLDivElement>) => void) | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
         onChange: (event: ContentEditableEvent) => void;
-    }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    }, string | React.JSXElementConstructor<any>>;
     shouldComponentUpdate(nextProps: Props): boolean;
     componentDidUpdate(): void;
-    emitChange: (originalEvt: React.SyntheticEvent<any, Event>) => void;
+    emitChange: (originalEvt: React.SyntheticEvent<any>) => void;
     static propTypes: {
         html: PropTypes.Validator<string>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/react-contenteditable.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -23,6 +25,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -34,13 +55,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -51,20 +65,10 @@ var PropTypes = __importStar(require("prop-types"));
 function normalizeHtml(str) {
     return str && str.replace(/&nbsp;|\u202F|\u00A0/g, ' ');
 }
-function findLastTextNode(node) {
-    if (node.nodeType === Node.TEXT_NODE)
-        return node;
-    var children = node.childNodes;
-    for (var i = children.length - 1; i >= 0; i--) {
-        var textNode = findLastTextNode(children[i]);
-        if (textNode !== null)
-            return textNode;
-    }
-    return null;
-}
 function replaceCaret(el) {
     // Place the caret at the end of the element
-    var target = findLastTextNode(el);
+    var target = document.createTextNode('');
+    el.appendChild(target);
     // do not move caret if element was not focused
     var isTargetFocused = document.activeElement === el;
     if (target !== null && target.nodeValue !== null && isTargetFocused) {
@@ -112,7 +116,7 @@ var ContentEditable = /** @class */ (function (_super) {
     ContentEditable.prototype.render = function () {
         var _this = this;
         var _a = this.props, tagName = _a.tagName, html = _a.html, innerRef = _a.innerRef, props = __rest(_a, ["tagName", "html", "innerRef"]);
-        return React.createElement(tagName || 'div', __assign({}, props, { ref: typeof innerRef === 'function' ? function (current) {
+        return React.createElement(tagName || 'div', __assign(__assign({}, props), { ref: typeof innerRef === 'function' ? function (current) {
                 innerRef(current);
                 _this.el.current = current;
             } : innerRef || this.el, onInput: this.emitChange, onBlur: this.props.onBlur || this.emitChange, onKeyUp: this.props.onKeyUp || this.emitChange, onKeyDown: this.props.onKeyDown || this.emitChange, contentEditable: !this.props.disabled, dangerouslySetInnerHTML: { __html: html } }), this.props.children);
@@ -134,6 +138,7 @@ var ContentEditable = /** @class */ (function (_super) {
             props.tagName !== nextProps.tagName ||
             props.className !== nextProps.className ||
             props.innerRef !== nextProps.innerRef ||
+            props.placeholder !== nextProps.placeholder ||
             !fast_deep_equal_1.default(props.style, nextProps.style);
     };
     ContentEditable.prototype.componentDidUpdate = function () {
@@ -143,8 +148,9 @@ var ContentEditable = /** @class */ (function (_super) {
         // Perhaps React (whose VDOM gets outdated because we often prevent
         // rerendering) did not update the DOM. So we update it manually now.
         if (this.props.html !== el.innerHTML) {
-            el.innerHTML = this.lastHtml = this.props.html;
+            el.innerHTML = this.props.html;
         }
+        this.lastHtml = this.props.html;
         replaceCaret(el);
     };
     ContentEditable.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-contenteditable",
-  "version": "3.3.2",
+  "version": "3.3.6",
   "description": "React component representing an element with editable contents",
   "main": "./lib/react-contenteditable.js",
   "types": "./lib/react-contenteditable.d.ts",
@@ -8,7 +8,7 @@
     "react": ">=16.3"
   },
   "author": "Ophir LOJKINE (original code posted by Sebastien Lorber on stackoverflow)",
-  "license": " Apache-2.0",
+  "license": "Apache-2.0",
   "keywords": [
     "react-component",
     "contenteditable",
@@ -21,9 +21,9 @@
     "url": "https://github.com/lovasoa/react-contenteditable.git"
   },
   "devDependencies": {
-    "@types/react": "^16.8.23",
-    "react": "^16.8.6",
-    "typescript": "^3.5.3"
+    "@types/react": "^17.0.2",
+    "react": "^17.0.2",
+    "typescript": "^4.3.5"
   },
   "scripts": {
     "compile": "tsc",
@@ -32,6 +32,6 @@
   },
   "dependencies": {
     "prop-types": "^15.7.1",
-    "fast-deep-equal": "^2.0.1"
+    "fast-deep-equal": "^3.1.3"
   }
 }

package/lib/src/react-contenteditable.d.ts

@@ -1,299 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-/**
- * A simple component for an html element with editable contents.
- */
-export default class ContentEditable extends React.Component<Props> {
-    lastHtml: string;
-    el: any;
-    getEl: () => any;
-    render(): React.ReactElement<{
-        ref: any;
-        onInput: (originalEvt: React.SyntheticEvent<any, Event>) => void;
-        onBlur: (event: React.FocusEvent<HTMLDivElement>) => void;
-        onKeyUp: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-        onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-        contentEditable: boolean;
-        dangerouslySetInnerHTML: {
-            __html: string;
-        };
-        disabled?: boolean | undefined;
-        className?: string | undefined;
-        style?: Object | undefined;
-        key?: string | number | undefined;
-        defaultChecked?: boolean | undefined;
-        defaultValue?: string | string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        accessKey?: string | undefined;
-        contextMenu?: string | undefined;
-        dir?: string | undefined;
-        draggable?: boolean | undefined;
-        hidden?: boolean | undefined;
-        id?: string | undefined;
-        lang?: string | undefined;
-        placeholder?: string | undefined;
-        slot?: string | undefined;
-        spellCheck?: boolean | undefined;
-        tabIndex?: number | undefined;
-        title?: string | undefined;
-        inputMode?: string | undefined;
-        is?: string | undefined;
-        radioGroup?: string | undefined;
-        role?: string | undefined;
-        about?: string | undefined;
-        datatype?: string | undefined;
-        inlist?: any;
-        prefix?: string | undefined;
-        property?: string | undefined;
-        resource?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        color?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
-        'aria-activedescendant'?: string | undefined;
-        'aria-atomic'?: boolean | "false" | "true" | undefined;
-        'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
-        'aria-busy'?: boolean | "false" | "true" | undefined;
-        'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
-        'aria-colcount'?: number | undefined;
-        'aria-colindex'?: number | undefined;
-        'aria-colspan'?: number | undefined;
-        'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
-        'aria-describedby'?: string | undefined;
-        'aria-details'?: string | undefined;
-        'aria-disabled'?: boolean | "false" | "true" | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
-        'aria-errormessage'?: string | undefined;
-        'aria-expanded'?: boolean | "false" | "true" | undefined;
-        'aria-flowto'?: string | undefined;
-        'aria-grabbed'?: boolean | "false" | "true" | undefined;
-        'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree" | undefined;
-        'aria-hidden'?: boolean | "false" | "true" | undefined;
-        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-        'aria-keyshortcuts'?: string | undefined;
-        'aria-label'?: string | undefined;
-        'aria-labelledby'?: string | undefined;
-        'aria-level'?: number | undefined;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        'aria-modal'?: boolean | "false" | "true" | undefined;
-        'aria-multiline'?: boolean | "false" | "true" | undefined;
-        'aria-multiselectable'?: boolean | "false" | "true" | undefined;
-        'aria-orientation'?: "horizontal" | "vertical" | undefined;
-        'aria-owns'?: string | undefined;
-        'aria-placeholder'?: string | undefined;
-        'aria-posinset'?: number | undefined;
-        'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
-        'aria-readonly'?: boolean | "false" | "true" | undefined;
-        'aria-relevant'?: "all" | "text" | "additions" | "additions text" | "removals" | undefined;
-        'aria-required'?: boolean | "false" | "true" | undefined;
-        'aria-roledescription'?: string | undefined;
-        'aria-rowcount'?: number | undefined;
-        'aria-rowindex'?: number | undefined;
-        'aria-rowspan'?: number | undefined;
-        'aria-selected'?: boolean | "false" | "true" | undefined;
-        'aria-setsize'?: number | undefined;
-        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
-        'aria-valuemax'?: number | undefined;
-        'aria-valuemin'?: number | undefined;
-        'aria-valuenow'?: number | undefined;
-        'aria-valuetext'?: string | undefined;
-        children?: React.ReactNode;
-        onCopy?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onCopyCapture?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onCut?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onCutCapture?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onPaste?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onPasteCapture?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionEnd?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionEndCapture?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionStart?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionStartCapture?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionUpdate?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onCompositionUpdateCapture?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onFocus?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
-        onFocusCapture?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
-        onBlurCapture?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
-        onChange: ((event: React.FormEvent<HTMLDivElement>) => void) & ((event: RCEvent) => void);
-        onChangeCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onBeforeInput?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onBeforeInputCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onInputCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onReset?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onResetCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onSubmit?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onSubmitCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onInvalid?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onInvalidCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
-        onLoad?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onError?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onErrorCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onKeyDownCapture?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
-        onKeyPress?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
-        onKeyPressCapture?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
-        onKeyUpCapture?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
-        onAbort?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onAbortCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onCanPlay?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onCanPlayCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onCanPlayThrough?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onCanPlayThroughCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onDurationChange?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onDurationChangeCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEmptied?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEmptiedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEncrypted?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEncryptedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEnded?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onEndedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadedData?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadedDataCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadedMetadata?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadedMetadataCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadStart?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onLoadStartCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPause?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPauseCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPlay?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPlayCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPlaying?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onPlayingCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onProgress?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onProgressCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onRateChange?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onRateChangeCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSeeked?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSeekedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSeeking?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSeekingCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onStalled?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onStalledCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSuspend?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSuspendCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onTimeUpdate?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onTimeUpdateCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onVolumeChange?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onVolumeChangeCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onWaiting?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onWaitingCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onAuxClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onAuxClickCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onClickCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onContextMenu?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onContextMenuCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onDoubleClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onDoubleClickCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onDrag?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragEnd?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragEndCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragEnter?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragEnterCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragExit?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragExitCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragLeave?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragLeaveCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragOver?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragOverCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragStart?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDragStartCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDrop?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onDropCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
-        onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseDownCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseEnter?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseLeave?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseMove?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseMoveCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseOut?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseOutCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseOver?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseOverCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onMouseUpCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
-        onSelect?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onSelectCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
-        onTouchCancel?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchCancelCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchEnd?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchEndCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchMove?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchMoveCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchStart?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onTouchStartCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
-        onPointerDown?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerDownCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerMove?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerMoveCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerUp?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerUpCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerCancel?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerCancelCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerEnter?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerEnterCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerLeave?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerLeaveCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerOver?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerOverCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerOut?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onPointerOutCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onGotPointerCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onGotPointerCaptureCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onLostPointerCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onLostPointerCaptureCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onScroll?: ((event: React.UIEvent<HTMLDivElement>) => void) | undefined;
-        onScrollCapture?: ((event: React.UIEvent<HTMLDivElement>) => void) | undefined;
-        onWheel?: ((event: React.WheelEvent<HTMLDivElement>) => void) | undefined;
-        onWheelCapture?: ((event: React.WheelEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationStart?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationStartCapture?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationEnd?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationEndCapture?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationIteration?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onAnimationIterationCapture?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
-        onTransitionEnd?: ((event: React.TransitionEvent<HTMLDivElement>) => void) | undefined;
-        onTransitionEndCapture?: ((event: React.TransitionEvent<HTMLDivElement>) => void) | undefined;
-    }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
-    shouldComponentUpdate(nextProps: Props): boolean;
-    componentDidUpdate(): void;
-    emitChange: (originalEvt: React.SyntheticEvent<any, Event>) => void;
-    static propTypes: {
-        html: PropTypes.Validator<string>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        disabled: PropTypes.Requireable<boolean>;
-        tagName: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-        innerRef: PropTypes.Requireable<object>;
-    };
-}
-declare type RCEvent = React.SyntheticEvent<any, Event> & {
-    target: {
-        value: string;
-    };
-};
-declare type DivProps = JSX.IntrinsicElements["div"] & {
-    onChange: ((event: RCEvent) => void);
-};
-export interface Props extends DivProps {
-    html: string;
-    disabled?: boolean;
-    tagName?: string;
-    className?: string;
-    style?: Object;
-    innerRef?: React.RefObject<HTMLElement> | Function;
-}
-export {};

package/lib/src/react-contenteditable.js

@@ -1,164 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
-var PropTypes = __importStar(require("prop-types"));
-function normalizeHtml(str) {
-    return str && str.replace(/&nbsp;|\u202F|\u00A0/g, ' ');
-}
-function findLastTextNode(node) {
-    if (node.nodeType === Node.TEXT_NODE)
-        return node;
-    var children = node.childNodes;
-    for (var i = children.length - 1; i >= 0; i--) {
-        var textNode = findLastTextNode(children[i]);
-        if (textNode !== null)
-            return textNode;
-    }
-    return null;
-}
-function replaceCaret(el) {
-    // Place the caret at the end of the element
-    var target = findLastTextNode(el);
-    // do not move caret if element was not focused
-    var isTargetFocused = document.activeElement === el;
-    if (target !== null && target.nodeValue !== null && isTargetFocused) {
-        var sel = window.getSelection();
-        if (sel !== null) {
-            var range = document.createRange();
-            range.setStart(target, target.nodeValue.length);
-            range.collapse(true);
-            sel.removeAllRanges();
-            sel.addRange(range);
-        }
-        if (el instanceof HTMLElement)
-            el.focus();
-    }
-}
-/**
- * A simple component for an html element with editable contents.
- */
-var ContentEditable = /** @class */ (function (_super) {
-    __extends(ContentEditable, _super);
-    function ContentEditable() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.lastHtml = _this.props.html;
-        _this.el = typeof _this.props.innerRef === 'function' ? { current: null } : React.createRef();
-        _this.getEl = function () { return (_this.props.innerRef && typeof _this.props.innerRef !== 'function' ? _this.props.innerRef : _this.el).current; };
-        _this.emitChange = function (originalEvt) {
-            var el = _this.getEl();
-            if (!el)
-                return;
-            var html = el.innerHTML;
-            if (_this.props.onChange && html !== _this.lastHtml) {
-                // Clone event with Object.assign to avoid
-                // "Cannot assign to read only property 'target' of object"
-                var evt = Object.assign({}, originalEvt, {
-                    target: {
-                        value: html
-                    }
-                });
-                _this.props.onChange(evt);
-            }
-            _this.lastHtml = html;
-        };
-        return _this;
-    }
-    ContentEditable.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, tagName = _a.tagName, html = _a.html, innerRef = _a.innerRef, props = __rest(_a, ["tagName", "html", "innerRef"]);
-        return React.createElement(tagName || 'div', __assign({}, props, { ref: typeof innerRef === 'function' ? function (current) {
-                innerRef(current);
-                _this.el.current = current;
-            } : innerRef || this.el, onInput: this.emitChange, onBlur: this.props.onBlur || this.emitChange, onKeyUp: this.props.onKeyUp || this.emitChange, onKeyDown: this.props.onKeyDown || this.emitChange, contentEditable: !this.props.disabled, dangerouslySetInnerHTML: { __html: html } }), this.props.children);
-    };
-    ContentEditable.prototype.shouldComponentUpdate = function (nextProps) {
-        var props = this.props;
-        var el = this.getEl();
-        // We need not rerender if the change of props simply reflects the user's edits.
-        // Rerendering in this case would make the cursor/caret jump
-        // Rerender if there is no element yet... (somehow?)
-        if (!el)
-            return true;
-        // ...or if html really changed... (programmatically, not by user edit)
-        if (normalizeHtml(nextProps.html) !== normalizeHtml(el.innerHTML)) {
-            return true;
-        }
-        // Handle additional properties
-        return props.disabled !== nextProps.disabled ||
-            props.tagName !== nextProps.tagName ||
-            props.className !== nextProps.className ||
-            props.innerRef !== nextProps.innerRef ||
-            !fast_deep_equal_1.default(props.style, nextProps.style);
-    };
-    ContentEditable.prototype.componentDidUpdate = function () {
-        var el = this.getEl();
-        if (!el)
-            return;
-        // Perhaps React (whose VDOM gets outdated because we often prevent
-        // rerendering) did not update the DOM. So we update it manually now.
-        if (this.props.html !== el.innerHTML) {
-            el.innerHTML = this.lastHtml = this.props.html;
-        }
-        replaceCaret(el);
-    };
-    ContentEditable.propTypes = {
-        html: PropTypes.string.isRequired,
-        onChange: PropTypes.func,
-        disabled: PropTypes.bool,
-        tagName: PropTypes.string,
-        className: PropTypes.string,
-        style: PropTypes.object,
-        innerRef: PropTypes.oneOfType([
-            PropTypes.object,
-            PropTypes.func,
-        ])
-    };
-    return ContentEditable;
-}(React.Component));
-exports.default = ContentEditable;

package/lib/tests/src/index.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/tests/src/index.js

@@ -1,48 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_dom_1 = __importDefault(require("react-dom"));
-var react_contenteditable_1 = __importDefault(require("react-contenteditable"));
-var EditComponent = /** @class */ (function (_super) {
-    __extends(EditComponent, _super);
-    function EditComponent() {
-        var _this = _super.call(this, { useInnerRef: false }) || this;
-        _this.getHtml = function () { return _this.state.html; };
-        _this.setHtml = function (html) { return _this.setState({ html: html }); };
-        _this.setChangeCallback = function (cb) { return _this.changeCallback = cb.bind(_this); };
-        _this.setProps = function (props) { return _this.setState({ props: props }); };
-        _this.handleChange = function (evt) {
-            _this.history.push(evt);
-            _this.setHtml(evt.target.value);
-            _this.changeCallback(evt);
-        };
-        _this.render = function () {
-            return <react_contenteditable_1.default id="editableDiv" style={{ "height": "300px", "border": "1px dashed" }} html={_this.state.html} onChange={_this.handleChange} innerRef={_this.props.useInnerRef ? _this.el : undefined} {..._this.state.props}/>;
-        };
-        _this.state = { html: "", props: {} };
-        _this.history = [];
-        _this.changeCallback = function (_) { };
-        _this.el = react_1.default.createRef();
-        return _this;
-    }
-    return EditComponent;
-}(react_1.default.Component));
-window["render"] = function (useInnerRef) {
-    window["editComponent"] = react_dom_1.default.render(<EditComponent useInnerRef={useInnerRef}/>, document.getElementById("root"));
-};