premieroctet / next-admin

▲ Full-featured admin for Next.js and Prisma
https://next-admin.js.org
MIT License
313 stars 16 forks source link

[BUG] - Rich Text Field HTML renders with tons of extra white space #347

Closed ogoldberg closed 4 months ago

ogoldberg commented 4 months ago

Description

I have a rich text field. When I have a large body of html it renders a little strangely in the Rich Text Field. Here's an example: image

Here's the html:

<div>
  <div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div>
            <div>
              <h1>STORE/NIGHT CLERK</h1>
            </div>
            <div>
              <div>
                <span>Seattle, WA, United States</span>
              </div>
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div>
            <div>
              <div>
                <h2></h2>
                <div>
                  Create an outstanding customer experience through exceptional
                  service. Establish and maintain a safe and clean environment
                  that encourages our customers to return. Assist the department
                  manager in reaching sales and profit goals established for the
                  department and monitor all established quality assurance
                  standards. Embrace the Customer 1st strategy and encourage
                  associates to deliver excellent customer service. Demonstrate
                  the company s core values of respect, honesty, integrity,
                  diversity, inclusion and safety.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div>
            <div>
              <div>
                <h2>Responsibilities</h2>
                <div>
                  - Promote trust and respect among associates<br />- Create an
                  environment that enables customers to feel welcome, important
                  and appreciated by answering questions regarding products sold
                  within the department and throughout the store<br />- Gain and
                  maintain knowledge of products sold within the department and
                  be able to respond to questions and make suggestions about
                  products<br />- Recommend grocery items to customers to ensure
                  they get the products they want and need; inform customers of
                  grocery specials<br />- Check product quality to ensure
                  freshness; review sell by dates and take appropriate action<br />-
                  Label, stock and inventory department merchandise; provide
                  customers with fresh products that they have ordered<br />-
                  Report product ordering/shipping discrepancies to the
                  department manager<br />- Display a positive attitude<br />-
                  Stay current with present, future, seasonal and special ads<br />-
                  Adhere to all food safety regulations and guidelines<br />-
                  Ensure proper temperatures in cases and coolers are maintained
                  and temperature logs are maintained<br />- Reinforce safety
                  programs by complying with safety procedures and identify
                  unsafe conditions and notify store management<br />- Practice
                  preventive maintenance by properly inspecting equipment and
                  notify appropriate department or store manager of any items in
                  need of repair<br />- Notify management of customer or
                  employee accidents<br />- Report all safety risks/issues and
                  illegal activity, including robbery, theft or fraud<br />-
                  Must be able to perform the essential job functions of this
                  position with or without reasonable accommodation<br />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div>
            <div>
              <div>
                <h2>Qualifications</h2>
                <div>
                  <b> Minimum </b><br />- Ability to handle stressful
                  situations<br />- Knowledge of basic math (counting, addition,
                  and subtraction)<br />- Effective communication skills<br /><br /><b>
                    Desired </b
                  ><br />- Any retail experience<br />- Second language
                  (speaking, reading and/or writing)<br />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div></div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div>
            <div>
              <div>
                <h2>About Us</h2>
                <div>
                  <div>
                    Based in Washington, Qualify Food Centers (QFC) merged with
                    The Kroger Company in 1998. Today, we’re proudly serving QFC
                    customers in 59 stores throughout the Washington and Oregon.
                  </div>
                  <div>
                    As part of the Kroger family of companies, we take pride in
                    bringing diverse teams with a passion for food and people
                    together with one common purpose: To Feed the Human Spirit.
                    With a history of innovation, we work tirelessly to create
                    amazing experiences for our customers, communities AND each
                    other, with food at the heart of it all.
                  </div>
                  <div>
                    Here, people matter. That’s why we strive to provide the
                    ingredients you need to create your own recipe for success
                    at work and in life. We help feed your future by providing
                    the value and care you need to grow. If you’re caring,
                    purpose-driven and hungry to learn, your potential is
                    unlimited.
                  </div>
                  <div>
                    Whether you’re seeking a part-time position or a new career
                    path, we’ve got a fresh opportunity for you. Apply today to
                    become part of our QFC family!&nbsp;
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div>
            <div>
              <div>
                <h2>About the Team</h2>
                <div>
                  <p>
                    <span
                      >The final rate of pay is determined at store level based
                      on prior equivalent work experience.</span
                    >
                  </p>
                  <p>
                    <span
                      >To support and reward our hardworking and friendly
                      associates, we offer much more than just a paycheck. We
                      strive to feed your future by offering the ingredients you
                      need to create your own recipe for success at work and in
                      life. Our associates receive a full plate of benefits that
                      promote their physical, emotional and financial
                      well-being, including access to competitive health care
                      and retirement benefits, paid time off, mental health
                      resources, associate discounts and opportunities to learn,
                      grow and advance. Our associates also get to help us make
                      a difference in our communities through our Zero Hunger |
                      Zero Waste and Framework for Action: Diversity, Equity and
                      Inclusion plans. Visit the thekrogerco.com to learn more
                      about our work in the communities we serve and how our
                      associates help us be a good neighbor.
                    </span>
                  </p>
                  <p>
                    <span
                      >Below is a list of some of the benefits we offer our
                      associates.</span
                    >
                  </p>
                  <p><span>Health &amp; Well-being Benefits:</span></p>
                  <ul>
                    <li>
                      <i><span>Health care benefits</span></i>
                    </li>
                    <li>
                      <i
                        ><span
                          >Paid time off such as vacation, sick leave, and
                          parental leave
                        </span></i
                      >
                    </li>
                    <li>
                      <i
                        ><span
                          >Mental and emotional support resources through our
                          Employee Assistance Program</span
                        ></i
                      >
                    </li>
                  </ul>
                  <p>
                    <i><span>Financial Benefits:</span></i>
                  </p>
                  <ul>
                    <li>
                      <i
                        ><span
                          >Participation in a 401(k) plan and/or participation
                          in a Taft-Hartley pension fund, subject to certain
                          eligibility requirements</span
                        ></i
                      >
                    </li>
                    <li>
                      <i
                        ><span
                          >Group term life insurance eligible, depending on
                          varying criteria by location and subject to certain
                          eligibility requirements</span
                        ></i
                      >
                    </li>
                    <li>
                      <i
                        ><span
                          >Potentially bonus eligible depending on varying
                          criteria by location</span
                        ></i
                      >
                    </li>
                    <li>
                      <i><span>Associate discounts</span></i>
                    </li>
                  </ul>
                  <p>
                    <i><span>Growth and Development Benefits:</span></i>
                  </p>
                  <ul>
                    <li>
                      <i
                        ><span
                          >Tuition assistance, college scholarships and
                          educational leave of absence, depending on varying
                          criteria by location and subject to certain
                          eligibility requirements</span
                        ></i
                      >
                    </li>
                    <li>
                      <i
                        ><span
                          >Robust internal training and development resources to
                          grow your career</span
                        ></i
                      >
                    </li>
                  </ul>
                  <p>
                    <span
                      >We want the best for associates and our customers, and
                      together, we strive to create a welcoming and engaging
                      environment where you’ll love to work. If you are
                      interested in becoming a valued member of our team, apply
                      now. We look forward to getting to know you!</span
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div>
            <div>
              <div>
                <button>
                  <span>Apply Now</span>
                </button>
              </div>
            </div>
            <div>
              <div>
                <a>I Am A Current Associate</a>
              </div>
            </div>
            <div>
              <p>
                <span>Already part of our team?</span><br /><span
                  >Visit the </span
                ><a><span>associate career site</span></a
                ><span> to apply for this role.</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div>
            <div>
              <div>
                <h2>Job Info</h2>
                <div>
                  <div>
                    <div>
                      <ul>
                        <li>
                          <span>Job Identification</span>
                          <span>41373</span>
                        </li>
                        <li>
                          <span>Job Category</span>
                          <span>Store Operations</span>
                        </li>
                        <li>
                          <span>Posting Date</span>
                          <span>05/22/2024, 01:39 PM</span>
                        </li>
                        <li>
                          <span>Locations</span>
                          <span>
                            <span>
                              <span>
                                1401 Broadway, Seattle, WA, 98122, US
                              </span>
                            </span>
                          </span>
                        </li>
                        <li>
                          <span>Job Schedule</span>
                          <span>Part time</span>
                        </li>
                        <li>
                          <span>Minimum Salary</span>
                          <span>20.22</span>
                        </li>
                        <li>
                          <span>Maximum Salary</span>
                          <span>24.15</span>
                        </li>
                        <li>
                          <span>Line of Business</span>
                          <span>Grocery Retail</span>
                        </li>
                        <li>
                          <span>Banner Name</span>
                          <span>Quality Food Centers</span>
                        </li>
                        <li>
                          <span>Education Level</span>
                          <span>No formal education</span>
                        </li>
                        <li>
                          <span>Hourly or Salaried</span>
                          <span>Hourly</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div>
            <div>
              <div>
                <div>
                  <media-slider>
                    <div>
                      <ul>
                        <li></li>
                      </ul>
                      <div></div>
                    </div>
                  </media-slider>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <cc-parallax> </cc-parallax>
          <cc-video-background> </cc-video-background>
          <div>
            <div>
              <p>
                <span><strong>Similar Jobs</strong></span>
              </p>
            </div>
            <div>
              <div>
                <ul></ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Reproduction URL

asdf

Reproduction steps

see description

Next router

App router

Next Admin version

4.4.1

Screenshots

![DESCRIPTION](LINK.png)

Next Admin options

N/A

Logs

No response

Browsers

Chrome

cregourd commented 4 months ago

Can you please give us your original input that you had put in the rich text field to try reproduce this case ?

ogoldberg commented 4 months ago

Can you please give us your original input that you had put in the rich text field to try reproduce this case ?

It's pasted above in my original comment

ogoldberg commented 4 months ago

For context, not all of our data is originally entered via the admin tool. In this case, this content is coming from an automated scrape and being persisted directly to the database programatically.

cregourd commented 4 months ago

Thanks for precise context it's really useful, we will check that behavior

cregourd commented 4 months ago

This bug was fixed on v4.4.2 🚀

Note that your actual input contains some unsupported tags (e.g. cc-parallax). These tags can cause trouble when you edit the field

Feel free to give us feedback