Merge pull request #4100 from udecode/registry

Update Registry

Author: zbeyens

apps/www/public/r/styles/default/image-preview.json

@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "plate-ui/image-preview.tsx",
-      "content": "'use client';\n\nimport { cn } from '@udecode/cn';\nimport {\n  PreviewImage,\n  useImagePreview,\n  useImagePreviewValue,\n  useScaleInput,\n} from '@udecode/plate-media/react';\nimport { useEditorRef } from '@udecode/plate/react';\nimport { cva } from 'class-variance-authority';\nimport { ArrowLeft, ArrowRight, Download, Minus, Plus, X } from 'lucide-react';\n\nconst toolButtonVariants = cva('rounded bg-[rgba(0,0,0,0.5)] px-1', {\n  defaultVariants: {\n    variant: 'default',\n  },\n  variants: {\n    variant: {\n      default: 'text-white',\n      disabled: 'cursor-not-allowed text-gray-400',\n    },\n  },\n});\n\nconst SCROLL_SPEED = 4;\n\nexport const ImagePreview = () => {\n  const editor = useEditorRef();\n  const isOpen = useImagePreviewValue('isOpen', editor.id);\n  const scale = useImagePreviewValue('scale');\n  const isEditingScale = useImagePreviewValue('isEditingScale');\n  const {\n    closeProps,\n    currentUrlIndex,\n    maskLayerProps,\n    nextDisabled,\n    nextProps,\n    prevDisabled,\n    prevProps,\n    scaleTextProps,\n    zommOutProps,\n    zoomInDisabled,\n    zoomInProps,\n    zoomOutDisabled,\n  } = useImagePreview({ scrollSpeed: SCROLL_SPEED });\n\n  return (\n    <div\n      className={cn(\n        'fixed top-0 left-0 z-50 h-screen w-screen',\n        !isOpen && 'hidden'\n      )}\n      {...maskLayerProps}\n    >\n      <div className=\"absolute inset-0 size-full bg-black opacity-30\"></div>\n      <div className=\"absolute inset-0 size-full bg-black opacity-30\"></div>\n      <div className=\"absolute inset-0 flex items-center justify-center\">\n        <div className=\"relative flex max-h-screen w-full items-center\">\n          <PreviewImage\n            className={cn(\n              'mx-auto block max-h-[calc(100vh-4rem)] w-auto object-contain transition-transform'\n            )}\n          />\n          <div\n            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\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div className=\"flex gap-1\">\n              <button\n                {...prevProps}\n                className={cn(\n                  toolButtonVariants({\n                    variant: prevDisabled ? 'disabled' : 'default',\n                  })\n                )}\n                type=\"button\"\n              >\n                <ArrowLeft />\n              </button>\n              {(currentUrlIndex ?? 0) + 1}\n              <button\n                {...nextProps}\n                className={cn(\n                  toolButtonVariants({\n                    variant: nextDisabled ? 'disabled' : 'default',\n                  })\n                )}\n                type=\"button\"\n              >\n                <ArrowRight />\n              </button>\n            </div>\n            <div className=\"flex\">\n              <button\n                className={cn(\n                  toolButtonVariants({\n                    variant: zoomOutDisabled ? 'disabled' : 'default',\n                  })\n                )}\n                {...zommOutProps}\n                type=\"button\"\n              >\n                <Minus className=\"size-4\" />\n              </button>\n              <div className=\"mx-px\">\n                {isEditingScale ? (\n                  <>\n                    <ScaleInput className=\"w-10 rounded px-1 text-slate-500 outline\" />{' '}\n                    <span>%</span>\n                  </>\n                ) : (\n                  <span {...scaleTextProps}>{scale * 100 + '%'}</span>\n                )}\n              </div>\n              <button\n                className={cn(\n                  toolButtonVariants({\n                    variant: zoomInDisabled ? 'disabled' : 'default',\n                  })\n                )}\n                {...zoomInProps}\n                type=\"button\"\n              >\n                <Plus className=\"size-4\" />\n              </button>\n            </div>\n            {/* TODO: downLoad the image */}\n            <button className={cn(toolButtonVariants())} type=\"button\">\n              <Download className=\"size-4\" />\n            </button>\n            <button\n              {...closeProps}\n              className={cn(toolButtonVariants())}\n              type=\"button\"\n            >\n              <X className=\"size-4\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport function ScaleInput(props: React.ComponentProps<'input'>) {\n  const { props: scaleInputProps, ref } = useScaleInput();\n\n  return <input {...scaleInputProps} {...props} ref={ref} />;\n}\n",
+      "content": "'use client';\n\nimport { cn } from '@udecode/cn';\nimport {\n  PreviewImage,\n  useImagePreview,\n  useImagePreviewValue,\n  useScaleInput,\n} from '@udecode/plate-media/react';\nimport { useEditorRef } from '@udecode/plate/react';\nimport { cva } from 'class-variance-authority';\nimport { ArrowLeft, ArrowRight, Download, Minus, Plus, X } from 'lucide-react';\n\nconst toolButtonVariants = cva('rounded bg-[rgba(0,0,0,0.5)] px-1', {\n  defaultVariants: {\n    variant: 'default',\n  },\n  variants: {\n    variant: {\n      default: 'text-white',\n      disabled: 'cursor-not-allowed text-gray-400',\n    },\n  },\n});\n\nconst SCROLL_SPEED = 4;\n\nexport const ImagePreview = () => {\n  const editor = useEditorRef();\n  const isOpen = useImagePreviewValue('isOpen', editor.id);\n  const scale = useImagePreviewValue('scale');\n  const isEditingScale = useImagePreviewValue('isEditingScale');\n  const {\n    closeProps,\n    currentUrlIndex,\n    maskLayerProps,\n    nextDisabled,\n    nextProps,\n    prevDisabled,\n    prevProps,\n    scaleTextProps,\n    zommOutProps,\n    zoomInDisabled,\n    zoomInProps,\n    zoomOutDisabled,\n  } = useImagePreview({ scrollSpeed: SCROLL_SPEED });\n\n  return (\n    <div\n      className={cn(\n        'fixed top-0 left-0 z-50 h-screen w-screen select-none',\n        !isOpen && 'hidden'\n      )}\n      onContextMenu={(e) => e.stopPropagation()}\n      {...maskLayerProps}\n    >\n      <div className=\"absolute inset-0 size-full bg-black opacity-30\"></div>\n      <div className=\"absolute inset-0 size-full bg-black opacity-30\"></div>\n      <div className=\"absolute inset-0 flex items-center justify-center\">\n        <div className=\"relative flex max-h-screen w-full items-center\">\n          <PreviewImage\n            className={cn(\n              'mx-auto block max-h-[calc(100vh-4rem)] w-auto object-contain transition-transform'\n            )}\n          />\n          <div\n            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\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div className=\"flex gap-1\">\n              <button\n                {...prevProps}\n                className={cn(\n                  toolButtonVariants({\n                    variant: prevDisabled ? 'disabled' : 'default',\n                  })\n                )}\n                type=\"button\"\n              >\n                <ArrowLeft />\n              </button>\n              {(currentUrlIndex ?? 0) + 1}\n              <button\n                {...nextProps}\n                className={cn(\n                  toolButtonVariants({\n                    variant: nextDisabled ? 'disabled' : 'default',\n                  })\n                )}\n                type=\"button\"\n              >\n                <ArrowRight />\n              </button>\n            </div>\n            <div className=\"flex\">\n              <button\n                className={cn(\n                  toolButtonVariants({\n                    variant: zoomOutDisabled ? 'disabled' : 'default',\n                  })\n                )}\n                {...zommOutProps}\n                type=\"button\"\n              >\n                <Minus className=\"size-4\" />\n              </button>\n              <div className=\"mx-px\">\n                {isEditingScale ? (\n                  <>\n                    <ScaleInput className=\"w-10 rounded px-1 text-slate-500 outline\" />{' '}\n                    <span>%</span>\n                  </>\n                ) : (\n                  <span {...scaleTextProps}>{scale * 100 + '%'}</span>\n                )}\n              </div>\n              <button\n                className={cn(\n                  toolButtonVariants({\n                    variant: zoomInDisabled ? 'disabled' : 'default',\n                  })\n                )}\n                {...zoomInProps}\n                type=\"button\"\n              >\n                <Plus className=\"size-4\" />\n              </button>\n            </div>\n            {/* TODO: downLoad the image */}\n            <button className={cn(toolButtonVariants())} type=\"button\">\n              <Download className=\"size-4\" />\n            </button>\n            <button\n              {...closeProps}\n              className={cn(toolButtonVariants())}\n              type=\"button\"\n            >\n              <X className=\"size-4\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport function ScaleInput(props: React.ComponentProps<'input'>) {\n  const { props: scaleInputProps, ref } = useScaleInput();\n\n  return <input {...scaleInputProps} {...props} ref={ref} />;\n}\n",
       "type": "registry:ui",
       "target": "components/plate-ui/image-preview.tsx"
     }

