add shorcut
This commit is contained in:
parent
a95df3debb
commit
afc7c7bf7a
|
|
@ -1,5 +1,5 @@
|
||||||
import { useFormikContext } from "formik";
|
|
||||||
import { useCallback } from "react";
|
import { useCallback } from "react";
|
||||||
|
import { useFormikContext } from "formik";
|
||||||
import { getLatexOnCustomPased } from "../utils/keyDownUtils";
|
import { getLatexOnCustomPased } from "../utils/keyDownUtils";
|
||||||
|
|
||||||
export function useHandlePasteKeyDown() {
|
export function useHandlePasteKeyDown() {
|
||||||
|
|
@ -7,18 +7,22 @@ export function useHandlePasteKeyDown() {
|
||||||
|
|
||||||
const handleCustomPasteKeyDown = useCallback(
|
const handleCustomPasteKeyDown = useCallback(
|
||||||
async (e: React.KeyboardEvent<HTMLInputElement>, fieldName: string) => {
|
async (e: React.KeyboardEvent<HTMLInputElement>, fieldName: string) => {
|
||||||
const latex = await getLatexOnCustomPased(e);
|
const latexCtlrShiftV = await getLatexOnCustomPased(e,!e.ctrlKey || !e.shiftKey || e.code !== "KeyV" );
|
||||||
if (!latex) return;
|
const latexCtlrCheftBackquote = await getLatexOnCustomPased(e,!e.ctrlKey || !e.shiftKey || e.code !== "Backquote" );
|
||||||
|
if (!latexCtlrShiftV && !latexCtlrCheftBackquote) return;
|
||||||
|
|
||||||
// set fieldValue
|
const input = e.target as HTMLInputElement;
|
||||||
const currentValue = (e.target as HTMLInputElement).value;
|
const toInsert = !!latexCtlrShiftV ? `$$ ${latexCtlrShiftV} $$` : `$$$ ${latexCtlrCheftBackquote} $$$`
|
||||||
const final = currentValue
|
|
||||||
? `${currentValue} $$ ${latex} $$`
|
e.preventDefault?.();
|
||||||
: `$$ ${latex} $$`;
|
|
||||||
|
input.focus();
|
||||||
|
document.execCommand('insertText', false, toInsert);
|
||||||
|
|
||||||
|
input.dispatchEvent(new Event("input", { bubbles: true }));
|
||||||
|
|
||||||
formik.setFieldValue(fieldName, final);
|
|
||||||
},
|
},
|
||||||
[formik]
|
[]
|
||||||
);
|
);
|
||||||
|
|
||||||
return handleCustomPasteKeyDown;
|
return handleCustomPasteKeyDown;
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,10 @@ import { getTextFromClipboard } from "./clipboardUtils";
|
||||||
import { convertMathMLToLaTeX } from "./convertMathMLToLaTeX";
|
import { convertMathMLToLaTeX } from "./convertMathMLToLaTeX";
|
||||||
|
|
||||||
export async function getLatexOnCustomPased(
|
export async function getLatexOnCustomPased(
|
||||||
e: React.KeyboardEvent<HTMLInputElement>
|
e: React.KeyboardEvent<HTMLInputElement>,
|
||||||
|
shortCut:boolean
|
||||||
): Promise<string | null> {
|
): Promise<string | null> {
|
||||||
if (!e.ctrlKey || !e.shiftKey || e.code !== "KeyV" ) return null;
|
if (shortCut) return null;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const copyedValue = await getTextFromClipboard();
|
const copyedValue = await getTextFromClipboard();
|
||||||
|
|
@ -13,7 +14,22 @@ export async function getLatexOnCustomPased(
|
||||||
return latex;
|
return latex;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getLatexOnCustomShortCut(
|
export function getLatexOnCtrlShiftThKeyDown(
|
||||||
|
e: React.KeyboardEvent<HTMLInputElement>
|
||||||
|
): string | null {
|
||||||
|
if (!e.ctrlKey || !e.shiftKey || e.code !== "Backquote") return null;
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const selectedText = getSelectedText(e)
|
||||||
|
if (!selectedText) return null;
|
||||||
|
|
||||||
|
const latex = convertMathMLToLaTeX(selectedText);
|
||||||
|
const result = replaceSelectedTo(e,latex,"$$$");
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
export function getLatexOnCtrlShiftQkeyDown(
|
||||||
e: React.KeyboardEvent<HTMLInputElement>
|
e: React.KeyboardEvent<HTMLInputElement>
|
||||||
): string | null {
|
): string | null {
|
||||||
if (!e.ctrlKey || !e.shiftKey || e.code !== "KeyQ") return null;
|
if (!e.ctrlKey || !e.shiftKey || e.code !== "KeyQ") return null;
|
||||||
|
|
@ -24,7 +40,7 @@ export function getLatexOnCustomShortCut(
|
||||||
if (!selectedText) return null;
|
if (!selectedText) return null;
|
||||||
|
|
||||||
const latex = convertMathMLToLaTeX(selectedText);
|
const latex = convertMathMLToLaTeX(selectedText);
|
||||||
const result = replaceSelectedTo(e,latex);
|
const result = replaceSelectedTo(e,latex,"$$");
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
@ -36,13 +52,13 @@ export function getSelectedText(e:React.KeyboardEvent<HTMLInputElement>){
|
||||||
return selectedText
|
return selectedText
|
||||||
}
|
}
|
||||||
|
|
||||||
export function replaceSelectedTo(e: React.KeyboardEvent<HTMLInputElement>,newValue:string) {
|
export function replaceSelectedTo(e: React.KeyboardEvent<HTMLInputElement>,newValue:string,encabsolation?:string) {
|
||||||
const {start,end,input} = getIndexesOfSelectionValue(e)
|
const {start,end,input} = getIndexesOfSelectionValue(e)
|
||||||
|
|
||||||
const before = input.value.substring(0, start);
|
const before = input.value.substring(0, start);
|
||||||
const after = input.value.substring(end);
|
const after = input.value.substring(end);
|
||||||
|
const trimValue = newValue.trim()
|
||||||
const result = `${before}$$ ${newValue} $$${after}`;
|
const result = `${encabsolation} ${trimValue.slice(2,trimValue.length-2)} ${encabsolation}`;
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user