@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.3

package/src/internal/plate-editor/plate-ui/media-video-node.tsx

@@ -1,119 +0,0 @@
-'use client';
-
-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,
-  type PlateElementProps,
-  useEditorMounted,
-  withHOC
-} from 'platejs/react';
-import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import ReactPlayer from 'react-player';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { Caption, CaptionTextarea } from './caption';
-import { MediaToolbar } from './media-toolbar';
-import {
-  mediaResizeHandleVariants,
-  Resizable,
-  ResizeHandle
-} from './resize-handle';
-
-export const MediaVideoElement = withHOC(
-  ResizableProvider,
-  (props: PlateElementProps) => {
-    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
-            align={align}
-            className={cn(isDragging && 'opacity-50')}
-            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>
-              )}
-
-              {/* TODO: Lazy load */}
-              {isUpload && isEditorMounted && (
-                <div ref={handleRef}>
-                  <ReactPlayer
-                    controls
-                    height="100%"
-                    src={unsafeUrl}
-                    width="100%" />
-                </div>
-              )}
-
-              <MediaToolbar />
-            </div>
-          </Resizable>
-
-          <Caption align={align} style={{ width }}>
-            <CaptionTextarea
-              placeholder="Write a caption..."
-              readOnly={readOnly} />
-          </Caption>
-        </figure>
-        {props.children}
-      </PlateElement>
-    );
-  }
-);

package/src/internal/plate-editor/plate-ui/mention-node-static.tsx

@@ -1,46 +0,0 @@
-
-import { type TMentionElement, IS_APPLE } from 'platejs';
-
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-export function MentionElementStatic({
-  prefix,
-  ...props
-}: SlateElementProps<TMentionElement> & {
-  prefix?: string;
-}) {
-  const { element } = props;
-
-  return (
-    <SlateElement
-      {...props}
-      attributes={{
-        ...props.attributes,
-        'data-slate-value': element.value
-      }}
-      className={cn(
-        'inline-block cursor-pointer rounded-md bg-muted px-1.5 py-0.5 align-baseline font-medium text-sm',
-        element.children[0].bold === true && 'font-bold',
-        element.children[0].italic === true && 'italic',
-        element.children[0].underline === true && 'underline'
-      )}>
-      {IS_APPLE ? (
-        // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
-        <>
-          {props.children}
-          {prefix}
-          {element.value}
-        </>
-      ) : (
-        // Others like Android https://github.com/ianstormtaylor/slate/pull/5360
-        <>
-          {prefix}
-          {element.value}
-          {props.children}
-        </>
-      )}
-    </SlateElement>
-  );
-}

package/src/internal/plate-editor/plate-ui/mention-node.tsx

@@ -1,79 +0,0 @@
-'use client';
-
-import { IS_APPLE, type TElement } from 'platejs';
-import {
-  PlateElement,
-  type PlateElementProps,
-  useSelected
-} from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import {
-  InlineCombobox,
-  InlineComboboxContent,
-  InlineComboboxEmpty,
-  InlineComboboxInput
-} from './inline-combobox';
-
-type TMentionElement = TElement & { value: string };
-type TMentionInputElement = TElement;
-
-export function MentionElement(
-  props: PlateElementProps<TMentionElement> & { prefix?: string }
-) {
-  const { prefix } = props;
-  const { element } = props;
-  const selected = useSelected();
-
-  return (
-    <PlateElement
-      {...props}
-      attributes={{
-        ...props.attributes,
-        'data-slate-value': element.value
-      }}
-      className={cn(
-        'inline-block cursor-pointer rounded-md bg-muted px-1.5 py-0.5 align-baseline font-medium text-sm',
-        selected && 'ring-2 ring-ring',
-        element.children[0].bold === true && 'font-bold',
-        element.children[0].italic === true && 'italic',
-        element.children[0].underline === true && 'underline'
-      )}>
-      {IS_APPLE ? (
-        <>
-          {props.children}
-          {prefix}
-          {element.value}
-        </>
-      ) : (
-        <>
-          {prefix}
-          {element.value}
-          {props.children}
-        </>
-      )}
-    </PlateElement>
-  );
-}
-
-export function MentionInputElement(
-  props: PlateElementProps<TMentionInputElement>
-) {
-  const { element } = props;
-
-  return (
-    <PlateElement {...props} as="span">
-      <InlineCombobox element={element} trigger="@">
-        <InlineComboboxInput />
-
-        <InlineComboboxContent>
-          <InlineComboboxEmpty>No results found.</InlineComboboxEmpty>
-
-          {/* Mention items would be populated by the mention plugin */}
-        </InlineComboboxContent>
-      </InlineCombobox>
-      {props.children}
-    </PlateElement>
-  );
-}