@collabchron/notiq 0.2.0

package/src/components/ui/drop-downs/font-size.tsx

@@ -0,0 +1,138 @@
+import * as React from "react";
+
+import { LexicalEditor } from "lexical";
+import { Minus, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { MAX_ALLOWED_FONT_SIZE, MIN_ALLOWED_FONT_SIZE } from "@/components/providers/ToolbarContext";
+import { updateFontSize, updateFontSizeInSelection, UpdateFontSizeType } from "../../editor/utils/editorFormatting";
+import { SHORTCUTS } from "../../editor/plugins/ShortcutsPlugin/shortcuts";
+import { Input } from "@/components/ui/input";
+
+export function parseAllowedFontSize(input: string): string {
+  const match = input.match(/^(\d+(?:\.\d+)?)px$/);
+  if (match) {
+    const n = Number(match[1]);
+    if (n >= MIN_ALLOWED_FONT_SIZE && n <= MAX_ALLOWED_FONT_SIZE) {
+      return input;
+    }
+  }
+  return "";
+}
+
+export default function FontSize({
+  selectionFontSize,
+  disabled,
+  editor,
+  className,
+  classNameContent
+}: {
+  selectionFontSize: string;
+  disabled: boolean;
+  editor: LexicalEditor;
+  className?:string,
+  classNameContent?:string
+}) {
+  const [inputValue, setInputValue] = React.useState<string>(selectionFontSize);
+  const [inputChangeFlag, setInputChangeFlag] = React.useState<boolean>(false);
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const inputValueNumber = Number(inputValue);
+
+    if (e.key === "Tab") {
+      return;
+    }
+    if (["e", "E", "+", "-"].includes(e.key) || isNaN(inputValueNumber)) {
+      e.preventDefault();
+      setInputValue("");
+      return;
+    }
+    setInputChangeFlag(true);
+    if (e.key === "Enter" || e.key === "Escape") {
+      e.preventDefault();
+
+      updateFontSizeByInputValue(inputValueNumber);
+    }
+  };
+  const handleInputBlur = () => {
+    if (inputValue !== "" && inputChangeFlag) {
+      const inputValueNumber = Number(inputValue);
+      updateFontSizeByInputValue(inputValueNumber);
+    }
+  };
+
+  const updateFontSizeByInputValue = (inputValueNumber: number) => {
+    let updatedFontSize = inputValueNumber;
+    if (inputValueNumber > MAX_ALLOWED_FONT_SIZE) {
+      updatedFontSize = MAX_ALLOWED_FONT_SIZE;
+    } else if (inputValueNumber < MIN_ALLOWED_FONT_SIZE) {
+      updatedFontSize = MIN_ALLOWED_FONT_SIZE;
+    }
+
+    setInputValue(String(updatedFontSize));
+    updateFontSizeInSelection(editor, String(updatedFontSize) + "px", null);
+    setInputChangeFlag(false);
+  };
+
+  React.useEffect(() => {
+    setInputValue(selectionFontSize);
+  }, [selectionFontSize]);
+  return (
+    <div className={cn("flex flex-row items-center gap-1",classNameContent)}>
+      <Button
+        type="button"
+        className={
+          cn("h-7 min-w-[29px] w-[29px]  px-[6px] border-none cursor-pointer",className)
+        }
+        tip={`decrement ${SHORTCUTS.INCREASE_FONT_SIZE}`}
+        disabled={
+          disabled ||
+          (selectionFontSize !== "" &&
+            Number(inputValue) <= MIN_ALLOWED_FONT_SIZE)
+        }
+        variant={"outline"}
+        size={"Toolbar"}
+        onClick={() =>
+          updateFontSize(editor, UpdateFontSizeType.decrement, inputValue)
+        }
+      >
+        <Minus className="w-[15px] h-[15px]" />
+      </Button>
+
+      <Input
+        type="number"
+        
+        value={inputValue}
+        disabled={disabled}
+        className={
+          cn("h-7 min-w-[29px] w-[29px]  px-[6px] border-none cursor-text",className)
+        }
+        min={MIN_ALLOWED_FONT_SIZE}
+        max={MAX_ALLOWED_FONT_SIZE}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyPress}
+        onBlur={handleInputBlur}
+      />
+      <Button
+        type="button"
+        tip={`increment ${SHORTCUTS.DECREASE_FONT_SIZE}`}
+        
+        className={
+          cn("h-7 min-w-[29px] w-[29px]  px-[6px] border-none cursor-pointer",className)
+        }
+
+        disabled={
+          disabled ||
+          (selectionFontSize !== "" &&
+            Number(inputValue) >= MAX_ALLOWED_FONT_SIZE)
+        }
+        variant={"outline"}
+        size={"Toolbar"}
+        onClick={() =>
+          updateFontSize(editor, UpdateFontSizeType.increment, inputValue)
+        }
+      >
+        <Plus className="w-4 h-4" />
+      </Button>
+    </div>
+  );
+}

package/src/components/ui/drop-downs/font.tsx

@@ -0,0 +1,155 @@
+import { $getSelection, LexicalEditor } from "lexical";
+import React, { CSSProperties, useCallback } from "react";
+import { $patchStyleText } from "@lexical/selection";
+import { DropDown } from ".";
+
+interface FontOption {
+  label: string;
+  func: () => void;
+  style: CSSProperties;
+}
+
+export default function Font({
+  editor,
+  style,
+  disabled,
+  value,
+  sideOffset,
+  side,
+  ShowChevronsUpDown,
+}: {
+  editor: LexicalEditor;
+  disabled: boolean;
+  value: string;
+  style?: React.CSSProperties;
+  ShowChevronsUpDown?: boolean;
+  side?: "top" | "right" | "bottom" | "left" | undefined;
+  sideOffset?: number;
+}) {
+  const applyFont = useCallback(
+    (font: string) => {
+      editor.update(() => {
+        const selection = $getSelection();
+        if (selection !== null) {
+          $patchStyleText(selection, {
+            ["font-family"]: font,
+          });
+        }
+      });
+    },
+    [editor, style]
+  );
+
+  const FONT_FAMILY_OPTIONS: FontOption[] = [
+    {
+      label: "Arial",
+      func: () => applyFont("Arial"),
+      style: { fontFamily: "Arial" },
+    },
+    {
+      label: "Courier New",
+      func: () => applyFont("Courier New"),
+      style: { fontFamily: "Courier New" },
+    },
+    {
+      label: "Georgia",
+      func: () => applyFont("Georgia"),
+      style: { fontFamily: "Georgia" },
+    },
+    {
+      label: "Times New Roman",
+      func: () => applyFont("Times New Roman"),
+      style: { fontFamily: "Times New Roman" },
+    },
+    {
+      label: "Trebuchet MS",
+      func: () => applyFont("Trebuchet MS"),
+      style: { fontFamily: "Trebuchet MS" },
+    },
+    {
+      label: "Verdana",
+      func: () => applyFont("Verdana"),
+      style: { fontFamily: "Verdana" },
+    },
+    {
+      label: "Comic Sans MS",
+      func: () => applyFont("Comic Sans MS"),
+      style: { fontFamily: "Comic Sans MS" },
+    },
+    {
+      label: "Calibri",
+      func: () => applyFont("Calibri"),
+      style: { fontFamily: "Calibri" },
+    },
+    {
+      label: "Poppins",
+      func: () => applyFont("Poppins"),
+      style: { fontFamily: "Poppins" },
+    },
+    {
+      label: "Alegreya",
+      func: () => applyFont("Alegreya"),
+      style: { fontFamily: "Alegreya" },
+    },
+    {
+      label: "Bree Serif",
+      func: () => applyFont("Bree Serif"),
+      style: { fontFamily: "Bree Serif" },
+    },
+    {
+      label: "Cambria",
+      func: () => applyFont("Cambria"),
+      style: { fontFamily: "Cambria" },
+    },
+    {
+      label: "Impact",
+      func: () => applyFont("Impact"),
+      style: { fontFamily: "Impact" },
+    },
+    {
+      label: "Lexend",
+      func: () => applyFont("Lexend"),
+      style: { fontFamily: "Lexend" },
+    },
+    {
+      label: "Lobster",
+      func: () => applyFont("Lobster"),
+      style: { fontFamily: "Lobster" },
+    },
+    {
+      label: "Lora",
+      func: () => applyFont("Lora"),
+      style: { fontFamily: "Lora" },
+    },
+    {
+      label: "Permanent Marker",
+      func: () => applyFont("Permanent Marker"),
+      style: { fontFamily: "Permanent Marker" },
+    },
+    {
+      label: "Ultra",
+      func: () => applyFont("Ultra"),
+      style: { fontFamily: "Ultra" },
+    },
+    {
+      label: "Reenie Beanie",
+      func: () => applyFont("Reenie Beanie"),
+      style: { fontFamily: "Reenie Beanie" },
+    },
+  ];
+
+
+  return (
+    <DropDown
+      ShowChevronsUpDown={ShowChevronsUpDown}
+      side={side}
+      sideOffset={sideOffset}
+      className="h-7 min-w-[29px] w-[29px] px-2 border-none cursor-pointer hover:bg-zinc-100 hover:text-zinc-900"
+      PopoverContentClassName={{ minWidth: "80px", width: "150px" }}
+      TriggerClassName={{ ...style, width: "100%" }}
+      disabled={disabled}
+      TriggerLabel={value}
+      values={FONT_FAMILY_OPTIONS}
+    />
+  );
+}

