@sikka/hawa 0.0.237 → 0.0.239

package/src/elements/FloatingComment.tsx

@@ -40,6 +40,22 @@ const stylers = {
 // Paste = Removal + Addition -> Styling Removal + Styling Addition
 // Drag & Drop = Removal + Addition -> Styling Removal + Styling Addition
 
+// FIXME:
+// - Creating a new line, and typing data in it, and then setting two different stylings on the same text
+// FIXME:
+// - Type characters, create new line, remove the new line immediately
+
+// FIXME: Line at first index of content editable
+
+// FIXME: Typing behind a line break identifier
+// One way to prevent it, is to check in the onChange event if the data added (removed might not be needed here), is behind a line break identifier
+// if  so, move the start and end index by the length of the added, and replace the added, and then add the added back in the offset index
+
+// FIXME:
+// Deleting all text in a line removes that line entirely
+
+const lineBreakIdentifier = "​"
+
 export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
   props
 ) => {
@@ -47,9 +63,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 },
-    dropped: { status: false, text: "", previous: [0, 0] },
+    clipboard: [],
+    events: {
+      paste: { is: false, length: null },
+      drop: { is: false, text: null, drag: null },
+    },
   })
 
   const field = useRef(null)
@@ -64,6 +82,28 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     return i
   }
 
+  const getRelativePrecedingSum = (element, endIndex) => {
+    let nodes: any = Array.from(element.childNodes)
+    let sum = nodes
+      .slice(0, endIndex)
+      .map((node) => node.textContent.length)
+      .reduce((a, b) => a + b, 0)
+    return sum
+  }
+
+  const getLinePrecedingSum = (endIndex) => {
+    let fieldNodes = Array.from(field.current.childNodes)
+    let sum = fieldNodes
+      .slice(0, endIndex)
+      .map((lineNode: any) => {
+        let lineNodes = Array.from(lineNode.childNodes)
+        return getRelativePrecedingSum(lineNode, lineNodes.length)
+      })
+      .reduce((a, b) => a + b, 0)
+
+    return sum
+  }
+
   const getSelectionPrecedingSum = (name) => {
     let selection = window.getSelection()
     let nodes = Array.from(field.current.childNodes)
@@ -78,87 +118,88 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
       (item: any) => !["#text", "BR"].includes(item.nodeName)
     )
 
-    let parent: any = selection[name].parentNode
-    let special = 0
+    let node = selection[name]
+    let parent: any = node.parentNode
+    let sum = 0
+    // let special = 0
 
-    // Special case for empty text
-    // if (parent == field.current) {
-    //   console.log("hi")
-    // }
+    const isNodeLine =
+      node.nodeName == "DIV" && Array.from(node.classList).includes("line")
 
-    // Special case for dropping text near or inside styled text
-    if (!Array.from(parent.parentNode.classList).includes("selection-ignore")) {
-      parent = parent.parentNode
+    // If the parent node is a span, this must be a text node
+    if (parent.nodeName == "SPAN") {
+      // Get index of span within line
+      let spanIndex = getChildIndex(parent)
 
-      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)
-    }
+      // Get relative sum within line
+      sum += getRelativePrecedingSum(parent.parentNode, spanIndex)
 
-    let index = parent == field.current ? nodes.length : getChildIndex(parent)
+      // Get parent line index
+      let lineIndex = getChildIndex(parent.parentNode)
 
-    let sum =
-      nodes
-        .slice(0, index)
-        .map((span: any) => span.textContent.length)
-        .reduce((a, b) => a + b, 0) + special
+      // Get relative sum within entire field
+      sum += getLinePrecedingSum(lineIndex)
+    }
 
