@collabchron/notiq 0.2.0

package/src/components/ui/drop-downs/text-align.tsx

@@ -0,0 +1,123 @@
+import React, { useMemo } from "react";
+import {
+  ElementFormatType,
+  FORMAT_ELEMENT_COMMAND,
+  INDENT_CONTENT_COMMAND,
+  LexicalEditor,
+  OUTDENT_CONTENT_COMMAND,
+} from "lexical";
+import { SHORTCUTS } from "../../editor/plugins/ShortcutsPlugin/shortcuts";
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  AlignJustify,
+  OutdentIcon,
+  Indent,
+} from "lucide-react";
+import { DropDown } from ".";
+
+export default function textAlign({
+  editor,
+  value,
+  isRTL,
+  disabled = false,
+}: {
+  editor: LexicalEditor;
+  value: ElementFormatType | "left" | "center" | "right" | "justify" | null;
+  isRTL: boolean;
+  disabled: boolean;
+}) {
+  const ELEMENT_FORMAT_OPTIONS: {
+    [key in Exclude<ElementFormatType, "">]: {
+      icon: React.ReactNode;
+      shortcuts?: string;
+      func: () => void;
+      label: string;
+    };
+  } = useMemo(
+    () => ({
+      center: {
+        icon: <AlignCenter className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
+        },
+        shortcuts: SHORTCUTS.CENTER_ALIGN,
+        label: "Center Align",
+      },
+      end: {
+        icon: <AlignRight className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "end");
+        },
+        shortcuts: SHORTCUTS.LEFT_ALIGN,
+
+        label: "End Align",
+      },
+      justify: {
+        icon: <AlignJustify className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
+        },
+        shortcuts: SHORTCUTS.JUSTIFY_ALIGN,
+
+        label: "Justify Align",
+      },
+      left: {
+        icon: <AlignLeft className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
+        },
+        shortcuts: SHORTCUTS.LEFT_ALIGN,
+
+        label: "Left Align",
+      },
+      right: {
+        icon: <AlignRight className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
+        },
+        shortcuts: SHORTCUTS.RIGHT_ALIGN,
+
+        label: "Right Align",
+      },
+      start: {
+        icon: <AlignLeft className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "start");
+        },
+        label: "Start Align",
+      },
+      Outdent: {
+        icon: <OutdentIcon className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
+        },
+        label: "Outdent",
+      },
+      func: {
+        icon: <Indent className="w-4 h-4" />,
+        func: () => {
+          editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
+        },
+        label: "Indent",
+      },
+    }),
+    [editor]
+  );
+  return (
+    <DropDown
+      values={Object.values(ELEMENT_FORMAT_OPTIONS)}
+      TriggerClassName={{ width: "120px", border: "none" }}
+      PopoverContentClassName={{width:"220px"}}
+      className="cursor-pointer"
+      TriggerLabel={
+        <>
+            {value ? ELEMENT_FORMAT_OPTIONS[value].icon : ELEMENT_FORMAT_OPTIONS["left"].icon }
+            {value || "left"}
+        </>
+      } 
+      disabled={disabled}
+    />
+  );
+}

package/src/components/ui/drop-downs/text-format.tsx

@@ -0,0 +1,104 @@
+import { FORMAT_TEXT_COMMAND, LexicalEditor } from "lexical";
+import {
+  CaseSensitive,
+  CaseUpper,
+  HighlighterIcon,
+  LucideRemoveFormatting,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Trash,
+} from "lucide-react";
+import React, { useMemo } from "react";
+import { SHORTCUTS } from "../../editor/plugins/ShortcutsPlugin/shortcuts";
+import { clearFormatting } from "../../editor/utils/editorFormatting";
+import { DropDown } from ".";
+
+export default function TextFormat({
+  disabled = false,
+  editor,
+  toolbarState,
+  style,
+  ShowChevronsUpDown,
+  side,
+  sideOffset
+}: {
+  disabled: boolean;
+  editor: LexicalEditor;
+  toolbarState: any;
+  style?: React.CSSProperties;
+  ShowChevronsUpDown?:boolean
+  side?: "top" | "right" | "bottom" | "left" | undefined
+  sideOffset?:number
+}) {
+  const items: any = useMemo(
+    () => [
+      {
+        label: "Lowercase",
+        icon: <CaseSensitive className="w-4 h-4" />,
+        func: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "lowercase"),
+        shortcuts: SHORTCUTS.LOWERCASE,
+        selected: toolbarState.isLowercase,
+      },
+      {
+        label: "Uppercase",
+        icon: <CaseUpper className="w-4 h-4" />,
+        func: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "uppercase"),
+        shortcuts: SHORTCUTS.UPPERCASE,
+        selected: toolbarState.isUppercase,
+      },
+      {
+        label: "Strikethrough",
+        icon: <Strikethrough className="w-4 h-4" />,
+        func: () =>
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough"),
+        shortcuts: SHORTCUTS.STRIKETHROUGH,
+        selected: toolbarState.isStrikethrough,
+      },
+      {
+        label: "Subscript",
+        icon: <Subscript className="w-4 h-4" />,
+        func: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript"),
+        shortcuts: SHORTCUTS.SUBSCRIPT,
+        selected: toolbarState.isSubscript,
+      },
+      {
+        label: "Superscript",
+        icon: <Superscript className="w-4 h-4" />,
+        func: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript"),
+        shortcuts: SHORTCUTS.SUPERSCRIPT,
+        selected: toolbarState.isSuperscript,
+      },
+      {
+        label: "Highlight",
+        icon: <HighlighterIcon className="w-4 h-4" />,
+        func: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "highlight"),
+        selected: toolbarState.isHighlight,
+      },
+      {
+        label: "Clear Formatting",
+        icon: <Trash className="w-4 h-4" />,
+        func: () => clearFormatting(editor),
+        shortcuts: SHORTCUTS.CLEAR_FORMATTING,
+        selected: false,
+      },
+    ],
+    [editor, toolbarState]
+  );
+
+  return (
+    <DropDown
+      PopoverContentClassName={{ width:"100%"}}
+      TriggerClassName={{ ...style,width:"100%", border: "none"}}
+      disabled={disabled}
+      sideOffset={sideOffset}
+      side={side}
+      className="cursor-pointer"
+      ShowChevronsUpDown={ShowChevronsUpDown}
+      TriggerLabel={
+        <LucideRemoveFormatting />
+      }
+      values={items}
+    />
+  );
+}

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/src/components/ui/equation/EquationEditor.css

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.EquationEditor_inlineEditor {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  color: #8421a2;
+  background-color: inherit;
+  resize: none;
+}
+
+.EquationEditor_blockEditor {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  color: #8421a2;
+  background-color: inherit;
+  resize: none;
+  width: 100%;
+}
+
+.EquationEditor_inputBackground {
+  background-color: #eee;
+}
+
+.EquationEditor_dollarSign {
+  text-align: left;
+  color: #b0b0b0;
+}

