doclific 0.2.0 → 0.2.2

package/frontend/src/components/ui/inline-combobox.tsx

@@ -1,414 +0,0 @@
-import React from 'react';
-
-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';
-import {
-  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 { YjsPlugin } from '@platejs/yjs/react';
-
-type FilterFn = (
-  item: { value: string; group?: string; keywords?: string[]; label?: string },
-  search: string
-) => boolean;
-
-type InlineComboboxContextValue = {
-  filter: FilterFn | false;
-  inputProps: UseComboboxInputResult['props'];
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  removeInput: UseComboboxInputResult['removeInput'];
-  showTrigger: boolean;
-  trigger: string;
-  setHasEmpty: (hasEmpty: boolean) => void;
-};
-
-const InlineComboboxContext = React.createContext<InlineComboboxContextValue>(
-  null as unknown as InlineComboboxContextValue
-);
-
-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!, search)
-  );
-};
-
-type InlineComboboxProps = {
-  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,
-}: InlineComboboxProps) => {
-  const editor = useEditorRef();
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const cursorState = useHTMLInputCursorState(inputRef);
-
-  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 any).userId;
-    const currentUserId = editor.getOption(YjsPlugin, 'userId');
-
-    // If no userId (backwards compatibility or non-Yjs), allow
-    if (!elementUserId) return true;
-
-    return elementUserId === currentUserId;
-  }, [editor, element]);
-
-  const setValue = React.useCallback(
-    (newValue: string) => {
-      setValueProp?.(newValue);
-
-      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<Point | null>(null);
-
-  React.useEffect(() => {
-    const path = editor.api.findPath(element);
-
-    if (!path) return;
-
-    const point = editor.api.before(path);
-
-    if (!point) return;
-
-    const pointRef = editor.api.pointRef(point);
-    insertPoint.current = pointRef.current;
-
-    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 [hasEmpty, setHasEmpty] = React.useState(false);
-
-  const contextValue: InlineComboboxContextValue = React.useMemo(
-    () => ({
-      filter,
-      inputProps,
-      inputRef,
-      removeInput,
-      setHasEmpty,
-      showTrigger,
-      trigger,
-    }),
-    [
-      trigger,
-      showTrigger,
-      filter,
-      inputRef,
-      inputProps,
-      removeInput,
-      setHasEmpty,
-    ]
-  );
-
-  const store = useComboboxStore({
-    // open: ,
-    setValue: (newValue) => React.startTransition(() => setValue(newValue)),
-  });
-
-  const items = store.useState('items');
-
-  /**
-   * If there is no active ID and the list of items changes, select the first
-   * item.
-   */
-  React.useEffect(() => {
-    if (!store.getState().activeId) {
-      store.setActiveId(store.first());
-    }
-  }, [items, store]);
-
-  return (
-    <span contentEditable={false}>
-      <ComboboxProvider
-        open={
-          (items.length > 0 || hasEmpty) &&
-          (!hideWhenNoValue || value.length > 0)
-        }
-        store={store}
-      >
-        <InlineComboboxContext.Provider value={contextValue}>
-          {children}
-        </InlineComboboxContext.Provider>
-      </ComboboxProvider>
-    </span>
-  );
-};
-
-const InlineComboboxInput = ({
-  className,
-  ref: propRef,
-  ...props
-}: React.HTMLAttributes<HTMLInputElement> & {
-  ref?: React.RefObject<HTMLInputElement | null>;
-}) => {
-  const {
-    inputProps,
-    inputRef: contextRef,
-    showTrigger,
-    trigger,
-  } = React.useContext(InlineComboboxContext);
-
-  const store = useComboboxContext()!;
-  const value = store.useState('value');
-
-  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.
-   */
-
-  return (
-    <>
-      {showTrigger && trigger}
-
-      <span className="relative min-h-[1lh]">
-        <span
-          className="invisible overflow-hidden text-nowrap"
-          aria-hidden="true"
-        >
-          {value || '\u200B'}
-        </span>
-
-        <Combobox
-          ref={ref}
-          className={cn(
-            'absolute top-0 left-0 size-full bg-transparent outline-none',
-            className
-          )}
-          value={value}
-          autoSelect
-          {...inputProps}
-          {...props}
-        />
-      </span>
-    </>
-  );
-};
-
-InlineComboboxInput.displayName = 'InlineComboboxInput';
-
-const InlineComboboxContent: typeof ComboboxPopover = ({
-  className,
-  ...props
-}) => {
-  // Portal prevents CSS from leaking into popover
-  return (
-    <Portal>
-      <ComboboxPopover
-        className={cn(
-          'z-500 max-h-[288px] w-[300px] overflow-y-auto rounded-md bg-popover shadow-md',
-          className
-        )}
-        {...props}
-      />
-    </Portal>
-  );
-};
-
-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',
-      },
-    },
-  }
-);
-
-const InlineComboboxItem = ({
-  className,
-  focusEditor = true,
-  group,
-  keywords,
-  label,
-  onClick,
-  ...props
-}: {
-  focusEditor?: boolean;
-  group?: string;
-  keywords?: string[];
-  label?: string;
-} & ComboboxItemProps &
-  Required<Pick<ComboboxItemProps, 'value'>>) => {
-  const { value } = props;
-
-  const { filter, removeInput } = React.useContext(InlineComboboxContext);
-
-  const store = useComboboxContext()!;
-
-  // Optimization: Do not subscribe to value if filter is false
-  const search = filter && store.useState('value');
-
-  const visible = React.useMemo(
-    () =>
-      !filter || filter({ group, keywords, label, value }, search as string),
-    [filter, group, keywords, label, value, search]
-  );
-
-  if (!visible) return null;
-
-  return (
-    <ComboboxItem
-      className={cn(comboboxItemVariants(), className)}
-      onClick={(event) => {
-        removeInput(focusEditor);
-        onClick?.(event);
-      }}
-      {...props}
-    />
-  );
-};
-
-const InlineComboboxEmpty = ({
-  children,
-  className,
-}: React.HTMLAttributes<HTMLDivElement>) => {
-  const { setHasEmpty } = React.useContext(InlineComboboxContext);
-  const store = useComboboxContext()!;
-  const items = store.useState('items');
-
-  React.useEffect(() => {
-    setHasEmpty(true);
-
-    return () => {
-      setHasEmpty(false);
-    };
-  }, [setHasEmpty]);
-
-  if (items.length > 0) return null;
-
-  return (
-    <div
-      className={cn(comboboxItemVariants({ interactive: false }), className)}
-    >
-      {children}
-    </div>
-  );
-};
-
-const InlineComboboxRow = ComboboxRow;
-
-function InlineComboboxGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ComboboxGroup>) {
-  return (
-    <ComboboxGroup
-      {...props}
-      className={cn(
-        'hidden not-last:border-b py-1.5 [&:has([role=option])]:block',
-        className
-      )}
-    />
-  );
-}
-
-function InlineComboboxGroupLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof ComboboxGroupLabel>) {
-  return (
-    <ComboboxGroupLabel
-      {...props}
-      className={cn(
-        'mt-1.5 mb-2 px-3 font-medium text-muted-foreground text-xs',
-        className
-      )}
-    />
-  );
-}
-
-export {
-  InlineCombobox,
-  InlineComboboxContent,
-  InlineComboboxEmpty,
-  InlineComboboxGroup,
-  InlineComboboxGroupLabel,
-  InlineComboboxInput,
-  InlineComboboxItem,
-  InlineComboboxRow,
-};

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

