Merge pull request #280 from CaritasDeutschland/COBH-4055

feat: [COBH-4055] allow escaping in markdownToDraft
Onlineberatung · Dec 7, 2021 · 799bddc · 799bddc
2 parents df9fb5a + 0727891
commit 799bddc
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/src/components/messageSubmitInterface/messageSubmitInterfaceComponent.tsx b/src/components/messageSubmitInterface/messageSubmitInterfaceComponent.tsx
@@ -61,7 +61,8 @@ import {
 	emojiPickerCustomClasses,
 	toolbarCustomClasses,
 	handleEditorBeforeInput,
-	handleEditorPastedText
+	handleEditorPastedText,
+	escapeMarkdownChars
 } from './richtextHelpers';
 import { ReactComponent as EmojiIcon } from '../../resources/img/icons/smiley-positive.svg';
 import { ReactComponent as FileDocIcon } from '../../resources/img/icons/file-doc.svg';
@@ -457,8 +458,10 @@ export const MessageSubmitInterfaceComponent = (
 		const contentState = currentEditorState
 			? currentEditorState.getCurrentContent()
 			: editorState.getCurrentContent();
-		const rawObject = convertToRaw(contentState);
-		const markdownString = draftToMarkdown(rawObject);
+		const rawObject = convertToRaw(escapeMarkdownChars(contentState));
+		const markdownString = draftToMarkdown(rawObject, {
+			escapeMarkdownCharacters: false
+		});
 		return markdownString.trim();
 	};
 

diff --git a/src/components/messageSubmitInterface/richtextHelpers.ts b/src/components/messageSubmitInterface/richtextHelpers.ts
@@ -1,4 +1,10 @@
-import { DraftHandleValue } from 'draft-js';
+import {
+	ContentState,
+	convertToRaw,
+	DraftHandleValue,
+	Modifier,
+	SelectionState
+} from 'draft-js';
 import sanitizeHtml from 'sanitize-html';
 
 export const emojiPickerCustomClasses = {
@@ -96,7 +102,6 @@ export const markdownToDraftDefaultOptions = {
 			inline: [
 				'autolink',
 				'backticks',
-				'escape',
 				'htmltag',
 				'links',
 				'newline',
@@ -122,3 +127,32 @@ export const sanitizeHtmlDefaultOptions = {
 	],
 	allowedAttributes: sanitizeHtml.defaults.allowedAttributes
 };
+
+/**
+ * Escape markdown characters typed by the user
+ * @param contentState
+ */
+export const escapeMarkdownChars = (contentState: ContentState) => {
+	let newContentState = contentState;
+	const rawDraftObject = convertToRaw(contentState);
+
+	rawDraftObject.blocks.forEach((block) => {
+		const selectionState = SelectionState.createEmpty(block.key);
+		let counter = 0;
+		newContentState = [...block.text].reduce(
+			(contentState, char, charIndex) => {
+				if (['*', '_', '~', '`'].indexOf(char) < 0) return contentState;
+
+				const selection = selectionState.merge({
+					focusOffset: charIndex + counter,
+					anchorOffset: charIndex + counter
+				});
+				counter++;
+				return Modifier.insertText(contentState, selection, '\\');
+			},
+			newContentState
+		);
+	});
+
+	return newContentState;
+};