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.

Bug: RichTextPlugin#initialEditorState breaks AutoFocusPlugin

See original GitHub issue

When using both RichTextPlugin combined with the initialEditorState prop, AutoFocusPlugin stops working

Lexical version: 0.3.0

Steps To Reproduce

Have a RichTextPlugin#initialEditorState function and see AutoFocusPlugin stop auto focusing.

Link to code example:

In the below sandbox you can toggle / untoggle the prop and notice when clicking “refresh” in the web view, autofocus will either work or not

https://codesandbox.io/s/many-lexical-autofocus-forked-q74c9w?file=/src/Editor.js:2847-2960

The current behavior

The presence of initialEditorState, prevents AutoFocusPlugin from properly auto focusing

The expected behavior

Autofocus should work regardless of whether or not initialEditorState is used

refs #2280 #2282

Issue Analytics

State:
Created a year ago
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

hanfordcommented, Jun 2, 2022

Modifying the above function with the below snippet worked!

if (!str) {
  return $createParagraphNode();
}

0reactions

hanfordcommented, Jun 2, 2022

@trueadm in my private repo, my function looks like this:

// Replace newlines & break tags that are added from OnChangeMarkdown
let str = (value || '').replace(/\n\n<br>\n/g, '\n');

// If we still have br tags, we're coming from Slate, apply
// Slate list collapse and remove remaining br tags
// https://github.com/facebook/lexical/issues/2208
if (str.match(/<br>/g)) {
  str = str.replace(/^(\n)(?=\s*[-+\d.])/gm, '').replace(/<br>/g, '');
}

str = str
  // Unescape HTML characters
  .replace(/&quot;/g, '"')
  .replace(/&amp;/g, '&')
  .replace(/&#39;/g, "'")
  .replace(/&lt;/g, '<')
  .replace(/&gt;/g, '>');

$convertFromMarkdownString(str, transformers || TRANSFORMERS);

And the bug still occurs … I can play around with a $createParagraphNode() call if str is empty?

Top Results From Across the Web

Forcing focus breaks plugins · Issue #800 · draft-js ... - GitHub

A new editor component is created; The plugins component takes the initial state and adds all decorators from active plugins and then calls...

Rich text custom field | WordPress.org

Is there any way that I can have a rich text custom field (line and paragraph breaks)? In this support thread… ... Plugin...

Configure the Rich Text Editor plug-ins - Experience League

Learn to configure the Adobe Experience Manager Rich Text Editor plug-ins to enable individual functionalities.

Autofocus of Draftjs test editor - Stack Overflow

If your editor is initiated with some default value then doing just this.refs.editor.focus() will have cursor at starting of the text.

Options - Froala

Defines the fonts that appear under the Font Family button from the rich text editor's toolbar. CODE EXAMPLE. Copy new FroalaEditor('.selector', { fontFamily:...