Editor displays normalized HTML and not pretty HTML (removes white/line spacings completely) #7356

getairex · 2025-03-20T14:37:21Z

getairex
Mar 20, 2025

When I load up my editor with valid HTML, the output is normalized meaning all line spacings and white spaces are removed and it is just a condensed version without any of the original formatting you would expect like pretty HTML. I added the serialization with the ExtendedTextNode but it did not fix anything. This is how I am inserting the HTML:

    useEffect(() => {
      if (!editor) {
        console.error('Editor instance is not available.');
        return;
      }

      if (htmlString) {
        editor.update(() => {
          try {
            // 1. Parse the HTML
            const parser = new DOMParser();
            const dom = parser.parseFromString(htmlString, 'text/html');
            
            // 2. Generate Lexical nodes
            const nodes = $generateNodesFromDOM(editor, dom);
            
            // 3. Clear and insert
            const root = $getRoot();
            root.clear();
            root.append(...nodes);

            console.log('[DEBUG] HTML content has been inserted into the editor.');
          } catch (error) {
            console.error(
              'Error during the HTML parsing or node insertion:',
              error
            );
          }
        });
      }
    }, [editor, htmlString, textHtmlMimeType]);

etrepum · 2025-03-20T14:59:24Z

etrepum
Mar 20, 2025
Collaborator

You aren't providing any specific expected input and output but it sounds like you are expecting the original HTML formatting to be preserved. It won't be. Lexical does not represent documents as HTML internally so any encoding details of the input (e.g. insignificant whitespace, comments, even the presence and order of certain tags like text vs. text) that do not map directly to the same sort of hierarchy in LexicalNodes are completely lost at that point.

1 reply

getairex Mar 20, 2025
Author

Please view the images I attached:

The one with the condensed text is my editor when I pass it the HTML and the other one is when I put the same HTML into a HTML viewer which I want to replicate in my editor.

I understand I might need to make custom nodes but what would you recommend to display the output in its uncondensed form. I also provided the HTML code below. Thanks.

