pandao / editor.md

The open source embeddable online markdown editor (component).
http://editor.md.ipandao.com/
MIT License
13.83k stars 2.42k forks source link

Excessive spacing when using an apostrophe(') #623

Open CodeSpent opened 6 years ago

CodeSpent commented 6 years ago

image

When adding an apostrophe, excessive spacing is added.

KevHH commented 5 years ago

Inspired by #544, I took a look at the file lib/marked.min.js and it seems that the author was, for some reason, replacing apostrophes and double quotation marks with their Chinese counterparts, which have some extra space included.

astrophe Capture1

double quotation marks Capture2

Removing them does the trick for me. Not sure why this was done in the first place though.

jaradc commented 4 years ago

Seems caused by smartypants. My notes from going through this myself. If you're OK with modifying marked.min.js.

option 1 (easiest?)

Change: if(!this.options.smartypants) to if(this.options.smartypants)

This will cause just the text to pass through without any replacement. Smartypants is set to false (smartypants:false,) in marked.min.js so this conversion seems to happen when it's initialized.

option 2

In marked.min.js, option 1:

.replace(/(^|[-\u2014/(\[{"\s])'/g,"$1\u2018").replace(/'/g,"\u2019").replace(/(^|[-\u2014/(\[{\u2018\s])"/g,"$1\u201c").replace(/"/g,"\u201d")

with

.replace(/(^|[-\u2014/(\[{"\s])'/g,"$1\u0027").replace(/'/g,"\u0027").replace(/(^|[-\u2014/(\[{\u0027\s])"/g,"$1\u0022").replace(/"/g,"\u0022")

The character replacement mapping is:

Replace:
Left single quote: \u2018
Right single quote: \u2019
with
Single-quote : \u0027

Left double quote: \u201c
Right double quote: \u201d
with
Double-quotes: \u0022

option 3

Use jQuery to replace on front-end. Not fully flushed out idea because would need to modify for ul, or ol, etc.

<script type="text/javascript">
  $(function () {
    $('#test-markdown-view p').contents().each(function () {
      this.textContent = this.textContent
            .replace(/[\u2018\u2019]/g, "'")
            .replace(/[\u201C\u201D]/g, '"');
    });
  })
</script>