remusris
commented
4 months ago I made a plugin to workaround this error. Might be useful for some of you.
import {
createPluginFactory,
PlateEditor,
TElement,
findNode,
getNodeString,
} from '@udecode/plate-common';
import { ELEMENT_CODE_BLOCK } from '@udecode/plate-code-block';
import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
export const KEY_CODEBLOCK_BACKSPACE = 'codeBlockBackspace';
const isCodeBlockEmpty = (editor: PlateEditor) => {
const codeBlock = findNode(editor, {
match: { type: ELEMENT_CODE_BLOCK },
});
return codeBlock ? getNodeString(codeBlock[0]).length === 0 : false;
};
const isSelectionAtCodeBlockStart = (editor: PlateEditor) => {
const { selection } = editor;
if (!selection) return false;
const codeBlock = findNode(editor, {
match: { type: ELEMENT_CODE_BLOCK },
at: selection,
});
if (!codeBlock) return false;
const [, path] = codeBlock;
const start = editor.start(path);
return editor.isStart(selection.anchor, start);
};
const resetEmptyCodeBlock = (editor: PlateEditor) => {
const codeBlock = findNode(editor, {
match: { type: ELEMENT_CODE_BLOCK },
});
if (codeBlock && isCodeBlockEmpty(editor)) {
const [, path] = codeBlock;
editor.setNodes<TElement>({ type: ELEMENT_PARAGRAPH }, { at: path });
console.log('Empty code block reset to paragraph');
}
};
// this works and it works well
export const emptyCodeBlockListener = createPluginFactory({
key: KEY_CODEBLOCK_BACKSPACE,
handlers: {
onKeyDown: (editor) => (event) => {
if (event.key === 'Backspace') {
const codeBlock = findNode(editor, {
match: { type: ELEMENT_CODE_BLOCK },
});
if (codeBlock) {
console.log('Backspace pressed inside a code block');
const isEmpty = isCodeBlockEmpty(editor);
const isAtStart = isSelectionAtCodeBlockStart(editor);
console.log('Code block is empty:', isEmpty);
console.log('Selection is at start:', isAtStart);
// If we're at the start of an empty code block, prevent default
// behavior and handle it ourselves
if (isEmpty && isAtStart) {
console.log('Converting empty code block to paragraph');
event.preventDefault();
resetEmptyCodeBlock(editor);
return;
}
// If we're at the start of a non-empty code block, don't do anything special
if (isAtStart) {
console.log('At start of non-empty code block, no special action taken');
return;
}
console.log('Backspace in code block, default behavior');
// After the default backspace behavior, check if the code block became empty
setTimeout(() => {
resetEmptyCodeBlock(editor);
}, 0);
}
}
},
},
});
Description
When you have a single code block on page you get this error
Delete everything in the code block then start typing when it's empty and you'll get the error below
https://github.com/user-attachments/assets/fc689414-2314-4030-bd02-3a77ce21ebb5
Reproduction URL
No response
Reproduction steps
Plate version
36.0.0
Slate React version
0.102.0
Screenshots
No response
Logs
No response
Browsers
No response
Funding