SAMPLE RENTAL AGREEMENT(Basic / Beginning)THIS AGREEMENT made this 15ᵗʰ Day of June, 2012, by and between ABC Properties, herein called "Landlord," and Silvia Mando, herein called "Tenant." Landlord hereby agrees to rent to Tenant the dwelling located at 9876 Cherry Avenue, Apartment 426 under the following terms and conditions.FIXED-TERM AGREEMENT (LEASE): Tenants agree to lease this dwelling for a fixed term of one year, beginning July 1, 2012 and ending June 30, 2013. Upon expiration, this Agreement shall become a month-to-month agreement AUTOMATICALLY, UNLESS either Tenants or Owners notify the other party in writing at least 30 days prior to expiration that they do not wish this Agreement to continue on any basis.RENT: Tenant agrees to pay Landlord as base rent the sum of $685 per month, due and payable monthly in advance on the 1st day of each month during the term of this agreement. The first month's rent is required to be submitted on or before move-in.FORM OF PAYMENT: Tenants agree to pay their rent in the form of a personal check, a cashier's check, or a money order made out to the Landlord.RENT PAYMENT PROCEDURE: Tenants agree to pay their rent by mail addressed to the Landlord at 426 Main Street, Anycity, USA, or in person at the same address, or in such other way as the Landlord will advise the Tenant in writing.RENT DUE DATE: Tenant hereby acknowledges that late payment will cause Landlord to incur costs not contemplated by this Rental Agreement. We allow for a 3 day grace period. In the event rent is not received prior to the 4th of the month, Tenant agrees to pay a $25 late fee, plus an additional $5 per day for every day thereafter until the rent is paid. Neither ill health, loss of job, financial emergency, or other excuses will be accepted for late payment.BAD-CHECK SERVICING CHARGE: In the event Tenant's check is dishonored and returned unpaid for any reason to Landlord, Tenant agrees to pay a returned check charge of $25 AND accept whatever consequences there might be in making a late payment. If for any reason a check is returned or dishonored, all future rent payments will be cash or money order.SECURITY DEPOSIT: Tenants hereby agree to pay a security deposit of $685 to be refunded upon vacating, returning the keys to the Landlord and termination of this contract according to other terms herein agreed. This deposit will be held to cover any possible damage to the property. No interest will be paid on this money and in no case will it be applied to back or future rent. It will be held intact by Landlord until at least thirty (30) working days after Tenants have vacated the property. At that time Landlord will inspect the premises thoroughly and assess any damages and/or needed repairs. This deposit money minus any necessary charges for missing/dead light bulbs, repairs, cleaning, etc., will then be returned to Tenant with a written explanation of deductions, within 60 days after they have vacated the property.Teacher Resources for Consumer.gov | Developed for the FTC by the Center for Applied LinguisticsCLEANING FEETenant hereby agrees to accept property in its present state of cleanliness. They agree to return the property in the same condition or pay a $200.00 minimum cleaning fee if the Landlord has to have the property professionally cleaned.REMOVAL OF LANDLORD'S PROPERTY:If anyone removes any property belonging to Landlord without the express written consent of the Landlord, this will constitute abandonment and surrender of the premises by Tenant and termination by them of this Rental Agreement. Landlord may also take further legal action.VEHICLES & GARAGE USE:Tenants agree to keep a maximum of 1 vehicle on premises or in the garage. These vehicles must be both operable and currently licensed. Tenants agree to park their vehicles in assigned spaces and to keep those spaces clean of oil drippings. Tenants agree not to park boats, recreational trailers, utility trailers, and the like on the premises without first obtaining Landlords' written permission.UTILITIES:Resident will be responsible for payment of all utilities, telephone, gas, or other bills incurred during their residency. They specifically authorize Landlord to deduct amounts of unpaid bills from their Security Deposits in the event they remain unpaid after termination of this agreement. The Landlord/Owner agrees to only pay water, garbage, and sewer bills.SERVICES. Landlord shall be responsible for the following utilities and services in connection with the premises: - Water and sewer - Garbage and trash disposalTenant shall be responsible for the following utilities and services in connection with the Premises: - Electricity - Gas - Heating - Telephone - All other utilities and services not listed under the Landlords responsibilityTenant acknowledges that Landlord has fully explained to the Tenant the utility rates, charges and services for which Tenant will be required to pay (if any), other than those to be paid directly to the utility company furnishing the service.NOTIFICATION OF SERIOUS BUILDING PROBLEMS:Tenant agrees to notify Landlord immediately if roof leaks, water spots appear on ceiling, or at the first sign of termite activity. Tenants also agree to notify the Owners immediately upon first discovering any signs of serious building problems such as foundation cracks, a tilting porch, a crack in plaster, buckling drywall or siding, a spongy floor, a leaky water heater, etc. If the tenant does not notify landlord in a prompt matter the tenant may be held financially responsible.13. PETS:Pets are allowed on the premises only by obtaining the Landlords' written permission first. When possession of the property is given to the Tenant, only those pets listed on the Rental Application will be allowed unless subsequent written permission has been granted. "Pets" does not include animals trained to serve the handicapped, such as seeing-eye dogs, hearing dogs, or service dogs. These animals may be housed on the premises so long as they are in the direct service of those they were trained to serve and so long as Landlord is notified in advance in writing of the circumstances. In any case, when permission is granted, owners are required to pay an additional $25 per month pet-rent charge for one or more. Additionally, a pet-application sheet must be submitted before move-in.If problems with pets occur there are several ways it may be handled depending on the events. If the pet is in any way dangerous it will not be allowed on the premises. In the event of the owner being negligent in regards to clean-up or allowing access to areas that the pet could damage the tenant will be fined or money will be taken from the deposit. If the pet is a nuisance in any way the landlord may make suggestions to how the pet is cared for or may require the tenant to attend a training course to be approved by the landlord.Pets are never to be allowed in the yard unsupervised. Cleaning up after the pet is necessary immediately following defecation. Constant barking will not be permitted.14. FULL DISCLOSURE:The Tenants signing this Rental Contract hereby state that all questions about this Rental Agreement have been answered, that they fully understand all the provisions of the agreement and the obligations and responsibilities of each party, as spelled out herein. They further state that they agree to fulfill their obligations in every respect or suffer the full legal and financial consequences of their actions or lack of action in violation of this agreement. Signature by the Tenant on this Rental Agreement is acknowledgement and he/she has received a signed copy of the Rental Agreement.Accepted this ___ day of ____, 20 ___ .Tenant: _________ Date: _______Landlord-Manager: ______ Date: _______Teacher Resources for Consumer.gov | Developed for the FTC by the Center for Applied Linguistics
.

etrepum · 2025-03-20T20:05:44Z

etrepum
Mar 20, 2025
Collaborator

I'm not going to comb through all that but it looks like you are expecting all of the styles to be copied over exactly which is not how Lexical's importDOM works by default. You will have to customize that, either with node overrides or the html configuration property. https://lexical.dev/docs/concepts/serialization

You also need to pay attention to the styles configured in your editor's theme which may affect rendering, obviously whatever you're importing is not being rendered with those classes when it's outside your editor.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Editor displays normalized HTML and not pretty HTML (removes white/line spacings completely) #7356

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

Select a reply

Editor displays normalized HTML and not pretty HTML (removes white/line spacings completely) #7356

getairex Mar 20, 2025

Replies: 2 comments · 1 reply

etrepum Mar 20, 2025 Collaborator

getairex Mar 20, 2025 Author

etrepum Mar 20, 2025 Collaborator

getairex
Mar 20, 2025

Replies: 2 comments 1 reply

etrepum
Mar 20, 2025
Collaborator

getairex Mar 20, 2025
Author

etrepum
Mar 20, 2025
Collaborator