-    return sum
-  }
+    // If the parent node is a line element, this must be a new line, so return the preceding sum
+    if (Array.from(parent.classList).includes("line")) {
+      // If the node is a text node, then that must mean this is a non-styled drop
+      if (node.nodeName == "#text") {
+        let spanIndex = getChildIndex(node)
 
-  const getFieldSelection = () => {
-    if (document.activeElement != field.current) return [0, 0]
+        sum += getRelativePrecedingSum(parent, spanIndex)
+      }
 
-    let selection = window.getSelection()
-    // let nodes = Array.from(field.current.childNodes)
+      // Get line element index
+      let lineIndex = getChildIndex(parent)
 
-    // console.log(nodes)
+      // Get relative sum within entire field
+      sum += getLinePrecedingSum(lineIndex)
+    }
 
-    // nodes = nodes.filter(
-    //   (item: any) => !["#text", "BR"].includes(item.nodeName)
-    // )
+    if (isNodeLine) {
+      // Get line element index
+      let lineIndex = getChildIndex(node)
+
+      // Get relative sum within entire field
+      sum = getLinePrecedingSum(lineIndex)
+    }
 
-    // console.log(selection.anchorNode)
-    // console.log(selection.focusNode)
-    // console.log(selection.anchorNode.parentNode)
-    // console.log(selection.focusNode.parentNode)
-    // console.log(selection.anchorNode.parentNode.parentNode)
-    // console.log(selection.focusNode.parentNode.parentNode)
-    // console.log(selection.anchorOffset)
-    // console.log(selection.focusOffset)
+    // If the parent is the field, return zero
+    // FIXME: Should we return zero here?
+    if (parent == field.current && !isNodeLine) {
+      return 0
+    }
 
-    // let startParent: any = selection.anchorNode.parentNode
+    // // Special case for dropping text near or inside styled text
+    // if (!Array.from(parent.parentNode.classList).includes("selection-ignore")) {
+    //   parent = parent.parentNode
 
-    // let startNodeIndex =
-    //   startParent == field.current
-    //     ? nodes.length
-    //     : // : parseInt(startParent.dataset.childIndex)
-    //       getChildIndex(startParent)
+    //   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 startPrecedingSum = nodes
-    //   .slice(0, startNodeIndex)
-    //   .map((span: any) => span.textContent.length)
-    //   .reduce((a, b) => a + b, 0)
+    // let index = parent == field.current ? nodes.length : getChildIndex(parent)
 
-    let startPrecedingSum = getSelectionPrecedingSum("anchorNode")
+    // let sum =
+    //   nodes
+    //     .slice(0, index)
+    //     .map((span: any) => span.textContent.length)
+    //     .reduce((a, b) => a + b, 0) + special
 
-    // let endParent: any = selection.focusNode.parentNode
-    // let endNodeIndex =
-    //   endParent == field.current
-    //     ? nodes.length
-    //     : // : parseInt(endParent.dataset.childIndex)
-    //       getChildIndex(endParent)
+    return sum
+  }
 
-    // let endPrecedingSum = nodes
-    //   .slice(0, endNodeIndex)
-    //   .map((span: any) => span.textContent.length)
-    //   .reduce((a, b) => a + b, 0)
+  const getFieldSelection = () => {
+    if (document.activeElement != field.current) return [0, 0]
+    let selection = window.getSelection()
 
+    let startPrecedingSum = getSelectionPrecedingSum("anchorNode")
     let endPrecedingSum = getSelectionPrecedingSum("focusNode")
 
-    console.log([startPrecedingSum, endPrecedingSum])
     let result = [
       startPrecedingSum + selection.anchorOffset,
       endPrecedingSum + selection.focusOffset,
@@ -178,7 +219,8 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
       let endNode = null
 
       let total = 0
-      let nodes = Array.from(field.current.childNodes)
+      // let nodes = Array.from(field.current.childNodes)
+      let nodes = Array.from(field.current.getElementsByTagName("span"))
 
       for (let i = 0; i < nodes.length; i++) {
         let node: any = nodes[i]
@@ -369,40 +411,15 @@ 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) => {
+  const getIntersectStylings = (
+    stylings,
+    index,
+    startOffset = 0,
+    finishOffset = 0
+  ) => {
     // Find all stylings with encompassing range
-    let matches = text.stylings.filter(
+    let matches = stylings.filter(
       ({ start, finish }) =>
         index >= start + startOffset && index < finish + finishOffset
     )
@@ -410,730 +427,452 @@ 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)
-    )
-
-    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,
-      })
-    })
-
-    return indices
-  }
-
-  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,
-      })
-    })
-
-    // 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,
-      })
-    })
-
-    // 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,
-      })
-    })
-
-    let rightResumption = stylings.filter(
-      ({ start: _start, finish: _finish }) =>
-        start > _start && start < _finish && end > _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)
     )
