doclific 0.2.0 → 0.2.2

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

@@ -1,121 +0,0 @@
-
-import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import ReactPlayer from 'react-player';
-
-import type { TResizableProps, TVideoElement } from 'platejs';
-import type { PlateElementProps } from 'platejs/react';
-
-import { useDraggable } from '@platejs/dnd';
-import { parseTwitterUrl, parseVideoUrl } from '@platejs/media';
-import { useMediaState } from '@platejs/media/react';
-import { ResizableProvider, useResizableValue } from '@platejs/resizable';
-import { PlateElement, useEditorMounted, withHOC } from 'platejs/react';
-
-import { cn } from '@/lib/utils';
-
-import { Caption, CaptionTextarea } from './caption';
-import {
-  mediaResizeHandleVariants,
-  Resizable,
-  ResizeHandle,
-} from './resize-handle';
-
-export const VideoElement = withHOC(
-  ResizableProvider,
-  function VideoElement(
-    props: PlateElementProps<TVideoElement & TResizableProps>
-  ) {
-    const {
-      align = 'center',
-      embed,
-      isUpload,
-      isYoutube,
-      readOnly,
-      unsafeUrl,
-    } = useMediaState({
-      urlParsers: [parseTwitterUrl, parseVideoUrl],
-    });
-    const width = useResizableValue('width');
-
-    const isEditorMounted = useEditorMounted();
-
-    const isTweet = true;
-
-    const { isDragging, handleRef } = useDraggable({
-      element: props.element,
-    });
-
-    return (
-      <PlateElement className="py-2.5" {...props}>
-        <figure className="relative m-0 cursor-default" contentEditable={false}>
-          <Resizable
-            className={cn(isDragging && 'opacity-50')}
-            align={align}
-            options={{
-              align,
-              maxWidth: isTweet ? 550 : '100%',
-              minWidth: isTweet ? 300 : 100,
-              readOnly,
-            }}
-          >
-            <div className="group/media">
-              <ResizeHandle
-                className={mediaResizeHandleVariants({ direction: 'left' })}
-                options={{ direction: 'left' }}
-              />
-
-              <ResizeHandle
-                className={mediaResizeHandleVariants({ direction: 'right' })}
-                options={{ direction: 'right' }}
-              />
-
-              {!isUpload && isYoutube && (
-                <div ref={handleRef}>
-                  <LiteYouTubeEmbed
-                    id={embed!.id!}
-                    title="youtube"
-                    wrapperClass={cn(
-                      'aspect-video rounded-sm',
-                      'relative block cursor-pointer bg-black bg-center bg-cover [contain:content]',
-                      '[&.lyt-activated]:before:absolute [&.lyt-activated]:before:top-0 [&.lyt-activated]:before:h-[60px] [&.lyt-activated]:before:w-full [&.lyt-activated]:before:bg-top [&.lyt-activated]:before:bg-repeat-x [&.lyt-activated]:before:pb-[50px] [&.lyt-activated]:before:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
-                      '[&.lyt-activated]:before:bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)]',
-                      'after:block after:pb-[var(--aspect-ratio)] after:content-[""]',
-                      '[&_>_iframe]:absolute [&_>_iframe]:top-0 [&_>_iframe]:left-0 [&_>_iframe]:size-full',
-                      '[&_>_.lty-playbtn]:z-1 [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
-                      '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',
-                      '[&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:content-[""]',
-                      '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',
-                      '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',
-                      '[&.lyt-activated]:cursor-[unset]',
-                      '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',
-                      '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:opacity-0!'
-                    )}
-                  />
-                </div>
-              )}
-
-              {isUpload && isEditorMounted && (
-                <div ref={handleRef}>
-                  <ReactPlayer
-                    height="100%"
-                    src={unsafeUrl}
-                    width="100%"
-                    controls
-                  />
-                </div>
-              )}
-            </div>
-          </Resizable>
-
-          <Caption style={{ width }} align={align}>
-            <CaptionTextarea
-              readOnly={readOnly}
-              placeholder="Write a caption..."
-            />
-          </Caption>
-        </figure>
-        {props.children}
-      </PlateElement>
-    );
-  }
-);

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

@@ -1,36 +0,0 @@
-import type { TMentionElement } from 'platejs';
-import type { SlateElementProps } from 'platejs/static';
-
-import { KEYS } from 'platejs';
-import { SlateElement } from 'platejs/static';
-
-import { cn } from '@/lib/utils';
-
-export function MentionElementStatic(
-  props: SlateElementProps<TMentionElement> & {
-    prefix?: string;
-  }
-) {
-  const { prefix } = props;
-  const element = props.element;
-
-  return (
-    <SlateElement
-      {...props}
-      className={cn(
-        'inline-block rounded-md bg-muted px-1.5 py-0.5 align-baseline font-medium text-sm',
-        element.children[0][KEYS.bold] === true && 'font-bold',
-        element.children[0][KEYS.italic] === true && 'italic',
-        element.children[0][KEYS.underline] === true && 'underline'
-      )}
-      attributes={{
-        ...props.attributes,
-        'data-slate-value': element.value,
-      }}
-    >
-      {props.children}
-      {prefix}
-      {element.value}
-    </SlateElement>
-  );
-}

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

@@ -1,194 +0,0 @@
-import React from 'react';
-
-import type { TComboboxInputElement, TMentionElement } from 'platejs';
-import type { PlateElementProps } from 'platejs/react';
-
-import { getMentionOnSelectItem } from '@platejs/mention';
-import { IS_APPLE, KEYS } from 'platejs';
-import {
-  PlateElement,
-  useFocused,
-  useReadOnly,
-  useSelected,
-} from 'platejs/react';
-
-import { cn } from '@/lib/utils';
-import { useMounted } from '@/hooks/use-mounted';
-
-import {
-  InlineCombobox,
-  InlineComboboxContent,
-  InlineComboboxEmpty,
-  InlineComboboxGroup,
-  InlineComboboxInput,
-  InlineComboboxItem,
-} from './inline-combobox';
-
-export function MentionElement(
-  props: PlateElementProps<TMentionElement> & {
-    prefix?: string;
-  }
-) {
-  const element = props.element;
-
-  const selected = useSelected();
-  const focused = useFocused();
-  const mounted = useMounted();
-  const readOnly = useReadOnly();
-
-  return (
-    <PlateElement
-      {...props}
-      className={cn(
-        'inline-block rounded-md bg-muted px-1.5 py-0.5 align-baseline font-medium text-sm',
-        !readOnly && 'cursor-pointer',
-        selected && focused && 'ring-2 ring-ring',
-        element.children[0][KEYS.bold] === true && 'font-bold',
-        element.children[0][KEYS.italic] === true && 'italic',
-        element.children[0][KEYS.underline] === true && 'underline'
-      )}
-      attributes={{
-        ...props.attributes,
-        contentEditable: false,
-        'data-slate-value': element.value,
-        draggable: true,
-      }}
-    >
-      {mounted && IS_APPLE ? (
-        // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
-        <>
-          {props.children}
-          {props.prefix}
-          {element.value}
-        </>
-      ) : (
-        // Others like Android https://github.com/ianstormtaylor/slate/pull/5360
-        <>
-          {props.prefix}
-          {element.value}
-          {props.children}
-        </>
-      )}
-    </PlateElement>
-  );
-}
-
-const onSelectItem = getMentionOnSelectItem();
-
-export function MentionInputElement(
-  props: PlateElementProps<TComboboxInputElement>
-) {
-  const { editor, element } = props;
-  const [search, setSearch] = React.useState('');
-
-  return (
-    <PlateElement {...props} as="span">
-      <InlineCombobox
-        value={search}
-        element={element}
-        setValue={setSearch}
-        showTrigger={false}
-        trigger="@"
-      >
-        <span className="inline-block rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm ring-ring focus-within:ring-2">
-          <InlineComboboxInput />
-        </span>
-
-        <InlineComboboxContent className="my-1.5">
-          <InlineComboboxEmpty>No results</InlineComboboxEmpty>
-
-          <InlineComboboxGroup>
-            {MENTIONABLES.map((item) => (
-              <InlineComboboxItem
-                key={item.key}
-                value={item.text}
-                onClick={() => onSelectItem(editor, item, search)}
-              >
-                {item.text}
-              </InlineComboboxItem>
-            ))}
-          </InlineComboboxGroup>
-        </InlineComboboxContent>
-      </InlineCombobox>
-
-      {props.children}
-    </PlateElement>
-  );
-}
-
-const MENTIONABLES = [
-  { key: '0', text: 'Aayla Secura' },
-  { key: '1', text: 'Adi Gallia' },
-  {
-    key: '2',
-    text: 'Admiral Dodd Rancit',
-  },
-  {
-    key: '3',
-    text: 'Admiral Firmus Piett',
-  },
-  {
-    key: '4',
-    text: 'Admiral Gial Ackbar',
-  },
-  { key: '5', text: 'Admiral Ozzel' },
-  { key: '6', text: 'Admiral Raddus' },
-  {
-    key: '7',
-    text: 'Admiral Terrinald Screed',
-  },
-  { key: '8', text: 'Admiral Trench' },
-  {
-    key: '9',
-    text: 'Admiral U.O. Statura',
-  },
-  { key: '10', text: 'Agen Kolar' },
-  { key: '11', text: 'Agent Kallus' },
-  {
-    key: '12',
-    text: 'Aiolin and Morit Astarte',
-  },
-  { key: '13', text: 'Aks Moe' },
-  { key: '14', text: 'Almec' },
-  { key: '15', text: 'Alton Kastle' },
-  { key: '16', text: 'Amee' },
-  { key: '17', text: 'AP-5' },
-  { key: '18', text: 'Armitage Hux' },
-  { key: '19', text: 'Artoo' },
-  { key: '20', text: 'Arvel Crynyd' },
-  { key: '21', text: 'Asajj Ventress' },
-  { key: '22', text: 'Aurra Sing' },
-  { key: '23', text: 'AZI-3' },
-  { key: '24', text: 'Bala-Tik' },
-  { key: '25', text: 'Barada' },
-  { key: '26', text: 'Bargwill Tomder' },
-  { key: '27', text: 'Baron Papanoida' },
-  { key: '28', text: 'Barriss Offee' },
-  { key: '29', text: 'Baze Malbus' },
-  { key: '30', text: 'Bazine Netal' },
-  { key: '31', text: 'BB-8' },
-  { key: '32', text: 'BB-9E' },
-  { key: '33', text: 'Ben Quadinaros' },
-  { key: '34', text: 'Berch Teller' },
-  { key: '35', text: 'Beru Lars' },
-  { key: '36', text: 'Bib Fortuna' },
-  {
-    key: '37',
-    text: 'Biggs Darklighter',
-  },
-  { key: '38', text: 'Black Krrsantan' },
-  { key: '39', text: 'Bo-Katan Kryze' },
-  { key: '40', text: 'Boba Fett' },
-  { key: '41', text: 'Bobbajo' },
-  { key: '42', text: 'Bodhi Rook' },
-  { key: '43', text: 'Borvo the Hutt' },
-  { key: '44', text: 'Boss Nass' },
-  { key: '45', text: 'Bossk' },
-  {
-    key: '46',
-    text: 'Breha Antilles-Organa',
-  },
-  { key: '47', text: 'Bren Derlin' },
-  { key: '48', text: 'Brendol Hux' },
-  { key: '49', text: 'BT-1' },
-];

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

@@ -1,123 +0,0 @@
-import React from 'react';
-
-import { SuggestionPlugin } from '@platejs/suggestion/react';
-import {
-  type DropdownMenuProps,
-  DropdownMenuItemIndicator,
-} from '@radix-ui/react-dropdown-menu';
-import { CheckIcon, EyeIcon, PencilLineIcon, PenIcon } from 'lucide-react';
-import { useEditorRef, usePlateState, usePluginOption } from 'platejs/react';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-
-import { ToolbarButton } from './toolbar';
-
-export function ModeToolbarButton(props: DropdownMenuProps) {
-  const editor = useEditorRef();
-  const [readOnly, setReadOnly] = usePlateState('readOnly');
-  const [open, setOpen] = React.useState(false);
-
-  const isSuggesting = usePluginOption(SuggestionPlugin, 'isSuggesting');
-
-  let value = 'editing';
-
-  if (readOnly) value = 'viewing';
-
-  if (isSuggesting) value = 'suggestion';
-
-  const item: Record<string, { icon: React.ReactNode; label: string }> = {
-    editing: {
-      icon: <PenIcon />,
-      label: 'Editing',
-    },
-    suggestion: {
-      icon: <PencilLineIcon />,
-      label: 'Suggestion',
-    },
-    viewing: {
-      icon: <EyeIcon />,
-      label: 'Viewing',
-    },
-  };
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip="Editing mode" isDropdown>
-          {item[value].icon}
-          <span className="hidden lg:inline">{item[value].label}</span>
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="min-w-[180px]" align="start">
-        <DropdownMenuRadioGroup
-          value={value}
-          onValueChange={(newValue) => {
-            if (newValue === 'viewing') {
-              setReadOnly(true);
-
-              return;
-            }
-            setReadOnly(false);
-
-            if (newValue === 'suggestion') {
-              editor.setOption(SuggestionPlugin, 'isSuggesting', true);
-
-              return;
-            }
-            editor.setOption(SuggestionPlugin, 'isSuggesting', false);
-
-            if (newValue === 'editing') {
-              editor.tf.focus();
-
-              return;
-            }
-          }}
-        >
-          <DropdownMenuRadioItem
-            className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
-            value="editing"
-          >
-            <Indicator />
-            {item.editing.icon}
-            {item.editing.label}
-          </DropdownMenuRadioItem>
-
-          <DropdownMenuRadioItem
-            className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
-            value="viewing"
-          >
-            <Indicator />
-            {item.viewing.icon}
-            {item.viewing.label}
-          </DropdownMenuRadioItem>
-
-          <DropdownMenuRadioItem
-            className="pl-2 *:first:[span]:hidden *:[svg]:text-muted-foreground"
-            value="suggestion"
-          >
-            <Indicator />
-            {item.suggestion.icon}
-            {item.suggestion.label}
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-function Indicator() {
-  return (
-    <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <CheckIcon />
-      </DropdownMenuItemIndicator>
-    </span>
-  );
-}

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

@@ -1,80 +0,0 @@
-import React from 'react';
-
-import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
-
-import {
-  KeyboardIcon,
-  MoreHorizontalIcon,
-  SubscriptIcon,
-  SuperscriptIcon,
-} from 'lucide-react';
-import { KEYS } from 'platejs';
-import { useEditorRef } from 'platejs/react';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-
-import { ToolbarButton } from './toolbar';
-
-export function MoreToolbarButton(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">
-          <MoreHorizontalIcon />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent
-        className="ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto"
-        align="start"
-      >
-        <DropdownMenuGroup>
-          <DropdownMenuItem
-            onSelect={() => {
-              editor.tf.toggleMark(KEYS.kbd);
-              editor.tf.collapse({ edge: 'end' });
-              editor.tf.focus();
-            }}
-          >
-            <KeyboardIcon />
-            Keyboard input
-          </DropdownMenuItem>
-
-          <DropdownMenuItem
-            onSelect={() => {
-              editor.tf.toggleMark(KEYS.sup, {
-                remove: KEYS.sub,
-              });
-              editor.tf.focus();
-            }}
-          >
-            <SuperscriptIcon />
-            Superscript
-            {/* (⌘+,) */}
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onSelect={() => {
-              editor.tf.toggleMark(KEYS.sub, {
-                remove: KEYS.sup,
-              });
-              editor.tf.focus();
-            }}
-          >
-            <SubscriptIcon />
-            Subscript
-            {/* (⌘+.) */}
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

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

@@ -1,13 +0,0 @@
-import type { SlateElementProps } from 'platejs/static';
-
-import { SlateElement } from 'platejs/static';
-
-import { cn } from '@/lib/utils';
-
-export function ParagraphElementStatic(props: SlateElementProps) {
-  return (
-    <SlateElement {...props} className={cn('m-0 px-0 py-1')}>
-      {props.children}
-    </SlateElement>
-  );
-}

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

@@ -1,15 +0,0 @@
-
-
-import type { PlateElementProps } from 'platejs/react';
-
-import { PlateElement } from 'platejs/react';
-
-import { cn } from '@/lib/utils';
-
-export function ParagraphElement(props: PlateElementProps) {
-  return (
-    <PlateElement {...props} className={cn('m-0 px-0 py-1')}>
-      {props.children}
-    </PlateElement>
-  );
-}

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

@@ -1,46 +0,0 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
-
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
-}
-
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }