5

I'm trying to create a text editor in electron. I have this in my HTML file:

<pre><div class="file-content" contenteditable="true"></div></pre>
<button onclick="saveFile();">Save</button>

In a Javascript file, I have this:

const fs = require('fs');
const $ = require('jquery');

function saveFile() {
    fs.writeFile([filepath], $('.file-content').text(), function (err) {
        if (err) return console.log(err);
    });
}

But when I enter a text with a few lines in it, when I click the save button, the text gets written as one line. For example:

Input:

line1
line2
line3

File after save:

line1line2line3
3174N
  • 188
  • 2
  • 14
  • Have you determined if it's the `text()` call that's removing the newlines, or if it's the `writeFile` call that's doing it? – pushkin Dec 10 '20 at 04:05
  • [docs](https://api.jquery.com/text/) say "Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space" – pushkin Dec 10 '20 at 04:05
  • 1
    @3174N I've checked the ['duplicate'](https://stackoverflow.com/questions/22678446/how-to-keep-line-breaks-when-using-text-method-for-jquery) and none of the answers on that page work for your scenario. The [accepted answer](https://stackoverflow.com/a/22678568/4166522) does .text() on a prefilled

    tag, which is exactly what you're already doing. That works for a prefilled

    tag, but not for your scenario of a content editable

    where you've typed in the text. The 'whitespace: pre' in that answer refers to the the target when writing the result to the screen so also doesn't help us.
     – Rich N Dec 10 '20 at 18:06
  • 1
    The regex substitution in the [other upvoted answer](https://stackoverflow.com/a/27079244/4166522) also doesn't correctly work with a content-editable div output. It's replacing
    tags with linebreaks (\n) and Chromium is putting
    tags in your entered text, not
    .
     – Rich N Dec 10 '20 at 18:06
  • 1
    I had written an answer to your question, which I can't now post. However it was based on [this code in Github Gist](https://gist.github.com/nathansmith/86b5d4b23ed968a92fd4#file-2-converttotext-js) which broadly DOES do what you want. In fact all you need are a couple of lines from it. – Rich N Dec 10 '20 at 18:07
  • 1
    You need to start with the html, since .text() is stripping out the line breaks. So `let value = $('.file-content').html();`. Now use the lines `value = value.replace(/
    /gi, '\n');` and `value = value.replace(/<(.*?)>/g, '');` from the Gist. Then write `value` to your file. I've tested this in Electron with your input and it works.
     – Rich N Dec 10 '20 at 18:07
  • 1
    Doing it this way does break the rule of [never using regexes to parse HTML](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454), of course, so there may be better answers. – Rich N Dec 10 '20 at 18:08
  • @RichN [This answer](https://stackoverflow.com/a/27079244/13368737) did resolve my question, so I marked the question as duplicate. But your answer also works for me, so I'm thankful to you for answering it. – 3174N Dec 11 '20 at 10:58

0 Answers0