-    stylings.map((styling, index) => {
-      let result = rightResumption.find((item) =>
-        compareStylings(styling, item)
-      )
-      if (!result) return
-
-      changes.push({
-        index: index,
-        start: styling.start,
-        finish: getMinimum([start, styling.finish]),
-      })
-    })
 
-    // Apply changes
-    changes.map(({ index, start, finish }) => {
-      stylings[index] = {
-        ...stylings[index],
-        start: start,
-        finish: 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,
       }
     })
 
-    // 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
+    return result
+  }
 
-    // console.log(succeeding)
+  const splitStyling = (styling, index, offset = 0) => {
+    // Get first split
+    let first = {
+      ...styling,
+      start: styling.start,
+      finish: index,
+    }
 
-    // If the start and finish of any styling is greater than the new length, remove it
+    // Get second split
+    let second = {
+      ...styling,
+      start: index + offset,
+      finish: styling.finish + offset,
+    }
 
-    return stylings
+    return [first, second]
   }
 
-  const handleAddition = (length, start, end) => {
-    start -= length + 1
-    end -= length + 1
-
-    let stylings = _text.current.stylings.slice()
+  const additionTo = (stylings, startIndex, length, defaultBehavior = true) => {
+    // console.log(`Adding text of length ${length} at index ${startIndex}`)
 
-    let changes = []
+    // Required operations:
+    // Offset succeeding stylings
+    // Split intersecting stylings
+    // Styling continuation at end (only for normal addition)
 
-    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
+      if (styling.start >= startIndex && styling.finish > startIndex) {
+        console.log("succeeding")
+        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])
-    // }
 
-    // console.log(succeeding)
-
-    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,
+      // 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)
+        }
       }
-    })
-    changes.push(preceding)
 
-    let encapsulated = handleScenario(
-      stylings,
-      (_start, _finish) => start >= _start && end + 1 < _finish
-    ).map((styling) => {
-      return {
-        ...styling,
-        finish: styling.finish + length,
+      // 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,
+          }
+        }
       }
+
+      return styling
     })
 
-    changes.push(encapsulated)
+    return stylings.flat()
+  }
 
-    // console.log(length)
+  const deletionOf = (stylings, startIndex, endIndex) => {
+    // console.log(`Removing text from ${startIndex} to ${endIndex}`)
 
-    // console.log(`Encapsulated: ${encapsulated.length}`)
+    let length = Math.abs(endIndex - startIndex)
 
-    // console.log(`Succeeding: ${succeeding.length}`)
-    // console.log(`Preceding: ${preceding.length}`)
-    // console.log(preceding)
+    // Required operations:
+    // Offset succeeding stylings
+    // Remove stylings completely within range
+    // Shrink stylings surrounding range
+    // Clamp left resumptions and offset
+    // Clamp right resumptions
 
-    changes.flat().map(({ index, start, finish }) => {
-      stylings[index] = {
-        ...stylings[index],
-        start: start,
-        finish: finish,
+    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,
+        }
       }
-    })
 
-    return stylings
-  }
-
-  const handlePaste = (stylings, difference, start, end) => {
-    // console.log(`Paste:`)
-    // console.log([start, end])
-    // console.log(stylings)
-    let changes = []
-
-    // Get stylings being encapsulated by pasting range
-    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,
+      // A styling completely within deletion range
+      if (styling.start >= startIndex && styling.finish <= endIndex) {
+        return null
       }
-    })
-    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,
-      })
-
-      // Left splice
-      changes.push({
-        ...styling,
-        index: -1,
-        start: styling.start,
-        finish: start,
-      })
 
-      // 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,
+      // A styling surrounding deletion range
+      if (styling.start <= startIndex && styling.finish >= endIndex) {
+        return {
+          ...styling,
+          finish: styling.finish - length,
+        }
       }
-    })
-
-    changes.push(left)
 
-    // 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,
+      // 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(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
+      // 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]),
+        }
       }
 
-      stylings[index] = {
-        ...stylings[index],
-        start: start,
-        finish: finish,
-      }
+      return styling
     })
 
-    // console.log(stylings)
-
-    return stylings
+    return stylings.flat().filter((styling) => styling)
   }
 
