Feat(component): [BL-7117] Adds WYSIWYG Editor

package.json

@@ -114,6 +114,19 @@
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@tiptap/extension-floating-menu": "^2.10.3",
+    "@tiptap/extension-highlight": "^2.10.3",
+    "@tiptap/extension-image": "^2.10.3",
+    "@tiptap/extension-link": "^2.10.3",
+    "@tiptap/extension-placeholder": "^2.10.3",
+    "@tiptap/extension-table": "^2.10.3",
+    "@tiptap/extension-table-cell": "^2.10.3",
+    "@tiptap/extension-table-header": "^2.10.3",
+    "@tiptap/extension-table-row": "^2.10.3",
+    "@tiptap/extension-text-align": "^2.10.3",
+    "@tiptap/pm": "^2.10.3",
+    "@tiptap/react": "^2.10.3",
+    "@tiptap/starter-kit": "^2.10.3",
     "carloslfu-cmdk-internal": "^0.3.1",
     "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",

src/components/checkbox-tree-view/checkbox-tree-view.stories.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TreeView } from './checkbox-tree-view';
+
+const meta: Meta = {
+  component: TreeView,
+  title: 'Components/Checkbox Tree View',
+};
+
+export default meta;
+type Story = StoryObj<typeof TreeView>;
+
+export const Demo: Story = {
+  render: (_) => {
+    const [treeData, setTreeData] = useState([
+      {
+        id: '1',
+        name: 'Parent 1',
+        value: 'parent1',
+        children: [
+          { id: '2', name: 'Child 1.1', value: 'child1.1' },
+          { id: '3', name: 'Child 1.2', value: 'child1.2' },
+        ],
+      },
+      {
+        id: '4',
+        name: 'Parent 2',
+        value: 'parent2',
+        children: [
+          {
+            id: '5',
+            name: 'Child 2.1',
+            value: 'child2.1',
+            children: [
+              { id: '6', name: 'Grandchild 2.1.1', value: 'grandchild2.1.1' },
+            ],
+          },
+        ],
+      },
+    ]);
+    const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+    const handleTreeChange = (selectedValues: string[]) => {
+      setSelectedValues(selectedValues);
+      console.log('Selected Values:', selectedValues);
+    };
+
+    return (
+      <div>
+        <TreeView data={treeData} onChange={handleTreeChange} />
+        <pre>
+          <p className='~font-bold'>Selected Values:</p>
+          {selectedValues.map((val) => (
+            <p>{val}</p>
+          ))}
+        </pre>
+      </div>
+    );
+  },
+};

src/components/checkbox-tree-view/checkbox-tree-view.tsx

