@gientech/modual 2.0.4 → 2.0.5

package/src/modules/search/components/Editor/ui/link-floating-toolbar.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '@udecode/cn';
+import { useFormInputProps } from '@udecode/plate-common/react';
+import {
+  type UseVirtualFloatingOptions,
+  flip,
+  offset,
+} from '@udecode/plate-floating';
+import {
+  FloatingLinkUrlInput,
+  type LinkFloatingToolbarState,
+  LinkOpenButton,
+  useFloatingLinkEdit,
+  useFloatingLinkEditState,
+  useFloatingLinkInsert,
+  useFloatingLinkInsertState,
+} from '@udecode/plate-link/react';
+
+import { Icons } from './icons';
+
+import { buttonVariants } from './button';
+import { inputVariants } from './input';
+import { popoverVariants } from './popover';
+import { Separator } from './separator';
+
+const floatingOptions: UseVirtualFloatingOptions = {
+  middleware: [
+    offset(12),
+    flip({
+      fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],
+      padding: 12,
+    }),
+  ],
+  placement: 'bottom-start',
+};
+
+export interface LinkFloatingToolbarProps {
+  state?: LinkFloatingToolbarState;
+}
+
+export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
+  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 pl-3 text-muted-foreground">
+          <Icons.link className="size-4" />
+        </div>
+
+        <FloatingLinkUrlInput
+          className={inputVariants({ h: 'sm', variant: 'ghost' })}
+          placeholder="Paste link"
+        />
+      </div>
+      <Separator />
+      <div className="flex items-center">
+        <div className="flex items-center pl-3 text-muted-foreground">
+          <Icons.text className="size-4" />
+        </div>
+        <input
+          className={inputVariants({ h: 'sm', variant: 'ghost' })}
+          placeholder="Text to display"
+          {...textInputProps}
+        />
+      </div>
+    </div>
+  );
+
+  const editContent = editState.isEditing ? (
+    input
+  ) : (
+    <div className="box-content flex h-9 items-center gap-1">
+      <button
+        className={buttonVariants({ size: 'sm', variant: 'ghost' })}
+        type="button"
+        {...editButtonProps}
+      >
+        Edit link
+      </button>
+
+      <Separator orientation="vertical" />
+
+      <LinkOpenButton
+        className={buttonVariants({
+          size: 'sms',
+          variant: 'ghost',
+        })}
+      >
+        <Icons.externalLink width={18} />
+      </LinkOpenButton>
+
+      <Separator orientation="vertical" />
+
+      <button
+        className={buttonVariants({
+          size: 'sms',
+          variant: 'ghost',
+        })}
+        type="button"
+        {...unlinkButtonProps}
+      >
+        <Icons.unlink width={18} />
+      </button>
+    </div>
+  );
+
+  return (
+    <>
+      <div
+        className={cn(popoverVariants(), 'w-auto p-1')}
+        ref={insertRef}
+        {...insertProps}
+      >
+        {input}
+      </div>
+
+      <div
+        className={cn(popoverVariants(), 'w-auto p-1')}
+        ref={editRef}
+        {...editProps}
+      >
+        {editContent}
+      </div>
+    </>
+  );
+}

package/src/modules/search/components/Editor/ui/list-element.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { withRef, withVariants } from '@udecode/cn';
+import { PlateElement } from '@udecode/plate-common/react';
+import { cva } from 'class-variance-authority';
+
+const listVariants = cva('m-0 ps-6', {
+  variants: {
+    variant: {
+      ol: 'list-decimal',
+      ul: 'list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]',
+    },
+  },
+});
+
+const ListElementVariants = withVariants(PlateElement, listVariants, [
+  'variant',
+]);
+
+export const ListElement = withRef<typeof ListElementVariants>(
+  ({ children, variant = 'ul', ...props }, ref) => {
+    const Component = variant!;
+
+    return (
+      <ListElementVariants asChild ref={ref} variant={variant} {...props}>
+        <Component>{children}</Component>
+      </ListElementVariants>
+    );
+  }
+);

package/src/modules/search/components/Editor/ui/mark-toolbar-button.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+
+import { withRef } from '@udecode/cn';
+import {
+  useMarkToolbarButton,
+  useMarkToolbarButtonState,
+} from '@udecode/plate-common/react';
+
+import { ToolbarButton } from './toolbar';
+
+export const MarkToolbarButton = withRef<
+  typeof ToolbarButton,
+  {
+    clear?: string | string[];
+    nodeType: string;
+  }
+>(({ clear, nodeType, ...rest }, ref) => {
+  const state = useMarkToolbarButtonState({ clear, nodeType });
+  const { props } = useMarkToolbarButton(state);
+
+  return <ToolbarButton ref={ref} {...props} {...rest} />;
+});

package/src/modules/search/components/Editor/ui/media-embed-element.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import { Tweet } from 'react-tweet';
+
+import { cn, withRef } from '@udecode/cn';
+import { PlateElement, withHOC } from '@udecode/plate-common/react';
+import { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media';
+import { MediaEmbedPlugin, useMediaState } from '@udecode/plate-media/react';
+import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';
+
+import { Caption, CaptionTextarea } from './caption';
+import { MediaPopover } from './media-popover';
+import {
+  Resizable,
+  ResizeHandle,
+  mediaResizeHandleVariants,
+} from './resizable';
+
+export const MediaEmbedElement = withHOC(
+  ResizableProvider,
+  withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {
+    const {
+      align = 'center',
+      embed,
+      focused,
+      isTweet,
+      isVideo,
+      isYoutube,
+      readOnly,
+      selected,
+    } = useMediaState({
+      urlParsers: [parseTwitterUrl, parseVideoUrl],
+    });
+    const width = useResizableStore().get.width();
+    const provider = embed?.provider;
+
+    return (
+      <MediaPopover plugin={MediaEmbedPlugin}>
+        <PlateElement
+          className={cn('relative py-2.5', className)}
+          ref={ref}
+          {...props}
+        >
+          <figure className="group relative m-0 w-full" contentEditable={false}>
+            <Resizable
+              align={align}
+              options={{
+                align,
+                maxWidth: isTweet ? 550 : '100%',
+                minWidth: isTweet ? 300 : 100,
+              }}
+            >
+              <ResizeHandle
+                className={mediaResizeHandleVariants({ direction: 'left' })}
+                options={{ direction: 'left' }}
+              />
+
+              {isVideo ? (
+                isYoutube ? (
+                  <LiteYouTubeEmbed
+                    id={embed!.id!}
+                    title="youtube"
+                    wrapperClass={cn(
+                      'rounded-sm',
+                      focused && selected && 'ring-2 ring-ring ring-offset-2',
+                      'relative block cursor-pointer bg-black bg-cover bg-center [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]:left-0 [&_>_iframe]:top-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-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[""]',
+                      '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',
+                      '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-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
+                    className={cn(
+                      provider === 'vimeo' && 'pb-[75%]',
+                      provider === 'youku' && 'pb-[56.25%]',
+                      provider === 'dailymotion' && 'pb-[56.0417%]',
+                      provider === 'coub' && 'pb-[51.25%]'
+                    )}
+                  >
+                    <iframe
+                      allowFullScreen
+                      className={cn(
+                        'absolute left-0 top-0 size-full rounded-sm',
+                        isVideo && 'border-0',
+                        focused && selected && 'ring-2 ring-ring ring-offset-2'
+                      )}
+                      src={embed!.url}
+                      title="embed"
+                    />
+                  </div>
+                )
+              ) : null}
+
+              {isTweet && (
+                <div
+                  className={cn(
+                    '[&_.react-tweet-theme]:my-0',
+                    !readOnly &&
+                      selected &&
+                      '[&_.react-tweet-theme]:ring-2 [&_.react-tweet-theme]:ring-ring [&_.react-tweet-theme]:ring-offset-2'
+                  )}
+                >
+                  <Tweet id={embed!.id!} />
+                </div>
+              )}
+
+              <ResizeHandle
+                className={mediaResizeHandleVariants({ direction: 'right' })}
+                options={{ direction: 'right' }}
+              />
+            </Resizable>
+
+            <Caption align={align} style={{ width }}>
+              <CaptionTextarea placeholder="Write a caption..." />
+            </Caption>
+          </figure>
+
+          {children}
+        </PlateElement>
+      </MediaPopover>
+    );
+  })
+);

package/src/modules/search/components/Editor/ui/media-popover.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect } from 'react';
+
+import {
+  type WithRequiredKey,
+  isSelectionExpanded,
+} from '@udecode/plate-common';
+import {
+  useEditorSelector,
+  useElement,
+  useRemoveNodeButton,
+} from '@udecode/plate-common/react';
+import {
+  FloatingMedia as FloatingMediaPrimitive,
+  floatingMediaActions,
+  useFloatingMediaSelectors,
+} from '@udecode/plate-media/react';
+import { useReadOnly, useSelected } from 'slate-react';
+
+import { Icons } from './icons';
+
+import { Button, buttonVariants } from './button';
+import { CaptionButton } from './caption';
+import { inputVariants } from './input';
+import { Popover, PopoverAnchor, PopoverContent } from './popover';
+import { Separator } from './separator';
+
+export interface MediaPopoverProps {
+  children: React.ReactNode;
+  plugin: WithRequiredKey;
+}
+
+export function MediaPopover({ children, plugin }: MediaPopoverProps) {
+  const readOnly = useReadOnly();
+  const selected = useSelected();
+
+  const selectionCollapsed = useEditorSelector(
+    (editor) => !isSelectionExpanded(editor),
+    []
+  );
+  const isOpen = !readOnly && selected && selectionCollapsed;
+  const isEditing = useFloatingMediaSelectors().isEditing();
+
+  useEffect(() => {
+    if (!isOpen && isEditing) {
+      floatingMediaActions.isEditing(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  const element = useElement();
+  const { props: buttonProps } = useRemoveNodeButton({ element });
+
+  if (readOnly) return <>{children}</>;
+
+  return (
+    <Popover modal={false} open={isOpen}>
+      <PopoverAnchor>{children}</PopoverAnchor>
+
+      <PopoverContent
+        className="w-auto p-1"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        {isEditing ? (
+          <div className="flex w-[330px] flex-col">
+            <div className="flex items-center">
+              <div className="flex items-center pl-3 text-muted-foreground">
+                <Icons.link className="size-4" />
+              </div>
+
+              <FloatingMediaPrimitive.UrlInput
+                className={inputVariants({ h: 'sm', variant: 'ghost' })}
+                options={{ plugin }}
+                placeholder="Paste the embed link..."
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="box-content flex h-9 items-center gap-1">
+            <FloatingMediaPrimitive.EditButton
+              className={buttonVariants({ size: 'sm', variant: 'ghost' })}
+            >
+              Edit link
+            </FloatingMediaPrimitive.EditButton>
+
+            <CaptionButton variant="ghost">Caption</CaptionButton>
+
+            <Separator className="my-1" orientation="vertical" />
+
+            <Button size="sms" variant="ghost" {...buttonProps}>
+              <Icons.delete className="size-4" />
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/modules/search/components/Editor/ui/mention-element.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import type { TMentionElement } from '@udecode/plate-mention';
+
+import { cn, withRef } from '@udecode/cn';
+import { getHandler } from '@udecode/plate-common';
+import { PlateElement, useElement } from '@udecode/plate-common/react';
+import { useFocused, useSelected } from 'slate-react';
+
+export const MentionElement = withRef<
+  typeof PlateElement,
+  {
+    onClick?: (mentionNode: any) => void;
+    prefix?: string;
+    renderLabel?: (mentionable: TMentionElement) => string;
+  }
+>(({ children, className, onClick, prefix, renderLabel, ...props }, ref) => {
+  const element = useElement<TMentionElement>();
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <PlateElement
+      className={cn(
+        'inline-block cursor-pointer rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm font-medium',
+        selected && focused && 'ring-2 ring-ring',
+        element.children[0].bold === true && 'font-bold',
+        element.children[0].italic === true && 'italic',
+        element.children[0].underline === true && 'underline',
+        className
+      )}
+      contentEditable={false}
+      data-slate-value={element.value}
+      onClick={getHandler(onClick, element)}
+      ref={ref}
+      {...props}
+    >
+      {prefix}
+      {renderLabel ? renderLabel(element) : element.value}
+      {children}
+    </PlateElement>
+  );
+});

package/src/modules/search/components/Editor/ui/mention-input-element.tsx

@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+
+import { cn, withRef } from '@udecode/cn';
+import { PlateElement } from '@udecode/plate-common/react';
+import { getMentionOnSelectItem } from '@udecode/plate-mention';
+
+import {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxInput,
+  InlineComboboxItem,
+} from './inline-combobox';
+
+const onSelectItem = getMentionOnSelectItem();
+
+export const MentionInputElement = withRef<typeof PlateElement>(
+  ({ className, ...props }, ref) => {
+    const { children, editor, element } = props;
+    const [search, setSearch] = useState('');
+
+    return (
+      <PlateElement
+        as="span"
+        data-slate-value={element.value}
+        ref={ref}
+        {...props}
+      >
+        <InlineCombobox
+          element={element}
+          setValue={setSearch}
+          showTrigger={false}
+          trigger="@"
+          value={search}
+        >
+          <span
+            className={cn(
+              'inline-block rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm ring-ring focus-within:ring-2',
+              className
+            )}
+          >
+            <InlineComboboxInput />
+          </span>
+
+          <InlineComboboxContent className="my-1.5">
+            <InlineComboboxEmpty>No results found</InlineComboboxEmpty>
+
+            {MENTIONABLES.map((item) => (
+              <InlineComboboxItem
+                key={item.key}
+                onClick={() => onSelectItem(editor, item, search)}
+                value={item.text}
+              >
+                {item.text}
+              </InlineComboboxItem>
+            ))}
+          </InlineComboboxContent>
+        </InlineCombobox>
+
+        {children}
+      </PlateElement>
+    );
+  }
+);
+
+export 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' },
+];