@atlaskit/prosemirror-input-rules 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/prosemirror-input-rules
 
+## 3.4.0
+
+### Minor Changes
+
+- [#196046](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/196046)
+  [`b0dad85aa7c35`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b0dad85aa7c35) -
+  [ux] [ED-27974] Allow hyperlink plugin to change text to link on blur
+
 ## 3.3.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -1,20 +1,26 @@
 {
-    "extends": "../../../../tsconfig.entry-points.confluence.json",
-    "compilerOptions": {
-        "declaration": true,
-        "target": "es5",
-        "composite": true,
-        "outDir": "../dist",
-        "rootDir": "../"
-    },
-    "include": [
-        "../src/**/*.ts",
-        "../src/**/*.tsx"
-    ],
-    "exclude": [
-        "../src/**/__tests__/*",
-        "../src/**/*.test.*",
-        "../src/**/test.*"
-    ],
-    "references": []
+	"extends": "../../../../tsconfig.entry-points.confluence.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"composite": true,
+		"outDir": "../../../../../confluence/tsDist/@atlaskit__prosemirror-input-rules",
+		"rootDir": "../"
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": []
 }

package/afm-dev-agents/tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"extends": "../../../../tsconfig.entry-points.dev-agents.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../dev-agents/tsDist/@atlaskit__prosemirror-input-rules/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": []
+}

package/afm-jira/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": []
 }

package/afm-post-office/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": []
 }

package/afm-rovo-extension/tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"extends": "../../../../tsconfig.entry-points.rovo-extension.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../rovo-extension/tsDist/@atlaskit__prosemirror-input-rules/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": []
+}

package/afm-townsquare/tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"extends": "../../../../tsconfig.entry-points.townsquare.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../townsquare/tsDist/@atlaskit__prosemirror-input-rules/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": []
+}

package/afm-volt/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"extends": "../../../../tsconfig.entry-points.volt.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../volt/tsDist/@atlaskit__prosemirror-input-rules/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": []
+}

package/build/tsconfig.json

@@ -12,6 +12,12 @@
   "exclude": [
     "../src/**/__tests__/*",
     "../src/**/*.test.*",
-    "../src/**/test.*"
+    "../src/**/test.*",
+    "../src/**/examples.*",
+    "../src/**/examples/*",
+    "../src/**/examples/**/*",
+    "../src/**/*.stories.*",
+    "../src/**/stories/*",
+    "../src/**/stories/**/*"
   ]
-}
+}

package/dist/cjs/plugin.js

@@ -67,6 +67,26 @@ function createInputRulePlugin(pluginName, rules) {
         });
       },
       handleDOMEvents: {
+        blur: function blur(view) {
+          if (!(options !== null && options !== void 0 && options.checkOnBlur)) {
+            return false;
+          }
+          var selection = view.state.selection;
+          if (!(selection instanceof _state.TextSelection)) {
+            return;
+          }
+          var $cursor = selection.$cursor;
+          if ($cursor) {
+            var _options$appendTextOn;
+            inputEvent({
+              view: view,
+              from: $cursor.pos,
+              to: $cursor.pos,
+              text: (_options$appendTextOn = options.appendTextOnBlur) !== null && _options$appendTextOn !== void 0 ? _options$appendTextOn : ''
+            });
+          }
+          return false;
+        },
         compositionend: function compositionend(view) {
           setTimeout(function () {
             var selection = view.state.selection;

package/dist/cjs/utils.js

@@ -34,7 +34,9 @@ var createPlugin = exports.createPlugin = function createPlugin(pluginName, rule
   var _options$isBlockNodeR = options.isBlockNodeRule,
     isBlockNodeRule = _options$isBlockNodeR === void 0 ? false : _options$isBlockNodeR,
     _options$allowInsertT = options.allowInsertTextOnDocument,
-    allowInsertTextOnDocument = _options$allowInsertT === void 0 ? true : _options$allowInsertT;
+    allowInsertTextOnDocument = _options$allowInsertT === void 0 ? true : _options$allowInsertT,
+    checkOnBlur = options.checkOnBlur,
+    appendTextOnBlur = options.appendTextOnBlur;
   var onInputEvent = function onInputEvent(_ref) {
     var state = _ref.state,
       from = _ref.from,
@@ -52,6 +54,8 @@ var createPlugin = exports.createPlugin = function createPlugin(pluginName, rule
     onInputEvent: onInputEvent,
     onBeforeRegexMatch: function onBeforeRegexMatch(tr) {
       (0, _history.closeHistory)(tr);
-    }
+    },
+    checkOnBlur: checkOnBlur,
+    appendTextOnBlur: appendTextOnBlur
   });
 };

package/dist/es2019/plugin.js

@@ -62,6 +62,28 @@ export function createInputRulePlugin(pluginName, rules, options = {}) {
         });
       },
       handleDOMEvents: {
+        blur: view => {
+          if (!(options !== null && options !== void 0 && options.checkOnBlur)) {
+            return false;
+          }
+          const selection = view.state.selection;
+          if (!(selection instanceof TextSelection)) {
+            return;
+          }
+          const {
+            $cursor
+          } = selection;
+          if ($cursor) {
+            var _options$appendTextOn;
+            inputEvent({
+              view,
+              from: $cursor.pos,
+              to: $cursor.pos,
+              text: (_options$appendTextOn = options.appendTextOnBlur) !== null && _options$appendTextOn !== void 0 ? _options$appendTextOn : ''
+            });
+          }
+          return false;
+        },
         compositionend: view => {
           setTimeout(() => {
             const selection = view.state.selection;

package/dist/es2019/utils.js

@@ -26,7 +26,9 @@ const isCursorInsideUnsupportedMarks = (state, marksNameUnsupported) => {
 export const createPlugin = (pluginName, rules, options = {}) => {
   const {
     isBlockNodeRule = false,
-    allowInsertTextOnDocument = true
+    allowInsertTextOnDocument = true,
+    checkOnBlur,
+    appendTextOnBlur
   } = options;
   const onInputEvent = ({
     state,
@@ -46,6 +48,8 @@ export const createPlugin = (pluginName, rules, options = {}) => {
     onInputEvent,
     onBeforeRegexMatch: tr => {
       closeHistory(tr);
-    }
+    },
+    checkOnBlur,
+    appendTextOnBlur
   });
 };

package/dist/esm/plugin.js

@@ -61,6 +61,26 @@ export function createInputRulePlugin(pluginName, rules) {
         });
       },
       handleDOMEvents: {
+        blur: function blur(view) {
+          if (!(options !== null && options !== void 0 && options.checkOnBlur)) {
+            return false;
+          }
+          var selection = view.state.selection;
+          if (!(selection instanceof TextSelection)) {
+            return;
+          }
+          var $cursor = selection.$cursor;
+          if ($cursor) {
+            var _options$appendTextOn;
+            inputEvent({
+              view: view,
+              from: $cursor.pos,
+              to: $cursor.pos,
+              text: (_options$appendTextOn = options.appendTextOnBlur) !== null && _options$appendTextOn !== void 0 ? _options$appendTextOn : ''
+            });
+          }
+          return false;
+        },
         compositionend: function compositionend(view) {
           setTimeout(function () {
             var selection = view.state.selection;

package/dist/esm/utils.js

@@ -28,7 +28,9 @@ export var createPlugin = function createPlugin(pluginName, rules) {
   var _options$isBlockNodeR = options.isBlockNodeRule,
     isBlockNodeRule = _options$isBlockNodeR === void 0 ? false : _options$isBlockNodeR,
     _options$allowInsertT = options.allowInsertTextOnDocument,
-    allowInsertTextOnDocument = _options$allowInsertT === void 0 ? true : _options$allowInsertT;
+    allowInsertTextOnDocument = _options$allowInsertT === void 0 ? true : _options$allowInsertT,
+    checkOnBlur = options.checkOnBlur,
+    appendTextOnBlur = options.appendTextOnBlur;
   var onInputEvent = function onInputEvent(_ref) {
     var state = _ref.state,
       from = _ref.from,
@@ -46,6 +48,8 @@ export var createPlugin = function createPlugin(pluginName, rules) {
     onInputEvent: onInputEvent,
     onBeforeRegexMatch: function onBeforeRegexMatch(tr) {
       closeHistory(tr);
-    }
+    },
+    checkOnBlur: checkOnBlur,
+    appendTextOnBlur: appendTextOnBlur
   });
 };

package/dist/types/plugin.d.ts

@@ -3,6 +3,8 @@ import type { InputRuleWrapper } from './editor-common';
 import type { OnBeforeRegexMatch, OnInputEvent } from './types';
 type Options = {
     allowInsertTextOnDocument?: boolean;
+    checkOnBlur?: boolean;
+    appendTextOnBlur?: string;
     onInputEvent?: OnInputEvent;
     onBeforeRegexMatch?: OnBeforeRegexMatch;
 };

package/dist/types/utils.d.ts

@@ -3,6 +3,15 @@ import type { InputRuleWrapper } from './editor-common';
 type Options = {
     isBlockNodeRule?: boolean;
     allowInsertTextOnDocument?: boolean;
+    /**
+     * Run checks on blur of the editor as well as during input
+     */
+    checkOnBlur?: boolean;
+    /**
+     * Append text to the checked text on blur. Useful for checks that normally require a trailing
+     * space or similar
+     */
+    appendTextOnBlur?: string;
 };
 export declare const createPlugin: (pluginName: string, rules: Array<InputRuleWrapper>, options?: Options) => SafePluginSpec;
 export {};

package/dist/types-ts4.5/plugin.d.ts

@@ -3,6 +3,8 @@ import type { InputRuleWrapper } from './editor-common';
 import type { OnBeforeRegexMatch, OnInputEvent } from './types';
 type Options = {
     allowInsertTextOnDocument?: boolean;
+    checkOnBlur?: boolean;
+    appendTextOnBlur?: string;
     onInputEvent?: OnInputEvent;
     onBeforeRegexMatch?: OnBeforeRegexMatch;
 };

package/dist/types-ts4.5/utils.d.ts

@@ -3,6 +3,15 @@ import type { InputRuleWrapper } from './editor-common';
 type Options = {
     isBlockNodeRule?: boolean;
     allowInsertTextOnDocument?: boolean;
+    /**
+     * Run checks on blur of the editor as well as during input
+     */
+    checkOnBlur?: boolean;
+    /**
+     * Append text to the checked text on blur. Useful for checks that normally require a trailing
+     * space or similar
+     */
+    appendTextOnBlur?: string;
 };
 export declare const createPlugin: (pluginName: string, rules: Array<InputRuleWrapper>, options?: Options) => SafePluginSpec;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/prosemirror-input-rules",
-	"version": "3.3.0",
+	"version": "3.4.0",
 	"description": "A package that contains helpers to create autoformatting rules for ProseMirror",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@babel/runtime": "^7.0.0"
 	},
 	"devDependencies": {
-		"@atlaskit/editor-common": "^99.10.0"
+		"@atlaskit/editor-common": "^107.17.0"
 	},
 	"techstack": {
 		"@atlassian/frontend": {

package/src/__tests__/unit/plugin.ts

@@ -168,4 +168,44 @@ describe('input-tule/plugin/createInputRulePlugin', () => {
 			});
 		});
 	});
+
+	describe('on blur behaviour', () => {
+		let handlerMock: jest.Mock;
+		let editorView: EditorView;
+
+		beforeEach(() => {
+			handlerMock = jest.fn().mockImplementation((state: EditorState) => {
+				return state.tr;
+			});
+
+			const NAIVE_URL_WITH_SPACE_REGEX = /(\S*)(https?:\/\/[^\s]+\.[^\s]+)\s/u;
+
+			const myCustomInputRule = new SafePlugin(
+				createInputRulePlugin(
+					'lol',
+					[
+						{
+							match: NAIVE_URL_WITH_SPACE_REGEX,
+							handler: handlerMock,
+						},
+					],
+					{
+						checkOnBlur: true,
+						appendTextOnBlur: ' ',
+					},
+				),
+			);
+
+			editorView = createEditorView(doc(p('http://atlassian.net{<>}')), myCustomInputRule);
+		});
+
+		it('should call the handler on blur with appended text', () => {
+			jest.spyOn(editorView, 'dispatch').mockImplementation((tr) => {});
+			editorView.dom.dispatchEvent(new FocusEvent('blur'));
+
+			expect(handlerMock).toHaveBeenCalledTimes(1);
+			const [, match] = handlerMock.mock.calls[0];
+			expect(match[0]).toEqual('http://atlassian.net ');
+		});
+	});
 });

package/src/plugin.ts

@@ -8,6 +8,8 @@ import type { InputRulePluginState, OnBeforeRegexMatch, OnInputEvent } from './t
 
 type Options = {
 	allowInsertTextOnDocument?: boolean;
+	checkOnBlur?: boolean;
+	appendTextOnBlur?: string;
 	onInputEvent?: OnInputEvent;
 	onBeforeRegexMatch?: OnBeforeRegexMatch;
 };
@@ -86,6 +88,26 @@ export function createInputRulePlugin(
 				});
 			},
 			handleDOMEvents: {
+				blur: (view) => {
+					if (!options?.checkOnBlur) {
+						return false;
+					}
+
+					const selection = view.state.selection;
+					if (!(selection instanceof TextSelection)) {
+						return;
+					}
+					const { $cursor } = selection;
+					if ($cursor) {
+						inputEvent({
+							view,
+							from: $cursor.pos,
+							to: $cursor.pos,
+							text: options.appendTextOnBlur ?? '',
+						});
+					}
+					return false;
+				},
 				compositionend: (view) => {
 					setTimeout(() => {
 						const selection = view.state.selection;

package/src/utils.ts

@@ -40,13 +40,27 @@ const isCursorInsideUnsupportedMarks = (
 type Options = {
 	isBlockNodeRule?: boolean;
 	allowInsertTextOnDocument?: boolean;
+	/**
+	 * Run checks on blur of the editor as well as during input
+	 */
+	checkOnBlur?: boolean;
+	/**
+	 * Append text to the checked text on blur. Useful for checks that normally require a trailing
+	 * space or similar
+	 */
+	appendTextOnBlur?: string;
 };
 export const createPlugin = (
 	pluginName: string,
 	rules: Array<InputRuleWrapper>,
 	options: Options = {},
 ): SafePluginSpec => {
-	const { isBlockNodeRule = false, allowInsertTextOnDocument = true } = options;
+	const {
+		isBlockNodeRule = false,
+		allowInsertTextOnDocument = true,
+		checkOnBlur,
+		appendTextOnBlur,
+	} = options;
 
 	const onInputEvent: OnInputEvent = ({ state, from, to }) => {
 		const unsupportedMarks = isBlockNodeRule ? ['code', 'link', 'typeAheadQuery'] : ['code'];
@@ -74,5 +88,7 @@ export const createPlugin = (
 		onBeforeRegexMatch: (tr) => {
 			closeHistory(tr);
 		},
+		checkOnBlur,
+		appendTextOnBlur,
 	});
 };

package/tsconfig.dev.json

@@ -23,7 +23,13 @@
 		"./__mocks__/**/*",
 		"**/mock.*",
 		"**/codemods/**/*.ts",
-		"**/codemods/**/*.tsx"
+		"**/codemods/**/*.tsx",
+		"**/stories.ts",
+		"**/stories.tsx",
+		"**/stories/*.ts",
+		"**/stories/*.tsx",
+		"**/stories/**/*.ts",
+		"**/stories/**/*.tsx"
 	],
 	"exclude": ["./dist/**/*", "./build/**/*", "./node_modules/**/*"],
 	"compilerOptions": {