doclific 0.1.0

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

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

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

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

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

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

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

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

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