BREAKING CHANGE: add mention

README.md

@@ -11,51 +11,15 @@
 
 <details>
 
-- [Demo](#demo)
 
 - [Installation](#installation)
 
 - [Get started](#get-started)
 
-- [Use the all-in-one component](#use-the-all-in-one-component)
+- [Customization](#customization)
 
-- [Create and provide the `editor` yourself](#create-and-provide-the-editor-yourself)
-
-- [Render read-only rich text content](#render-read-only-rich-text-content)
-
-- [mui-tiptap extensions and components](#mui-tiptap-extensions-and-components)
-
-- [Tiptap extensions](#tiptap-extensions)
-
-- [`HeadingWithAnchor`](#headingwithanchor)
-
-- [`FontSize`](#fontsize)
-
-- [`LinkBubbleMenuHandler`](#linkbubblemenuhandler)
-
-- [`ResizableImage`](#resizableimage)
-
-- [`TableImproved`](#tableimproved)
-
-- [Components](#components)
-
-- [Controls components](#controls-components)
-
-- [Localization](#localization)
-
-- [Tips and suggestions](#tips-and-suggestions)
-
-- [Choosing your editor `extensions`](#choosing-your-editor-extensions)
-
-- [Extension precedence and ordering](#extension-precedence-and-ordering)
-
-- [Other extension tips](#other-extension-tips)
-
-- [Drag-and-drop and paste for images](#drag-and-drop-and-paste-for-images)
-
-- [Re-rendering `RichTextEditor` when `content` changes](#re-rendering-richtexteditor-when-content-changes)
-
-- [Contributing](#contributing)
+- [Props](#props)
+- 
 </details>
 
 ## Installation
@@ -94,8 +58,29 @@ function App() {
 }
 ```
 
+#### Using mentions
+
+```tsx
+import { TextEditor, ITextEditorOption } from 'mui-tiptap-editor';
+
+const mentions: ITextEditorOption[] = [
+  { label: "Lea Thompson", value: "id1" },
+  { label: "Cyndi Lauper", value: "id2" },
+  { label: "Tom Cruise", value: "id13" },
+];
+
+const currentUser: ITextEditorOption = mentions[0];
+
+function App() {
+  return (
+    <TextEditor mentions={mentions} user={currentUser} />
+  );
+}
+```
+
 See [`example/App.tsx`](..example/App.tsx) for a more thorough example of using `TextEditor`.
 
+
 ## Customization
 
 ### Toolbar
@@ -192,6 +177,8 @@ function App () {
 |labelClassName|`string`|empty| Override the label styles
 |bubbleMenuToolbar|`string[]`|`['bold', 'italic', 'underline', 'link']`| Similar to `toolbar` props
 |floatingMenuToolbar|`string[]`|`['bold', 'italic', 'underline', 'link']`| Similar to `toolbar` props
+|mentions|`ITextEditorOption[]`|undefined| List of users to be mentionned when entering or selecting `@`
+|user|`ITextEditorOption`|undefined| Current user
 |value|`string`|empty| Value of the input
-|onChange|`(value: string) => void`|empty| Function to call when the input change
+|onChange|`(value: string) => void`|-| Function to call when the input change
 |...all tiptap features|[EditorOptions](https://github.com/ueberdosis/tiptap/blob/e73073c02069393d858ca7d8c44b56a651417080/packages/core/src/types.ts#L52)|empty| Can access to all tiptap `useEditor` props

example/package.json

@@ -15,7 +15,7 @@
     "@mui/material": "^5.15.2",
     "@tiptap/pm": "^2.2.5",
     "@tiptap/react": "^2.2.5",
-    "mui-tiptap-editor": "^0.1.34",
+    "mui-tiptap-editor": "^0.1.53",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",

example/src/App.tsx

@@ -10,9 +10,40 @@ const tabs = [
   'Read only',
   'Custom global styles',
   'Each element styles',
+  'Mentions',
   'With React Hook Form'
 ];
 
+const mentions = [
+  { label: "Lea Thompson", value: "xxxx1" },
+  { label: "Cyndi Lauper", value: "xxxx2" },
+  { label: "Tom Cruise", value: "xxxx3" },
+  { label: "Madonna", value: "xxxx4" },
+  { label: "Jerry Hall", value: "xxxx5" },
+  { label: "Joan Collins", value: "xxxx6" },
+  { label: "Winona Ryder", value: "xxxx7" },
+  { label: "Christina Applegate", value: "xxxx8" },
+  { label: "Alyssa Milano", value: "xxxx9" },
+  { label: "Molly Ringwald", value: "xxxx10" },
+  { label: "Ally Sheedy", value: "xxxx11" },
+  { label: "Debbie Harry", value: "xxxx12" },
+  { label: "Olivia Newton-John", value: "xxxx13" },
+  { label: "Elton John", value: "xxxx14" },
+  { label: "Michael J. Fox", value: "xxxx15" },
+  { label: "Axl Rose", value: "xxxx16" },
+  { label: "Emilio Estevez", value: "xxxx17" },
+  { label: "Ralph Macchio", value: "xxxx18" },
+  { label: "Rob Lowe", value: "xxxx19" },
+  { label: "Jennifer Grey", value: "xxxx20" },
+  { label: "Mickey Rourke", value: "xxxx21" },
+  { label: "John Cusack", value: "xxxx22" },
+  { label: "Matthew Broderick", value: "xxxx23" },
+  { label: "Justine Bateman", value: "xxxx24" },
+  { label: "Lisa Bonet", value: "xxxx25" }
+];
+
+const currentUser = mentions[0];
+
 const theme = createTheme({
   palette: {
     mode: 'light',
@@ -69,7 +100,14 @@ const App = () => {
             inputClassName="my-input"
           />
         )}
-        {tab === 5 && <WithHookForm />}
+        {tab === 5 && (
+          <TextEditor
+            label="Content"
+            mentions={mentions}
+            user={currentUser}
+          />
+        )}
+        {tab === 6 && <WithHookForm />}
       </Container>
     </ThemeProvider>
   )