Merge pull request #2512 from tf/prevent-empty-text-block

Prevent text blocks with empty value

Author: tf

entry_types/scrolled/package/spec/contentElements/textBlock/editor-spec.js

@@ -1,5 +1,6 @@
 import 'contentElements/textBlock/editor';
 import {editor} from 'editor';
+import {ContentElement} from 'editor/models/ContentElement';
 
 describe('contentElements/textBlock/editor', () => {
   const type = editor.contentElementTypes.findByTypeName('textBlock');
@@ -129,4 +130,31 @@ describe('contentElements/textBlock/editor', () => {
     });
   });
 
+  describe('#handleDestroy', () => {
+    it('removes selected blocks if selection does not cover all blocks', () => {
+      const contentElement = new ContentElement({
+        typeName: 'textBlock',
+        transientState: {editableTextSelectionCoversAllBlocks: false}
+      });
+      jest.spyOn(contentElement, 'postCommand');
+
+      const result = type.handleDestroy(contentElement);
+
+      expect(contentElement.postCommand).toHaveBeenCalledWith({type: 'REMOVE'});
+      expect(result).toBe(false);
+    });
+
+    it('lets content element be deleted if selection covers all blocks', () => {
+      const contentElement = new ContentElement({
+        typeName: 'textBlock',
+        transientState: {editableTextSelectionCoversAllBlocks: true}
+      });
+      jest.spyOn(contentElement, 'postCommand');
+
+      const result = type.handleDestroy(contentElement);
+
+      expect(contentElement.postCommand).not.toHaveBeenCalled();
+      expect(result).not.toBe(false);
+    });
+  });
 });

entry_types/scrolled/package/spec/frontend/commenting/EditableText-spec.js

@@ -33,6 +33,17 @@ describe('commenting EditableText', () => {
     expect(entry.queryByText('Select text to comment')).not.toBeInTheDocument();
   });
 
+  it('renders empty paragraph if value is empty array', () => {
+    const entry = renderEntry({
+      contentElement: {
+        ui: <EditableText value={[]} />,
+        typeOptions: {inlineComments: true}
+      }
+    });
+
+    expect(entry.container.querySelector('[data-slate-node="element"]')).toBeInTheDocument();
+  });
+
   it('shows hint in add comment mode', async () => {
     const user = userEvent.setup();
     const entry = renderEntry({

entry_types/scrolled/package/spec/frontend/inlineEditing/EditableText/features/placeholder-spec.js

@@ -36,6 +36,16 @@ describe('inline editing EditableText placeholder', () => {
     expect(entry.queryByText('Some placeholder')).toBeInTheDocument();
   });
 
+  it('renders placeholder if value is empty array', () => {
+    const entry = renderEntry({
+      contentElement: {
+        ui: <EditableText value={[]} placeholder="Some placeholder" />
+      }
+    });
+
+    expect(entry.queryByText('Some placeholder')).toBeInTheDocument();
+  });
+
   it('does not render placeholder if value is present', () => {
     const entry = renderEntry({
       contentElement: {

entry_types/scrolled/package/spec/frontend/inlineEditing/EditableText/features/selectionTransientState-spec.js

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import {EditableText} from 'frontend';
+import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects/inlineEditing';
+
+import {waitFor} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('inline editing EditableText selection transient state', () => {
+  useInlineEditingPageObjects();
+
+  beforeEach(() => {
+    Range.prototype.getBoundingClientRect = () => document.body.getBoundingClientRect();
+    Range.prototype.getClientRects = () => [];
+  });
+
+  afterEach(() => {
+    delete Range.prototype.getBoundingClientRect;
+    delete Range.prototype.getClientRects;
+  });
+
+  const value = [
+    {type: 'paragraph', children: [{text: 'First paragraph'}]},
+    {type: 'paragraph', children: [{text: 'Second paragraph'}]}
+  ];
+
+  it('reports selection covering all blocks', async () => {
+    const entry = renderEntry({
+      contentElement: {
+        ui: <EditableText value={value} contentElementId={1} selectionRect={true} />,
+        typeOptions: {customSelectionRect: true}
+      }
+    });
+
+    entry.simulateSelectMessage({type: 'contentElement', id: 1, range: [0, 2]});
+
+    await waitFor(() =>
+      expect(entry.getTransientContentElementState(1)).toMatchObject({
+        editableTextSelectionCoversAllBlocks: true
+      })
+    );
+  });
+
+  it('reports selection not covering all blocks', async () => {
+    const entry = renderEntry({
+      contentElement: {
+        ui: <EditableText value={value} contentElementId={1} selectionRect={true} />,
+        typeOptions: {customSelectionRect: true}
+      }
+    });
+
+    entry.simulateSelectMessage({type: 'contentElement', id: 1, range: [1, 2]});
+
+    await waitFor(() =>
+      expect(entry.getTransientContentElementState(1)).toMatchObject({
+        editableTextSelectionCoversAllBlocks: false
+      })
+    );
+  });
+});

entry_types/scrolled/package/spec/support/pageObjects/inlineEditing.js

@@ -24,7 +24,27 @@ export function renderEntry({commenting, ...options} = {}) {
   return {
     ...result,
     queryAllCommentBadges: () =>
-      result.queryAllByRole('status').map(createCommentBadgePageObject)
+      result.queryAllByRole('status').map(createCommentBadgePageObject),
+
+    simulateSelectMessage(payload) {
+      act(() => {
+        window.dispatchEvent(new MessageEvent('message', {
+          data: {type: 'SELECT', payload},
+          origin: window.location.origin
+        }));
+      });
+    },
+
+    getTransientContentElementState(id) {
+      return window.parent.postMessage.mock.calls
+        .map(([message]) => message)
+        .filter(message =>
+          message.type === 'UPDATE_TRANSIENT_CONTENT_ELEMENT_STATE' &&
+          message.payload.id === id
+        )
+        .map(message => message.payload.state)
+        .pop();
+    }
   };
 }
 

entry_types/scrolled/package/src/contentElements/textBlock/editor.js

@@ -161,7 +161,7 @@ editor.contentElementTypes.register('textBlock', {
   handleDestroy(contentElement) {
     const transientState = contentElement.get('transientState') || {};
 
-    if (!transientState.editableTextIsSingleBlock) {
+    if (!transientState.editableTextSelectionCoversAllBlocks) {
       contentElement.postCommand({type: 'REMOVE'});
       return false;
     }

entry_types/scrolled/package/src/frontend/commenting/EditableText.js

@@ -91,7 +91,7 @@ function CommentingEditableText({
             typographyVariant={typographyVariant}
             typographySize={typographySize}>
         <Slate editor={editor}
-               value={value || defaultValue}
+               value={value?.length ? value : defaultValue}
                onChange={() => {}}>
           <Editable key={(subjectRange ? 'highlighted' : 'plain') + threads.length}
                     onMouseUp={handleMouseUp}

entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/Selection.js

@@ -119,7 +119,8 @@ export function Selection(props) {
     }
 
     setTransientState({
-      editableTextIsSingleBlock: editor.children.length <= 1,
+      editableTextSelectionCoversAllBlocks:
+        start === 0 && end === editor.children.length - 1,
       exampleNode: getUniformSelectedNode(editor, 'type'),
       typographyVariant: getUniformSelectedNode(editor, 'variant')?.variant,
       typographySize: getUniformSelectedNode(editor, 'size')?.size,

entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/index.js

@@ -113,11 +113,12 @@ export const EditableText = React.memo(function EditableText({
     getTrackedSubjectRanges
   } = useCommenting(editor);
 
-  const [cachedValue, setCachedValue] = useCachedValue(value, {
-    defaultValue: [{
-      type: 'paragraph',
-      children: [{ text: '' }],
-    }],
+  const emptyValue = useMemo(() => [{
+    type: 'paragraph',
+    children: [{text: ''}]
+  }], []);
+
+  const [cachedValue, setCachedValue] = useCachedValue(value?.length ? value : emptyValue, {
     onDebouncedChange: nextValue => {
       if (onChange) {
         onChange(nextValue, {commentThreadSubjectRanges: getTrackedSubjectRanges()});