@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,30 @@
+
+import { type TFileElement } from 'platejs';
+
+import { FileUp } from 'lucide-react';
+
+import { SlateElement, type SlateElementProps } from 'platejs/static';
+
+export function MediaFileElementStatic(props: SlateElementProps<TFileElement>) {
+  const { name, url } = props.element;
+
+  return (
+    <SlateElement className="my-px rounded-sm" {...props}>
+      <a
+        className="group relative m-0 flex cursor-pointer items-center rounded px-0.5 py-[3px] hover:bg-muted"
+        contentEditable={false}
+        download={name}
+        href={url}
+        rel="noopener noreferrer"
+        role="button"
+        target="_blank">
+        <div className="flex items-center gap-1 p-1">
+          <FileUp className="size-5" />
+          <div>{name}</div>
+        </div>
+      </a>
+
+      {props.children}
+    </SlateElement>
+  );
+}

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { useMediaState } from '@platejs/media/react';
+import { ResizableProvider } from '@platejs/resizable';
+import { FileUpIcon } from 'lucide-react';
+import {
+  PlateElement,
+  type PlateElementProps,
+  useReadOnly,
+  withHOC
+} from 'platejs/react';
+
+import { BlockActionButton } from './block-context-menu';
+import { Caption, CaptionTextarea } from './caption';
+
+export const MediaFileElement = withHOC(
+  ResizableProvider,
+  (props: PlateElementProps) => {
+    const readOnly = useReadOnly();
+    const { name, unsafeUrl } = useMediaState();
+
+    const onDownload = () => {
+      window.open(unsafeUrl);
+    };
+
+    return (
+      <PlateElement className="my-px rounded-sm" {...props}>
+        <div
+          className="group relative m-0 flex cursor-pointer items-center rounded px-0.5 py-[3px] transition-bg-ease hover:bg-muted"
+          contentEditable={false}
+          onClick={onDownload}
+          role="button">
+          <div className="flex items-center gap-1 p-1">
+            <FileUpIcon className="size-5" />
+            <div>{name}</div>
+          </div>
+
+          <Caption align="left">
+            <CaptionTextarea
+              className="text-left"
+              placeholder="Write a caption..."
+              readOnly={readOnly} />
+          </Caption>
+
+          <BlockActionButton className="-translate-y-1/2 top-1/2" />
+        </div>
+
+        {props.children}
+      </PlateElement>
+    );
+  }
+);

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

@@ -0,0 +1,37 @@
+
+import {
+  type TCaptionElement, type TImageElement, type TResizableProps, NodeApi
+} from 'platejs';
+
+import { SlateElement, type SlateElementProps } from 'platejs/static';
+
+export function ImageElementStatic(
+  props: SlateElementProps<TImageElement & TCaptionElement & TResizableProps>
+) {
+  const {
+    align = 'center', caption, url, width
+  } = props.element;
+
+  return (
+    <SlateElement className="py-2.5" {...props}>
+      <figure className="group relative m-0 inline-block">
+        <div
+          className="relative min-w-[92px] max-w-full"
+          style={{ textAlign: align }}>
+          <div className="inline-block" style={{ width }}>
+            <img
+              alt={(props.attributes as any).alt}
+              className="w-full max-w-full cursor-default rounded-sm object-cover px-0"
+              src={url} />
+            {caption && (
+              <figcaption className="mx-auto mt-2 h-[24px] max-w-full">
+                {NodeApi.string(caption[0])}
+              </figcaption>
+            )}
+          </div>
+        </div>
+      </figure>
+      {props.children}
+    </SlateElement>
+  );
+}

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

