Skip to content

Commit

Permalink
Merge pull request #3245 from udecode/registry
Browse files Browse the repository at this point in the history 
Update Registry
  • Loading branch information
@zbeyens
zbeyens authored Jun 6, 2024
2 parents 17e9885 + 0e394a3 commit 9a5405e
Show file tree
Hide file tree
Showing 6 changed files with 6 additions and 6 deletions.
2 changes: 1 addition & 1 deletion apps/www/public/registry/styles/default/caption.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
],
"files": [
{
"content": "import { cn, withCn, withVariants } from '@udecode/cn';\nimport {\n Caption as CaptionPrimitive,\n CaptionTextarea as CaptionTextareaPrimitive,\n} from '@udecode/plate-caption';\nimport { cva } from 'class-variance-authority';\n\nconst captionVariants = cva('max-w-full', {\n defaultVariants: {\n align: 'center',\n },\n variants: {\n align: {\n center: 'mx-auto',\n left: 'mr-auto',\n right: 'ml-auto',\n },\n },\n});\n\nexport const Caption = withVariants(CaptionPrimitive, captionVariants, [\n 'align',\n]);\n\nexport const CaptionTextarea = withCn(\n CaptionTextareaPrimitive,\n 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 print:placeholder:text-transparent'\n )\n);\n",
"content": "import {\n cn,\n createPrimitiveComponent,\n withCn,\n withVariants,\n} from '@udecode/cn';\nimport {\n Caption as CaptionPrimitive,\n CaptionTextarea as CaptionTextareaPrimitive,\n useCaptionButton,\n useCaptionButtonState,\n} from '@udecode/plate-caption';\nimport { cva } from 'class-variance-authority';\n\nimport { Button } from './button';\n\nconst captionVariants = cva('max-w-full', {\n defaultVariants: {\n align: 'center',\n },\n variants: {\n align: {\n center: 'mx-auto',\n left: 'mr-auto',\n right: 'ml-auto',\n },\n },\n});\n\nexport const Caption = withVariants(CaptionPrimitive, captionVariants, [\n 'align',\n]);\n\nexport const CaptionTextarea = withCn(\n CaptionTextareaPrimitive,\n 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 print:placeholder:text-transparent'\n )\n);\n\nexport const CaptionButton = createPrimitiveComponent(Button)({\n propsHook: useCaptionButton,\n stateHook: useCaptionButtonState,\n});\n",
"name": "caption.tsx"
}
],
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/registry/styles/default/draggable.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
],
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport type {\n ClassNames,\n PlateElementProps,\n TEditor,\n} from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n type DragItemNode,\n useDraggable,\n useDraggableState,\n} from '@udecode/plate-dnd';\n\nimport { Icons } from '@/components/icons';\n\nimport { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from './tooltip';\n\nexport interface DraggableProps\n extends PlateElementProps,\n ClassNames<{\n /** Block. */\n block: string;\n\n /** Block and gutter. */\n blockAndGutter: string;\n\n /** Block toolbar in the gutter. */\n blockToolbar: string;\n\n /**\n * Block toolbar wrapper in the gutter left. It has the height of a line\n * of the block.\n */\n blockToolbarWrapper: string;\n\n blockWrapper: string;\n\n /** Button to dnd the block, in the block toolbar. */\n dragHandle: string;\n\n /** Icon of the drag button, in the drag icon. */\n dragIcon: string;\n\n /** Show a dropline above or below the block when dragging a block. */\n dropLine: string;\n\n /** Gutter at the left side of the editor. It has the height of the block */\n gutterLeft: string;\n }> {\n /**\n * Intercepts the drop handling. If `false` is returned, the default drop\n * behavior is called after. If `true` is returned, the default behavior is\n * not called.\n */\n onDropHandler?: (\n editor: TEditor,\n props: {\n dragItem: DragItemNode;\n id: string;\n monitor: DropTargetMonitor<DragItemNode, unknown>;\n nodeRef: any;\n }\n ) => boolean;\n}\n\nconst dragHandle = (\n <Tooltip>\n <TooltipTrigger type=\"button\">\n <Icons.dragHandle className=\"size-4 text-muted-foreground\" />\n </TooltipTrigger>\n <TooltipPortal>\n <TooltipContent>Drag to move</TooltipContent>\n </TooltipPortal>\n </Tooltip>\n);\n\nexport const Draggable = withRef<'div', DraggableProps>(\n ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useDraggableState({ element, onDropHandler });\n const { dropLine, isDragging, isHovered } = state;\n const {\n droplineProps,\n groupProps,\n gutterLeftProps,\n handleRef,\n previewRef,\n } = useDraggable(state);\n\n return (\n <div\n className={cn(\n 'relative',\n isDragging && 'opacity-50',\n 'group',\n className\n )}\n ref={ref}\n {...groupProps}\n >\n <div\n className={cn(\n 'pointer-events-none absolute top-0 flex h-full -translate-x-full cursor-text opacity-0 group-hover:opacity-100',\n classNames.gutterLeft\n )}\n {...gutterLeftProps}\n >\n <div className={cn('flex h-[1.5em]', classNames.blockToolbarWrapper)}>\n <div\n className={cn(\n 'pointer-events-auto mr-1 flex items-center',\n classNames.blockToolbar\n )}\n >\n <div className=\"size-4\" ref={handleRef}>\n {isHovered && dragHandle}\n </div>\n </div>\n </div>\n </div>\n\n <div className={classNames.blockWrapper} ref={previewRef}>\n {children}\n\n {!!dropLine && (\n <div\n className={cn(\n 'absolute inset-x-0 h-0.5 opacity-100',\n 'bg-ring',\n dropLine === 'top' && '-top-px',\n dropLine === 'bottom' && '-bottom-px',\n classNames.dropLine\n )}\n {...droplineProps}\n />\n )}\n </div>\n </div>\n );\n }\n);\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n type ClassNames,\n type PlateElementProps,\n type TEditor,\n type TElement,\n useEditorRef,\n useElement,\n} from '@udecode/plate-common';\nimport {\n type DragItemNode,\n useDraggable,\n useDraggableState,\n} from '@udecode/plate-dnd';\nimport { blockSelectionActions } from '@udecode/plate-selection';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps\n extends PlateElementProps,\n ClassNames<{\n /** Block. */\n block: string;\n\n /** Block and gutter. */\n blockAndGutter: string;\n\n /** Block toolbar in the gutter. */\n blockToolbar: string;\n\n /**\n * Block toolbar wrapper in the gutter left. It has the height of a line\n * of the block.\n */\n blockToolbarWrapper: string;\n\n blockWrapper: string;\n\n /** Button to dnd the block, in the block toolbar. */\n dragHandle: string;\n\n /** Icon of the drag button, in the drag icon. */\n dragIcon: string;\n\n /** Show a dropline above or below the block when dragging a block. */\n dropLine: string;\n\n /** Gutter at the left side of the editor. It has the height of the block */\n gutterLeft: string;\n }> {\n /**\n * Intercepts the drop handling. If `false` is returned, the default drop\n * behavior is called after. If `true` is returned, the default behavior is\n * not called.\n */\n onDropHandler?: (\n editor: TEditor,\n props: {\n dragItem: DragItemNode;\n id: string;\n monitor: DropTargetMonitor<DragItemNode, unknown>;\n nodeRef: any;\n }\n ) => boolean;\n}\n\nconst DragHandle = () => {\n const editor = useEditorRef();\n const element = useElement<TElement>();\n\n return (\n <Tooltip>\n <TooltipTrigger type=\"button\">\n <Icons.dragHandle\n className=\"size-4 text-muted-foreground\"\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n\n // if (element.id) {\n // blockSelectionActions.addSelectedRow(element.id as string);\n // blockContextMenuActions.show(editor.id, event as any);\n // }\n }}\n onMouseDown={() => {\n blockSelectionActions.resetSelectedIds();\n }}\n />\n </TooltipTrigger>\n <TooltipPortal>\n <TooltipContent>Drag to move</TooltipContent>\n </TooltipPortal>\n </Tooltip>\n );\n};\n\nexport const Draggable = withRef<'div', DraggableProps>(\n ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useDraggableState({ element, onDropHandler });\n const { dropLine, isDragging, isHovered } = state;\n const {\n droplineProps,\n groupProps,\n gutterLeftProps,\n handleRef,\n previewRef,\n } = useDraggable(state);\n\n return (\n <div\n className={cn(\n 'relative',\n isDragging && 'opacity-50',\n 'group',\n className\n )}\n ref={ref}\n {...groupProps}\n >\n <div\n className={cn(\n 'pointer-events-none absolute -top-px z-50 flex h-full -translate-x-full cursor-text opacity-0 group-hover:opacity-100',\n classNames.gutterLeft\n )}\n {...gutterLeftProps}\n >\n <div className={cn('flex h-[1.5em]', classNames.blockToolbarWrapper)}>\n <div\n className={cn(\n 'pointer-events-auto mr-1 flex items-center',\n classNames.blockToolbar\n )}\n >\n <div\n className=\"size-4\"\n data-key={element.id as string}\n ref={handleRef}\n >\n {isHovered && <DragHandle />}\n </div>\n </div>\n </div>\n </div>\n\n <div className={classNames.blockWrapper} ref={previewRef}>\n {children}\n\n {!!dropLine && (\n <div\n className={cn(\n 'absolute inset-x-0 h-0.5 opacity-100',\n 'bg-ring',\n dropLine === 'top' && '-top-px',\n dropLine === 'bottom' && '-bottom-px',\n classNames.dropLine\n )}\n {...droplineProps}\n />\n )}\n </div>\n </div>\n );\n }\n);\n",
"name": "draggable.tsx"
},
{
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/registry/styles/default/floating-toolbar.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
],
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PortalBody, useComposedRef } from '@udecode/plate-common';\nimport {\n type FloatingToolbarState,\n flip,\n offset,\n useFloatingToolbar,\n useFloatingToolbarState,\n} from '@udecode/plate-floating';\n\nimport { Toolbar } from './toolbar';\n\nexport const FloatingToolbar = withRef<\n typeof Toolbar,\n {\n state?: FloatingToolbarState;\n }\n>(({ children, state, ...props }, componentRef) => {\n const floatingToolbarState = useFloatingToolbarState({\n ...state,\n floatingOptions: {\n middleware: [\n offset(12),\n flip({\n fallbackPlacements: [\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n ],\n padding: 12,\n }),\n ],\n placement: 'top',\n ...state?.floatingOptions,\n },\n });\n\n const {\n hidden,\n props: rootProps,\n ref: floatingRef,\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 className={cn(\n 'absolute z-50 whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md print:hidden'\n )}\n ref={ref}\n {...rootProps}\n {...props}\n >\n {children}\n </Toolbar>\n </PortalBody>\n );\n});\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n PortalBody,\n useComposedRef,\n useEventEditorSelectors,\n usePlateSelectors,\n} from '@udecode/plate-common';\nimport {\n type FloatingToolbarState,\n flip,\n offset,\n useFloatingToolbar,\n useFloatingToolbarState,\n} from '@udecode/plate-floating';\n\nimport { Toolbar } from './toolbar';\n\nexport const FloatingToolbar = withRef<\n typeof Toolbar,\n {\n state?: FloatingToolbarState;\n }\n>(({ children, state, ...props }, componentRef) => {\n const editorId = usePlateSelectors().id();\n const focusedEditorId = useEventEditorSelectors.focus();\n\n const floatingToolbarState = useFloatingToolbarState({\n editorId,\n focusedEditorId,\n ...state,\n floatingOptions: {\n middleware: [\n offset(12),\n flip({\n fallbackPlacements: [\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n ],\n padding: 12,\n }),\n ],\n placement: 'top',\n ...state?.floatingOptions,\n },\n });\n\n const {\n hidden,\n props: rootProps,\n ref: floatingRef,\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 className={cn(\n 'absolute z-50 whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md print:hidden'\n )}\n ref={ref}\n {...rootProps}\n {...props}\n >\n {children}\n </Toolbar>\n </PortalBody>\n );\n});\n",
"name": "floating-toolbar.tsx"
}
],
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/registry/styles/default/image-element.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
],
"files": [
{
"content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common';\nimport { ELEMENT_IMAGE, Image, useMediaState } from '@udecode/plate-media';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n ResizableProvider,\n withRef<typeof PlateElement>(\n ({ children, className, nodeProps, ...props }, ref) => {\n const { align = 'center', focused, readOnly, selected } = useMediaState();\n const width = useResizableStore().get.width();\n\n return (\n <MediaPopover pluginKey={ELEMENT_IMAGE}>\n <PlateElement\n className={cn('py-2.5', className)}\n ref={ref}\n {...props}\n >\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 className={mediaResizeHandleVariants({ direction: 'left' })}\n options={{ direction: 'left' }}\n />\n <Image\n alt=\"\"\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 {...nodeProps}\n />\n <ResizeHandle\n className={mediaResizeHandleVariants({ direction: 'right' })}\n options={{ 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 )\n);\n",
"content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { CaptionProvider } from '@udecode/plate-caption';\nimport { PlateElement, withHOC } from '@udecode/plate-common';\nimport { ELEMENT_IMAGE, Image, useMediaState } from '@udecode/plate-media';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n CaptionProvider,\n withHOC(\n ResizableProvider,\n withRef<typeof PlateElement>(\n ({ children, className, nodeProps, ...props }, ref) => {\n const {\n align = 'center',\n focused,\n readOnly,\n selected,\n } = useMediaState();\n\n const width = useResizableStore().get.width();\n\n return (\n <MediaPopover pluginKey={ELEMENT_IMAGE}>\n <PlateElement\n className={cn('py-2.5', className)}\n ref={ref}\n {...props}\n >\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 className={mediaResizeHandleVariants({ direction: 'left' })}\n options={{ direction: 'left' }}\n />\n <Image\n alt=\"\"\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 {...nodeProps}\n />\n <ResizeHandle\n className={mediaResizeHandleVariants({\n direction: 'right',\n })}\n options={{ 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 )\n )\n);\n",
"name": "image-element.tsx"
}
],
Expand Down
Loading

0 comments on commit 9a5405e

Please sign in to comment.