I am trying to create a simple text editor with quill and react with custom button in toolbar that adds current timestamp eg(07:55:10).
I am not sure if I am doing it correctly as I don't create any blobs, but just creating functions:
const insertTimestamp = (quill) => {
const cursorPosition = quill.getSelection().index;
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const timestamp = stopWatchEmoji + `${hours}:${minutes}:${seconds}` + " ";
quill.insertText(cursorPosition, timestamp);
// Apply custom styling to the inserted timestamp
quill.formatText(cursorPosition + 1, timestamp.length - 1, {
color: "blue",
});
// Restore style formatting for the text that the user will enter
quill.format("color", false);
};
and then adding it to the quill initialer:
const wrapperRef = useCallback((wrapper) => {
if (wrapper == null) return;
wrapper.innerHTML = "";
const editor = document.createElement("div");
wrapper.append(editor);
const quill = new Quill(editor, {
theme: "snow",
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
// Custom button handler
timestamp: function () {
insertTimestamp(quill);
},
},
},
resize: {
locale: locateResize,
},
},
});
quill.on("selection-change", (range, oldRange, source) => {
if (source === Quill.sources.USER && altKeyPressed.current) {
// Detect timestamps based on the current selection range
const timeStamp = detectTimestamps(quill);
timeStamp && yourCustomFunction(timeStamp);
}
});
}, []);
User will be able to click on the timestamp and it will invoke another function, but my goal is to achieve cursor change when user hovers over the timestamp. My current workflow adds the span with a text and I was trying to add a class name to the span, so I can stylise it with css but I wasn't able to achieve that