diff --git a/surfsense_web/components/ui/block-draggable.tsx b/surfsense_web/components/ui/block-draggable.tsx
index f148e38c8..21405ebff 100644
--- a/surfsense_web/components/ui/block-draggable.tsx
+++ b/surfsense_web/components/ui/block-draggable.tsx
@@ -1,513 +1,467 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import { DndPlugin, useDraggable, useDropLine } from '@platejs/dnd';
-import { expandListItemsWithChildren } from '@platejs/list';
-import { BlockSelectionPlugin } from '@platejs/selection/react';
-import { GripVertical } from 'lucide-react';
-import { type TElement, getPluginByType, isType, KEYS } from 'platejs';
+import { DndPlugin, useDraggable, useDropLine } from "@platejs/dnd";
+import { expandListItemsWithChildren } from "@platejs/list";
+import { BlockSelectionPlugin } from "@platejs/selection/react";
+import { GripVertical } from "lucide-react";
+import { type TElement, getPluginByType, isType, KEYS } from "platejs";
import {
- type PlateEditor,
- type PlateElementProps,
- type RenderNodeWrapper,
- MemoizedChildren,
- useEditorRef,
- useElement,
- usePluginOption,
-} from 'platejs/react';
-import { useSelected } from 'platejs/react';
+ type PlateEditor,
+ type PlateElementProps,
+ type RenderNodeWrapper,
+ MemoizedChildren,
+ useEditorRef,
+ useElement,
+ usePluginOption,
+} from "platejs/react";
+import { useSelected } from "platejs/react";
-import { Button } from '@/components/ui/button';
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { cn } from '@/lib/utils';
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
const UNDRAGGABLE_KEYS = [KEYS.column, KEYS.tr, KEYS.td];
export const BlockDraggable: RenderNodeWrapper = (props) => {
- const { editor, element, path } = props;
+ const { editor, element, path } = props;
- const enabled = React.useMemo(() => {
- if (editor.dom.readOnly) return false;
+ const enabled = React.useMemo(() => {
+ if (editor.dom.readOnly) return false;
- if (path.length === 1 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
- return true;
- }
- if (path.length === 3 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
- const block = editor.api.some({
- at: path,
- match: {
- type: editor.getType(KEYS.column),
- },
- });
+ if (path.length === 1 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
+ return true;
+ }
+ if (path.length === 3 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
+ const block = editor.api.some({
+ at: path,
+ match: {
+ type: editor.getType(KEYS.column),
+ },
+ });
- if (block) {
- return true;
- }
- }
- if (path.length === 4 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
- const block = editor.api.some({
- at: path,
- match: {
- type: editor.getType(KEYS.table),
- },
- });
+ if (block) {
+ return true;
+ }
+ }
+ if (path.length === 4 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
+ const block = editor.api.some({
+ at: path,
+ match: {
+ type: editor.getType(KEYS.table),
+ },
+ });
- if (block) {
- return true;
- }
- }
+ if (block) {
+ return true;
+ }
+ }
- return false;
- }, [editor, element, path]);
+ return false;
+ }, [editor, element, path]);
- if (!enabled) return;
+ if (!enabled) return;
- return (props) =>
;
+ return (props) =>
;
};
function Draggable(props: PlateElementProps) {
- const { children, editor, element, path } = props;
- const blockSelectionApi = editor.getApi(BlockSelectionPlugin).blockSelection;
+ const { children, editor, element, path } = props;
+ const blockSelectionApi = editor.getApi(BlockSelectionPlugin).blockSelection;
- const { isAboutToDrag, isDragging, nodeRef, previewRef, handleRef } =
- useDraggable({
- element,
- onDropHandler: (_, { dragItem }) => {
- const id = (dragItem as { id: string[] | string }).id;
+ const { isAboutToDrag, isDragging, nodeRef, previewRef, handleRef } = useDraggable({
+ element,
+ onDropHandler: (_, { dragItem }) => {
+ const id = (dragItem as { id: string[] | string }).id;
- if (blockSelectionApi) {
- blockSelectionApi.add(id);
- }
- resetPreview();
- },
- });
+ if (blockSelectionApi) {
+ blockSelectionApi.add(id);
+ }
+ resetPreview();
+ },
+ });
- const isInColumn = path.length === 3;
- const isInTable = path.length === 4;
+ const isInColumn = path.length === 3;
+ const isInTable = path.length === 4;
- const [previewTop, setPreviewTop] = React.useState(0);
+ const [previewTop, setPreviewTop] = React.useState(0);
- const resetPreview = () => {
- if (previewRef.current) {
- previewRef.current.replaceChildren();
- previewRef.current?.classList.add('hidden');
- }
- };
+ const resetPreview = () => {
+ if (previewRef.current) {
+ previewRef.current.replaceChildren();
+ previewRef.current?.classList.add("hidden");
+ }
+ };
- // clear up virtual multiple preview when drag end
- React.useEffect(() => {
- if (!isDragging) {
- resetPreview();
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isDragging]);
+ // clear up virtual multiple preview when drag end
+ React.useEffect(() => {
+ if (!isDragging) {
+ resetPreview();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isDragging]);
- React.useEffect(() => {
- if (isAboutToDrag) {
- previewRef.current?.classList.remove('opacity-0');
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isAboutToDrag]);
+ React.useEffect(() => {
+ if (isAboutToDrag) {
+ previewRef.current?.classList.remove("opacity-0");
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isAboutToDrag]);
- const [dragButtonTop, setDragButtonTop] = React.useState(0);
+ const [dragButtonTop, setDragButtonTop] = React.useState(0);
- return (
-
{
- if (isDragging) return;
- setDragButtonTop(calcDragButtonTop(editor, element));
- }}
- >
- {!isInTable && (
-
-
-
- )}
+ return (
+
{
+ if (isDragging) return;
+ setDragButtonTop(calcDragButtonTop(editor, element));
+ }}
+ >
+ {!isInTable && (
+
+
+
+ )}
-
+
-
- editor
- .getApi(BlockSelectionPlugin)
- .blockSelection.addOnContextMenu({ element, event })
- }
- >
- {children}
-
-
-
- );
+
+ editor.getApi(BlockSelectionPlugin).blockSelection.addOnContextMenu({ element, event })
+ }
+ >
+ {children}
+
+
+
+ );
}
-function Gutter({
- children,
- className,
- ...props
-}: React.ComponentProps<'div'>) {
- const editor = useEditorRef();
- const element = useElement();
- const isSelectionAreaVisible = usePluginOption(
- BlockSelectionPlugin,
- 'isSelectionAreaVisible'
- );
- const selected = useSelected();
+function Gutter({ children, className, ...props }: React.ComponentProps<"div">) {
+ const editor = useEditorRef();
+ const element = useElement();
+ const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
+ const selected = useSelected();
- return (
-
- {children}
-
- );
+ return (
+
+ {children}
+
+ );
}
const DragHandle = React.memo(function DragHandle({
- isDragging,
- previewRef,
- resetPreview,
- setPreviewTop,
+ isDragging,
+ previewRef,
+ resetPreview,
+ setPreviewTop,
}: {
- isDragging: boolean;
- previewRef: React.RefObject
;
- resetPreview: () => void;
- setPreviewTop: (top: number) => void;
+ isDragging: boolean;
+ previewRef: React.RefObject;
+ resetPreview: () => void;
+ setPreviewTop: (top: number) => void;
}) {
- const editor = useEditorRef();
- const element = useElement();
+ const editor = useEditorRef();
+ const element = useElement();
- return (
-
-
- {
- e.preventDefault();
- editor.getApi(BlockSelectionPlugin).blockSelection.focus();
- }}
- onMouseDown={(e) => {
- resetPreview();
+ return (
+
+
+ {
+ e.preventDefault();
+ editor.getApi(BlockSelectionPlugin).blockSelection.focus();
+ }}
+ onMouseDown={(e) => {
+ resetPreview();
- if ((e.button !== 0 && e.button !== 2) || e.shiftKey) return;
+ if ((e.button !== 0 && e.button !== 2) || e.shiftKey) return;
- const blockSelection = editor
- .getApi(BlockSelectionPlugin)
- .blockSelection.getNodes({ sort: true });
+ const blockSelection = editor
+ .getApi(BlockSelectionPlugin)
+ .blockSelection.getNodes({ sort: true });
- let selectionNodes =
- blockSelection.length > 0
- ? blockSelection
- : editor.api.blocks({ mode: 'highest' });
+ let selectionNodes =
+ blockSelection.length > 0 ? blockSelection : editor.api.blocks({ mode: "highest" });
- // If current block is not in selection, use it as the starting point
- if (!selectionNodes.some(([node]) => node.id === element.id)) {
- selectionNodes = [[element, editor.api.findPath(element)!]];
- }
+ // If current block is not in selection, use it as the starting point
+ if (!selectionNodes.some(([node]) => node.id === element.id)) {
+ selectionNodes = [[element, editor.api.findPath(element)!]];
+ }
- // Process selection nodes to include list children
- const blocks = expandListItemsWithChildren(
- editor,
- selectionNodes
- ).map(([node]) => node);
+ // Process selection nodes to include list children
+ const blocks = expandListItemsWithChildren(editor, selectionNodes).map(
+ ([node]) => node
+ );
- if (blockSelection.length === 0) {
- editor.tf.blur();
- editor.tf.collapse();
- }
+ if (blockSelection.length === 0) {
+ editor.tf.blur();
+ editor.tf.collapse();
+ }
- const elements = createDragPreviewElements(editor, blocks);
- previewRef.current?.append(...elements);
- previewRef.current?.classList.remove('hidden');
- previewRef.current?.classList.add('opacity-0');
- editor.setOption(DndPlugin, 'multiplePreviewRef', previewRef);
+ const elements = createDragPreviewElements(editor, blocks);
+ previewRef.current?.append(...elements);
+ previewRef.current?.classList.remove("hidden");
+ previewRef.current?.classList.add("opacity-0");
+ editor.setOption(DndPlugin, "multiplePreviewRef", previewRef);
- editor
- .getApi(BlockSelectionPlugin)
- .blockSelection.set(blocks.map((block) => block.id as string));
- }}
- onMouseEnter={() => {
- if (isDragging) return;
+ editor
+ .getApi(BlockSelectionPlugin)
+ .blockSelection.set(blocks.map((block) => block.id as string));
+ }}
+ onMouseEnter={() => {
+ if (isDragging) return;
- const blockSelection = editor
- .getApi(BlockSelectionPlugin)
- .blockSelection.getNodes({ sort: true });
+ const blockSelection = editor
+ .getApi(BlockSelectionPlugin)
+ .blockSelection.getNodes({ sort: true });
- let selectedBlocks =
- blockSelection.length > 0
- ? blockSelection
- : editor.api.blocks({ mode: 'highest' });
+ let selectedBlocks =
+ blockSelection.length > 0 ? blockSelection : editor.api.blocks({ mode: "highest" });
- // If current block is not in selection, use it as the starting point
- if (!selectedBlocks.some(([node]) => node.id === element.id)) {
- selectedBlocks = [[element, editor.api.findPath(element)!]];
- }
+ // If current block is not in selection, use it as the starting point
+ if (!selectedBlocks.some(([node]) => node.id === element.id)) {
+ selectedBlocks = [[element, editor.api.findPath(element)!]];
+ }
- // Process selection to include list children
- const processedBlocks = expandListItemsWithChildren(
- editor,
- selectedBlocks
- );
+ // Process selection to include list children
+ const processedBlocks = expandListItemsWithChildren(editor, selectedBlocks);
- const ids = processedBlocks.map((block) => block[0].id as string);
+ const ids = processedBlocks.map((block) => block[0].id as string);
- if (ids.length > 1 && ids.includes(element.id as string)) {
- const previewTop = calculatePreviewTop(editor, {
- blocks: processedBlocks.map((block) => block[0]),
- element,
- });
- setPreviewTop(previewTop);
- } else {
- setPreviewTop(0);
- }
- }}
- onMouseUp={() => {
- resetPreview();
- }}
- data-plate-prevent-deselect
- role="button"
- >
-
-
-
-
- );
+ if (ids.length > 1 && ids.includes(element.id as string)) {
+ const previewTop = calculatePreviewTop(editor, {
+ blocks: processedBlocks.map((block) => block[0]),
+ element,
+ });
+ setPreviewTop(previewTop);
+ } else {
+ setPreviewTop(0);
+ }
+ }}
+ onMouseUp={() => {
+ resetPreview();
+ }}
+ data-plate-prevent-deselect
+ role="button"
+ >
+
+
;
+ return (props) =>
;
};
function List(props: PlateElementProps) {
- const { listStart, listStyleType } = props.element as TListElement;
- const { Li, Marker } = config[listStyleType] ?? {};
- const List = isOrderedList(props.element) ? 'ol' : 'ul';
+ const { listStart, listStyleType } = props.element as TListElement;
+ const { Li, Marker } = config[listStyleType] ?? {};
+ const List = isOrderedList(props.element) ? "ol" : "ul";
- return (
-
- {Marker && }
- {Li ? : {props.children}}
-
- );
+ return (
+
+ {Marker && }
+ {Li ? : {props.children}}
+
+ );
}
function TodoMarker(props: PlateElementProps) {
- const state = useTodoListElementState({ element: props.element });
- const { checkboxProps } = useTodoListElement(state);
- const readOnly = useReadOnly();
+ const state = useTodoListElementState({ element: props.element });
+ const { checkboxProps } = useTodoListElement(state);
+ const readOnly = useReadOnly();
- return (
-
-
-
- );
+ return (
+
+
+
+ );
}
function TodoLi(props: PlateElementProps) {
- return (
-
- {props.children}
-
- );
+ return (
+
+ {props.children}
+
+ );
}
diff --git a/surfsense_web/components/ui/block-selection.tsx b/surfsense_web/components/ui/block-selection.tsx
index 386fe8852..b8ffdda15 100644
--- a/surfsense_web/components/ui/block-selection.tsx
+++ b/surfsense_web/components/ui/block-selection.tsx
@@ -1,44 +1,39 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import { DndPlugin } from '@platejs/dnd';
-import { useBlockSelected } from '@platejs/selection/react';
-import { cva } from 'class-variance-authority';
-import { type PlateElementProps, usePluginOption } from 'platejs/react';
+import { DndPlugin } from "@platejs/dnd";
+import { useBlockSelected } from "@platejs/selection/react";
+import { cva } from "class-variance-authority";
+import { type PlateElementProps, usePluginOption } from "platejs/react";
export const blockSelectionVariants = cva(
- 'pointer-events-none absolute inset-0 z-1 bg-brand/[.13] transition-opacity',
- {
- defaultVariants: {
- active: true,
- },
- variants: {
- active: {
- false: 'opacity-0',
- true: 'opacity-100',
- },
- },
- }
+ "pointer-events-none absolute inset-0 z-1 bg-brand/[.13] transition-opacity",
+ {
+ defaultVariants: {
+ active: true,
+ },
+ variants: {
+ active: {
+ false: "opacity-0",
+ true: "opacity-100",
+ },
+ },
+ }
);
export function BlockSelection(props: PlateElementProps) {
- const isBlockSelected = useBlockSelected();
- const isDragging = usePluginOption(DndPlugin, 'isDragging');
+ const isBlockSelected = useBlockSelected();
+ const isDragging = usePluginOption(DndPlugin, "isDragging");
- if (
- !isBlockSelected ||
- props.plugin.key === 'tr' ||
- props.plugin.key === 'table'
- )
- return null;
+ if (!isBlockSelected || props.plugin.key === "tr" || props.plugin.key === "table") return null;
- return (
-
- );
+ return (
+
+ );
}
diff --git a/surfsense_web/components/ui/blockquote-node.tsx b/surfsense_web/components/ui/blockquote-node.tsx
index ba5bec4e8..1de9b19cf 100644
--- a/surfsense_web/components/ui/blockquote-node.tsx
+++ b/surfsense_web/components/ui/blockquote-node.tsx
@@ -1,13 +1,7 @@
-'use client';
+"use client";
-import { type PlateElementProps, PlateElement } from 'platejs/react';
+import { type PlateElementProps, PlateElement } from "platejs/react";
export function BlockquoteElement(props: PlateElementProps) {
- return (
-
- );
+ return ;
}
diff --git a/surfsense_web/components/ui/callout-node.tsx b/surfsense_web/components/ui/callout-node.tsx
index 2d24cb864..0972fdf7f 100644
--- a/surfsense_web/components/ui/callout-node.tsx
+++ b/surfsense_web/components/ui/callout-node.tsx
@@ -1,83 +1,77 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import type { TCalloutElement } from 'platejs';
+import type { TCalloutElement } from "platejs";
-import { CalloutPlugin } from '@platejs/callout/react';
-import { cva } from 'class-variance-authority';
-import { type PlateElementProps, PlateElement, useEditorPlugin } from 'platejs/react';
+import { CalloutPlugin } from "@platejs/callout/react";
+import { cva } from "class-variance-authority";
+import { type PlateElementProps, PlateElement, useEditorPlugin } from "platejs/react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
-const calloutVariants = cva(
- 'my-1 flex w-full items-start gap-2 rounded-lg border p-4',
- {
- defaultVariants: {
- variant: 'info',
- },
- variants: {
- variant: {
- info: 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/50',
- warning: 'border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-950/50',
- error: 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/50',
- success: 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950/50',
- note: 'border-muted bg-muted/50',
- tip: 'border-purple-200 bg-purple-50 dark:border-purple-800 dark:bg-purple-950/50',
- },
- },
- }
-);
+const calloutVariants = cva("my-1 flex w-full items-start gap-2 rounded-lg border p-4", {
+ defaultVariants: {
+ variant: "info",
+ },
+ variants: {
+ variant: {
+ info: "border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/50",
+ warning: "border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-950/50",
+ error: "border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/50",
+ success: "border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950/50",
+ note: "border-muted bg-muted/50",
+ tip: "border-purple-200 bg-purple-50 dark:border-purple-800 dark:bg-purple-950/50",
+ },
+ },
+});
const calloutIcons: Record = {
- info: '💡',
- warning: '⚠️',
- error: '🚨',
- success: '✅',
- note: '📝',
- tip: '💜',
+ info: "💡",
+ warning: "⚠️",
+ error: "🚨",
+ success: "✅",
+ note: "📝",
+ tip: "💜",
};
-const variantCycle = ['info', 'warning', 'error', 'success', 'note', 'tip'] as const;
+const variantCycle = ["info", "warning", "error", "success", "note", "tip"] as const;
-export function CalloutElement({
- children,
- ...props
-}: PlateElementProps) {
- const { editor } = useEditorPlugin(CalloutPlugin);
- const element = props.element;
- const variant = element.variant || 'info';
- const icon = element.icon || calloutIcons[variant] || '💡';
+export function CalloutElement({ children, ...props }: PlateElementProps) {
+ const { editor } = useEditorPlugin(CalloutPlugin);
+ const element = props.element;
+ const variant = element.variant || "info";
+ const icon = element.icon || calloutIcons[variant] || "💡";
- const cycleVariant = React.useCallback(() => {
- const currentIndex = variantCycle.indexOf(variant as (typeof variantCycle)[number]);
- const nextIndex = (currentIndex + 1) % variantCycle.length;
- const nextVariant = variantCycle[nextIndex];
+ const cycleVariant = React.useCallback(() => {
+ const currentIndex = variantCycle.indexOf(variant as (typeof variantCycle)[number]);
+ const nextIndex = (currentIndex + 1) % variantCycle.length;
+ const nextVariant = variantCycle[nextIndex];
- editor.tf.setNodes(
- {
- variant: nextVariant,
- icon: calloutIcons[nextVariant],
- },
- { at: props.path }
- );
- }, [editor, variant, props.path]);
+ editor.tf.setNodes(
+ {
+ variant: nextVariant,
+ icon: calloutIcons[nextVariant],
+ },
+ { at: props.path }
+ );
+ }, [editor, variant, props.path]);
- return (
-
-
- {children}
-
- );
+ return (
+
+
+ {children}
+
+ );
}
diff --git a/surfsense_web/components/ui/checkbox.tsx b/surfsense_web/components/ui/checkbox.tsx
index a3ec18410..465783c79 100644
--- a/surfsense_web/components/ui/checkbox.tsx
+++ b/surfsense_web/components/ui/checkbox.tsx
@@ -1,32 +1,29 @@
-"use client"
+"use client";
-import * as React from "react"
-import { CheckIcon } from "lucide-react"
-import { Checkbox as CheckboxPrimitive } from "radix-ui"
+import * as React from "react";
+import { CheckIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-function Checkbox({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
-
-
-
-
- )
+function Checkbox({ className, ...props }: React.ComponentProps) {
+ return (
+
+
+
+
+
+ );
}
-export { Checkbox }
+export { Checkbox };
diff --git a/surfsense_web/components/ui/code-block-node.tsx b/surfsense_web/components/ui/code-block-node.tsx
index b846297db..f0f1c6db7 100644
--- a/surfsense_web/components/ui/code-block-node.tsx
+++ b/surfsense_web/components/ui/code-block-node.tsx
@@ -1,289 +1,264 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import { formatCodeBlock, isLangSupported } from '@platejs/code-block';
-import { BracesIcon, Check, CheckIcon, CopyIcon } from 'lucide-react';
-import { type TCodeBlockElement, type TCodeSyntaxLeaf, NodeApi } from 'platejs';
+import { formatCodeBlock, isLangSupported } from "@platejs/code-block";
+import { BracesIcon, Check, CheckIcon, CopyIcon } from "lucide-react";
+import { type TCodeBlockElement, type TCodeSyntaxLeaf, NodeApi } from "platejs";
import {
- type PlateElementProps,
- type PlateLeafProps,
- PlateElement,
- PlateLeaf,
-} from 'platejs/react';
-import { useEditorRef, useElement, useReadOnly } from 'platejs/react';
+ type PlateElementProps,
+ type PlateLeafProps,
+ PlateElement,
+ PlateLeaf,
+} from "platejs/react";
+import { useEditorRef, useElement, useReadOnly } from "platejs/react";
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
import {
- Command,
- CommandEmpty,
- CommandGroup,
- CommandInput,
- CommandItem,
- CommandList,
-} from '@/components/ui/command';
-import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from '@/components/ui/popover';
-import { cn } from '@/lib/utils';
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
export function CodeBlockElement(props: PlateElementProps) {
- const { editor, element } = props;
+ const { editor, element } = props;
- return (
-
-
-
- {props.children}
-
+ return (
+
+
+
+ {props.children}
+
-
- {isLangSupported(element.lang) && (
-
- )}
+
+ {isLangSupported(element.lang) && (
+
+ )}
-
+
- NodeApi.string(element)}
- />
-
-
-
- );
+
NodeApi.string(element)}
+ />
+ setIsEditing(true)}
- >
- {element.texExpression ? (
-
- ) : (
-
-
- Add an equation
-
- )}
-
setIsEditing(true)}
+ >
+ {element.texExpression ? (
+
+ ) : (
+
+
+ Add an equation
+
+ )}
+
-
-
-
-
-
-
+
+
+
+
+
+
- {/* Scrollable editing buttons */}
-
- {!readOnly && (
- <>
-
- {
- editor.undo();
- editor.tf.focus();
- }}
- >
-
-
+ return (
+
+ {/* Scrollable editing buttons */}
+
+ {!readOnly && (
+ <>
+
+ {
+ editor.undo();
+ editor.tf.focus();
+ }}
+ >
+
+
- {
- editor.redo();
- editor.tf.focus();
- }}
- >
-
-
-
+ {
+ editor.redo();
+ editor.tf.focus();
+ }}
+ >
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
- )}
-
+
+
+
+
+ )}
+
- {/* Save button — only in edit mode with unsaved changes */}
- {!readOnly && onSave && hasUnsavedChanges && (
-
-
- {isSaving ? (
-
- ) : (
-
- )}
-
-
- )}
+ {/* Fixed right-side buttons (Save + Mode) */}
+
+ {/* Save button — only in edit mode with unsaved changes */}
+ {!readOnly && onSave && hasUnsavedChanges && (
+
+
+ {isSaving ? : }
+
+
+ )}
- {/* Mode toggle */}
- {canToggleMode && (
-
-
-
- )}
-
-
+
-
- {children}
-
-
- );
+ return (
+
+
+ {children}
+
+
+ );
}
diff --git a/surfsense_web/components/ui/heading-node.tsx b/surfsense_web/components/ui/heading-node.tsx
index 3713b6aed..7e5c92dee 100644
--- a/surfsense_web/components/ui/heading-node.tsx
+++ b/surfsense_web/components/ui/heading-node.tsx
@@ -1,60 +1,56 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import type { PlateElementProps } from 'platejs/react';
+import type { PlateElementProps } from "platejs/react";
-import { type VariantProps, cva } from 'class-variance-authority';
-import { PlateElement } from 'platejs/react';
+import { type VariantProps, cva } from "class-variance-authority";
+import { PlateElement } from "platejs/react";
-const headingVariants = cva('relative mb-1', {
- variants: {
- variant: {
- h1: 'mt-[1.6em] pb-1 font-bold font-heading text-4xl',
- h2: 'mt-[1.4em] pb-px font-heading font-semibold text-2xl tracking-tight',
- h3: 'mt-[1em] pb-px font-heading font-semibold text-xl tracking-tight',
- h4: 'mt-[0.75em] font-heading font-semibold text-lg tracking-tight',
- h5: 'mt-[0.75em] font-semibold text-lg tracking-tight',
- h6: 'mt-[0.75em] font-semibold text-base tracking-tight',
- },
- },
+const headingVariants = cva("relative mb-1", {
+ variants: {
+ variant: {
+ h1: "mt-[1.6em] pb-1 font-bold font-heading text-4xl",
+ h2: "mt-[1.4em] pb-px font-heading font-semibold text-2xl tracking-tight",
+ h3: "mt-[1em] pb-px font-heading font-semibold text-xl tracking-tight",
+ h4: "mt-[0.75em] font-heading font-semibold text-lg tracking-tight",
+ h5: "mt-[0.75em] font-semibold text-lg tracking-tight",
+ h6: "mt-[0.75em] font-semibold text-base tracking-tight",
+ },
+ },
});
export function HeadingElement({
- variant = 'h1',
- ...props
+ variant = "h1",
+ ...props
}: PlateElementProps & VariantProps) {
- return (
-
- {props.children}
-
- );
+ return (
+
+ {props.children}
+
+ );
}
export function H1Element(props: PlateElementProps) {
- return ;
+ return ;
}
export function H2Element(props: PlateElementProps) {
- return ;
+ return ;
}
export function H3Element(props: PlateElementProps) {
- return ;
+ return ;
}
export function H4Element(props: PlateElementProps) {
- return ;
+ return ;
}
export function H5Element(props: PlateElementProps) {
- return ;
+ return ;
}
export function H6Element(props: PlateElementProps) {
- return ;
+ return ;
}
diff --git a/surfsense_web/components/ui/highlight-node.tsx b/surfsense_web/components/ui/highlight-node.tsx
index b292dceba..f032129ff 100644
--- a/surfsense_web/components/ui/highlight-node.tsx
+++ b/surfsense_web/components/ui/highlight-node.tsx
@@ -1,15 +1,15 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import type { PlateLeafProps } from 'platejs/react';
+import type { PlateLeafProps } from "platejs/react";
-import { PlateLeaf } from 'platejs/react';
+import { PlateLeaf } from "platejs/react";
export function HighlightLeaf(props: PlateLeafProps) {
- return (
-
- {props.children}
-
- );
+ return (
+
+ {props.children}
+
+ );
}
diff --git a/surfsense_web/components/ui/hr-node.tsx b/surfsense_web/components/ui/hr-node.tsx
index 3e86f1ab9..949e08c7c 100644
--- a/surfsense_web/components/ui/hr-node.tsx
+++ b/surfsense_web/components/ui/hr-node.tsx
@@ -1,35 +1,30 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import type { PlateElementProps } from 'platejs/react';
+import type { PlateElementProps } from "platejs/react";
-import {
- PlateElement,
- useFocused,
- useReadOnly,
- useSelected,
-} from 'platejs/react';
+import { PlateElement, useFocused, useReadOnly, useSelected } from "platejs/react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
export function HrElement(props: PlateElementProps) {
- const readOnly = useReadOnly();
- const selected = useSelected();
- const focused = useFocused();
+ const readOnly = useReadOnly();
+ const selected = useSelected();
+ const focused = useFocused();
- return (
-
-
-
-
- {props.children}
-
- );
+ return (
+
+
+
+
+ {props.children}
+
+ );
}
diff --git a/surfsense_web/components/ui/inline-combobox.tsx b/surfsense_web/components/ui/inline-combobox.tsx
index 2fe8c8cad..a254631ba 100644
--- a/surfsense_web/components/ui/inline-combobox.tsx
+++ b/surfsense_web/components/ui/inline-combobox.tsx
@@ -1,450 +1,406 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import type { Point, TElement } from 'platejs';
+import type { Point, TElement } from "platejs";
import {
- type ComboboxItemProps,
- Combobox,
- ComboboxGroup,
- ComboboxGroupLabel,
- ComboboxItem,
- ComboboxPopover,
- ComboboxProvider,
- ComboboxRow,
- Portal,
- useComboboxContext,
- useComboboxStore,
-} from '@ariakit/react';
-import { filterWords } from '@platejs/combobox';
+ type ComboboxItemProps,
+ Combobox,
+ ComboboxGroup,
+ ComboboxGroupLabel,
+ ComboboxItem,
+ ComboboxPopover,
+ ComboboxProvider,
+ ComboboxRow,
+ Portal,
+ useComboboxContext,
+ useComboboxStore,
+} from "@ariakit/react";
+import { filterWords } from "@platejs/combobox";
import {
- type UseComboboxInputResult,
- useComboboxInput,
- useHTMLInputCursorState,
-} from '@platejs/combobox/react';
-import { cva } from 'class-variance-authority';
-import { useComposedRef, useEditorRef } from 'platejs/react';
+ type UseComboboxInputResult,
+ useComboboxInput,
+ useHTMLInputCursorState,
+} from "@platejs/combobox/react";
+import { cva } from "class-variance-authority";
+import { useComposedRef, useEditorRef } from "platejs/react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
function useRequiredComboboxContext() {
- const context = useComboboxContext();
+ const context = useComboboxContext();
- if (!context) {
- throw new Error(
- 'InlineCombobox compound components must be rendered within InlineCombobox'
- );
- }
+ if (!context) {
+ throw new Error("InlineCombobox compound components must be rendered within InlineCombobox");
+ }
- return context;
+ return context;
}
type FilterFn = (
- item: { value: string; group?: string; keywords?: string[]; label?: string },
- search: string
+ item: { value: string; group?: string; keywords?: string[]; label?: string },
+ search: string
) => boolean;
type InlineComboboxContextValue = {
- filter: FilterFn | false;
- inputProps: UseComboboxInputResult['props'];
- inputRef: React.RefObject;
- removeInput: UseComboboxInputResult['removeInput'];
- showTrigger: boolean;
- trigger: string;
- setHasEmpty: (hasEmpty: boolean) => void;
+ filter: FilterFn | false;
+ inputProps: UseComboboxInputResult["props"];
+ inputRef: React.RefObject;
+ removeInput: UseComboboxInputResult["removeInput"];
+ showTrigger: boolean;
+ trigger: string;
+ setHasEmpty: (hasEmpty: boolean) => void;
};
const InlineComboboxContext = React.createContext(
- null as unknown as InlineComboboxContextValue
+ null as unknown as InlineComboboxContextValue
);
-const defaultFilter: FilterFn = (
- { group, keywords = [], label, value },
- search
-) => {
- const uniqueTerms = new Set(
- [value, ...keywords, group, label].filter(Boolean)
- );
+const defaultFilter: FilterFn = ({ group, keywords = [], label, value }, search) => {
+ const uniqueTerms = new Set([value, ...keywords, group, label].filter(Boolean));
- return Array.from(uniqueTerms).some((keyword) =>
- filterWords(keyword as string, search)
- );
+ return Array.from(uniqueTerms).some((keyword) => filterWords(keyword as string, search));
};
type InlineComboboxProps = {
- children: React.ReactNode;
- element: TElement;
- trigger: string;
- filter?: FilterFn | false;
- hideWhenNoValue?: boolean;
- showTrigger?: boolean;
- value?: string;
- setValue?: (value: string) => void;
+ children: React.ReactNode;
+ element: TElement;
+ trigger: string;
+ filter?: FilterFn | false;
+ hideWhenNoValue?: boolean;
+ showTrigger?: boolean;
+ value?: string;
+ setValue?: (value: string) => void;
};
const InlineCombobox = ({
- children,
- element,
- filter = defaultFilter,
- hideWhenNoValue = false,
- setValue: setValueProp,
- showTrigger = true,
- trigger,
- value: valueProp,
+ children,
+ element,
+ filter = defaultFilter,
+ hideWhenNoValue = false,
+ setValue: setValueProp,
+ showTrigger = true,
+ trigger,
+ value: valueProp,
}: InlineComboboxProps) => {
- const editor = useEditorRef();
- const inputRef = React.useRef(null);
- const cursorState = useHTMLInputCursorState(inputRef);
+ const editor = useEditorRef();
+ const inputRef = React.useRef(null);
+ const cursorState = useHTMLInputCursorState(inputRef);
- const [valueState, setValueState] = React.useState('');
- const hasValueProp = valueProp !== undefined;
- const value = hasValueProp ? valueProp : valueState;
+ const [valueState, setValueState] = React.useState("");
+ const hasValueProp = valueProp !== undefined;
+ const value = hasValueProp ? valueProp : valueState;
- // Check if current user is the creator of this element (for Yjs collaboration)
- const isCreator = React.useMemo(() => {
- const elementUserId = (element as Record).userId;
- const currentUserId = editor.meta.userId;
+ // Check if current user is the creator of this element (for Yjs collaboration)
+ const isCreator = React.useMemo(() => {
+ const elementUserId = (element as Record).userId;
+ const currentUserId = editor.meta.userId;
- // If no userId (backwards compatibility or non-Yjs), allow
- if (!elementUserId) return true;
+ // If no userId (backwards compatibility or non-Yjs), allow
+ if (!elementUserId) return true;
- return elementUserId === currentUserId;
- }, [editor.meta.userId, element]);
+ return elementUserId === currentUserId;
+ }, [editor.meta.userId, element]);
- const setValue = React.useCallback(
- (newValue: string) => {
- setValueProp?.(newValue);
+ const setValue = React.useCallback(
+ (newValue: string) => {
+ setValueProp?.(newValue);
- if (!hasValueProp) {
- setValueState(newValue);
- }
- },
- [setValueProp, hasValueProp]
- );
+ if (!hasValueProp) {
+ setValueState(newValue);
+ }
+ },
+ [setValueProp, hasValueProp]
+ );
- /**
- * Track the point just before the input element so we know where to
- * insertText if the combobox closes due to a selection change.
- */
- const insertPoint = React.useRef(null);
+ /**
+ * Track the point just before the input element so we know where to
+ * insertText if the combobox closes due to a selection change.
+ */
+ const insertPoint = React.useRef(null);
- React.useEffect(() => {
- const path = editor.api.findPath(element);
+ React.useEffect(() => {
+ const path = editor.api.findPath(element);
- if (!path) return;
+ if (!path) return;
- const point = editor.api.before(path);
+ const point = editor.api.before(path);
- if (!point) return;
+ if (!point) return;
- const pointRef = editor.api.pointRef(point);
- insertPoint.current = pointRef.current;
+ const pointRef = editor.api.pointRef(point);
+ insertPoint.current = pointRef.current;
- return () => {
- pointRef.unref();
- };
- }, [editor, element]);
+ return () => {
+ pointRef.unref();
+ };
+ }, [editor, element]);
- const { props: inputProps, removeInput } = useComboboxInput({
- cancelInputOnBlur: true,
- cursorState,
- autoFocus: isCreator,
- ref: inputRef,
- onCancelInput: (cause) => {
- if (cause !== 'backspace') {
- editor.tf.insertText(trigger + value, {
- at: insertPoint?.current ?? undefined,
- });
- }
- if (cause === 'arrowLeft' || cause === 'arrowRight') {
- editor.tf.move({
- distance: 1,
- reverse: cause === 'arrowLeft',
- });
- }
- },
- });
+ const { props: inputProps, removeInput } = useComboboxInput({
+ cancelInputOnBlur: true,
+ cursorState,
+ autoFocus: isCreator,
+ ref: inputRef,
+ onCancelInput: (cause) => {
+ if (cause !== "backspace") {
+ editor.tf.insertText(trigger + value, {
+ at: insertPoint?.current ?? undefined,
+ });
+ }
+ if (cause === "arrowLeft" || cause === "arrowRight") {
+ editor.tf.move({
+ distance: 1,
+ reverse: cause === "arrowLeft",
+ });
+ }
+ },
+ });
- const [hasEmpty, setHasEmpty] = React.useState(false);
+ const [hasEmpty, setHasEmpty] = React.useState(false);
- const contextValue: InlineComboboxContextValue = React.useMemo(
- () => ({
- filter,
- inputProps,
- inputRef,
- removeInput,
- setHasEmpty,
- showTrigger,
- trigger,
- }),
- [
- trigger,
- showTrigger,
- filter,
- inputProps,
- removeInput,
- ]
- );
+ const contextValue: InlineComboboxContextValue = React.useMemo(
+ () => ({
+ filter,
+ inputProps,
+ inputRef,
+ removeInput,
+ setHasEmpty,
+ showTrigger,
+ trigger,
+ }),
+ [trigger, showTrigger, filter, inputProps, removeInput]
+ );
- const store = useComboboxStore({
- // open: ,
- setValue: (newValue) => React.startTransition(() => setValue(newValue)),
- });
+ const store = useComboboxStore({
+ // open: ,
+ setValue: (newValue) => React.startTransition(() => setValue(newValue)),
+ });
- const items = store.useState('items');
+ const items = store.useState("items");
- /**
- * If there is no active ID and the list of items changes, select the first
- * item.
- */
- React.useEffect(() => {
- if (items.length === 0) return;
+ /**
+ * If there is no active ID and the list of items changes, select the first
+ * item.
+ */
+ React.useEffect(() => {
+ if (items.length === 0) return;
- if (!store.getState().activeId) {
- store.setActiveId(store.first());
- }
- }, [items, store]);
+ if (!store.getState().activeId) {
+ store.setActiveId(store.first());
+ }
+ }, [items, store]);
- return (
-
- 0 || hasEmpty) &&
- (!hideWhenNoValue || value.length > 0)
- }
- store={store}
- >
-
- {children}
-
-
-
- );
+ return (
+
+ 0 || hasEmpty) && (!hideWhenNoValue || value.length > 0)}
+ store={store}
+ >
+
+ {children}
+
+
+
+ );
};
const InlineComboboxInput = ({
- className,
- ref: propRef,
- ...props
+ className,
+ ref: propRef,
+ ...props
}: React.HTMLAttributes & {
- ref?: React.RefObject;
+ ref?: React.RefObject;
}) => {
- const {
- inputProps,
- inputRef: contextRef,
- showTrigger,
- trigger,
- } = React.useContext(InlineComboboxContext);
+ const {
+ inputProps,
+ inputRef: contextRef,
+ showTrigger,
+ trigger,
+ } = React.useContext(InlineComboboxContext);
- const store = useRequiredComboboxContext();
- const value = store.useState('value');
+ const store = useRequiredComboboxContext();
+ const value = store.useState("value");
- const ref = useComposedRef(propRef, contextRef);
+ const ref = useComposedRef(propRef, contextRef);
- /**
- * To create an auto-resizing input, we render a visually hidden span
- * containing the input value and position the input element on top of it.
- * This works well for all cases except when input exceeds the width of the
- * container.
- */
+ /**
+ * To create an auto-resizing input, we render a visually hidden span
+ * containing the input value and position the input element on top of it.
+ * This works well for all cases except when input exceeds the width of the
+ * container.
+ */
- return (
- <>
- {showTrigger && trigger}
+ return (
+ <>
+ {showTrigger && trigger}
-
-
- {value || '\u200B'}
-
+
+
+ {value || "\u200B"}
+
-
-
-
- );
+
+
+
+ );
};
-InlineComboboxInput.displayName = 'InlineComboboxInput';
+InlineComboboxInput.displayName = "InlineComboboxInput";
-const InlineComboboxContent: typeof ComboboxPopover = ({
- className,
- ...props
-}) => {
- // Portal prevents CSS from leaking into popover
- const store = useComboboxContext();
+const InlineComboboxContent: typeof ComboboxPopover = ({ className, ...props }) => {
+ // Portal prevents CSS from leaking into popover
+ const store = useComboboxContext();
- function handleKeyDown(event: React.KeyboardEvent) {
- if (!store) return;
+ function handleKeyDown(event: React.KeyboardEvent) {
+ if (!store) return;
- const state = store.getState();
- const { items, activeId } = state;
+ const state = store.getState();
+ const { items, activeId } = state;
- if (!items.length) return;
+ if (!items.length) return;
- const currentIndex = items.findIndex((item) => item.id === activeId);
+ const currentIndex = items.findIndex((item) => item.id === activeId);
- if (event.key === 'ArrowUp' && currentIndex <= 0) {
- event.preventDefault();
- store.setActiveId(store.last());
- } else if (event.key === 'ArrowDown' && currentIndex >= items.length - 1) {
- event.preventDefault();
- store.setActiveId(store.first());
- }
- }
+ if (event.key === "ArrowUp" && currentIndex <= 0) {
+ event.preventDefault();
+ store.setActiveId(store.last());
+ } else if (event.key === "ArrowDown" && currentIndex >= items.length - 1) {
+ event.preventDefault();
+ store.setActiveId(store.first());
+ }
+ }
- return (
-
-
-
- );
+ return (
+
+
+
+ );
};
const comboboxItemVariants = cva(
- 'relative mx-1 flex h-[28px] select-none items-center rounded-sm px-2 text-foreground text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
- {
- defaultVariants: {
- interactive: true,
- },
- variants: {
- interactive: {
- false: '',
- true: 'cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground dark:hover:bg-neutral-700 dark:data-[active-item=true]:bg-neutral-700',
- },
- },
- }
+ "relative mx-1 flex h-[28px] select-none items-center rounded-sm px-2 text-foreground text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ defaultVariants: {
+ interactive: true,
+ },
+ variants: {
+ interactive: {
+ false: "",
+ true: "cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground dark:hover:bg-neutral-700 dark:data-[active-item=true]:bg-neutral-700",
+ },
+ },
+ }
);
const InlineComboboxItem = ({
- className,
- focusEditor = true,
- group,
- keywords,
- label,
- onClick,
- ...props
+ className,
+ focusEditor = true,
+ group,
+ keywords,
+ label,
+ onClick,
+ ...props
}: {
- focusEditor?: boolean;
- group?: string;
- keywords?: string[];
- label?: string;
+ focusEditor?: boolean;
+ group?: string;
+ keywords?: string[];
+ label?: string;
} & ComboboxItemProps &
- Required>) => {
- const { value } = props;
+ Required>) => {
+ const { value } = props;
- const { filter, removeInput } = React.useContext(InlineComboboxContext);
+ const { filter, removeInput } = React.useContext(InlineComboboxContext);
- const store = useRequiredComboboxContext();
+ const store = useRequiredComboboxContext();
- // Always call hook unconditionally; only use value if filter is active
- const storeValue = store.useState('value');
- const search = filter ? storeValue : '';
+ // Always call hook unconditionally; only use value if filter is active
+ const storeValue = store.useState("value");
+ const search = filter ? storeValue : "";
- const visible = React.useMemo(
- () =>
- !filter || filter({ group, keywords, label, value }, search),
- [filter, group, keywords, label, value, search]
- );
+ const visible = React.useMemo(
+ () => !filter || filter({ group, keywords, label, value }, search),
+ [filter, group, keywords, label, value, search]
+ );
- if (!visible) return null;
+ if (!visible) return null;
- return (
- {
- removeInput(focusEditor);
- onClick?.(event);
- }}
- {...props}
- />
- );
+ return (
+ {
+ removeInput(focusEditor);
+ onClick?.(event);
+ }}
+ {...props}
+ />
+ );
};
-const InlineComboboxEmpty = ({
- children,
- className,
-}: React.HTMLAttributes) => {
- const { setHasEmpty } = React.useContext(InlineComboboxContext);
- const store = useRequiredComboboxContext();
- const items = store.useState('items');
+const InlineComboboxEmpty = ({ children, className }: React.HTMLAttributes) => {
+ const { setHasEmpty } = React.useContext(InlineComboboxContext);
+ const store = useRequiredComboboxContext();
+ const items = store.useState("items");
- React.useEffect(() => {
- setHasEmpty(true);
+ React.useEffect(() => {
+ setHasEmpty(true);
- return () => {
- setHasEmpty(false);
- };
- }, [setHasEmpty]);
+ return () => {
+ setHasEmpty(false);
+ };
+ }, [setHasEmpty]);
- if (items.length > 0) return null;
+ if (items.length > 0) return null;
- return (
-
- {children}
-
- );
+ return (
+ {children}
+ );
};
const InlineComboboxRow = ComboboxRow;
-function InlineComboboxGroup({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
- );
+function InlineComboboxGroup({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
}
function InlineComboboxGroupLabel({
- className,
- ...props
+ className,
+ ...props
}: React.ComponentProps) {
- return (
-
- );
+ return (
+
+ );
}
export {
- InlineCombobox,
- InlineComboboxContent,
- InlineComboboxEmpty,
- InlineComboboxGroup,
- InlineComboboxGroupLabel,
- InlineComboboxInput,
- InlineComboboxItem,
- InlineComboboxRow,
+ InlineCombobox,
+ InlineComboboxContent,
+ InlineComboboxEmpty,
+ InlineComboboxGroup,
+ InlineComboboxGroupLabel,
+ InlineComboboxInput,
+ InlineComboboxItem,
+ InlineComboboxRow,
};
diff --git a/surfsense_web/components/ui/insert-toolbar-button.tsx b/surfsense_web/components/ui/insert-toolbar-button.tsx
index 666704c0c..437087bc7 100644
--- a/surfsense_web/components/ui/insert-toolbar-button.tsx
+++ b/surfsense_web/components/ui/insert-toolbar-button.tsx
@@ -1,229 +1,225 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import type { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
import {
- ChevronRightIcon,
- FileCodeIcon,
- Heading1Icon,
- Heading2Icon,
- Heading3Icon,
- InfoIcon,
- ListIcon,
- ListOrderedIcon,
- MinusIcon,
- PilcrowIcon,
- PlusIcon,
- QuoteIcon,
- RadicalIcon,
- SquareIcon,
- SubscriptIcon,
- SuperscriptIcon,
- TableIcon,
-} from 'lucide-react';
-import { KEYS } from 'platejs';
-import { type PlateEditor, useEditorRef } from 'platejs/react';
+ ChevronRightIcon,
+ FileCodeIcon,
+ Heading1Icon,
+ Heading2Icon,
+ Heading3Icon,
+ InfoIcon,
+ ListIcon,
+ ListOrderedIcon,
+ MinusIcon,
+ PilcrowIcon,
+ PlusIcon,
+ QuoteIcon,
+ RadicalIcon,
+ SquareIcon,
+ SubscriptIcon,
+ SuperscriptIcon,
+ TableIcon,
+} from "lucide-react";
+import { KEYS } from "platejs";
+import { type PlateEditor, useEditorRef } from "platejs/react";
import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
- insertBlock,
- insertInlineElement,
-} from '@/components/editor/transforms';
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { insertBlock, insertInlineElement } from "@/components/editor/transforms";
-import { ToolbarButton, ToolbarMenuGroup } from './toolbar';
+import { ToolbarButton, ToolbarMenuGroup } from "./toolbar";
type Group = {
- group: string;
- items: Item[];
+ group: string;
+ items: Item[];
};
type Item = {
- icon: React.ReactNode;
- value: string;
- onSelect: (editor: PlateEditor, value: string) => void;
- focusEditor?: boolean;
- label?: string;
+ icon: React.ReactNode;
+ value: string;
+ onSelect: (editor: PlateEditor, value: string) => void;
+ focusEditor?: boolean;
+ label?: string;
};
const groups: Group[] = [
- {
- group: 'Basic blocks',
- items: [
- {
- icon: ,
- label: 'Paragraph',
- value: KEYS.p,
- },
- {
- icon: ,
- label: 'Heading 1',
- value: 'h1',
- },
- {
- icon: ,
- label: 'Heading 2',
- value: 'h2',
- },
- {
- icon: ,
- label: 'Heading 3',
- value: 'h3',
- },
- {
- icon: ,
- label: 'Table',
- value: KEYS.table,
- },
- {
- icon: ,
- label: 'Code block',
- value: KEYS.codeBlock,
- },
- {
- icon: ,
- label: 'Quote',
- value: KEYS.blockquote,
- },
- {
- icon: ,
- label: 'Divider',
- value: KEYS.hr,
- },
- ].map((item) => ({
- ...item,
- onSelect: (editor: PlateEditor, value: string) => {
- insertBlock(editor, value);
- },
- })),
- },
- {
- group: 'Lists',
- items: [
- {
- icon: ,
- label: 'Bulleted list',
- value: KEYS.ul,
- },
- {
- icon: ,
- label: 'Numbered list',
- value: KEYS.ol,
- },
- {
- icon: ,
- label: 'To-do list',
- value: KEYS.listTodo,
- },
- {
- icon: ,
- label: 'Toggle list',
- value: KEYS.toggle,
- },
- ].map((item) => ({
- ...item,
- onSelect: (editor: PlateEditor, value: string) => {
- insertBlock(editor, value);
- },
- })),
- },
- {
- group: 'Advanced',
- items: [
- {
- icon: ,
- label: 'Callout',
- value: KEYS.callout,
- },
- {
- focusEditor: false,
- icon: ,
- label: 'Equation',
- value: KEYS.equation,
- },
- ].map((item) => ({
- ...item,
- onSelect: (editor: PlateEditor, value: string) => {
- if (item.value === KEYS.equation) {
- insertInlineElement(editor, value);
- } else {
- insertBlock(editor, value);
- }
- },
- })),
- },
- {
- group: 'Marks',
- items: [
- {
- icon: ,
- label: 'Superscript',
- value: KEYS.sup,
- },
- {
- icon: ,
- label: 'Subscript',
- value: KEYS.sub,
- },
- ].map((item) => ({
- ...item,
- onSelect: (editor: PlateEditor, value: string) => {
- editor.tf.toggleMark(value, {
- remove: value === KEYS.sup ? KEYS.sub : KEYS.sup,
- });
- },
- })),
- },
+ {
+ group: "Basic blocks",
+ items: [
+ {
+ icon: ,
+ label: "Paragraph",
+ value: KEYS.p,
+ },
+ {
+ icon: ,
+ label: "Heading 1",
+ value: "h1",
+ },
+ {
+ icon: ,
+ label: "Heading 2",
+ value: "h2",
+ },
+ {
+ icon: ,
+ label: "Heading 3",
+ value: "h3",
+ },
+ {
+ icon: ,
+ label: "Table",
+ value: KEYS.table,
+ },
+ {
+ icon: ,
+ label: "Code block",
+ value: KEYS.codeBlock,
+ },
+ {
+ icon: ,
+ label: "Quote",
+ value: KEYS.blockquote,
+ },
+ {
+ icon: ,
+ label: "Divider",
+ value: KEYS.hr,
+ },
+ ].map((item) => ({
+ ...item,
+ onSelect: (editor: PlateEditor, value: string) => {
+ insertBlock(editor, value);
+ },
+ })),
+ },
+ {
+ group: "Lists",
+ items: [
+ {
+ icon: ,
+ label: "Bulleted list",
+ value: KEYS.ul,
+ },
+ {
+ icon: ,
+ label: "Numbered list",
+ value: KEYS.ol,
+ },
+ {
+ icon: ,
+ label: "To-do list",
+ value: KEYS.listTodo,
+ },
+ {
+ icon: ,
+ label: "Toggle list",
+ value: KEYS.toggle,
+ },
+ ].map((item) => ({
+ ...item,
+ onSelect: (editor: PlateEditor, value: string) => {
+ insertBlock(editor, value);
+ },
+ })),
+ },
+ {
+ group: "Advanced",
+ items: [
+ {
+ icon: ,
+ label: "Callout",
+ value: KEYS.callout,
+ },
+ {
+ focusEditor: false,
+ icon: ,
+ label: "Equation",
+ value: KEYS.equation,
+ },
+ ].map((item) => ({
+ ...item,
+ onSelect: (editor: PlateEditor, value: string) => {
+ if (item.value === KEYS.equation) {
+ insertInlineElement(editor, value);
+ } else {
+ insertBlock(editor, value);
+ }
+ },
+ })),
+ },
+ {
+ group: "Marks",
+ items: [
+ {
+ icon: ,
+ label: "Superscript",
+ value: KEYS.sup,
+ },
+ {
+ icon: ,
+ label: "Subscript",
+ value: KEYS.sub,
+ },
+ ].map((item) => ({
+ ...item,
+ onSelect: (editor: PlateEditor, value: string) => {
+ editor.tf.toggleMark(value, {
+ remove: value === KEYS.sup ? KEYS.sub : KEYS.sup,
+ });
+ },
+ })),
+ },
];
export function InsertToolbarButton(props: DropdownMenuProps) {
- const editor = useEditorRef();
- const [open, setOpen] = React.useState(false);
+ const editor = useEditorRef();
+ const [open, setOpen] = React.useState(false);
- return (
-
-
-
-
-
-
+ return (
+
+
+
+
+
+
-
- {groups.map(({ group, items }) => (
-
-
- {items.map(({ icon, label, value, onSelect, focusEditor }) => (
- {
- onSelect(editor, value);
- if (focusEditor !== false) {
- editor.tf.focus();
- }
- setOpen(false);
- }}
- className="group"
- >
-
- {icon}
- {label || value}
-
-
- ))}
-
-
- ))}
-
-
- );
+
+ {groups.map(({ group, items }) => (
+
+
+ {items.map(({ icon, label, value, onSelect, focusEditor }) => (
+ {
+ onSelect(editor, value);
+ if (focusEditor !== false) {
+ editor.tf.focus();
+ }
+ setOpen(false);
+ }}
+ className="group"
+ >
+
+ {icon}
+ {label || value}
+
+
+ ))}
+
+
+ ))}
+
+
+ );
}
-
diff --git a/surfsense_web/components/ui/link-node.tsx b/surfsense_web/components/ui/link-node.tsx
index 82e916ed0..0692939dd 100644
--- a/surfsense_web/components/ui/link-node.tsx
+++ b/surfsense_web/components/ui/link-node.tsx
@@ -1,32 +1,32 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import type { TLinkElement } from 'platejs';
-import type { PlateElementProps } from 'platejs/react';
+import type { TLinkElement } from "platejs";
+import type { PlateElementProps } from "platejs/react";
-import { getLinkAttributes } from '@platejs/link';
-import { PlateElement } from 'platejs/react';
+import { getLinkAttributes } from "@platejs/link";
+import { PlateElement } from "platejs/react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
export function LinkElement(props: PlateElementProps) {
- return (
- {
- e.stopPropagation();
- },
- }}
- >
- {props.children}
-
- );
+ return (
+ {
+ e.stopPropagation();
+ },
+ }}
+ >
+ {props.children}
+
+ );
}
diff --git a/surfsense_web/components/ui/link-toolbar-button.tsx b/surfsense_web/components/ui/link-toolbar-button.tsx
index a63d9d4eb..3589de772 100644
--- a/surfsense_web/components/ui/link-toolbar-button.tsx
+++ b/surfsense_web/components/ui/link-toolbar-button.tsx
@@ -1,24 +1,19 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import {
- useLinkToolbarButton,
- useLinkToolbarButtonState,
-} from '@platejs/link/react';
-import { Link } from 'lucide-react';
+import { useLinkToolbarButton, useLinkToolbarButtonState } from "@platejs/link/react";
+import { Link } from "lucide-react";
-import { ToolbarButton } from './toolbar';
+import { ToolbarButton } from "./toolbar";
-export function LinkToolbarButton(
- props: React.ComponentProps
-) {
- const state = useLinkToolbarButtonState();
- const { props: buttonProps } = useLinkToolbarButton(state);
+export function LinkToolbarButton(props: React.ComponentProps) {
+ const state = useLinkToolbarButtonState();
+ const { props: buttonProps } = useLinkToolbarButton(state);
- return (
-
-
-
- );
+ return (
+
+
+
+ );
}
diff --git a/surfsense_web/components/ui/link-toolbar.tsx b/surfsense_web/components/ui/link-toolbar.tsx
index ba9611fa4..b73247387 100644
--- a/surfsense_web/components/ui/link-toolbar.tsx
+++ b/surfsense_web/components/ui/link-toolbar.tsx
@@ -1,208 +1,196 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import type { TLinkElement } from 'platejs';
+import type { TLinkElement } from "platejs";
+import { type UseVirtualFloatingOptions, flip, offset } from "@platejs/floating";
+import { getLinkAttributes } from "@platejs/link";
import {
- type UseVirtualFloatingOptions,
- flip,
- offset,
-} from '@platejs/floating';
-import { getLinkAttributes } from '@platejs/link';
+ type LinkFloatingToolbarState,
+ FloatingLinkUrlInput,
+ useFloatingLinkEdit,
+ useFloatingLinkEditState,
+ useFloatingLinkInsert,
+ useFloatingLinkInsertState,
+} from "@platejs/link/react";
+import { cva } from "class-variance-authority";
+import { ExternalLink, Link, Text, Unlink } from "lucide-react";
+import { KEYS } from "platejs";
import {
- type LinkFloatingToolbarState,
- FloatingLinkUrlInput,
- useFloatingLinkEdit,
- useFloatingLinkEditState,
- useFloatingLinkInsert,
- useFloatingLinkInsertState,
-} from '@platejs/link/react';
-import { cva } from 'class-variance-authority';
-import { ExternalLink, Link, Text, Unlink } from 'lucide-react';
-import { KEYS } from 'platejs';
-import {
- useEditorRef,
- useEditorSelection,
- useFormInputProps,
- usePluginOption,
-} from 'platejs/react';
+ useEditorRef,
+ useEditorSelection,
+ useFormInputProps,
+ usePluginOption,
+} from "platejs/react";
-import { buttonVariants } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
+import { buttonVariants } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
const popoverVariants = cva(
- 'z-50 w-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden'
+ "z-50 w-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden"
);
const inputVariants = cva(
- 'flex h-[28px] w-full rounded-md border-none bg-transparent px-1.5 py-1 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-transparent md:text-sm'
+ "flex h-[28px] w-full rounded-md border-none bg-transparent px-1.5 py-1 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-transparent md:text-sm"
);
-export function LinkFloatingToolbar({
- state,
-}: {
- state?: LinkFloatingToolbarState;
-}) {
- const activeCommentId = usePluginOption({ key: KEYS.comment }, 'activeId');
- const activeSuggestionId = usePluginOption(
- { key: KEYS.suggestion },
- 'activeId'
- );
+export function LinkFloatingToolbar({ state }: { state?: LinkFloatingToolbarState }) {
+ const activeCommentId = usePluginOption({ key: KEYS.comment }, "activeId");
+ const activeSuggestionId = usePluginOption({ key: KEYS.suggestion }, "activeId");
- const floatingOptions: UseVirtualFloatingOptions = React.useMemo(
- () => ({
- middleware: [
- offset(8),
- flip({
- fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],
- padding: 12,
- }),
- ],
- placement:
- activeSuggestionId || activeCommentId ? 'top-start' : 'bottom-start',
- }),
- [activeCommentId, activeSuggestionId]
- );
+ const floatingOptions: UseVirtualFloatingOptions = React.useMemo(
+ () => ({
+ middleware: [
+ offset(8),
+ flip({
+ fallbackPlacements: ["bottom-end", "top-start", "top-end"],
+ padding: 12,
+ }),
+ ],
+ placement: activeSuggestionId || activeCommentId ? "top-start" : "bottom-start",
+ }),
+ [activeCommentId, activeSuggestionId]
+ );
- const insertState = useFloatingLinkInsertState({
- ...state,
- floatingOptions: {
- ...floatingOptions,
- ...state?.floatingOptions,
- },
- });
- const {
- hidden,
- props: insertProps,
- ref: insertRef,
- textInputProps,
- } = useFloatingLinkInsert(insertState);
+ const insertState = useFloatingLinkInsertState({
+ ...state,
+ floatingOptions: {
+ ...floatingOptions,
+ ...state?.floatingOptions,
+ },
+ });
+ const {
+ hidden,
+ props: insertProps,
+ ref: insertRef,
+ textInputProps,
+ } = useFloatingLinkInsert(insertState);
- const editState = useFloatingLinkEditState({
- ...state,
- floatingOptions: {
- ...floatingOptions,
- ...state?.floatingOptions,
- },
- });
- const {
- editButtonProps,
- props: editProps,
- ref: editRef,
- unlinkButtonProps,
- } = useFloatingLinkEdit(editState);
- const inputProps = useFormInputProps({
- preventDefaultOnEnterKeydown: true,
- });
+ const editState = useFloatingLinkEditState({
+ ...state,
+ floatingOptions: {
+ ...floatingOptions,
+ ...state?.floatingOptions,
+ },
+ });
+ const {
+ editButtonProps,
+ props: editProps,
+ ref: editRef,
+ unlinkButtonProps,
+ } = useFloatingLinkEdit(editState);
+ const inputProps = useFormInputProps({
+ preventDefaultOnEnterKeydown: true,
+ });
- if (hidden) return null;
+ if (hidden) return null;
- const input = (
-
-
-
-
-
+ const input = (
+
- );
+
+
+
+
+
-
+ const editContent = editState.isEditing ? (
+ input
+ ) : (
+
+
-
+
-
+
-
+
-
-
- );
+
+
- {input}
-
+ return (
+ <>
+
+ {input}
+
-
- {editContent}
-
-
- );
+
+ {editContent}
+
+
+ );
}
function LinkOpenButton() {
- const editor = useEditorRef();
- const selection = useEditorSelection();
+ const editor = useEditorRef();
+ const selection = useEditorSelection();
- const attributes = React.useMemo(
- () => {
- const entry = editor.api.node({
- match: { type: editor.getType(KEYS.link) },
- });
- if (!entry) {
- return {};
- }
- const [element] = entry;
- return getLinkAttributes(editor, element);
- },
- // eslint-disable-next-line react-hooks/exhaustive-deps
- [editor, selection]
- );
+ const attributes = React.useMemo(
+ () => {
+ const entry = editor.api.node({
+ match: { type: editor.getType(KEYS.link) },
+ });
+ if (!entry) {
+ return {};
+ }
+ const [element] = entry;
+ return getLinkAttributes(editor, element);
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [editor, selection]
+ );
- return (
- {
- e.stopPropagation();
- }}
- aria-label="Open link in a new tab"
- target="_blank"
- >
-
-
- );
+ return (
+ {
+ e.stopPropagation();
+ }}
+ aria-label="Open link in a new tab"
+ target="_blank"
+ >
+
+
+ );
}
diff --git a/surfsense_web/components/ui/mark-toolbar-button.tsx b/surfsense_web/components/ui/mark-toolbar-button.tsx
index 4534ab8b9..b616698a8 100644
--- a/surfsense_web/components/ui/mark-toolbar-button.tsx
+++ b/surfsense_web/components/ui/mark-toolbar-button.tsx
@@ -1,29 +1,29 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import { useMarkToolbarButton, useMarkToolbarButtonState } from 'platejs/react';
+import { useMarkToolbarButton, useMarkToolbarButtonState } from "platejs/react";
-import { ToolbarButton } from './toolbar';
+import { ToolbarButton } from "./toolbar";
export function MarkToolbarButton({
- clear,
- nodeType,
- ...props
+ clear,
+ nodeType,
+ ...props
}: React.ComponentProps & {
- nodeType: string;
- clear?: string[] | string;
+ nodeType: string;
+ clear?: string[] | string;
}) {
- const state = useMarkToolbarButtonState({ clear, nodeType });
- const { props: buttonProps } = useMarkToolbarButton(state);
+ const state = useMarkToolbarButtonState({ clear, nodeType });
+ const { props: buttonProps } = useMarkToolbarButton(state);
- return (
- {
- e.preventDefault();
- }}
- />
- );
+ return (
+ {
+ e.preventDefault();
+ }}
+ />
+ );
}
diff --git a/surfsense_web/components/ui/mode-toolbar-button.tsx b/surfsense_web/components/ui/mode-toolbar-button.tsx
index fab0b591e..37231991f 100644
--- a/surfsense_web/components/ui/mode-toolbar-button.tsx
+++ b/surfsense_web/components/ui/mode-toolbar-button.tsx
@@ -1,19 +1,19 @@
-'use client';
+"use client";
-import { BookOpenIcon, PenLineIcon } from 'lucide-react';
-import { usePlateState } from 'platejs/react';
+import { BookOpenIcon, PenLineIcon } from "lucide-react";
+import { usePlateState } from "platejs/react";
-import { ToolbarButton } from './toolbar';
+import { ToolbarButton } from "./toolbar";
export function ModeToolbarButton() {
- const [readOnly, setReadOnly] = usePlateState('readOnly');
+ const [readOnly, setReadOnly] = usePlateState("readOnly");
- return (
- setReadOnly(!readOnly)}
- >
- {readOnly ? : }
-
- );
+ return (
+ setReadOnly(!readOnly)}
+ >
+ {readOnly ? : }
+
+ );
}
diff --git a/surfsense_web/components/ui/paragraph-node.tsx b/surfsense_web/components/ui/paragraph-node.tsx
index e4004049f..bef198dec 100644
--- a/surfsense_web/components/ui/paragraph-node.tsx
+++ b/surfsense_web/components/ui/paragraph-node.tsx
@@ -1,17 +1,17 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import type { PlateElementProps } from 'platejs/react';
+import type { PlateElementProps } from "platejs/react";
-import { PlateElement } from 'platejs/react';
+import { PlateElement } from "platejs/react";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
export function ParagraphElement(props: PlateElementProps) {
- return (
-
- {props.children}
-
- );
+ return (
+
+ {props.children}
+
+ );
}
diff --git a/surfsense_web/components/ui/resize-handle.tsx b/surfsense_web/components/ui/resize-handle.tsx
index 73f42a1b5..05390a8da 100644
--- a/surfsense_web/components/ui/resize-handle.tsx
+++ b/surfsense_web/components/ui/resize-handle.tsx
@@ -1,89 +1,79 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import type { VariantProps } from 'class-variance-authority';
+import type { VariantProps } from "class-variance-authority";
import {
- type ResizeHandle as ResizeHandlePrimitive,
- Resizable as ResizablePrimitive,
- useResizeHandle,
- useResizeHandleState,
-} from '@platejs/resizable';
-import { cva } from 'class-variance-authority';
+ type ResizeHandle as ResizeHandlePrimitive,
+ Resizable as ResizablePrimitive,
+ useResizeHandle,
+ useResizeHandleState,
+} from "@platejs/resizable";
+import { cva } from "class-variance-authority";
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
export const mediaResizeHandleVariants = cva(
- cn(
- 'top-0 flex w-6 select-none flex-col justify-center',
- "after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100"
- ),
- {
- variants: {
- direction: {
- left: '-left-3 -ml-3 pl-3',
- right: '-right-3 -mr-3 items-end pr-3',
- },
- },
- }
+ cn(
+ "top-0 flex w-6 select-none flex-col justify-center",
+ "after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100"
+ ),
+ {
+ variants: {
+ direction: {
+ left: "-left-3 -ml-3 pl-3",
+ right: "-right-3 -mr-3 items-end pr-3",
+ },
+ },
+ }
);
-const resizeHandleVariants = cva('absolute z-40', {
- variants: {
- direction: {
- bottom: 'w-full cursor-row-resize',
- left: 'h-full cursor-col-resize',
- right: 'h-full cursor-col-resize',
- top: 'w-full cursor-row-resize',
- },
- },
+const resizeHandleVariants = cva("absolute z-40", {
+ variants: {
+ direction: {
+ bottom: "w-full cursor-row-resize",
+ left: "h-full cursor-col-resize",
+ right: "h-full cursor-col-resize",
+ top: "w-full cursor-row-resize",
+ },
+ },
});
export function ResizeHandle({
- className,
- options,
- ...props
-}: React.ComponentProps &
- VariantProps) {
- const state = useResizeHandleState(options ?? {});
- const resizeHandle = useResizeHandle(state);
+ className,
+ options,
+ ...props
+}: React.ComponentProps & VariantProps) {
+ const state = useResizeHandleState(options ?? {});
+ const resizeHandle = useResizeHandle(state);
- if (state.readOnly) return null;
+ if (state.readOnly) return null;
- return (
-
- );
+ return (
+
+ );
}
-const resizableVariants = cva('', {
- variants: {
- align: {
- center: 'mx-auto',
- left: 'mr-auto',
- right: 'ml-auto',
- },
- },
+const resizableVariants = cva("", {
+ variants: {
+ align: {
+ center: "mx-auto",
+ left: "mr-auto",
+ right: "ml-auto",
+ },
+ },
});
export function Resizable({
- align,
- className,
- ...props
-}: React.ComponentProps &
- VariantProps) {
- return (
-
- );
+ align,
+ className,
+ ...props
+}: React.ComponentProps & VariantProps) {
+ return ;
}
diff --git a/surfsense_web/components/ui/separator.tsx b/surfsense_web/components/ui/separator.tsx
index 4c24b2a88..98f0a73ac 100644
--- a/surfsense_web/components/ui/separator.tsx
+++ b/surfsense_web/components/ui/separator.tsx
@@ -1,28 +1,28 @@
-"use client"
+"use client";
-import * as React from "react"
-import { Separator as SeparatorPrimitive } from "radix-ui"
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
function Separator({
- className,
- orientation = "horizontal",
- decorative = true,
- ...props
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
}: React.ComponentProps) {
- return (
-
- )
+ return (
+
+ );
}
-export { Separator }
+export { Separator };
diff --git a/surfsense_web/components/ui/slash-node.tsx b/surfsense_web/components/ui/slash-node.tsx
index 09df86e86..07badcd16 100644
--- a/surfsense_web/components/ui/slash-node.tsx
+++ b/surfsense_web/components/ui/slash-node.tsx
@@ -1,223 +1,217 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import type { PlateElementProps } from 'platejs/react';
+import type { PlateElementProps } from "platejs/react";
-import { SlashInputPlugin } from '@platejs/slash-command/react';
+import { SlashInputPlugin } from "@platejs/slash-command/react";
import {
- ChevronRightIcon,
- Code2Icon,
- FileCodeIcon,
- Heading1Icon,
- Heading2Icon,
- Heading3Icon,
- InfoIcon,
- ListIcon,
- ListOrderedIcon,
- MinusIcon,
- PilcrowIcon,
- QuoteIcon,
- RadicalIcon,
- SquareIcon,
- TableIcon,
-} from 'lucide-react';
-import { KEYS } from 'platejs';
-import { PlateElement, useEditorRef } from 'platejs/react';
+ ChevronRightIcon,
+ Code2Icon,
+ FileCodeIcon,
+ Heading1Icon,
+ Heading2Icon,
+ Heading3Icon,
+ InfoIcon,
+ ListIcon,
+ ListOrderedIcon,
+ MinusIcon,
+ PilcrowIcon,
+ QuoteIcon,
+ RadicalIcon,
+ SquareIcon,
+ TableIcon,
+} from "lucide-react";
+import { KEYS } from "platejs";
+import { PlateElement, useEditorRef } from "platejs/react";
import {
- InlineCombobox,
- InlineComboboxContent,
- InlineComboboxEmpty,
- InlineComboboxGroup,
- InlineComboboxGroupLabel,
- InlineComboboxInput,
- InlineComboboxItem,
-} from '@/components/ui/inline-combobox';
-import { insertBlock, insertInlineElement } from '@/components/editor/transforms';
+ InlineCombobox,
+ InlineComboboxContent,
+ InlineComboboxEmpty,
+ InlineComboboxGroup,
+ InlineComboboxGroupLabel,
+ InlineComboboxInput,
+ InlineComboboxItem,
+} from "@/components/ui/inline-combobox";
+import { insertBlock, insertInlineElement } from "@/components/editor/transforms";
interface SlashCommandItem {
- icon: React.ReactNode;
- keywords: string[];
- label: string;
- value: string;
- onSelect: (editor: any) => void;
+ icon: React.ReactNode;
+ keywords: string[];
+ label: string;
+ value: string;
+ onSelect: (editor: any) => void;
}
const slashCommandGroups: { heading: string; items: SlashCommandItem[] }[] = [
- {
- heading: 'Basic Blocks',
- items: [
- {
- icon: ,
- keywords: ['paragraph', 'text', 'plain'],
- label: 'Text',
- value: 'text',
- onSelect: (editor) => insertBlock(editor, KEYS.p),
- },
- {
- icon: ,
- keywords: ['title', 'h1', 'heading'],
- label: 'Heading 1',
- value: 'heading1',
- onSelect: (editor) => insertBlock(editor, 'h1'),
- },
- {
- icon: ,
- keywords: ['subtitle', 'h2', 'heading'],
- label: 'Heading 2',
- value: 'heading2',
- onSelect: (editor) => insertBlock(editor, 'h2'),
- },
- {
- icon: ,
- keywords: ['subtitle', 'h3', 'heading'],
- label: 'Heading 3',
- value: 'heading3',
- onSelect: (editor) => insertBlock(editor, 'h3'),
- },
- {
- icon: ,
- keywords: ['citation', 'blockquote'],
- label: 'Quote',
- value: 'quote',
- onSelect: (editor) => insertBlock(editor, KEYS.blockquote),
- },
- {
- icon: ,
- keywords: ['divider', 'separator', 'line'],
- label: 'Divider',
- value: 'divider',
- onSelect: (editor) => insertBlock(editor, KEYS.hr),
- },
- ],
- },
- {
- heading: 'Lists',
- items: [
- {
- icon: ,
- keywords: ['unordered', 'ul', 'bullet'],
- label: 'Bulleted list',
- value: 'bulleted-list',
- onSelect: (editor) => insertBlock(editor, KEYS.ul),
- },
- {
- icon: ,
- keywords: ['ordered', 'ol', 'numbered'],
- label: 'Numbered list',
- value: 'numbered-list',
- onSelect: (editor) => insertBlock(editor, KEYS.ol),
- },
- {
- icon: ,
- keywords: ['checklist', 'task', 'checkbox', 'todo'],
- label: 'To-do list',
- value: 'todo-list',
- onSelect: (editor) => insertBlock(editor, KEYS.listTodo),
- },
- ],
- },
- {
- heading: 'Advanced',
- items: [
- {
- icon: ,
- keywords: ['table', 'grid'],
- label: 'Table',
- value: 'table',
- onSelect: (editor) => insertBlock(editor, KEYS.table),
- },
- {
- icon: ,
- keywords: ['code', 'codeblock', 'snippet'],
- label: 'Code block',
- value: 'code-block',
- onSelect: (editor) => insertBlock(editor, KEYS.codeBlock),
- },
- {
- icon: ,
- keywords: ['callout', 'note', 'info', 'warning', 'tip'],
- label: 'Callout',
- value: 'callout',
- onSelect: (editor) => insertBlock(editor, KEYS.callout),
- },
- {
- icon: ,
- keywords: ['toggle', 'collapsible', 'expand'],
- label: 'Toggle',
- value: 'toggle',
- onSelect: (editor) => insertBlock(editor, KEYS.toggle),
- },
- {
- icon: ,
- keywords: ['equation', 'math', 'formula', 'latex'],
- label: 'Equation',
- value: 'equation',
- onSelect: (editor) => insertInlineElement(editor, KEYS.equation),
- },
- ],
- },
- {
- heading: 'Inline',
- items: [
- {
- icon: ,
- keywords: ['link', 'url', 'href'],
- label: 'Link',
- value: 'link',
- onSelect: (editor) => insertInlineElement(editor, KEYS.link),
- },
- ],
- },
+ {
+ heading: "Basic Blocks",
+ items: [
+ {
+ icon: ,
+ keywords: ["paragraph", "text", "plain"],
+ label: "Text",
+ value: "text",
+ onSelect: (editor) => insertBlock(editor, KEYS.p),
+ },
+ {
+ icon: ,
+ keywords: ["title", "h1", "heading"],
+ label: "Heading 1",
+ value: "heading1",
+ onSelect: (editor) => insertBlock(editor, "h1"),
+ },
+ {
+ icon: ,
+ keywords: ["subtitle", "h2", "heading"],
+ label: "Heading 2",
+ value: "heading2",
+ onSelect: (editor) => insertBlock(editor, "h2"),
+ },
+ {
+ icon: ,
+ keywords: ["subtitle", "h3", "heading"],
+ label: "Heading 3",
+ value: "heading3",
+ onSelect: (editor) => insertBlock(editor, "h3"),
+ },
+ {
+ icon: ,
+ keywords: ["citation", "blockquote"],
+ label: "Quote",
+ value: "quote",
+ onSelect: (editor) => insertBlock(editor, KEYS.blockquote),
+ },
+ {
+ icon: ,
+ keywords: ["divider", "separator", "line"],
+ label: "Divider",
+ value: "divider",
+ onSelect: (editor) => insertBlock(editor, KEYS.hr),
+ },
+ ],
+ },
+ {
+ heading: "Lists",
+ items: [
+ {
+ icon: ,
+ keywords: ["unordered", "ul", "bullet"],
+ label: "Bulleted list",
+ value: "bulleted-list",
+ onSelect: (editor) => insertBlock(editor, KEYS.ul),
+ },
+ {
+ icon: ,
+ keywords: ["ordered", "ol", "numbered"],
+ label: "Numbered list",
+ value: "numbered-list",
+ onSelect: (editor) => insertBlock(editor, KEYS.ol),
+ },
+ {
+ icon: ,
+ keywords: ["checklist", "task", "checkbox", "todo"],
+ label: "To-do list",
+ value: "todo-list",
+ onSelect: (editor) => insertBlock(editor, KEYS.listTodo),
+ },
+ ],
+ },
+ {
+ heading: "Advanced",
+ items: [
+ {
+ icon: ,
+ keywords: ["table", "grid"],
+ label: "Table",
+ value: "table",
+ onSelect: (editor) => insertBlock(editor, KEYS.table),
+ },
+ {
+ icon: ,
+ keywords: ["code", "codeblock", "snippet"],
+ label: "Code block",
+ value: "code-block",
+ onSelect: (editor) => insertBlock(editor, KEYS.codeBlock),
+ },
+ {
+ icon: ,
+ keywords: ["callout", "note", "info", "warning", "tip"],
+ label: "Callout",
+ value: "callout",
+ onSelect: (editor) => insertBlock(editor, KEYS.callout),
+ },
+ {
+ icon: ,
+ keywords: ["toggle", "collapsible", "expand"],
+ label: "Toggle",
+ value: "toggle",
+ onSelect: (editor) => insertBlock(editor, KEYS.toggle),
+ },
+ {
+ icon: ,
+ keywords: ["equation", "math", "formula", "latex"],
+ label: "Equation",
+ value: "equation",
+ onSelect: (editor) => insertInlineElement(editor, KEYS.equation),
+ },
+ ],
+ },
+ {
+ heading: "Inline",
+ items: [
+ {
+ icon: ,
+ keywords: ["link", "url", "href"],
+ label: "Link",
+ value: "link",
+ onSelect: (editor) => insertInlineElement(editor, KEYS.link),
+ },
+ ],
+ },
];
-export function SlashInputElement({
- children,
- ...props
-}: PlateElementProps) {
- const editor = useEditorRef();
+export function SlashInputElement({ children, ...props }: PlateElementProps) {
+ const editor = useEditorRef();
- return (
-
-
-
+ return (
+
+
+
-
- No results found.
+
+ No results found.
- {slashCommandGroups.map(({ heading, items }) => (
-
- {heading}
+ {slashCommandGroups.map(({ heading, items }) => (
+
+ {heading}
- {items.map(({ icon, keywords, label, value, onSelect }) => (
- {
- onSelect(editor);
- editor.tf.focus();
- }}
- >
-
- {icon}
-
- {label}
-
- ))}
-
- ))}
-
-
+ {items.map(({ icon, keywords, label, value, onSelect }) => (
+ {
+ onSelect(editor);
+ editor.tf.focus();
+ }}
+ >
+
+ {icon}
+
+ {label}
+
+ ))}
+
+ ))}
+
+
- {children}
-
- );
+ {children}
+
+ );
}
diff --git a/surfsense_web/components/ui/table-icons.tsx b/surfsense_web/components/ui/table-icons.tsx
index e08578912..1e793d0dd 100644
--- a/surfsense_web/components/ui/table-icons.tsx
+++ b/surfsense_web/components/ui/table-icons.tsx
@@ -1,862 +1,685 @@
-'use client';
+"use client";
-import type { LucideProps } from 'lucide-react';
+import type { LucideProps } from "lucide-react";
export function BorderAllIcon(props: LucideProps) {
- return (
-
- );
+ return (
+
+ );
}
export function BorderBottomIcon(props: LucideProps) {
- return (
-
- );
+ return (
+
+ );
}
export function BorderLeftIcon(props: LucideProps) {
- return (
-
- );
+ return (
+
+ );
}
export function BorderNoneIcon(props: LucideProps) {
- return (
-
- );
+ return (
+
+ );
}
export function BorderRightIcon(props: LucideProps) {
- return (
-
- );
+ return (
+
+ );
}
export function BorderTopIcon(props: LucideProps) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/surfsense_web/components/ui/table-node.tsx b/surfsense_web/components/ui/table-node.tsx
index 2341a23a7..3c29dd8e1 100644
--- a/surfsense_web/components/ui/table-node.tsx
+++ b/surfsense_web/components/ui/table-node.tsx
@@ -1,484 +1,439 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import { useDraggable, useDropLine } from '@platejs/dnd';
+import { useDraggable, useDropLine } from "@platejs/dnd";
+import { BlockSelectionPlugin, useBlockSelected } from "@platejs/selection/react";
import {
- BlockSelectionPlugin,
- useBlockSelected,
-} from '@platejs/selection/react';
+ TablePlugin,
+ TableProvider,
+ useTableCellElement,
+ useTableCellElementResizable,
+ useTableElement,
+ useTableMergeState,
+} from "@platejs/table/react";
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { cva } from "class-variance-authority";
import {
- TablePlugin,
- TableProvider,
- useTableCellElement,
- useTableCellElementResizable,
- useTableElement,
- useTableMergeState,
-} from '@platejs/table/react';
-import { PopoverAnchor } from '@radix-ui/react-popover';
-import { cva } from 'class-variance-authority';
+ ArrowDown,
+ ArrowLeft,
+ ArrowRight,
+ ArrowUp,
+ CombineIcon,
+ GripVertical,
+ SquareSplitHorizontalIcon,
+ Trash2Icon,
+ XIcon,
+} from "lucide-react";
import {
- ArrowDown,
- ArrowLeft,
- ArrowRight,
- ArrowUp,
- CombineIcon,
- GripVertical,
- SquareSplitHorizontalIcon,
- Trash2Icon,
- XIcon,
-} from 'lucide-react';
+ type TElement,
+ type TTableCellElement,
+ type TTableElement,
+ type TTableRowElement,
+ KEYS,
+ PathApi,
+} from "platejs";
import {
- type TElement,
- type TTableCellElement,
- type TTableElement,
- type TTableRowElement,
- KEYS,
- PathApi,
-} from 'platejs';
-import {
- type PlateElementProps,
- PlateElement,
- useComposedRef,
- useEditorPlugin,
- useEditorRef,
- useEditorSelector,
- useElement,
- useFocusedLast,
- usePluginOption,
- useReadOnly,
- useRemoveNodeButton,
- useSelected,
- withHOC,
-} from 'platejs/react';
-import { useElementSelector } from 'platejs/react';
+ type PlateElementProps,
+ PlateElement,
+ useComposedRef,
+ useEditorPlugin,
+ useEditorRef,
+ useEditorSelector,
+ useElement,
+ useFocusedLast,
+ usePluginOption,
+ useReadOnly,
+ useRemoveNodeButton,
+ useSelected,
+ withHOC,
+} from "platejs/react";
+import { useElementSelector } from "platejs/react";
-import { Button } from '@/components/ui/button';
-import { Popover, PopoverContent } from '@/components/ui/popover';
-import { cn } from '@/lib/utils';
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
-import { blockSelectionVariants } from './block-selection';
-import { ResizeHandle } from './resize-handle';
-import {
- Toolbar,
- ToolbarButton,
- ToolbarGroup,
-} from './toolbar';
+import { blockSelectionVariants } from "./block-selection";
+import { ResizeHandle } from "./resize-handle";
+import { Toolbar, ToolbarButton, ToolbarGroup } from "./toolbar";
export const TableElement = withHOC(
- TableProvider,
- function TableElement({
- children,
- ...props
- }: PlateElementProps) {
- const readOnly = useReadOnly();
- const isSelectionAreaVisible = usePluginOption(
- BlockSelectionPlugin,
- 'isSelectionAreaVisible'
- );
- const hasControls = !readOnly && !isSelectionAreaVisible;
- const {
- isSelectingCell,
- marginLeft,
- props: tableProps,
- } = useTableElement();
+ TableProvider,
+ function TableElement({ children, ...props }: PlateElementProps) {
+ const readOnly = useReadOnly();
+ const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
+ const hasControls = !readOnly && !isSelectionAreaVisible;
+ const { isSelectingCell, marginLeft, props: tableProps } = useTableElement();
- const isSelectingTable = useBlockSelected(props.element.id as string);
+ const isSelectingTable = useBlockSelected(props.element.id as string);
- const content = (
-
-
-
+ const content = (
+
+
+
- {isSelectingTable && (
-
- )}
-
- );
+ {isSelectingTable &&
}
+
-
-
- |
- )}
+ return (
+
+ {hasControls && (
+
+
+
+ |
+ )}
- {children}
-
- );
+ {children}
+
+ );
}
function RowDragHandle({ dragRef }: { dragRef: React.Ref }) {
- const editor = useEditorRef();
- const element = useElement();
+ const editor = useEditorRef();
+ const element = useElement();
- return (
-
- );
+ return (
+
+ );
}
function RowDropLine() {
- const { dropLine } = useDropLine();
+ const { dropLine } = useDropLine();
- if (!dropLine) return null;
+ if (!dropLine) return null;
- return (
-
- );
+ return (
+
+ );
}
export function TableCellElement({
- isHeader,
- ...props
+ isHeader,
+ ...props
}: PlateElementProps & {
- isHeader?: boolean;
+ isHeader?: boolean;
}) {
- const { api } = useEditorPlugin(TablePlugin);
- const readOnly = useReadOnly();
- const element = props.element;
+ const { api } = useEditorPlugin(TablePlugin);
+ const readOnly = useReadOnly();
+ const element = props.element;
- const tableId = useElementSelector(([node]) => node.id as string, [], {
- key: KEYS.table,
- });
- const rowId = useElementSelector(([node]) => node.id as string, [], {
- key: KEYS.tr,
- });
- const isSelectingTable = useBlockSelected(tableId);
- const isSelectingRow = useBlockSelected(rowId) || isSelectingTable;
- const isSelectionAreaVisible = usePluginOption(
- BlockSelectionPlugin,
- 'isSelectionAreaVisible'
- );
+ const tableId = useElementSelector(([node]) => node.id as string, [], {
+ key: KEYS.table,
+ });
+ const rowId = useElementSelector(([node]) => node.id as string, [], {
+ key: KEYS.tr,
+ });
+ const isSelectingTable = useBlockSelected(tableId);
+ const isSelectingRow = useBlockSelected(rowId) || isSelectingTable;
+ const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
- const { borders, colIndex, colSpan, minHeight, rowIndex, selected, width } =
- useTableCellElement();
+ const { borders, colIndex, colSpan, minHeight, rowIndex, selected, width } =
+ useTableCellElement();
- const { bottomProps, hiddenLeft, leftProps, rightProps } =
- useTableCellElementResizable({
- colIndex,
- colSpan,
- rowIndex,
- });
+ const { bottomProps, hiddenLeft, leftProps, rightProps } = useTableCellElementResizable({
+ colIndex,
+ colSpan,
+ rowIndex,
+ });
- return (
-
-
- {props.children}
-
+ return (
+
+
+ {props.children}
+
- {!isSelectionAreaVisible && (
-
- {!readOnly && (
- <>
-
-
- {!hiddenLeft && (
-
- )}
+ {!isSelectionAreaVisible && (
+
+ {!readOnly && (
+ <>
+
+
+ {!hiddenLeft && (
+
+ )}
-
- {colIndex === 0 && (
-
- )}
-
- )}
-
- )}
+
+ {colIndex === 0 && (
+
+ )}
+
+ )}
+
{children}
-
- );
+ return (
+
+
+ {children}
+
+ );
}
diff --git a/surfsense_web/components/ui/toolbar.tsx b/surfsense_web/components/ui/toolbar.tsx
index 100baa552..67e75a892 100644
--- a/surfsense_web/components/ui/toolbar.tsx
+++ b/surfsense_web/components/ui/toolbar.tsx
@@ -1,387 +1,363 @@
-'use client';
+"use client";
-import * as React from 'react';
+import * as React from "react";
-import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { type VariantProps, cva } from 'class-variance-authority';
-import { ChevronDown } from 'lucide-react';
+import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { type VariantProps, cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
import {
- DropdownMenuLabel,
- DropdownMenuRadioGroup,
- DropdownMenuSeparator,
-} from '@/components/ui/dropdown-menu';
-import { Separator } from '@/components/ui/separator';
-import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
-import { cn } from '@/lib/utils';
+ DropdownMenuLabel,
+ DropdownMenuRadioGroup,
+ DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
export function Toolbar({
- className,
- ...props
+ className,
+ ...props
}: React.ComponentProps) {
- return (
-
- );
+ return (
+
+ );
}
export function ToolbarToggleGroup({
- className,
- ...props
+ className,
+ ...props
}: React.ComponentProps) {
- return (
-
- );
+ return (
+
+ );
}
export function ToolbarLink({
- className,
- ...props
+ className,
+ ...props
}: React.ComponentProps) {
- return (
-
- );
+ return (
+
+ );
}
export function ToolbarSeparator({
- className,
- ...props
+ className,
+ ...props
}: React.ComponentProps) {
- return (
-
- );
+ return (
+
+ );
}
// From toggleVariants
const toolbarButtonVariants = cva(
- "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-checked:bg-accent aria-checked:text-accent-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
- {
- defaultVariants: {
- size: 'default',
- variant: 'default',
- },
- variants: {
- size: {
- default: 'h-9 min-w-9 px-2',
- lg: 'h-10 min-w-10 px-2.5',
- sm: 'h-8 min-w-8 px-1.5',
- },
- variant: {
- default: 'bg-transparent',
- outline:
- 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
- },
- },
- }
+ "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-checked:bg-accent aria-checked:text-accent-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+ {
+ defaultVariants: {
+ size: "default",
+ variant: "default",
+ },
+ variants: {
+ size: {
+ default: "h-9 min-w-9 px-2",
+ lg: "h-10 min-w-10 px-2.5",
+ sm: "h-8 min-w-8 px-1.5",
+ },
+ variant: {
+ default: "bg-transparent",
+ outline:
+ "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+ },
+ },
+ }
);
const dropdownArrowVariants = cva(
- cn(
- 'inline-flex items-center justify-center rounded-r-md font-medium text-foreground text-sm transition-colors disabled:pointer-events-none disabled:opacity-50'
- ),
- {
- defaultVariants: {
- size: 'sm',
- variant: 'default',
- },
- variants: {
- size: {
- default: 'h-9 w-6',
- lg: 'h-10 w-8',
- sm: 'h-8 w-4',
- },
- variant: {
- default:
- 'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',
- outline:
- 'border border-input border-l-0 bg-transparent hover:bg-accent hover:text-accent-foreground',
- },
- },
- }
+ cn(
+ "inline-flex items-center justify-center rounded-r-md font-medium text-foreground text-sm transition-colors disabled:pointer-events-none disabled:opacity-50"
+ ),
+ {
+ defaultVariants: {
+ size: "sm",
+ variant: "default",
+ },
+ variants: {
+ size: {
+ default: "h-9 w-6",
+ lg: "h-10 w-8",
+ sm: "h-8 w-4",
+ },
+ variant: {
+ default:
+ "bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground",
+ outline:
+ "border border-input border-l-0 bg-transparent hover:bg-accent hover:text-accent-foreground",
+ },
+ },
+ }
);
type ToolbarButtonProps = {
- isDropdown?: boolean;
- pressed?: boolean;
-} & Omit<
- React.ComponentPropsWithoutRef,
- 'asChild' | 'value'
-> &
- VariantProps;
+ isDropdown?: boolean;
+ pressed?: boolean;
+} & Omit, "asChild" | "value"> &
+ VariantProps;
export const ToolbarButton = withTooltip(function ToolbarButton({
- children,
- className,
- isDropdown,
- pressed,
- size = 'sm',
- variant,
- ...props
+ children,
+ className,
+ isDropdown,
+ pressed,
+ size = "sm",
+ variant,
+ ...props
}: ToolbarButtonProps) {
- return typeof pressed === 'boolean' ? (
-
-
- {isDropdown ? (
- <>
-
- {children}
-
-
-
-
-
- ) : (
- children
- )}
-
-
- ) : (
-
- {children}
-
- );
+ return typeof pressed === "boolean" ? (
+
+
+ {isDropdown ? (
+ <>
+ {children}
+
+
+
+
+ ) : (
+ children
+ )}
+
+
+ ) : (
+
+ {children}
+
+ );
});
export function ToolbarSplitButton({
- className,
- ...props
+ className,
+ ...props
}: React.ComponentPropsWithoutRef) {
- return (
-
- );
+ return (
+
+ );
}
type ToolbarSplitButtonPrimaryProps = Omit<
- React.ComponentPropsWithoutRef,
- 'value'
+ React.ComponentPropsWithoutRef,
+ "value"
> &
- VariantProps;
+ VariantProps;
export function ToolbarSplitButtonPrimary({
- children,
- className,
- size = 'sm',
- variant,
- ...props
+ children,
+ className,
+ size = "sm",
+ variant,
+ ...props
}: ToolbarSplitButtonPrimaryProps) {
- return (
-
- {children}
-
- );
+ return (
+
+ {children}
+
+ );
}
export function ToolbarSplitButtonSecondary({
- className,
- size,
- variant,
- ...props
-}: React.ComponentPropsWithoutRef<'span'> &
- VariantProps) {
- return (
- e.stopPropagation()}
- role="button"
- {...props}
- >
-
-
- );
+ className,
+ size,
+ variant,
+ ...props
+}: React.ComponentPropsWithoutRef<"span"> & VariantProps) {
+ return (
+ e.stopPropagation()}
+ role="button"
+ {...props}
+ >
+
+
+ );
}
export function ToolbarToggleItem({
- className,
- size = 'sm',
- variant,
- ...props
+ className,
+ size = "sm",
+ variant,
+ ...props
}: React.ComponentProps &
- VariantProps) {
- return (
-
- );
+ VariantProps) {
+ return (
+
+ );
}
-export function ToolbarGroup({
- children,
- className,
-}: React.ComponentProps<'div'>) {
- return (
-
-
{children}
+export function ToolbarGroup({ children, className }: React.ComponentProps<"div">) {
+ return (
+
- );
+
+
+
+