doclific 0.2.0 → 0.2.2

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

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

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

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

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

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

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

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

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

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

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