nib-edit / nib

Wysiwyg / Text editor components built using React and Prosemirror
https://nib-edit.github.io/nib/
GNU General Public License v3.0
228 stars 26 forks source link

Number of line breaks is growing #86

Closed rwaldron closed 4 years ago

rwaldron commented 4 years ago

Somehow this:

<p ><br></p><p >

Turns into this:

<p ><br ><br></br></p><p >

By doing something as simple as focusing away from the editor and back.

Rick

jpuri commented 4 years ago

I am not able to replicate this, can you plz share ur code / screenshot.

rwaldron commented 4 years ago

@jpuri thanks for the quick response, here's a repro: https://codesandbox.io/s/nib-example-19tod

rwaldron commented 4 years ago

@jpuri just wanted to follow up and see if there was anything further I could do here?

jpuri commented 4 years ago

Hey @rwaldron : sorry for delay, I looked at shared example and found that structure of HTML is wrong according to schema. br is nested in h1:

Screenshot 2019-12-21 at 10 49 17 PM

This nesting looks wrong. Conversion from/to HTML works as per defined schema.

rwaldron commented 4 years ago

@jpuri thanks for taking a look, unfortunately I think I may have mis-communicated the issue in first report. My initial html doesn't have a <br> nested in a <h1>. This was my initial html (from the example I linked to):

const initialValuePulledFromDatabase = "<br>hi!";

Hopefully this super reduced case better illustrates the problem I'm running into: https://codesandbox.io/s/nib-reduced-wdzbh. The code for the reduction is:

import { convertFromHTML, convertToHTML } from "nib-converter";

const initialValue = "<br>hi!";
const a = convertFromHTML(initialValue);
const b = convertToHTML(a.doc);

console.log(`Initial Value: "${initialValue}"`);
console.log(`Converted From HTML (1): ${JSON.stringify(a, null, 2)}`);
console.log(`Converted Back To HTML (1): "${b}"`);

const c = convertFromHTML(b);
const d = convertToHTML(c.doc);

console.log(`Converted From HTML (2): ${JSON.stringify(c, null, 2)}`);
console.log(`Converted Back To HTML (2): "${d}"`);

Which outputs:

Initial Value: "<br>hi!" 
Converted From HTML (1): {
  "doc": {
    "type": "doc",
    "content": [
      {
        "type": "heading",
        "attrs": {
          "level": 1
        },
        "content": [
          {
            "type": "hardBreak"
          },
          {
            "type": "text",
            "text": "hi!"
          }
        ]
      }
    ]
  },
  "selection": {
    "type": "text",
    "anchor": 0,
    "head": 0
  }
} 
Converted Back To HTML (1): "<h1 ><br ><br></br>hi!</h1>" 
Converted From HTML (2): {
  "doc": {
    "type": "doc",
    "content": [
      {
        "type": "heading",
        "attrs": {
          "level": 1
        },
        "content": [
          {
            "type": "hardBreak"
          },
          {
            "type": "hardBreak"
          },
          {
            "type": "hardBreak"
          },
          {
            "type": "text",
            "text": "hi!"
          }
        ]
      }
    ]
  },
  "selection": {
    "type": "text",
    "anchor": 0,
    "head": 0
  }
} 
Converted Back To HTML (2): "<h1 ><br ><br></br><br ><br></br><br ><br></br>hi!</h1>" 

The initial html string "<br>hi!" ends up being "<h1 ><br ><br></br><br ><br></br><br ><br></br>hi!</h1>" after being converted from HTML and back to HTML twice