@sikka/hawa 0.0.231 → 0.0.233

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.231",
+  "version": "0.0.233",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -113,6 +113,9 @@
     "react-select": "^5.3.2",
     "rich-textarea": "^0.21.1",
     "rollup-plugin-typescript2": "^0.34.1",
+    "slate": "^0.94.1",
+    "slate-history": "^0.93.0",
+    "slate-react": "^0.97.1",
     "start": "^5.1.0"
   }
 }

package/src/elements/{FloatingComment - ContentEditable.tsx → 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,68 +24,101 @@ const styleClasses = {
   strike: "line-through",
 }
 
-export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
+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],
   })
 
   const field = useRef(null)
+  const _text = useRef(text)
+  const setText = (data) => {
+    _text.current = data
+    _setText(data)
+  }
 
-  useEffect(() => {
-    let [start, end] = text.revert
+  // Full reversion achieved !
+  const getFieldSelection = () => {
+    if (document.activeElement != field.current) return [0, 0]
 
-    if (start == 0 && end == 0) return
+    let selection = window.getSelection()
+    let nodes = Array.from(field.current.childNodes)
+    nodes = nodes.filter(
+      (item: any) => !["#text", "BR"].includes(item.nodeName)
+    )
 
-    console.log(start)
-    console.log(end)
+    let startParent: any = selection.anchorNode.parentNode
+    let startNodeIndex =
+      startParent == field.current
+        ? nodes.length
+        : parseInt(startParent.dataset.childIndex)
+
+    let startPrecedingSum = nodes
+      .slice(0, startNodeIndex)
+      .map((span: any) => span.textContent.length)
+      .reduce((a, b) => a + b, 0)
+
+    let endParent: any = selection.anchorNode.parentNode
+    let endNodeIndex =
+      endParent == field.current
+        ? nodes.length
+        : parseInt(endParent.dataset.childIndex)
+
+    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,
+    ]
 
-    // 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
+    // Sort to make the minimum selection the start selection
+    return result.sort((a, b) => a - b)
+  }
 
-    let total = 0
-    let nodes = Array.from(field.current.childNodes)
-    for (let i = 0; i < nodes.length; i++) {
-      let node: any = nodes[i]
-      let sum = node.textContent.length + total
+  useEffect(() => {
+    setTimeout(function () {
+      let [start, end] = text.revert
 
-      if (start > total && start <= sum) {
-        startNode = nodes[i]
-      }
+      if (start == 0 && end == 0) return
 
-      if (end > total && end <= sum) {
-        endNode = nodes[i]
-      }
+      let startNode = null
+      let endNode = null
 
-      total += node.textContent.length
-    }
+      let total = 0
+      let nodes = Array.from(field.current.childNodes)
+
+      for (let i = 0; i < nodes.length; i++) {
+        let node: any = nodes[i]
+        let sum = node.textContent.length + total
 
-    // console.log(
-    //   Array.from(field.current.childNodes).map(
-    //     (item) => item.textContent.length
-    //   )
-    // )
+        if (startNode == null && start >= total && start <= sum) {
+          startNode = nodes[i]
+          start -= total
+        }
 
-    console.log(startNode)
-    console.log(endNode)
+        if (endNode == null && end > total && end <= sum) {
+          endNode = nodes[i]
+          end -= total
+        }
 
-    var range = document.createRange()
-    var sel = window.getSelection()
+        total += node.textContent.length
+      }
+
+      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)
+    }, 0)
   }, [text.revert])
 
   // utility functions
@@ -247,6 +278,7 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     setText({
       ...text,
       stylings: result,
+      revert: [selectionStart, selectionEnd],
     })
   }
 
@@ -279,9 +311,11 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
   }
 
   const onChange = (value) => {
+    let [selectionStart, selectionEnd] = getFieldSelection()
+
     let difference = value.length - text.content.length
 
-    let selection = field.current.selectionStart - difference
+    let selection = selectionStart - difference
 
     let stylings = text.stylings.slice()
     let succeeding = getSucceedStylings(selection)
@@ -320,14 +354,21 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
 
     stylings = stylings.filter((_, index) => !spliced.includes(index))
 
-    setText({ ...text, content: value, stylings: stylings })
+    // if (difference == 1) difference = 0
+
+    setText({
+      ...text,
+      content: value,
+      stylings: stylings,
+      revert: [selectionStart, selectionEnd],
+    })
   }
 
   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()
 
@@ -343,7 +384,7 @@ export const FloatingComment: 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 = []
@@ -355,24 +396,26 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     return result
   }
 
-  const getFieldSelection = () => {
-    if (document.activeElement != field.current) return [0, 0]
+  // 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
 
-    let selection = window.getSelection()
-    let start
-    let end
+        // Get stylings encompassing an index within it's range
+        let stylings = getIntersectStylings(start)
 
-    if (selection.rangeCount) {
-      let range = selection.getRangeAt(0)
-      start = range.startOffset
-      end = range.endOffset
-    }
+        return `<span class="${stylings
+          .map((styling) => styleClasses[styling.type])
+          .join(" ")}" data-child-index="${index}">${data}</span>`
+      })
+      .join("")
 
-    return [start, end]
-  }
+    field.current.innerHTML = html
+  }, [text])
 
   return (
-    <div className="align-center box-border flex h-min w-[400px] flex-col items-center justify-center rounded bg-gray-300 shadow-md">
+    <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")}>
         <Property
           name="B"
@@ -383,19 +426,22 @@ export const FloatingComment: 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")
           }}
         />