package/src/components/ui/equation/EquationEditor.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {JSX, Ref, RefObject} from 'react';
+
+import './EquationEditor.css';
+
+import {isHTMLElement} from 'lexical';
+import {ChangeEvent, forwardRef} from 'react';
+
+type BaseEquationEditorProps = {
+  equation: string;
+  inline: boolean;
+  setEquation: (equation: string) => void;
+};
+
+function EquationEditor(
+  {equation, setEquation, inline}: BaseEquationEditorProps,
+  forwardedRef: Ref<HTMLInputElement | HTMLTextAreaElement>,
+): JSX.Element {
+  const onChange = (event: ChangeEvent) => {
+    setEquation((event.target as HTMLInputElement).value);
+  };
+
+  return inline && isHTMLElement(forwardedRef) ? (
+    <span className="EquationEditor_inputBackground">
+      <span className="EquationEditor_dollarSign">$</span>
+      <input
+        className="EquationEditor_inlineEditor"
+        value={equation}
+        onChange={onChange}
+        autoFocus={true}
+        ref={forwardedRef as RefObject<HTMLInputElement>}
+      />
+      <span className="EquationEditor_dollarSign">$</span>
+    </span>
+  ) : (
+    <div className="EquationEditor_inputBackground">
+      <span className="EquationEditor_dollarSign">{'$$\n'}</span>
+      <textarea
+        className="EquationEditor_blockEditor"
+        value={equation}
+        onChange={onChange}
+        ref={forwardedRef as RefObject<HTMLTextAreaElement>}
+      />
+      <span className="EquationEditor_dollarSign">{'\n$$'}</span>
+    </div>
+  );
+}
+
+export default forwardRef(EquationEditor);

package/src/components/ui/equation/KatexEquationAlterer.css

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.KatexEquationAlterer_defaultRow {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.KatexEquationAlterer_dialogActions {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  margin-top: 20px;
+  margin-bottom: 0;
+  justify-content: right;
+}
+
+.KatexEquationAlterer_centerRow {
+  display: flex;
+  flex-direction: 'row';
+  margin-top: 10px;
+  margin-bottom: 10px;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.KatexEquationAlterer_textArea {
+  width: 100%;
+  resize: none;
+  padding: 7px;
+}

package/src/components/ui/equation/KatexEquationAlterer.tsx

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { JSX } from 'react';
+
+import './KatexEquationAlterer.css';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import * as React from 'react';
+import { useCallback, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import KatexRenderer from './KatexRenderer';
+import { Button } from '@/components/ui/button';
+
+type Props = {
+  initialEquation?: string;
+  onConfirm: (equation: string, inline: boolean) => void;
+};
+
+export default function KatexEquationAlterer({
+  onConfirm,
+  initialEquation = '',
+}: Props): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const [equation, setEquation] = useState<string>(initialEquation);
+  const [inline, setInline] = useState<boolean>(true);
+
+  const onClick = useCallback(() => {
+    onConfirm(equation, inline);
+  }, [onConfirm, equation, inline]);
+
+  const onCheckboxChange = useCallback(() => {
+    setInline(!inline);
+  }, [setInline, inline]);
+
+  return (
+    <>
+      <div className="KatexEquationAlterer_defaultRow">
+        Inline
+        <input type="checkbox" checked={inline} onChange={onCheckboxChange} />
+      </div>
+      <div className="KatexEquationAlterer_defaultRow">Equation </div>
+      <div className="KatexEquationAlterer_centerRow">
+        {inline ? (
+          <input
+            onChange={(event) => {
+              setEquation(event.target.value);
+            }}
+            value={equation}
+            className="KatexEquationAlterer_textArea"
+          />
+        ) : (
+          <textarea
+            onChange={(event) => {
+              setEquation(event.target.value);
+            }}
+            value={equation}
+            className="KatexEquationAlterer_textArea"
+          />
+        )}
+      </div>
+      <div className="KatexEquationAlterer_defaultRow">Visualization </div>
+      <div className="KatexEquationAlterer_centerRow">
+        <ErrorBoundary onError={(e) => editor._onError(e)} fallback={null}>
+          <KatexRenderer
+            equation={equation}
+            inline={false}
+            onDoubleClick={() => null}
+          />
+        </ErrorBoundary>
+      </div>
+      <div className="KatexEquationAlterer_dialogActions">
+        <Button onClick={onClick}>Confirm</Button>
+      </div>
+    </>
+  );
+}