Merge pull request #24 from tiavina-mika/develop

BREAKING: fix build

example/package.json

@@ -15,7 +15,7 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.4",
     "@mui/material": "^5.15.2",
-    "mui-tiptap-editor": "^0.3.5",
+    "mui-tiptap-editor": "^0.3.91",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-tiptap-editor",
-  "version": "0.3.5",
+  "version": "0.4.1",
   "description": "Easy to use Tiptap WYSIWYG rich text editor using Material UI (MUI) for React",
   "keywords": [
     "mui",
@@ -49,7 +49,7 @@
   "scripts": {
     "clean": "rimraf dist",
     "dev": "vite",
-    "build": "yarn clean && tsc --project tsconfig.build.json && tsc --project tsconfig.build-esm.json && yarn copy-files && yarn copy-files-esm",
+    "build": "yarn clean && tsc --project tsconfig.build.json && tsc --project tsconfig.build-esm.json && yarn copy-files && yarn copy-files-esm && yarn fixImportExtension",
     "prepare": "npm run build",
     "preview": "vite preview",
     "type:check": "tsc --noEmit",
@@ -64,6 +64,7 @@
     "copy-files": "copyfiles -u 1 src/*.css dist/",
     "copy-files-esm": "copyfiles -u 1 src/*.css dist/esm",
     "clean-cache": "yarn cache clean --all",
+    "fixImportExtension": "ts-add-js-extension --dir=dist",
     "example": "cd example && yarn upgrade && rimraf ./example/node_modules && yarn && yarn dev"
   },
   "dependencies": {
@@ -139,6 +140,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "semantic-release": "^23.0.8",
+    "ts-add-js-extension": "^1.6.4",
     "typescript": "^5.2.2",
     "vite": "5.0.8",
     "vite-tsconfig-paths": "^4.3.1"

src/components/Heading.tsx

@@ -1,10 +1,10 @@
 import { Editor } from "@tiptap/react";
-import { Menu, MenuItem, Fade, Typography, Theme, Button } from "@mui/material";
+import { Menu, MenuItem, Fade, Theme, Button } from "@mui/material";
 import { Level } from "@tiptap/extension-heading";
-import { ITextEditorOption } from "../type";
 import { MouseEvent, useState } from "react";
 import ChevronDown from "../icons/ChevronDown";
 import Icon from "../icons/Icon";
+import { ITextEditorOption } from "./TextEditor";
 
 const isActive = (editor: Editor) => {
   return (

src/components/TextEditor.tsx

@@ -13,7 +13,7 @@ import { useState, SyntheticEvent, ReactNode } from 'react';
 import { useTextEditor } from "../hooks/useTextEditor";
 
 import Toolbar from './Toolbar';
-import { IEditorToolbar, ITextEditorOption } from "../type";
+import { IEditorToolbar } from "../type";
 
 const defaultMenuToolbar: IEditorToolbar[] = ['bold', 'italic', 'underline', 'link'];
 
@@ -70,6 +70,12 @@ const classes = {
   })
 };
 
+export interface ITextEditorOption<T = string> {
+  label: string;
+  value: T,
+  icon?: string | ReactNode;
+  hide?: boolean;
+}
 
 export type TextEditorProps = {
   placeholder?: string;
@@ -100,7 +106,7 @@ export type TextEditorProps = {
   /**
    * input style override
    * it's the responsible of the whole input grey border and border radius
-   * 
+   *
    */
   inputClassName?: string;
 
@@ -154,42 +160,42 @@ export type TextEditorProps = {
 
   /**
    * toolbar (each icon) to be displayed
-   * 
+   *
    * possible values are: [
    * "heading", "bold", "italic", "strike", "link", "underline", "image", "code",
    * "orderedList", "bulletList", "align", "codeBlock", "blockquote", "table",
    * "history", "youtube", "color", "mention"
    * ]
-   * 
+   *
    * default values is all the above
    */
   toolbar?: IEditorToolbar[];
 
   /**
    * toolbar (each icon) to be displayed in bubble menu
-   * 
+   *
    * default values are: ['bold', 'italic', 'underline', 'link']
    */
   bubbleMenuToolbar?: IEditorToolbar[];
 
    /**
    * toolbar (each icon) to be displayed in floating menu
-   * 
+   *
    * default values are: ['bold', 'italic', 'underline', 'link']
    */
   floatingMenuToolbar?: IEditorToolbar[];
 
   /**
    * user object for collaboration
    * the current user or selected user used for collaboration
-   * 
+   *
    * eg: { label: 'John Doe', value: 'some_user_id' }
    */
   user?: ITextEditorOption;
 
   /**
    * list of users used for mentions
-   * 
+   *
    * eg. [{ label: 'John Doe', value: 'some_user_id' }, { label: 'James Smith', value: 'some_user_id_2' }, ...]
    * NOTE: the value should be unique, it's used for profile url
    * ex: /profile/:id or /profile/:slug, :id or :slug here is the value
@@ -198,7 +204,7 @@ export type TextEditorProps = {
 
   /**
    * user pathname for the mentioned user
-   * 
+   *
    * eg. /profile
    * so the final url will be /profile/:id
    * :id here is the value in mentions array (see above)

src/components/mention/Mentions.tsx

@@ -2,7 +2,7 @@ import { Theme } from '@emotion/react';
 import { List, ListItem, ListItemButton, ListItemText } from '@mui/material';
 import { SuggestionProps } from '@tiptap/suggestion';
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { ITextEditorOption } from '../../type';
+import { ITextEditorOption } from '../TextEditor';
 
 const classes = {
   list: (theme: Theme) => ({

src/components/mention/suggestions.ts

@@ -3,7 +3,7 @@ import tippy from "tippy.js";
 
 import Mentions from "./Mentions";
 import { MentionOptions } from "@tiptap/extension-mention";
-import { ITextEditorOption } from "../../type";
+import { ITextEditorOption } from "../TextEditor";
 
 /**
  * Get suggestion for mention

src/hooks/useTextEditor.ts

@@ -35,9 +35,10 @@ import StarterKit from '@tiptap/starter-kit';
 
 import { useEffect } from 'react';
 import Heading from '@tiptap/extension-heading';
-import { ITextEditorOption, ITextEditorCollaborationUser } from '../type';
+import { ITextEditorCollaborationUser } from '../type';
 import { Node } from '@tiptap/pm/model';
 import getSuggestion from '../components/mention/suggestions';
+import { ITextEditorOption } from '../components/TextEditor';
 
 const extensions = [
   Color.configure({ types: [TextStyle.name, ListItem.name] }),

src/index.ts

@@ -1,6 +1,7 @@
 export {
   default as TextEditor,
   type TextEditorProps,
+  type ITextEditorOption
 } from './components/TextEditor';
 export {
   default as TextEditorReadOnly,
@@ -9,6 +10,3 @@ export {
   default as Toolbar,
   type ToolbarProps,
 } from './components/Toolbar';
-export {
-  type ITextEditorOption
-} from './type';

src/type.d.ts

@@ -1,12 +1,5 @@
 import { ReactNode } from "react";
 
-export interface ITextEditorOption<T = string> {
-  label: string;
-  value: T,
-  icon?: string | ReactNode;
-  hide?: boolean;
-}
-
 export interface ITextEditorCollaborationUser {
   name: string;
   color: string;