@@ -0,0 +1,233 @@
+import React, { useState, useEffect } from 'react';
+import { FaChevronDown, FaChevronRight } from 'react-icons/fa';
+import { Checkbox } from '@components/checkbox/checkbox';
+import { Label } from '@components/label/label';
+import { Button } from '@components/button';
+
+type TreeNode = {
+  id: string;
+  name: string;
+  value: string;
+  children?: TreeNode[];
+};
+
+type TreeViewProps = {
+  data: TreeNode[];
+  onChange?: (selectedValues: string[]) => void;
+};
+
+type CheckedState = Record<
+  string,
+  { checked: boolean; indeterminate: boolean }
+>;
+
+const TreeView: React.FC<TreeViewProps> = ({ data, onChange }) => {
+  const [checkedState, setCheckedState] = useState<CheckedState>({});
+  const [expandedState, setExpandedState] = useState<Record<string, boolean>>(
+    {}
+  ); // Track expanded state
+
+  const reset = () => {
+    const newState = Object.keys(checkedState).reduce((acc, key) => {
+      acc[key] = { checked: false, indeterminate: false };
+      return acc;
+    }, {} as CheckedState);
+    setCheckedState(newState);
+    if (onChange) onChange([]);
+  };
+
+  useEffect(() => {
+    const initializeState = (nodes: TreeNode[]): CheckedState => {
+      const state: CheckedState = {};
+      const traverse = (node: TreeNode) => {
+        state[node.id] = { checked: false, indeterminate: false };
+        if (node.children) {
+          node.children.forEach(traverse);
+        }
+      };
+      nodes.forEach(traverse);
+      return state;
+    };
+
+    const initializeExpandedState = (
+      nodes: TreeNode[]
+    ): Record<string, boolean> => {
+      const state: Record<string, boolean> = {};
+      const traverse = (node: TreeNode) => {
+        state[node.id] = true; // Default to expanded
+        if (node.children) {
+          node.children.forEach(traverse);
+        }
+      };
+      nodes.forEach(traverse);
+      return state;
+    };
+
+    setCheckedState(initializeState(data));
+    setExpandedState(initializeExpandedState(data));
+  }, [data]);
+
+  const handleCheckboxChange = (id: string) => {
+    const newState = { ...checkedState };
+
+    const updateChildren = (nodeId: string, checked: boolean) => {
+      newState[nodeId].checked = checked;
+      newState[nodeId].indeterminate = false;
+      const node = findNodeById(data, nodeId);
+      if (node?.children) {
+        node.children.forEach((child) => updateChildren(child.id, checked));
+      }
+    };
+
+    const updateParents = (nodeId: string) => {
+      const parentNode = findParentById(data, nodeId, null);
+      if (parentNode) {
+        const allChecked = parentNode.children?.every(
+          (child) => newState[child.id].checked
+        );
+        const anyChecked = parentNode.children?.some(
+          (child) =>
+            newState[child.id].checked || newState[child.id].indeterminate
+        );
+
+        newState[parentNode.id].checked = !!allChecked;
+        newState[parentNode.id].indeterminate = !!(!allChecked && anyChecked);
+        updateParents(parentNode.id);
+      }
+    };
+
+    const currentNode = newState[id];
+    const isChecked = !currentNode.checked;
+    updateChildren(id, isChecked);
+    updateParents(id);
+
+    setCheckedState(newState);
+
+    if (onChange) {
+      // const selectedValues = Object.keys(newState)
+      //     .filter((key) => newState[key].checked)
+      //     .map((key) => findNodeById(data, key)?.value)
+      //     .filter(Boolean) as string[]
+      const selectedValues = getSelectedChildrenValues(data);
+      onChange(selectedValues);
+    }
+  };
+
+  const findNodeById = (nodes: TreeNode[], id: string): TreeNode | null => {
+    for (const node of nodes) {
+      if (node.id === id) return node;
+      if (node.children) {
+        const found = findNodeById(node.children, id);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+
+  const findParentById = (
+    nodes: TreeNode[],
+    id: string,
+    parent: TreeNode | null
+  ): TreeNode | null => {
+    for (const node of nodes) {
+      if (node.id === id) return parent;
+      if (node.children) {
+        const found = findParentById(node.children, id, node);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+
+  const toggleExpand = (id: string) => {
+    setExpandedState((prevState) => ({
+      ...prevState,
+      [id]: !prevState[id],
+    }));
+  };
+
+  const getSelectedChildrenValues = (nodes: TreeNode[]): string[] => {
+    let selectedValues: string[] = [];
+
+    nodes.forEach((node) => {
+      // If the node has children, recursively process them
+      if (node.children && node.children.length > 0) {
+        selectedValues = selectedValues.concat(
+          getSelectedChildrenValues(node.children)
+        );
+      } else if (checkedState[node.id]?.checked) {
+        // Only add leaf node values if they are checked
+        selectedValues.push(node.value);
+      }
+    });
+
+    return selectedValues;
+  };
+
+  const renderTree = (nodes: TreeNode[]) => (
+    <ul className='~ml-4 ~list-none'>
+      {nodes.map((node) => (
+        <li key={node.id}>
+          <div className='~mb-2 ~flex ~items-center ~gap-2'>
+            {/* Space reserved for Chevron, even if the node doesn't have one */}
+            <span className='~w-4 ~flex-shrink-0'>
+              {node.children && node.children.length > 0 && (
+                <span
+                  onClick={() => toggleExpand(node.id)}
+                  className='~cursor-pointer'
+                >
+                  {expandedState[node.id] ? (
+                    <FaChevronDown />
+                  ) : (
+                    <FaChevronRight />
+                  )}
+                </span>
+              )}
+            </span>
+            {/* <label className="flex items-center gap-2">
+                            <input
+                                type="checkbox"
+                                checked={
+                                    checkedState[node.id]?.checked || false
+                                }
+                                ref={(el) => {
+                                    if (el)
+                                        el.indeterminate =
+                                            checkedState[node.id]
+                                                ?.indeterminate || false
+                                }}
+                                onChange={() => handleCheckboxChange(node.id)}
+                            />
+                            {node.name}
+                        </label> */}
+
+            <Checkbox
+              data-testid={'checkbox-' + node.id}
+              {...(checkedState[node.id]?.indeterminate
+                ? { checked: 'indeterminate' }
+                : checkedState[node.id]?.checked
+                ? { checked: true }
+                : { checked: false })}
+              onClick={() => handleCheckboxChange(node.id)}
+            />
+
+            <Label data-testid={'label-' + node.id}>{node.name}</Label>
+          </div>
+          {/* Children are indented */}
+          {node.children && expandedState[node.id] && renderTree(node.children)}
+        </li>
+      ))}
+    </ul>
+  );
+
+  return (
+    <div>
+      {renderTree(data)}
+      <Button className='~mt-2' onClick={reset}>
+        Reset Tree
+      </Button>
+    </div>
+  );
+};
+
+export { TreeView };

src/components/editor/components/bubble-menu.tsx

@@ -0,0 +1,30 @@
+import { Editor, BubbleMenu as TipTapBubbleMenu } from '@tiptap/react'
+
+// Icons
+import { FaParagraph, FaBold, FaItalic } from "react-icons/fa";
+import { BsTypeH1, BsTypeH2 } from "react-icons/bs";
+
+import { MenuLink } from './menu-link';
+
+interface BubbleMenuProps {
+    editor: Editor
+}
+
+export const BubbleMenu = ({ editor }: BubbleMenuProps) => {
+    return (
+        <TipTapBubbleMenu
+            editor={editor}
+            className='~flex ~gap-4 ~rounded-md ~border ~border-gray-300 ~bg-white ~p-2 ~shadow-lg'
+            tippyOptions={{
+                placement: 'top', // Place above the selected text
+                duration: 150, // Animation duration
+            }}
+        >
+            <MenuLink title={<FaParagraph size={16} />} eventHandler={() => editor.chain().focus().setParagraph().run()} />
+            <MenuLink title={<BsTypeH1 size={16} />} eventHandler={() => editor.chain().focus().setHeading({ level: 1 }).run} />
+            <MenuLink title={<BsTypeH2 size={16} />} eventHandler={() => editor.chain().focus().setHeading({ level: 2 }).run} />
+            <MenuLink title={<FaBold size={16} />} eventHandler={() => editor.chain().focus().toggleBold().run()} />
+            <MenuLink title={<FaItalic size={16} />} eventHandler={() => editor.chain().focus().toggleItalic().run()} />
+        </TipTapBubbleMenu>
+    )
+}

src/components/editor/components/command-menu.tsx

@@ -0,0 +1,44 @@
+import { Button } from '@components/button';
+import { Editor } from '@tiptap/react'
+
+interface CommandMenuProps {
+    editor: Editor,
+    showCommandMenu: boolean
+}
+export const CommandMenu = ({
+    editor,
+    showCommandMenu
+}: CommandMenuProps) => {
+
+    return (
+        <>
+            {showCommandMenu && (
+                <div className='p-2 ~absolute ~rounded ~border ~border-gray-300 ~bg-gray-400 ~shadow-lg'>
+                    <Button onClick={editor.chain().focus().setParagraph().run}>
+                        Paragraph
+                    </Button>
+                    <Button
+                        onClick={editor.chain().focus().setHeading({ level: 1 }).run}
+                    >
+                        H1
+                    </Button>
+                    <Button
+                        onClick={editor.chain().focus().setHeading({ level: 2 }).run}
+                    >
+                        H2
+                    </Button>
+                    <Button
+                        onClick={editor.chain().focus().setHeading({ level: 3 }).run}
+                    >
+                        H3
+                    </Button>
+                    <Button
+                        onClick={editor.chain().focus().toggleBulletList().run}
+                    >
+                        Bullet List
+                    </Button>
+                </div>
+            )}
+        </>
+    )
+}