@groupher/rich-editor 0.0.7 → 0.0.9

package/src/components/ui/editor.tsx

@@ -1,129 +1,129 @@
-'use client';
+"use client";
 
-import * as React from 'react';
+import * as React from "react";
 
-import type { VariantProps } from 'class-variance-authority';
-import type { PlateContentProps, PlateViewProps } from 'platejs/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 { cva } from "class-variance-authority";
+import { PlateContainer, PlateContent, PlateView } from "platejs/react";
 
-import { cn } from '@/lib/utils';
+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]'
-        ),
-      },
-    },
-  }
+	"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}
-    />
-  );
+	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',
-      },
-    },
-  }
+	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-24 text-base sm:px-[max(64px,calc(50%-350px))]",
+				demo: "size-full px-16 pt-4 pb-24 text-base sm:px-[max(64px,calc(50%-350px))]",
+				fullWidth: "size-full px-16 pt-4 pb-24 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 type TEditorProps = 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}
-      />
-    );
-  }
+export const Editor = React.forwardRef<HTMLDivElement, TEditorProps>(
+	({ className, disabled, focused, variant, ...props }, ref) => {
+		return (
+			<PlateContent
+				ref={ref}
+				className={cn(
+					editorVariants({
+						disabled,
+						focused,
+						variant,
+					}),
+					className,
+				)}
+				disabled={disabled}
+				disableDefaultStyles
+				{...props}
+			/>
+		);
+	},
 );
 
-Editor.displayName = 'Editor';
+Editor.displayName = "Editor";
 
 export function EditorView({
-  className,
-  variant,
-  ...props
+	className,
+	variant,
+	...props
 }: PlateViewProps & VariantProps<typeof editorVariants>) {
-  return (
-    <PlateView
-      {...props}
-      className={cn(editorVariants({ variant }), className)}
-    />
-  );
+	return (
+		<PlateView
+			{...props}
+			className={cn(editorVariants({ variant }), className)}
+		/>
+	);
 }
 
-EditorView.displayName = 'EditorView';
+EditorView.displayName = "EditorView";

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

@@ -0,0 +1,71 @@
+'use client';
+
+import * as React from 'react';
+
+import type { PlateElementProps } from 'platejs/react';
+
+import { EmojiInlineIndexSearch, insertEmoji } from '@platejs/emoji';
+import { EmojiPlugin } from '@platejs/emoji/react';
+import { PlateElement, usePluginOption } from 'platejs/react';
+
+import { useDebounce } from '@/hooks/use-debounce';
+
+import {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxGroup,
+  InlineComboboxInput,
+  InlineComboboxItem,
+} from './inline-combobox';
+
+const trailingColonRegex = /:$/;
+
+export function EmojiInputElement(props: PlateElementProps) {
+  const { children, editor, element } = props;
+  const data = usePluginOption(EmojiPlugin, 'data');
+  const [value, setValue] = React.useState('');
+  const debouncedValue = useDebounce(value, 100);
+  const isPending = value !== debouncedValue;
+
+  const filteredEmojis = React.useMemo(() => {
+    if (!data || debouncedValue.trim().length === 0) return [];
+
+    return EmojiInlineIndexSearch.getInstance(data)
+      .search(debouncedValue.replace(trailingColonRegex, ''))
+      .get();
+  }, [data, debouncedValue]);
+
+  return (
+    <PlateElement as="span" {...props}>
+      <InlineCombobox
+        value={value}
+        element={element}
+        filter={false}
+        setValue={setValue}
+        trigger=":"
+        hideWhenNoValue
+      >
+        <InlineComboboxInput />
+
+        <InlineComboboxContent>
+          {!isPending && <InlineComboboxEmpty>No results</InlineComboboxEmpty>}
+
+          <InlineComboboxGroup>
+            {filteredEmojis.map((emoji) => (
+              <InlineComboboxItem
+                key={emoji.id}
+                value={emoji.name}
+                onClick={() => insertEmoji(editor, emoji)}
+              >
+                {emoji.skins[0].native} {emoji.name}
+              </InlineComboboxItem>
+            ))}
+          </InlineComboboxGroup>
+        </InlineComboboxContent>
+      </InlineCombobox>
+
+      {children}
+    </PlateElement>
+  );
+}