Merge pull request #3932 from udecode/fix/slate-element

Add relative to PlateElement as default
udecode · Dec 28, 2024 · 0debda1 · 0debda1
2 parents 0997a31 + 71322dc
commit 0debda1
Show file tree

Hide file tree

Showing 27 changed files with 76 additions and 81 deletions.
diff --git a/.changeset/light-glasses-buy.md b/.changeset/light-glasses-buy.md
@@ -0,0 +1,7 @@
+---
+'@udecode/plate-utils': patch
+'@udecode/plate-core': patch
+---
+
+Each `PlateElement` and `SlateElement` comes with a default `position: relative` style.
+Remove `relative` className from all components
diff --git a/apps/www/content/docs/cn/components/changelog.mdx b/apps/www/content/docs/cn/components/changelog.mdx
@@ -13,6 +13,8 @@ toc: true
 ### 12月28日 #17.8
 
 - `export-toolbar-button`: 添加 `katex` 支持
+- `plate-element`: 移除 `relative` className
+- 所有使用 `PlateElement` 的组件都已移除冗余的 `relative` 类名。
 
 ### 12月27日 #17.7
 

diff --git a/apps/www/content/docs/en/components/changelog.mdx b/apps/www/content/docs/en/components/changelog.mdx
@@ -13,7 +13,8 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 ### December 28 #17.8
 
 - `export-toolbar-button`: add `katex` support
-
+- `plate-element`: remove `relative` className
+- All components using the `PlateElement` have had redundant `relative` class names removed.
 ### December 27 #17.7
 
 - `fixed-toolbar-buttons`: add `font-size-toolbar-button`

