doclific 0.1.0

package/frontend/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/frontend/src/components/ui/slash-node.tsx

@@ -0,0 +1,233 @@
+import type { PlateEditor, PlateElementProps } from 'platejs/react';
+import {
+  CalendarIcon,
+  ChevronRightIcon,
+  Code2,
+  Columns3Icon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  LightbulbIcon,
+  ListIcon,
+  ListOrdered,
+  PilcrowIcon,
+  Quote,
+  RadicalIcon,
+  Square,
+  Table,
+  TableOfContentsIcon,
+} from 'lucide-react';
+import { type TComboboxInputElement, KEYS } from 'platejs';
+import { PlateElement } from 'platejs/react';
+
+import {
+  insertBlock,
+  insertInlineElement,
+} from '@/components/editor/transforms';
+
+import {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxGroup,
+  InlineComboboxGroupLabel,
+  InlineComboboxInput,
+  InlineComboboxItem,
+} from './inline-combobox';
+import { CodebaseSnippetType } from '../editor/plugins/codebase-kit';
+
+type Group = {
+  group: string;
+  items: {
+    icon: React.ReactNode;
+    value: string;
+    onSelect: (editor: PlateEditor, value: string) => void;
+    className?: string;
+    focusEditor?: boolean;
+    keywords?: string[];
+    label?: string;
+  }[];
+};
+
+const groups: Group[] = [
+  {
+    group: 'Basic blocks',
+    items: [
+      {
+        icon: <PilcrowIcon />,
+        keywords: ['paragraph'],
+        label: 'Text',
+        value: KEYS.p,
+      },
+      {
+        icon: <Heading1Icon />,
+        keywords: ['title', 'h1'],
+        label: 'Heading 1',
+        value: KEYS.h1,
+      },
+      {
+        icon: <Heading2Icon />,
+        keywords: ['subtitle', 'h2'],
+        label: 'Heading 2',
+        value: KEYS.h2,
+      },
+      {
+        icon: <Heading3Icon />,
+        keywords: ['subtitle', 'h3'],
+        label: 'Heading 3',
+        value: KEYS.h3,
+      },
+      {
+        icon: <ListIcon />,
+        keywords: ['unordered', 'ul', '-'],
+        label: 'Bulleted list',
+        value: KEYS.ul,
+      },
+      {
+        icon: <ListOrdered />,
+        keywords: ['ordered', 'ol', '1'],
+        label: 'Numbered list',
+        value: KEYS.ol,
+      },
+      {
+        icon: <Square />,
+        keywords: ['checklist', 'task', 'checkbox', '[]'],
+        label: 'To-do list',
+        value: KEYS.listTodo,
+      },
+      {
+        icon: <ChevronRightIcon />,
+        keywords: ['collapsible', 'expandable'],
+        label: 'Toggle',
+        value: KEYS.toggle,
+      },
+      {
+        icon: <Code2 />,
+        keywords: ['```'],
+        label: 'Code Block',
+        value: KEYS.codeBlock,
+      },
+      {
+        icon: <Table />,
+        label: 'Table',
+        value: KEYS.table,
+      },
+      {
+        icon: <Quote />,
+        keywords: ['citation', 'blockquote', 'quote', '>'],
+        label: 'Blockquote',
+        value: KEYS.blockquote,
+      },
+      {
+        description: 'Insert a highlighted block.',
+        icon: <LightbulbIcon />,
+        keywords: ['note'],
+        label: 'Callout',
+        value: KEYS.callout,
+      },
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertBlock(editor, value, { upsert: true });
+      },
+    })),
+  },
+  {
+    group: 'Advanced blocks',
+    items: [
+      {
+        icon: <TableOfContentsIcon />,
+        keywords: ['toc'],
+        label: 'Table of contents',
+        value: KEYS.toc,
+      },
+      {
+        icon: <Columns3Icon />,
+        label: '3 columns',
+        value: 'action_three_columns',
+      },
+      {
+        focusEditor: false,
+        icon: <RadicalIcon />,
+        label: 'Equation',
+        value: KEYS.equation,
+      },
+      {
+        icon: <Code2 />,
+        label: 'Codebase Snippet',
+        value: CodebaseSnippetType,
+      },
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertBlock(editor, value, { upsert: true });
+      },
+    })),
+  },
+  {
+    group: 'Inline',
+    items: [
+      {
+        focusEditor: true,
+        icon: <CalendarIcon />,
+        keywords: ['time'],
+        label: 'Date',
+        value: KEYS.date,
+      },
+      {
+        focusEditor: false,
+        icon: <RadicalIcon />,
+        label: 'Inline Equation',
+        value: KEYS.inlineEquation,
+      },
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertInlineElement(editor, value);
+      },
+    })),
+  },
+];
+
+export function SlashInputElement(
+  props: PlateElementProps<TComboboxInputElement>
+) {
+  const { editor, element } = props;
+
+  return (
+    <PlateElement {...props} as="span">
+      <InlineCombobox element={element} trigger="/">
+        <InlineComboboxInput />
+
+        <InlineComboboxContent>
+          <InlineComboboxEmpty>No results</InlineComboboxEmpty>
+
+          {groups.map(({ group, items }) => (
+            <InlineComboboxGroup key={group}>
+              <InlineComboboxGroupLabel>{group}</InlineComboboxGroupLabel>
+
+              {items.map(
+                ({ focusEditor, icon, keywords, label, value, onSelect }) => (
+                  <InlineComboboxItem
+                    key={value}
+                    value={value}
+                    onClick={() => onSelect(editor, value)}
+                    label={label}
+                    focusEditor={focusEditor}
+                    group={group}
+                    keywords={keywords}
+                  >
+                    <div className="mr-2 text-muted-foreground">{icon}</div>
+                    {label ?? value}
+                  </InlineComboboxItem>
+                )
+              )}
+            </InlineComboboxGroup>
+          ))}
+        </InlineComboboxContent>
+      </InlineCombobox>
+
+      {props.children}
+    </PlateElement>
+  );
+}

