Reactjs – Clicking the bold button deselects the selected text before emboldening

The issue here likely has to do with how Quill handles selection and formatting within a Shadow DOM context. the problem could be due to event handling being disrupted by the Shadow DOM boundary, CSS specificity and inheritance issues, or selection range calculations being affected by the Shadow DOM context. You should try the changes I made below:

import React, { useRef, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

// Define toolbar modules
const modules = {
  toolbar: [
    [{ font: [] }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ["bold", "italic", "underline", "strike"],
    [{ color: [] }, { background: [] }],
    [{ script: "sub" }, { script: "super" }],
    ["blockquote", "code-block"],
    [{ list: "ordered" }, { list: "bullet" }],
    [{ indent: "-1" }, { indent: "+1" }, { align: [] }],
    ["link", "image", "video"],
    ["clean"]
  ]
};

interface ShadowWrapperProps {
  children: React.ReactNode;
}

const ShadowWrapper: React.FC<ShadowWrapperProps> = ({ children }) => {
  const shadowRootRef = useRef<HTMLDivElement | null>(null);
  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
  
  useEffect(() => {
    if (shadowRootRef.current && !shadowRoot) {
      if (!shadowRootRef.current.shadowRoot) {
        const shadow = shadowRootRef.current.attachShadow({ mode: "open" });
        setShadowRoot(shadow);

        // Create a container for styles
        const styleContainer = document.createElement("div");
        
        // Add Quill styles
        const quillStyles = document.createElement("link");
        quillStyles.rel = "stylesheet";
        quillStyles.href = "https://cdn.quilljs.com/1.3.6/quill.snow.css";
        styleContainer.appendChild(quillStyles);

        // Add custom styles to fix selection and toolbar interactions
        const customStyles = document.createElement("style");
        customStyles.textContent = `
          .ql-container {
            position: relative;
            z-index: 1;
          }
          
          .ql-toolbar {
            position: relative;
            z-index: 2;
          }
          
          .ql-editor {
            min-height: 200px;
          }
          
          /* Fix selection handling */
          ::selection {
            background: #b4d5fe;
          }
          
          /* Ensure toolbar buttons are clickable */
          .ql-toolbar button {
            pointer-events: auto;
          }
          
          /* Fix tooltip positioning */
          .ql-tooltip {
            position: absolute;
            z-index: 3;
          }
        `;
        styleContainer.appendChild(customStyles);
        
        shadow.appendChild(styleContainer);
      } else {
        setShadowRoot(shadowRootRef.current.shadowRoot);
      }
    }
  }, [shadowRoot]);

  // Add a container div to help with positioning and events
  return (
    <div ref={shadowRootRef} className="quill-shadow-wrapper">
      {shadowRoot && ReactDOM.createPortal(
        <div className="quill-container">
          {children}
        </div>,
        shadowRoot
      )}
    </div>
  );
};

const App = () => {
  const initialValue = `highlight this text`;
  const [value, setValue] = useState(initialValue);
  const quillRef = useRef<any>(null);

  // Enhanced modules configuration with custom handlers
  const enhancedModules = {
    ...modules,
    toolbar: {
      ...modules.toolbar,
      handlers: {
        // Add custom handlers for toolbar actions if needed
      }
    }
  };

  // Handle selection changes
  const handleSelectionChange = (range: any, source: string, editor: any) => {
    if (range) {
      console.log('Selection:', range.index, range.length);
    }
  };

  return (
    <>
      <ShadowWrapper>
        <ReactQuill
          ref={quillRef}
          modules={enhancedModules}
          value={value}
          theme="snow"
          onChange={setValue}
          onChangeSelection={handleSelectionChange}
          placeholder="Content goes here..."
        />
      </ShadowWrapper>
      <div style={{ width: "100%" }}>
        <pre>{value}</pre>
      </div>
    </>
  );
};

export default App;

To use this:

• Replace your current code with the updated version
• Make sure all required dependencies are installed
• You may need to adjust the z-index values based on your specific needs

A few additional tips:

• If you still experience issues with specific toolbar actions, you can add custom handlers in the enhancedModules.toolbar.handlers object
• You might want to add additional CSS rules in the customStyles section if you need to match your application’s styling
• The pointer-events: auto on toolbar buttons is crucial for proper click handling

Hope this helps