@expensify/react-native-live-markdown 0.1.116 → 0.1.117

package/lib/commonjs/MarkdownTextInput.js

@@ -8,9 +8,7 @@ var _reactNative = require("react-native");
 var _react = _interopRequireDefault(require("react"));
 var _MarkdownTextInputDecoratorViewNativeComponent = _interopRequireDefault(require("./MarkdownTextInputDecoratorViewNativeComponent"));
 var _NativeLiveMarkdownModule = _interopRequireDefault(require("./NativeLiveMarkdownModule"));
-var StyleUtils = _interopRequireWildcard(require("./styleUtils"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _styleUtils = require("./styleUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 if (_NativeLiveMarkdownModule.default) {
@@ -31,7 +29,7 @@ function processColorsInMarkdownStyle(input) {
   return output;
 }
 function processMarkdownStyle(input) {
-  return processColorsInMarkdownStyle(StyleUtils.mergeMarkdownStyleWithDefault(input));
+  return processColorsInMarkdownStyle((0, _styleUtils.mergeMarkdownStyleWithDefault)(input));
 }
 const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const IS_FABRIC = ('nativeFabricUIManager' in global);

package/lib/commonjs/MarkdownTextInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_react","_interopRequireDefault","_MarkdownTextInputDecoratorViewNativeComponent","_NativeLiveMarkdownModule","StyleUtils","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","NativeLiveMarkdownModule","install","processColorsInMarkdownStyle","input","output","JSON","parse","stringify","keys","forEach","prop","endsWith","processColor","processMarkdownStyle","mergeMarkdownStyleWithDefault","MarkdownTextInput","React","forwardRef","props","ref","IS_FABRIC","global","markdownStyle","useMemo","createElement","Fragment","TextInput","style","styles","farAway","displayNone","StyleSheet","create","display","position","top","left","_default","exports"],"sourceRoot":"../../src","sources":["MarkdownTextInput.tsx"],"mappings":"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"}
+{"version":3,"names":["_reactNative","require","_react","_interopRequireDefault","_MarkdownTextInputDecoratorViewNativeComponent","_NativeLiveMarkdownModule","_styleUtils","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","NativeLiveMarkdownModule","install","processColorsInMarkdownStyle","input","output","JSON","parse","stringify","keys","forEach","prop","endsWith","processColor","processMarkdownStyle","mergeMarkdownStyleWithDefault","MarkdownTextInput","React","forwardRef","props","ref","IS_FABRIC","global","markdownStyle","useMemo","createElement","Fragment","TextInput","style","styles","farAway","displayNone","StyleSheet","create","display","position","top","left","_default","exports"],"sourceRoot":"../../src","sources":["MarkdownTextInput.tsx"],"mappings":"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"}

package/lib/commonjs/MarkdownTextInput.web.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var ParseUtils = _interopRequireWildcard(require("./web/parserUtils"));
-var CursorUtils = _interopRequireWildcard(require("./web/cursorUtils"));
-var StyleUtils = _interopRequireWildcard(require("./styleUtils"));
-require("./web/MarkdownTextInput.css");
+var _parserUtils = require("./web/utils/parserUtils");
 var _InputHistory = _interopRequireDefault(require("./web/InputHistory"));
+var _cursorUtils = require("./web/utils/cursorUtils");
+require("./web/MarkdownTextInput.css");
+var _inputUtils = require("./web/utils/inputUtils");
+var _webStyleUtils = require("./web/utils/webStyleUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -18,81 +19,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 require('../parser/react-native-live-markdown-parser.js');
 const useClientEffect = typeof window === 'undefined' ? _react.useEffect : _react.useLayoutEffect;
-let createReactDOMStyle;
-try {
-  createReactDOMStyle =
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  require('react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle').default;
-} catch (e) {
-  throw new Error('[react-native-live-markdown] Function `createReactDOMStyle` from react-native-web not found. Please make sure that you are using React Native Web 0.18 or newer.');
-}
-let preprocessStyle;
-try {
-  preprocessStyle =
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  require('react-native-web/dist/exports/StyleSheet/preprocess').default;
-} catch (e) {
-  throw new Error('[react-native-live-markdown] Function `preprocessStyle` from react-native-web not found.');
-}
-let dangerousStyleValue;
-try {
-  dangerousStyleValue =
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  require('react-native-web/dist/modules/setValueForStyles/dangerousStyleValue').default;
-} catch (e) {
-  throw new Error('[react-native-live-markdown] Function `dangerousStyleValue` from react-native-web not found.');
-}
 let focusTimeout = null;
-
-// Removes one '\n' from the end of the string that were added by contentEditable div
-function normalizeValue(value) {
-  return value.replace(/\n$/, '');
-}
-// Adds one '\n' at the end of the string if it's missing
-function denormalizeValue(value) {
-  return value.endsWith('\n') ? `${value}\n` : value;
-}
-
-// If an Input Method Editor is processing key input, the 'keyCode' is 229.
-// https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
-function isEventComposing(nativeEvent) {
-  return nativeEvent.isComposing || nativeEvent.keyCode === 229;
-}
-const ZERO_WIDTH_SPACE = '\u200B';
-function getPlaceholderValue(placeholder) {
-  if (!placeholder) {
-    return ZERO_WIDTH_SPACE;
-  }
-  return placeholder.length ? placeholder : ZERO_WIDTH_SPACE;
-}
-function processUnitsInMarkdownStyle(input) {
-  const output = JSON.parse(JSON.stringify(input));
-  Object.keys(output).forEach(key => {
-    const obj = output[key];
-    Object.keys(obj).forEach(prop => {
-      obj[prop] = dangerousStyleValue(prop, obj[prop], false);
-    });
-  });
-  return output;
-}
-function processMarkdownStyle(input) {
-  return processUnitsInMarkdownStyle(StyleUtils.mergeMarkdownStyleWithDefault(input));
-}
-function getElementHeight(node, styles, numberOfLines) {
-  if (numberOfLines) {
-    const tempElement = document.createElement('div');
-    tempElement.setAttribute('contenteditable', 'true');
-    Object.assign(tempElement.style, styles);
-    tempElement.innerText = Array(numberOfLines).fill('A').join('\n');
-    if (node.parentElement) {
-      node.parentElement.appendChild(tempElement);
-      const height = tempElement.clientHeight;
-      node.parentElement.removeChild(tempElement);
-      return height ? `${height}px` : 'auto';
-    }
-  }
-  return styles.height ? `${styles.height}px` : 'auto';
-}
 const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
   accessibilityLabel,
   accessibilityLabelledBy,
@@ -127,23 +54,23 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
   inputMode
 }, ref) => {
   const compositionRef = (0, _react.useRef)(false);
-  const pasteRef = (0, _react.useRef)(false);
   const divRef = (0, _react.useRef)(null);
   const currentlyFocusedField = (0, _react.useRef)(null);
   const contentSelection = (0, _react.useRef)(null);
   const className = `react-native-live-markdown-input-${multiline ? 'multiline' : 'singleline'}`;
   const history = (0, _react.useRef)();
-  const dimensions = _react.default.useRef(null);
+  const dimensions = (0, _react.useRef)(null);
+  const pasteContent = (0, _react.useRef)(null);
   if (!history.current) {
     history.current = new _InputHistory.default(100, 150, value || '');
   }
   const flattenedStyle = (0, _react.useMemo)(() => _reactNative.StyleSheet.flatten(style), [style]);
 
   // Empty placeholder would collapse the div, so we need to use zero-width space to prevent it
-  const heightSafePlaceholder = (0, _react.useMemo)(() => getPlaceholderValue(placeholder), [placeholder]);
+  const heightSafePlaceholder = (0, _react.useMemo)(() => (0, _inputUtils.getPlaceholderValue)(placeholder), [placeholder]);
   const setEventProps = (0, _react.useCallback)(e => {
     if (divRef.current) {
-      const text = normalizeValue(divRef.current.innerText || '');
+      const text = divRef.current.value;
       if (e.target) {
         // TODO: change the logic here so every event have value property
         e.target.value = text;
@@ -154,30 +81,36 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
     }
     return e;
   }, []);
-  const parseText = (0, _react.useCallback)((target, text, customMarkdownStyles, cursorPosition = null, shouldAddToHistory = true) => {
+  const parseText = (0, _react.useCallback)((target, text, customMarkdownStyles, cursorPosition = null, shouldAddToHistory = true, shouldForceDOMUpdate = false) => {
+    if (!divRef.current) {
+      return {
+        text: text || '',
+        cursorPosition: null
+      };
+    }
     if (text === null) {
       return {
-        text: target.innerText,
+        text: divRef.current.value,
         cursorPosition: null
       };
     }
-    const parsedText = ParseUtils.parseText(target, text, cursorPosition, customMarkdownStyles, !multiline);
+    const parsedText = (0, _parserUtils.updateInputStructure)(target, text, cursorPosition, customMarkdownStyles, !multiline, shouldForceDOMUpdate);
+    divRef.current.value = parsedText.text;
     if (history.current && shouldAddToHistory) {
-      // We need to normalize the value before saving it to the history to prevent situations when additional new lines break the cursor position calculation logic
-      history.current.throttledAdd(normalizeValue(parsedText.text), parsedText.cursorPosition);
+      history.current.throttledAdd(parsedText.text, parsedText.cursorPosition);
     }
     return parsedText;
   }, [multiline]);
   const processedMarkdownStyle = (0, _react.useMemo)(() => {
-    const newMarkdownStyle = processMarkdownStyle(markdownStyle);
+    const newMarkdownStyle = (0, _webStyleUtils.processMarkdownStyle)(markdownStyle);
     if (divRef.current) {
-      parseText(divRef.current, divRef.current.innerText, newMarkdownStyle, null, false);
+      parseText(divRef.current, divRef.current.value, newMarkdownStyle, null, false);
     }
     return newMarkdownStyle;
   }, [markdownStyle, parseText]);
   const inputStyles = (0, _react.useMemo)(() => _reactNative.StyleSheet.flatten([styles.defaultInputStyles, flattenedStyle && {
     caretColor: flattenedStyle.color || 'black'
-  }, disabled && styles.disabledInputStyles, createReactDOMStyle(preprocessStyle(flattenedStyle))]), [flattenedStyle, disabled]);
+  }, disabled && styles.disabledInputStyles, (0, _webStyleUtils.parseToReactDOMStyle)(flattenedStyle)]), [flattenedStyle, disabled]);
   const undo = (0, _react.useCallback)(target => {
     if (!history.current) {
       return {
@@ -186,7 +119,7 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
       };
     }
     const item = history.current.undo();
-    const undoValue = item ? denormalizeValue(item.text) : null;
+    const undoValue = item ? item.text : null;
     return parseText(target, undoValue, processedMarkdownStyle, item ? item.cursorPosition : null, false);
   }, [parseText, processedMarkdownStyle]);
   const redo = (0, _react.useCallback)(target => {
@@ -197,18 +130,10 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
       };
     }
     const item = history.current.redo();
-    const redoValue = item ? denormalizeValue(item.text) : null;
+    const redoValue = item ? item.text : null;
     return parseText(target, redoValue, processedMarkdownStyle, item ? item.cursorPosition : null, false);
   }, [parseText, processedMarkdownStyle]);
 
