@sikka/hawa 0.0.236 → 0.0.238

package/src/elements/FloatingComment.tsx

@@ -27,11 +27,19 @@ const stylers = {
   strike: { id: "strike", css: "line-through", content: "S" },
 }
 
-// FIXME: Highlighting a part of styled text with a bit on the left with an overall length not equal to clipboard copied text will result in paste issues
+// FIXME: ? Highlighting a part of styled text with a bit on the left with an overall length not equal to clipboard copied text will result in paste issues
 
 // FIXME: Highlighting the beginning characters of styled text and then pasting text sometimes doesn't register as right intersecting
 // This expecially happens when the selection is for example, [0, 2] and the styling is [0, 3], this might be failure of addition which doesn't offset the styling
 
+// TODO: Refactor styling splicing into one method
+// TODO: Refactor function that simplifies a list of stylings
+// TODO: Turn stylings into a class, this should also change .finish to .end
+
+// Possible logic changes:
+// Paste = Removal + Addition -> Styling Removal + Styling Addition
+// Drag & Drop = Removal + Addition -> Styling Removal + Styling Addition
+
 export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
   props
 ) => {
@@ -39,8 +47,11 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     content: "",
     stylings: [], // A styling is an object with 2 indices specifying a substring of text, and the applied effect
     revert: [0, 0],
-    lastCopy: [],
-    pasted: { status: false, length: 0 },
+    clipboard: [],
+    events: {
+      paste: { is: false, length: null },
+      drop: { is: false, text: null, drag: null },
+    },
   })
 
   const field = useRef(null)
@@ -55,41 +66,57 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     return i
   }
 
-  // Full reversion achieved !
-  const getFieldSelection = () => {
-    if (document.activeElement != field.current) return [0, 0]
-
+  const getSelectionPrecedingSum = (name) => {
     let selection = window.getSelection()
     let nodes = Array.from(field.current.childNodes)
 
+    // All current occurences for text or br:
+    // Pasting on empty text (text)
+    // Cutting/removing all text (br)
+    // Typing the first character in empty text (text)
+    // Dragging text to the end of the text (text)
+
     nodes = nodes.filter(
       (item: any) => !["#text", "BR"].includes(item.nodeName)
     )
 
-    let startParent: any = selection.anchorNode.parentNode
+    let parent: any = selection[name].parentNode
+    let special = 0
+
+    // Special case for empty text
+    // if (parent == field.current) {
+    //   console.log("hi")
+    // }
 
-    let startNodeIndex =
-      startParent == field.current
-        ? nodes.length
-        : // : parseInt(startParent.dataset.childIndex)
-          getChildIndex(startParent)
+    // Special case for dropping text near or inside styled text
+    if (!Array.from(parent.parentNode.classList).includes("selection-ignore")) {
+      parent = parent.parentNode
+
+      let index = getChildIndex(selection[name].parentNode)
+      special = Array.from(parent.childNodes)
+        .slice(0, index)
+        .map((e: any) => e.textContent.length)
+        .reduce((a, b) => a + b, 0)
+    }
+
+    let index = parent == field.current ? nodes.length : getChildIndex(parent)
+
+    let sum =
+      nodes
+        .slice(0, index)
+        .map((span: any) => span.textContent.length)
+        .reduce((a, b) => a + b, 0) + special
+
+    return sum
+  }
 
-    let startPrecedingSum = nodes
-      .slice(0, startNodeIndex)
-      .map((span: any) => span.textContent.length)
-      .reduce((a, b) => a + b, 0)
+  const getFieldSelection = () => {
+    if (document.activeElement != field.current) return [0, 0]
 
-    let endParent: any = selection.focusNode.parentNode
-    let endNodeIndex =
-      endParent == field.current
-        ? nodes.length
-        : // : parseInt(endParent.dataset.childIndex)
-          getChildIndex(endParent)
+    let selection = window.getSelection()
 
-    let endPrecedingSum = nodes
-      .slice(0, endNodeIndex)
-      .map((span: any) => span.textContent.length)
-      .reduce((a, b) => a + b, 0)
+    let startPrecedingSum = getSelectionPrecedingSum("anchorNode")
+    let endPrecedingSum = getSelectionPrecedingSum("focusNode")
 
     let result = [
       startPrecedingSum + selection.anchorOffset,
@@ -301,36 +328,6 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     })
   }
 
