doclific 0.1.0

package/frontend/src/components/ui/layout-header.tsx

@@ -0,0 +1,35 @@
+import { orpcTs } from "@/lib/orpc"
+import { useQuery } from "@tanstack/react-query"
+import { useLocation } from "react-router"
+import type { FolderStructure } from "@/types/docs"
+
+export function LayoutHeader() {
+    // get the current path
+    const path = useLocation()
+
+    const pathArray = path.pathname.split("/").filter(Boolean)
+
+    // get docs query
+    const docsQuery = useQuery({
+        ...orpcTs.docs.getDocs.queryOptions(),
+        enabled: true,
+    })
+
+    // recursively loop through docsQuery.data and find the item that matches the path
+    const findItem = (items: FolderStructure[], path: string[], index: number) => {
+        for (const item of items) {
+            if (item.name === path[index] && index !== path.length - 1) {
+                return findItem(item.children, path, index + 1)
+            } else if (item.name === path[index] && index === path.length - 1) {
+                return item
+            }
+        }
+        return null
+    }
+
+    const item = findItem(docsQuery.data || [], pathArray, 0)
+
+    return (
+        <h1 className="text-base font-medium">{item?.title || "Doclific"}</h1>
+    )
+}

package/frontend/src/components/ui/line-height-toolbar-button.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import { LineHeightPlugin } from '@platejs/basic-styles/react';
+import { DropdownMenuItemIndicator } from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, WrapText } from 'lucide-react';
+import { useEditorRef, useSelectionFragmentProp } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+import { ToolbarButton } from './toolbar';
+
+export function LineHeightToolbarButton(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const { defaultNodeValue, validNodeValues: values = [] } =
+    editor.getInjectProps(LineHeightPlugin);
+
+  const value = useSelectionFragmentProp({
+    defaultValue: defaultNodeValue,
+    getProp: (node) => node.lineHeight,
+  });
+
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Line height" isDropdown>
+          <WrapText />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="min-w-0" align="start">
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(newValue) => {
+            editor
+              .getTransforms(LineHeightPlugin)
+              .lineHeight.setNodes(Number(newValue));
+            editor.tf.focus();
+          }}
+        >
+          {values.map((value) => (
+            <DropdownMenuRadioItem
+              key={value}
+              className="min-w-[180px] pl-2 *:first:[span]:hidden"
+              value={value}
+            >
+              <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+                <DropdownMenuItemIndicator>
+                  <CheckIcon />
+                </DropdownMenuItemIndicator>
+              </span>
+              {value}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,21 @@
+import type { TLinkElement } from 'platejs';
+import type { SlateElementProps } from 'platejs/static';
+
+import { getLinkAttributes } from '@platejs/link';
+import { SlateElement } from 'platejs/static';
+
+export function LinkElementStatic(props: SlateElementProps<TLinkElement>) {
+  return (
+    <SlateElement
+      {...props}
+      as="a"
+      className="font-medium text-primary underline decoration-primary underline-offset-4"
+      attributes={{
+        ...props.attributes,
+        ...getLinkAttributes(props.editor, props.element),
+      }}
+    >
+      {props.children}
+    </SlateElement>
+  );
+}

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

@@ -0,0 +1,39 @@
+
+
+import type { TInlineSuggestionData, TLinkElement } from 'platejs';
+import type { PlateElementProps } from 'platejs/react';
+
+import { getLinkAttributes } from '@platejs/link';
+import { SuggestionPlugin } from '@platejs/suggestion/react';
+import { PlateElement } from 'platejs/react';
+
+import { cn } from '@/lib/utils';
+
+export function LinkElement(props: PlateElementProps<TLinkElement>) {
+  const suggestionData = props.editor
+    .getApi(SuggestionPlugin)
+    .suggestion.suggestionData(props.element) as
+    | TInlineSuggestionData
+    | undefined;
+
+  return (
+    <PlateElement
+      {...props}
+      as="a"
+      className={cn(
+        'font-medium text-primary underline decoration-primary underline-offset-4',
+        suggestionData?.type === 'remove' && 'bg-red-100 text-red-700',
+        suggestionData?.type === 'insert' && 'bg-emerald-100 text-emerald-700'
+      )}
+      attributes={{
+        ...props.attributes,
+        ...getLinkAttributes(props.editor, props.element),
+        onMouseOver: (e) => {
+          e.stopPropagation();
+        },
+      }}
+    >
+      {props.children}
+    </PlateElement>
+  );
+}

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

@@ -0,0 +1,22 @@
+
+
+import {
+  useLinkToolbarButton,
+  useLinkToolbarButtonState,
+} from '@platejs/link/react';
+import { Link } from 'lucide-react';
+
+import { ToolbarButton } from './toolbar';
+
+export function LinkToolbarButton(
+  props: React.ComponentProps<typeof ToolbarButton>
+) {
+  const state = useLinkToolbarButtonState();
+  const { props: buttonProps } = useLinkToolbarButton(state);
+
+  return (
+    <ToolbarButton {...props} {...buttonProps} data-plate-focus tooltip="Link">
+      <Link />
+    </ToolbarButton>
+  );
+}

package/frontend/src/components/ui/link-toolbar.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+
+import type { TLinkElement } from 'platejs';
+
+import {
+  type UseVirtualFloatingOptions,
+  flip,
+  offset,
+} from '@platejs/floating';
+import { getLinkAttributes } from '@platejs/link';
+import {
+  type LinkFloatingToolbarState,
+  FloatingLinkUrlInput,
+  useFloatingLinkEdit,
+  useFloatingLinkEditState,
+  useFloatingLinkInsert,
+  useFloatingLinkInsertState,
+} from '@platejs/link/react';
+import { cva } from 'class-variance-authority';
+import { ExternalLink, Link, Text, Unlink } from 'lucide-react';
+import { KEYS } from 'platejs';
+import {
+  useEditorRef,
+  useEditorSelection,
+  useFormInputProps,
+  usePluginOption,
+} from 'platejs/react';
+
+import { buttonVariants } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+
+const popoverVariants = cva(
+  'z-50 w-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden'
+);
+
+const inputVariants = cva(
+  'flex h-[28px] w-full rounded-md border-none bg-transparent px-1.5 py-1 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-transparent md:text-sm'
+);
+
+export function LinkFloatingToolbar({
+  state,
+}: {
+  state?: LinkFloatingToolbarState;
+}) {
+  const activeCommentId = usePluginOption({ key: KEYS.comment }, 'activeId');
+  const activeSuggestionId = usePluginOption(
+    { key: KEYS.suggestion },
+    'activeId'
+  );
+
+  const floatingOptions: UseVirtualFloatingOptions = React.useMemo(
+    () => ({
+      middleware: [
+        offset(8),
+        flip({
+          fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],
+          padding: 12,
+        }),
+      ],
+      placement:
+        activeSuggestionId || activeCommentId ? 'top-start' : 'bottom-start',
+    }),
+    [activeCommentId, activeSuggestionId]
+  );
+
+  const insertState = useFloatingLinkInsertState({
+    ...state,
+    floatingOptions: {
+      ...floatingOptions,
+      ...state?.floatingOptions,
+    },
+  });
+  const {
+    hidden,
+    props: insertProps,
+    ref: insertRef,
+    textInputProps,
+  } = useFloatingLinkInsert(insertState);
+
+  const editState = useFloatingLinkEditState({
+    ...state,
+    floatingOptions: {
+      ...floatingOptions,
+      ...state?.floatingOptions,
+    },
+  });
+  const {
+    editButtonProps,
+    props: editProps,
+    ref: editRef,
+    unlinkButtonProps,
+  } = useFloatingLinkEdit(editState);
+  const inputProps = useFormInputProps({
+    preventDefaultOnEnterKeydown: true,
+  });
+
+  if (hidden) return null;
+
+  const input = (
+    <div className="flex w-[330px] flex-col" {...inputProps}>
+      <div className="flex items-center">
+        <div className="flex items-center pr-1 pl-2 text-muted-foreground">
+          <Link className="size-4" />
+        </div>
+
+        <FloatingLinkUrlInput
+          className={inputVariants()}
+          placeholder="Paste link"
+          data-plate-focus
+        />
+      </div>
+      <Separator className="my-1" />
+      <div className="flex items-center">
+        <div className="flex items-center pr-1 pl-2 text-muted-foreground">
+          <Text className="size-4" />
+        </div>
+        <input
+          className={inputVariants()}
+          placeholder="Text to display"
+          data-plate-focus
+          {...textInputProps}
+        />
+      </div>
+    </div>
+  );
+
+  const editContent = editState.isEditing ? (
+    input
+  ) : (
+    <div className="box-content flex items-center">
+      <button
+        className={buttonVariants({ size: 'sm', variant: 'ghost' })}
+        type="button"
+        {...editButtonProps}
+      >
+        Edit link
+      </button>
+
+      <Separator orientation="vertical" />
+
+      <LinkOpenButton />
+
+      <Separator orientation="vertical" />
+
+      <button
+        className={buttonVariants({
+          size: 'sm',
+          variant: 'ghost',
+        })}
+        type="button"
+        {...unlinkButtonProps}
+      >
+        <Unlink width={18} />
+      </button>
+    </div>
+  );
+
+  return (
+    <>
+      <div ref={insertRef} className={popoverVariants()} {...insertProps}>
+        {input}
+      </div>
+
+      <div ref={editRef} className={popoverVariants()} {...editProps}>
+        {editContent}
+      </div>
+    </>
+  );
+}
+
+function LinkOpenButton() {
+  const editor = useEditorRef();
+  const selection = useEditorSelection();
+
+  const attributes = React.useMemo(
+    () => {
+      const entry = editor.api.node<TLinkElement>({
+        match: { type: editor.getType(KEYS.link) },
+      });
+      if (!entry) {
+        return {};
+      }
+      const [element] = entry;
+      return getLinkAttributes(editor, element);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [editor, selection]
+  );
+
+  return (
+    <a
+      {...attributes}
+      className={buttonVariants({
+        size: 'sm',
+        variant: 'ghost',
+      })}
+      onMouseOver={(e) => {
+        e.stopPropagation();
+      }}
+      aria-label="Open link in a new tab"
+      target="_blank"
+    >
+      <ExternalLink width={18} />
+    </a>
+  );
+}

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

@@ -0,0 +1,204 @@
+import React from 'react';
+
+import { ListStyleType, someList, toggleList } from '@platejs/list';
+import {
+  useIndentTodoToolBarButton,
+  useIndentTodoToolBarButtonState,
+} from '@platejs/list/react';
+import { List, ListOrdered, ListTodoIcon } from 'lucide-react';
+import { useEditorRef, useEditorSelector } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+import {
+  ToolbarButton,
+  ToolbarSplitButton,
+  ToolbarSplitButtonPrimary,
+  ToolbarSplitButtonSecondary,
+} from './toolbar';
+
+export function BulletedListToolbarButton() {
+  const editor = useEditorRef();
+  const [open, setOpen] = React.useState(false);
+
+  const pressed = useEditorSelector(
+    (editor) =>
+      someList(editor, [
+        ListStyleType.Disc,
+        ListStyleType.Circle,
+        ListStyleType.Square,
+      ]),
+    []
+  );
+
+  return (
+    <ToolbarSplitButton pressed={open}>
+      <ToolbarSplitButtonPrimary
+        className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+        onClick={() => {
+          toggleList(editor, {
+            listStyleType: ListStyleType.Disc,
+          });
+        }}
+        data-state={pressed ? 'on' : 'off'}
+      >
+        <List className="size-4" />
+      </ToolbarSplitButtonPrimary>
+
+      <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
+        <DropdownMenuTrigger asChild>
+          <ToolbarSplitButtonSecondary />
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent align="start" alignOffset={-32}>
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              onClick={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.Disc,
+                })
+              }
+            >
+              <div className="flex items-center gap-2">
+                <div className="size-2 rounded-full border border-current bg-current" />
+                Default
+              </div>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.Circle,
+                })
+              }
+            >
+              <div className="flex items-center gap-2">
+                <div className="size-2 rounded-full border border-current" />
+                Circle
+              </div>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.Square,
+                })
+              }
+            >
+              <div className="flex items-center gap-2">
+                <div className="size-2 border border-current bg-current" />
+                Square
+              </div>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ToolbarSplitButton>
+  );
+}
+
+export function NumberedListToolbarButton() {
+  const editor = useEditorRef();
+  const [open, setOpen] = React.useState(false);
+
+  const pressed = useEditorSelector(
+    (editor) =>
+      someList(editor, [
+        ListStyleType.Decimal,
+        ListStyleType.LowerAlpha,
+        ListStyleType.UpperAlpha,
+        ListStyleType.LowerRoman,
+        ListStyleType.UpperRoman,
+      ]),
+    []
+  );
+
+  return (
+    <ToolbarSplitButton pressed={open}>
+      <ToolbarSplitButtonPrimary
+        className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+        onClick={() =>
+          toggleList(editor, {
+            listStyleType: ListStyleType.Decimal,
+          })
+        }
+        data-state={pressed ? 'on' : 'off'}
+      >
+        <ListOrdered className="size-4" />
+      </ToolbarSplitButtonPrimary>
+
+      <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
+        <DropdownMenuTrigger asChild>
+          <ToolbarSplitButtonSecondary />
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent align="start" alignOffset={-32}>
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              onSelect={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.Decimal,
+                })
+              }
+            >
+              Decimal (1, 2, 3)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.LowerAlpha,
+                })
+              }
+            >
+              Lower Alpha (a, b, c)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.UpperAlpha,
+                })
+              }
+            >
+              Upper Alpha (A, B, C)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.LowerRoman,
+                })
+              }
+            >
+              Lower Roman (i, ii, iii)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.UpperRoman,
+                })
+              }
+            >
+              Upper Roman (I, II, III)
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ToolbarSplitButton>
+  );
+}
+
+export function TodoListToolbarButton(
+  props: React.ComponentProps<typeof ToolbarButton>
+) {
+  const state = useIndentTodoToolBarButtonState({ nodeType: 'todo' });
+  const { props: buttonProps } = useIndentTodoToolBarButton(state);
+
+  return (
+    <ToolbarButton {...props} {...buttonProps} tooltip="Todo">
+      <ListTodoIcon />
+    </ToolbarButton>
+  );
+}

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

