@sikka/hawa 0.0.232 → 0.0.234

package/src/elements/FloatingCommentCE.tsx

@@ -17,8 +17,6 @@ type ComponentTypes = {
   foo?: string
 }
 
-// TODO: Handle copy pasting by assigning to local storage ?
-
 const styleClasses = {
   bold: "font-bold",
   italic: "italic",
@@ -26,97 +24,121 @@ const styleClasses = {
   strike: "line-through",
 }
 
+// FIXME: Deleting a styled part of text while selecting characters on the borders or more
+// FIXME: Deleting more than one character of a styled part of text
+// FIXME: Pasting styled text doesn't offset succeeding stylings
+// FIXME: Pasting styled text inside other stylings
+// FIXME: Typing characters behind and after stylings
+
+// FIXME: Pasting behind the second character in styled text
+// FIXME: Pasting over styled text with resumptions and/or highlighted text exceeding pasted text length
+
 export const FloatingCommentCE: React.FunctionComponent<ComponentTypes> = (
   props
 ) => {
-  const [text, setText] = useState({
+  const [text, _setText] = useState({
     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 },
   })
 
   const field = useRef(null)
+  const _text = useRef(text)
+  const setText = (data) => {
+    _text.current = data
+    _setText(data)
+  }
 
+  const getChildIndex = (child) => {
+    for (var i = 0; (child = child.previousSibling); i++);
+    return i
+  }
+
+  // Full reversion achieved !
   const getFieldSelection = () => {
     if (document.activeElement != field.current) return [0, 0]
 
     let selection = window.getSelection()
-    let start
-    let end
-
-    console.log(selection)
-    console.log(document.activeElement)
-    console.log(`Range count when fetching selection: ${selection.rangeCount}`)
-    if (selection.rangeCount) {
-      let range = selection.getRangeAt(0)
-      start = range.startOffset
-      end = range.endOffset
-    }
-
-    return [start, end]
-  }
+    let nodes = Array.from(field.current.childNodes)
 
-  useEffect(() => {
-    // return
-    let [start, end] = text.revert
+    nodes = nodes.filter(
+      (item: any) => !["#text", "BR"].includes(item.nodeName)
+    )
 
-    if (start == 0 && end == 0) return
+    let startParent: any = selection.anchorNode.parentNode
+
+    let startNodeIndex =
+      startParent == field.current
+        ? nodes.length
+        : // : parseInt(startParent.dataset.childIndex)
+          getChildIndex(startParent)
+
+    let startPrecedingSum = nodes
+      .slice(0, startNodeIndex)
+      .map((span: any) => span.textContent.length)
+      .reduce((a, b) => a + b, 0)
+
+    let endParent: any = selection.focusNode.parentNode
+    let endNodeIndex =
+      endParent == field.current
+        ? nodes.length
+        : // : parseInt(endParent.dataset.childIndex)
+          getChildIndex(endParent)
+
+    let endPrecedingSum = nodes
+      .slice(0, endNodeIndex)
+      .map((span: any) => span.textContent.length)
+      .reduce((a, b) => a + b, 0)
+
+    let result = [
+      startPrecedingSum + selection.anchorOffset,
+      endPrecedingSum + selection.focusOffset,
+    ]
 
-    let oldStart = start
-    let oldEnd = end
+    // Sort to make the minimum selection the start selection
+    return result.sort((a, b) => a - b)
+  }
 
-    let [newStart, newEnd] = getFieldSelection()
+  useEffect(() => {
+    setTimeout(function () {
+      let [start, end] = _text.current.revert
 
-    // TODO: To get the child node based on the index, get lengths of each child node
-    // add to each child node the sum of all previous child nodes
-    // Create ranges for 0 - n, n - n1, n - n2, ... where nx is the length of a child node
-    // Add 1 to the index
-    // Iterate through each range, and check if the index is greater than the start of the range, and less than or equal the end of the range
-    let startNode = null
-    let endNode = null
+      if (start == 0 && end == 0) return
 
-    let startNodeIndex = 0
-    let endNodeIndex = 0
+      let startNode = null
+      let endNode = null
 
-    let total = 0
-    let nodes = Array.from(field.current.childNodes)
+      let total = 0
+      let nodes = Array.from(field.current.childNodes)
 
-    console.log(
-      `Current nodes: ${nodes.map((e: any) => e.textContent.length).join(", ")}`
-    )
+      for (let i = 0; i < nodes.length; i++) {
+        let node: any = nodes[i]
+        let sum = node.textContent.length + total
 
-    for (let i = 0; i < nodes.length; i++) {
-      let node: any = nodes[i]
-      let sum = node.textContent.length + total
+        if (startNode == null && start >= total && start <= sum) {
+          startNode = nodes[i]
+          start -= total
+        }
 
-      if (startNode == null && start > total && start <= sum) {
-        startNode = nodes[i]
-        startNodeIndex = i
-        start -= total
-      }
+        if (endNode == null && end > total && end <= sum) {
+          endNode = nodes[i]
+          end -= total
+        }
 
-      if (endNode == null && end > total && end <= sum) {
-        endNode = nodes[i]
-        endNodeIndex = i
-        end -= total
+        total += node.textContent.length
       }
 
-      total += node.textContent.length
-    }
-
-    console.log(
-      `Reverting (${newStart} -> ${newEnd}) to (${oldStart} - ${start} - [node ${startNodeIndex}] -> ${oldEnd} - ${end} - [node ${endNodeIndex}])`
-    )
-
-    var range = document.createRange()
-    var sel = window.getSelection()
+      var range = document.createRange()
+      var sel = window.getSelection()
 
-    range.setStart(startNode.firstChild, start)
-    range.setEnd(endNode.firstChild, end)
-    // range.collapse(true)
+      range.setStart(startNode.firstChild, start)
+      range.setEnd(endNode.firstChild, end)
 
-    sel.removeAllRanges()
-    sel.addRange(range)
+      sel.removeAllRanges()
+      sel.addRange(range)
+    }, 1)
   }, [text.revert])
 
   // utility functions
@@ -239,7 +261,7 @@ export const FloatingCommentCE: React.FunctionComponent<ComponentTypes> = (
   }
 
   const perform = (id) => {
-    let stylings = text.stylings.slice()
+    let stylings = _text.current.stylings.slice()
     let [selectionStart, selectionEnd] = getFieldSelection()
 
     if (selectionStart == selectionEnd) return
@@ -280,6 +302,36 @@ export const FloatingCommentCE: 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
@@ -308,56 +360,288 @@ export const FloatingCommentCE: React.FunctionComponent<ComponentTypes> = (
     )
   }
 
-  const onChange = (value) => {
-    let difference = value.length - text.content.length
+  const handleScenario = (stylings, predicate) => {
+    let matches = stylings.filter(({ start: _start, finish: _finish }) =>
+      predicate(_start, _finish)
+    )
 
-    let selection = field.current.selectionStart - difference
+    let indices = []
 
-    let stylings = text.stylings.slice()
-    let succeeding = getSucceedStylings(selection)
+    stylings.map((styling, index) => {
+      let result = matches.find((item) => compareStylings(styling, item))
+      if (!result) return
+      indices.push({
+        index: index,
+        start: styling.start,
+        finish: styling.finish,
+      })
+    })
+
+    return indices
+  }
+
+  const handleDeletion = (length, start, end) => {
+    let stylings = _text.current.stylings.slice()
     let changes = []
 
-    for (let succeed of succeeding) {
-      let index = getStylingIndex(succeed)
-      let styling = stylings[index]
+    console.log(`Deletion`)
+    console.log([start, end])
+
+    // 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,
+      })
+    })
 
-      changes.push([
-        index,
-        styling.start + difference,
-        styling.finish + difference,
-      ])
-    }
+    // 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,
+      })
+    })
 
