mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-26 17:26:23 +02:00
chore: ran linting
This commit is contained in:
Anish Sarkar
parent
e46b24a2b1
commit
a482cc95de
67 changed files with 4971 additions and 5539 deletions
|
|
@ -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: <PilcrowIcon />,
|
||||
keywords: ['paragraph', 'text', 'plain'],
|
||||
label: 'Text',
|
||||
value: 'text',
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.p),
|
||||
},
|
||||
{
|
||||
icon: <Heading1Icon />,
|
||||
keywords: ['title', 'h1', 'heading'],
|
||||
label: 'Heading 1',
|
||||
value: 'heading1',
|
||||
onSelect: (editor) => insertBlock(editor, 'h1'),
|
||||
},
|
||||
{
|
||||
icon: <Heading2Icon />,
|
||||
keywords: ['subtitle', 'h2', 'heading'],
|
||||
label: 'Heading 2',
|
||||
value: 'heading2',
|
||||
onSelect: (editor) => insertBlock(editor, 'h2'),
|
||||
},
|
||||
{
|
||||
icon: <Heading3Icon />,
|
||||
keywords: ['subtitle', 'h3', 'heading'],
|
||||
label: 'Heading 3',
|
||||
value: 'heading3',
|
||||
onSelect: (editor) => insertBlock(editor, 'h3'),
|
||||
},
|
||||
{
|
||||
icon: <QuoteIcon />,
|
||||
keywords: ['citation', 'blockquote'],
|
||||
label: 'Quote',
|
||||
value: 'quote',
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.blockquote),
|
||||
},
|
||||
{
|
||||
icon: <MinusIcon />,
|
||||
keywords: ['divider', 'separator', 'line'],
|
||||
label: 'Divider',
|
||||
value: 'divider',
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.hr),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Lists',
|
||||
items: [
|
||||
{
|
||||
icon: <ListIcon />,
|
||||
keywords: ['unordered', 'ul', 'bullet'],
|
||||
label: 'Bulleted list',
|
||||
value: 'bulleted-list',
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.ul),
|
||||
},
|
||||
{
|
||||
icon: <ListOrderedIcon />,
|
||||
keywords: ['ordered', 'ol', 'numbered'],
|
||||
label: 'Numbered list',
|
||||
value: 'numbered-list',
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.ol),
|
||||
},
|
||||
{
|
||||
icon: <SquareIcon />,
|
||||
keywords: ['checklist', 'task', 'checkbox', 'todo'],
|
||||
label: 'To-do list',
|
||||
value: 'todo-list',
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.listTodo),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Advanced',
|
||||
items: [
|
||||
{
|
||||
icon: <TableIcon />,
|
||||
keywords: ['table', 'grid'],
|
||||
label: 'Table',
|
||||
value: 'table',
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.table),
|
||||
},
|
||||
{
|
||||
icon: <FileCodeIcon />,
|
||||
keywords: ['code', 'codeblock', 'snippet'],
|
||||
label: 'Code block',
|
||||
value: 'code-block',
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.codeBlock),
|
||||
},
|
||||
{
|
||||
icon: <InfoIcon />,
|
||||
keywords: ['callout', 'note', 'info', 'warning', 'tip'],
|
||||
label: 'Callout',
|
||||
value: 'callout',
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.callout),
|
||||
},
|
||||
{
|
||||
icon: <ChevronRightIcon />,
|
||||
keywords: ['toggle', 'collapsible', 'expand'],
|
||||
label: 'Toggle',
|
||||
value: 'toggle',
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.toggle),
|
||||
},
|
||||
{
|
||||
icon: <RadicalIcon />,
|
||||
keywords: ['equation', 'math', 'formula', 'latex'],
|
||||
label: 'Equation',
|
||||
value: 'equation',
|
||||
onSelect: (editor) => insertInlineElement(editor, KEYS.equation),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: 'Inline',
|
||||
items: [
|
||||
{
|
||||
icon: <Code2Icon />,
|
||||
keywords: ['link', 'url', 'href'],
|
||||
label: 'Link',
|
||||
value: 'link',
|
||||
onSelect: (editor) => insertInlineElement(editor, KEYS.link),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Basic Blocks",
|
||||
items: [
|
||||
{
|
||||
icon: <PilcrowIcon />,
|
||||
keywords: ["paragraph", "text", "plain"],
|
||||
label: "Text",
|
||||
value: "text",
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.p),
|
||||
},
|
||||
{
|
||||
icon: <Heading1Icon />,
|
||||
keywords: ["title", "h1", "heading"],
|
||||
label: "Heading 1",
|
||||
value: "heading1",
|
||||
onSelect: (editor) => insertBlock(editor, "h1"),
|
||||
},
|
||||
{
|
||||
icon: <Heading2Icon />,
|
||||
keywords: ["subtitle", "h2", "heading"],
|
||||
label: "Heading 2",
|
||||
value: "heading2",
|
||||
onSelect: (editor) => insertBlock(editor, "h2"),
|
||||
},
|
||||
{
|
||||
icon: <Heading3Icon />,
|
||||
keywords: ["subtitle", "h3", "heading"],
|
||||
label: "Heading 3",
|
||||
value: "heading3",
|
||||
onSelect: (editor) => insertBlock(editor, "h3"),
|
||||
},
|
||||
{
|
||||
icon: <QuoteIcon />,
|
||||
keywords: ["citation", "blockquote"],
|
||||
label: "Quote",
|
||||
value: "quote",
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.blockquote),
|
||||
},
|
||||
{
|
||||
icon: <MinusIcon />,
|
||||
keywords: ["divider", "separator", "line"],
|
||||
label: "Divider",
|
||||
value: "divider",
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.hr),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Lists",
|
||||
items: [
|
||||
{
|
||||
icon: <ListIcon />,
|
||||
keywords: ["unordered", "ul", "bullet"],
|
||||
label: "Bulleted list",
|
||||
value: "bulleted-list",
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.ul),
|
||||
},
|
||||
{
|
||||
icon: <ListOrderedIcon />,
|
||||
keywords: ["ordered", "ol", "numbered"],
|
||||
label: "Numbered list",
|
||||
value: "numbered-list",
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.ol),
|
||||
},
|
||||
{
|
||||
icon: <SquareIcon />,
|
||||
keywords: ["checklist", "task", "checkbox", "todo"],
|
||||
label: "To-do list",
|
||||
value: "todo-list",
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.listTodo),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Advanced",
|
||||
items: [
|
||||
{
|
||||
icon: <TableIcon />,
|
||||
keywords: ["table", "grid"],
|
||||
label: "Table",
|
||||
value: "table",
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.table),
|
||||
},
|
||||
{
|
||||
icon: <FileCodeIcon />,
|
||||
keywords: ["code", "codeblock", "snippet"],
|
||||
label: "Code block",
|
||||
value: "code-block",
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.codeBlock),
|
||||
},
|
||||
{
|
||||
icon: <InfoIcon />,
|
||||
keywords: ["callout", "note", "info", "warning", "tip"],
|
||||
label: "Callout",
|
||||
value: "callout",
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.callout),
|
||||
},
|
||||
{
|
||||
icon: <ChevronRightIcon />,
|
||||
keywords: ["toggle", "collapsible", "expand"],
|
||||
label: "Toggle",
|
||||
value: "toggle",
|
||||
onSelect: (editor) => insertBlock(editor, KEYS.toggle),
|
||||
},
|
||||
{
|
||||
icon: <RadicalIcon />,
|
||||
keywords: ["equation", "math", "formula", "latex"],
|
||||
label: "Equation",
|
||||
value: "equation",
|
||||
onSelect: (editor) => insertInlineElement(editor, KEYS.equation),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Inline",
|
||||
items: [
|
||||
{
|
||||
icon: <Code2Icon />,
|
||||
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 (
|
||||
<PlateElement {...props} as="span">
|
||||
<InlineCombobox
|
||||
element={props.element}
|
||||
trigger="/"
|
||||
>
|
||||
<InlineComboboxInput />
|
||||
return (
|
||||
<PlateElement {...props} as="span">
|
||||
<InlineCombobox element={props.element} trigger="/">
|
||||
<InlineComboboxInput />
|
||||
|
||||
<InlineComboboxContent className="dark:bg-neutral-800 dark:border dark:border-neutral-700">
|
||||
<InlineComboboxEmpty>No results found.</InlineComboboxEmpty>
|
||||
<InlineComboboxContent className="dark:bg-neutral-800 dark:border dark:border-neutral-700">
|
||||
<InlineComboboxEmpty>No results found.</InlineComboboxEmpty>
|
||||
|
||||
{slashCommandGroups.map(({ heading, items }) => (
|
||||
<InlineComboboxGroup key={heading}>
|
||||
<InlineComboboxGroupLabel>{heading}</InlineComboboxGroupLabel>
|
||||
{slashCommandGroups.map(({ heading, items }) => (
|
||||
<InlineComboboxGroup key={heading}>
|
||||
<InlineComboboxGroupLabel>{heading}</InlineComboboxGroupLabel>
|
||||
|
||||
{items.map(({ icon, keywords, label, value, onSelect }) => (
|
||||
<InlineComboboxItem
|
||||
key={value}
|
||||
className="flex items-center gap-3 px-2 py-1.5"
|
||||
keywords={keywords}
|
||||
label={label}
|
||||
value={value}
|
||||
group={heading}
|
||||
onClick={() => {
|
||||
onSelect(editor);
|
||||
editor.tf.focus();
|
||||
}}
|
||||
>
|
||||
<span className="flex size-5 items-center justify-center text-muted-foreground">
|
||||
{icon}
|
||||
</span>
|
||||
{label}
|
||||
</InlineComboboxItem>
|
||||
))}
|
||||
</InlineComboboxGroup>
|
||||
))}
|
||||
</InlineComboboxContent>
|
||||
</InlineCombobox>
|
||||
{items.map(({ icon, keywords, label, value, onSelect }) => (
|
||||
<InlineComboboxItem
|
||||
key={value}
|
||||
className="flex items-center gap-3 px-2 py-1.5"
|
||||
keywords={keywords}
|
||||
label={label}
|
||||
value={value}
|
||||
group={heading}
|
||||
onClick={() => {
|
||||
onSelect(editor);
|
||||
editor.tf.focus();
|
||||
}}
|
||||
>
|
||||
<span className="flex size-5 items-center justify-center text-muted-foreground">
|
||||
{icon}
|
||||
</span>
|
||||
{label}
|
||||
</InlineComboboxItem>
|
||||
))}
|
||||
</InlineComboboxGroup>
|
||||
))}
|
||||
</InlineComboboxContent>
|
||||
</InlineCombobox>
|
||||
|
||||
{children}
|
||||
</PlateElement>
|
||||
);
|
||||
{children}
|
||||
</PlateElement>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue