@groupher/rich-editor 0.0.8 → 0.0.10

package/src/components/ui/inline-combobox.tsx

@@ -0,0 +1,414 @@
+'use client';
+
+import * as React from 'react';
+
+import type { Point, TElement } from 'platejs';
+
+import {
+  type ComboboxItemProps,
+  Combobox,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxItem,
+  ComboboxPopover,
+  ComboboxProvider,
+  ComboboxRow,
+  Portal,
+  useComboboxContext,
+  useComboboxStore,
+} from '@ariakit/react';
+import { filterWords } from '@platejs/combobox';
+import {
+  type UseComboboxInputResult,
+  useComboboxInput,
+  useHTMLInputCursorState,
+} from '@platejs/combobox/react';
+import { cva } from 'class-variance-authority';
+import { useComposedRef, useEditorRef } from 'platejs/react';
+
+import { cn } from '@/lib/utils';
+
+type TFilterFn = (
+  item: { value: string; group?: string; keywords?: string[]; label?: string },
+  search: string
+) => boolean;
+
+type TInlineComboboxContextValue = {
+  filter: TFilterFn | false;
+  inputProps: UseComboboxInputResult['props'];
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  removeInput: UseComboboxInputResult['removeInput'];
+  showTrigger: boolean;
+  trigger: string;
+  setHasEmpty: (hasEmpty: boolean) => void;
+};
+
+const InlineComboboxContext = React.createContext<TInlineComboboxContextValue>(
+  null as unknown as TInlineComboboxContextValue
+);
+
+const defaultFilter: TFilterFn = (
+  { group, keywords = [], label, value },
+  search
+) => {
+  const uniqueTerms = new Set(
+    [value, ...keywords, group, label].filter(Boolean)
+  );
+
+  return Array.from(uniqueTerms).some((keyword) =>
+    keyword ? filterWords(keyword, search) : false
+  );
+};
+
+type TInlineComboboxProps = {
+  children: React.ReactNode;
+  element: TElement;
+  trigger: string;
+  filter?: TFilterFn | false;
+  hideWhenNoValue?: boolean;
+  showTrigger?: boolean;
+  value?: string;
+  setValue?: (value: string) => void;
+};
+
+const InlineCombobox = ({
+  children,
+  element,
+  filter = defaultFilter,
+  hideWhenNoValue = false,
+  setValue: setValueProp,
+  showTrigger = true,
+  trigger,
+  value: valueProp,
+}: TInlineComboboxProps) => {
+  const editor = useEditorRef();
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const cursorState = useHTMLInputCursorState(inputRef);
+
+  const [valueState, setValueState] = React.useState('');
+  const hasValueProp = valueProp !== undefined;
+  const value = hasValueProp ? valueProp : valueState;
+
+  const setValue = React.useCallback(
+    (newValue: string) => {
+      setValueProp?.(newValue);
+
+      if (!hasValueProp) {
+        setValueState(newValue);
+      }
+    },
+    [setValueProp, hasValueProp]
+  );
+
+  const insertPoint = React.useRef<Point | null>(null);
+
+  React.useEffect(() => {
+    const path = editor.api.findPath(element);
+
+    if (!path) return;
+
+    const point = editor.api.before(path);
+
+    if (!point) return;
+
+    const pointRef = editor.api.pointRef(point);
+    insertPoint.current = pointRef.current;
+
+    return () => {
+      pointRef.unref();
+    };
+  }, [editor, element]);
+
+  const { props: inputProps, removeInput } = useComboboxInput({
+    cancelInputOnBlur: true,
+    cursorState,
+    autoFocus: true,
+    ref: inputRef,
+    onCancelInput: (cause: string) => {
+      if (cause !== 'backspace') {
+        editor.tf.insertText(trigger + value, {
+          at: insertPoint?.current ?? undefined,
+        });
+      }
+      if (cause === 'arrowLeft' || cause === 'arrowRight') {
+        editor.tf.move({
+          distance: 1,
+          reverse: cause === 'arrowLeft',
+        });
+      }
+    },
+  });
+
+  const [hasEmpty, setHasEmpty] = React.useState(false);
+
+  const contextValue: TInlineComboboxContextValue = React.useMemo(
+    () => ({
+      filter,
+      inputProps,
+      inputRef,
+      removeInput,
+      setHasEmpty,
+      showTrigger,
+      trigger,
+    }),
+    [trigger, showTrigger, filter, inputProps, removeInput]
+  );
+
+  const store = useComboboxStore({
+    setValue: (newValue: string) =>
+      React.startTransition(() => setValue(newValue)),
+  });
+
+  const items = store.useState('items') as Array<{ id: string }>;
+
+  React.useEffect(() => {
+    if (!items.length) return;
+
+    if (!store.getState().activeId) {
+      store.setActiveId(store.first());
+    }
+  }, [items, store]);
+
+  return (
+    <span contentEditable={false}>
+      <ComboboxProvider
+        open={
+          (items.length > 0 || hasEmpty) &&
+          (!hideWhenNoValue || value.length > 0)
+        }
+        store={store}
+      >
+        <InlineComboboxContext.Provider value={contextValue}>
+          {children}
+        </InlineComboboxContext.Provider>
+      </ComboboxProvider>
+    </span>
+  );
+};
+
+const InlineComboboxInput = ({
+  className,
+  ref: propRef,
+  ...props
+}: React.HTMLAttributes<HTMLInputElement> & {
+  ref?: React.RefObject<HTMLInputElement | null>;
+}) => {
+  const {
+    inputProps,
+    inputRef: contextRef,
+    showTrigger,
+    trigger,
+  } = React.useContext(InlineComboboxContext);
+
+  const store = useComboboxContext();
+
+  if (!store) return null;
+  const value = store.useState('value');
+
+  const ref = useComposedRef(propRef, contextRef);
+
+  return (
+    <>
+      {showTrigger && trigger}
+
+      <span className="relative min-h-[1lh]">
+        <span
+          className="invisible overflow-hidden text-nowrap"
+          aria-hidden="true"
+        >
+          {value || '\u200B'}
+        </span>
+
+        <Combobox
+          ref={ref}
+          className={cn(
+            'absolute top-0 left-0 size-full bg-transparent outline-none',
+            className
+          )}
+          value={value}
+          autoSelect
+          {...inputProps}
+          {...props}
+        />
+      </span>
+    </>
+  );
+};
+
+InlineComboboxInput.displayName = 'InlineComboboxInput';
+
+const InlineComboboxContent = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ComboboxPopover>) => {
+  const store = useComboboxContext();
+
+  if (!store) return null;
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    if (!store) return;
+
+    const state = store.getState();
+    const { items, activeId } = state as {
+      items: Array<{ id: string }>;
+      activeId?: string;
+    };
+
+    if (!items.length) return;
+
+    const currentIndex = items.findIndex((item) => item.id === activeId);
+
+    if (event.key === 'ArrowUp' && currentIndex <= 0) {
+      event.preventDefault();
+      store.setActiveId(store.last());
+    } else if (event.key === 'ArrowDown' && currentIndex >= items.length - 1) {
+      event.preventDefault();
+      store.setActiveId(store.first());
+    }
+  }
+
+  return (
+    <Portal>
+      <ComboboxPopover
+        className={cn(
+          'z-50 max-h-[260px] w-[280px] overflow-y-auto rounded-md bg-popover shadow-md',
+          className
+        )}
+        onKeyDownCapture={handleKeyDown}
+        {...props}
+      />
+    </Portal>
+  );
+};
+
+const comboboxItemVariants = cva(
+  'relative mx-1 flex h-[30px] select-none items-center rounded-sm px-2 text-foreground text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    defaultVariants: {
+      interactive: true,
+    },
+    variants: {
+      interactive: {
+        false: '',
+        true: 'cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground',
+      },
+    },
+  }
+);
+
+const InlineComboboxItem = ({
+  className,
+  focusEditor = true,
+  group,
+  keywords,
+  label,
+  onClick,
+  ...props
+}: {
+  focusEditor?: boolean;
+  group?: string;
+  keywords?: string[];
+  label?: string;
+} & ComboboxItemProps &
+  Required<Pick<ComboboxItemProps, 'value'>>) => {
+  const { value } = props;
+
+  const { filter, removeInput } = React.useContext(InlineComboboxContext);
+
+  const store = useComboboxContext();
+
+  if (!store) return null;
+
+  const search = filter && store.useState('value');
+
+  const visible = React.useMemo(
+    () =>
+      !filter || filter({ group, keywords, label, value }, search as string),
+    [filter, group, keywords, label, value, search]
+  );
+
+  if (!visible) return null;
+
+  return (
+    <ComboboxItem
+      className={cn(comboboxItemVariants(), className)}
+      onClick={(event: React.MouseEvent<HTMLDivElement>) => {
+        removeInput(focusEditor);
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
+};
+
+const InlineComboboxEmpty = ({
+  children,
+  className,
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const { setHasEmpty } = React.useContext(InlineComboboxContext);
+  const store = useComboboxContext();
+
+  if (!store) return null;
+  const items = store.useState('items');
+
+  React.useEffect(() => {
+    setHasEmpty(true);
+
+    return () => {
+      setHasEmpty(false);
+    };
+  }, [setHasEmpty]);
+
+  if (items.length > 0) return null;
+
+  return (
+    <div
+      className={cn(comboboxItemVariants({ interactive: false }), className)}
+    >
+      {children}
+    </div>
+  );
+};
+
+const InlineComboboxRow = ComboboxRow;
+
+function InlineComboboxGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ComboboxGroup>) {
+  return (
+    <ComboboxGroup
+      {...props}
+      className={cn(
+        'hidden not-last:border-b py-1.5 [&:has([role=option])]:block',
+        className
+      )}
+    />
+  );
+}
+
+function InlineComboboxGroupLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof ComboboxGroupLabel>) {
+  return (
+    <ComboboxGroupLabel
+      {...props}
+      className={cn(
+        'mt-1.5 mb-2 px-3 font-medium text-muted-foreground text-xs',
+        className
+      )}
+    />
+  );
+}
+
+export {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxGroup,
+  InlineComboboxGroupLabel,
+  InlineComboboxInput,
+  InlineComboboxItem,
+  InlineComboboxRow,
+};

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

@@ -0,0 +1,31 @@
+'use client';
+
+import type { TLinkElement } from 'platejs';
+import type { PlateElementProps } from 'platejs/react';
+
+import { getLinkAttributes } from '@platejs/link';
+import { PlateElement } from 'platejs/react';
+
+import { cn } from '@/lib/utils';
+
+export function LinkElement(props: PlateElementProps<TLinkElement>) {
+  return (
+    <PlateElement
+      {...props}
+      as="a"
+      className={cn(
+        'font-medium text-primary underline decoration-primary underline-offset-4',
+        props.className
+      )}
+      attributes={{
+        ...props.attributes,
+        ...getLinkAttributes(props.editor, props.element),
+        onMouseOver: (event) => {
+          event.stopPropagation();
+        },
+      }}
+    >
+      {props.children}
+    </PlateElement>
+  );
+}

package/src/components/ui/link-toolbar-button.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import type * as React from 'react';
+
+import {
+  useLinkToolbarButton,
+  useLinkToolbarButtonState,
+} from '@platejs/link/react';
+import { Link } from 'lucide-react';
+
+import { useI18n } from '@/i18n';
+
+import { ToolbarButton } from './toolbar';
+
+export function LinkToolbarButton({
+  tooltip,
+  ...props
+}: React.ComponentProps<typeof ToolbarButton> & { tooltip?: string }) {
+  const state = useLinkToolbarButtonState();
+  const { props: buttonProps } = useLinkToolbarButton(state);
+  const i18n = useI18n();
+
+  return (
+    <ToolbarButton
+      {...props}
+      {...buttonProps}
+      data-plate-focus
+      tooltip={tooltip ?? i18n.toolbar.link}
+    >
+      <Link />
+    </ToolbarButton>
+  );
+}

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

@@ -0,0 +1,126 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import type { TComboboxInputElement, TMentionElement } from "platejs";
+import type { PlateElementProps } from "platejs/react";
+
+import { getMentionOnSelectItem } from "@platejs/mention";
+import { KEYS } from "platejs";
+import {
+	PlateElement,
+	useFocused,
+	useReadOnly,
+	useSelected,
+} from "platejs/react";
+
+import { useI18n } from "@/i18n";
+import { cn } from "@/lib/utils";
+import { useMentionContext } from "@/mention-context";
+
+import {
+	InlineCombobox,
+	InlineComboboxContent,
+	InlineComboboxEmpty,
+	InlineComboboxGroup,
+	InlineComboboxInput,
+	InlineComboboxItem,
+} from "./inline-combobox";
+
+const onSelectItem = getMentionOnSelectItem();
+
+export function MentionElement(
+	props: PlateElementProps<TMentionElement> & {
+		prefix?: string;
+	},
+) {
+	const element = props.element;
+
+	const selected = useSelected();
+	const focused = useFocused();
+	const readOnly = useReadOnly();
+
+	return (
+		<PlateElement
+			{...props}
+			className={cn(
+				"inline-block rounded-md bg-sky-100 px-1.5 py-0.5 align-baseline font-medium text-sky-900",
+				!readOnly && "cursor-pointer",
+				selected && focused && "ring-2 ring-ring",
+				element.children[0][KEYS.bold] === true && "font-bold",
+				element.children[0][KEYS.italic] === true && "italic",
+				element.children[0][KEYS.underline] === true && "underline",
+			)}
+			attributes={{
+				...props.attributes,
+				contentEditable: false,
+				"data-slate-value": element.value,
+				draggable: true,
+			}}
+		>
+			<>
+				@{element.value}
+				{props.children}
+			</>
+		</PlateElement>
+	);
+}
+
+export function MentionInputElement(
+	props: PlateElementProps<TComboboxInputElement>,
+) {
+	const { editor, element } = props;
+	const [search, setSearch] = useState("");
+	const i18n = useI18n();
+	const { mentionOptions: mentionablesProp, onMentionSearch } =
+		useMentionContext();
+
+	const mentionOptions = useMemo(
+		() => mentionablesProp ?? [],
+		[mentionablesProp],
+	);
+
+	useEffect(() => {
+		onMentionSearch?.(search);
+	}, [onMentionSearch, search]);
+
+	return (
+		<PlateElement {...props} as="span">
+			<InlineCombobox
+				value={search}
+				element={element}
+				setValue={setSearch}
+				showTrigger={false}
+				trigger="@"
+				filter={({ value }, query) => {
+					if (query.length === 0) return true;
+
+					return value.toLowerCase().includes(query.toLowerCase());
+				}}
+			>
+				<span className="inline-block rounded-md bg-sky-100 px-1.5 py-0.5 align-baseline text-sm text-sky-900 ring-ring focus-within:ring-2">
+					@
+					<InlineComboboxInput />
+				</span>
+
+				<InlineComboboxContent className="my-1.5">
+					<InlineComboboxEmpty>{i18n.mention.empty}</InlineComboboxEmpty>
+
+					<InlineComboboxGroup>
+						{mentionOptions.map((item) => (
+							<InlineComboboxItem
+								key={item.key}
+								value={item.text}
+								onClick={() => onSelectItem(editor, item, search)}
+							>
+								{item.text}
+							</InlineComboboxItem>
+						))}
+					</InlineComboboxGroup>
+				</InlineComboboxContent>
+			</InlineCombobox>
+
+			{props.children}
+		</PlateElement>
+	);
+}