How to recreate google keep note-CodePudding

I tried to create my own notes for the school project. And I ran into some problems, I am using contentEditable for the note-taking part and it auto-generates divs. I tried to remove them with not much luck.

Html

<div id="main" contenteditable="true"></div>
<script type="text/javascript" src="static/js/note.js"></script>

JavaScript

$('#main').on('DOMSubtreeModified', function(){
        $('#main > div').children().unwrap();
    });

In this code, you have to press space twice but the bigger problem is when you try to create a new line above the text all the text below gets deleted.

also tried using replace:

$("#main div").replaceWith("<br> ")

I tried using many different options like replacing when enter got pressed...

CodePudding user response：

<body>
    <div id="main" contenteditable="true"></div>
    <script type="text/javascript">
        $('#main').on('DOMSubtreeModified', function(){
        $('#main > div').children().unwrap();
    });
    </script>
</body>

Your code is working fine, the <div> tags are being removed. Try using a different version of jQuery, I use

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

CodePudding user response：

With a little research, I found out...

Use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted <br> elements, IE/Opera used <p>, Chrome/Safari used <div>).

Fortunately, in modern browsers things are somewhat more consistent. As of Firefox 60, Firefox will be updated to wrap the separate lines in <div> elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.

If you want to use a different paragraph separator, the above browsers all support document.execCommand, which provides a defaultParagraphSeparator command to allow you to change it. For example, to use <p> elements:

document.execCommand("defaultParagraphSeparator", false, "p");

Additionally, Firefox supports the non-standard argument, br, for defaultParagraphSeparator since Firefox 55. This is useful if your web application expects the older Firefox behavior, and you don't want to or don't have the time to update it to use the new behavior. You can use the older Firefox behavior with this line:

document.execCommand("defaultParagraphSeparator", false, "br");

You can see MDN web docs for more informations.