-  const handleDrop = (value) => {
-    let [dropStart, dropEnd] = getFieldSelection()
-
-    let stylings = _text.current.stylings.slice()
-    let dropped = _text.current.dropped.text
-
-    let changes = []
-
-    let [dragStart, dragEnd] = _text.current.dropped.previous
-
-    console.log(`Drag: ${[dragStart, dragEnd]}`)
-    console.log(`Drop: ${[dropStart, dropEnd]}`)
-    console.log(stylings)
-
-    // negative - right, positive - left
-    // let direction = dragStart - dropStart < 0 ? -1 : 1
+  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)
+      )
+    }
 
-    // Possible refactorization:
-    // Since the drop invokes the onInput event twice, the first is the removal of dragged text, and the second is the addition of dropped text
-    // If the handling occurs at the second occurence of onInput, the first could be handled naturally by the handleDeletion function
+    return stylings
+  }
 
-    // offset: length * direction
+  const processPaste = (stylings, difference, selectionStart, selectionEnd) => {
+    let pasteLength = _text.current.events.paste.length
 
-    // To be offset in right conditions:
-    // (_start >= dg.end && _end > dg.end)
-    // (_end <= dp.start && _start < dp.start)
+    // console.log(
+    //   `Pasting for length ${pasteLength} at [${selectionStart}, ${selectionEnd}]`
+    // )
+    // console.log(
+    //   `Accompanied stylings: ${JSON.stringify(
+    //     _text.current.clipboard,
+    //     null,
+    //     2
+    //   )}`
+    // )
 
-    // To be offset in left conditions:
-    // (_end <= dg.start && _start < dg.start)
-    // (_start >= dp.end && _end > dp.end)
+    // Get addition start index
+    let additionStart = selectionStart - pasteLength
 
-    // Get all intersecting stylings
-    let dragStylings = stylings.filter(
-      ({ start, finish }) =>
-        !(
-          (start < dragStart && finish <= dragStart) ||
-          (start >= dragEnd && finish > dragEnd)
-        )
-    )
+    // Get removal range
+    let removalStart = additionStart
+    let removalEnd = additionStart + pasteLength - difference
 
-    // Offset stylings between drag and drop locations
-    stylings
-      .filter(({ start, finish }) => start >= dragEnd && finish > dragEnd)
-      .map((styling) => {
-        changes.push({
-          original: styling,
-          changed: {
-            ...styling,
-            start: styling.start - dropped.length,
-            finish: styling.finish - dropped.length,
-          },
-        })
-      })
+    // Compute deletion
+    stylings = deletionOf(stylings, removalStart, removalEnd)
 
-    // Handle complete encapsulation over styling
-    stylings
-      .filter(({ start, finish }) => dragStart <= start && dragEnd >= finish)
-      .map((styling) => {
-        changes.push({
-          original: styling,
-          changed: { ...styling, start: styling.start, finish: styling.start },
-        })
-      })
+    // Compute addition
+    stylings = additionTo(stylings, additionStart, pasteLength, false)
 
-    // Handle drag range being encapsulated by styling
-    stylings
-      .filter(
-        ({ start, finish }) =>
-          (dragStart > start && dragEnd <= finish) ||
-          (dragStart >= start && dragEnd < finish)
-      )
-      .map((styling) => {
-        changes.push({
-          original: styling,
-          changed: {
-            ...styling,
-            start: styling.start,
-            finish: styling.finish - dropped.length,
-          },
-        })
+    // 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,
+        }
       })
-
-    // Handle resumptions
-    let resumptions = stylings.filter(
-      ({ start, finish }) =>
-        (finish > dragStart &&
-          start > dragStart &&
-          start < dragEnd &&
-          finish > dragEnd) ||
-        (start < dragEnd &&
-          finish < dragEnd &&
-          finish > dragStart &&
-          start < dragStart)
     )
 
-    resumptions.map((styling) => {
-      let right =
-        styling.start < dragEnd &&
-        styling.finish < dragEnd &&
-        styling.finish > dragStart &&
-        styling.start < dragStart
+    // console.log(`End result: ${JSON.stringify(stylings, null, 2)}`)
 
-      changes.push({
-        original: styling,
-        changed: {
-          ...styling,
-          start: !right
-            ? getMaximum([dragEnd, styling.start]) - dropped.length // Only decrease if the drag
-            : styling.start,
-          finish: right
-            ? getMinimum([dragStart, styling.finish])
-            : styling.finish - dropped.length,
-        },
-      })
-    })
-
-    // Apply drag changes
-    changes.map(({ original, changed }) => {
-      let index = stylings.findIndex((styling) =>
-        compareStylings(original, styling)
-      )
+    return stylings
+  }
 
-      stylings[index] = changed
-    })
+  const processDrop = (stylings, difference, dropStart, dropEnd) => {
+    console.log(`Dropped at: ${[dropStart, dropEnd]}`)
 
-    changes = []
+    let dropLength = _text.current.events.drop.text.length
 
-    // Positive offset succeeding stylings
-    stylings
-      .filter(({ start, finish }) => start >= dropStart && finish > dropStart)
-      .map((styling) => {
-        changes.push({
-          original: styling,
-          changed: {
-            ...styling,
-            start: styling.start + dropped.length,
-            finish: styling.finish + dropped.length,
-          },
-        })
-      })
+    let [dragStart, dragEnd] = _text.current.events.drop.drag
 
-    // Splice intersecting stylings
-    stylings
-      .filter(({ start, finish }) => start < dropStart && finish > dropStart)
-      .map((styling) => {
-        changes.push({
-          original: styling,
-          changed: {
-            ...styling,
-            start: styling.start,
-            finish: dropStart,
-          },
-        })
+    let dropDifference = dropStart - dragStart
 
-        changes.push({
-          original: null,
-          changed: {
-            ...styling,
-            start: dropEnd,
-            finish: styling.finish + dropped.length,
-          },
-        })
-      })
+    // Get stylings at drag range
+    let dragStylings = getStylingsInRange(stylings, dragStart, dragEnd)
 
-    // Apply drop changes
-    changes.map(({ original, changed }) => {
-      if (original == null) {
-        stylings.push(changed)
-        return
-      }
+    // Removal range
+    let removalStart = dragStart
+    let removalEnd = dragEnd
 
-      let index = stylings.findIndex((styling) =>
-        compareStylings(original, styling)
-      )
+    // If the drag precedes the drop (positive difference)
+    if (dropDifference > 0) {
+      // Addition start index
+      let additionStart = dropEnd
 
-      stylings[index] = changed
-    })
+      // Compute addition first
+      stylings = additionTo(stylings, additionStart, dropLength, false)
 
-    // Remove empty stylings
-    stylings = stylings.filter((styling) => styling.start != styling.finish)
+      // Compute removal second
+      stylings = deletionOf(stylings, removalStart, removalEnd)
+    }
 
-    // Clamp start and end values, negative offset by dragStart, and positive offset by dropStart
-    dragStylings = dragStylings.map((styling) => {
-      return {
-        ...styling,
-        start: getMaximum([styling.start, dragStart]) - dragStart + dropStart,
-        finish: getMinimum([styling.finish, dragEnd]) - dragStart + dropStart,
-      }
-    })
+    // If the drop precedes the drag (negative difference)
+    if (dropDifference < 0) {
+      // Addition start index
+      let additionStart = dropStart
 
-    // Push to current stylings
-    stylings = stylings.concat(dragStylings)
+      // Compute removal first
+      stylings = deletionOf(stylings, removalStart, removalEnd)
 
-    setText({
-      ..._text.current,
-      content: value,
-      stylings: stylings,
-      revert: [dropStart, dropEnd],
-      pasted: { status: false, length: 0 },
-      dropped: { status: false, text: "", previous: [0, 0] },
-    })
-  }
+      // Compute addition second
+      stylings = additionTo(stylings, additionStart, dropLength, false)
+    }
 
