How to make on hover custom cursor in Quill

24 Views Asked by At

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

0

There are 0 best solutions below