Hanging Indent

I’ve been trying to modify the indentwrap sample to create a hanging indent but no luck.

What I’m trying to achieve is that for example for a line that starts with a hyphen, when it wraps, the next (wrapped) line will indent under the first non space character after the hyphen and not under the hyphen as in the sample.

Is this possible ? Can I get any pointers to implement this ?

Thanks!

Reposting my https://github.com/codemirror/CodeMirror/issues/3263 answer:

Working example: http://mathdown.net/?doc=demo-indentwrap
Code: https://github.com/cben/mathdown/blob/428d6fe5a6cf54c9d4a8385cfced42079edcc323/mathdown.js#L151-L167

The indentation doesn’t line up perfectly in my case because I’m generally using a variable-width font,
and while I do style leading spaces and bullets to be fixed-width [1],
cm.defaultCharWidth() does not represent my fixed font, and I’ve been so far too lazy to fix it…

[1] https://github.com/cben/mathdown/blob/428d6fe5a6cf54c9d4a8385cfced42079edcc323/mathdown.js#L96-L114
plus styling .cm-leadingspace, .cm-formatting-list, .cm-formatting-quote in mathdown.css

Basically I’m just counting the chars I want, not only spaces.
Most of my answer is how my code has issues not relevant to you; I’ll create a clean codepen shortly.

Looking deeper now, the reason it wasn’t obvious to you is that CodeMirror.countColumn() is undocumented,
and indentwrap.html passed null for end, which defaults to counting whitespace.

  // Counts the column offset in a string, taking tabs into account.
  // Used mostly to find indentation.
  var countColumn = CodeMirror.countColumn = function(string, end, tabSize, startIndex, startValue) {
    if (end == null) {
      end = string.search(/[^\s\u00a0]/);
      if (end == -1) end = string.length;
    }
    for (var i = startIndex || 0, n = startValue || 0;;) {
      var nextTab = string.indexOf("\t", i);
      if (nextTab < 0 || nextTab >= end)
        return n + (end - i);
      n += nextTab - i;
      n += tabSize - (n % tabSize);
      i = nextTab + 1;
    }
  };
1 Like

Clean minimal demo: http://codepen.io/cben/pen/JdKyRE/right/

2 Likes

This works perfectly cben - thank you very much !