package/frontend/src/components/ui/sonner.tsx

@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/frontend/src/components/ui/suggestion-node-static.tsx

@@ -0,0 +1,35 @@
+import type { TSuggestionText } from 'platejs';
+import type { SlateLeafProps } from 'platejs/static';
+
+import { BaseSuggestionPlugin } from '@platejs/suggestion';
+import { SlateLeaf } from 'platejs/static';
+
+import { cn } from '@/lib/utils';
+
+export function SuggestionLeafStatic(props: SlateLeafProps<TSuggestionText>) {
+  const { editor, leaf } = props;
+
+  const dataList = editor
+    .getApi(BaseSuggestionPlugin)
+    .suggestion.dataList(leaf);
+  const hasRemove = dataList.some((data) => data.type === 'remove');
+  const diffOperation = { type: hasRemove ? 'delete' : 'insert' } as const;
+
+  const Component = ({ delete: 'del', insert: 'ins', update: 'span' } as const)[
+    diffOperation.type
+  ];
+
+  return (
+    <SlateLeaf
+      {...props}
+      as={Component}
+      className={cn(
+        'border-b-2 border-b-brand/[.24] bg-brand/[.08] text-brand/80 no-underline transition-colors duration-200',
+        hasRemove &&
+        'border-b-gray-300 bg-gray-300/25 text-gray-400 line-through'
+      )}
+    >
+      {props.children}
+    </SlateLeaf>
+  );
+}

