Cursor jumps to end of editorComponent text field in v2.10.97

[mikestopcontinues]

Describe the bug

It looks like bugs #4539 and #3578 have returned.

To Reproduce

1. Register editorComponent with text field (below).
2. Create document, add component, add text to text field.
3. Move pointer to anywhere but the end of the text field input.
4. Try to type.
5. After one character, the cursor jumps to the end.

const typeToPre = {
  bonus: '+>',
  info: '!>',
  warning: '?>',
  error: '#>',
};
const preToType = R.zipObj(R.values(typeToPre), R.keys(typeToPre));

CMS.registerEditorComponent({
  id: 'hint',
  label: 'Hint',

  fields: [
    F.select({label: 'Type', name: 'type', options: R.keys(typeToPre)}),
    F.text({label: 'Text', name: 'text'}),
  ],

  pattern: /^([!#+?]>) (.+)$/,

  fromBlock([_, pre, text]) {
    return {type: preToType[pre], text};
  },

  toBlock({type, text = ''}) {
    return `${typeToPre[type]} ${text}`;
  },

  toPreview({type, text = ''}) {
    return (
      <p
        className={`hint ${type}`}
        dangerouslySetInnerHTML={{__html: text}}
      />
    );
  },
});

Expected behavior

I expect the cursor to hold its position.

Applicable Versions:

• Netlify CMS version: 2.10.97
• Git provider: Github
• OS: OSX 11
• Browser version Chrome 88

• Node.JS version: 14.15.4

[erezrokah]

Hi @mikestopcontinues, I was unable to reproduce this using your example (the cursor doesn't jump for me).

Also, this doesn't happen with any of the blocks in https://cms-demo.netlify.com/#/collections/posts/new.

Perhaps share a public repo and a video/gif showing the issue?

[mikestopcontinues]

Hi @erezrokah Here's a reproduction. Sorry I didn't lead with one. In my own experimentation, it's only the text field. The others aren't giving me a problem.

https://codepen.io/mikestopcontinues/pen/PobXQxO

And here's the goal state, which does some parsing to/from markdown. The issue is the same. Including it just for context.

https://codepen.io/mikestopcontinues/pen/QWGzQOr

[ChrisPJohn]

I'm also experiencing cursor jumping to the end of text fields that are inside a component in markdown.

I'm using:
netlify-cms-app@^2.14.26
Chrome 89.0.4389.82
OS: Windows

[josephmasongsong]

App recently started experiencing this behaviour, any updates on the issue?

netlify-cms-app@^2.15.72
OS: macOS Monterey
Chrome Version 105.0.5195.102 (Official Build) (arm64)

For what it's worth it is not happening in Safari.

[carlfredrikhero]

I can confirm @josephmasongsong report that this bug is active again.

netlify-cms@2.10.192
OS: macOS Monterey
Chrome: Version 105.0.5195.102 (Official Build) (arm64)

Firefox (104.0.2 (64-bit)) does not have the issue.

[aloverso]

My team is seeing this bug as well. I was not seeing it, and then I updated to Chrome Version 105.0.5195.102, and then I was seeing it. Looks like it has something to do with the newest version of Chrome

[tonyshearer]

I'm getting this too, starting from when I upgraded to Chrome 105.0.5195.102 (Official Build) (x86_64).

netlify-cms-app 2.15.72
netlify-cms-core 2.55.2
netlify-cms 2.10.192

CMS.cursor.prob.mov

[johnxie]

Friendly bump on this issue, our content team started experiencing this issue after upgrading to Chrome 105.

[johnxie]

Update from our team. It looks like removing this line will fix the issue.

Video attached

Sep-14-2022.02-44-52.mp4

[h1sashin]

Update from our team. It looks like removing this line will fix the issue.

Video attached

Sep-14-2022.02-44-52.mp4

yes but can I remove it globally?

[aledovskikh]

I think the proper fix for now is

[data-slate-editor] { 
    -webkit-user-modify: read-write !important; 
}

[h1sashin]

I think the proper fix for now is

[data-slate-editor] { 
    -webkit-user-modify: read-write !important; 
}

Thanks, I'll try it but hello Netlify, it's been 3 years since bug exists

[nirazul]

@h1sashin
I wouldn't count on netlify providing anything cms related. They basically stopped developing it.

I've just struck the same bug and landed here on my research.

[VitroidFPV]

Same here on Brave 1.43.89 Chromium: 105.0.5195.102. Makes any kind of back-editing practically impossible without the fix provided by @johnxie and/or @aledovskikh

[keogh]

Any plan on fixing this? is there a PR already?

I posted the same issue over here #6557

[sawilde]

How do you apply the fix as I can't work that out? I am using netlify CMS with an 11ty site.

[marcojakob]

How do you apply the fix as I can't work that out? I am using netlify CMS with an 11ty site.

@sawilde Add the following code in the header of the index.html file where the Netlify CMS JavaScript is loaded. That works for me:

<style>
[data-slate-editor] { 
    -webkit-user-modify: read-write !important; 
}
</style>

[sawilde]

@marcojakob thank you very much

[amantulsyan35]

I think the proper fix for now is

[data-slate-editor] { 
    -webkit-user-modify: read-write !important; 
}

Hi, I am using netlify CMS with gatsby js, and am confused how to apply this fix, can someone help me

[sawilde]

@amantulsyan35 I don't know how the gatsby setup works but in my setup I had an admin section with an index.html file that loads the Netlify CMS script, I added it in there as described by @marcojakob

[pjr94]

Still an issue when using CDN version of CMS

[ashleykolodziej-moodys]

I'm still encountering this issue, and the above fix didn't work for me. I'm using a list widget as an editor component, and I have two text areas in each list item that are having this problem - a code widget, and a text widget. The string widget is working fine and doesn't jump the cursor to the end.

For the code widget, I was able to get the right behavior by using this CSS snippet in admin/index.html instead (notice the change in selector to textarea:

<style>
      /* Workaround for text editor https://github.com/decaporg/decap-cms/issues/5092 */
      textarea {
        -webkit-user-modify: read-write !important;
      }
</style>

However, I'm still having this problem with the text widget, and the original suggestion to use the [data-slate-editor] selector isn't working for me. Maybe there's something with how the list widget updates child items that doesn't work with this workaround for the text widget? If anyone has any leads on a fix for this situation, I'd appreciate it.

[kav]

This appears to be caused by ianstormtaylor/slate#5110 so the fix is likely upgrading the version of slate used by the netlify-cms-widget-markdown package. It's likely worth updating the recommended index.html with the workaround if upgrading slate isn't in the cards near term as this is a near universal issue at this point.

Happy to PR the workaround into the various docs, not sure I have the bandwidth to update Slate from 0.47 to 0.94 but if that's on the team's radar it's probably the better fix

[ali4zimi]

I think the proper fix for now is

[data-slate-editor] { 
    -webkit-user-modify: read-write !important; 
}

But here it is said that it is a non-standard feature and shouldn't be used for production sites.

[martinjagodic]

@ali4zimi since this is only a css rule, I don't see why it wouldn't be used on production sites. I think it's safe.

[vhoyer]

This appears to be caused by ianstormtaylor/slate#5110 so the fix is likely upgrading the version of slate used by the netlify-cms-widget-markdown package. It's likely worth updating the recommended index.html with the workaround if upgrading slate isn't in the cards near term as this is a near universal issue at this point.

Happy to PR the workaround into the various docs, not sure I have the bandwidth to update Slate from 0.47 to 0.94 but if that's on the team's radar it's probably the better fix

wait, what is the workaround? (because the css doesn't work with dead keys which is important for writing in portuguese and other languages as well)

[kav]

The workaround is the CSS change. It's not a fix but right now no one who freshly deploys according the documentation can use the markdown editor, in any language.

The correct fix is to update the library or make a new markdown control using a different library. I don't have the bandwidth to do that but @vhoyer given it's blocking you you might consider investigating that. Worth reviewing #5795 as it looks like there is some discussion about versions and switching editors there

[hiiiP0wer]

For those still facing this issue:

For Gatsby: (using gatsby-plugin-netlify-cms)

1. Include this in gatsby-config.js:

    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`
      }
    }

2. Create the file referenced in modulePath prop above and add this in the cms/cms.js file:

const injectCustomStyle = () => {
  const style = document.createElement('style');
  style.innerHTML = `
    div[data-slate-editor] {
      -webkit-user-modify: read-write !important;
    }
  `;
  document.head.appendChild(style);
};

injectCustomStyle();

For others using index.html that loads the Netlify CMS script, this is very helpful: #5092 (comment)