diff --git a/.eslintrc.json b/.eslintrc.json index db0697a..66d49e8 100644 --- a/.eslintrc.json +++ b/.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" ], diff --git a/package.json b/package.json index 3ee6d7b..76d36f5 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3ec027a..a901a67 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -226,6 +226,9 @@ devDependencies: eslint-plugin-react-refresh: specifier: ^0.4.7 version: 0.4.7(eslint@8.57.0) + eslint-plugin-require-extensions: + specifier: ^0.1.3 + version: 0.1.3(eslint@8.57.0) eslint-plugin-tss-unused-classes: specifier: ^0.0.4 version: 0.0.4(eslint@8.57.0) @@ -3486,6 +3489,15 @@ packages: string.prototype.matchall: 4.0.11 dev: true + /eslint-plugin-require-extensions@0.1.3(eslint@8.57.0): + resolution: {integrity: sha512-T3c1PZ9PIdI3hjV8LdunfYI8gj017UQjzAnCrxuo3wAjneDbTPHdE3oNWInOjMA+z/aBkUtlW5vC0YepYMZIug==} + engines: {node: '>=16'} + peerDependencies: + eslint: '*' + dependencies: + eslint: 8.57.0 + dev: true + /eslint-plugin-tss-unused-classes@0.0.4(eslint@8.57.0): resolution: {integrity: sha512-QwT1wcG0hM00wOcRKqdIDi4WkUOb55flySNGcvICJoGxXcH9Uk49jy0+UFZOVyUIMOYUVkCFLk02Mq+i5hrc7g==} peerDependencies: diff --git a/src/ControlledBubbleMenu.tsx b/src/ControlledBubbleMenu.tsx index 46eaeba..a3b0c75 100644 --- a/src/ControlledBubbleMenu.tsx +++ b/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 diff --git a/src/FieldContainer.tsx b/src/FieldContainer.tsx index 19e6209..5f8fba4 100644 --- a/src/FieldContainer.tsx +++ b/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["classes"]; diff --git a/src/LinkBubbleMenu/EditLinkMenuContent.tsx b/src/LinkBubbleMenu/EditLinkMenuContent.tsx index f5ea9e3..53df78c 100644 --- a/src/LinkBubbleMenu/EditLinkMenuContent.tsx +++ b/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; diff --git a/src/LinkBubbleMenu/ViewLinkMenuContent.tsx b/src/LinkBubbleMenu/ViewLinkMenuContent.tsx index 611bb01..ebdc476 100644 --- a/src/LinkBubbleMenu/ViewLinkMenuContent.tsx +++ b/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; diff --git a/src/LinkBubbleMenu/index.tsx b/src/LinkBubbleMenu/index.tsx index 8c9aefe..eed7aca 100644 --- a/src/LinkBubbleMenu/index.tsx +++ b/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< diff --git a/src/MenuBar.tsx b/src/MenuBar.tsx index 6850629..cd741ec 100644 --- a/src/MenuBar.tsx +++ b/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["classes"]; diff --git a/src/RichTextContent.tsx b/src/RichTextContent.tsx index 42bafe3..62931ff 100644 --- a/src/RichTextContent.tsx +++ b/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["classes"]; diff --git a/src/RichTextEditor.tsx b/src/RichTextEditor.tsx index 31ad8cd..386b5c0 100644 --- a/src/RichTextEditor.tsx +++ b/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 diff --git a/src/RichTextEditorProvider.tsx b/src/RichTextEditorProvider.tsx index be0ddb8..7b69b6c 100644 --- a/src/RichTextEditorProvider.tsx +++ b/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; diff --git a/src/RichTextField.tsx b/src/RichTextField.tsx index 777144a..65af20a 100644 --- a/src/RichTextField.tsx +++ b/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["classes"]; diff --git a/src/RichTextReadOnly.tsx b/src/RichTextReadOnly.tsx index f9ec81c..e23051a 100644 --- a/src/RichTextReadOnly.tsx +++ b/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>, diff --git a/src/TableBubbleMenu.tsx b/src/TableBubbleMenu.tsx index 562d049..ca3d4b8 100644 --- a/src/TableBubbleMenu.tsx +++ b/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 = { /** diff --git a/src/__tests__/utils/slugify.test.ts b/src/__tests__/utils/slugify.test.ts index b053b44..1d6731d 100644 --- a/src/__tests__/utils/slugify.test.ts +++ b/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 diff --git a/src/__tests__/utils/truncateMiddle.test.ts b/src/__tests__/utils/truncateMiddle.test.ts index 30ed03a..1601ccc 100644 --- a/src/__tests__/utils/truncateMiddle.test.ts +++ b/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", () => { diff --git a/src/controls/ColorPicker.tsx b/src/controls/ColorPicker.tsx index 9df44d3..ed2fa74 100644 --- a/src/controls/ColorPicker.tsx +++ b/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"; diff --git a/src/controls/ColorPickerPopper.tsx b/src/controls/ColorPickerPopper.tsx index c7732bf..408fd76 100644 --- a/src/controls/ColorPickerPopper.tsx +++ b/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< diff --git a/src/controls/MenuButton.tsx b/src/controls/MenuButton.tsx index a182a6d..0b0f892 100644 --- a/src/controls/MenuButton.tsx +++ b/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, "value"> { diff --git a/src/controls/MenuButtonAddImage.tsx b/src/controls/MenuButtonAddImage.tsx index d7a8464..a9ff37a 100644 --- a/src/controls/MenuButtonAddImage.tsx +++ b/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. diff --git a/src/controls/MenuButtonAddTable.tsx b/src/controls/MenuButtonAddTable.tsx index 10cb070..4ba61f2 100644 --- a/src/controls/MenuButtonAddTable.tsx +++ b/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; diff --git a/src/controls/MenuButtonAlignCenter.tsx b/src/controls/MenuButtonAlignCenter.tsx index b9c6a9a..81d718b 100644 --- a/src/controls/MenuButtonAlignCenter.tsx +++ b/src/controls/MenuButtonAlignCenter.tsx @@ -1,7 +1,7 @@ /// 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; diff --git a/src/controls/MenuButtonAlignJustify.tsx b/src/controls/MenuButtonAlignJustify.tsx index 175c93d..80e84c6 100644 --- a/src/controls/MenuButtonAlignJustify.tsx +++ b/src/controls/MenuButtonAlignJustify.tsx @@ -1,7 +1,7 @@ /// 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; diff --git a/src/controls/MenuButtonAlignLeft.tsx b/src/controls/MenuButtonAlignLeft.tsx index 264f10b..664a69b 100644 --- a/src/controls/MenuButtonAlignLeft.tsx +++ b/src/controls/MenuButtonAlignLeft.tsx @@ -1,7 +1,7 @@ /// 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; diff --git a/src/controls/MenuButtonAlignRight.tsx b/src/controls/MenuButtonAlignRight.tsx index b2d4f0d..6521aa7 100644 --- a/src/controls/MenuButtonAlignRight.tsx +++ b/src/controls/MenuButtonAlignRight.tsx @@ -1,7 +1,7 @@ /// 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; diff --git a/src/controls/MenuButtonBlockquote.tsx b/src/controls/MenuButtonBlockquote.tsx index 90d3167..e2a629f 100644 --- a/src/controls/MenuButtonBlockquote.tsx +++ b/src/controls/MenuButtonBlockquote.tsx @@ -1,7 +1,7 @@ /// 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; diff --git a/src/controls/MenuButtonBold.tsx b/src/controls/MenuButtonBold.tsx index bca4aa9..423bb3c 100644 --- a/src/controls/MenuButtonBold.tsx +++ b/src/controls/MenuButtonBold.tsx @@ -1,7 +1,7 @@ /// 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; diff --git a/src/controls/MenuButtonBulletedList.tsx b/src/controls/MenuButtonBulletedList.tsx index 6848693..0e22ce7 100644 --- a/src/controls/MenuButtonBulletedList.tsx +++ b/src/controls/MenuButtonBulletedList.tsx @@ -1,7 +1,7 @@ /// 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; diff --git a/src/controls/MenuButtonCode.tsx b/src/controls/MenuButtonCode.tsx index 743b537..d23a55c 100644 --- a/src/controls/MenuButtonCode.tsx +++ b/src/controls/MenuButtonCode.tsx @@ -1,7 +1,7 @@ /// 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; diff --git a/src/controls/MenuButtonCodeBlock.tsx b/src/controls/MenuButtonCodeBlock.tsx index 2e22ae4..388eb10 100644 --- a/src/controls/MenuButtonCodeBlock.tsx +++ b/src/controls/MenuButtonCodeBlock.tsx @@ -1,7 +1,7 @@ /// -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; diff --git a/src/controls/MenuButtonColorPicker.tsx b/src/controls/MenuButtonColorPicker.tsx index cd5a00f..232b8e6 100644 --- a/src/controls/MenuButtonColorPicker.tsx +++ b/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 diff --git a/src/controls/MenuButtonEditLink.tsx b/src/controls/MenuButtonEditLink.tsx index f0a07b0..d4a3baf 100644 --- a/src/controls/MenuButtonEditLink.tsx +++ b/src/controls/MenuButtonEditLink.tsx @@ -1,7 +1,7 @@ import Link from "@mui/icons-material/Link"; import { useRef } from "react"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonEditLinkProps = Partial; diff --git a/src/controls/MenuButtonHighlightColor.tsx b/src/controls/MenuButtonHighlightColor.tsx index adb93c6..7fe1eea 100644 --- a/src/controls/MenuButtonHighlightColor.tsx +++ b/src/controls/MenuButtonHighlightColor.tsx @@ -1,10 +1,10 @@ /// -import { useRichTextEditorContext } from "../context"; -import { FormatInkHighlighterNoBar } from "../icons"; +import { useRichTextEditorContext } from "../context.js"; +import { FormatInkHighlighterNoBar } from "../icons/index.js"; import { MenuButtonColorPicker, type MenuButtonColorPickerProps, -} from "./MenuButtonColorPicker"; +} from "./MenuButtonColorPicker.js"; export interface MenuButtonHighlightColorProps extends Partial { diff --git a/src/controls/MenuButtonHighlightToggle.tsx b/src/controls/MenuButtonHighlightToggle.tsx index 5fd85ae..1fca27c 100644 --- a/src/controls/MenuButtonHighlightToggle.tsx +++ b/src/controls/MenuButtonHighlightToggle.tsx @@ -1,7 +1,7 @@ /// -import { useRichTextEditorContext } from "../context"; -import { FormatInkHighlighter } from "../icons"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import { FormatInkHighlighter } from "../icons/index.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonHighlightToggleProps = Partial; diff --git a/src/controls/MenuButtonHorizontalRule.tsx b/src/controls/MenuButtonHorizontalRule.tsx index aaecb3e..c85c62c 100644 --- a/src/controls/MenuButtonHorizontalRule.tsx +++ b/src/controls/MenuButtonHorizontalRule.tsx @@ -1,7 +1,7 @@ /// import HorizontalRuleIcon from "@mui/icons-material/HorizontalRule"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonHorizontalRuleProps = Partial; diff --git a/src/controls/MenuButtonImageUpload.tsx b/src/controls/MenuButtonImageUpload.tsx index 62cb89d..eb27e07 100644 --- a/src/controls/MenuButtonImageUpload.tsx +++ b/src/controls/MenuButtonImageUpload.tsx @@ -1,14 +1,14 @@ import type { Editor } from "@tiptap/core"; import { useRef, type ComponentPropsWithoutRef } from "react"; import type { SetOptional } from "type-fest"; -import { useRichTextEditorContext } from "../context"; +import { useRichTextEditorContext } from "../context.js"; import { insertImages as insertImagesDefault, type ImageNodeAttributes, -} from "../utils"; +} from "../utils/index.js"; import MenuButtonAddImage, { type MenuButtonAddImageProps, -} from "./MenuButtonAddImage"; +} from "./MenuButtonAddImage.js"; export interface MenuButtonImageUploadProps extends SetOptional { diff --git a/src/controls/MenuButtonIndent.tsx b/src/controls/MenuButtonIndent.tsx index c7c28bc..ec56bf3 100644 --- a/src/controls/MenuButtonIndent.tsx +++ b/src/controls/MenuButtonIndent.tsx @@ -1,6 +1,6 @@ import FormatIndentIncrease from "@mui/icons-material/FormatIndentIncrease"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonIndentProps = Partial; diff --git a/src/controls/MenuButtonItalic.tsx b/src/controls/MenuButtonItalic.tsx index e2bb9f5..0fc1fbd 100644 --- a/src/controls/MenuButtonItalic.tsx +++ b/src/controls/MenuButtonItalic.tsx @@ -1,7 +1,7 @@ /// import FormatItalic from "@mui/icons-material/FormatItalic"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonItalicProps = Partial; diff --git a/src/controls/MenuButtonOrderedList.tsx b/src/controls/MenuButtonOrderedList.tsx index fdb5836..59d7e4b 100644 --- a/src/controls/MenuButtonOrderedList.tsx +++ b/src/controls/MenuButtonOrderedList.tsx @@ -1,7 +1,7 @@ /// import FormatListNumbered from "@mui/icons-material/FormatListNumbered"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonOrderedListProps = Partial; diff --git a/src/controls/MenuButtonRedo.tsx b/src/controls/MenuButtonRedo.tsx index 358a3b5..e7cfdcf 100644 --- a/src/controls/MenuButtonRedo.tsx +++ b/src/controls/MenuButtonRedo.tsx @@ -1,7 +1,7 @@ /// import RedoIcon from "@mui/icons-material/Redo"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonRedoProps = Partial; diff --git a/src/controls/MenuButtonRemoveFormatting.tsx b/src/controls/MenuButtonRemoveFormatting.tsx index 92ea854..8f57b4b 100644 --- a/src/controls/MenuButtonRemoveFormatting.tsx +++ b/src/controls/MenuButtonRemoveFormatting.tsx @@ -1,6 +1,6 @@ import FormatClear from "@mui/icons-material/FormatClear"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonRemoveFormattingProps = Partial; diff --git a/src/controls/MenuButtonStrikethrough.tsx b/src/controls/MenuButtonStrikethrough.tsx index 77444fa..a1a06be 100644 --- a/src/controls/MenuButtonStrikethrough.tsx +++ b/src/controls/MenuButtonStrikethrough.tsx @@ -1,7 +1,7 @@ /// import StrikethroughS from "@mui/icons-material/StrikethroughS"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonStrikethroughProps = Partial; diff --git a/src/controls/MenuButtonSubscript.tsx b/src/controls/MenuButtonSubscript.tsx index 8226219..7b3c01d 100644 --- a/src/controls/MenuButtonSubscript.tsx +++ b/src/controls/MenuButtonSubscript.tsx @@ -1,7 +1,7 @@ /// import Subscript from "@mui/icons-material/Subscript"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonSubscriptProps = Partial; diff --git a/src/controls/MenuButtonSuperscript.tsx b/src/controls/MenuButtonSuperscript.tsx index 71cbcb9..5601810 100644 --- a/src/controls/MenuButtonSuperscript.tsx +++ b/src/controls/MenuButtonSuperscript.tsx @@ -1,7 +1,7 @@ /// import Superscript from "@mui/icons-material/Superscript"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonSuperscriptProps = Partial; diff --git a/src/controls/MenuButtonTaskList.tsx b/src/controls/MenuButtonTaskList.tsx index 3190702..5d87540 100644 --- a/src/controls/MenuButtonTaskList.tsx +++ b/src/controls/MenuButtonTaskList.tsx @@ -1,7 +1,7 @@ /// import Checklist from "@mui/icons-material/Checklist"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonTaskListProps = Partial; diff --git a/src/controls/MenuButtonTextColor.tsx b/src/controls/MenuButtonTextColor.tsx index 6c15d5c..8c00857 100644 --- a/src/controls/MenuButtonTextColor.tsx +++ b/src/controls/MenuButtonTextColor.tsx @@ -1,12 +1,12 @@ /// import type { Editor } from "@tiptap/core"; -import { useRichTextEditorContext } from "../context"; -import { FormatColorTextNoBar } from "../icons"; -import { getAttributesForEachSelected } from "../utils"; +import { useRichTextEditorContext } from "../context.js"; +import { FormatColorTextNoBar } from "../icons/index.js"; +import { getAttributesForEachSelected } from "../utils/index.js"; import { MenuButtonColorPicker, type MenuButtonColorPickerProps, -} from "./MenuButtonColorPicker"; +} from "./MenuButtonColorPicker.js"; export interface MenuButtonTextColorProps extends Partial { diff --git a/src/controls/MenuButtonTooltip.tsx b/src/controls/MenuButtonTooltip.tsx index a79a9ed..df37be1 100644 --- a/src/controls/MenuButtonTooltip.tsx +++ b/src/controls/MenuButtonTooltip.tsx @@ -1,6 +1,6 @@ import { Tooltip, Typography, alpha, type TooltipProps } from "@mui/material"; import { makeStyles } from "tss-react/mui"; -import { getModShortcutKey } from "../utils/platform"; +import { getModShortcutKey } from "../utils/platform.js"; export type MenuButtonTooltipProps = { /** diff --git a/src/controls/MenuButtonUnderline.tsx b/src/controls/MenuButtonUnderline.tsx index c210c82..843c110 100644 --- a/src/controls/MenuButtonUnderline.tsx +++ b/src/controls/MenuButtonUnderline.tsx @@ -1,7 +1,7 @@ /// import FormatUnderlinedIcon from "@mui/icons-material/FormatUnderlined"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonUnderlineProps = Partial; diff --git a/src/controls/MenuButtonUndo.tsx b/src/controls/MenuButtonUndo.tsx index 313c4d7..2fa1fe6 100644 --- a/src/controls/MenuButtonUndo.tsx +++ b/src/controls/MenuButtonUndo.tsx @@ -1,7 +1,7 @@ /// import UndoIcon from "@mui/icons-material/Undo"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonUndoProps = Partial; diff --git a/src/controls/MenuButtonUnindent.tsx b/src/controls/MenuButtonUnindent.tsx index 33ab985..778d5d1 100644 --- a/src/controls/MenuButtonUnindent.tsx +++ b/src/controls/MenuButtonUnindent.tsx @@ -1,6 +1,6 @@ import FormatIndentDecrease from "@mui/icons-material/FormatIndentDecrease"; -import { useRichTextEditorContext } from "../context"; -import MenuButton, { type MenuButtonProps } from "./MenuButton"; +import { useRichTextEditorContext } from "../context.js"; +import MenuButton, { type MenuButtonProps } from "./MenuButton.js"; export type MenuButtonUnindentProps = Partial; diff --git a/src/controls/MenuControlsContainer.tsx b/src/controls/MenuControlsContainer.tsx index 5243d0d..1fd6e9d 100644 --- a/src/controls/MenuControlsContainer.tsx +++ b/src/controls/MenuControlsContainer.tsx @@ -2,7 +2,7 @@ import { makeStyles } from "tss-react/mui"; import type { Except } from "type-fest"; import DebounceRender, { type DebounceRenderProps, -} from "../utils/DebounceRender"; +} from "../utils/DebounceRender.js"; export type MenuControlsContainerProps = { /** The set of controls (buttons, etc) to include in the menu bar. */ diff --git a/src/controls/MenuSelect.tsx b/src/controls/MenuSelect.tsx index c5b3a2a..5231a27 100644 --- a/src/controls/MenuSelect.tsx +++ b/src/controls/MenuSelect.tsx @@ -7,7 +7,7 @@ import { } from "@mui/material"; import { useState } from "react"; import { makeStyles } from "tss-react/mui"; -import MenuButtonTooltip from "./MenuButtonTooltip"; +import MenuButtonTooltip from "./MenuButtonTooltip.js"; export type MenuSelectProps = SelectProps & { /** An optional tooltip to show when hovering over this Select. */ diff --git a/src/controls/MenuSelectFontFamily.tsx b/src/controls/MenuSelectFontFamily.tsx index 940563c..21c783e 100644 --- a/src/controls/MenuSelectFontFamily.tsx +++ b/src/controls/MenuSelectFontFamily.tsx @@ -4,9 +4,9 @@ import type { Editor } from "@tiptap/core"; import type { ReactNode } from "react"; import { makeStyles } from "tss-react/mui"; import type { Except } from "type-fest"; -import { useRichTextEditorContext } from "../context"; -import { getAttributesForEachSelected } from "../utils/getAttributesForEachSelected"; -import MenuSelect, { type MenuSelectProps } from "./MenuSelect"; +import { useRichTextEditorContext } from "../context.js"; +import { getAttributesForEachSelected } from "../utils/getAttributesForEachSelected.js"; +import MenuSelect, { type MenuSelectProps } from "./MenuSelect.js"; export type FontFamilySelectOption = { /** diff --git a/src/controls/MenuSelectFontSize.tsx b/src/controls/MenuSelectFontSize.tsx index 70ee895..c9f4a7a 100644 --- a/src/controls/MenuSelectFontSize.tsx +++ b/src/controls/MenuSelectFontSize.tsx @@ -4,11 +4,11 @@ import type { Editor } from "@tiptap/core"; import type { ReactNode } from "react"; import { makeStyles } from "tss-react/mui"; import type { Except } from "type-fest"; -import { useRichTextEditorContext } from "../context"; -import type { FontSizeAttrs } from "../extensions/FontSize"; -import { getAttributesForEachSelected } from "../utils/getAttributesForEachSelected"; -import { MENU_BUTTON_FONT_SIZE_DEFAULT } from "./MenuButton"; -import MenuSelect, { type MenuSelectProps } from "./MenuSelect"; +import { useRichTextEditorContext } from "../context.js"; +import type { FontSizeAttrs } from "../extensions/FontSize.js"; +import { getAttributesForEachSelected } from "../utils/getAttributesForEachSelected.js"; +import { MENU_BUTTON_FONT_SIZE_DEFAULT } from "./MenuButton.js"; +import MenuSelect, { type MenuSelectProps } from "./MenuSelect.js"; export type FontSizeSelectOptionObject = { /** diff --git a/src/controls/MenuSelectHeading.tsx b/src/controls/MenuSelectHeading.tsx index c08ff14..d9f2519 100644 --- a/src/controls/MenuSelectHeading.tsx +++ b/src/controls/MenuSelectHeading.tsx @@ -4,11 +4,11 @@ import type { Heading, Level } from "@tiptap/extension-heading"; import { useCallback, useMemo, type ReactNode } from "react"; import { makeStyles } from "tss-react/mui"; import type { Except } from "type-fest"; -import { useRichTextEditorContext } from "../context"; -import { getEditorStyles } from "../styles"; -import { getAttributesForEachSelected } from "../utils/getAttributesForEachSelected"; -import MenuButtonTooltip from "./MenuButtonTooltip"; -import MenuSelect, { type MenuSelectProps } from "./MenuSelect"; +import { useRichTextEditorContext } from "../context.js"; +import { getEditorStyles } from "../styles.js"; +import { getAttributesForEachSelected } from "../utils/getAttributesForEachSelected.js"; +import MenuButtonTooltip from "./MenuButtonTooltip.js"; +import MenuSelect, { type MenuSelectProps } from "./MenuSelect.js"; export type MenuSelectHeadingProps = Except< MenuSelectProps, diff --git a/src/controls/MenuSelectTextAlign.tsx b/src/controls/MenuSelectTextAlign.tsx index e92c0bc..aece941 100644 --- a/src/controls/MenuSelectTextAlign.tsx +++ b/src/controls/MenuSelectTextAlign.tsx @@ -5,18 +5,18 @@ import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight"; import { MenuItem, type SelectChangeEvent } from "@mui/material"; import { useCallback, useMemo } from "react"; import { makeStyles } from "tss-react/mui"; -import { useRichTextEditorContext } from "../context"; +import { useRichTextEditorContext } from "../context.js"; import MenuButtonTooltip, { type MenuButtonTooltipProps, -} from "./MenuButtonTooltip"; +} from "./MenuButtonTooltip.js"; // We'll import just the type for TextAlignOptions, which we don't expose // externally but only utilize within the component below, so allow this import // without needing to list extension-text-align as a peer dependency. // eslint-disable-next-line import/no-extraneous-dependencies import type { TextAlignOptions } from "@tiptap/extension-text-align"; import type { Except } from "type-fest"; -import { MENU_BUTTON_FONT_SIZE_DEFAULT } from "./MenuButton"; -import MenuSelect, { type MenuSelectProps } from "./MenuSelect"; +import { MENU_BUTTON_FONT_SIZE_DEFAULT } from "./MenuButton.js"; +import MenuSelect, { type MenuSelectProps } from "./MenuSelect.js"; export type TextAlignSelectOption = { /** diff --git a/src/controls/TableMenuControls.tsx b/src/controls/TableMenuControls.tsx index 458b7b3..d41885a 100644 --- a/src/controls/TableMenuControls.tsx +++ b/src/controls/TableMenuControls.tsx @@ -1,7 +1,7 @@ import FormatColorFill from "@mui/icons-material/FormatColorFill"; import GridOff from "@mui/icons-material/GridOff"; -import MenuDivider from "../MenuDivider"; -import { useRichTextEditorContext } from "../context"; +import MenuDivider from "../MenuDivider.js"; +import { useRichTextEditorContext } from "../context.js"; import { DeleteColumn, DeleteRow, @@ -13,9 +13,9 @@ import { LayoutRowFill, MergeCellsHorizontal, SplitCellsHorizontal, -} from "../icons"; -import MenuButton from "./MenuButton"; -import MenuControlsContainer from "./MenuControlsContainer"; +} from "../icons/index.js"; +import MenuButton from "./MenuButton.js"; +import MenuControlsContainer from "./MenuControlsContainer.js"; export type TableMenuControlsProps = { /** Class applied to the root controls container element. */ diff --git a/src/controls/index.ts b/src/controls/index.ts index 95139c4..2ca12a6 100644 --- a/src/controls/index.ts +++ b/src/controls/index.ts @@ -1,153 +1,153 @@ -export * from "./ColorPicker"; -export * from "./ColorPickerPopper"; -export * from "./ColorSwatchButton"; -export { default as MenuButton, type MenuButtonProps } from "./MenuButton"; +export * from "./ColorPicker.js"; +export * from "./ColorPickerPopper.js"; +export * from "./ColorSwatchButton.js"; +export { default as MenuButton, type MenuButtonProps } from "./MenuButton.js"; export { default as MenuButtonAddImage, type MenuButtonAddImageProps, -} from "./MenuButtonAddImage"; +} from "./MenuButtonAddImage.js"; export { default as MenuButtonAddTable, type MenuButtonAddTableProps, -} from "./MenuButtonAddTable"; +} from "./MenuButtonAddTable.js"; export { default as MenuButtonAlignCenter, type MenuButtonAlignCenterProps, -} from "./MenuButtonAlignCenter"; +} from "./MenuButtonAlignCenter.js"; export { default as MenuButtonAlignJustify, type MenuButtonAlignJustifyProps, -} from "./MenuButtonAlignJustify"; +} from "./MenuButtonAlignJustify.js"; export { default as MenuButtonAlignLeft, type MenuButtonAlignLeftProps, -} from "./MenuButtonAlignLeft"; +} from "./MenuButtonAlignLeft.js"; export { default as MenuButtonAlignRight, type MenuButtonAlignRightProps, -} from "./MenuButtonAlignRight"; +} from "./MenuButtonAlignRight.js"; export { default as MenuButtonBlockquote, type MenuButtonBlockquoteProps, -} from "./MenuButtonBlockquote"; +} from "./MenuButtonBlockquote.js"; export { default as MenuButtonBold, type MenuButtonBoldProps, -} from "./MenuButtonBold"; +} from "./MenuButtonBold.js"; export { default as MenuButtonBulletedList, type MenuButtonBulletedListProps, -} from "./MenuButtonBulletedList"; +} from "./MenuButtonBulletedList.js"; export { default as MenuButtonCode, type MenuButtonCodeProps, -} from "./MenuButtonCode"; +} from "./MenuButtonCode.js"; export { default as MenuButtonCodeBlock, type MenuButtonCodeBlockProps, -} from "./MenuButtonCodeBlock"; -export * from "./MenuButtonColorPicker"; +} from "./MenuButtonCodeBlock.js"; +export * from "./MenuButtonColorPicker.js"; export { default as MenuButtonEditLink, type MenuButtonEditLinkProps, -} from "./MenuButtonEditLink"; +} from "./MenuButtonEditLink.js"; export { default as MenuButtonHighlightColor, type MenuButtonHighlightColorProps, -} from "./MenuButtonHighlightColor"; +} from "./MenuButtonHighlightColor.js"; export { default as MenuButtonHighlightToggle, type MenuButtonHighlightToggleProps, -} from "./MenuButtonHighlightToggle"; +} from "./MenuButtonHighlightToggle.js"; export { default as MenuButtonHorizontalRule, type MenuButtonHorizontalRuleProps, -} from "./MenuButtonHorizontalRule"; +} from "./MenuButtonHorizontalRule.js"; export { default as MenuButtonImageUpload, type MenuButtonImageUploadProps, -} from "./MenuButtonImageUpload"; +} from "./MenuButtonImageUpload.js"; export { default as MenuButtonIndent, type MenuButtonIndentProps, -} from "./MenuButtonIndent"; +} from "./MenuButtonIndent.js"; export { default as MenuButtonItalic, type MenuButtonItalicProps, -} from "./MenuButtonItalic"; +} from "./MenuButtonItalic.js"; export { default as MenuButtonOrderedList, type MenuButtonOrderedListProps, -} from "./MenuButtonOrderedList"; +} from "./MenuButtonOrderedList.js"; export { default as MenuButtonRedo, type MenuButtonRedoProps, -} from "./MenuButtonRedo"; +} from "./MenuButtonRedo.js"; export { default as MenuButtonRemoveFormatting, type MenuButtonRemoveFormattingProps, -} from "./MenuButtonRemoveFormatting"; +} from "./MenuButtonRemoveFormatting.js"; export { default as MenuButtonStrikethrough, type MenuButtonStrikethroughProps, -} from "./MenuButtonStrikethrough"; +} from "./MenuButtonStrikethrough.js"; export { default as MenuButtonSubscript, type MenuButtonSubscriptProps, -} from "./MenuButtonSubscript"; +} from "./MenuButtonSubscript.js"; export { default as MenuButtonSuperscript, type MenuButtonSuperscriptProps, -} from "./MenuButtonSuperscript"; +} from "./MenuButtonSuperscript.js"; export { default as MenuButtonTaskList, type MenuButtonTaskListProps, -} from "./MenuButtonTaskList"; +} from "./MenuButtonTaskList.js"; export { default as MenuButtonTextColor, type MenuButtonTextColorProps, -} from "./MenuButtonTextColor"; +} from "./MenuButtonTextColor.js"; export { default as MenuButtonTooltip, type MenuButtonTooltipProps, -} from "./MenuButtonTooltip"; +} from "./MenuButtonTooltip.js"; export { default as MenuButtonUnderline, type MenuButtonUnderlineProps, -} from "./MenuButtonUnderline"; +} from "./MenuButtonUnderline.js"; export { default as MenuButtonUndo, type MenuButtonUndoProps, -} from "./MenuButtonUndo"; +} from "./MenuButtonUndo.js"; export { default as MenuButtonUnindent, type MenuButtonUnindentProps, -} from "./MenuButtonUnindent"; +} from "./MenuButtonUnindent.js"; export { default as MenuControlsContainer, type MenuControlsContainerProps, -} from "./MenuControlsContainer"; -export { default as MenuSelect, type MenuSelectProps } from "./MenuSelect"; +} from "./MenuControlsContainer.js"; +export { default as MenuSelect, type MenuSelectProps } from "./MenuSelect.js"; export { default as MenuSelectFontFamily, type FontFamilySelectOption, type MenuSelectFontFamilyProps, -} from "./MenuSelectFontFamily"; +} from "./MenuSelectFontFamily.js"; export { default as MenuSelectFontSize, type MenuSelectFontSizeProps, -} from "./MenuSelectFontSize"; +} from "./MenuSelectFontSize.js"; export { default as MenuSelectHeading, type HeadingOptionValue, type MenuSelectHeadingProps, -} from "./MenuSelectHeading"; +} from "./MenuSelectHeading.js"; export { default as MenuSelectTextAlign, type MenuSelectTextAlignProps, type TextAlignSelectOption, -} from "./MenuSelectTextAlign"; +} from "./MenuSelectTextAlign.js"; export { default as TableMenuControls, type TableMenuControlsProps, -} from "./TableMenuControls"; +} from "./TableMenuControls.js"; diff --git a/src/demo/App.tsx b/src/demo/App.tsx index 4f7dbdc..65755b3 100644 --- a/src/demo/App.tsx +++ b/src/demo/App.tsx @@ -13,7 +13,7 @@ import { type PaletteMode, } from "@mui/material"; import { useCallback, useMemo, useState } from "react"; -import Editor from "./Editor"; +import Editor from "./Editor.js"; export default function App() { const systemSettingsPrefersDarkMode = useMediaQuery( diff --git a/src/demo/Editor.tsx b/src/demo/Editor.tsx index 3566fbd..34edf70 100644 --- a/src/demo/Editor.tsx +++ b/src/demo/Editor.tsx @@ -12,9 +12,9 @@ import { TableBubbleMenu, insertImages, type RichTextEditorRef, -} from "../"; -import EditorMenuControls from "./EditorMenuControls"; -import useExtensions from "./useExtensions"; +} from "..//index.js"; +import EditorMenuControls from "./EditorMenuControls.js"; +import useExtensions from "./useExtensions.js"; const exampleContent = '

Hey there đź‘‹

This is a basic example of mui-tiptap, which combines Tiptap with customizable MUI (Material-UI) styles, plus a suite of additional components and extensions! Sure, there are all kinds of text formatting options you’d probably expect from a rich text editor. But wait until you see the @Axl Rose mentions and lists:

  • That’s a bullet list with one …

  • … or two list items.

Isn’t that great? And all of that is editable. But wait, there’s more! Let’s try a code block:

body {\n  display: none;\n}

That’s only the tip of the iceberg. Feel free to add and resize images:

random image

Organize information in tables:

Name

Role

Team

Alice

PM

Internal tools

Bob

Software

Infrastructure

Or write down your groceries:

  • Milk

  • Eggs

  • Sriracha

Wow, that’s amazing. Good work! 👏
— Mom

Give it a try and click around!

'; diff --git a/src/demo/EditorMenuControls.tsx b/src/demo/EditorMenuControls.tsx index f421405..19da5f7 100644 --- a/src/demo/EditorMenuControls.tsx +++ b/src/demo/EditorMenuControls.tsx @@ -30,7 +30,7 @@ import { MenuSelectHeading, MenuSelectTextAlign, isTouchDevice, -} from "../"; +} from "..//index.js"; export default function EditorMenuControls() { const theme = useTheme(); diff --git a/src/demo/SuggestionList.tsx b/src/demo/SuggestionList.tsx index 49374cb..8acbe08 100644 --- a/src/demo/SuggestionList.tsx +++ b/src/demo/SuggestionList.tsx @@ -1,7 +1,7 @@ import { List, ListItem, ListItemButton, Paper } from "@mui/material"; import type { SuggestionOptions, SuggestionProps } from "@tiptap/suggestion"; import { forwardRef, useEffect, useImperativeHandle, useState } from "react"; -import type { MentionSuggestion } from "./mentionSuggestionOptions"; +import type { MentionSuggestion } from "./mentionSuggestionOptions.js"; export type SuggestionListRef = { // For convenience using this SuggestionList from within the diff --git a/src/demo/index.tsx b/src/demo/index.tsx index 3cd639b..50fc109 100644 --- a/src/demo/index.tsx +++ b/src/demo/index.tsx @@ -4,7 +4,7 @@ import "@fontsource/roboto/500.css"; import "@fontsource/roboto/700.css"; import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; -import App from "./App"; +import App from "./App.js"; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const container = document.getElementById("root")!; diff --git a/src/demo/mentionSuggestionOptions.ts b/src/demo/mentionSuggestionOptions.ts index 88039a2..df948bf 100644 --- a/src/demo/mentionSuggestionOptions.ts +++ b/src/demo/mentionSuggestionOptions.ts @@ -1,7 +1,7 @@ import type { MentionOptions } from "@tiptap/extension-mention"; import { ReactRenderer } from "@tiptap/react"; import tippy, { type Instance as TippyInstance } from "tippy.js"; -import SuggestionList, { type SuggestionListRef } from "./SuggestionList"; +import SuggestionList, { type SuggestionListRef } from "./SuggestionList.js"; export type MentionSuggestion = { id: string; diff --git a/src/demo/useExtensions.ts b/src/demo/useExtensions.ts index beb12f2..e1385c9 100644 --- a/src/demo/useExtensions.ts +++ b/src/demo/useExtensions.ts @@ -39,8 +39,8 @@ import { LinkBubbleMenuHandler, ResizableImage, TableImproved, -} from "../"; -import { mentionSuggestionOptions } from "./mentionSuggestionOptions"; +} from "..//index.js"; +import { mentionSuggestionOptions } from "./mentionSuggestionOptions.js"; export type UseExtensionsOptions = { /** Placeholder hint to show in the text input area before a user types a message. */ diff --git a/src/extensions/HeadingWithAnchor.ts b/src/extensions/HeadingWithAnchor.ts index 714a985..103546b 100644 --- a/src/extensions/HeadingWithAnchor.ts +++ b/src/extensions/HeadingWithAnchor.ts @@ -1,7 +1,7 @@ import type { Editor } from "@tiptap/core"; import { Heading, type HeadingOptions } from "@tiptap/extension-heading"; import { ReactNodeViewRenderer } from "@tiptap/react"; -import HeadingWithAnchorComponent from "./HeadingWithAnchorComponent"; +import HeadingWithAnchorComponent from "./HeadingWithAnchorComponent.js"; export type HeadingWithAnchorOptions = HeadingOptions & { /** diff --git a/src/extensions/HeadingWithAnchorComponent.tsx b/src/extensions/HeadingWithAnchorComponent.tsx index 398bf74..5ae5820 100644 --- a/src/extensions/HeadingWithAnchorComponent.tsx +++ b/src/extensions/HeadingWithAnchorComponent.tsx @@ -9,8 +9,8 @@ import type { Node as ProseMirrorNode } from "@tiptap/pm/model"; import { NodeViewContent, NodeViewWrapper } from "@tiptap/react"; import { useMemo } from "react"; import { makeStyles } from "tss-react/mui"; -import { getUtilityClasses } from "../styles"; -import slugify from "../utils/slugify"; +import { getUtilityClasses } from "../styles.js"; +import slugify from "../utils/slugify.js"; // Based on // https://github.com/ueberdosis/tiptap/blob/c9eb6a6299796450c7c1cfdc3552d76070c78c65/packages/extension-heading/src/heading.ts#L41-L48 diff --git a/src/extensions/LinkBubbleMenuHandler.ts b/src/extensions/LinkBubbleMenuHandler.ts index ba1b586..1f60efc 100644 --- a/src/extensions/LinkBubbleMenuHandler.ts +++ b/src/extensions/LinkBubbleMenuHandler.ts @@ -1,6 +1,6 @@ import { Extension, getAttributes } from "@tiptap/core"; import { Plugin, PluginKey } from "@tiptap/pm/state"; -import type { LinkBubbleMenuProps } from "../LinkBubbleMenu"; +import type { LinkBubbleMenuProps } from "../LinkBubbleMenu/index.js"; declare module "@tiptap/core" { interface Commands { diff --git a/src/extensions/ResizableImage.ts b/src/extensions/ResizableImage.ts index e980a26..0d40fd8 100644 --- a/src/extensions/ResizableImage.ts +++ b/src/extensions/ResizableImage.ts @@ -6,7 +6,7 @@ import { } from "@tiptap/core"; import { Image, type ImageOptions } from "@tiptap/extension-image"; import { ReactNodeViewRenderer } from "@tiptap/react"; -import ResizableImageComponent from "./ResizableImageComponent"; +import ResizableImageComponent from "./ResizableImageComponent.js"; export type ResizableImageOptions = ImageOptions & { /** diff --git a/src/extensions/ResizableImageComponent.tsx b/src/extensions/ResizableImageComponent.tsx index d2fec68..9631665 100644 --- a/src/extensions/ResizableImageComponent.tsx +++ b/src/extensions/ResizableImageComponent.tsx @@ -4,8 +4,8 @@ import { NodeViewWrapper } from "@tiptap/react"; import throttle from "lodash/throttle"; import { useMemo, useRef, useState } from "react"; import { makeStyles } from "tss-react/mui"; -import type ResizableImage from "./ResizableImage"; -import { ResizableImageResizer } from "./ResizableImageResizer"; +import type ResizableImage from "./ResizableImage.js"; +import { ResizableImageResizer } from "./ResizableImageResizer.js"; // Based on // https://github.com/ueberdosis/tiptap/blob/ab4a0e2507b4b92c46d293a0bb06bb00a04af6e0/packages/extension-image/src/image.ts#L47-L59 diff --git a/src/extensions/index.ts b/src/extensions/index.ts index c7e24e3..f482d76 100644 --- a/src/extensions/index.ts +++ b/src/extensions/index.ts @@ -2,15 +2,15 @@ export { default as FontSize, type FontSizeAttrs, type FontSizeOptions, -} from "./FontSize"; +} from "./FontSize.js"; export { default as HeadingWithAnchor, scrollToCurrentHeadingAnchor, type HeadingWithAnchorOptions, -} from "./HeadingWithAnchor"; +} from "./HeadingWithAnchor.js"; export { default as LinkBubbleMenuHandler, type LinkBubbleMenuHandlerStorage, -} from "./LinkBubbleMenuHandler"; -export { default as ResizableImage } from "./ResizableImage"; -export { default as TableImproved } from "./TableImproved"; +} from "./LinkBubbleMenuHandler.js"; +export { default as ResizableImage } from "./ResizableImage.js"; +export { default as TableImproved } from "./TableImproved.js"; diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 35e4634..68a5512 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,6 +1,6 @@ export { default as useDebouncedFocus, type UseDebouncedFocusOptions, -} from "./useDebouncedFocus"; -export { default as useEditorOnEditableUpdate } from "./useEditorOnEditableUpdate"; -export { default as useKeyDown } from "./useKeyDown"; +} from "./useDebouncedFocus.js"; +export { default as useEditorOnEditableUpdate } from "./useEditorOnEditableUpdate.js"; +export { default as useKeyDown } from "./useKeyDown.js"; diff --git a/src/icons/index.ts b/src/icons/index.ts index 27574e6..9c3ac94 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -2,21 +2,21 @@ // them directly here rather than importing from an external package to reduce // install size and external dependencies (see // https://github.com/sjdemartini/mui-tiptap/issues/119). -export { default as BorderColorNoBar } from "./BorderColorNoBar"; -export { default as CodeBlock } from "./CodeBlock"; -export { default as DeleteColumn } from "./DeleteColumn"; -export { default as DeleteRow } from "./DeleteRow"; -export { default as FormatColorBar } from "./FormatColorBar"; -export { default as FormatColorFillNoBar } from "./FormatColorFillNoBar"; -export { default as FormatColorTextNoBar } from "./FormatColorTextNoBar"; -export { default as FormatInkHighlighter } from "./FormatInkHighlighter"; -export { default as FormatInkHighlighterNoBar } from "./FormatInkHighlighterNoBar"; -export { default as InsertColumnLeft } from "./InsertColumnLeft"; -export { default as InsertColumnRight } from "./InsertColumnRight"; -export { default as InsertRowBottom } from "./InsertRowBottom"; -export { default as InsertRowTop } from "./InsertRowTop"; -export { default as LayoutColumnFill } from "./LayoutColumnFill"; -export { default as LayoutRowFill } from "./LayoutRowFill"; -export { default as MergeCellsHorizontal } from "./MergeCellsHorizontal"; -export { default as SplitCellsHorizontal } from "./SplitCellsHorizontal"; -export { default as Table } from "./Table"; +export { default as BorderColorNoBar } from "./BorderColorNoBar.js"; +export { default as CodeBlock } from "./CodeBlock.js"; +export { default as DeleteColumn } from "./DeleteColumn.js"; +export { default as DeleteRow } from "./DeleteRow.js"; +export { default as FormatColorBar } from "./FormatColorBar.js"; +export { default as FormatColorFillNoBar } from "./FormatColorFillNoBar.js"; +export { default as FormatColorTextNoBar } from "./FormatColorTextNoBar.js"; +export { default as FormatInkHighlighter } from "./FormatInkHighlighter.js"; +export { default as FormatInkHighlighterNoBar } from "./FormatInkHighlighterNoBar.js"; +export { default as InsertColumnLeft } from "./InsertColumnLeft.js"; +export { default as InsertColumnRight } from "./InsertColumnRight.js"; +export { default as InsertRowBottom } from "./InsertRowBottom.js"; +export { default as InsertRowTop } from "./InsertRowTop.js"; +export { default as LayoutColumnFill } from "./LayoutColumnFill.js"; +export { default as LayoutRowFill } from "./LayoutRowFill.js"; +export { default as MergeCellsHorizontal } from "./MergeCellsHorizontal.js"; +export { default as SplitCellsHorizontal } from "./SplitCellsHorizontal.js"; +export { default as Table } from "./Table.js"; diff --git a/src/index.ts b/src/index.ts index 0ba9b57..cce42c6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,45 +1,48 @@ export { default as ControlledBubbleMenu, type ControlledBubbleMenuProps, -} from "./ControlledBubbleMenu"; +} from "./ControlledBubbleMenu.js"; export { default as LinkBubbleMenu, type LinkBubbleMenuProps, -} from "./LinkBubbleMenu"; -export { default as MenuBar, type MenuBarProps } from "./MenuBar"; -export { default as MenuDivider, type MenuDividerProps } from "./MenuDivider"; +} from "./LinkBubbleMenu/index.js"; +export { default as MenuBar, type MenuBarProps } from "./MenuBar.js"; +export { + default as MenuDivider, + type MenuDividerProps, +} from "./MenuDivider.js"; export { default as RichTextContent, type RichTextContentProps, -} from "./RichTextContent"; +} from "./RichTextContent.js"; export { default as RichTextEditor, type RichTextEditorProps, type RichTextEditorRef, -} from "./RichTextEditor"; +} from "./RichTextEditor.js"; export { default as RichTextEditorProvider, type RichTextEditorProviderProps, -} from "./RichTextEditorProvider"; +} from "./RichTextEditorProvider.js"; export { default as RichTextField, type RichTextFieldProps, -} from "./RichTextField"; +} from "./RichTextField.js"; export { default as RichTextReadOnly, type RichTextReadOnlyProps, -} from "./RichTextReadOnly"; +} from "./RichTextReadOnly.js"; export { default as TableBubbleMenu, type TableBubbleMenuProps, -} from "./TableBubbleMenu"; -export { RichTextEditorContext, useRichTextEditorContext } from "./context"; -export * from "./controls"; -export * from "./extensions"; -export * from "./hooks"; +} from "./TableBubbleMenu.js"; +export { RichTextEditorContext, useRichTextEditorContext } from "./context.js"; +export * from "./controls/index.js"; +export * from "./extensions/index.js"; +export * from "./hooks/index.js"; export { Z_INDEXES, getEditorStyles, getImageBackgroundColorStyles, -} from "./styles"; -export * from "./utils"; +} from "./styles.js"; +export * from "./utils/index.js"; diff --git a/src/utils/getAttributesForEachSelected.ts b/src/utils/getAttributesForEachSelected.ts index b431bff..d832617 100644 --- a/src/utils/getAttributesForEachSelected.ts +++ b/src/utils/getAttributesForEachSelected.ts @@ -1,8 +1,8 @@ import { getSchemaTypeNameByName } from "@tiptap/core"; import type { MarkType, NodeType } from "@tiptap/pm/model"; import type { EditorState } from "@tiptap/pm/state"; -import { getAttributesForMarks } from "./getAttributesForMarks"; -import { getAttributesForNodes } from "./getAttributesForNodes"; +import { getAttributesForMarks } from "./getAttributesForMarks.js"; +import { getAttributesForNodes } from "./getAttributesForNodes.js"; /** * Get the attributes of all currently selected marks and nodes of the given diff --git a/src/utils/index.ts b/src/utils/index.ts index 6c26291..325e312 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,10 +1,10 @@ -export { default as DebounceRender } from "./DebounceRender"; -export * from "./color"; -export { getAttributesForEachSelected } from "./getAttributesForEachSelected"; -export { getAttributesForMarks } from "./getAttributesForMarks"; -export { getAttributesForNodes } from "./getAttributesForNodes"; -export * from "./images"; -export { default as keymapPluginFactory } from "./keymapPluginFactory"; -export { getModShortcutKey, isMac, isTouchDevice } from "./platform"; -export { default as slugify } from "./slugify"; -export { default as truncateMiddle } from "./truncateMiddle"; +export { default as DebounceRender } from "./DebounceRender.js"; +export * from "./color.js"; +export { getAttributesForEachSelected } from "./getAttributesForEachSelected.js"; +export { getAttributesForMarks } from "./getAttributesForMarks.js"; +export { getAttributesForNodes } from "./getAttributesForNodes.js"; +export * from "./images.js"; +export { default as keymapPluginFactory } from "./keymapPluginFactory.js"; +export { getModShortcutKey, isMac, isTouchDevice } from "./platform.js"; +export { default as slugify } from "./slugify.js"; +export { default as truncateMiddle } from "./truncateMiddle.js"; diff --git a/tsconfig.build.json b/tsconfig.build.json index 67a2e24..91beeed 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -3,6 +3,8 @@ "include": ["./src"], "exclude": ["./src/demo", "./src/**/__tests__"], "compilerOptions": { + "module": "CommonJS", + "moduleResolution": "Node10", "outDir": "./dist/cjs" } } diff --git a/tsconfig.json b/tsconfig.json index a0f73c8..8fe1be5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,11 +2,14 @@ "compilerOptions": { "target": "ES2015", "lib": ["ES2015", "DOM", "DOM.Iterable"], - "module": "CommonJS", + "module": "ES2015", "skipLibCheck": true, // Build options - "moduleResolution": "node", + // It would be nice to use moduleResolution "node16", but it's not supported + // by tiptap until v2.5.0 (https://github.com/ueberdosis/tiptap/issues/3488, + // https://github.com/ueberdosis/tiptap/pull/4001) + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "react-jsx",