doclific 0.1.0

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

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

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

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

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

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