@collabchron/notiq 0.2.0

package/src/components/ui/stepper/step.tsx

@@ -0,0 +1,179 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import ImagesPlugin from "../../editor/plugins/ImagesPlugin";
+import { Plus } from "lucide-react";
+import { Reorder } from "framer-motion";
+import { StepType } from "../../editor/nodes/Stepper";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { useSharedHistoryContext } from "@/components/providers/SharedHistoryContext";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { nestedNodes } from "../../editor/nodes";
+import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
+import LexicalAutoLinkPlugin from "../../editor/plugins/AutoLinkPlugin";
+import { LinkWithMetaDataPlugin } from "../../editor/plugins/LinkWithMetaData";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
+import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
+import CodeHighlightPlugin from "../../editor/plugins/CodeHighlightPlugin";
+import { mergeRegister } from "@lexical/utils";
+import {
+  COMMAND_PRIORITY_LOW,
+  LexicalEditor,
+  SELECTION_CHANGE_COMMAND,
+} from "lexical";
+import FloatingTextFormatToolbarPlugin from "../../editor/plugins/FloatingTextFormatToolbarPlugin";
+import SlashCommand from "../../editor/plugins/SlashCommand";
+import CodeActionMenuPlugin from "../../editor/plugins/CodeActionMenuPlugin";
+import FloatingLinkEditorPlugin from "../../editor/plugins/FloatingLinkEditorPlugin";
+
+interface Props {
+  item: StepType;
+  numberd: number;
+  insertAt: (index: number) => void;
+  remove: (numberd: number) => void;
+  updateTitle: (index: number, title: string) => void;
+}
+
+export default function Step({
+  item,
+  numberd,
+  insertAt,
+  remove,
+  updateTitle,
+}: Props) {
+
+  const titleRef = React.useRef<HTMLDivElement>(null);
+  const [isLinkEditMode, setIsLinkEditMode] = React.useState<boolean>(false);
+  const [floatingAnchorElem, setFloatingAnchorElem] =
+    useState<HTMLDivElement | null>(null);
+  const { historyState } = useSharedHistoryContext();
+  const activeEditorRef = useRef<LexicalEditor | null>(null);
+
+  const handleTitleBlur = () => {
+    if (titleRef.current) {
+      updateTitle(item.id, titleRef.current.textContent!)
+    }
+  };
+
+  // fix the delete
+  const handleTitleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Backspace") {
+      const currentText = titleRef.current?.textContent || "";
+      if (currentText === "") {
+        e.preventDefault();
+        remove(item.id);
+      }
+    }
+  };
+
+  const onRef = useCallback((_floatingAnchorElem: HTMLDivElement | null) => {
+    setFloatingAnchorElem(_floatingAnchorElem);
+  }, []);
+
+
+  useEffect(() => {
+    const unregister = mergeRegister(
+      item.content.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_, activeEditor) => {
+          activeEditorRef.current = activeEditor;
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    );
+    return () => {
+      unregister();
+    };
+  }, []);
+
+  return (
+    <Reorder.Item
+      value={item}
+      id={item.id.toString()}
+      initial={{ opacity: 0, y: 30 }}
+      animate={{ opacity: 1, y: 0, transition: { duration: 0.15 } }}
+      exit={{ opacity: 0, y: 20, transition: { duration: 0.3 } }}
+      className="relative group my-2 flex w-full flex-row gap-x-6 select-none"
+    >
+      <div
+
+        className="h-7 w-7 absolute max-sm:w-5 max-sm:h-5 max-sm:text-xs rounded-full z-50 bg-muted cursor-grab flex items-center justify-center">
+        {numberd + 1}
+      </div>
+
+      <div className="flex flex-col ml-10 w-full">
+        <div
+          contentEditable
+          suppressContentEditableWarning
+          ref={titleRef}
+          onBlur={handleTitleBlur}
+          onKeyDown={handleTitleKeyDown}
+          className="scroll-m-20 border-none outline-none cursor-text break-words max-sm:text-lg text-2xl font-semibold tracking-tight"
+        >
+          {item.title}
+        </div>
+        <LexicalNestedComposer
+          initialEditor={item.content}
+          initialNodes={[...nestedNodes]}
+        >
+          <HistoryPlugin externalHistoryState={historyState} />
+          <AutoFocusPlugin />
+          <LinkPlugin />
+          <ImagesPlugin />
+          <HorizontalRulePlugin />
+          <LexicalAutoLinkPlugin />
+          <LinkWithMetaDataPlugin />
+          <ListPlugin />
+          <CheckListPlugin />
+          <LinkWithMetaDataPlugin />
+          <TabIndentationPlugin maxIndent={7} />
+          <CodeHighlightPlugin />
+          <LinkPlugin />
+          <RichTextPlugin
+            contentEditable={
+              <div ref={onRef} className="relative">
+                <ContentEditable
+                  className="h-fit w-full resize-none cursor-text relative outline-none select-text whitespace-pre-wrap break-words"
+                  aria-placeholder="Write hint caption"
+                  placeholder={
+                    <div className="text-base font-medium text-[#999] overflow-hidden absolute top-[2px] left-[2px]  text-nowrap inline-block text-ellipsis pointer-events-none">
+                      Step content
+                    </div>
+                  }
+                />
+              </div>
+            }
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+          {floatingAnchorElem && (
+            <>
+              <FloatingTextFormatToolbarPlugin
+                setIsLinkEditMode={setIsLinkEditMode}
+                anchorElem={floatingAnchorElem}
+              />
+              <CodeActionMenuPlugin anchorElem={floatingAnchorElem} />
+              <FloatingLinkEditorPlugin
+                anchorElem={floatingAnchorElem}
+                isLinkEditMode={isLinkEditMode}
+                setIsLinkEditMode={setIsLinkEditMode}
+              />
+            </>
+          )}
+          {item.content.isEditable() && <SlashCommand />}
+        </LexicalNestedComposer>
+      </div>
+
+      <div
+        onClick={() => insertAt(numberd + 1)}
+        className="absolute max-sm:left-[2px] left-[4px] top-[35px] z-40 max-sm:w-4 max-sm:h-4 w-[20px] h-[20px] flex items-center justify-center ring-1 ring-gray-700 bg-gray-800 rounded-full cursor-pointer transition-opacity opacity-0 duration-500 group-hover:opacity-100"
+      >
+        <Plus className="size-[12px]" />
+      </div>
+    </Reorder.Item>
+  );
+}