-  const onChange = (value) => {
-    setTimeout(function () {
-      if (_text.current.dropped.status) {
-        // Drops from text in the content editable invoke the onChange function twice
-        if (value.length == _text.current.content.length) {
-          handleDrop(value)
+    // Add rich dragged stylings offset
+    stylings = stylings.concat(
+      dragStylings.map((styling) => {
+        return {
+          ...styling,
+          start: styling.start + dropStart,
+          finish: styling.finish + dropStart,
         }
-        return
-      }
-
-      let [selectionStart, selectionEnd] = getFieldSelection()
-      let difference = value.length - _text.current.content.length
-
-      let start = selectionStart - difference
-      let end = selectionEnd - difference
+      })
+    )
 
-      let stylings = _text.current.stylings.slice()
+    return stylings
+  }
 
-      let succeeding = getSucceedStylings(start)
-      let changes = []
+  const onChange = (value, selectionStart, selectionEnd) => {
+    // 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
 
-      for (let succeed of succeeding) {
-        let index = getStylingIndex(succeed)
-        let styling = stylings[index]
+    console.log(`Changed at: ${[selectionStart, selectionEnd]}`)
 
-        changes.push([
-          index,
-          styling.start + difference,
-          styling.finish + difference,
-        ])
-      }
+    setTimeout(function () {
+      // let [selectionStart, selectionEnd] = getFieldSelection()
+      let difference = value.length - _text.current.content.length
+      let stylings = _text.current.stylings
 
-      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 },
-        dropped: { status: false, text: "", previous: [0, 0] },
+        events: {
+          paste: { is: false, length: null },
+          drop: { is: false, text: null, drag: null },
+        },
       })
     }, 0)
   }
 
   const getContent = () => {
+    // console.clear()
     let content = _text.current.content
+    let stylings = [..._text.current.stylings]
 
-    // Get all styling indices
-    let indices = _text.current.stylings
-      .map(({ start, finish }) => [start, finish])
-      .flat()
+    let result = []
 
-    // Sort ascendingly
-    indices = indices.sort((a, b) => a - b)
+    // Get line indices
+    let lineIndices = content
+      .split("")
+      .map((character, index) => {
+        if (character == lineBreakIdentifier) return index
+        return null
+      })
+      .filter((item) => item)
 
-    // Remove duplicates
-    indices = indices.filter(
-      (element, index) => indices.indexOf(element) == index
-    )
+    // Add end point
+    lineIndices.unshift(0)
+    lineIndices.push(content.length)
 
-    // Add first index if not present
-    if (indices[0] != 0) indices.unshift(0)
+    // Ignore last element
+    for (let i = 0; i < lineIndices.length - 1; i++) {
+      let lineStart = lineIndices[i]
+      let lineEnd = lineIndices[i + 1]
 
-    // Add last index if not present
-    let last = content.length
-    if (indices[indices.length - 1] != last) indices.push(last)
+      let lineContent = content.slice(lineStart, lineEnd)
 
-    let result = []
+      // console.log(
+      //   `Line: ${lineStart} -> ${lineEnd}, with content: ${lineContent}`
+      // )
 
-    for (let i = 0; i < indices.length - 1; i++) {
-      result.push([indices[i], content.substring(indices[i], indices[i + 1])])
-    }
+      // Get all stylings within line
+      let lineStylings = getStylingsInRange(stylings, lineStart, lineEnd)
 
-    return result
-  }
+      // Collect all spans relative to stylings within line
+      let spans = []
 
-  const serializeStyleInRange = (start, end) => {
-    // Get all stylings intersecting
-    let stylings = []
-    for (let i = start; i < end; i++) {
-      stylings.push(getIntersectStylings(i))
-    }
+      // Acquire all flattened unique indices
+      let indices = lineStylings
+        .map(({ start, finish }) => [start, finish])
+        .flat()
+        .sort((a, b) => a - b)
 
-    // 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
-    )
+      indices = indices.filter(
+        (element, index) => indices.indexOf(element) == 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,
+      // Add first index if not present
+      if (indices[0] != 0) indices.unshift(0)
+
+      // Add last index if not present
+      let last = lineContent.length
+      if (indices[indices.length - 1] != last) indices.push(last)
+
+      // Iterate through all indices except the last
+      for (let i = 0; i < indices.length - 1; i++) {
+        let startIndex = indices[i]
+        let endIndex = indices[i + 1]
+
+        spans.push({
+          content: lineContent.substring(startIndex, endIndex),
+          types: getIntersectStylings(lineStylings, startIndex).map(
+            (styling) => styling.type
+          ),
+        })
       }
-    })
 
