[BUG] Codeblock + Codemirror plugins - Delete icon not disabled when edit mode is disabled

[fedehann]

Despite the editor "edit" mode being disabled, the "delete" button of the code block remains active.

[aaronjamesmarshallau]

I also have this issue. Using:

const plugins = [
  // Other plugins
  codeBlockPlugin(),
  codeMirrorPlugin({
    codeBlockLanguages: {
      // ...
    },
    codeMirrorExtensions: [
      EditorState.readOnly.of(true), // Code Mirror readonly configured
      EditorView.editable.of(false)
    ]
  }),
];

// and...

export const Example: FunctionComponent = () => {
  // imagine cool blog content with a triple backtick code block
  const blogContent = ''; 
  return (
    <MDXEditor
      markdown={blogContent}
      readOnly <!-- Read Only editor -->
      plugins={plugins} />
  )
};

I also see this issue. Looking at the code, I assume these are the relevant lines

editor/src/plugins/codemirror/CodeMirrorEditor.tsx

Lines 90 to 120 in 0ab6746

	<div className={styles.codeMirrorToolbar}>
	<Select
	value={language}
	onChange={(language) => {
	parentEditor.update(() => {
	lexicalNode.setLanguage(language === EMPTY_VALUE ? '' : language)
	setTimeout(() => {
	parentEditor.update(() => {
	lexicalNode.getLatest().select()
	})
	})
	})
	}}
	triggerTitle={t('codeBlock.selectLanguage', 'Select code block language')}
	placeholder={t('codeBlock.inlineLanguage', 'Language')}
	items={Object.entries(codeBlockLanguages).map(([value, label]) => ({ value: value ? value : EMPTY_VALUE, label }))}
	/>
	<button
	className={styles.iconButton}
	type="button"
	title={t('codeblock.delete', 'Delete code block')}
	onClick={(e) => {
	e.preventDefault()
	parentEditor.update(() => {
	lexicalNode.remove()
	})
	}}
	>
	{iconComponentFor('delete_small')}
	</button>
	</div>

?

Looks like the readOnly flag is passed in, but not applied to that select which allows controlling language and deleting the code block.

[github-actions]

🎉 This issue has been resolved in version 3.22.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