question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Avoid empty unstyled blocks

See original GitHub issue

I want to remove all empty blocks that has no style. My problem is that when the user clicks on backspace in a styled block with no text, the block is not deleted, it just loses his style and I wish to avoid having unstyled blocks.

I’m looking for some solution to this behavior.

I’ve tried using Modifier.removeRange (like suggested in #168) to delete all empty blocks (with no style and no text) but it just doesn’t work.

Can you please tell me what I’m doing wrong?

const removeEmptyUnstyledBlocks = (editorState) => {
  let contentState = editorState.getCurrentContent();
  const blocks = contentState.getBlocksAsArray();
  const emptyBlocks = blocks.filter(b => b.get('type') === 'unstyled' && b.get('text') === '');
  emptyBlocks.forEach(b => {
    let removalRange = SelectionState.createEmpty().merge({ // I've tried many variations for this
      anchorKey: b.getKey(),
      focusKey: b.getKey(),
      focusOffset: 0,
      anchorOffset: 0,
      isBackward: true,
      hasFocus: true
    });

    contentState = Modifier.removeRange(contentState, removalRange, 'backward');
  });

  return emptyBlocks.length ? EditorState.push(editorState, contentState, 'remove-empty-blocks') : editorState;
};

This doesn’t work (look at my comment for a working solution).

Is it even possible to simply remove a block from the editorState’s block map? (e.g. using immutable-js deleteIn([...]) function)

Maybe the problem is that the selection is collapsed because the block has no text?

Surely, it would be better if I could totally avoid getting empty blocks instead of fixing the state in every onChange.

Update

I forgot to mention that I’m using this handleKeyCommand function (which handles the backspace command):

  handleKeyCommand(command) {
    const { editorState } = this.state;

    const newState = RichUtils.handleKeyCommand(editorState, command);

    if (newState) {
      this.onChange(newState);
    }

    return !!newState;
  }

And I think this is the right place to take care of my problem.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:2
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
JonasMatos0commented, May 14, 2021

Hello,

What’s the current state of this issue? I’m taking a look on these really old GFI tickets. I can try to help, just need some details about how to proceed.

Thanks in advance.

0reactions
bobber205commented, Jun 4, 2021

@adamtal3 Looks like getCurrentBlock doesn’t exist anymore (only getCurrentBlockType) and getBlockIndex is completely missing as well. Anyone have any ideas on replacement functions?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Pressing 'delete' on an empty block before a styled ... - GitHub
Reproducable with the rich example: Hit 'return' to create an empty block; Type something and make it an H1 block; Go up to...
Read more >
Eliminate flash of unstyled content - css - Stack Overflow
The problem with using a css style to initially hide some page elements, and then using javascript to change the style back to...
Read more >
9 tricks to eliminate render blocking resources - LogRocket Blog
By reducing render blocking resources, you can shorten the critical rendering path and reduce page load times, thus improving UX and SEO.
Read more >
Draft.js: how to remove formatting of the text | by Andrey Semin
In order to remove different block types(headers, list items, code blocks etc.) ... the text we need to change the type of each...
Read more >
Flash of unstyled content - Wikipedia
A flash of unstyled content is an instance where a web page appears briefly with the browser's default styles prior to loading an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found