Merge pull request udecode#2593 from udecode/fix/ui-link

UI #4.1

.changeset/rotten-cobras-hang.md

@@ -0,0 +1,6 @@
+---
+"@udecode/plate-utils": minor
+---
+
+- New prop in `createPrimitiveComponent`: `setProps` where the first parameter is the props returned by the "props hook". Returned attributes are passed to the component. You can use this prop to merge or override all props.
+- Plate components `className` and `style` props are now merged with the "props hook" ones if defined. To override instead of merging, use `setProps`.

apps/www/content/docs/components/changelog.mdx

@@ -4,9 +4,20 @@ description: Latest component updates and announcements.
 toc: true
 ---
 
-Since Plate UI is not a component library, a changelog is maintained here. 
+Since Plate UI is not a component library, a changelog is maintained here.
 
-Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components. 
+Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components.
+
+## September 2023 #4
+
+### 2 Sept #4.1
+
+- `link-floating-toolbar`
+  - [fix](https://github.com/udecode/plate/pull/2593/files#diff-bd61ef4cfdcfe9401df0307a461ac13dce507b178d8e9a7ed693cb36453e9202): props type
+- `media-embed-element`
+  - [fix](https://github.com/udecode/plate/pull/2593/files#diff-13ddd3e18dbdc399e507d7bb512e0f592fba062a36bca14d66d39069773617bdR54): use `align` option
+- `caption`
+  - fix: `style` prop
 
 ## August 2023 #3
 
@@ -48,23 +59,24 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 - `caption` - new component
 - `image-element`:
   - refactor: state
-  - new registry deps: `caption`, `resizable` 
+  - new registry deps: `caption`, `resizable`
 - `media-embed-element` is now fully headless:
   - new deps: `react-lite-youtube-embed`, `react-tweet` to decrease the bundle size
-  - new registry deps: `caption`, `resizable` 
+  - new registry deps: `caption`, `resizable`
 - `media-popover` - fix: popover closing
 - `resizable` - new component
 - `table-element` - fix: popover closing
 
 ### 17 July #2.1
 
 - `comments-popover` - fix: popover not opening on new comment
-- `comment-toolbar-button` - feat: hide when `myUserId` is null 
+- `comment-toolbar-button` - feat: hide when `myUserId` is null
 - `excalidraw-element` - fix: typo
 
 ### Launch #1
 
 Plate headless components are now available:
+
 - [Manual Installation](https://platejs.org/docs/components/installation/manual)
 - [Theming](https://platejs.org/docs/components/theming)
-- [CLI](https://platejs.org/docs/components/cli)
+- [CLI](https://platejs.org/docs/components/cli)

apps/www/public/registry/styles/default/caption.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "caption.tsx",
-      "content": "import React, { ComponentProps } from 'react';\nimport {\n  Caption as CaptionPrimitive,\n  CaptionTextarea as CaptionTextareaPrimitive,\n} from '@udecode/plate-caption';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst captionVariants = cva('max-w-full', {\n  variants: {\n    align: {\n      left: 'mr-auto',\n      center: 'mx-auto',\n      right: 'ml-auto',\n    },\n  },\n  defaultVariants: {\n    align: 'center',\n  },\n});\n\nconst Caption = React.forwardRef<\n  React.ElementRef<typeof CaptionPrimitive>,\n  ComponentProps<typeof CaptionPrimitive> & VariantProps<typeof captionVariants>\n>(({ className, style, align, ...props }, ref) => (\n  <CaptionPrimitive\n    ref={ref}\n    className={cn(captionVariants({ align }), className)}\n    {...props}\n  />\n));\nCaption.displayName = 'Caption';\n\nconst CaptionTextarea = React.forwardRef<\n  React.ElementRef<typeof CaptionTextareaPrimitive>,\n  ComponentProps<typeof CaptionTextareaPrimitive>\n>(({ className, ...props }, ref) => (\n  <CaptionTextareaPrimitive\n    ref={ref}\n    className={cn(\n      'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',\n      'focus:outline-none focus:[&::placeholder]:opacity-0',\n      'text-center',\n      className\n    )}\n    {...props}\n  />\n));\nCaptionTextarea.displayName = 'CaptionTextarea';\n\nexport { Caption, CaptionTextarea };\n"
+      "content": "import React, { ComponentProps } from 'react';\nimport {\n  Caption as CaptionPrimitive,\n  CaptionTextarea as CaptionTextareaPrimitive,\n} from '@udecode/plate-caption';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst captionVariants = cva('max-w-full', {\n  variants: {\n    align: {\n      left: 'mr-auto',\n      center: 'mx-auto',\n      right: 'ml-auto',\n    },\n  },\n  defaultVariants: {\n    align: 'center',\n  },\n});\n\nconst Caption = React.forwardRef<\n  React.ElementRef<typeof CaptionPrimitive>,\n  ComponentProps<typeof CaptionPrimitive> & VariantProps<typeof captionVariants>\n>(({ className, align, ...props }, ref) => (\n  <CaptionPrimitive\n    ref={ref}\n    className={cn(captionVariants({ align }), className)}\n    {...props}\n  />\n));\nCaption.displayName = 'Caption';\n\nconst CaptionTextarea = React.forwardRef<\n  React.ElementRef<typeof CaptionTextareaPrimitive>,\n  ComponentProps<typeof CaptionTextareaPrimitive>\n>(({ className, ...props }, ref) => (\n  <CaptionTextareaPrimitive\n    ref={ref}\n    className={cn(\n      'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',\n      'focus:outline-none focus:[&::placeholder]:opacity-0',\n      'text-center',\n      className\n    )}\n    {...props}\n  />\n));\nCaptionTextarea.displayName = 'CaptionTextarea';\n\nexport { Caption, CaptionTextarea };\n"
     }
   ],
   "type": "components:plate-ui"

apps/www/public/registry/styles/default/floating-toolbar.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "floating-toolbar.tsx",
-      "content": "import React, { ReactNode } from 'react';\nimport { flip, offset } from '@floating-ui/react';\nimport { PortalBody, useComposedRef } from '@udecode/plate-common';\nimport {\n  useFloatingToolbar,\n  UseVirtualFloatingOptions,\n} from '@udecode/plate-floating';\n\nimport { cn } from '@/lib/utils';\n\nimport { Toolbar, ToolbarProps } from './toolbar';\n\nexport interface FloatingToolbarProps extends ToolbarProps {\n  children: ReactNode;\n\n  floatingOptions?: UseVirtualFloatingOptions;\n\n  ignoreReadOnly?: boolean;\n\n  hideToolbar?: boolean;\n}\n\nconst FloatingToolbar = React.forwardRef<\n  React.ElementRef<typeof Toolbar>,\n  FloatingToolbarProps\n>(\n  (\n    { floatingOptions, ignoreReadOnly, hideToolbar, children, ...props },\n    _ref\n  ) => {\n    const { refs, style, open } = useFloatingToolbar({\n      floatingOptions: {\n        placement: 'top',\n        middleware: [\n          offset(12),\n          flip({\n            padding: 12,\n            fallbackPlacements: [\n              'top-start',\n              'top-end',\n              'bottom-start',\n              'bottom-end',\n            ],\n          }),\n        ],\n      },\n      ignoreReadOnly,\n      hideToolbar,\n    });\n\n    const ref = useComposedRef<HTMLDivElement>(_ref, refs.setFloating);\n\n    if (!open) return null;\n\n    return (\n      <PortalBody>\n        <Toolbar\n          ref={ref}\n          className={cn(\n            'absolute z-50 whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md'\n          )}\n          style={style}\n          {...props}\n        >\n          {children}\n        </Toolbar>\n      </PortalBody>\n    );\n  }\n);\nFloatingToolbar.displayName = 'FloatingToolbar';\n\nexport { FloatingToolbar };\n"
+      "content": "import React from 'react';\nimport { flip, offset } from '@floating-ui/react';\nimport { PortalBody, useComposedRef } from '@udecode/plate-common';\nimport {\n  useFloatingToolbar,\n  useFloatingToolbarState,\n} from '@udecode/plate-floating';\nimport { FloatingToolbarState } from '@udecode/plate-floating/dist';\n\nimport { cn } from '@/lib/utils';\n\nimport { Toolbar, ToolbarProps } from './toolbar';\n\nexport interface FloatingToolbarProps extends ToolbarProps {\n  state?: FloatingToolbarState;\n}\n\nconst FloatingToolbar = React.forwardRef<\n  React.ElementRef<typeof Toolbar>,\n  FloatingToolbarProps\n>(({ state, children, ...props }, componentRef) => {\n  const floatingToolbarState = useFloatingToolbarState({\n    ...state,\n    floatingOptions: {\n      placement: 'top',\n      middleware: [\n        offset(12),\n        flip({\n          padding: 12,\n          fallbackPlacements: [\n            'top-start',\n            'top-end',\n            'bottom-start',\n            'bottom-end',\n          ],\n        }),\n      ],\n      ...state?.floatingOptions,\n    },\n  });\n\n  const {\n    ref: floatingRef,\n    props: rootProps,\n    hidden,\n  } = useFloatingToolbar(floatingToolbarState);\n\n  const ref = useComposedRef<HTMLDivElement>(componentRef, floatingRef);\n\n  if (hidden) return null;\n\n  return (\n    <PortalBody>\n      <Toolbar\n        ref={ref}\n        className={cn(\n          'absolute z-50 whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md'\n        )}\n        {...rootProps}\n        {...props}\n      >\n        {children}\n      </Toolbar>\n    </PortalBody>\n  );\n});\nFloatingToolbar.displayName = 'FloatingToolbar';\n\nexport { FloatingToolbar };\n"
     }
   ],
   "type": "components:plate-ui"

apps/www/public/registry/styles/default/image-element.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "image-element.tsx",
-      "content": "import React from 'react';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\nimport {\n  ELEMENT_IMAGE,\n  Image,\n  TImageElement,\n  useMediaState,\n} from '@udecode/plate-media';\nimport { useResizableStore } from '@udecode/plate-resizable';\n\nimport { cn } from '@/lib/utils';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n  mediaResizeHandleVariants,\n  Resizable,\n  ResizeHandle,\n} from './resizable';\n\nexport function ImageElement({\n  className,\n  children,\n  nodeProps,\n  ...props\n}: PlateElementProps<Value, TImageElement>) {\n  const { readOnly, focused, selected, align = 'center' } = useMediaState();\n  const width = useResizableStore().get.width();\n\n  return (\n    <MediaPopover pluginKey={ELEMENT_IMAGE}>\n      <PlateElement className={cn('py-2.5', className)} {...props}>\n        <figure className=\"group relative m-0\" contentEditable={false}>\n          <Resizable\n            align={align}\n            options={{\n              align,\n              readOnly,\n            }}\n          >\n            <ResizeHandle\n              options={{ direction: 'left' }}\n              className={mediaResizeHandleVariants({ direction: 'left' })}\n            />\n            <Image\n              className={cn(\n                'block w-full max-w-full cursor-pointer object-cover px-0',\n                'rounded-sm',\n                focused && selected && 'ring-2 ring-ring ring-offset-2'\n              )}\n              alt=\"\"\n              {...nodeProps}\n            />\n            <ResizeHandle\n              options={{ direction: 'right' }}\n              className={mediaResizeHandleVariants({ direction: 'right' })}\n            />\n          </Resizable>\n\n          <Caption align={align} style={{ width }}>\n            <CaptionTextarea\n              placeholder=\"Write a caption...\"\n              options={{}}\n              readOnly={readOnly}\n            />\n          </Caption>\n        </figure>\n\n        {children}\n      </PlateElement>\n    </MediaPopover>\n  );\n}\n"
+      "content": "import React from 'react';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\nimport {\n  ELEMENT_IMAGE,\n  Image,\n  TImageElement,\n  useMediaState,\n} from '@udecode/plate-media';\nimport { useResizableStore } from '@udecode/plate-resizable';\n\nimport { cn } from '@/lib/utils';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n  mediaResizeHandleVariants,\n  Resizable,\n  ResizeHandle,\n} from './resizable';\n\nexport function ImageElement({\n  className,\n  children,\n  nodeProps,\n  ...props\n}: PlateElementProps<Value, TImageElement>) {\n  const { readOnly, focused, selected, align = 'center' } = useMediaState();\n  const width = useResizableStore().get.width();\n\n  return (\n    <MediaPopover pluginKey={ELEMENT_IMAGE}>\n      <PlateElement className={cn('py-2.5', className)} {...props}>\n        <figure className=\"group relative m-0\" contentEditable={false}>\n          <Resizable\n            align={align}\n            options={{\n              align,\n              readOnly,\n            }}\n          >\n            <ResizeHandle\n              options={{ direction: 'left' }}\n              className={mediaResizeHandleVariants({ direction: 'left' })}\n            />\n            <Image\n              className={cn(\n                'block w-full max-w-full cursor-pointer object-cover px-0',\n                'rounded-sm',\n                focused && selected && 'ring-2 ring-ring ring-offset-2'\n              )}\n              alt=\"\"\n              {...nodeProps}\n            />\n            <ResizeHandle\n              options={{ direction: 'right' }}\n              className={mediaResizeHandleVariants({ direction: 'right' })}\n            />\n          </Resizable>\n\n          <Caption align={align} style={{ width }}>\n            <CaptionTextarea\n              placeholder=\"Write a caption...\"\n              readOnly={readOnly}\n            />\n          </Caption>\n        </figure>\n\n        {children}\n      </PlateElement>\n    </MediaPopover>\n  );\n}\n"
     }
   ],
   "type": "components:plate-ui"