@sikka/hawa 0.0.231 → 0.0.232

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.231",
+  "version": "0.0.232",
   "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}

@@ -26,7 +26,7 @@ const styleClasses = {
   strike: "line-through",
 }
 
-export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
+export const FloatingCommentCE: React.FunctionComponent<ComponentTypes> = (
   props
 ) => {
   const [text, setText] = useState({
@@ -37,13 +37,35 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
 
   const field = useRef(null)
 
+  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]
+  }
+
   useEffect(() => {
+    // return
     let [start, end] = text.revert
 
     if (start == 0 && end == 0) return
 
-    console.log(start)
-    console.log(end)
+    let oldStart = start
+    let oldEnd = end
+
+    let [newStart, newEnd] = getFieldSelection()
 
     // 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
@@ -53,38 +75,45 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     let startNode = null
     let endNode = null
 
+    let startNodeIndex = 0
+    let endNodeIndex = 0
+
     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
 
-      if (start > total && start <= sum) {
+      if (startNode == null && start > total && start <= sum) {
         startNode = nodes[i]
+        startNodeIndex = i
+        start -= total
       }
 
-      if (end > total && end <= sum) {
+      if (endNode == null && end > total && end <= sum) {
         endNode = nodes[i]
+        endNodeIndex = i
+        end -= total
       }
 
       total += node.textContent.length
     }
 
-    // console.log(
-    //   Array.from(field.current.childNodes).map(
-    //     (item) => item.textContent.length
-    //   )
-    // )
-
-    console.log(startNode)
-    console.log(endNode)
+    console.log(
+      `Reverting (${newStart} -> ${newEnd}) to (${oldStart} - ${start} - [node ${startNodeIndex}] -> ${oldEnd} - ${end} - [node ${endNodeIndex}])`
+    )
 
     var range = document.createRange()
     var sel = window.getSelection()
 
     range.setStart(startNode.firstChild, start)
     range.setEnd(endNode.firstChild, end)
-    range.collapse(true)
+    // range.collapse(true)
 
     sel.removeAllRanges()
     sel.addRange(range)
@@ -247,6 +276,7 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     setText({
       ...text,
       stylings: result,
+      revert: [selectionStart, selectionEnd],
     })
   }
 
@@ -355,24 +385,8 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
     return result
   }
 
-  const getFieldSelection = () => {
-    if (document.activeElement != field.current) return [0, 0]
-
-    let selection = window.getSelection()
-    let start
-    let end
-
-    if (selection.rangeCount) {
-      let range = selection.getRangeAt(0)
-      start = range.startOffset
-      end = range.endOffset
-    }
-
-    return [start, end]
-  }
-
   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"
@@ -405,6 +419,7 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
         <div
           ref={field}
           contentEditable="true"
+          role="textbox"
           dangerouslySetInnerHTML={{
             __html: getContent()
               .map((_data, index) => {
@@ -425,7 +440,7 @@ export const FloatingComment: React.FunctionComponent<ComponentTypes> = (
                 //     ${data}
                 //   </span>`
               })
-              .join(" "),
+              .join(""),
           }}
           className="h-[150px] w-full resize-none border-none p-2 outline-none"
           onInput={(event) => {

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 {};