-  const getRangeIntersectStylings = (start, end, startOffset, finishOffset) => {
-    // Get all stylings intersecting
-    let stylings = []
-    for (let i = start; i < end; i++) {
-      stylings.push(getIntersectStylings(i, startOffset, finishOffset))
-    }
-
-    // Remove duplicates
-    stylings = stylings.flat().filter((item) => item)
-    stylings = stylings.filter(
-      (item, index) =>
-        stylings.findIndex(
-          (_item) =>
-            _item.start == item.start &&
-            _item.finish == item.finish &&
-            _item.type == item.type
-        ) == index
-    )
-
-    return stylings
-  }
-
-  const compareStylings = (styling1, styling2) => {
-    return (
-      styling1.type == styling2.type &&
-      styling1.start == styling2.start &&
-      styling1.finish == styling2.finish
-    )
-  }
-
   // Get stylings encompassing an index within it's range
   const getIntersectStylings = (index, startOffset = 0, finishOffset = 0) => {
     // Find all stylings with encompassing range
@@ -342,437 +339,306 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     return matches
   }
 
-  // Get stylings after an index
-  const getSucceedStylings = (index) => {
-    // Find all stylings after the index
-    let matches = text.stylings.filter(({ start, finish }) => start >= index)
-
-    return matches
-  }
-
-  const getStylingIndex = (styling) => {
-    return text.stylings.findIndex(
-      (item) =>
-        item.start == styling.start &&
-        item.finish == styling.finish &&
-        item.type == styling.type
-    )
-  }
-
-  const handleScenario = (stylings, predicate) => {
-    let matches = stylings.filter(({ start: _start, finish: _finish }) =>
-      predicate(_start, _finish)
+  const getStylingsInRange = (stylings, startIndex, endIndex) => {
+    // Get all intersecting stylings within range
+    let result = stylings.filter(
+      ({ start, finish }) =>
+        (finish > startIndex && start < endIndex) ||
+        (start < endIndex && finish > startIndex)
     )
 
-    let indices = []
-
-    stylings.map((styling, index) => {
-      let result = matches.find((item) => compareStylings(styling, item))
-      if (!result) return
-      indices.push({
-        index: index,
-        type: styling.type,
-        start: styling.start,
-        finish: styling.finish,
-      })
+    // Clamp start and end values, and offset by start index to reach the relative minimum
+    result = result.map((styling) => {
+      return {
+        ...styling,
+        start: getMaximum([styling.start, startIndex]) - startIndex,
+        finish: getMinimum([styling.finish, endIndex]) - startIndex,
+      }
     })
 
-    return indices
+    return result
   }
 
-  const handleDeletion = (length, start, end) => {
-    let stylings = _text.current.stylings.slice()
-    let changes = []
-
-    // TODO: Refactor
-
-    // Offset all succeeding stylings by length
-    // changes.push(
-    //   handleScenario(
-    //     stylings,
-    //     (_start, _finish) => start < _start && end <= start
-    //   ).map((styling) => {
-    //     return {
-    //       ...styling,
-    //       start: styling.start - length,
-    //       finish: styling.finish - length,
-    //     }
-    //   })
-    // )
-
-    let succeeding = stylings.filter(
-      ({ start: _start }) => start < _start && end <= _start
-    )
-    stylings.map((styling, index) => {
-      let result = succeeding.find((item) => compareStylings(styling, item))
-      if (!result) return
-
-      changes.push({
-        index: index,
-        start: styling.start - length,
-        finish: styling.finish - length,
-      })
-    })
-
-    // Handle complete encapsulation over styling
-    let encapsulating = stylings.filter(
-      ({ start: _start, finish: _finish }) => start <= _start && end >= _finish
-    )
-    stylings.map((styling, index) => {
-      let result = encapsulating.find((item) => compareStylings(styling, item))
-      if (!result) return
-
-      // This will effectively remove the styling, since collapsed ranges are automatically removed
-      changes.push({
-        index: index,
-        start: styling.start,
-        finish: styling.start,
-      })
-    })
+  const splitStyling = (styling, index, offset = 0) => {
+    // Get first split
+    let first = {
+      ...styling,
+      start: styling.start,
+      finish: index,
+    }
 
-    // Handle deletion being encapsulated by styling
-    let encapsulated = stylings.filter(
-      ({ start: _start, finish: _finish }) =>
-        (start > _start && end <= _finish) || (start >= _start && end < _finish)
-    )
-    stylings.map((styling, index) => {
-      let result = encapsulated.find((item) => compareStylings(styling, item))
-      if (!result) return
-
-      changes.push({
-        index: index,
-        start: styling.start,
-        finish: styling.finish - length,
-      })
-    })
+    // Get second split
+    let second = {
+      ...styling,
+      start: index + offset,
+      finish: styling.finish + offset,
+    }
 
-    // Handle deletion being encapsulated by styling with left resumption
-    let leftResumption = stylings.filter(
-      ({ start: _start, finish: _finish }) =>
-        end < _finish && end > _start && start < _start
-    )
-    stylings.map((styling, index) => {
-      let result = leftResumption.find((item) => compareStylings(styling, item))
-      if (!result) return
-
-      changes.push({
-        index: index,
-        start: getMaximum([end, styling.start]) - length,
-        finish: styling.finish - length,
-      })
-    })
+    return [first, second]
+  }
 
-    let rightResumption = stylings.filter(
-      ({ start: _start, finish: _finish }) =>
-        start > _start && start < _finish && end > _finish
-    )
-    stylings.map((styling, index) => {
-      let result = rightResumption.find((item) =>
-        compareStylings(styling, item)
-      )
-      if (!result) return
+  const additionTo = (stylings, startIndex, length, defaultBehavior = true) => {
+    // console.log(`Adding text of length ${length} at index ${startIndex}`)
 
-      changes.push({
-        index: index,
-        start: styling.start,
-        finish: getMinimum([start, styling.finish]),
-      })
-    })
+    // Required operations:
+    // Offset succeeding stylings
+    // Split intersecting stylings
+    // Styling continuation at end (only for normal addition)
 
-    // Apply changes
-    changes.map(({ index, start, finish }) => {
-      stylings[index] = {
-        ...stylings[index],
-        start: start,
-        finish: finish,
+    stylings = stylings.map((styling) => {
+      // A succeeding styling
+      if (styling.start >= startIndex && styling.finish > startIndex) {
+        console.log("succeeding")
+        return {
+          ...styling,
+          start: styling.start + length,
+          finish: styling.finish + length,
+        }
       }
-    })
-
-    // Handle complete encapsulation by styling
-    // stylings = stylings.map((styling) => {
-    //   if (start >= styling.start && end <= styling.finish) {
-    //     console.log("hi")
-    //   }
-
-    //   return styling
-    // })
 
-    // If deletion is surrounded by styling, decrease finish by length (this might not include first character, but try first)
-    // If deletion is intersecting with a styling behind it, get maximum between deletion finish and styling start, and set the start to it, then offset styling by length
-    // If deletion is intersecting wit ha styling after it, get minimum between deletion start and styling finish, and set the finish to it
+      // An intersecting styling
+      if (styling.start < startIndex && styling.finish > startIndex) {
+        // Normal addition (non-drop & non-paste), adds to the length of the styling
+        if (defaultBehavior) {
+          return {
+            ...styling,
+            finish: styling.finish + length,
+          }
+        } else {
+          // Special addition (drop & paste), splits the styling and offsets the second half by length of addition
+          return splitStyling(styling, startIndex, length)
+        }
+      }
 
-    // console.log(succeeding)
+      // A connected styling at the end
+      if (styling.finish == startIndex) {
+        // Normal addition (non-drop & non-paste), continues the styling by addition length
+        if (defaultBehavior) {
+          return {
+            ...styling,
+            finish: styling.finish + length,
+          }
+        }
+      }
 
-    // If the start and finish of any styling is greater than the new length, remove it
+      return styling
+    })
 
-    return stylings
+    return stylings.flat()
   }
 
-  const handleAddition = (length, start, end) => {
-    start -= length + 1
-    end -= length + 1
+  const deletionOf = (stylings, startIndex, endIndex) => {
+    // console.log(`Removing text from ${startIndex} to ${endIndex}`)
 
-    let stylings = _text.current.stylings.slice()
+    let length = Math.abs(endIndex - startIndex)
 
-    let changes = []
+    // Required operations:
+    // Offset succeeding stylings
+    // Remove stylings completely within range
+    // Shrink stylings surrounding range
+    // Clamp left resumptions and offset
+    // Clamp right resumptions
 
-    let succeeding = handleScenario(
-      stylings,
-      (_start, _finish) => _start > start && _start + 1 >= end
-    ).map((styling) => {
-      return {
-        ...styling,
-        start: styling.start + length,
-        finish: styling.finish + length,
+    stylings = stylings.map((styling) => {
+      // A succeeding styling, but not a right resumption
+      if (
+        styling.start >= startIndex &&
+        styling.start >= endIndex &&
+        styling.finish >= startIndex &&
+        styling.finish >= endIndex
+      ) {
+        return {
+          ...styling,
+          start: styling.start - length,
+          finish: styling.finish - length,
+        }
       }
-    })
-    changes.push(succeeding)
 
-    console.log(`Addition (${length})`)
-    console.log([start, end])
-    if (stylings.length > 0) {
-      console.log([stylings[0].start, stylings[0].finish])
-    }
+      // A styling completely within deletion range
+      if (styling.start >= startIndex && styling.finish <= endIndex) {
+        return null
+      }
 
-    // console.log(succeeding)
+      // A styling surrounding deletion range
+      if (styling.start <= startIndex && styling.finish >= endIndex) {
+        return {
+          ...styling,
+          finish: styling.finish - length,
+        }
+      }
 
-    let preceding = handleScenario(
-      stylings,
-      // (_start, _finish) => start < _finish && start >= _start + 2 && length == 1 // This is to not style pasted text
-      (_start, _finish) => start + 1 == _finish && length == 1 // This is to not style pasted text
-    ).map((styling) => {
-      return {
-        ...styling,
-        start: styling.start,
-        finish: styling.finish + length,
+      // A styling not fully within deletion range, while the range exceeds to the left
+      if (styling.start > startIndex && styling.start < endIndex) {
+        return {
+          ...styling,
+          start: getMaximum([styling.start, endIndex]) - length,
+          finish: styling.finish - length,
+        }
       }
-    })
-    changes.push(preceding)
 
-    let encapsulated = handleScenario(
-      stylings,
-      (_start, _finish) => start >= _start && end + 1 < _finish
-    ).map((styling) => {
-      return {
-        ...styling,
-        finish: styling.finish + length,
+      // A styling not full within deletion range, while the range exceeds to the right
+      if (styling.finish > startIndex && styling.finish < endIndex) {
+        return {
+          ...styling,
+          finish: getMinimum([styling.finish, startIndex]),
+        }
       }
+
+      return styling
     })
 
-    changes.push(encapsulated)
+    return stylings.flat().filter((styling) => styling)
+  }
 
-    console.log(length)
+  const processNormal = (
+    stylings,
+    difference,
+    selectionStart,
+    selectionEnd
+  ) => {
+    if (difference == 0) return stylings
+
+    if (difference > 0) {
+      stylings = additionTo(stylings, selectionStart - difference, difference)
+    } else {
+      stylings = deletionOf(
+        stylings,
+        selectionStart,
+        selectionEnd + Math.abs(difference)
+      )
+    }
 
-    console.log(`Encapsulated: ${encapsulated.length}`)
+    return stylings
+  }
 
-    console.log(`Succeeding: ${succeeding.length}`)
-    console.log(`Preceding: ${preceding.length}`)
-    // console.log(preceding)
+  const processPaste = (stylings, difference, selectionStart, selectionEnd) => {
+    let pasteLength = _text.current.events.paste.length
 
-    changes.flat().map(({ index, start, finish }) => {
-      stylings[index] = {
-        ...stylings[index],
-        start: start,
-        finish: finish,
-      }
-    })
+    // Get addition start index
+    let additionStart = selectionStart - pasteLength
+
+    // Get removal range
+    let removalStart = additionStart
+    let removalEnd = additionStart + pasteLength - difference
+
+    // Compute deletion
+    stylings = deletionOf(stylings, removalStart, removalEnd)
+
+    // Compute addition
+    stylings = additionTo(stylings, additionStart, pasteLength, false)
+
+    // Add rich copied stylings offset by paste start index
+    stylings = stylings.concat(
+      _text.current.clipboard.map((styling) => {
+        return {
+          ...styling,
+          start: styling.start + additionStart,
+          finish: styling.finish + additionStart,
+        }
+      })
+    )
 
     return stylings
   }
 
-  const handlePaste = (stylings, difference, start, end) => {
-    console.log(`Paste:`)
-    console.log([start, end])
-    console.log(stylings)
-    let changes = []
+  const processDrop = (stylings, difference, dropStart, dropEnd) => {
+    let dropLength = _text.current.events.drop.text.length
 
-    // Get stylings being encapsulated by pasting range
+    let [dragStart, dragEnd] = _text.current.events.drop.drag
 
-    let encapsulating = handleScenario(
-      stylings,
-      (_start, _end) => start <= _start && end >= _end // This is needed because of conflict with addition/deletion
-    ).map((styling) => {
-      // Effective removal
-      return {
-        ...styling,
-        start: styling.start,
-        finish: styling.start,
-      }
-    })
-    changes.push(encapsulating)
-
-    // Get encapsulated stylings
-    let encapsulated = handleScenario(
-      stylings,
-      (_start, _end) => _start < start && _end > end
-    ).map((styling) => {
-      // Right splice
-      changes.push({
-        ...styling,
-        index: -1,
-        start: end,
-        finish: styling.finish,
-      })
+    let dropDifference = dropStart - dragStart
 
-      // Left splice
-      changes.push({
-        ...styling,
-        index: -1,
-        start: styling.start,
-        finish: start,
-      })
+    // Get stylings at drag range
+    let dragStylings = getStylingsInRange(stylings, dragStart, dragEnd)
 
-      // Effective removal
-      return {
-        ...styling,
-        start: styling.start,
-        finish: styling.start,
-      }
-    })
-    changes.push(encapsulated)
-
-    // Get intersecting stylings from the left
-    let left = handleScenario(
-      stylings,
-      (_start, _end) =>
-        _end > start && _end <= end - difference + 1 && _start < start
-    ).map((styling) => {
-      return {
-        ...styling,
-        finish: start,
-      }
-    })
+    // Removal range
+    let removalStart = dragStart
+    let removalEnd = dragEnd
 
-    changes.push(left)
+    // If the drag precedes the drop (positive difference)
+    if (dropDifference > 0) {
+      // Addition start index
+      let additionStart = dropEnd
 
-    // Get intersecting stylings from the right
-    let right = handleScenario(
-      stylings,
-      (_start, _end) =>
-        _end > end - difference && _start >= start && _start < end - difference
-    ).map((styling) => {
-      return {
-        ...styling,
-        start: end,
-      }
-    })
+      // Compute addition first
+      stylings = additionTo(stylings, additionStart, dropLength, false)
 
-    changes.push(right)
-
-    console.log(`Encapsulating: ${encapsulating.length}`)
-    console.log(`Encapsulated: ${encapsulated.length}`)
-    console.log(`Left Intersecting: ${left.length}`)
-    console.log(`Right Intersecting: ${right.length}`)
-
-    changes = changes.flat()
-    changes.map((styling) => {
-      let { index, start, finish } = styling
-      if (index == -1) {
-        stylings.push({
-          type: styling.type,
-          start: start,
-          finish: finish,
-        })
-        return
-      }
+      // Compute removal second
+      stylings = deletionOf(stylings, removalStart, removalEnd)
+    }
 
-      stylings[index] = {
-        ...stylings[index],
-        start: start,
-        finish: finish,
-      }
-    })
+    // If the drop precedes the drag (negative difference)
+    if (dropDifference < 0) {
+      // Addition start index
+      let additionStart = dropStart
 
-    console.log(stylings)
+      // Compute removal first
+      stylings = deletionOf(stylings, removalStart, removalEnd)
+
+      // Compute addition second
+      stylings = additionTo(stylings, additionStart, dropLength, false)
+    }
+
+    // Add rich dragged stylings offset
+    stylings = stylings.concat(
+      dragStylings.map((styling) => {
+        return {
+          ...styling,
+          start: styling.start + dropStart,
+          finish: styling.finish + dropStart,
+        }
+      })
+    )
 
     return stylings
   }
 
   const onChange = (value) => {
+    // Since drop events cause onChange to invoke twice, ignore the first incomplete event
+    if (
+      _text.current.events.drop.is &&
+      value.length != _text.current.content.length
+    )
+      return
+
     setTimeout(function () {
       let [selectionStart, selectionEnd] = getFieldSelection()
-
       let difference = value.length - _text.current.content.length
+      let stylings = _text.current.stylings
 
-      let start = selectionStart - difference
-      let end = selectionEnd - difference
-
-      let stylings = _text.current.stylings.slice()
-
-      let succeeding = getSucceedStylings(start)
-      let changes = []
-
-      for (let succeed of succeeding) {
-        let index = getStylingIndex(succeed)
-        let styling = stylings[index]
-
-        changes.push([
-          index,
-          styling.start + difference,
-          styling.finish + difference,
-        ])
-      }
-
-      if (difference < 0) {
-        stylings = handleDeletion(
-          Math.abs(difference),
+      // Paste event
+      if (_text.current.events.paste.is) {
+        stylings = processPaste(
+          stylings,
+          difference,
           selectionStart,
-          selectionEnd + Math.abs(difference)
+          selectionEnd
         )
-      }
-
-      if (difference > 0) {
-        stylings = handleAddition(
-          Math.abs(difference),
+      } else if (_text.current.events.drop.is) {
+        stylings = processDrop(
+          stylings,
+          difference,
           selectionStart,
           selectionEnd
         )
-      }
-
-      // Remove empty stylings and invisible stylings
-      stylings = stylings.filter(
-        (styling) =>
-          !(
-            styling.start == styling.finish ||
-            (styling.start >= value.length && styling.finish >= value.length)
-          )
-      )
-
-      if (_text.current.pasted.status) {
-        stylings = handlePaste(
+      } else {
+        stylings = processNormal(
           stylings,
           difference,
-          selectionStart - _text.current.pasted.length,
-          selectionStart
+          selectionStart,
+          selectionEnd
         )
-
-        for (let styling of _text.current.lastCopy) {
-          styling = {
-            ...styling,
-            start: styling.start + selectionStart - _text.current.pasted.length,
-            finish:
-              styling.finish + selectionStart - _text.current.pasted.length,
-          }
-
-          stylings.push(styling)
-        }
       }
 
-      // Remove empty stylings and invisible stylings
-      stylings = stylings.filter(
-        (styling) =>
-          !(
-            styling.start == styling.finish ||
-            (styling.start >= value.length && styling.finish >= value.length)
-          )
-      )
-
       setText({
         ..._text.current,
         content: value,
         stylings: stylings,
         revert: [selectionStart, selectionEnd],
-        pasted: { status: false, length: 0 },
+        events: {
+          paste: { is: false, length: null },
+          drop: { is: false, text: null, drag: null },
+        },
       })
     }, 0)
   }
@@ -809,37 +675,6 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     return result
   }
 
-  const serializeStyleInRange = (start, end) => {
-    // Get all stylings intersecting
-    let stylings = []
-    for (let i = start; i < end; i++) {
-      stylings.push(getIntersectStylings(i))
-    }
-
-    // Remove duplicates
-    stylings = stylings.flat().filter((item) => item)
-    stylings = stylings.filter(
-      (item, index) =>
-        stylings.findIndex(
-          (_item) =>
-            _item.start == item.start &&
-            _item.finish == item.finish &&
-            _item.type == item.type
-        ) == index
-    )
-
-    // Clamp start and finish values and offset by start index
-    stylings = stylings.map((styling) => {
-      return {
-        ...styling,
-        start: getMaximum([styling.start, start]) - start,
-        finish: getMinimum([styling.finish, end]) - start,
-      }
-    })
-
-    return stylings
-  }
-
   // dangerouslySetInnerHTML incorrectly renders when the entire text is highlighted, copied, and then pasted in succession
   useEffect(() => {
     let html = getContent()
@@ -848,8 +683,6 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
 
         // Get stylings encompassing an index within it's range
         let stylings = getIntersectStylings(start)
-        // console.log(data)
-        // console.log(stylings)
         return `<span class="${stylings
           .map((styling) => stylers[styling.type].css)
           .join(" ")}" data-child-index="${index}">${data}</span>`
@@ -887,42 +720,13 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
             />
           )
         })}
-
-        {/* <Property
-          name="B"
-          onMouseDown={(event) => {
-            event.preventDefault() // This does not take focus away from field which allows the function to retrieve the current selection data
-            perform("bold")
-          }}
-        />
-        <Property
-          name="I"
-          onMouseDown={(event) => {
-            event.preventDefault()
-            perform("italic")
-          }}
-        />
-        <Property
-          name="U"
-          onMouseDown={(event) => {
-            event.preventDefault()
-            perform("under")
-          }}
-        />
-        <Property
-          name="S"
-          onMouseDown={(event) => {
-            event.preventDefault()
-            perform("strike")
-          }}
-        /> */}
       </div>
       <div className="h-[1px] w-full bg-slate-600">&nbsp;</div>
-      <div className="w-full">
+      <div className="selection-ignore box-border w-full p-2">
         <div
           ref={field}
           contentEditable="true"
-          className="rtl h-[150px] w-full resize-none overflow-auto overflow-x-hidden border-none p-2 outline-none"
+          className="selection-ignore rtl h-[150px] w-full resize-none overflow-auto overflow-x-hidden border-none font-['Arial'] text-[16px] outline-none"
           style={{
             direction: getTextDirection(),
           }}
@@ -932,84 +736,41 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
             const data = event.clipboardData.getData("text/plain")
             document.execCommand("insertHTML", false, data)
 
-            console.log(data)
-
             setText({
               ..._text.current,
-              pasted: { status: true, length: data.length },
+              events: {
+                ..._text.current.events,
+                paste: { is: true, length: data.length },
+              },
             })
-
-            // let [start, end] = getFieldSelection()
-
-            // console.log(index)
-            // console.log(start)
-
-            // let index = start - data.length
-            // let stylings = text.stylings.slice()
-
-            // FIXME:
-            // stylings.push({
-            //   type: "bold",
-            //   start: 5,
-            //   finish: 7,
-            // })
-
-            // let copy = text.lastCopy
-            // if (copy.length != 0) {
-            //   for (let styling of copy) {
-            //     stylings.push({
-            //       type: styling.type,
-            //       start: styling.start + start,
-            //       finish: styling.finish + start,
-            //     })
-            //   }
-            // }
-
-            // let content: any = text.content
-            // let original = content.length
-
-            // // If not collapsed, insert text
-            // if (start == end) {
-            //   content = content.split("")
-            //   content.splice(start, 0, data)
-            //   content = content.join("")
-            // } else {
-            //   console.log(content)
-            //   // Otherwise, replace substring
-            //   content =
-            //     content.substring(0, start) +
-            //     data +
-            //     content.substring(end, content.length)
-            // }
-
-            // let difference = content.length - original
-
-            // stylings = handleDeletion()
-
-            // setText({
-            //   ...text,
-            //   content: content,
-            //   stylings: stylings,
-            //   revert: [start + data.length, start + data.length],
-            // })
           }}
           onInput={(event: any) => {
             onChange(event.target.textContent)
           }}
-          onCopy={(event) => {
+          onCopy={() => {
             let [start, end] = getFieldSelection()
 
-            let data = serializeStyleInRange(start, end)
+            let stylings = _text.current.stylings.slice()
+            stylings = getStylingsInRange(stylings, start, end)
 
             setText({
               ...text,
-              lastCopy: data,
+              clipboard: stylings,
+            })
+          }}
+          onDrop={(event) => {
+            let text = event.dataTransfer.getData("text")
+
+            if (text.trim() == "") return
+
+            setText({
+              ..._text.current,
+              events: {
+                ..._text.current.events,
+                drop: { is: true, text: text, drag: getFieldSelection() },
+              },
             })
           }}
-          // onKeyDown={(event: any) => {
-          //   event.preventDefault()
-          //   console.log(event)
-          // }}
         ></div>
       </div>
       <div className="h-[1px] w-full bg-slate-600">&nbsp;</div>