CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chromesafari
mareoraft
mareoraft

Reputation: 3902

Each line of content wrapped in a div

I'm having trouble troubleshooting an issue on provemath where the content is not rendering as desired.

The problem is that each line (except for the first) in written content is wrapped in a <div>. For example, the content

line1.
line2.

as you can see through the Safari web inspector is actually rendered as <p>line1.<div>line2.</div></p>. The DESIRED output is <p>line1.<br>line2.</p>.

There are a few things that could be coming into play here...

  1. I'm not sure how the browser takes in typed newlines.
  2. My content rendering function (included below) runs Markdown (actually, marked) and some regexs.
  3. CSS (included below) manipulates how some things are displayed, and I'm wondering if it can cause changes in the HTML itself. I previously thought the use of flexbox was causing this, but I changed the CSS to no avail.

Content rendering happens as follows:

Content is typed by user (hitting RETURN for a new line) and captured with jQuery's .html function

blind.value = $value.html()

to get the content, and then processed with

function render_content(string) {
    // make all \ into \\ instead, so that they will be \ again when marked is done. This is for MathJax postrender compatability.
    string = string.replace(/\\/g, '\\\\')
    string = string.replace(/\n/g, '<br />') // not doing anything AFAIK
    string = marked(string)

    string = string.replace(/img(\d+)/g, '<img src="image/$1.jpg" />')
    string = string.replace(/\\includegraphics\{(.*?)\}/g, '<img src="image/$1.jpg" />')

    return string
}

The CSS is as follows:

    .value {
        // display: inline-flex;
        display: inline;
        // flex-direction: column;
        vertical-align: top;
        width: 85%;
    }

you can see the old CSS commented out.

Upvotes: 7

Views: 331

Answers (3)

mareoraft
mareoraft

Reputation: 3902

For the sake of having an answer, the solution was to use a regex to delete occurrences of <div> and </div> that certain browsers add.

Since user input is escaped, this could not get confused with a user manually typing "", since THAT user input would result in an HTML-escaped string (and would not produce a div, merely text that says "").

Upvotes: 0

kjonach
kjonach

Reputation: 154

Why are you processing 'backslash' before 'newline'? Have you tried this? 

string = string.replace(/\n/g, '<br />')
string = string.replace(/\\/g, '\\\\')
string = marked(string)

Upvotes: 4

Ronny Dark Team
Ronny Dark Team

Reputation: 30

try wrapping both lines in a div, then using css grid to render them as you like. Here is a link documenting the css grid.

Upvotes: 1

Related Questions