@groupher/rich-editor 0.0.1

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

package/src/components/ui/editor-static.tsx

@@ -0,0 +1,53 @@
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
+import { type PlateStaticProps, PlateStatic } from 'platejs';
+
+import { cn } from '@/lib/utils';
+
+export const editorVariants = cva(
+  cn(
+    'group/editor',
+    'relative w-full cursor-text overflow-x-hidden break-words whitespace-pre-wrap select-text',
+    'rounded-md ring-offset-background focus-visible:outline-none',
+    'placeholder:text-muted-foreground/80 **:data-slate-placeholder:top-[auto_!important] **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!',
+    '[&_strong]:font-bold'
+  ),
+  {
+    defaultVariants: {
+      variant: 'none',
+    },
+    variants: {
+      disabled: {
+        true: 'cursor-not-allowed opacity-50',
+      },
+      focused: {
+        true: 'ring-2 ring-ring ring-offset-2',
+      },
+      variant: {
+        ai: 'w-full px-0 text-base md:text-sm',
+        aiChat:
+          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-5 py-3 text-base md:text-sm',
+        default:
+          'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
+        demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
+        fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24',
+        none: '',
+        select: 'px-3 py-2 text-base data-readonly:w-fit',
+      },
+    },
+  }
+);
+
+export function EditorStatic({
+  className,
+  variant,
+  ...props
+}: PlateStaticProps & VariantProps<typeof editorVariants>) {
+  return (
+    <PlateStatic
+      className={cn(editorVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}

package/src/components/ui/editor.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import * as React from 'react';
+
+import type { VariantProps } from 'class-variance-authority';
+import type { PlateContentProps, PlateViewProps } from 'platejs/react';
+
+import { cva } from 'class-variance-authority';
+import { PlateContainer, PlateContent, PlateView } from 'platejs/react';
+
+import { cn } from '@/lib/utils';
+
+const editorContainerVariants = cva(
+  'relative w-full cursor-text overflow-y-auto caret-primary select-text selection:bg-brand/25 focus-visible:outline-none [&_.slate-selection-area]:z-50 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        comment: cn(
+          'flex flex-wrap justify-between gap-1 px-1 py-0.5 text-sm',
+          'rounded-md border-[1.5px] border-transparent bg-transparent',
+          'has-[[data-slate-editor]:focus]:border-brand/50 has-[[data-slate-editor]:focus]:ring-2 has-[[data-slate-editor]:focus]:ring-brand/30',
+          'has-aria-disabled:border-input has-aria-disabled:bg-muted'
+        ),
+        default: 'h-full',
+        demo: 'h-[650px]',
+        select: cn(
+          'group rounded-md border border-input ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
+          'has-data-readonly:w-fit has-data-readonly:cursor-default has-data-readonly:border-transparent has-data-readonly:focus-within:[box-shadow:none]'
+        ),
+      },
+    },
+  }
+);
+
+export function EditorContainer({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof editorContainerVariants>) {
+  return (
+    <PlateContainer
+      className={cn(
+        'ignore-click-outside/toolbar',
+        editorContainerVariants({ variant }),
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+const editorVariants = cva(
+  cn(
+    'group/editor',
+    'relative w-full cursor-text overflow-x-hidden break-words whitespace-pre-wrap select-text',
+    'rounded-md ring-offset-background focus-visible:outline-none',
+    'placeholder:text-muted-foreground/80 **:data-slate-placeholder:!top-1/2 **:data-slate-placeholder:-translate-y-1/2 **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!',
+    '[&_strong]:font-bold'
+  ),
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      disabled: {
+        true: 'cursor-not-allowed opacity-50',
+      },
+      focused: {
+        true: 'ring-2 ring-ring ring-offset-2',
+      },
+      variant: {
+        ai: 'w-full px-0 text-base md:text-sm',
+        aiChat:
+          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm',
+        comment: cn('rounded-none border-none bg-transparent text-sm'),
+        default:
+          'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
+        demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
+        fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24',
+        none: '',
+        select: 'px-3 py-2 text-base data-readonly:w-fit',
+      },
+    },
+  }
+);
+
+export type EditorProps = PlateContentProps &
+  VariantProps<typeof editorVariants>;
+
+export const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
+  ({ className, disabled, focused, variant, ...props }, ref) => {
+    return (
+      <PlateContent
+        ref={ref}
+        className={cn(
+          editorVariants({
+            disabled,
+            focused,
+            variant,
+          }),
+          className
+        )}
+        disabled={disabled}
+        disableDefaultStyles
+        {...props}
+      />
+    );
+  }
+);
+
+Editor.displayName = 'Editor';
+
+export function EditorView({
+  className,
+  variant,
+  ...props
+}: PlateViewProps & VariantProps<typeof editorVariants>) {
+  return (
+    <PlateView
+      {...props}
+      className={cn(editorVariants({ variant }), className)}
+    />
+  );
+}
+
+EditorView.displayName = 'EditorView';

package/src/components/ui/fixed-toolbar.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+import { Toolbar } from './toolbar';
+
+export function FixedToolbar(props: React.ComponentProps<typeof Toolbar>) {
+  return (
+    <Toolbar
+      {...props}
+      className={cn(
+        'sticky top-0 left-0 z-50 scrollbar-hide w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 p-1 backdrop-blur-sm supports-backdrop-blur:bg-background/60',
+        props.className
+      )}
+    />
+  );
+}

package/src/components/ui/heading-node-static.tsx

@@ -0,0 +1,66 @@
+import type { SlateElementProps } from 'platejs';
+
+import { type VariantProps, cva } from 'class-variance-authority';
+import { SlateElement } from 'platejs';
+
+const headingVariants = cva('relative mb-1', {
+  variants: {
+    variant: {
+      h1: 'mt-[1.6em] pb-1 font-heading text-4xl font-bold',
+      h2: 'mt-[1.4em] pb-px font-heading text-2xl font-semibold tracking-tight',
+      h3: 'mt-[1em] pb-px font-heading text-xl font-semibold tracking-tight',
+      h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',
+      h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',
+      h6: 'mt-[0.75em] text-base font-semibold tracking-tight',
+    },
+  },
+});
+
+export function HeadingElementStatic({
+  variant = 'h1',
+  ...props
+}: SlateElementProps & VariantProps<typeof headingVariants>) {
+  return (
+    <SlateElement
+      as={variant!}
+      className={headingVariants({ variant })}
+      {...props}
+    >
+      {props.children}
+    </SlateElement>
+  );
+}
+
+export function H1ElementStatic(props: SlateElementProps) {
+  return <HeadingElementStatic variant="h1" {...props} />;
+}
+
+export function H2ElementStatic(
+  props: React.ComponentProps<typeof HeadingElementStatic>
+) {
+  return <HeadingElementStatic variant="h2" {...props} />;
+}
+
+export function H3ElementStatic(
+  props: React.ComponentProps<typeof HeadingElementStatic>
+) {
+  return <HeadingElementStatic variant="h3" {...props} />;
+}
+
+export function H4ElementStatic(
+  props: React.ComponentProps<typeof HeadingElementStatic>
+) {
+  return <HeadingElementStatic variant="h4" {...props} />;
+}
+
+export function H5ElementStatic(
+  props: React.ComponentProps<typeof HeadingElementStatic>
+) {
+  return <HeadingElementStatic variant="h5" {...props} />;
+}
+
+export function H6ElementStatic(
+  props: React.ComponentProps<typeof HeadingElementStatic>
+) {
+  return <HeadingElementStatic variant="h6" {...props} />;
+}

package/src/components/ui/heading-node.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import type { PlateElementProps } from 'platejs/react';
+
+import { type VariantProps, cva } from 'class-variance-authority';
+import { PlateElement } from 'platejs/react';
+
+const headingVariants = cva('relative mb-1', {
+  variants: {
+    variant: {
+      h1: 'mt-[1.6em] pb-1 font-heading text-4xl font-bold',
+      h2: 'mt-[1.4em] pb-px font-heading text-2xl font-semibold tracking-tight',
+      h3: 'mt-[1em] pb-px font-heading text-xl font-semibold tracking-tight',
+      h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',
+      h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',
+      h6: 'mt-[0.75em] text-base font-semibold tracking-tight',
+    },
+  },
+});
+
+export function HeadingElement({
+  variant = 'h1',
+  ...props
+}: PlateElementProps & VariantProps<typeof headingVariants>) {
+  return (
+    <PlateElement
+      as={variant!}
+      className={headingVariants({ variant })}
+      {...props}
+    >
+      {props.children}
+    </PlateElement>
+  );
+}
+
+export function H1Element(props: PlateElementProps) {
+  return <HeadingElement variant="h1" {...props} />;
+}
+
+export function H2Element(props: PlateElementProps) {
+  return <HeadingElement variant="h2" {...props} />;
+}
+
+export function H3Element(props: PlateElementProps) {
+  return <HeadingElement variant="h3" {...props} />;
+}
+
+export function H4Element(props: PlateElementProps) {
+  return <HeadingElement variant="h4" {...props} />;
+}
+
+export function H5Element(props: PlateElementProps) {
+  return <HeadingElement variant="h5" {...props} />;
+}
+
+export function H6Element(props: PlateElementProps) {
+  return <HeadingElement variant="h6" {...props} />;
+}

package/src/components/ui/highlight-node-static.tsx

@@ -0,0 +1,11 @@
+import type { SlateLeafProps } from 'platejs';
+
+import { SlateLeaf } from 'platejs';
+
+export function HighlightLeafStatic(props: SlateLeafProps) {
+  return (
+    <SlateLeaf {...props} as="mark" className="bg-highlight/30 text-inherit">
+      {props.children}
+    </SlateLeaf>
+  );
+}

package/src/components/ui/highlight-node.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import type { PlateLeafProps } from 'platejs/react';
+
+import { PlateLeaf } from 'platejs/react';
+
+export function HighlightLeaf(props: PlateLeafProps) {
+  return (
+    <PlateLeaf {...props} as="mark" className="bg-highlight/30 text-inherit">
+      {props.children}
+    </PlateLeaf>
+  );
+}

package/src/components/ui/hr-node-static.tsx

@@ -0,0 +1,20 @@
+import type { SlateElementProps } from 'platejs';
+
+import { SlateElement } from 'platejs';
+
+import { cn } from '@/lib/utils';
+
+export function HrElementStatic(props: SlateElementProps) {
+  return (
+    <SlateElement {...props}>
+      <div className="cursor-text py-6" contentEditable={false}>
+        <hr
+          className={cn(
+            'h-0.5 rounded-sm border-none bg-muted bg-clip-content'
+          )}
+        />
+      </div>
+      {props.children}
+    </SlateElement>
+  );
+}

package/src/components/ui/hr-node.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import type { PlateElementProps } from 'platejs/react';
+
+import {
+  PlateElement,
+  useFocused,
+  useReadOnly,
+  useSelected,
+} from 'platejs/react';
+
+import { cn } from '@/lib/utils';
+
+export function HrElement(props: PlateElementProps) {
+  const readOnly = useReadOnly();
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <PlateElement {...props}>
+      <div className="py-6" contentEditable={false}>
+        <hr
+          className={cn(
+            'h-0.5 rounded-sm border-none bg-muted bg-clip-content',
+            selected && focused && 'ring-2 ring-ring ring-offset-2',
+            !readOnly && 'cursor-pointer'
+          )}
+        />
+      </div>
+      {props.children}
+    </PlateElement>
+  );
+}

package/src/components/ui/kbd-node-static.tsx

@@ -0,0 +1,15 @@
+import type { SlateLeafProps } from 'platejs';
+
+import { SlateLeaf } from 'platejs';
+
+export function KbdLeafStatic(props: SlateLeafProps) {
+  return (
+    <SlateLeaf
+      {...props}
+      as="kbd"
+      className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]"
+    >
+      {props.children}
+    </SlateLeaf>
+  );
+}