From 95f009f9f8e9dcde2e5b9e1634af960f8cb26ea7 Mon Sep 17 00:00:00 2001
From: tomasc <>
Date: Tue, 5 Oct 2021 04:49:05 +0000
Subject: [PATCH] fix/clipboard: use docsSoap to prepare html from google doc

fix #365 [Editor] - Texts become bold when copy and paste from Google doc

References:
- https://github.com/facebook/draft-js/issues/393#issuecomment-224721569
- [Superdesk CMS is using DraftJS](https://github.com/superdesk/superdesk-client-core/blob/develop/scripts/core/editor3/html/from-html/index.ts#L60) and internally calling docsSoap to resolve this
- https://github.com/quilljs/quill/issues/2462 has some dirty fix with side effects
- https://github.com/ProseMirror/prosemirror/issues/459#issuecomment-249681361 this fix mentioned https://github.com/ProseMirror/prosemirror-schema-basic/commit/cbbdc1a691 in ProseMirror looks much cleaner
---
 package-lock.json        | 5 +++++
 package.json             | 1 +
 src/modules/clipboard.ts | 5 ++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index c30c64d4..14f49672 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1606,6 +1606,11 @@
         "path-type": "^3.0.0"
       }
     },
+    "docs-soap": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/docs-soap/-/docs-soap-1.2.1.tgz",
+      "integrity": "sha512-9Ei4PIJXhd1kVb0NnXwiiRL906+bciJq87aDQ34wXtIs1TcXjOsv6IAYG/f7vSOqpYsODSyphQEGvUeyJJUXnw=="
+    },
     "dom-serializer": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.1.tgz",
diff --git a/package.json b/package.json
index c14a8fab..4108c7b6 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
   "dependencies": {
     "autosize": "^4.0.2",
     "classnames": "^2.2.6",
+    "docs-soap": "^1.2.1",
     "react-quill": "^1.3.3"
   },
   "devDependencies": {
diff --git a/src/modules/clipboard.ts b/src/modules/clipboard.ts
index 34fcac3a..86663991 100644
--- a/src/modules/clipboard.ts
+++ b/src/modules/clipboard.ts
@@ -1,5 +1,7 @@
 import { Quill } from 'react-quill'
 
+import { docsSoap } from 'docs-soap'
+
 import createImageMatcher from '../matchers/createImage'
 import { isSafari } from '../utils/browser'
 import { dom } from '../utils/dom'
@@ -46,7 +48,8 @@ class RemadeClipboard extends Clipboard {
     event.stopPropagation()
 
     const formats = this.quill.getFormat(this.quill.selection.savedRange.index)
-    const html = event.clipboardData.getData('text/html')
+    const htmlRaw = event.clipboardData.getData('text/html')
+    const html = docsSoap(htmlRaw) // Needed for Google docs
     const text = event.clipboardData.getData('text/plain')
 
     let delta = new Delta().retain(range.index)