@@ -405,105 +451,11 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
         <div
           ref={field}
           contentEditable="true"
-          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
-
-            let [start, end] = getFieldSelection()
-
-            // console.log(target)
-            // console.log(target.selectionStart)
-            // console.log(target.selectionEnd)
-
-            setText({
-              ...text,
-              content: target.textContent,
-              revert: [start, end],
-            })
+          onInput={(event: any) => {
+            onChange(event.target.textContent)
           }}
         ></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">

package/src/elements/FloatingCommentSlate.tsx

@@ -0,0 +1,149 @@
+// Import React dependencies.
+import React, { useState, useCallback } from "react"
+// Import the Slate editor factory.
+import { Editor, Transforms, Element, createEditor } from "slate"
+
+// Import the Slate components and React plugin.
+import { Slate, Editable, withReact } from "slate-react"
+
+// TypeScript users only add this code
+import { BaseEditor, Descendant } from "slate"
+import { ReactEditor } from "slate-react"
+
+type CustomElement = { type: "paragraph"; children: CustomText[] }
+type CustomText = { text: string }
+
+declare module "slate" {
+  interface CustomTypes {
+    Editor: BaseEditor & ReactEditor
+    Element: CustomElement
+    Text: CustomText
+  }
+}
+
+const initialValue: Descendant[] = [
+  {
+    type: "paragraph",
+    children: [{ text: "" }],
+  },
+]
+
+let styles = {
+  bold: { fontWeight: "bold" },
+  italic: { fontStyle: "italic" },
+  underline: { textDecoration: "underline" },
+  strikethrough: { textDecoration: "line-through" },
+}
+
+const Leaf = (props) => {
+  let data = Object.assign({}, props.leaf)
+  delete data.text
+
+  let keys = Object.entries(data)
+    .filter(([key, value]) => value)
+    .map(([key, _]) => key)
+
+  let types = {}
+
+  if (keys.length != 0) {
+    keys.map((type) => {
+      Object.entries(styles[type]).map(([key, value]) => {
+        types[key] = value
+      })
+    })
+  }
+
+  return (
+    <span {...props.attributes} style={types}>
+      {props.children}
+    </span>
+  )
+}
+
+const Property = (props) => {
+  return (
+    <div
+      className="border-box mr-[5px] flex h-[32px] w-[32px] items-center justify-center rounded bg-gray-400 p-2"
+      onMouseDown={props.onMouseDown}
+    >
+      {props.name}
+    </div>
+  )
+}
+
+export const FloatingCommentSlate = () => {
+  const [editor] = useState(() => withReact(createEditor()))
+
+  // Define a leaf rendering function that is memoized with `useCallback`.
+  const renderLeaf = useCallback((props) => {
+    return <Leaf {...props} />
+  }, [])
+
+  const perform = (event, type) => {
+    event.preventDefault() // This does not take focus away from field which allows the function to retrieve the current selection data
+
+    let current = Editor.marks(editor)[type] || false
+    console.log(Editor.marks(editor))
+    // if (!types.includes(type)) types.push(type)
+
+    Editor.addMark(editor, type, !current)
+  }
+
+  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={"flex w-full flex-row justify-start p-2"}>
+        <Property
+          name="B"
+          onMouseDown={(event) => {
+            perform(event, "bold")
+          }}
+        />
+        <Property
+          name="I"
+          onMouseDown={(event) => {
+            perform(event, "italic")
+          }}
+        />
+        <Property
+          name="U"
+          onMouseDown={(event) => {
+            perform(event, "underline")
+          }}
+        />
+        <Property
+          name="S"
+          onMouseDown={(event) => {
+            perform(event, "strikethrough")
+          }}
+        />
+      </div>
+      <div className="h-[1px] w-full bg-slate-600">&nbsp;</div>
+      <div className="w-full">
+        <Slate editor={editor} initialValue={initialValue}>
+          <Editable
+            renderLeaf={renderLeaf}
+            className="h-[150px] p-2"
+            onKeyDown={(event) => {
+              if (!event.ctrlKey) {
+                return
+              }
+
+              switch (event.key) {
+                // When "B" is pressed, bold the text in the selection.
+                case "b": {
+                  event.preventDefault()
+                  Editor.addMark(editor, "bold", true)
+                  break
+                }
+              }
+            }}
+          />
+        </Slate>
+      </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">
+        Submit
+      </button>
+    </div>
+  )
+}

package/src/elements/index.ts

@@ -33,6 +33,8 @@ export * from "./HawaDatepicker"
 export * from "./UserFeedback"
 export * from "./ArrowCarousel"
 export * from "./FloatingComment"
+export * from "./FloatingCommentCE"
+export * from "./FloatingCommentSlate"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/styles.css

@@ -1503,6 +1503,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
+.bg-blue-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+}
 .bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));

package/es/elements/FloatingComment - ContentEditable.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-type ComponentTypes = {
-    foo?: string;
-};
-export declare const FloatingComment: React.FunctionComponent<ComponentTypes>;
-export {};

package/lib/elements/FloatingComment - ContentEditable.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-type ComponentTypes = {
-    foo?: string;
-};
-export declare const FloatingComment: React.FunctionComponent<ComponentTypes>;
-export {};