Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
zbeyens committed Sep 22, 2024
1 parent 34039c8 commit 4dc8b89
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/r/styles/default/color-dropdown-menu.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"type": "registry:ui"
},
{
"content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\ntype ColorDropdownMenuItemProps = {\n isBrightColor: boolean;\n isSelected: boolean;\n updateColor: (color: string) => void;\n value: string;\n name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n className,\n isBrightColor,\n isSelected,\n name,\n updateColor,\n value,\n ...props\n}: ColorDropdownMenuItemProps) {\n const content = (\n <DropdownMenuItem\n className={cn(\n buttonVariants({\n isMenu: true,\n variant: 'outline',\n }),\n 'size-6 border border-solid border-muted p-0',\n !isBrightColor && 'border-transparent text-white',\n className\n )}\n style={{ backgroundColor: value }}\n onSelect={(e) => {\n e.preventDefault();\n updateColor(value);\n }}\n {...props}\n >\n {isSelected ? <Icons.check /> : null}\n </DropdownMenuItem>\n );\n\n return name ? (\n <Tooltip>\n <TooltipTrigger>{content}</TooltipTrigger>\n <TooltipContent>{name}</TooltipContent>\n </Tooltip>\n ) : (\n content\n );\n}\n\ntype ColorDropdownMenuItemsProps = {\n colors: TColor[];\n updateColor: (color: string) => void;\n color?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function ColorDropdownMenuItems({\n className,\n color,\n colors,\n updateColor,\n ...props\n}: ColorDropdownMenuItemsProps) {\n return (\n <div\n className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}\n {...props}\n >\n {colors.map(({ isBrightColor, name, value }) => (\n <ColorDropdownMenuItem\n name={name}\n key={name ?? value}\n value={value}\n isBrightColor={isBrightColor}\n isSelected={color === value}\n updateColor={updateColor}\n />\n ))}\n </div>\n );\n}\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip';\n\ntype ColorDropdownMenuItemProps = {\n isBrightColor: boolean;\n isSelected: boolean;\n updateColor: (color: string) => void;\n value: string;\n name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n className,\n isBrightColor,\n isSelected,\n name,\n updateColor,\n value,\n ...props\n}: ColorDropdownMenuItemProps) {\n const content = (\n <DropdownMenuItem\n className={cn(\n buttonVariants({\n isMenu: true,\n variant: 'outline',\n }),\n 'size-6 border border-solid border-muted p-0',\n !isBrightColor && 'border-transparent text-white',\n className\n )}\n style={{ backgroundColor: value }}\n onSelect={(e) => {\n e.preventDefault();\n updateColor(value);\n }}\n {...props}\n >\n {isSelected ? <Icons.check /> : null}\n </DropdownMenuItem>\n );\n\n return name ? (\n <Tooltip>\n <TooltipTrigger>{content}</TooltipTrigger>\n <TooltipContent>{name}</TooltipContent>\n </Tooltip>\n ) : (\n content\n );\n}\n\ntype ColorDropdownMenuItemsProps = {\n colors: TColor[];\n updateColor: (color: string) => void;\n color?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function ColorDropdownMenuItems({\n className,\n color,\n colors,\n updateColor,\n ...props\n}: ColorDropdownMenuItemsProps) {\n return (\n <div\n className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}\n {...props}\n >\n <TooltipProvider>\n {colors.map(({ isBrightColor, name, value }) => (\n <ColorDropdownMenuItem\n name={name}\n key={name ?? value}\n value={value}\n isBrightColor={isBrightColor}\n isSelected={color === value}\n updateColor={updateColor}\n />\n ))}\n </TooltipProvider>\n </div>\n );\n}\n",
"path": "plate-ui/color-dropdown-menu-items.tsx",
"target": "",
"type": "registry:ui"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/draggable.json
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 { ClassNames, TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n type PlateElementProps,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n type DragItemNode,\n useDraggable,\n useDraggableState,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\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 id: string;\n dragItem: DragItemNode;\n monitor: DropTargetMonitor<DragItemNode, unknown>;\n nodeRef: any;\n }\n ) => boolean;\n}\n\nconst DragHandle = () => {\n const editor = useEditorRef();\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 // editor.getApi(BlockSelectionPlugin).blockSelection.addSelectedRow(element.id as string);\n // api.blockContextMenu.show(editor.id, event as any);\n // }\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection.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 previewRef,\n handleRef,\n } = useDraggable(state);\n\n return (\n <div\n ref={ref}\n className={cn(\n 'relative',\n isDragging && 'opacity-50',\n 'group',\n className\n )}\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 ref={handleRef}\n className=\"size-4\"\n data-key={element.id as string}\n >\n {isHovered && <DragHandle />}\n </div>\n </div>\n </div>\n </div>\n\n <div ref={previewRef} className={classNames.blockWrapper}>\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 { ClassNames, TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n type PlateElementProps,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n type DragItemNode,\n useDraggable,\n useDraggableState,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipProvider,\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 id: string;\n dragItem: DragItemNode;\n monitor: DropTargetMonitor<DragItemNode, unknown>;\n nodeRef: any;\n }\n ) => boolean;\n}\n\nconst DragHandle = () => {\n const editor = useEditorRef();\n\n return (\n <TooltipProvider>\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 // editor.getApi(BlockSelectionPlugin).blockSelection.addSelectedRow(element.id as string);\n // api.blockContextMenu.show(editor.id, event as any);\n // }\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection.resetSelectedIds();\n }}\n />\n </TooltipTrigger>\n <TooltipPortal>\n <TooltipContent>Drag to move</TooltipContent>\n </TooltipPortal>\n </Tooltip>\n </TooltipProvider>\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 previewRef,\n handleRef,\n } = useDraggable(state);\n\n return (\n <div\n ref={ref}\n className={cn(\n 'relative',\n isDragging && 'opacity-50',\n 'group',\n className\n )}\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 ref={handleRef}\n className=\"size-4\"\n data-key={element.id as string}\n >\n {isHovered && <DragHandle />}\n </div>\n </div>\n </div>\n </div>\n\n <div ref={previewRef} className={classNames.blockWrapper}>\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",
"path": "plate-ui/draggable.tsx",
"target": "",
"type": "registry:ui"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/emoji-input-element.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
],
"files": [
{
"content": "import React, { useMemo, useState } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';\n\nimport { useDebounce } from '@/hooks/use-debounce';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nexport const EmojiInputElement = withRef<typeof PlateElement>(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [value, setValue] = useState('');\n const debouncedValue = useDebounce(value, 100);\n const isPending = value !== debouncedValue;\n\n const filteredEmojis = useMemo(() => {\n if (debouncedValue.trim().length === 0) return [];\n\n return EmojiInlineIndexSearch.getInstance()\n .search(debouncedValue.replace(/:$/, ''))\n .get();\n }, [debouncedValue]);\n\n return (\n <PlateElement\n ref={ref}\n as=\"span\"\n data-slate-value={element.value}\n {...props}\n >\n <InlineCombobox\n value={value}\n element={element}\n filter={false}\n setValue={setValue}\n trigger=\":\"\n hideWhenNoValue\n >\n <InlineComboboxInput />\n\n <InlineComboboxContent>\n {!isPending && (\n <InlineComboboxEmpty>No matching emoji found</InlineComboboxEmpty>\n )}\n\n {filteredEmojis.map((emoji) => (\n <InlineComboboxItem\n key={emoji.id}\n value={emoji.name}\n onClick={() => insertEmoji(editor, emoji)}\n >\n {emoji.skins[0].native} {emoji.name}\n </InlineComboboxItem>\n ))}\n </InlineComboboxContent>\n </InlineCombobox>\n\n {children}\n </PlateElement>\n );\n }\n);\n",
"content": "import React, { useMemo, useState } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';\n\nimport { useDebounce } from '@/registry/default/hooks/use-debounce';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nexport const EmojiInputElement = withRef<typeof PlateElement>(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [value, setValue] = useState('');\n const debouncedValue = useDebounce(value, 100);\n const isPending = value !== debouncedValue;\n\n const filteredEmojis = useMemo(() => {\n if (debouncedValue.trim().length === 0) return [];\n\n return EmojiInlineIndexSearch.getInstance()\n .search(debouncedValue.replace(/:$/, ''))\n .get();\n }, [debouncedValue]);\n\n return (\n <PlateElement\n ref={ref}\n as=\"span\"\n data-slate-value={element.value}\n {...props}\n >\n <InlineCombobox\n value={value}\n element={element}\n filter={false}\n setValue={setValue}\n trigger=\":\"\n hideWhenNoValue\n >\n <InlineComboboxInput />\n\n <InlineComboboxContent>\n {!isPending && (\n <InlineComboboxEmpty>No matching emoji found</InlineComboboxEmpty>\n )}\n\n {filteredEmojis.map((emoji) => (\n <InlineComboboxItem\n key={emoji.id}\n value={emoji.name}\n onClick={() => insertEmoji(editor, emoji)}\n >\n {emoji.skins[0].native} {emoji.name}\n </InlineComboboxItem>\n ))}\n </InlineComboboxContent>\n </InlineCombobox>\n\n {children}\n </PlateElement>\n );\n }\n);\n",
"path": "plate-ui/emoji-input-element.tsx",
"target": "",
"type": "registry:ui"
Expand Down
Loading

0 comments on commit 4dc8b89

Please sign in to comment.