add embeds as external in case association for ID is missing (#4215)

superdesk · Mar 1, 2023 · 870bedc · 870bedc
1 parent 86d7cbd
commit 870bedc
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 4 deletions.
diff --git a/scripts/core/editor3/helpers/draftInsertEntity.spec.ts b/scripts/core/editor3/helpers/draftInsertEntity.spec.ts
@@ -4,7 +4,7 @@ import {insertEntity} from './draftInsertEntity';
 import {convertFromRaw, SelectionState, EditorState, RawDraftContentState, convertToRaw} from 'draft-js';
 
 // removes keys from blocks and their entity ranges so resulting objects can be compared by value as JSON strings
-function getRawContentStateWithoutBlockAndEntityKeys(
+export function getRawContentStateWithoutBlockAndEntityKeys(
     rawContentState: RawDraftContentState,
 ): Partial<RawDraftContentState> {
     return {

diff --git a/scripts/core/editor3/html/from-html/index.ts b/scripts/core/editor3/html/from-html/index.ts
@@ -38,7 +38,7 @@ class HTMLParser {
     associations: any;
     tree: any;
 
-    constructor(html, associations) {
+    constructor(html, associations = {}) {
         this.iframes = {};
         this.scripts = {};
         this.figures = {};
@@ -79,6 +79,14 @@ class HTMLParser {
             const associationId = html.match(/<!-- EMBED START (?:Image|Video) {id: "([a-z0-9]*?)"} -->/)?.[1];
 
             if (associationId != null) {
+                if (this.associations[associationId] == null) {
+                    /**
+                     * Stop processing in case embed comment contains an ID that can't be found in associations.
+                     * In such case, {@link pruneNodes} will run and add media as external embeds.
+                     */
+                    continue;
+                }
+
                 const nextIndex = Object.keys(this.media).length;
 
                 html = html.replace(
@@ -351,7 +359,7 @@ class HTMLParser {
     }
 }
 
-export function getContentStateFromHtml(html: string, associations: object = null): ContentState {
+export function getContentStateFromHtml(html: string, associations: object = {}): ContentState {
     return new HTMLParser(html, associations).contentState();
 }
 

diff --git a/scripts/core/editor3/html/tests/from-html.spec.ts b/scripts/core/editor3/html/tests/from-html.spec.ts
@@ -1,7 +1,8 @@
 /* eslint-disable max-len */
 /* tslint:disable:max-line-length */
 import {getContentStateFromHtml} from '../from-html';
-import {convertFromRaw, ContentState, ContentBlock} from 'draft-js';
+import {convertFromRaw, ContentState, ContentBlock, convertToRaw} from 'draft-js';
+import {getRawContentStateWithoutBlockAndEntityKeys} from 'core/editor3/helpers/draftInsertEntity.spec';
 
 /**
  * @description Returns the set of blocks corresponding to the content state
@@ -104,4 +105,67 @@ describe('core.editor3.html.from-html', () => {
         expect(blocks[1].getText()).toEqual('italic');
         expect(blocks[2].getText()).toEqual('underline');
     });
+
+    it('should add embeds as external in case association for ID is missing', () => {
+        const html =
+            '<p>Line 1-1</p>'
+            + '<p><!-- EMBED START Image {id: "id123"} --><figure><img src="https://domain.com/image.jpg" alt="image-alt"><figcaption></figcaption></figure><!-- EMBED END Image {id: "id123"} --></p>"'
+            + '<p>Line 2</p>';
+
+        const contentState: ContentState = getContentStateFromHtml(html);
+
+        expect(getRawContentStateWithoutBlockAndEntityKeys(convertToRaw(contentState))).toEqual({
+            'blocks': [
+                {
+                    'text': 'Line 1-1',
+                    'type': 'unstyled',
+                    'depth': 0,
+                    'inlineStyleRanges': [],
+                    'entityRanges': [],
+                    'data': {},
+                },
+                {
+                    'text': ' ',
+                    'type': 'atomic',
+                    'depth': 0,
+                    'inlineStyleRanges': [],
+                    'entityRanges': [
+                        {
+                            'offset': 0,
+                            'length': 1,
+                        },
+                    ],
+                    'data': {},
+                },
+                {
+                    'text': '"',
+                    'type': 'unstyled',
+                    'depth': 0,
+                    'inlineStyleRanges': [],
+                    'entityRanges': [],
+                    'data': {},
+                },
+                {
+                    'text': 'Line 2',
+                    'type': 'unstyled',
+                    'depth': 0,
+                    'inlineStyleRanges': [],
+                    'entityRanges': [],
+                    'data': {},
+                },
+            ],
+            'entityMap': {
+                '0': {
+                    'type': 'EMBED',
+                    'mutability': 'MUTABLE',
+                    'data': {
+                        'data': {
+                            'html': '<img src="https://domain.com/image.jpg" alt="image-alt">',
+                        },
+                        'description': '',
+                    },
+                },
+            },
+        });
+    });
 });