package/src/components/ui/stepper/stepper.tsx

@@ -0,0 +1,89 @@
+import { Reorder, AnimatePresence } from "framer-motion";
+import Step from "./step";
+import { $isStepperNode, initialEditorState, StepsType } from "../../editor/nodes/Stepper";
+import { $getNodeByKey, createEditor, NodeKey } from "lexical";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+
+export default function Stepper({
+  steps,
+  nodeKey,
+}: {
+  steps: StepsType,
+  nodeKey: NodeKey,
+}) {
+  const [editor] = useLexicalComposerContext();
+
+  
+  
+  function SetSteps(steps:StepsType){
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isStepperNode(node)) {
+        node.replaceSteps(steps);
+      }
+    });
+  }
+
+  const remove = (index: number) => {    
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isStepperNode(node)) {
+        node.deleteStep(index);
+      }
+    });
+  };
+
+  function updateTitle(id: number, title: string) {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isStepperNode(node)) {
+        node.updateTitle(id, title);
+      }
+    });
+  }
+
+  const insertAt = (index: number) => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isStepperNode(node)) {
+        const newId = Date.now(); 
+        const newEditor = createEditor();
+        const parsedEditorState = newEditor.parseEditorState(
+          JSON.stringify(initialEditorState)
+        );
+        newEditor.setEditorState(parsedEditorState);
+        const newStep = {
+          id: newId, 
+          title: `New step `,
+          content: newEditor,
+        };
+        
+        node.insertStepAtIndex(newStep, index);
+      }
+    });
+  };
+
+
+  return (
+    <Reorder.Group
+      axis="y"
+      values={steps}
+      onReorder={SetSteps}
+      className="h-fit my-2 min-h-[90px] w-full overflow-hidden flex flex-col relative"
+    >
+      <AnimatePresence initial={false}>
+        {steps.map((item, index) => (
+          <Step 
+            updateTitle={updateTitle} 
+            remove={remove} 
+            insertAt={insertAt} 
+            key={item.id} 
+            numberd={index} 
+            item={item} 
+          />
+        ))}
+      </AnimatePresence>
+      <div className="absolute w-0.5 max-sm:left-2 left-[13px] rounded-sm -z-1 bg-input top-4 h-full" />
+    </Reorder.Group>
+  );
+}

package/src/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/components/ui/toggle.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-zinc-100 hover:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-zinc-100 data-[state=on]:text-zinc-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:hover:bg-zinc-800 dark:hover:text-zinc-400 dark:focus-visible:ring-zinc-300 dark:data-[state=on]:bg-zinc-800 dark:data-[state=on]:text-zinc-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border-none cursor-pointer bg-transparent shadow-sm",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-7 rounded-md px-[6px] ",
+        lg: "h-10 px-2.5 min-w-10",
+        Toolbar:"h-7 w-7 p-3",
+        floting:" h-5 w-5 p-3"
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, tip, size, ...props }, ref) =>
+  tip ? (
+    <TooltipProvider>
+      <Tooltip delayDuration={0.2}>
+        <TooltipTrigger asChild>
+          <div>
+            <TogglePrimitive.Root
+              ref={ref}
+              className={cn(toggleVariants({ variant, size, className }))}
+              {...props}
+            />
+          </div>
+        </TooltipTrigger>
+        <TooltipContent side={"top"}>
+          <span>{tip}</span>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  ) : (
+    <TogglePrimitive.Root
+      ref={ref}
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+);
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }