@gientech/modual 1.3.0 → 1.3.2

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

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

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

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

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

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

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

@@ -1,141 +0,0 @@
-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' },
-];