Merge pull request #3289 from udecode/sync

sync

.changeset/clever-waves-deliver.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-selection": patch
+---
+
+Fix: can't close menu in production build

.changeset/kind-buttons-cross.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-caption": minor
+---
+
+Add `showCaption` utils

.changeset/twelve-hotels-destroy.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-math": minor
+---
+
+Add `inline-equation` toolbar button

.changeset/wicked-walls-dream.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-media": minor
+---
+
+Add image preview

apps/www/src/components/icons.tsx

@@ -8,6 +8,7 @@ import {
   AlignJustify,
   AlignLeft,
   AlignRight,
+  ArrowLeft,
   ArrowRight,
   Baseline,
   Bold,
@@ -20,6 +21,7 @@ import {
   Code2,
   Combine,
   Copy,
+  Download,
   DownloadCloud,
   ExternalLink,
   Eye,
@@ -380,6 +382,7 @@ export const Icons = {
   alignLeft: AlignLeft,
   alignRight: AlignRight,
   arrowDown: ChevronDown,
+  arrowLeft: ArrowLeft,
   arrowRight: ArrowRight,
   attachment: Paperclip,
   bg: PaintBucket,
@@ -413,6 +416,7 @@ export const Icons = {
   discord,
   doubleColumn: DoubleColumnOutlined,
   doubleSideDoubleColumn: DoubleSideDoubleColumnOutlined,
+  downLoad: Download,
   downloadCloud: DownloadCloud,
   dragHandle: GripVertical,
   editing: Pen,

apps/www/src/registry/default/example/playground-demo.tsx

@@ -128,6 +128,8 @@ import {
   TodoMarker,
 } from '@/registry/default/plate-ui/indent-todo-marker-component';
 
+import { ImagePreview } from '../plate-ui/image-preview';
+
 export const usePlaygroundPlugins = ({
   components = createPlateUI(),
   id,
@@ -166,7 +168,10 @@ export const usePlaygroundPlugins = ({
           createListPlugin({
             enabled: id === 'list' || !!enabled.list,
           }),
-          createImagePlugin({ enabled: !!enabled.img }),
+          createImagePlugin({
+            enabled: !!enabled.img,
+            renderAfterEditable: ImagePreview,
+          }),
           createMediaEmbedPlugin({ enabled: !!enabled.media_embed }),
           createCaptionPlugin({ ...captionPlugin, enabled: !!enabled.caption }),
           createMentionPlugin({

apps/www/src/registry/default/plate-ui/image-preview.tsx

@@ -0,0 +1,148 @@
+import { cn, createPrimitiveComponent } from '@udecode/cn';
+import {
+  PreviewImage,
+  useImagePreview,
+  useImagePreviewState,
+  useScaleInput,
+  useScaleInputState,
+} from '@udecode/plate-media';
+import { cva } from 'class-variance-authority';
+
+import { Icons } from '@/components/icons';
+
+const toolButtonVariants = cva('rounded bg-[rgba(0,0,0,0.5)] px-1', {
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: {
+      default: 'text-white',
+      disabled: 'cursor-not-allowed text-gray-400',
+    },
+  },
+});
+
+const ScaleInput = createPrimitiveComponent('input')({
+  propsHook: useScaleInput,
+  stateHook: useScaleInputState,
+});
+
+const SCROLL_SPEED = 4;
+
+export const ImagePreview = () => {
+  const state = useImagePreviewState({ scrollSpeed: SCROLL_SPEED });
+
+  const {
+    closeProps,
+    currentUrlIndex,
+    maskLayerProps,
+    nextDisabled,
+    nextProps,
+    prevDisabled,
+    prevProps,
+    scaleTextProps,
+    zommOutProps,
+    zoomInDisabled,
+    zoomInProps,
+    zoomOutDisabled,
+  } = useImagePreview(state);
+
+  const { isOpen, scale } = state;
+
+  return (
+    <div
+      className={cn(
+        'fixed left-0 top-0 z-50 h-screen w-screen',
+        !isOpen && 'hidden'
+      )}
+      {...maskLayerProps}
+    >
+      <div className="absolute inset-0 size-full bg-black opacity-30"></div>
+      <div className="absolute inset-0 size-full bg-black opacity-30"></div>
+      <div className="absolute inset-0 flex items-center justify-center ">
+        <div className="relative flex max-h-screen w-full items-center">
+          <PreviewImage
+            className={cn(
+              'mx-auto block max-h-[calc(100vh-4rem)] w-auto object-contain transition-transform'
+            )}
+          />
+          <div
+            className="absolute bottom-0 left-1/2 z-40 flex w-fit -translate-x-1/2 justify-center gap-4 p-2 text-center text-white"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex gap-1 ">
+              <button
+                {...prevProps}
+                className={cn(
+                  toolButtonVariants({
+                    variant: prevDisabled ? 'disabled' : 'default',
+                  })
+                )}
+                type="button"
+              >
+                <Icons.arrowLeft className="size-5" />
+              </button>
+              {(currentUrlIndex ?? 0) + 1}
+              <button
+                {...nextProps}
+                className={cn(
+                  toolButtonVariants({
+                    variant: nextDisabled ? 'disabled' : 'default',
+                  })
+                )}
+                type="button"
+              >
+                <Icons.arrowRight className="size-5" />
+              </button>
+            </div>
+            <div className="flex ">
+              <button
+                className={cn(
+                  toolButtonVariants({
+                    variant: zoomOutDisabled ? 'disabled' : 'default',
+                  })
+                )}
+                {...zommOutProps}
+                type="button"
+              >
+                <Icons.minus className="size-4" />
+              </button>
+              <div className="mx-px">
+                {state.isEditingScale ? (
+                  <>
+                    <ScaleInput className="w-10 rounded px-1 text-slate-500 outline" />{' '}
+                    <span>%</span>
+                  </>
+                ) : (
+                  <span {...scaleTextProps}>{scale * 100 + '%'}</span>
+                )}
+              </div>
+              <button
+                className={cn(
+                  toolButtonVariants({
+                    variant: zoomInDisabled ? 'disabled' : 'default',
+                  })
+                )}
+                {...zoomInProps}
+                type="button"
+              >
+                <Icons.add className="size-4" />
+              </button>
+            </div>
+            {/* TODO: downLoad the image */}
+            <button className={cn(toolButtonVariants())} type="button">
+              <Icons.downLoad className="size-4" />
+            </button>
+            <button
+              {...closeProps}
+              className={cn(toolButtonVariants())}
+              type="button"
+            >
+              <Icons.close className="size-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/caption/src/index.ts

@@ -9,3 +9,4 @@ export * from './onKeyDownCaption';
 export * from './withCaption';
 export * from './components/index';
 export * from './hooks/index';
+export * from './utils/index';

packages/caption/src/utils/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './showCaption';

packages/caption/src/utils/showCaption.ts

@@ -0,0 +1,16 @@
+import {
+  type PlateEditor,
+  type TElement,
+  findNodePath,
+} from '@udecode/plate-common';
+
+import { captionActions, captionGlobalStore } from '../captionGlobalStore';
+
+export const showCaption = (editor: PlateEditor, element: TElement) => {
+  const path = findNodePath(editor, element);
+  captionActions.showCaptionId(element.id as string);
+
+  setTimeout(() => {
+    path && captionGlobalStore.set.focusEndCaptionPath(path);
+  }, 0);
+};

packages/core/src/shared/plugins/event-editor/index.ts

@@ -2,8 +2,8 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './constants';
 export * from './createEventEditorPlugin';
 export * from './eventEditorStore';
 export * from './getEventPlateId';
-
 export * from './useFocusEditorEvents';

packages/math/src/equation/components/EquationInput.ts

@@ -46,7 +46,7 @@ export const useEquationInput = ({
           addSelectedRow(editor, element.id as string);
         }
       },
-      onMouseEnter: (e: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) => {
+      onMouseEnter: () => {
         inputRef.current?.focus();
       },
       ref: inputRef,

packages/math/src/inline-equation/components/index.ts

@@ -4,3 +4,4 @@
 
 export * from './InlineEquationButton';
 export * from './InlineEquationInput';
+export * from './useInlineEquationToolbarButton';

packages/math/src/inline-equation/components/useInlineEquationToolbarButton.ts

@@ -0,0 +1,22 @@
+import { getSelectionText, useEditorRef } from '@udecode/plate-common';
+
+import { insertInlineEquation } from '../transforms';
+
+export const useInlineToolbarButtonState = () => {
+  const editor = useEditorRef();
+
+  return { editor };
+};
+
+export const useInlineToolbarButton = ({
+  editor,
+}: ReturnType<typeof useInlineToolbarButtonState>) => {
+  return {
+    props: {
+      onClick: () => {
+        const texExpression = getSelectionText(editor);
+        insertInlineEquation(editor, texExpression);
+      },
+    },
+  };
+};

packages/math/src/inline-equation/transforms/insertInlineEquation.ts

@@ -11,13 +11,14 @@ import { ELEMENT_INLINE_EQUATION } from '../createInlineEquationPlugin';
 
 export const insertInlineEquation = <V extends Value>(
   editor: PlateEditor<V>,
+  texExpression?: string,
   options?: InsertNodesOptions<V>
 ) => {
   insertNodes<TInlineEquationElement>(
     editor,
     {
       children: [{ text: '' }],
-      texExpression: '',
+      texExpression: texExpression ?? '',
       type: ELEMENT_INLINE_EQUATION,
     },
     options as any

packages/media/src/image/components/Image.tsx

@@ -1,14 +1,24 @@
-import { createPrimitiveComponent, useElement } from '@udecode/plate-common';
+import {
+  createPrimitiveComponent,
+  useEditorRef,
+  useElement,
+} from '@udecode/plate-common';
 
-import type { TMediaElement } from '../../media/index';
+import type { TMediaElement } from '../../media';
+
+import { openImagePreView } from '../utils';
 
 export const useImage = () => {
-  const { url } = useElement<TMediaElement>();
+  const element = useElement<TMediaElement>();
+  const editor = useEditorRef();
 
   return {
     props: {
       draggable: true,
-      src: url,
+      onDoubleClickCapture: () => {
+        openImagePreView(editor, element);
+      },
+      src: element.url,
     },
   };
 };