Duplicated Quill toolbar

[mwkcoding]

Describe the bug Two identical Quill toolbars showing up when using the Quill field in a layout.

To Reproduce Steps to reproduce the behavior:

1. Install Orchid
2. Follow guide to make Email Sender Layout (https://orchid.software/en/docs/quickstart/)
3. Visit page and see the duplicated Quill toolbar

Expected behavior Not seeing two Quill toolbars?

Screenshots

Desktop (please complete the following information):

• OS: MacOS Catalina 10.15.3
• Browser: Chrome Version 80.0.3987.116
• Version: ???

Server (please complete the following information):

• Platform Version: 6.10.2
• Laravel Version: 6.14
• PHP Version: 7.4.3
• Database: MySQL
• Database Version: 5.7

Additional context Add any other context about the problem here.

[tabuna]

Hi @mwkcoding

I could not repeat it following the instructions:

---

Do you have any errors in the browser console? On the screen with a list of fields, is this reproduced?

[mwkcoding]

I have the following errors in my browser console:

[mwkcoding]

It might be worth noting that this happened after an update of orchid with composer update. I don't remember from or to which version it was though

[tabuna]

@mwkcoding I think it’s now clear why duplication occurs. Please correct error 502, this is due to your web server or tunnel/proxy settings. Apparently this breaks javascript code

[mwkcoding]

@tabuna How do I correct an error I didn't make? I'm using Laravel Valet on MacOS. And like I wrote, this happened after an update.

[tabuna]

502 error is a web server error, can we see the logs? And a detailed answer in the browser network tab?

[mwkcoding]

The error disappeared by itself after I reloaded the page with the devtools open (ignores cache) and I now have this error

[tabuna]

The error disappeared by itself after I reloaded the page with the devtools open (ignores cache) and I now have this error

Notifications are polled every few minutes. Therefore, that error is no longer there. Hmm, please check in incognito mode with browser extensions disabled.

[mwkcoding]

Incognito has same result.

[mwkcoding]

@tabuna Any idea what I can do to fix this?

[mwkcoding]

It seems to have disappeared after I updated and ran php artisan cache:clear && php artisan config:cache

[tabuna]

Any idea what I can do to fix this?

How about a little research? (Better to do it in a new project.)

You can publish all js/css files to your applications and compile them yourself. To do this, run:

1. artisan preset orchid-source
2. npm install
3. npm run dev

All files are published to your application and you can analyze why you are accessing the element returns null.

[tabuna]

I will close this issue. If you are still experiencing such a problem, please feel free to open it again.

[ecuation]

Same error here, it happens when navigating from pages.

[blankster]

@ecuation did you tried the above? If yes, how can it be reproduced?

[Novemburr]

Same here, I'll see if I can hunt it down. Like as not I'm doing something silly.

EDIT: It was something silly indeed. I had a copy of the editor hidden elsewhere on the page so I could clone it as needed. It contained a copy of the same initialization code which was running twice and double initializing just the first editor.

[e1sep0]

The same behavior in modal, when i try to create new instance

When trying to edit some model, behavior is correct:

Nothing in debug panel

[qvarts]

The same behavior when Turbo cache = true and using browser history navigation buttons.

Steps to reproduce the behavior:

1 Install Orchid 2 Set turbo cache = true in config/platform.php 2 Visit Examples->Form Elements->Text Editors page 3 Go to any other page and go back with the browser history navigation button or Alt + Arrow Left

You will see two SimpleMDE editor and two Quill toolbars like in screenshot:

[JayJCodez]

The issue most of you are having is due to re-renders. You can keep track of the state of your editor and make sure it renders only once.

Solution:

Initialization Check: Added a check to ensure that Quill is initialized only once. This prevents multiple instances of Quill from being created and thus prevents the toolbar from loading multiple times.

Content Update Check: Adjusted the componentDidUpdate method to only update the content if editorState has changed, without initialising Quill.

Example:

import React, { Component, createRef } from "react";
import Quill from "quill";

import "quill/dist/quill.snow.css";

interface MyEditorProps {
  editorState: string;
  onChange: (newContent: string) => void;
}

class MyEditor extends Component<MyEditorProps> {
  private editorRef = createRef<HTMLDivElement>();
  private quill?: Quill;  // Use optional chaining for Quill instance

  componentDidMount() {
    this.initializeQuill(); // Initialize Quill when the component mounts
  }

  componentDidUpdate(prevProps: MyEditorProps) {
    // Only update the content if editorState has changed
    if (prevProps.editorState !== this.props.editorState && this.quill) {
      this.quill.root.innerHTML = this.props.editorState;
    }
  }

  initializeQuill() {
    if (this.editorRef.current && !this.quill) {
      // Initialize Quill only if it has not been initialized
      this.quill = new Quill(this.editorRef.current, {
        theme: "snow",
        modules: {
          toolbar: [
            [{ header: "1" }, { header: "2" }],
            [{ list: "ordered" }, { list: "bullet" }],
            ["bold", "italic", "underline"],
            [{ align: [] }],
            ["link"],
          ],
        },
      });

      // Set up the event listener for text changes
      this.quill.on("text-change", () => {
        if (this.quill) {
          this.props.onChange(this.quill.root.innerHTML);
        }
      });

      // Set initial content
      if (this.props.editorState) {
        this.quill.root.innerHTML = this.props.editorState;
      }
    }
  }

  render() {
    return (
      <div>
        <div ref={this.editorRef} style={{ minHeight: "200px" }}></div>
      </div>
    );
  }
}

export default MyEditor;