-    let intersecting = getIntersectStylings(selection, 1, 1)
+    // 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,
+      })
+    })
 
-    for (let intersect of intersecting) {
-      let index = getStylingIndex(intersect)
-      let styling = stylings[index]
+    // 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,
+      })
+    })
 
-      changes.push([index, styling.start, styling.finish + difference])
-    }
+    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
+
+      changes.push({
+        index: index,
+        start: styling.start,
+        finish: getMinimum([start, styling.finish]),
+      })
+    })
 
-    let spliced = []
-    for (let [index, start, finish] of changes) {
+    // Apply changes
+    changes.map(({ index, start, finish }) => {
       stylings[index] = {
         ...stylings[index],
         start: start,
         finish: finish,
       }
+    })
 
-      if (start >= finish) spliced.push(index)
-    }
+    // Handle complete encapsulation by styling
+    // stylings = stylings.map((styling) => {
+    //   if (start >= styling.start && end <= styling.finish) {
+    //     console.log("hi")
+    //   }
+
+    //   return styling
+    // })
 
-    stylings = stylings.filter((_, index) => !spliced.includes(index))
+    // 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
 
-    setText({ ...text, content: value, stylings: stylings })
+    // console.log(succeeding)
+
+    // If the start and finish of any styling is greater than the new length, remove it
+
+    return stylings
+  }
+
+  const handleAddition = (length, start, end) => {
+    start -= length
+    end -= length
+
+    let stylings = _text.current.stylings.slice()
+
+    let changes = []
+
+    let succeeding = handleScenario(
+      stylings,
+      (_start, _finish) => _start + 1 >= start && _start + 1 >= end
+    ).map((styling) => {
+      return {
+        ...styling,
+        start: styling.start + length,
+        finish: styling.finish + length,
+      }
+    })
+    changes.push(succeeding)
+
+    console.log(`Addition (${length})`)
+    console.log([start, end])
+    console.log(`Succeeding:`)
+    console.log(succeeding)
+
+    let preceding = handleScenario(
+      stylings,
+      (_start, _finish) => start <= _finish && start >= _start + 2
+    ).map((styling) => {
+      return {
+        ...styling,
+        start: styling.start,
+        finish: styling.finish + length,
+      }
+    })
+    changes.push(preceding)
+
+    console.log(`Preceding:`)
+    console.log(preceding)
+
+    changes.flat().map(({ index, start, finish }) => {
+      stylings[index] = {
+        ...stylings[index],
+        start: start,
+        finish: finish,
+      }
+    })
+
+    return stylings
+  }
+
+  const handlePaste = (stylings, start, end) => {
+    console.log([start, end])
+    console.log(stylings)
+
+    return stylings
+  }
+
+  const onChange = (value) => {
+    setTimeout(function () {
+      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()
+
+      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),
+          selectionStart,
+          selectionEnd + Math.abs(difference)
+        )
+      }
+
+      if (difference > 0) {
+        stylings = handleAddition(
+          Math.abs(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(
+          stylings,
+          selectionStart - _text.current.pasted.length,
+          selectionStart
+        )
+      }
+
+      setText({
+        ..._text.current,
+        content: value,
+        stylings: stylings,
+        revert: [selectionStart, selectionEnd],
+        pasted: { status: false, length: 0 },
+      })
+    }, 0)
   }
 
   const getContent = () => {
-    let content = text.content
+    let content = _text.current.content
 
     // Get all styling indices
-    let indices = text.stylings
+    let indices = _text.current.stylings
       .map(({ start, finish }) => [start, finish])
       .flat()
 
@@ -373,7 +657,7 @@ export const FloatingCommentCE: React.FunctionComponent<ComponentTypes> = (
     if (indices[0] != 0) indices.unshift(0)
 
     // Add last index if not present
-    let last = text.content.length
+    let last = content.length
     if (indices[indices.length - 1] != last) indices.push(last)
 
     let result = []
@@ -385,6 +669,56 @@ export const FloatingCommentCE: 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()
+      .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) => styleClasses[styling.type])
+          .join(" ")}" data-child-index="${index}">${data}</span>`
+      })
+      .join("")
+
+    field.current.innerHTML = html
+  }, [text.content, text.stylings, text.revert])
+
   return (
     <div className="align-center box-border flex h-min w-[400px] flex-col items-center justify-center rounded bg-blue-300 shadow-md">
       <div className={clsx("flex w-full flex-row justify-start p-2")}>
@@ -397,19 +731,22 @@ export const FloatingCommentCE: React.FunctionComponent<ComponentTypes> = (
         />
         <Property
           name="I"
-          onClick={() => {
+          onMouseDown={(event) => {
+            event.preventDefault()
             perform("italic")
           }}
         />
         <Property
           name="U"
-          onClick={() => {
+          onMouseDown={(event) => {
+            event.preventDefault()
             perform("under")
           }}
         />
         <Property
           name="S"
-          onClick={() => {
+          onMouseDown={(event) => {
+            event.preventDefault()
             perform("strike")
           }}
         />
@@ -419,106 +756,92 @@ export const FloatingCommentCE: React.FunctionComponent<ComponentTypes> = (
         <div
           ref={field}
           contentEditable="true"
-          role="textbox"
-          dangerouslySetInnerHTML={{
-            __html: getContent()
-              .map((_data, index) => {
-                let [start, data] = _data
-
-                // Get stylings encompassing an index within it's range
-                let stylings = getIntersectStylings(start)
-
-                return `<span class="${stylings
-                  .map((styling) => styleClasses[styling.type])
-                  .join("")}">${data}</span>`
-                // return `<span
-                //     class="${stylings
-                //       .map((styling) => styleClasses[styling.type])
-                //       .join(" ")}"
-
-                //   >
-                //     ${data}
-                //   </span>`
-              })
-              .join(""),
-          }}
-          className="h-[150px] w-full resize-none border-none p-2 outline-none"
-          onInput={(event) => {
-            let target: any = event.target
+          className="h-[150px] w-full resize-none overflow-auto overflow-x-hidden border-none p-2 outline-none"
+          onPaste={(event) => {
+            // pastes all copied text from the content editable as plain text
+            event.preventDefault()
+            const data = event.clipboardData.getData("text/plain")
+            document.execCommand("insertHTML", false, data)
+
+            console.log(data)
+
+            setText({
+              ..._text.current,
+              pasted: { status: 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) => {
             let [start, end] = getFieldSelection()
 
-            // console.log(target)
-            // console.log(target.selectionStart)
-            // console.log(target.selectionEnd)
+            let data = serializeStyleInRange(start, end)
 
             setText({
               ...text,
-              content: target.textContent,
-              revert: [start, end],
+              lastCopy: data,
             })
           }}
+          // onKeyDown={(event: any) => {
+          //   event.preventDefault()
+          //   console.log(event)
+          // }}
         ></div>
-
-        {/* <RichTextarea
-          ref={field}
-          value={text.content}
-          style={{ width: "100%" }} // tailwind w-full does not work
-          className="order-none h-[150px] resize-none p-2 outline-none"
-          onChange={(e) => {
-            onChange(e.target.value)
-          }}
-        >
-          {(value) => {
-            // Get all styling indices
-            let indices = text.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 = text.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],
-                value.substring(indices[i], indices[i + 1]),
-              ])
-            }
-
-            return result.map((_data, index) => {
-              let [start, data] = _data
-
-              // Get stylings encompassing an index within it's range
-              let stylings = getIntersectStylings(start)
-
-              return (
-                <span
-                  key={index}
-                  className={`${stylings
-                    .map((styling) => styleClasses[styling.type])
-                    .join(" ")}
-                  `}
-                >
-                  {data}
-                </span>
-              )
-            })
-          }}
-        </RichTextarea> */}
       </div>
       <div className="h-[1px] w-full bg-slate-600">&nbsp;</div>
       <button className="my-1 rounded bg-cyan-800 p-2 py-1 text-white">