doclific 0.2.1 → 0.2.2

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

@@ -1,13 +0,0 @@
-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

@@ -1,233 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,162 +0,0 @@
-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

@@ -1,25 +0,0 @@
-
-
-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>
-  );
-}