chore: cleaning

package.json

@@ -3,7 +3,6 @@
   "version": "4.1.1",
   "source": "src/index.ts",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist/",
@@ -22,7 +21,6 @@
     "build": "vite build",
     "clean": "rimraf dist",
     "lint": "eslint --fix src",
-    "check": "tsc --noEmit",
     "ci": "pnpm build && pnpm test && pnpm lint",
     "prepack": "pnpm build"
   },

src/components/ColorPicker/ColorPicker.tsx

@@ -97,7 +97,7 @@ export default function ColorPicker({
           },
         }}
       >
-        {colorOptions.map(({ name, value }) => (
+        {colorOptions.map(([name, value]) => (
           <Grid item key={value} xs={1} minHeight="20%">
             <TileButton
               variant="contained"

src/components/ColorPicker/colors.ts

@@ -1,54 +1,26 @@
 import { colors } from "@mui/material";
 
-export const {
-  common: { white, black },
-  brown,
-  lime,
-  lightGreen,
-  green,
-  teal,
-  yellow,
-  amber,
-  orange,
-  deepOrange,
-  pink,
-  red,
-  purple,
-  deepPurple,
-  indigo,
-  blue,
-  lightBlue,
-  cyan,
-  blueGrey,
-  grey,
-} = colors;
+export type ColorOption = [name: string, value: string];
 
-export interface ColorOption {
-  name: string;
-  value: string;
-}
-
-export const DEFAULT_COLOR_OPTIONS = [
-  { name: "black", value: black },
-  { name: "brown", value: brown[500] },
-  { name: "teal", value: teal[500] },
-  { name: "green", value: green[500] },
-  { name: "light green", value: lightGreen[500] },
-  { name: "lime", value: lime[500] },
-  { name: "yellow", value: yellow[500] },
-  { name: "amber", value: amber[500] },
-  { name: "orange", value: orange[500] },
-  { name: "deep orange", value: deepOrange[500] },
-  { name: "red", value: red[500] },
-  { name: "pink", value: pink[500] },
-  { name: "purple", value: purple[500] },
-  { name: "deep purple", value: deepPurple[500] },
-  { name: "indigo", value: indigo[500] },
-  { name: "blue", value: blue[500] },
-  { name: "light blue", value: lightBlue[500] },
-  { name: "cyan", value: cyan[500] },
-  { name: "blue grey", value: blueGrey[500] },
-  { name: "grey", value: grey[500] },
+export const DEFAULT_COLOR_OPTIONS: ColorOption[] = [
+  ["black", colors.common.black],
+  ["brown", colors.brown[500]],
+  ["teal", colors.teal[500]],
+  ["green", colors.green[500]],
+  ["light green", colors.lightGreen[500]],
+  ["lime", colors.lime[500]],
+  ["yellow", colors.yellow[500]],
+  ["amber", colors.amber[500]],
+  ["orange", colors.orange[500]],
+  ["deep orange", colors.deepOrange[500]],
+  ["red", colors.red[500]],
+  ["pink", colors.pink[500]],
+  ["purple", colors.purple[500]],
+  ["deep purple", colors.deepPurple[500]],
+  ["indigo", colors.indigo[500]],
+  ["blue", colors.blue[500]],
+  ["light blue", colors.lightBlue[500]],
+  ["cyan", colors.cyan[500]],
+  ["blue grey", colors.blueGrey[500]],
+  ["grey", colors.grey[500]],
 ];
-
-export default colors;

src/components/ColorPicker/spec/ColorPickerMenu.spec.tsx

@@ -1,16 +1,17 @@
 import { render, screen } from "@testing-library/react";
+import { common, red } from "@mui/material/colors";
 import ColorPickerMenu, { ColorPickerMenuProps } from "../ColorPickerMenu";
-import { black, red, white, ColorOption } from "../colors";
+import { ColorOption } from "../colors";
 
 describe("<ColorPickerMenu />", () => {
   let props: ColorPickerMenuProps;
   let colorOptions: ColorOption[] = [];
 
   beforeEach(() => {
     colorOptions = [
-      { name: "black", value: black },
-      { name: "white", value: white },
-      { name: "red", value: red[500] },
+      ["black", common.black],
+      ["white", common.white],
+      ["red", red[500]],
     ];
     props = {
       open: true,
@@ -41,9 +42,8 @@ describe("<ColorPickerMenu />", () => {
   it("should render a button for each color", () => {
     render(<ColorPickerMenu {...props} />);
 
-    colorOptions.forEach(({ name, value }) => {
+    colorOptions.forEach(([name, value]) => {
       const button = screen.getByRole<HTMLButtonElement>("button", { name });
-      expect(button).toBeInTheDocument();
       expect(button.value).toEqual(value);
     });
   });
@@ -52,7 +52,7 @@ describe("<ColorPickerMenu />", () => {
     it("should call onSelectColor with the clicked color", () => {
       render(<ColorPickerMenu {...props} />);
 
-      colorOptions.forEach(({ name, value }) => {
+      colorOptions.forEach(([name, value]) => {
         const button = screen.getByRole("button", {
           name,
         });

src/components/ColorPicker/styled.tsx

@@ -1,9 +1,12 @@
 import { styled, Button, type ButtonProps } from "@mui/material";
-import type { ColorOption } from "./colors";
 
-export const TileButton: (
-  props: ButtonProps & ColorOption
-) => JSX.Element | null = styled(Button)<ColorOption>(({ theme, value }) => ({
+type TileProps = { name: string; value: string };
+
+type Props = ButtonProps & TileProps;
+
+export const TileButton: (props: Props) => JSX.Element | null = styled(
+  Button
+)<TileProps>(({ theme, value }) => ({
   backgroundColor: value,
   width: "100%",
   height: "100%",

src/components/Editor/Editor.tsx

@@ -6,9 +6,9 @@ import {
 } from "@mui/material";
 import { type Value } from "@udecode/plate-core";
 import clsx from "clsx";
-import { FocusEvent, useId, useState } from "react";
+import { FocusEvent, memo, useId, useState } from "react";
 import useEvent from "../../hooks/useEvent";
-import EditorBase, { type EditorBaseProps } from "../EditorBase/EditorBase";
+import EditorBase, { type EditorBaseProps } from "./EditorBase";
 import classes from "./classes";
 import { EditorRoot, NotchedOutline } from "./styled";
 
@@ -36,7 +36,7 @@ type RichTextEditorProps<V extends Value = Value> = Partial<
 export type EditorProps<V extends Value = Value> = RichTextFieldProps &
   RichTextEditorProps<V>;
 
-export default function Editor<V extends Value = Value>({
+function EditorRaw<V extends Value = Value>({
   className,
   color,
   editableProps,
@@ -132,3 +132,7 @@ export default function Editor<V extends Value = Value>({
     </EditorRoot>
   );
 }
+
+const Editor = memo(EditorRaw) as typeof EditorRaw;
+
+export default Editor;

src/components/EditorBase/EditorCore.tsx → src/components/Editor/EditorCore.tsx

@@ -7,6 +7,7 @@ import {
   type PlateProps,
   type Value,
 } from "@udecode/plate-core";
+import { memo } from "react";
 import { type EditableProps } from "slate-react/dist/components/editable";
 import { CONFIG, PLUGINS } from "../../configs";
 import Toolbar from "../Toolbar";
@@ -28,7 +29,7 @@ export type EditorCoreProps<V extends Value = Value> = Pick<
     plateProps?: Partial<PlateProps<V>>;
   };
 
-export default function EditorCore<V extends Value = Value>({
+function EditorCoreRaw<V extends Value = Value>({
   id = "main",
   name,
   editableProps,
@@ -64,3 +65,7 @@ export default function EditorCore<V extends Value = Value>({
     />
   );
 }
+
+const EditorCore = memo(EditorCoreRaw) as typeof EditorCoreRaw;
+
+export default EditorCore;

src/components/Editor/styled.tsx

@@ -1,8 +1,28 @@
-import { type TextFieldProps, styled, Theme } from "@mui/material";
+import {
+  type TextFieldProps,
+  styled,
+  Stack,
+  type StackProps,
+  Theme,
+} from "@mui/material";
 import NotchedOutlineRoot from "@mui/material/OutlinedInput/NotchedOutline";
 import { type ComponentPropsWithoutRef } from "react";
 import classes from "./classes";
 
+export const EditorBaseStack: (props: StackProps) => JSX.Element | null =
+  styled(Stack, {
+    name: "EditorBase",
+    slot: "Stack",
+  })(({ theme }) => ({
+    ...theme.typography.body1,
+    color: theme.palette.text.primary,
+    lineHeight: "1.4375em",
+    position: "relative",
+    cursor: "text",
+    boxSizing: "border-box",
+    width: "100%",
+  }));
+
 type ColorFieldProps = {
   color?: TextFieldProps["color"];
 };

src/components/Toolbar/BlockToolbarButton.tsx

@@ -1,9 +1,21 @@
-import { toggleNodeType, usePlateEditorState } from "@udecode/plate-core";
+import {
+  PlateEditor,
+  someNode,
+  toggleNodeType,
+  usePlateEditorState,
+  Value,
+} from "@udecode/plate-core";
 import type { MouseEvent } from "react";
 import useEvent from "../../hooks/useEvent";
-import isBlockActive from "../../plate-utils/isBlockActive";
 import ToolbarButton, { type ToolbarButtonProps } from "./ToolbarButton";
 
+/**
+ * Check if selection has a node of a matching type
+ */
+function isBlockActive<V extends Value>(editor: PlateEditor<V>, type: string) {
+  return Boolean(editor.selection) && someNode(editor, { match: { type } });
+}
+
 export interface BlockToolbarButtonProps extends ToolbarButtonProps {
   inactiveType?: string;
 }

src/components/Toolbar/LinkToolbarButton.tsx

@@ -1,9 +1,10 @@
 import {
+  focusEditor,
   getPluginType,
   someNode,
   usePlateEditorState,
 } from "@udecode/plate-core";
-import { ELEMENT_LINK } from "@udecode/plate-link";
+import { ELEMENT_LINK, triggerFloatingLink } from "@udecode/plate-link";
 import { MouseEvent } from "react";
 import type { GetLinkUrl } from "../types";
 import useEvent from "../../hooks/useEvent";
@@ -32,6 +33,13 @@ export default function LinkToolbarButton({
     }
 
     event.preventDefault();
+    event.stopPropagation();
+
+    focusEditor(editor, editor.selection ?? editor.prevSelection ?? undefined);
+
+    setTimeout(() => {
+      triggerFloatingLink(editor, { focused: true });
+    }, 0);
     // getAndUpsertLink(editor, getLinkUrl).catch(console.error);
   });
 

src/components/Toolbar/MarkToolbarButton.tsx

@@ -4,7 +4,6 @@ import {
   usePlateEditorState,
 } from "@udecode/plate-core";
 import type { MouseEvent } from "react";
-import hasSelection from "../../plate-utils/hasSelection";
 import useEvent from "../../hooks/useEvent";
 import ToolbarButton, { ToolbarButtonProps } from "./ToolbarButton";
 
@@ -25,7 +24,7 @@ export default function MarkToolbarButton({
 
   const selected =
     propSelected ??
-    (!!editor && hasSelection(editor) && isMarkActive(editor, value));
+    (!!editor && Boolean(editor.selection) && isMarkActive(editor, value));
 
   const onMouseDown = useEvent((e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();

src/components/Toolbar/MarkToolbarButtonGroup.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { usePlateEditorRef } from "@udecode/plate-core";
+import { usePlateEditorState } from "@udecode/plate-core";
 import {
   MARK_BOLD,
   MARK_CODE,
@@ -28,7 +28,7 @@ import ColorPickerToolbarButton from "./ColorPickerToolbarButton";
 import MarkToolbarButton from "./MarkToolbarButton";
 
 const MarkToolbarButtonGroup = memo(function MarkToolbarButtonGroup() {
-  const editor = usePlateEditorRef();
+  const editor = usePlateEditorState();
 
   return (
     <>

src/configs/config.ts

@@ -2,13 +2,13 @@ import { ELEMENT_BLOCKQUOTE } from "@udecode/plate-block-quote";
 import type { ExitBreakPlugin, SoftBreakPlugin } from "@udecode/plate-break";
 import { ELEMENT_CODE_BLOCK } from "@udecode/plate-code-block";
 import {
-  type AnyObject,
   isBlockAboveEmpty,
   isSelectionAtBlockStart,
-  type Value,
+  type AnyObject,
   type PlatePlugin,
   type PlatePluginComponent,
   type PlateProps,
+  type Value,
 } from "@udecode/plate-core";
 import {
   ELEMENT_H1,

src/configs/index.ts

@@ -1,6 +1,7 @@
+import { createPlateUI } from "@udecode/plate-ui";
 import { CONFIG } from "./config";
 import { createStaticPlugins } from "./plugins";
 
-const PLUGINS = createStaticPlugins(CONFIG);
+const PLUGINS = createStaticPlugins(CONFIG, createPlateUI());
 
 export { CONFIG, PLUGINS };