-  // We have to process value property since contentEditable div adds one additional '\n' at the end of the text if we are entering new line
-  const processedValue = (0, _react.useMemo)(() => {
-    if (value && value[value.length - 1] === '\n') {
-      return `${value}\n`;
-    }
-    return value;
-  }, [value]);
-
   // Placeholder text color logic
   const updateTextColor = (0, _react.useCallback)((node, text) => {
     // eslint-disable-next-line no-param-reassign -- we need to change the style of the node, so we need to modify it
@@ -235,7 +160,7 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
     if (!divRef.current) {
       return;
     }
-    const newSelection = predefinedSelection || CursorUtils.getCurrentCursorPosition(divRef.current);
+    const newSelection = predefinedSelection || (0, _cursorUtils.getCurrentCursorPosition)(divRef.current);
     if (newSelection && (!contentSelection.current || contentSelection.current.start !== newSelection.start || contentSelection.current.end !== newSelection.end)) {
       updateRefSelectionVariables(newSelection);
       contentSelection.current = newSelection;
@@ -266,22 +191,29 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [multiline, onContentSizeChange]);
   const handleOnChangeText = (0, _react.useCallback)(e => {
-    if (!divRef.current || !(e.target instanceof HTMLElement)) {
+    if (!divRef.current || !(e.target instanceof HTMLElement) || !contentSelection.current) {
       return;
     }
+    const nativeEvent = e.nativeEvent;
+    const inputType = nativeEvent.inputType;
+    updateTextColor(divRef.current, e.target.textContent ?? '');
+    const previousText = divRef.current.value;
+    const parsedText = (0, _inputUtils.normalizeValue)(inputType === 'pasteText' ? pasteContent.current || '' : (0, _inputUtils.parseInnerHTMLToText)(e.target));
+    if (pasteContent.current) {
+      pasteContent.current = null;
+    }
     const prevSelection = contentSelection.current ?? {
       start: 0,
       end: 0
     };
-    const prevTextLength = CursorUtils.getPrevTextLength() ?? 0;
-    const changedText = e.target.innerText;
+    const newCursorPosition = Math.max(Math.max(contentSelection.current.end, 0) + (parsedText.length - previousText.length), 0);
     if (compositionRef.current) {
-      updateTextColor(divRef.current, changedText);
+      divRef.current.value = parsedText;
+      compositionRef.current = false;
+      contentSelection.current.end = newCursorPosition;
       return;
     }
     let newInputUpdate;
-    const nativeEvent = e.nativeEvent;
-    const inputType = nativeEvent.inputType;
     switch (inputType) {
       case 'historyUndo':
         newInputUpdate = undo(divRef.current);
@@ -289,33 +221,24 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
       case 'historyRedo':
         newInputUpdate = redo(divRef.current);
         break;
-      case 'insertFromPaste':
-        // if there is no newline at the end of the copied text, contentEditable adds invisible <br> tag at the end of the text, so we need to normalize it
-        if (changedText.length > 2 && changedText[changedText.length - 2] !== '\n' && changedText[changedText.length - 1] === '\n') {
-          newInputUpdate = parseText(divRef.current, normalizeValue(changedText), processedMarkdownStyle);
-          break;
-        }
-        newInputUpdate = parseText(divRef.current, changedText, processedMarkdownStyle);
-        break;
       default:
-        newInputUpdate = parseText(divRef.current, changedText, processedMarkdownStyle);
+        newInputUpdate = parseText(divRef.current, parsedText, processedMarkdownStyle, newCursorPosition, true, !inputType);
     }
     const {
       text,
       cursorPosition
     } = newInputUpdate;
-    const normalizedText = normalizeValue(text);
-    if (pasteRef !== null && pasteRef !== void 0 && pasteRef.current) {
-      pasteRef.current = false;
-      updateSelection(e);
-    }
     updateTextColor(divRef.current, text);
+    updateSelection(e, {
+      start: cursorPosition ?? 0,
+      end: cursorPosition ?? 0
+    });
     if (onChange) {
       const event = e;
       setEventProps(event);
 
       // The new text is between the prev start selection and the new end selection, can be empty
-      const addedText = normalizedText.slice(prevSelection.start, cursorPosition ?? 0);
+      const addedText = text.slice(prevSelection.start, cursorPosition ?? 0);
       // The length of the text that replaced the before text
       const count = addedText.length;
       // The start index of the replacement operation
@@ -325,7 +248,7 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
       let before = prevSelectionRange;
       if (prevSelectionRange === 0 && (inputType === 'deleteContentBackward' || inputType === 'deleteContentForward')) {
         // its possible the user pressed a delete key without a selection range, so we need to adjust the before value to have the length of the deleted text
-        before = prevTextLength - normalizedText.length;
+        before = previousText.length - text.length;
       }
       if (inputType === 'deleteContentBackward') {
         // When the user does a backspace delete he expects the content before the cursor to be removed.
@@ -340,17 +263,31 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
       onChange(event);
     }
     if (onChangeText) {
-      onChangeText(normalizedText);
+      onChangeText(text);
     }
     handleContentSizeChange();
-  }, [updateTextColor, handleContentSizeChange, onChange, onChangeText, undo, redo, parseText, processedMarkdownStyle, updateSelection, setEventProps]);
+  }, [updateTextColor, updateSelection, onChange, onChangeText, handleContentSizeChange, undo, redo, parseText, processedMarkdownStyle, setEventProps]);
+  const insertText = (0, _react.useCallback)((e, text) => {
+    if (!contentSelection.current || !divRef.current) {
+      return;
+    }
+    const previousText = divRef.current.value;
+    const newText = `${divRef.current.value.substring(0, contentSelection.current.start)}${text}${divRef.current.value.substring(contentSelection.current.end)}`;
+    if (previousText === newText) {
+      document.execCommand('delete');
+    }
+    pasteContent.current = newText;
+    e.nativeEvent.inputType = 'pasteText';
+    handleOnChangeText(e);
+    updateSelection(e);
+  }, [handleOnChangeText, updateSelection]);
   const handleKeyPress = (0, _react.useCallback)(e => {
     if (!divRef.current) {
       return;
     }
     const hostNode = e.target;
     e.stopPropagation();
-    if (e.key === 'z' && e.metaKey) {
+    if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
       e.preventDefault();
       const nativeEvent = e.nativeEvent;
       if (e.shiftKey) {
@@ -364,7 +301,7 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
     const blurOnSubmitDefault = !multiline;
     const shouldBlurOnSubmit = blurOnSubmit === null ? blurOnSubmitDefault : blurOnSubmit;
     const nativeEvent = e.nativeEvent;
-    const isComposing = isEventComposing(nativeEvent);
+    const isComposing = (0, _inputUtils.isEventComposing)(nativeEvent);
     const event = e;
     setEventProps(event);
     if (onKeyPress) {
@@ -381,14 +318,13 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
       } else if (multiline) {
         //   We need to change normal behavior of "Enter" key to insert a line breaks, to prevent wrapping contentEditable text in <div> tags.
         //  Thanks to that in every situation we have proper amount of new lines in our parsed text. Without it pressing enter in empty lines will add 2 more new lines.
-        document.execCommand('insertLineBreak');
-        CursorUtils.scrollCursorIntoView(divRef.current);
+        insertText(e, '\n');
       }
       if (!e.shiftKey && (shouldBlurOnSubmit && hostNode !== null || !multiline)) {
         setTimeout(() => divRef.current && divRef.current.blur(), 0);
       }
     }
-  }, [multiline, blurOnSubmit, setEventProps, onKeyPress, updateSelection, handleOnChangeText, onSubmitEditing]);
+  }, [multiline, blurOnSubmit, setEventProps, onKeyPress, updateSelection, handleOnChangeText, onSubmitEditing, insertText]);
   const handleFocus = (0, _react.useCallback)(event => {
     const e = event;
     const hostNode = e.target;
@@ -396,10 +332,10 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
     setEventProps(e);
     if (divRef.current) {
       if (contentSelection.current) {
-        CursorUtils.setCursorPosition(divRef.current, contentSelection.current.start, contentSelection.current.end);
+        (0, _cursorUtils.setCursorPosition)(divRef.current, contentSelection.current.start, contentSelection.current.end);
       } else {
-        const valueLength = value ? value.length : divRef.current.innerText.length;
-        CursorUtils.setCursorPosition(divRef.current, valueLength, null);
+        const valueLength = value ? value.length : divRef.current.value.length;
+        (0, _cursorUtils.setCursorPosition)(divRef.current, valueLength, null);
       }
       updateSelection(event, contentSelection.current);
     }
@@ -409,7 +345,7 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
     }
     if (hostNode !== null) {
       if (clearTextOnFocus && divRef.current) {
-        divRef.current.innerText = '';
+        divRef.current.textContent = '';
       }
       if (selectTextOnFocus) {
         // Safari requires selection to occur in a setTimeout
@@ -427,7 +363,7 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
   }, [clearTextOnFocus, onFocus, selectTextOnFocus, setEventProps, updateSelection, value]);
   const handleBlur = (0, _react.useCallback)(event => {
     const e = event;
-    CursorUtils.removeSelection();
+    (0, _cursorUtils.removeSelection)();
     currentlyFocusedField.current = null;
     if (onBlur) {
       setEventProps(e);
@@ -439,19 +375,36 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
     if (!onClick || !divRef.current) {
       return;
     }
-    e.target.value = normalizeValue(divRef.current.innerText || '');
+    e.target.value = divRef.current.value;
     onClick(e);
   }, [onClick, updateSelection]);
+  const handleCopy = (0, _react.useCallback)(e => {
+    var _divRef$current;
+    if (!divRef.current || !contentSelection.current) {
+      return;
+    }
+    e.preventDefault();
+    const text = (_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.value.substring(contentSelection.current.start, contentSelection.current.end);
+    e.clipboardData.setData('text/plain', text ?? '');
+  }, []);
+  const handleCut = (0, _react.useCallback)(e => {
+    if (!divRef.current || !contentSelection.current) {
+      return;
+    }
+    handleCopy(e);
+    if (contentSelection.current.start !== contentSelection.current.end) {
+      document.execCommand('delete');
+    }
+  }, [handleCopy]);
   const handlePaste = (0, _react.useCallback)(e => {
-    pasteRef.current = true;
-    if (e.isDefaultPrevented()) {
+    if (e.isDefaultPrevented() || !divRef.current || !contentSelection.current) {
       return;
     }
     e.preventDefault();
     const clipboardData = e.clipboardData;
     const text = clipboardData.getData('text/plain');
-    document.execCommand('insertText', false, text);
-  }, []);
+    insertText(e, text);
+  }, [insertText]);
   const startComposition = (0, _react.useCallback)(() => {
     compositionRef.current = true;
   }, []);
@@ -464,12 +417,12 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
     if (r) {
       r.isFocused = () => document.activeElement === r;
       r.clear = () => {
-        r.innerText = '';
+        r.textContent = '';
         updateTextColor(r, '');
       };
       if (value === '' || value === undefined) {
         // update to placeholder color when value is empty
-        updateTextColor(r, r.innerText);
+        updateTextColor(r, r.textContent ?? '');
       }
     }
     if (ref) {
@@ -483,22 +436,23 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
     divRef.current = r;
   };
   useClientEffect(function parseAndStyleValue() {
-    if (!divRef.current || processedValue === divRef.current.innerText) {
+    if (!divRef.current || value === divRef.current.value) {
       return;
     }
     if (value === undefined) {
-      parseText(divRef.current, divRef.current.innerText, processedMarkdownStyle);
+      parseText(divRef.current, divRef.current.value, processedMarkdownStyle);
       return;
     }
-    const text = processedValue !== undefined ? processedValue : '';
-    parseText(divRef.current, text, processedMarkdownStyle, text.length);
+    const normalizedValue = (0, _inputUtils.normalizeValue)(value);
+    divRef.current.value = normalizedValue;
+    parseText(divRef.current, normalizedValue, processedMarkdownStyle);
     updateTextColor(divRef.current, value);
-  }, [multiline, processedMarkdownStyle, processedValue]);
+  }, [multiline, processedMarkdownStyle, value]);
   useClientEffect(function adjustHeight() {
     if (!divRef.current || !multiline) {
       return;
     }
-    const elementHeight = getElementHeight(divRef.current, inputStyles, numberOfLines);
+    const elementHeight = (0, _inputUtils.getElementHeight)(divRef.current, inputStyles, numberOfLines);
     divRef.current.style.height = elementHeight;
     divRef.current.style.maxHeight = elementHeight;
   }, [numberOfLines]);
@@ -526,7 +480,7 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
     };
     contentSelection.current = newSelection;
     updateRefSelectionVariables(newSelection);
-    CursorUtils.setCursorPosition(divRef.current, newSelection.start, newSelection.end);
+    (0, _cursorUtils.setCursorPosition)(divRef.current, newSelection.start, newSelection.end);
   }, [selection, updateRefSelectionVariables]);
   return (
     /*#__PURE__*/
@@ -552,6 +506,8 @@ const MarkdownTextInput = /*#__PURE__*/_react.default.forwardRef(({
       onClick: handleClick,
       onFocus: handleFocus,
       onBlur: handleBlur,
+      onCopy: handleCopy,
+      onCut: handleCut,
       onPaste: handlePaste,
       placeholder: heightSafePlaceholder,
       spellCheck: spellCheck,