[pull] master from draft-js-plugins:master

.github/workflows/deployWebsite.yml

@@ -39,7 +39,7 @@ jobs:
         run: ./scripts/publishGithubPages.sh
 
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@v4.5.0
+        uses: JamesIves/github-pages-deploy-action@v4.7.2
         with:
           branch: gh-pages
           folder: packages/docs/out

.github/workflows/tests.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Cache node_modules
         id: cache-modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ matrix.node-version }}-${{ runner.OS }}-build-${{ hashFiles('yarn.lock') }}

package.json

@@ -9,17 +9,17 @@
   },
   "dependencies": {
     "draft-js": "^0.11.0",
-    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-import": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/core": "7.23.0",
+    "@babel/core": "7.24.7",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.22.6",
-    "@babel/preset-react": "7.22.15",
-    "@babel/preset-typescript": "7.23.0",
-    "@changesets/cli": "^2.26.2",
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.26.0",
+    "@changesets/cli": "^2.27.10",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^14.1.0",
     "@storybook/builder-webpack5": "^6.5.16",
@@ -28,7 +28,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^27.5.0",
     "@types/react-dom": "^18.0.3",
     "@typescript-eslint/eslint-plugin": "4.33.0",
@@ -43,24 +43,24 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "2.7.1",
     "eslint-plugin-jsx-a11y": "4.0.0",
-    "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-no-only-tests": "^3.3.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^8.0.3",
     "jest": "^27.5.1",
     "linaria": "2.1",
     "lint-staged": "^13.2.2",
     "matched": "^5.0.1",
     "multer": "^1.4.4",
-    "prettier": "^3.0.3",
+    "prettier": "^3.4.1",
     "prismjs": "^1.29.0",
-    "rimraf": "^5.0.5",
-    "rollup": "^2.79.1",
-    "style-loader": "3.3.3",
+    "rimraf": "^5.0.7",
+    "rollup": "^2.79.2",
+    "style-loader": "3.3.4",
     "ts-jest": "27.1.4",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
     "typescript": "4.9.5",
-    "webpack": "^5.88.2"
+    "webpack": "^5.96.1"
   },
   "keywords": [
     "components",

packages/anchor/package.json

@@ -38,10 +38,10 @@
   "license": "MIT",
   "dependencies": {
     "@draft-js-plugins/utils": "^4.0.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "prepend-http": "3.0.1",
     "prop-types": "^15.8.1",
-    "tlds": "^1.242.0"
+    "tlds": "^1.255.0"
   },
   "peerDependencies": {
     "draft-js": "^0.10.1 || ^0.11.0",

packages/buttons/package.json

@@ -34,7 +34,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "clsx": "^2.0.0"
+    "clsx": "^2.1.1"
   },
   "peerDependencies": {
     "draft-js": "^0.10.1 || ^0.11.0",

packages/counter/package.json

@@ -36,9 +36,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "punycode": "^2.3.0"
+    "punycode": "^2.3.1"
   },
   "peerDependencies": {
     "draft-js": "^0.10.1 || ^0.11.0",

packages/divider/package.json

@@ -36,7 +36,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

packages/docs/components/Examples/mention/MultiMentionTriggers/Mentions.ts

@@ -45,4 +45,4 @@ const topics = [
   },
 ];
 
-export default { '@': mentions, '(': topics };
+export default { '@': mentions, '#': topics };

packages/docs/components/Examples/mention/MultiMentionTriggers/MultiMentionTriggers.tsx

@@ -7,7 +7,10 @@ import createMentionPlugin, {
 import editorStyles from './MultiMentionTriggers.module.css';
 import mentions from './Mentions';
 
-const mentionPlugin = createMentionPlugin({ mentionTrigger: ['@', '('] });
+const mentionPlugin = createMentionPlugin({
+  mentionTrigger: ['@', '#'],
+  mentionPrefix: (trigger) => trigger,
+});
 const { MentionSuggestions } = mentionPlugin;
 const plugins = [mentionPlugin];
 

packages/docs/package.json

@@ -11,15 +11,15 @@
   },
   "dependencies": {
     "animateplus": "1.4.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "immutable": "^4.0.0-rc.12",
     "next": "12.3.1",
     "prismjs": "^1.29.0",
     "react-share": "^4.4.1",
-    "whatwg-fetch": "^3.6.19"
+    "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {
-    "@types/prismjs": "^1.26.1",
+    "@types/prismjs": "^1.26.5",
     "raw-loader": "^4.0.2"
   }
 }

packages/docs/pages/plugin/mention/index.tsx