@@ -0,0 +1,183 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { type TImageElement } from 'platejs';
+
+import { useDraggable } from '@platejs/dnd';
+import {
+  PlaceholderPlugin,
+  useImage,
+  useMediaState
+} from '@platejs/media/react';
+import { ResizableProvider, useResizableValue } from '@platejs/resizable';
+import {
+  PlateElement,
+  type PlateElementProps,
+  useEditorPlugin,
+  withHOC
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { blockSelectionVariants } from './block-selection';
+import { Caption, CaptionTextarea } from './caption';
+import { MediaToolbar } from './media-toolbar';
+import {
+  mediaResizeHandleVariants,
+  Resizable,
+  ResizeHandle
+} from './resize-handle';
+
+export const ImageElement = withHOC(
+  ResizableProvider,
+  (props: PlateElementProps<TImageElement>) => {
+    const { api, editor } = useEditorPlugin(PlaceholderPlugin);
+
+    const print = editor.meta.mode === 'print';
+
+    const { element } = props;
+
+    const currentUploadingFile = useMemo(() => {
+      if (!element.placeholderId) return;
+
+      return api.placeholder.getUploadingFile(element.placeholderId);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [element.placeholderId]);
+
+    const {
+      align = 'center', focused, readOnly, selected
+    } = useMediaState();
+
+    const [loading, setLoading] = useState(true);
+
+    const width = useResizableValue('width');
+
+    const { props: imageProps } = useImage();
+
+    const height = useMemo<number | null>(() => {
+      if (print) return null;
+      if (!element.initialHeight || !element.initialWidth) {
+        // Embed image we don't have height and width using 200 by default
+        return loading ? 200 : null;
+      }
+      if (typeof width !== 'number' || width === 0)
+        return Number(element.initialHeight.toFixed(2));
+
+      const aspectRatio = Number(
+        (element.initialWidth! / element.initialHeight!).toFixed(2)
+      );
+
+      return Number((width / aspectRatio).toFixed(2));
+    }, [
+      element.initialHeight,
+      element.initialWidth,
+      loading,
+      print,
+      width
+    ]);
+
+    const { isDragging, handleRef } = useDraggable({
+      element: props.element
+    });
+
+    return (
+      <PlateElement className="my-1" {...props}>
+        <figure className="relative m-0" contentEditable={false}>
+          <Resizable
+            align={align}
+            options={{
+              align,
+              readOnly
+            }}>
+            <div className="group/media">
+              <ResizeHandle
+                className={mediaResizeHandleVariants({ direction: 'left' })}
+                options={{ direction: 'left' }} />
+              <ResizeHandle
+                className={mediaResizeHandleVariants({ direction: 'right' })}
+                options={{ direction: 'right' }} />
+
+              <div
+                className={cn(
+                  'relative block w-full max-w-full cursor-pointer object-cover px-0',
+                  blockSelectionVariants({ active: focused && selected }),
+                  'group-has-data-[resizing=true]/media:before:opacity-0'
+                )}
+                style={{
+                  height: height ? `${height}px` : 'auto'
+                }}>
+                {print ? (
+                  <img
+                    alt=""
+                    className={cn('h-full rounded-xs')}
+                    height="auto"
+                    width="100%"
+                    {...imageProps} />
+                ) : (
+                  <img
+                    className={cn(
+                      'h-full w-full rounded-xs opacity-100',
+                      loading && 'opacity-0',
+                      isDragging && 'opacity-50'
+                    )}
+                    height="auto"
+                    onLoad={() => {
+                      setLoading(false);
+                      if (currentUploadingFile) {
+                        api.placeholder.removeUploadingFile(
+                          props.element.fromPlaceholderId as string
+                        );
+                      }
+                    }}
+                    width="100%"
+                    ref={handleRef as any}
+                    {...imageProps} />
+                )}
+
+                {loading && <ImagePlaceholder file={currentUploadingFile} />}
+              </div>
+
+              <MediaToolbar />
+            </div>
+          </Resizable>
+
+          <Caption align={align} style={{ width }}>
+            <CaptionTextarea
+              onFocus={(e) => {
+                e.preventDefault();
+              }}
+              placeholder="Write a caption..."
+              readOnly={readOnly} />
+          </Caption>
+        </figure>
+
+        {props.children}
+      </PlateElement>
+    );
+  }
+);
+
+const ImagePlaceholder = ({ file }: { file?: File }) => {
+  const objectUrl = useMemo(
+    () => (file ? URL.createObjectURL(file) : null),
+    [file]
+  );
+
+  useEffect(() => {
+    if (!objectUrl) return;
+
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [objectUrl]);
+
+  return (
+    <div className="absolute inset-0 overflow-hidden bg-[rgb(247,246,245)] before:absolute before:inset-0 before:z-10 before:animate-shimmer before:bg-linear-to-r before:from-transparent before:via-gray-200/50 before:to-transparent">
+      {file && objectUrl && (
+        <img
+          alt={file.name}
+          className="h-auto w-full rounded-xs object-cover"
+          src={objectUrl} />
+      )}
+    </div>
+  );
+};