-    return stylings
+      result.push(spans)
+    }
+
+    // // Get all styling indices
+    // let indices = _text.current.stylings
+    //   .map(({ start, finish }) => [start, finish])
+    //   .flat()
+
+    // // Sort ascendingly
+    // indices = indices.sort((a, b) => a - b)
+
+    // // Remove duplicates
+    // indices = indices.filter(
+    //   (element, index) => indices.indexOf(element) == index
+    // )
+
+    // // Add first index if not present
+    // if (indices[0] != 0) indices.unshift(0)
+
+    // // Add last index if not present
+    // let last = content.length
+    // if (indices[indices.length - 1] != last) indices.push(last)
+
+    // // let result = []
+
+    // for (let i = 0; i < indices.length - 1; i++) {
+    //   result.push([indices[i], content.substring(indices[i], indices[i + 1])])
+    // }
+
+    return result
   }
 
   // dangerouslySetInnerHTML incorrectly renders when the entire text is highlighted, copied, and then pasted in succession
   useEffect(() => {
     let html = getContent()
-      .map((_data, index) => {
-        let [start, data] = _data
-
-        // 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>`
+      .map((line, index) => {
+        return `<div class="line" data-line-index="${index}">${line
+          .map((span, _index) => {
+            return `<span class="${span.types
+              .map((type) => stylers[type].css)
+              .join(" ")}" data-child-index="${_index}">${span.content}</span>`
+          })
+          .join("")}</div>`
       })
       .join("")
 
+    // let html = getContent()
+    //   .map((_data, index) => {
+    //     let [start, data] = _data
+
+    //     // Get stylings encompassing an index within it's range
+    //     let stylings = getIntersectStylings(_text.current.stylings, start)
+    //     return `<span class="${stylings
+    //       .map((styling) => stylers[styling.type].css)
+    //       .join(" ")}" data-child-index="${index}">${data}</span>`
+    //   })
+    //   .join("")
+
     field.current.innerHTML = html
   }, [text.content, text.stylings, text.revert])
 
@@ -1150,22 +889,6 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     }
   }
 
-  const calculateTextWidth = (
-    text: string,
-    font: { size: number; family: string }
-  ) => {
-    let element = document.createElement("div")
-    let { size, family } = font
-
-    element.className = `text-[${size}px] font-['${family}'] absolute float-left whitespace-nowrap invisible`
-    element.innerHTML = text
-
-    document.body.appendChild(element)
-
-    let rect = element.getBoundingClientRect()
-    return rect.width
-  }
-
   return (
     <div className="align-center box-border flex h-min w-[400px] flex-col items-center justify-center rounded shadow-md">
       <div className={clsx("flex w-full flex-row justify-start p-2")}>
@@ -1183,6 +906,17 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
         })}
       </div>
       <div className="h-[1px] w-full bg-slate-600">&nbsp;</div>
+      {/* <div className="selection-ignore rtl h-[150px] w-full resize-none overflow-auto overflow-x-hidden border-none font-['Arial'] text-[16px] outline-none">
+        <div className="line" data-line-index="0">
+          <span className="" data-child-index="0">
+            asd
+          </span>
+        </div>
+        <div className="line" data-line-index="1">
+          <br />
+        </div>
+      </div>
+       */}
       <div className="selection-ignore box-border w-full p-2">
         <div
           ref={field}
@@ -1194,27 +928,152 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
           onPaste={(event) => {
             // pastes all copied text from the content editable as plain text
             event.preventDefault()
-            const data = event.clipboardData.getData("text/plain")
+            let data = event.clipboardData.getData("text/plain")
+            data = data.replaceAll("\n", "")
+            data = data.replaceAll("\r", "")
+
             document.execCommand("insertHTML", false, data)
 
-            console.log(data)
+            //   selection.anchorOffset <= 1 &&
+            //   selection.focusOffset <= 1
+            // ) {
+            //   let lineIndex = getChildIndex(anchorNode.parentNode.parentNode)
+
+            //   let _content = content
+            //   if (content.startsWith(lineBreakIdentifier)) {
+            //     _content = _content.slice(1)
+            //   }
+
+            //   let originalLine: any =
+            //     _content.split(lineBreakIdentifier)[lineIndex]
+
+            //   console.log(_content.split(lineBreakIdentifier))
+
+            //   originalLine = originalLine.split("")
+            //   originalLine.splice(0, 0, eventData)
+            //   originalLine = originalLine.join("")
+
+            //   let lines = _content.split(lineBreakIdentifier)
+
+            //   lines[lineIndex] = originalLine
+
+            //   textContent = lines.join(lineBreakIdentifier)
+
+            //   if (content.startsWith(lineBreakIdentifier)) {
+            //     textContent = lineBreakIdentifier + textContent
+            //   }
+
+            //   start += 1
+            //   end += 1
+            // }
 
             setText({
               ..._text.current,
-              pasted: { status: true, length: data.length },
+              events: {
+                ..._text.current.events,
+                paste: { is: true, length: data.length },
+              },
             })
           }}
           onInput={(event: any) => {
-            onChange(event.target.textContent)
+            // console.log(event)
+            // console.log(event.target.textContent)
+            // console.log(event.target.textContent.split(""))
+
+            let [start, end] = getFieldSelection()
+            let textContent = event.target.textContent
+            let content = _text.current.content
+            // Try creating twice the lines if the index is at 0,0
+            // if (!textContent.startsWith(lineBreakIdentifier)) {
+            //   textContent = lineBreakIdentifier + textContent
+            // }
+
+            let eventType = event.nativeEvent.inputType
+
+            if (eventType == "insertParagraph") {
+              console.log(`Inserted new line at [${start}, ${end}]`)
+
+              let split = textContent.split("")
+
+              split.splice(start, 0, lineBreakIdentifier)
+              if (start == 0 && !content.startsWith(lineBreakIdentifier)) {
+                split.splice(start, 0, lineBreakIdentifier)
+                start += 1
+                end += 1
+              }
+
+              textContent = split.join("")
+
+              // Increase selection by one to accomodate for the new line
+              start += 1
+              end += 1
+            } else {
+              let selection = window.getSelection()
+              let { anchorNode, focusNode } = selection
+
+              let eventData = event.nativeEvent.data
+
+              // Handle typing behind lines
+              if (
+                anchorNode.parentNode == focusNode.parentNode &&
+                anchorNode.parentNode.nodeName == "SPAN" &&
+                selection.anchorOffset <= 1 &&
+                selection.focusOffset <= 1 &&
+                eventType == "insertText"
+              ) {
+                let lineIndex = getChildIndex(anchorNode.parentNode.parentNode)
+
+                let _content = content
+                if (content.startsWith(lineBreakIdentifier)) {
+                  _content = _content.slice(1)
+                }
+
+                let originalLine: any =
+                  _content.split(lineBreakIdentifier)[lineIndex]
+
+                console.log(_content.split(lineBreakIdentifier))
+
+                originalLine = originalLine.split("")
+                originalLine.splice(0, 0, eventData)
+                originalLine = originalLine.join("")
+
+                let lines = _content.split(lineBreakIdentifier)
+
+                lines[lineIndex] = originalLine
+
+                textContent = lines.join(lineBreakIdentifier)
+
+                if (content.startsWith(lineBreakIdentifier)) {
+                  textContent = lineBreakIdentifier + textContent
+                }
+
+                start += 1
+                end += 1
+              }
+            }
+
+            // if (
+            //   eventData != null &&
+            //   start - eventData.length == 0 &&
+            //   end - eventData.length == 0 &&
+            //   content.startsWith(lineBreakIdentifier)
+            // ) {
+            //   console.log("STOP")
+            // }
+
+            // console.log(event.nativeEvent.inputType)
+
+            onChange(textContent, start, end)
           }}
-          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) => {
@@ -1222,16 +1081,11 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
 
             if (text.trim() == "") return
 
-            // console.log(getSelectionPrecedingSum("anchorNode"))
-            // console.log(getSelectionPrecedingSum("focusNode"))
-            // console.log(window.getSelection())
-
             setText({
               ..._text.current,
-              dropped: {
-                status: true,
-                text: text,
-                previous: getFieldSelection(),
+              events: {
+                ..._text.current.events,
+                drop: { is: true, text: text, drag: getFieldSelection() },
               },
             })
           }}