@@ -1,21 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }

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

@@ -1,254 +0,0 @@
-import React from 'react';
-
-import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
-
-import {
-  CalendarIcon,
-  ChevronRightIcon,
-  Columns3Icon,
-  FileCodeIcon,
-  FilmIcon,
-  Heading1Icon,
-  Heading2Icon,
-  Heading3Icon,
-  ImageIcon,
-  Link2Icon,
-  ListIcon,
-  ListOrderedIcon,
-  MinusIcon,
-  PenToolIcon,
-  PilcrowIcon,
-  PlusIcon,
-  QuoteIcon,
-  RadicalIcon,
-  SquareIcon,
-  TableIcon,
-  TableOfContentsIcon,
-} 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';
-
-import { ToolbarButton, ToolbarMenuGroup } from './toolbar';
-
-type Group = {
-  group: string;
-  items: Item[];
-};
-
-type Item = {
-  icon: React.ReactNode;
-  value: string;
-  onSelect: (editor: PlateEditor, value: string) => void;
-  focusEditor?: boolean;
-  label?: string;
-};
-
-const groups: Group[] = [
-  {
-    group: 'Basic blocks',
-    items: [
-      {
-        icon: <PilcrowIcon />,
-        label: 'Paragraph',
-        value: KEYS.p,
-      },
-      {
-        icon: <Heading1Icon />,
-        label: 'Heading 1',
-        value: 'h1',
-      },
-      {
-        icon: <Heading2Icon />,
-        label: 'Heading 2',
-        value: 'h2',
-      },
-      {
-        icon: <Heading3Icon />,
-        label: 'Heading 3',
-        value: 'h3',
-      },
-      {
-        icon: <TableIcon />,
-        label: 'Table',
-        value: KEYS.table,
-      },
-      {
-        icon: <FileCodeIcon />,
-        label: 'Code',
-        value: KEYS.codeBlock,
-      },
-      {
-        icon: <QuoteIcon />,
-        label: 'Quote',
-        value: KEYS.blockquote,
-      },
-      {
-        icon: <MinusIcon />,
-        label: 'Divider',
-        value: KEYS.hr,
-      },
-    ].map((item) => ({
-      ...item,
-      onSelect: (editor, value) => {
-        insertBlock(editor, value);
-      },
-    })),
-  },
-  {
-    group: 'Lists',
-    items: [
-      {
-        icon: <ListIcon />,
-        label: 'Bulleted list',
-        value: KEYS.ul,
-      },
-      {
-        icon: <ListOrderedIcon />,
-        label: 'Numbered list',
-        value: KEYS.ol,
-      },
-      {
-        icon: <SquareIcon />,
-        label: 'To-do list',
-        value: KEYS.listTodo,
-      },
-      {
-        icon: <ChevronRightIcon />,
-        label: 'Toggle list',
-        value: KEYS.toggle,
-      },
-    ].map((item) => ({
-      ...item,
-      onSelect: (editor, value) => {
-        insertBlock(editor, value);
-      },
-    })),
-  },
-  {
-    group: 'Media',
-    items: [
-      {
-        icon: <ImageIcon />,
-        label: 'Image',
-        value: KEYS.img,
-      },
-      {
-        icon: <FilmIcon />,
-        label: 'Embed',
-        value: KEYS.mediaEmbed,
-      },
-    ].map((item) => ({
-      ...item,
-      onSelect: (editor, value) => {
-        insertBlock(editor, value);
-      },
-    })),
-  },
-  {
-    group: 'Advanced blocks',
-    items: [
-      {
-        icon: <TableOfContentsIcon />,
-        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: <PenToolIcon />,
-        label: 'Excalidraw',
-        value: KEYS.excalidraw,
-      },
-    ].map((item) => ({
-      ...item,
-      onSelect: (editor, value) => {
-        insertBlock(editor, value);
-      },
-    })),
-  },
-  {
-    group: 'Inline',
-    items: [
-      {
-        icon: <Link2Icon />,
-        label: 'Link',
-        value: KEYS.link,
-      },
-      {
-        focusEditor: true,
-        icon: <CalendarIcon />,
-        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 InsertToolbarButton(props: DropdownMenuProps) {
-  const editor = useEditorRef();
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip="Insert" isDropdown>
-          <PlusIcon />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent
-        className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto"
-        align="start"
-      >
-        {groups.map(({ group, items: nestedItems }) => (
-          <ToolbarMenuGroup key={group} label={group}>
-            {nestedItems.map(({ icon, label, value, onSelect }) => (
-              <DropdownMenuItem
-                key={value}
-                className="min-w-[180px]"
-                onSelect={() => {
-                  onSelect(editor, value);
-                  editor.tf.focus();
-                }}
-              >
-                {icon}
-                {label}
-              </DropdownMenuItem>
-            ))}
-          </ToolbarMenuGroup>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

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

@@ -1,15 +0,0 @@
-import type { SlateLeafProps } from 'platejs/static';
-
-import { SlateLeaf } from 'platejs/static';
-
-export function KbdLeafStatic(props: SlateLeafProps) {
-  return (
-    <SlateLeaf
-      {...props}
-      as="kbd"
-      className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]"
-    >
-      {props.children}
-    </SlateLeaf>
-  );
-}

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

@@ -1,17 +0,0 @@
-
-
-import type { PlateLeafProps } from 'platejs/react';
-
-import { PlateLeaf } from 'platejs/react';
-
-export function KbdLeaf(props: PlateLeafProps) {
-  return (
-    <PlateLeaf
-      {...props}
-      as="kbd"
-      className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]"
-    >
-      {props.children}
-    </PlateLeaf>
-  );
-}