diff --git a/apps/www/src/registry/default/plate-ui/code-block-element-static.tsx b/apps/www/src/registry/default/plate-ui/code-block-element-static.tsx
@@ -13,15 +13,12 @@ export const CodeBlockElementStatic = ({
 }: SlateElementProps<TCodeBlockElement>) => {
   const { element } = props;
 
-  const codeClassName = element?.lang
-    ? `${element.lang} language-${element.lang}`
-    : '';
+  const state = {
+    className: element?.lang ? `${element.lang} language-${element.lang}` : '',
+  };
 
   return (
-    <SlateElement
-      className={cn(className, 'relative py-1', codeClassName)}
-      {...props}
-    >
+    <SlateElement className={cn(className, 'py-1', state.className)} {...props}>
       <pre className="overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]">
         <code>{children}</code>
       </pre>

diff --git a/apps/www/src/registry/default/plate-ui/code-block-element.tsx b/apps/www/src/registry/default/plate-ui/code-block-element.tsx
@@ -19,7 +19,7 @@ export const CodeBlockElement = withRef<typeof PlateElement>(
     return (
       <PlateElement
         ref={ref}
-        className={cn(className, 'relative py-1', state.className)}
+        className={cn(className, 'py-1', state.className)}
         {...props}
       >
         <pre className="overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]">

diff --git a/apps/www/src/registry/default/plate-ui/column-element-static.tsx b/apps/www/src/registry/default/plate-ui/column-element-static.tsx
@@ -14,12 +14,18 @@ export function ColumnElementStatic({
   const { width } = props.element as TColumnElement;
 
   return (
-    <SlateElement
-      className={cn(className, 'border border-transparent p-1.5')}
-      style={{ width: width ?? '100%' }}
-      {...props}
-    >
-      {children}
-    </SlateElement>
+    <div className="group/column relative" style={{ width: width ?? '100%' }}>
+      <SlateElement
+        className={cn(
+          className,
+          'h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0'
+        )}
+        {...props}
+      >
+        <div className={cn('relative h-full border border-transparent p-1.5')}>
+          {children}
+        </div>
+      </SlateElement>
+    </div>
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/column-group-element-static.tsx b/apps/www/src/registry/default/plate-ui/column-group-element-static.tsx
@@ -11,8 +11,8 @@ export function ColumnGroupElementStatic({
   ...props
 }: SlateElementProps) {
   return (
-    <SlateElement className={cn(className, 'my-2')} {...props}>
-      <div className={cn('flex size-full gap-4 rounded')}>{children}</div>
+    <SlateElement className={cn(className, 'mb-2')} {...props}>
+      <div className={cn('flex size-full rounded')}>{children}</div>
     </SlateElement>
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/column-group-element.tsx b/apps/www/src/registry/default/plate-ui/column-group-element.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';
+import { findNodePath } from '@udecode/plate-common';
 import {
   useEditorRef,
   useElement,
@@ -18,7 +19,6 @@ import {
   ColumnPlugin,
   useDebouncePopoverOpen,
 } from '@udecode/plate-layout/react';
-import { findNodePath } from '@udecode/plate-common';
 import { type LucideProps, Trash2Icon } from 'lucide-react';
 import { useReadOnly } from 'slate-react';
 

diff --git a/apps/www/src/registry/default/plate-ui/equation-element-static.tsx b/apps/www/src/registry/default/plate-ui/equation-element-static.tsx
@@ -5,6 +5,7 @@ import type { TEquationElement } from '@udecode/plate-math';
 import { cn } from '@udecode/cn';
 import { type SlateElementProps, SlateElement } from '@udecode/plate-common';
 import { getEquationHtml } from '@udecode/plate-math';
+import { RadicalIcon } from 'lucide-react';
 
 export function EquationElementStatic({
   children,
@@ -29,18 +30,25 @@ export function EquationElementStatic({
   });
 
   return (
-    <SlateElement className={cn('relative my-1', className)} {...props}>
+    <SlateElement className={cn('my-1', className)} {...props}>
       <div
         className={cn(
-          'flex select-none items-center justify-center rounded-sm',
-          element.texExpression.length === 0 ? 'bg-muted p-3' : 'px-2 py-1'
+          'group flex select-none items-center justify-center rounded-sm hover:bg-primary/10 data-[selected=true]:bg-primary/10',
+          element.texExpression.length === 0 ? 'bg-muted p-3 pr-9' : 'px-2 py-1'
         )}
       >
-        <span
-          dangerouslySetInnerHTML={{
-            __html: html,
-          }}
-        />
+        {element.texExpression.length > 0 ? (
+          <span
+            dangerouslySetInnerHTML={{
+              __html: html,
+            }}
+          />
+        ) : (
+          <div className="flex h-7 w-full items-center gap-2 whitespace-nowrap text-sm text-muted-foreground">
+            <RadicalIcon className="size-6 text-muted-foreground/80" />
+            <div>Add a Tex equation</div>
+          </div>
+        )}
       </div>
       {children}
     </SlateElement>

diff --git a/apps/www/src/registry/default/plate-ui/equation-element.tsx b/apps/www/src/registry/default/plate-ui/equation-element.tsx
@@ -39,11 +39,7 @@ export const EquationElement = withRef<typeof PlateElement>(
     });
 
     return (
-      <PlateElement
-        ref={ref}
-        className={cn('relative my-1', className)}
-        {...props}
-      >
+      <PlateElement ref={ref} className={cn('my-1', className)} {...props}>
         <Popover open={open} onOpenChange={setOpen} modal={false}>
           <PopoverTrigger asChild>
             <div

diff --git a/apps/www/src/registry/default/plate-ui/media-audio-element-static.tsx b/apps/www/src/registry/default/plate-ui/media-audio-element-static.tsx
@@ -14,7 +14,7 @@ export function MediaAudioElementStatic({
   const { url } = props.element as TAudioElement;
 
   return (
-    <SlateElement className={cn(className, 'relative mb-1')} {...props}>
+    <SlateElement className={cn(className, 'mb-1')} {...props}>
       <figure className="group relative cursor-default">
         <div className="h-16">
           <audio className="size-full" src={url} controls />

diff --git a/apps/www/src/registry/default/plate-ui/media-audio-element.tsx b/apps/www/src/registry/default/plate-ui/media-audio-element.tsx
@@ -17,11 +17,7 @@ export const MediaAudioElement = withHOC(
       const { align = 'center', readOnly, unsafeUrl } = useMediaState();
 
       return (
-        <PlateElement
-          ref={ref}
-          className={cn(className, 'relative mb-1')}
-          {...props}
-        >
+        <PlateElement ref={ref} className={cn(className, 'mb-1')} {...props}>
           <figure
             className="group relative cursor-default"
             contentEditable={false}

diff --git a/apps/www/src/registry/default/plate-ui/media-embed-element.tsx b/apps/www/src/registry/default/plate-ui/media-embed-element.tsx
@@ -39,11 +39,7 @@ export const MediaEmbedElement = withHOC(
 
     return (
       <MediaPopover plugin={MediaEmbedPlugin}>
-        <PlateElement
-          ref={ref}
-          className={cn(className, 'relative py-2.5')}
-          {...props}
-        >
+        <PlateElement ref={ref} className={cn(className, 'py-2.5')} {...props}>
           <figure
             className="group relative m-0 w-full cursor-default"
             contentEditable={false}

diff --git a/apps/www/src/registry/default/plate-ui/media-file-element-static.tsx b/apps/www/src/registry/default/plate-ui/media-file-element-static.tsx
@@ -15,10 +15,7 @@ export const MediaFileElementStatic = ({
   const { name, url } = props.element as TFileElement;
 
   return (
-    <SlateElement
-      className={cn(className, 'relative my-px rounded-sm')}
-      {...props}
-    >
+    <SlateElement className={cn(className, 'my-px rounded-sm')} {...props}>
       <a
         className="group relative m-0 flex cursor-pointer items-center rounded px-0.5 py-[3px] hover:bg-muted"
         contentEditable={false}

diff --git a/apps/www/src/registry/default/plate-ui/media-file-element.tsx b/apps/www/src/registry/default/plate-ui/media-file-element.tsx
@@ -23,7 +23,7 @@ export const MediaFileElement = withHOC(
       return (
         <PlateElement
           ref={ref}
-          className={cn(className, 'relative my-px rounded-sm')}
+          className={cn(className, 'my-px rounded-sm')}
           {...props}
         >
           <a

diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
@@ -153,11 +153,7 @@ export const MediaPlaceholderElement = withHOC(
       }, [isReplaced]);
 
       return (
-        <PlateElement
-          ref={ref}
-          className={cn(className, 'relative my-1')}
-          {...props}
-        >
+        <PlateElement ref={ref} className={cn(className, 'my-1')} {...props}>
           {(!loading || !isImage) && (
             <div
               className={cn(

diff --git a/apps/www/src/registry/default/plate-ui/media-video-element.tsx b/apps/www/src/registry/default/plate-ui/media-video-element.tsx
@@ -44,11 +44,7 @@ export const MediaVideoElement = withHOC(
       });
 
       return (
-        <PlateElement
-          ref={ref}
-          className={cn(className, 'relative py-2.5')}
-          {...props}
-        >
+        <PlateElement ref={ref} className={cn(className, 'py-2.5')} {...props}>
           <figure
             className="relative m-0 cursor-default"
             contentEditable={false}

diff --git a/apps/www/src/registry/default/plate-ui/plate-element.tsx b/apps/www/src/registry/default/plate-ui/plate-element.tsx
@@ -4,22 +4,17 @@ import React from 'react';
 
 import type { PlateElementProps } from '@udecode/plate-common/react';
 
-import { cn } from '@udecode/cn';
 import { PlateElement as PlateElementPrimitive } from '@udecode/plate-common/react';
 
 import { BlockSelection } from './block-selection';
 
 export const PlateElement = React.forwardRef<HTMLDivElement, PlateElementProps>(
-  ({ children, className, ...props }: PlateElementProps, ref) => {
+  ({ children, ...props }: PlateElementProps, ref) => {
     return (
-      <PlateElementPrimitive
-        ref={ref}
-        className={cn(className, 'relative')}
-        {...props}
-      >
+      <PlateElementPrimitive ref={ref} {...props}>
         {children}
 
-        {className?.includes('slate-selectable') && <BlockSelection />}
+        {props.className?.includes('slate-selectable') && <BlockSelection />}
       </PlateElementPrimitive>
     );
   }

diff --git a/apps/www/src/registry/default/plate-ui/table-cell-element-static.tsx b/apps/www/src/registry/default/plate-ui/table-cell-element-static.tsx
@@ -38,7 +38,7 @@ export function TableCellElementStatic({
       as={isHeader ? 'th' : 'td'}
       className={cn(
         className,
-        'relative h-full overflow-visible bg-background p-0',
+        'h-full overflow-visible bg-background p-0',
         element.background ? 'bg-[--cellBackground]' : 'bg-background',
         cn(
           isHeader && 'text-left font-normal [&_>_*]:m-0',

diff --git a/apps/www/src/registry/default/plate-ui/table-cell-element.tsx b/apps/www/src/registry/default/plate-ui/table-cell-element.tsx
@@ -57,7 +57,7 @@ export const TableCellElement = withRef<
       as={isHeader ? 'th' : 'td'}
       className={cn(
         className,
-        'relative h-full overflow-visible border-none bg-background p-0',
+        'h-full overflow-visible border-none bg-background p-0',
         hideBorder && 'before:border-none',
         element.background ? 'bg-[--cellBackground]' : 'bg-background',
         !hideBorder &&

diff --git a/apps/www/src/registry/default/plate-ui/toc-element-static.tsx b/apps/www/src/registry/default/plate-ui/toc-element-static.tsx
@@ -44,7 +44,7 @@ export function TocElementStatic({
   const headingList = getHeadingList(editor);
 
   return (
-    <SlateElement className={cn(className, 'relative mb-1 p-0')} {...props}>
+    <SlateElement className={cn(className, 'mb-1 p-0')} {...props}>
       <div>
         {headingList.length > 0 ? (
           headingList.map((item) => (

diff --git a/apps/www/src/registry/default/plate-ui/toc-element.tsx b/apps/www/src/registry/default/plate-ui/toc-element.tsx
@@ -32,11 +32,7 @@ export const TocElement = withRef<typeof PlateElement>(
     const { headingList } = state;
 
     return (
-      <PlateElement
-        ref={ref}
-        className={cn(className, 'relative mb-1 p-0')}
-        {...props}
-      >
+      <PlateElement ref={ref} className={cn(className, 'mb-1 p-0')} {...props}>
         <div contentEditable={false}>
           {headingList.length > 0 ? (
             headingList.map((item) => (

diff --git a/apps/www/src/registry/default/plate-ui/toggle-element-static.tsx b/apps/www/src/registry/default/plate-ui/toggle-element-static.tsx
@@ -12,7 +12,7 @@ export function ToggleElementStatic({
   ...props
 }: SlateElementProps) {
   return (
-    <SlateElement className={cn(className, 'relative pl-6')} {...props}>
+    <SlateElement className={cn(className, 'pl-6')} {...props}>
       <div
         className="absolute -left-0.5 top-0 size-6 cursor-pointer select-none items-center justify-center rounded-md p-px text-muted-foreground transition-colors hover:bg-accent [&_svg]:size-4"
         contentEditable={false}

diff --git a/apps/www/src/registry/default/plate-ui/toggle-element.tsx b/apps/www/src/registry/default/plate-ui/toggle-element.tsx
@@ -18,11 +18,7 @@ export const ToggleElement = withRef<typeof PlateElement>(
     const { buttonProps, open } = useToggleButton(state);
 
     return (
-      <PlateElement
-        ref={ref}
-        className={cn(className, 'relative pl-6')}
-        {...props}
-      >
+      <PlateElement ref={ref} className={cn(className, 'pl-6')} {...props}>
         <Button
           size="icon"
           variant="ghost"

diff --git a/packages/core/src/lib/static/__tests__/with-attributes.spec.ts b/packages/core/src/lib/static/__tests__/with-attributes.spec.ts
@@ -17,7 +17,7 @@ describe('serializePlateStatic with attributes', () => {
     });
 
     expect(html).toEqual(
-      '<div data-slate-editor="true" data-slate-node="value"><div data-slate-node="element"><span data-slate-node="text"><span data-slate-leaf="true"><strong data-slate-leaf="true"><span data-slate-string="true">Right Aligned Heading</span></strong></span></span></div></div>'
+      '<div data-slate-editor="true" data-slate-node="value"><div data-slate-node="element" style="position:relative"><span data-slate-node="text"><span data-slate-leaf="true"><strong data-slate-leaf="true"><span data-slate-string="true">Right Aligned Heading</span></strong></span></span></div></div>'
     );
   });
 });
diff --git a/packages/core/src/lib/static/components/SlateElement.tsx b/packages/core/src/lib/static/components/SlateElement.tsx
@@ -30,6 +30,11 @@ export const SlateElement = (props: SlateElementProps) => {
     ...elementToAttributes?.(element),
     className: clsx(props.className, nodeProps?.className),
     'data-block-id': block ? element.id : undefined,
+    style: {
+      position: 'relative',
+      ...props.style,
+      ...nodeProps?.style,
+    },
   };
 
   const Element = (as ?? 'div') as any;

diff --git a/packages/plate-utils/src/react/PlateElement.tsx b/packages/plate-utils/src/react/PlateElement.tsx
@@ -43,6 +43,11 @@ export const usePlateElement = (props: PlateElementProps) => {
       ...elementToAttributes?.(element),
       className: clsx(props.className, nodeProps?.className),
       'data-block-id': block ? element.id : undefined,
+      style: {
+        position: 'relative',
+        ...props.style,
+        ...nodeProps?.style,
+      },
     },
     ref: useComposedRef(props.ref, attributes.ref),
   };