fix: code block disables continuous input of characters (#12)

This commit is contained in:
Kilu.He
2025-01-10 15:40:46 +08:00
committed by GitHub
parent 4152b46bd2
commit a8ea6c04d2
2 changed files with 18 additions and 11 deletions

View File

@@ -69,7 +69,7 @@ function MermaidChat ({ node }: {
const isDark = useContext(ThemeModeContext)?.isDark; const isDark = useContext(ThemeModeContext)?.isDark;
const [error, setError] = React.useState<string | null>(null); const [error, setError] = React.useState<string | null>(null);
const updateMermaid = useCallback(async () => { const updateMermaid = useCallback(async (diagram: string) => {
const sanitizedDiagram = sanitizeDiagram(diagram); const sanitizedDiagram = sanitizeDiagram(diagram);
const theme = isDark ? darkTheme : lightTheme; const theme = isDark ? darkTheme : lightTheme;
@@ -91,17 +91,23 @@ function MermaidChat ({ node }: {
// @ts-ignore // @ts-ignore
setError(e.message); setError(e.message);
} }
}, [diagram, id, isDark]); }, [id, isDark]);
const deboucenUpdateMermaid = useMemo(() => { const deboucenUpdateMermaid = useMemo(() => {
return debounce(updateMermaid, 1000); return debounce(updateMermaid, 1000);
}, [updateMermaid]); }, [updateMermaid]);
useEffect(() => { useEffect(() => {
void deboucenUpdateMermaid(); if (!diagram.trim()) {
}, [deboucenUpdateMermaid]); setError(null);
setInnerHtml('');
return;
}
if (error) { void deboucenUpdateMermaid(diagram);
}, [deboucenUpdateMermaid, diagram]);
if (error && diagram) {
return ( return (
<div <div
contentEditable={false} contentEditable={false}
@@ -121,7 +127,6 @@ function MermaidChat ({ node }: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
placeContent: 'center', placeContent: 'center',
minHeight: '250px',
}} }}
contentEditable={false} contentEditable={false}
ref={ref} ref={ref}

View File

@@ -54,7 +54,7 @@ type Rule = {
filter?: (editor: YjsEditor, match: RegExpMatchArray) => boolean filter?: (editor: YjsEditor, match: RegExpMatchArray) => boolean
} }
function deletePrefix(editor: YjsEditor, offset: number) { function deletePrefix (editor: YjsEditor, offset: number) {
const [, path] = getBlockEntry(editor); const [, path] = getBlockEntry(editor);
const { selection } = editor; const { selection } = editor;
@@ -67,19 +67,19 @@ function deletePrefix(editor: YjsEditor, offset: number) {
editor.delete(); editor.delete();
} }
function getNodeType(editor: YjsEditor) { function getNodeType (editor: YjsEditor) {
const [node] = getBlockEntry(editor); const [node] = getBlockEntry(editor);
return node.type as BlockType; return node.type as BlockType;
} }
function getBlockData(editor: YjsEditor) { function getBlockData (editor: YjsEditor) {
const [node] = getBlockEntry(editor); const [node] = getBlockEntry(editor);
return node.data as BlockData; return node.data as BlockData;
} }
function getLineText(editor: YjsEditor) { function getLineText (editor: YjsEditor) {
const [node] = getBlockEntry(editor); const [node] = getBlockEntry(editor);
const sharedRoot = getSharedRoot(editor); const sharedRoot = getSharedRoot(editor);
const block = getBlock(node.blockId as string, sharedRoot); const block = getBlock(node.blockId as string, sharedRoot);
@@ -331,7 +331,6 @@ const rules: Rule[] = [
match: /--/, match: /--/,
format: SpecialSymbol.EM_DASH, format: SpecialSymbol.EM_DASH,
transform: (editor) => { transform: (editor) => {
editor.delete({ editor.delete({
unit: 'character', unit: 'character',
reverse: true, reverse: true,
@@ -422,6 +421,9 @@ export const applyMarkdown = (editor: YjsEditor, insertText: string): boolean =>
} }
} else if (rule.type === 'symbol') { } else if (rule.type === 'symbol') {
const block = getBlockEntry(editor)[0];
if (block.type === BlockType.CodeBlock) return false;
const path = selection.anchor.path; const path = selection.anchor.path;
const text = editor.string({ const text = editor.string({
anchor: { anchor: {