apps/www/public/r/styles/default/media-popover.json

@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "plate-ui/media-popover.tsx",
-      "content": "'use client';\n\nimport React, { useEffect } from 'react';\n\nimport type { WithRequiredKey } from '@udecode/plate';\n\nimport {\n  FloatingMedia as FloatingMediaPrimitive,\n  FloatingMediaStore,\n  useFloatingMediaValue,\n} from '@udecode/plate-media/react';\nimport {\n  useEditorSelector,\n  useElement,\n  useReadOnly,\n  useRemoveNodeButton,\n  useSelected,\n} from '@udecode/plate/react';\nimport { Link, Trash2Icon } from 'lucide-react';\n\nimport { Button, buttonVariants } from './button';\nimport { CaptionButton } from './caption';\nimport { inputVariants } from './input';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport interface MediaPopoverProps {\n  children: React.ReactNode;\n  plugin: WithRequiredKey;\n}\n\nexport function MediaPopover({ children, plugin }: MediaPopoverProps) {\n  const readOnly = useReadOnly();\n  const selected = useSelected();\n\n  const selectionCollapsed = useEditorSelector(\n    (editor) => !editor.api.isExpanded(),\n    []\n  );\n  const isOpen = !readOnly && selected && selectionCollapsed;\n  const isEditing = useFloatingMediaValue('isEditing');\n\n  useEffect(() => {\n    if (!isOpen && isEditing) {\n      FloatingMediaStore.set('isEditing', false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const element = useElement();\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  if (readOnly) return <>{children}</>;\n\n  return (\n    <Popover open={isOpen} modal={false}>\n      <PopoverAnchor>{children}</PopoverAnchor>\n\n      <PopoverContent\n        className=\"w-auto p-1\"\n        onOpenAutoFocus={(e) => e.preventDefault()}\n      >\n        {isEditing ? (\n          <div className=\"flex w-[330px] flex-col\">\n            <div className=\"flex items-center\">\n              <div className=\"flex items-center pr-1 pl-2 text-muted-foreground\">\n                <Link className=\"size-4\" />\n              </div>\n\n              <FloatingMediaPrimitive.UrlInput\n                className={inputVariants({ h: 'sm', variant: 'ghost' })}\n                placeholder=\"Paste the embed link...\"\n                options={{ plugin }}\n              />\n            </div>\n          </div>\n        ) : (\n          <div className=\"box-content flex items-center\">\n            <FloatingMediaPrimitive.EditButton\n              className={buttonVariants({ size: 'sm', variant: 'ghost' })}\n            >\n              Edit link\n            </FloatingMediaPrimitive.EditButton>\n\n            <CaptionButton variant=\"ghost\">Caption</CaptionButton>\n\n            <Separator orientation=\"vertical\" className=\"mx-1 h-6\" />\n\n            <Button size=\"icon\" variant=\"ghost\" {...buttonProps}>\n              <Trash2Icon />\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
+      "content": "'use client';\n\nimport React, { useEffect } from 'react';\n\nimport type { WithRequiredKey } from '@udecode/plate';\n\nimport {\n  FloatingMedia as FloatingMediaPrimitive,\n  FloatingMediaStore,\n  useFloatingMediaValue,\n  useImagePreviewValue,\n} from '@udecode/plate-media/react';\nimport {\n  useEditorRef,\n  useEditorSelector,\n  useElement,\n  useReadOnly,\n  useRemoveNodeButton,\n  useSelected,\n} from '@udecode/plate/react';\nimport { Link, Trash2Icon } from 'lucide-react';\n\nimport { Button, buttonVariants } from './button';\nimport { CaptionButton } from './caption';\nimport { inputVariants } from './input';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport interface MediaPopoverProps {\n  children: React.ReactNode;\n  plugin: WithRequiredKey;\n}\n\nexport function MediaPopover({ children, plugin }: MediaPopoverProps) {\n  const editor = useEditorRef();\n  const readOnly = useReadOnly();\n  const selected = useSelected();\n\n  const selectionCollapsed = useEditorSelector(\n    (editor) => !editor.api.isExpanded(),\n    []\n  );\n  const isImagePreviewOpen = useImagePreviewValue('isOpen', editor.id);\n  const isOpen =\n    !readOnly && selected && selectionCollapsed && !isImagePreviewOpen;\n  const isEditing = useFloatingMediaValue('isEditing');\n\n  useEffect(() => {\n    if (!isOpen && isEditing) {\n      FloatingMediaStore.set('isEditing', false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const element = useElement();\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  if (readOnly) return <>{children}</>;\n\n  return (\n    <Popover open={isOpen} modal={false}>\n      <PopoverAnchor>{children}</PopoverAnchor>\n\n      <PopoverContent\n        className=\"w-auto p-1\"\n        onOpenAutoFocus={(e) => e.preventDefault()}\n      >\n        {isEditing ? (\n          <div className=\"flex w-[330px] flex-col\">\n            <div className=\"flex items-center\">\n              <div className=\"flex items-center pr-1 pl-2 text-muted-foreground\">\n                <Link className=\"size-4\" />\n              </div>\n\n              <FloatingMediaPrimitive.UrlInput\n                className={inputVariants({ h: 'sm', variant: 'ghost' })}\n                placeholder=\"Paste the embed link...\"\n                options={{ plugin }}\n              />\n            </div>\n          </div>\n        ) : (\n          <div className=\"box-content flex items-center\">\n            <FloatingMediaPrimitive.EditButton\n              className={buttonVariants({ size: 'sm', variant: 'ghost' })}\n            >\n              Edit link\n            </FloatingMediaPrimitive.EditButton>\n\n            <CaptionButton variant=\"ghost\">Caption</CaptionButton>\n\n            <Separator orientation=\"vertical\" className=\"mx-1 h-6\" />\n\n            <Button size=\"icon\" variant=\"ghost\" {...buttonProps}>\n              <Trash2Icon />\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/plate-ui/media-popover.tsx"
     }