Use eslint-plugin-require-extensions to force .js extensions for prop…

…er ESM

This is similar to Tiptap ended up doing here
ueberdosis/tiptap#4001.

.eslintrc.json

@@ -16,7 +16,8 @@
     "import",
     "@typescript-eslint",
     "react-refresh",
-    "tss-unused-classes"
+    "tss-unused-classes",
+    "require-extensions"
   ],
   "extends": [
     "eslint:recommended",
@@ -30,6 +31,7 @@
     "plugin:@typescript-eslint/strict",
     "plugin:import/recommended",
     "plugin:import/typescript",
+    "plugin:require-extensions/recommended",
     "plugin:jsx-a11y/recommended",
     "prettier"
   ],

package.json

@@ -21,7 +21,7 @@
   "files": [
     "dist"
   ],
-  "type": "commonjs",
+  "type": "module",
   "types": "./dist/cjs/index.d.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -173,6 +173,7 @@
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-require-extensions": "^0.1.3",
     "eslint-plugin-tss-unused-classes": "^0.0.4",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",

src/ControlledBubbleMenu.tsx

@@ -9,7 +9,7 @@ import {
 import { isNodeSelection, posToDOMRect, type Editor } from "@tiptap/core";
 import { useCallback } from "react";
 import { makeStyles } from "tss-react/mui";
-import { Z_INDEXES, getUtilityClasses } from "./styles";
+import { Z_INDEXES, getUtilityClasses } from "./styles.js";
 
 export type ControlledBubbleMenuClasses = ReturnType<
   typeof useStyles

src/FieldContainer.tsx

@@ -1,6 +1,6 @@
 import type React from "react";
 import { makeStyles } from "tss-react/mui";
-import { Z_INDEXES, getUtilityClasses } from "./styles";
+import { Z_INDEXES, getUtilityClasses } from "./styles.js";
 
 export type FieldContainerClasses = ReturnType<typeof useStyles>["classes"];
 

src/LinkBubbleMenu/EditLinkMenuContent.tsx

@@ -8,7 +8,7 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import useKeyDown from "../hooks/useKeyDown";
+import useKeyDown from "../hooks/useKeyDown.js";
 
 export type EditLinkMenuContentProps = {
   editor: Editor;

src/LinkBubbleMenu/ViewLinkMenuContent.tsx

@@ -3,8 +3,8 @@ import { getMarkRange, getMarkType, type Editor } from "@tiptap/core";
 import truncate from "lodash/truncate";
 import type { ReactNode } from "react";
 import { makeStyles } from "tss-react/mui";
-import useKeyDown from "../hooks/useKeyDown";
-import truncateMiddle from "../utils/truncateMiddle";
+import useKeyDown from "../hooks/useKeyDown.js";
+import truncateMiddle from "../utils/truncateMiddle.js";
 
 export type ViewLinkMenuContentProps = {
   editor: Editor;

src/LinkBubbleMenu/index.tsx

@@ -3,18 +3,18 @@ import { makeStyles } from "tss-react/mui";
 import type { Except } from "type-fest";
 import ControlledBubbleMenu, {
   type ControlledBubbleMenuProps,
-} from "../ControlledBubbleMenu";
-import { useRichTextEditorContext } from "../context";
+} from "../ControlledBubbleMenu.js";
+import { useRichTextEditorContext } from "../context.js";
 import {
   LinkMenuState,
   type LinkBubbleMenuHandlerStorage,
-} from "../extensions/LinkBubbleMenuHandler";
+} from "../extensions/LinkBubbleMenuHandler.js";
 import EditLinkMenuContent, {
   type EditLinkMenuContentProps,
-} from "./EditLinkMenuContent";
+} from "./EditLinkMenuContent.js";
 import ViewLinkMenuContent, {
   type ViewLinkMenuContentProps,
-} from "./ViewLinkMenuContent";
+} from "./ViewLinkMenuContent.js";
 
 export interface LinkBubbleMenuProps
   extends Partial<

src/MenuBar.tsx

@@ -1,6 +1,6 @@
 import { Collapse } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
-import { Z_INDEXES, getUtilityClasses } from "./styles";
+import { Z_INDEXES, getUtilityClasses } from "./styles.js";
 
 export type MenuBarClasses = ReturnType<typeof useStyles>["classes"];
 

src/RichTextContent.tsx

@@ -3,8 +3,8 @@ import { EditorContent } from "@tiptap/react";
 import { useMemo } from "react";
 import type { CSSObject } from "tss-react";
 import { makeStyles } from "tss-react/mui";
-import { useRichTextEditorContext } from "./context";
-import { getEditorStyles, getUtilityClasses } from "./styles";
+import { useRichTextEditorContext } from "./context.js";
+import { getEditorStyles, getUtilityClasses } from "./styles.js";
 
 export type RichTextContentClasses = ReturnType<typeof useStyles>["classes"];
 

src/RichTextEditor.tsx

@@ -6,8 +6,8 @@ import {
   type DependencyList,
 } from "react";
 import type { Except, SetRequired } from "type-fest";
-import RichTextEditorProvider from "./RichTextEditorProvider";
-import RichTextField, { type RichTextFieldProps } from "./RichTextField";
+import RichTextEditorProvider from "./RichTextEditorProvider.js";
+import RichTextField, { type RichTextFieldProps } from "./RichTextField.js";
 
 // We define our own `UseEditorOptions` type here based on the signature of
 // `useEditor` so that we can support both Tiptap 2.5+ which uses a new

src/RichTextEditorProvider.tsx

@@ -1,5 +1,5 @@
 import type { Editor } from "@tiptap/react";
-import { RichTextEditorContext } from "./context";
+import { RichTextEditorContext } from "./context.js";
 
 export type RichTextEditorProviderProps = {
   editor: Editor | null;

src/RichTextField.tsx

@@ -1,11 +1,13 @@
 import { makeStyles } from "tss-react/mui";
-import FieldContainer from "./FieldContainer";
-import MenuBar, { type MenuBarProps } from "./MenuBar";
-import RichTextContent, { type RichTextContentProps } from "./RichTextContent";
-import { useRichTextEditorContext } from "./context";
-import useDebouncedFocus from "./hooks/useDebouncedFocus";
-import { getUtilityClasses } from "./styles";
-import DebounceRender from "./utils/DebounceRender";
+import FieldContainer from "./FieldContainer.js";
+import MenuBar, { type MenuBarProps } from "./MenuBar.js";
+import RichTextContent, {
+  type RichTextContentProps,
+} from "./RichTextContent.js";
+import { useRichTextEditorContext } from "./context.js";
+import useDebouncedFocus from "./hooks/useDebouncedFocus.js";
+import { getUtilityClasses } from "./styles.js";
+import DebounceRender from "./utils/DebounceRender.js";
 
 export type RichTextFieldClasses = ReturnType<typeof useStyles>["classes"];
 

src/RichTextReadOnly.tsx

@@ -1,9 +1,9 @@
 import { useEditor } from "@tiptap/react";
 import { useEffect, useRef } from "react";
 import type { Except, SetRequired } from "type-fest";
-import RichTextContent from "./RichTextContent";
-import type { UseEditorOptions } from "./RichTextEditor";
-import RichTextEditorProvider from "./RichTextEditorProvider";
+import RichTextContent from "./RichTextContent.js";
+import type { UseEditorOptions } from "./RichTextEditor.js";
+import RichTextEditorProvider from "./RichTextEditorProvider.js";
 
 export type RichTextReadOnlyProps = SetRequired<
   Partial<Except<UseEditorOptions, "editable">>,

src/TableBubbleMenu.tsx

@@ -4,15 +4,15 @@ import { makeStyles } from "tss-react/mui";
 import type { Except } from "type-fest";
 import ControlledBubbleMenu, {
   type ControlledBubbleMenuProps,
-} from "./ControlledBubbleMenu";
-import { useRichTextEditorContext } from "./context";
+} from "./ControlledBubbleMenu.js";
+import { useRichTextEditorContext } from "./context.js";
 import TableMenuControls, {
   type TableMenuControlsProps,
-} from "./controls/TableMenuControls";
-import { useDebouncedFocus } from "./hooks";
+} from "./controls/TableMenuControls.js";
+import { useDebouncedFocus } from "./hooks/index.js";
 import DebounceRender, {
   type DebounceRenderProps,
-} from "./utils/DebounceRender";
+} from "./utils/DebounceRender.js";
 
 export type TableBubbleMenuProps = {
   /**

src/__tests__/utils/slugify.test.ts

@@ -1,6 +1,6 @@
 /* cSpell:disable */
 import { describe, expect, it } from "vitest";
-import slugify from "../../utils/slugify";
+import slugify from "../../utils/slugify.js";
 
 describe("slugify()", () => {
   // Test cases are modeled after Django's slugify, modified based on unicode

src/__tests__/utils/truncateMiddle.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import truncateMiddle from "../../utils/truncateMiddle";
+import truncateMiddle from "../../utils/truncateMiddle.js";
 
 describe("truncateMiddle()", () => {
   it("returns an ellipsis and truncates from the middle of a string", () => {

src/controls/ColorPicker.tsx

@@ -2,8 +2,8 @@ import { TextField } from "@mui/material";
 import { useEffect, useRef } from "react";
 import { HexAlphaColorPicker, HexColorPicker } from "react-colorful";
 import { makeStyles } from "tss-react/mui";
-import { colorToHex as colorToHexDefault } from "../utils/color";
-import { ColorSwatchButton } from "./ColorSwatchButton";
+import { colorToHex as colorToHexDefault } from "../utils/color.js";
+import { ColorSwatchButton } from "./ColorSwatchButton.js";
 
 export type ColorChangeSource = "gradient" | "text" | "swatch";
 

src/controls/ColorPickerPopper.tsx

@@ -10,9 +10,9 @@ import {
 } from "@mui/material";
 import { useEffect, useState } from "react";
 import { makeStyles } from "tss-react/mui";
-import { Z_INDEXES } from "../styles";
-import { ColorPicker } from "./ColorPicker";
-import type { MenuButtonColorPickerProps } from "./MenuButtonColorPicker";
+import { Z_INDEXES } from "../styles.js";
+import { ColorPicker } from "./ColorPicker.js";
+import type { MenuButtonColorPickerProps } from "./MenuButtonColorPicker.js";
 
 export interface ColorPickerPopperBodyProps
   extends Pick<

src/controls/MenuButton.tsx

@@ -8,7 +8,7 @@ import { makeStyles } from "tss-react/mui";
 import type { Except, SetOptional } from "type-fest";
 import MenuButtonTooltip, {
   type MenuButtonTooltipProps,
-} from "./MenuButtonTooltip";
+} from "./MenuButtonTooltip.js";
 
 export interface MenuButtonProps
   extends SetOptional<Except<ToggleButtonProps, "ref" | "children">, "value"> {

src/controls/MenuButtonAddImage.tsx

@@ -1,7 +1,7 @@
 import AddPhotoAlternate from "@mui/icons-material/AddPhotoAlternate";
 import type { SetRequired } from "type-fest";
-import { useRichTextEditorContext } from "../context";
-import MenuButton, { type MenuButtonProps } from "./MenuButton";
+import { useRichTextEditorContext } from "../context.js";
+import MenuButton, { type MenuButtonProps } from "./MenuButton.js";
 
 /**
  * You must provide your own `onClick` handler.

src/controls/MenuButtonAddTable.tsx

@@ -1,6 +1,6 @@
-import { useRichTextEditorContext } from "../context";
-import { Table } from "../icons";
-import MenuButton, { type MenuButtonProps } from "./MenuButton";
+import { useRichTextEditorContext } from "../context.js";
+import { Table } from "../icons/index.js";
+import MenuButton, { type MenuButtonProps } from "./MenuButton.js";
 
 export type MenuButtonAddTableProps = Partial<MenuButtonProps>;
 

src/controls/MenuButtonAlignCenter.tsx

@@ -1,7 +1,7 @@
 /// <reference types="@tiptap/extension-text-align" />
 import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter";
-import { useRichTextEditorContext } from "../context";
-import MenuButton, { type MenuButtonProps } from "./MenuButton";
+import { useRichTextEditorContext } from "../context.js";
+import MenuButton, { type MenuButtonProps } from "./MenuButton.js";
 
 export type MenuButtonAlignCenterProps = Partial<MenuButtonProps>;
 

src/controls/MenuButtonAlignJustify.tsx

@@ -1,7 +1,7 @@
 /// <reference types="@tiptap/extension-text-align" />
 import FormatAlignJustifyIcon from "@mui/icons-material/FormatAlignJustify";
-import { useRichTextEditorContext } from "../context";
-import MenuButton, { type MenuButtonProps } from "./MenuButton";
+import { useRichTextEditorContext } from "../context.js";
+import MenuButton, { type MenuButtonProps } from "./MenuButton.js";
 
 export type MenuButtonAlignJustifyProps = Partial<MenuButtonProps>;
 

src/controls/MenuButtonAlignLeft.tsx

@@ -1,7 +1,7 @@
 /// <reference types="@tiptap/extension-text-align" />
 import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
-import { useRichTextEditorContext } from "../context";
-import MenuButton, { type MenuButtonProps } from "./MenuButton";
+import { useRichTextEditorContext } from "../context.js";
+import MenuButton, { type MenuButtonProps } from "./MenuButton.js";
 
 export type MenuButtonAlignLeftProps = Partial<MenuButtonProps>;
 

src/controls/MenuButtonAlignRight.tsx

@@ -1,7 +1,7 @@
 /// <reference types="@tiptap/extension-text-align" />
 import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight";
-import { useRichTextEditorContext } from "../context";
-import MenuButton, { type MenuButtonProps } from "./MenuButton";
+import { useRichTextEditorContext } from "../context.js";
+import MenuButton, { type MenuButtonProps } from "./MenuButton.js";
 
 export type MenuButtonAlignRightProps = Partial<MenuButtonProps>;
 

src/controls/MenuButtonBlockquote.tsx

@@ -1,7 +1,7 @@
 /// <reference types="@tiptap/extension-blockquote" />
 import FormatQuote from "@mui/icons-material/FormatQuote";
-import { useRichTextEditorContext } from "../context";
-import MenuButton, { type MenuButtonProps } from "./MenuButton";
+import { useRichTextEditorContext } from "../context.js";
+import MenuButton, { type MenuButtonProps } from "./MenuButton.js";
 
 export type MenuButtonBlockquoteProps = Partial<MenuButtonProps>;
 

src/controls/MenuButtonBold.tsx

@@ -1,7 +1,7 @@
 /// <reference types="@tiptap/extension-bold" />
 import FormatBold from "@mui/icons-material/FormatBold";
-import { useRichTextEditorContext } from "../context";
-import MenuButton, { type MenuButtonProps } from "./MenuButton";
+import { useRichTextEditorContext } from "../context.js";
+import MenuButton, { type MenuButtonProps } from "./MenuButton.js";
 
 export type MenuButtonBoldProps = Partial<MenuButtonProps>;
 

src/controls/MenuButtonBulletedList.tsx

@@ -1,7 +1,7 @@
 /// <reference types="@tiptap/extension-bullet-list" />
 import FormatListBulleted from "@mui/icons-material/FormatListBulleted";
-import { useRichTextEditorContext } from "../context";
-import MenuButton, { type MenuButtonProps } from "./MenuButton";
+import { useRichTextEditorContext } from "../context.js";
+import MenuButton, { type MenuButtonProps } from "./MenuButton.js";
 
 export type MenuButtonBulletedListProps = Partial<MenuButtonProps>;
 

src/controls/MenuButtonCode.tsx

@@ -1,7 +1,7 @@
 /// <reference types="@tiptap/extension-code" />
 import Code from "@mui/icons-material/Code";
-import { useRichTextEditorContext } from "../context";
-import MenuButton, { type MenuButtonProps } from "./MenuButton";
+import { useRichTextEditorContext } from "../context.js";
+import MenuButton, { type MenuButtonProps } from "./MenuButton.js";
 
 export type MenuButtonCodeProps = Partial<MenuButtonProps>;
 

src/controls/MenuButtonCodeBlock.tsx

@@ -1,7 +1,7 @@
 /// <reference types="@tiptap/extension-code-block" />
-import { useRichTextEditorContext } from "../context";
-import { CodeBlock } from "../icons";
-import MenuButton, { type MenuButtonProps } from "./MenuButton";
+import { useRichTextEditorContext } from "../context.js";
+import { CodeBlock } from "../icons/index.js";
+import MenuButton, { type MenuButtonProps } from "./MenuButton.js";
 
 export type MenuButtonCodeBlockProps = Partial<MenuButtonProps>;
 

src/controls/MenuButtonColorPicker.tsx

@@ -2,13 +2,13 @@ import type { PopperProps } from "@mui/material";
 import { useState, type ReactNode } from "react";
 import { makeStyles } from "tss-react/mui";
 import type { Except } from "type-fest";
-import { FormatColorBar } from "../icons";
-import type { ColorPickerProps, SwatchColorOption } from "./ColorPicker";
-import { ColorPickerPopper } from "./ColorPickerPopper";
+import { FormatColorBar } from "../icons/index.js";
+import type { ColorPickerProps, SwatchColorOption } from "./ColorPicker.js";
+import { ColorPickerPopper } from "./ColorPickerPopper.js";
 import MenuButton, {
   MENU_BUTTON_FONT_SIZE_DEFAULT,
   type MenuButtonProps,
-} from "./MenuButton";
+} from "./MenuButton.js";
 
 export interface MenuButtonColorPickerProps
   // Omit the default `color`, `value`, and `onChange` toggle button props so