package/src/components/ui/drop-downs/index.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface values {
+  icon?: React.ReactNode;
+  label: string;
+  desc?: string;
+  func?: () => void;
+  style?: React.CSSProperties;
+  isSelected?: boolean;
+  shortcuts?: string;
+
+}
+interface Props {
+  TriggerLabel: React.ReactNode | string;
+  TriggerClassName?: React.CSSProperties;
+  className?: string;
+  PopoverContentClassName?: React.CSSProperties;
+  values: values[];
+  disabled: boolean;
+  triggerVariants?:"ghost" | "default" |"outline" |"link" | "secondary" | "destructive"
+  ShowChevronsUpDown?:boolean
+  side?: "top" | "right" | "bottom" | "left" | undefined
+  sideOffset?:number
+}
+
+export function DropDown({
+  className,
+  TriggerLabel,
+  TriggerClassName,
+  values,
+  disabled,
+  PopoverContentClassName,
+  triggerVariants="outline",
+  ShowChevronsUpDown=true,
+  side="bottom",
+  sideOffset=5
+}: Props) {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <Popover  modal={false}>
+      <PopoverTrigger  disabled={disabled} asChild>
+        <Button
+          variant={triggerVariants}
+          role="combobox"
+          size={"Toolbar"}
+          style={TriggerClassName}
+          className={className}
+        >
+          <div className="flex  flex-row justify-center gap-x-3 items-center">
+            {TriggerLabel}
+          </div>
+          {ShowChevronsUpDown && <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side={side}
+        sideOffset={sideOffset}
+        style={PopoverContentClassName!}
+        className="w-[200px] p-0 dropdown-portal"
+      >
+        <Command>
+          <CommandInput placeholder="Search..." />
+          <CommandList>
+            <CommandEmpty>No found.</CommandEmpty>
+            <CommandGroup>
+              {values.map((framework) => (
+                <CommandItem
+                  key={framework.label}
+                  value={framework.label}
+                  style={framework.style}
+                  className={cn(
+                    "cursor-pointer",
+                    value === framework.label && "bg-gray-300/10",
+                  )}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue);
+                    if (framework.func) framework?.func();
+                  }}
+                >
+                  <div className="flex w-full flex-row items-center justify-between">
+                    <div className="flex  items-center gap-4 flex-row">
+                      {framework.icon}
+                      <div className="flex flex-col">
+                        {framework.label}
+                        <span className="text-sm text-muted-foreground">
+                          {framework.desc}
+                        </span>
+                      </div>
+                    </div>
+                    {framework.shortcuts && (
+                      <CommandShortcut>{framework.shortcuts}</CommandShortcut>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/ui/drop-downs/insert-node.tsx

@@ -0,0 +1,213 @@
+import { LexicalEditor } from "lexical";
+import React, { useMemo, lazy, Suspense } from "react";
+import useModal from "../models/use-model";
+import { AlertCircle, Columns2, Columns3, Columns4, DraftingCompassIcon, Figma, FlipHorizontal2, Image, ImagePlay, PencilRuler, Plus, SquareChevronRight, SquarePenIcon, Table, Twitter, Youtube } from "lucide-react";
+import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
+import { DropDown } from ".";
+import { INSERT_IMAGE_COMMAND, InsertImagePayload } from "../../editor/plugins/ImagesPlugin";
+import { Skeleton } from "@/components/ui/skeleton";
+import { INSERT_LAYOUT_COMMAND } from "../../editor/plugins/LayoutPlugin";
+import { INSERT_COLLAPSIBLE_COMMAND } from "../../editor/plugins/CollapsiblePlugin";
+import { AutoEmbedDialog, FigmaEmbedConfig, TwitterEmbedConfig, YoutubeEmbedConfig } from "../../editor/plugins/AutoEmbedPlugin";
+import { INSERT_HINT_COMMAND } from "../../editor/nodes/Hint";
+import { INSERT_EXCALIDRAW_COMMAND } from "../../editor/plugins/ExcalidrawPlugin";
+
+const InsertImageDialog = lazy(() => import("@/components/ui/models/insert-image").then(module => ({ default: module.InsertImageDialog })));
+const InsertGif = lazy(() => import("../models/insert-gif"));
+const InsertTableBody = lazy(() => import("@/components/ui/models/insert-table").then(module => ({ default: module.InsertTable })));
+const InsertPoll = lazy(() =>
+  import("@/components/ui/models/insert-poll").then(module => ({ default: module.InsertPoll }))
+);
+
+interface Items {
+  label: string;
+  icon: React.ReactNode;
+  func: () => void;
+  shortcuts?: string;
+}
+
+export default function InsertNode({
+  disabled,
+  editor,
+}: {
+  disabled: boolean;
+  editor: LexicalEditor;
+}) {
+  const [model, showModal] = useModal();
+  const insertGifOnClick = (payload: InsertImagePayload) => {
+    editor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
+  };
+
+  const items: Items[] = useMemo(
+    () => [
+      {
+        label: "Horizontal Rule",
+        icon: <FlipHorizontal2 className="w-4 h-4" />,
+        func: () => editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
+      },
+      {
+        label: "Image",
+        icon: <Image className="size-4" />,
+        func: () => {
+          showModal(
+            "Insert Image",
+            "Please select an image to upload.",
+            (onClose) => (
+              <Suspense fallback={<Skeleton className="mx-2 w-[350px] h-[350px]" />}>
+                <InsertImageDialog activeEditor={editor} onClose={onClose} />
+              </Suspense>
+            ),
+            true
+          );
+        },
+      },
+      {
+        label: "GIF",
+        icon: <ImagePlay className="w-4 h-4" />,
+        func: () => {
+          showModal(
+            "Insert GIF",
+            "Please select a GIF to upload.",
+            (onClose) => (
+              <Suspense fallback={<Skeleton className="mx-2 w-[400px] h-[400px]" />}>
+                <InsertGif insertGifOnClick={insertGifOnClick} onClose={onClose} />
+              </Suspense>
+            ),
+            true
+          );
+        },
+      },
+      {
+        label: "Table",
+        icon: <Table className="w-4 h-4" />,
+        func: () => {
+          showModal(
+            "Insert Table",
+            "Please configure your table.",
+            (onClose) => (
+              <Suspense fallback={<Skeleton className="mx-2 w-[400px] h-[100px]" />}>
+                <InsertTableBody activeEditor={editor} onClose={onClose} />
+              </Suspense>
+            ),
+            true
+          );
+        },
+      },
+      {
+        label: "ExcaliDraw",
+        icon: <DraftingCompassIcon className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(INSERT_EXCALIDRAW_COMMAND, undefined);
+        },
+      },
+      {
+        label: "Poll",
+        icon: <SquarePenIcon className="w-4 h-4" />,
+        func: () => {
+          showModal(
+            "Create Poll",
+            "Please type your question.",
+            (onClose) => (
+              <Suspense fallback={<Skeleton className="mx-2 w-[400px] h-[100px]" />}>
+                <InsertPoll activeEditor={editor} onClose={onClose} />
+              </Suspense>
+            ),
+            true
+          );
+        },
+      },
+      {
+        label: "2 columns (equal width)",
+        icon: <Columns2 className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(INSERT_LAYOUT_COMMAND, "1fr 1fr");
+        },
+      },
+      {
+        label: "3 columns (equal width)",
+        icon: <Columns3 className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(INSERT_LAYOUT_COMMAND, "1fr 1fr 1fr");
+        },
+      },
+      {
+        label: "4 columns (equal width)",
+        icon: <Columns4 className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(INSERT_LAYOUT_COMMAND, "1fr 1fr 1fr 1fr");
+        },
+      },
+      {
+        label: "2 columns (25% - 75%)",
+        icon: <Columns2 className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(INSERT_LAYOUT_COMMAND, "1fr 3fr");
+        },
+      },
+      {
+        label: "Collapsible container",
+        icon: <SquareChevronRight className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined);
+        },
+      },
+      {
+        label: "Twitter",
+        icon: <Twitter className="w-4 h-4" />,
+        func: () => {
+
+          showModal("Twitter tweet", "Insert a URL to embed a live preview. Works with Twitter, Google Drive, Vimeo, and more.", (onClose) => (
+            <AutoEmbedDialog embedConfig={TwitterEmbedConfig} onClose={onClose} />
+          ), true);
+        },
+      },
+      {
+        label: "Youtube",
+        icon: <Youtube />,
+        func: () => {
+
+          showModal("Youtube", "Insert a URL to embed a live preview. Works with YouTube, Google Drive, Vimeo, and more.", (onClose) => (
+            <AutoEmbedDialog embedConfig={YoutubeEmbedConfig} onClose={onClose} />
+          ), true);
+        },
+      },
+      {
+        label: "Figma",
+        icon: <Figma />,
+        func: () => {
+
+          showModal("Figma", "Insert a URL to embed a live preview. Works with Figma.", (onClose) => (
+            <AutoEmbedDialog embedConfig={FigmaEmbedConfig} onClose={onClose} />
+          ), true);
+        },
+      },
+      {
+        label: "Hint",
+        icon: <AlertCircle />,
+        func: () => {
+          editor.dispatchCommand(INSERT_HINT_COMMAND, 'info')
+        }
+      }
+
+    ],
+    [editor, showModal]
+  );
+
+  return (
+    <>
+      <DropDown
+        values={items}
+        TriggerClassName={{ width: "115px", border: "none" }}
+        className="cursor-pointer"
+        TriggerLabel={
+          <>
+            <Plus />
+            <span>Insert</span>
+          </>
+        }
+        disabled={disabled}
+      />
+      {model}
+    </>
+  );
+}