package/frontend/src/components/ui/suggestion-node.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+
+import type { TSuggestionData, TSuggestionText } from 'platejs';
+import type { PlateLeafProps, RenderNodeWrapper } from 'platejs/react';
+
+import { cva } from 'class-variance-authority';
+import { CornerDownLeftIcon } from 'lucide-react';
+import { PlateLeaf, useEditorPlugin, usePluginOption } from 'platejs/react';
+
+import { cn } from '@/lib/utils';
+import {
+  type SuggestionConfig,
+  suggestionPlugin,
+} from '@/components/editor/plugins/suggestion-kit';
+
+const suggestionVariants = cva(
+  cn(
+    'bg-emerald-100 text-emerald-700 no-underline transition-colors duration-200'
+  ),
+  {
+    defaultVariants: {
+      insertActive: false,
+      remove: false,
+      removeActive: false,
+    },
+    variants: {
+      insertActive: {
+        false: '',
+        true: 'bg-emerald-200/80',
+      },
+      remove: {
+        false: '',
+        true: 'bg-red-100 text-red-700',
+      },
+      removeActive: {
+        false: '',
+        true: 'bg-red-200/80 no-underline',
+      },
+    },
+  }
+);
+
+export function SuggestionLeaf(props: PlateLeafProps<TSuggestionText>) {
+  const { api, setOption } = useEditorPlugin(suggestionPlugin);
+  const leaf = props.leaf;
+
+  const leafId: string = api.suggestion.nodeId(leaf) ?? '';
+  const activeSuggestionId = usePluginOption(suggestionPlugin, 'activeId');
+  const hoverSuggestionId = usePluginOption(suggestionPlugin, 'hoverId');
+  const dataList = api.suggestion.dataList(leaf);
+
+  const hasRemove = dataList.some((data) => data.type === 'remove');
+  const hasActive = dataList.some((data) => data.id === activeSuggestionId);
+  const hasHover = dataList.some((data) => data.id === hoverSuggestionId);
+
+  const diffOperation = { type: hasRemove ? 'delete' : 'insert' } as const;
+
+  const Component = ({ delete: 'del', insert: 'ins', update: 'span' } as const)[
+    diffOperation.type
+  ];
+
+  return (
+    <PlateLeaf
+      {...props}
+      as={Component}
+      className={cn(
+        suggestionVariants({
+          insertActive: hasActive || hasHover,
+          remove: hasRemove,
+          removeActive: (hasActive || hasHover) && hasRemove,
+        })
+      )}
+      attributes={{
+        ...props.attributes,
+        onMouseEnter: () => setOption('hoverId', leafId),
+        onMouseLeave: () => setOption('hoverId', null),
+      }}
+    >
+      {props.children}
+    </PlateLeaf>
+  );
+}
+export const SuggestionLineBreak: RenderNodeWrapper<SuggestionConfig> = ({
+  api,
+  element,
+}) => {
+  if (!api.suggestion.isBlockSuggestion(element)) return;
+
+  const suggestionData = element.suggestion;
+
+  return function Component({ children }) {
+    return (
+      <SuggestionLineBreakContent suggestionData={suggestionData}>
+        {children}
+      </SuggestionLineBreakContent>
+    );
+  };
+};
+
+function SuggestionLineBreakContent({
+  children,
+  suggestionData,
+}: {
+  children: React.ReactNode;
+  suggestionData: TSuggestionData;
+}) {
+  const { isLineBreak, type } = suggestionData;
+  const isRemove = type === 'remove';
+  const isInsert = type === 'insert';
+
+  const activeSuggestionId = usePluginOption(suggestionPlugin, 'activeId');
+  const hoverSuggestionId = usePluginOption(suggestionPlugin, 'hoverId');
+
+  const isActive = activeSuggestionId === suggestionData.id;
+  const isHover = hoverSuggestionId === suggestionData.id;
+
+  const spanRef = React.useRef<HTMLSpanElement>(null);
+  const { setOption } = useEditorPlugin(suggestionPlugin);
+
+  return (
+    <>
+      {isLineBreak ? (
+        <>
+          {children}
+          <span
+            ref={spanRef}
+            className={cn(
+              'absolute text-justify',
+              suggestionVariants({
+                insertActive: isInsert && (isActive || isHover),
+                remove: isRemove,
+                removeActive: (isActive || isHover) && isRemove,
+              })
+            )}
+            style={{
+              bottom: 3.5,
+              height: 21,
+            }}
+            contentEditable={false}
+          >
+            <CornerDownLeftIcon className="mt-0.5 size-4" />
+          </span>
+        </>
+      ) : (
+        <div
+          className={cn(
+            suggestionVariants({
+              insertActive: isInsert && (isActive || isHover),
+              remove: isRemove,
+              removeActive: (isActive || isHover) && isRemove,
+            })
+          )}
+          onMouseEnter={() => setOption('hoverId', suggestionData.id)}
+          onMouseLeave={() => setOption('hoverId', null)}
+          data-block-suggestion="true"
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+}

package/frontend/src/components/ui/suggestion-toolbar-button.tsx

@@ -0,0 +1,25 @@
+
+
+import { SuggestionPlugin } from '@platejs/suggestion/react';
+import { PencilLineIcon } from 'lucide-react';
+import { useEditorPlugin, usePluginOption } from 'platejs/react';
+
+import { cn } from '@/lib/utils';
+
+import { ToolbarButton } from './toolbar';
+
+export function SuggestionToolbarButton() {
+  const { setOption } = useEditorPlugin(SuggestionPlugin);
+  const isSuggesting = usePluginOption(SuggestionPlugin, 'isSuggesting');
+
+  return (
+    <ToolbarButton
+      className={cn(isSuggesting && 'text-brand/80 hover:text-brand/80')}
+      onClick={() => setOption('isSuggesting', !isSuggesting)}
+      onMouseDown={(e) => e.preventDefault()}
+      tooltip={isSuggesting ? 'Turn off suggesting' : 'Suggestion edits'}
+    >
+      <PencilLineIcon />
+    </ToolbarButton>
+  );
+}