@@ -204,8 +204,10 @@ export default function Mention(): ReactElement {
         <div className={styles.param}>
           <span className={styles.paramName}>mentionPrefix</span>
           <span>
-            By default it is an empty String. For Twitter or Slack like mention
-            behaviour you can provide an `@`
+            Allows you to define a custom prefix to add to the selected
+            mention&apos;s name. Can either be a string or a function that takes
+            the `mentionTrigger` as an argument and returns a string. Defaults
+            to an empty string.
           </span>
         </div>
         <div className={styles.param}>

packages/emoji/package.json

@@ -41,8 +41,8 @@
     "@draft-js-plugins/buttons": "^4.3.3",
     "@draft-js-plugins/utils": "^4.2.1",
     "@popperjs/core": "^2.11.8",
-    "@types/lodash": "^4.14.195",
-    "clsx": "^2.0.0",
+    "@types/lodash": "^4.17.13",
+    "clsx": "^2.1.1",
     "emoji-toolkit": "^7.0",
     "emojibase": "^6.1.0",
     "emojibase-data": "^7.0.1",

packages/focus/package.json

@@ -35,7 +35,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "immutable": "~3.7.4"
   },
   "peerDependencies": {

packages/hashtag/package.json

@@ -36,7 +36,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "clsx": "^2.0.0"
+    "clsx": "^2.1.1"
   },
   "peerDependencies": {
     "draft-js": "^0.10.1 || ^0.11.0",

packages/image/package.json

@@ -35,7 +35,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "clsx": "^2.0.0"
+    "clsx": "^2.1.1"
   },
   "peerDependencies": {
     "draft-js": "^0.10.1 || ^0.11.0",

packages/linkify/package.json

@@ -36,9 +36,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "linkify-it": "^4.0.1",
-    "tlds": "^1.242.0"
+    "tlds": "^1.255.0"
   },
   "peerDependencies": {
     "draft-js": "^0.10.1 || ^0.11.0",

packages/mention/CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## To Be Released
 
+## 5.3.0
+
+- Add support for defining `mentionPrefix` as a callback function that takes the `mentionTrigger` as an argument and returns the prefix.
+
 ## 5.2.2
 
 - adjust react peer dependency

packages/mention/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draft-js-plugins/mention",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "sideEffects": ["*.css"],
   "description": "Mention Plugin for DraftJS",
   "author": {
@@ -37,8 +37,8 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@types/lodash": "^4.14.195",
-    "clsx": "^2.0.0",
+    "@types/lodash": "^4.17.13",
+    "clsx": "^2.1.1",
     "immutable": "~3.7.4",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",

packages/mention/src/MentionSuggestions/MentionSuggestions.tsx

@@ -60,7 +60,7 @@ export interface MentionSuggestionsProps extends MentionSuggestionsPubProps {
   positionSuggestions?: PositionSuggestionsFn;
   ariaProps: AriaProps;
   theme: MentionPluginTheme;
-  mentionPrefix: string;
+  mentionPrefix: string | ((trigger: string) => string);
   mentionTriggers: string[];
   entityMutability: 'SEGMENTED' | 'IMMUTABLE' | 'MUTABLE';
   popperOptions?: PopperOptions;

packages/mention/src/index.tsx

@@ -64,7 +64,7 @@ export interface MentionPluginStore {
 }
 
 export interface MentionPluginConfig {
-  mentionPrefix?: string;
+  mentionPrefix?: string | ((trigger: string) => string);
   theme?: MentionPluginTheme;
   positionSuggestions?: PositionSuggestionsFn;
   mentionComponent?: ComponentType<SubMentionComponentProps>;
@@ -154,7 +154,8 @@ export default (
     theme = defaultTheme,
     positionSuggestions,
     mentionComponent,
-    mentionSuggestionsComponent: MentionSuggestionsComponent = MentionSuggestions,
+    mentionSuggestionsComponent:
+      MentionSuggestionsComponent = MentionSuggestions,
     entityMutability = 'SEGMENTED',
     mentionTrigger = '@',
     mentionRegExp = defaultRegExp,

packages/mention/src/modifiers/addMention.ts

@@ -6,7 +6,7 @@ import getTypeByTrigger from '../utils/getTypeByTrigger';
 export default function addMention(
   editorState: EditorState,
   mention: MentionData,
-  mentionPrefix: string,
+  mentionPrefix: string | ((trigger: string) => string),
   mentionTrigger: string,
   entityMutability: 'SEGMENTED' | 'IMMUTABLE' | 'MUTABLE'
 ): EditorState {
@@ -31,7 +31,7 @@ export default function addMention(
   let mentionReplacedContent = Modifier.replaceText(
     editorState.getCurrentContent(),
     mentionTextSelection,
-    `${mentionPrefix}${mention.name}`,
+    `${typeof mentionPrefix === 'string' ? mentionPrefix : mentionPrefix(mentionTrigger)}${mention.name}`,
     editorState.getCurrentInlineStyle(),
     entityKey
   );

packages/undo/package.json

@@ -36,7 +36,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {