chore: Enhancement + New Feature (#185)

* wip

* wip page

* chore: style

* wip pages

* wip pages

* chore: toggle

* chore: link

* feat: topic search

* chore: page section

* refactor: apply tailwind class ordering

* fix: handle loggedIn user for guest route

* feat: folder & image schema

* chore: move utils to shared

* refactor: tailwind class ordering

* feat: img ext for editor

* refactor: remove qa

* fix: tanstack start

* fix: wrong import

* chore: use toast

* chore: schema

web/shared/editor/components/bubble-menu/bubble-menu.tsx

@@ -0,0 +1,90 @@
+import { useTextmenuCommands } from "../../hooks/use-text-menu-commands"
+import { PopoverWrapper } from "../ui/popover-wrapper"
+import { useTextmenuStates } from "../../hooks/use-text-menu-states"
+import { BubbleMenu as TiptapBubbleMenu, Editor } from "@tiptap/react"
+import { ToolbarButton } from "../ui/toolbar-button"
+import { Icon } from "../ui/icon"
+
+export type BubbleMenuProps = {
+  editor: Editor
+}
+
+export const BubbleMenu = ({ editor }: BubbleMenuProps) => {
+  const commands = useTextmenuCommands(editor)
+  const states = useTextmenuStates(editor)
+
+  return (
+    <TiptapBubbleMenu
+      tippyOptions={{
+        // duration: [0, 999999],
+        popperOptions: { placement: "top-start" },
+      }}
+      editor={editor}
+      pluginKey="textMenu"
+      shouldShow={states.shouldShow}
+      updateDelay={100}
+    >
+      <PopoverWrapper>
+        <div className="flex space-x-1">
+          <ToolbarButton
+            value="bold"
+            aria-label="Bold"
+            onPressedChange={commands.onBold}
+            isActive={states.isBold}
+          >
+            <Icon name="Bold" strokeWidth={2.5} />
+          </ToolbarButton>
+
+          <ToolbarButton
+            value="italic"
+            aria-label="Italic"
+            onClick={commands.onItalic}
+            isActive={states.isItalic}
+          >
+            <Icon name="Italic" strokeWidth={2.5} />
+          </ToolbarButton>
+
+          <ToolbarButton
+            value="strikethrough"
+            aria-label="Strikethrough"
+            onClick={commands.onStrike}
+            isActive={states.isStrike}
+          >
+            <Icon name="Strikethrough" strokeWidth={2.5} />
+          </ToolbarButton>
+
+          <ToolbarButton
+            value="quote"
+            aria-label="Quote"
+            onClick={commands.onCode}
+            isActive={states.isCode}
+          >
+            <Icon name="Quote" strokeWidth={2.5} />
+          </ToolbarButton>
+
+          <ToolbarButton
+            value="inline code"
+            aria-label="Inline code"
+            onClick={commands.onCode}
+            isActive={states.isCode}
+          >
+            <Icon name="Braces" strokeWidth={2.5} />
+          </ToolbarButton>
+
+          <ToolbarButton
+            value="code block"
+            aria-label="Code block"
+            onClick={commands.onCodeBlock}
+          >
+            <Icon name="Code" strokeWidth={2.5} />
+          </ToolbarButton>
+          {/* <ToolbarButton value="list" aria-label="List">
+            <Icon name="List" strokeWidth={2.5} />
+          </ToolbarButton> */}
+        </div>
+      </PopoverWrapper>
+    </TiptapBubbleMenu>
+  )
+}
+
+export default BubbleMenu

web/shared/editor/components/bubble-menu/index.ts

@@ -0,0 +1 @@
+export * from "./bubble-menu"

web/shared/editor/components/ui/icon.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { icons } from "lucide-react"
+
+export type IconProps = {
+  name: keyof typeof icons
+  className?: string
+  strokeWidth?: number
+  [key: string]: any
+}
+
+export const Icon = React.memo(
+  ({ name, className, size, strokeWidth, ...props }: IconProps) => {
+    const IconComponent = icons[name]
+
+    if (!IconComponent) {
+      return null
+    }
+
+    return (
+      <IconComponent
+        className={cn(!size ? "size-4" : size, className)}
+        strokeWidth={strokeWidth || 2}
+        {...props}
+      />
+    )
+  },
+)
+
+Icon.displayName = "Icon"

web/shared/editor/components/ui/popover-wrapper.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type PopoverWrapperProps = React.HTMLProps<HTMLDivElement>
+
+export const PopoverWrapper = React.forwardRef<
+  HTMLDivElement,
+  PopoverWrapperProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-popover text-popover-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </div>
+  )
+})
+
+PopoverWrapper.displayName = "PopoverWrapper"

web/shared/editor/components/ui/shortcut.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { getShortcutKey } from "@shared/utils"
+
+export interface ShortcutKeyWrapperProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  ariaLabel: string
+}
+
+const ShortcutKeyWrapper = React.forwardRef<
+  HTMLSpanElement,
+  ShortcutKeyWrapperProps
+>(({ className, ariaLabel, children, ...props }, ref) => {
+  return (
+    <span
+      aria-label={ariaLabel}
+      className={cn("inline-flex items-center gap-0.5", className)}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </span>
+  )
+})
+
+ShortcutKeyWrapper.displayName = "ShortcutKeyWrapper"
+
+export interface ShortcutKeyProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  shortcut: string
+}
+
+const ShortcutKey = React.forwardRef<HTMLSpanElement, ShortcutKeyProps>(
+  ({ className, shortcut, ...props }, ref) => {
+    return (
+      <kbd
+        className={cn(
+          "inline-block min-w-2.5 text-center align-baseline font-sans text-xs font-medium capitalize text-[rgb(156,157,160)]",
+          className,
+        )}
+        {...props}
+        ref={ref}
+      >
+        {getShortcutKey(shortcut).symbol}
+      </kbd>
+    )
+  },
+)
+
+ShortcutKey.displayName = "ShortcutKey"
+
+export const Shortcut = {
+  Wrapper: ShortcutKeyWrapper,
+  Key: ShortcutKey,
+}

web/shared/editor/components/ui/toolbar-button.tsx

@@ -0,0 +1,57 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Toggle } from "@/components/ui/toggle"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import type { TooltipContentProps } from "@radix-ui/react-tooltip"
+
+interface ToolbarButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Toggle> {
+  isActive?: boolean
+  tooltip?: string
+  tooltipOptions?: TooltipContentProps
+}
+
+const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
+  function ToolbarButton(
+    { isActive, children, tooltip, className, tooltipOptions, ...props },
+    ref,
+  ) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Toggle
+            size="sm"
+            ref={ref}
+            className={cn(
+              "size-7 rounded-md p-0",
+              {
+                "bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary":
+                  isActive,
+              },
+              className,
+            )}
+            {...props}
+          >
+            {children}
+          </Toggle>
+        </TooltipTrigger>
+        {tooltip && (
+          <TooltipContent {...tooltipOptions}>
+            <div className="flex flex-col items-center text-center">
+              {tooltip}
+            </div>
+          </TooltipContent>
+        )}
+      </Tooltip>
+    )
+  },
+)
+
+ToolbarButton.displayName = "ToolbarButton"
+
+export { ToolbarButton }