I’m trying to add keyboard bindings to the quill editor in my project, however when I add keyboard to the modules object, the editor doesn’t show. But when I remove it, the editor is visible again. This is my code:
'use client';
import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
const DocumentPage = () => {
const [value, setValue] = useState('');
const modules = {
toolbar: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
["bold", "italic", "underline", "strike", "blockquote", "script", "code"],
[{ font: [] }, { size: [] }],
[{ color: [] }, { background: [] }],
[{ align: ["right", "center", "justify"] }],
[{ list: "ordered" }, { list: "bullet" }],
["code-block", { indent: "-1" }, { indent: "+1" }, { direction: "rtl" }, { direction: "ltr" }],
["link", "image", "video"],
],
keyboard: {
bindings: {
tab: {
key: 9,
handler: (range: any) => {
const tab = 't';
range.insertText(tab);
return true;
},
},
},
}
};
return (
<main className="p-4">
<ReactQuill value={value} onChange={setValue} modules={modules} placeholder="Start Typing Here..." />
</main>
);
};
export default DocumentPage;Am I doing it right or is there something wrong?