Merge pull request #2802 from udecode/registry

Update Registry
udecode · Dec 16, 2023 · 8a9db66 · 8a9db66
2 parents e1e0051 + 0a35b90
commit 8a9db66
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 159 deletions.
diff --git a/apps/www/public/registry/styles/default/cursor-overlay.json b/apps/www/public/registry/styles/default/cursor-overlay.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "cursor-overlay.tsx",
-      "content": "import React from 'react';\nimport { createStore } from '@udecode/plate-common';\nimport {\n  CursorData,\n  CursorOverlay as CursorOverlayPrimitive,\n  CursorOverlayProps,\n  CursorProps,\n} from '@udecode/plate-cursor';\n\nimport { cn } from '@/lib/utils';\n\nexport const cursorStore = createStore('cursor')({\n  cursors: {},\n});\n\nexport function Cursor({\n  data,\n  selectionRects,\n  caretPosition,\n  disableCaret,\n  disableSelection,\n  classNames,\n}: CursorProps<CursorData>) {\n  if (!data) {\n    return null;\n  }\n\n  const { style, selectionStyle = style } = data;\n\n  return (\n    <>\n      {!disableSelection &&\n        selectionRects.map((position, i) => (\n          <div\n            key={i}\n            className={cn(\n              'pointer-events-none absolute z-10 opacity-[0.3]',\n              classNames?.selectionRect\n            )}\n            style={{\n              ...selectionStyle,\n              ...position,\n            }}\n          />\n        ))}\n      {!disableCaret && caretPosition && (\n        <div\n          className={cn(\n            'pointer-events-none absolute z-10 w-0.5',\n            classNames?.caret\n          )}\n          style={{ ...caretPosition, ...style }}\n        />\n      )}\n    </>\n  );\n}\n\nexport function CursorOverlay({ cursors, ...props }: CursorOverlayProps) {\n  const dynamicCursors = cursorStore.use.cursors();\n\n  const allCursors = { ...cursors, ...dynamicCursors };\n\n  return (\n    <CursorOverlayPrimitive\n      {...props}\n      cursors={allCursors}\n      onRenderCursor={Cursor}\n    />\n  );\n}\n"
+      "content": "import React from 'react';\nimport { createZustandStore } from '@udecode/plate-common';\nimport {\n  CursorData,\n  CursorOverlay as CursorOverlayPrimitive,\n  CursorOverlayProps,\n  CursorProps,\n} from '@udecode/plate-cursor';\n\nimport { cn } from '@/lib/utils';\n\nexport const cursorStore = createZustandStore('cursor')({\n  cursors: {},\n});\n\nexport function Cursor({\n  data,\n  selectionRects,\n  caretPosition,\n  disableCaret,\n  disableSelection,\n  classNames,\n}: CursorProps<CursorData>) {\n  if (!data) {\n    return null;\n  }\n\n  const { style, selectionStyle = style } = data;\n\n  return (\n    <>\n      {!disableSelection &&\n        selectionRects.map((position, i) => (\n          <div\n            key={i}\n            className={cn(\n              'pointer-events-none absolute z-10 opacity-[0.3]',\n              classNames?.selectionRect\n            )}\n            style={{\n              ...selectionStyle,\n              ...position,\n            }}\n          />\n        ))}\n      {!disableCaret && caretPosition && (\n        <div\n          className={cn(\n            'pointer-events-none absolute z-10 w-0.5',\n            classNames?.caret\n          )}\n          style={{ ...caretPosition, ...style }}\n        />\n      )}\n    </>\n  );\n}\n\nexport function CursorOverlay({ cursors, ...props }: CursorOverlayProps) {\n  const dynamicCursors = cursorStore.use.cursors();\n\n  const allCursors = { ...cursors, ...dynamicCursors };\n\n  return (\n    <CursorOverlayPrimitive\n      {...props}\n      cursors={allCursors}\n      onRenderCursor={Cursor}\n    />\n  );\n}\n"
     }
   ],
   "type": "components:plate-ui"

diff --git a/apps/www/public/registry/styles/default/image-element.json b/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              readOnly={readOnly}\n            />\n          </Caption>\n        </figure>\n\n        {children}\n      </PlateElement>\n    </MediaPopover>\n  );\n}\n"
+      "content": "import React from 'react';\nimport {\n  PlateElement,\n  PlateElementProps,\n  Value,\n  withHOC,\n} from '@udecode/plate-common';\nimport {\n  ELEMENT_IMAGE,\n  Image,\n  TImageElement,\n  useMediaState,\n} from '@udecode/plate-media';\nimport { ResizableProvider, 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\nconst ImageElement = withHOC(\n  ResizableProvider,\n  ({\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);\nImageElement.displayName = 'ImageElement';\n\nexport { ImageElement };\n"
     }
   ],
   "type": "components:plate-ui"