@@ -0,0 +1,19 @@
+
+
+import { useMarkToolbarButton, useMarkToolbarButtonState } from 'platejs/react';
+
+import { ToolbarButton } from './toolbar';
+
+export function MarkToolbarButton({
+  clear,
+  nodeType,
+  ...props
+}: React.ComponentProps<typeof ToolbarButton> & {
+  nodeType: string;
+  clear?: string[] | string;
+}) {
+  const state = useMarkToolbarButtonState({ clear, nodeType });
+  const { props: buttonProps } = useMarkToolbarButton(state);
+
+  return <ToolbarButton {...props} {...buttonProps} />;
+}

package/frontend/src/components/ui/media-audio-node-static.tsx

@@ -0,0 +1,17 @@
+import type { TAudioElement } from 'platejs';
+import type { SlateElementProps } from 'platejs/static';
+
+import { SlateElement } from 'platejs/static';
+
+export function AudioElementStatic(props: SlateElementProps<TAudioElement>) {
+  return (
+    <SlateElement {...props} className="mb-1">
+      <figure className="group relative cursor-default">
+        <div className="h-16">
+          <audio className="size-full" src={props.element.url} controls />
+        </div>
+      </figure>
+      {props.children}
+    </SlateElement>
+  );
+}

package/frontend/src/components/ui/media-audio-node.tsx

@@ -0,0 +1,39 @@
+
+
+import type { TAudioElement } from 'platejs';
+import type { PlateElementProps } from 'platejs/react';
+
+import { useMediaState } from '@platejs/media/react';
+import { ResizableProvider } from '@platejs/resizable';
+import { PlateElement, withHOC } from 'platejs/react';
+
+import { Caption, CaptionTextarea } from './caption';
+
+export const AudioElement = withHOC(
+  ResizableProvider,
+  function AudioElement(props: PlateElementProps<TAudioElement>) {
+    const { align = 'center', readOnly, unsafeUrl } = useMediaState();
+
+    return (
+      <PlateElement {...props} className="mb-1">
+        <figure
+          className="group relative cursor-default"
+          contentEditable={false}
+        >
+          <div className="h-16">
+            <audio className="size-full" src={unsafeUrl} controls />
+          </div>
+
+          <Caption style={{ width: '100%' }} align={align}>
+            <CaptionTextarea
+              className="h-20"
+              readOnly={readOnly}
+              placeholder="Write a caption..."
+            />
+          </Caption>
+        </figure>
+        {props.children}
+      </PlateElement>
+    );
+  }
+);