mirror of
https://github.com/AppFlowy-IO/AppFlowy-Web.git
synced 2025-11-30 03:18:02 +08:00
fix: code block disables continuous input of characters (#12)
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
@@ -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: {
|
||||||
|
|||||||
Reference in New Issue
Block a user