IonicaBizau/medium-editor-markdown

handling other medium extensions

Opened this issue · 3 comments

hey everyone,
never seen a html to markdown component. normally its the other way around.

i am wondering if you have thought about how to save into the markdown the other potential medium extensions.
For example one extension i have seen makes tables (yes we can save that in markdown).
But another allows positioning in temrs of left or right justification. I dont think markdown is capable of holding that sort of data.

wondering what you think

cheers

Hmm, that's a good point, indeed. Ideas are welcome.

For tables, see #53 . It's pretty simple to do.
Add this code in me-mardown.standalone.js (start at line 157) allows to do it :

// ######################################
// #                                    #
// # ██████  ████  █████  ████   ██████ #
// # █ ██ █ ██  ██ ██  ██  ██    ██     #
// #   ██   ██  ██ ██  ██  ██    ██     #
// #   ██   ██████ █████   ██    █████  #
// #   ██   ██  ██ ██  ██  ██    ██     #
// #   ██   ██  ██ ██  ██  ██ ██ ██     #
// #  ████  ██  ██ █████  ██████ ██████ #
// #                                    #
// ######################################
var NL = "\n";

function convertTableElementToMarkdown(tableEl) {
  var rows = [];
  var trEls = tableEl.getElementsByTagName('tr');
  for(var i=0; i<trEls.length; i++) {
    var tableRow = trEls[i];
    var markdownRow = convertTableRowElementToMarkdown(tableRow, i);
    rows.push(markdownRow);
  }
  return rows.join(NL);
}

function convertTableRowElementToMarkdown(tableRowEl, rowNumber) {
  var cells = [];
  var cellEls = tableRowEl.children;
  for(var i=0; i<cellEls.length; i++) {
    var cell = cellEls[i];
    cells.push(cell.innerText + ' |');
  }
  var row = '| ' + cells.join(" ");

  if(rowNumber == 0) {
    row = row + NL + createMarkdownDividerRow(cellEls.length);
  }

  return row;
}

function createMarkdownDividerRow(cellCount) {
  var dividerCells = [];
  for(i = 0; i<cellCount; i++) {
    dividerCells.push('---' + ' |');
  }
  return '| ' + dividerCells.join(" ");
}
// ######################################
// #                                    #
// # ██████  ████  █████  ████   ██████ #
// # █ ██ █ ██  ██ ██  ██  ██    ██     #
// #   ██   ██  ██ ██  ██  ██    ██     #
// #   ██   ██████ █████   ██    █████  #
// #   ██   ██  ██ ██  ██  ██    ██     #
// #   ██   ██  ██ ██  ██  ██ ██ ██     #
// #  ████  ██  ██ █████  ██████ ██████ #
// #                                    #
// ######################################

/*
 * Finds a Markdown converter, gets the replacement, and sets it on
 * `_replacement`
 */

function process (node) {
  var replacement
  var content = getContent(node)

  // Remove blank nodes
  if (!isVoid(node) && !/A|TH|TD/.test(node.nodeName) && /^\s*$/i.test(content)) {
    node._replacement = ''
    return
  }

  for (var i = 0; i < converters.length; i++) {
    var converter = converters[i]

    if (canConvert(node, converter.filter)) {
      if (typeof converter.replacement !== 'function') {
        throw new TypeError(
          '`replacement` needs to be a function that returns a string'
        )
      }

      var whitespace = flankingWhitespace(node, content)

      if (whitespace.leading || whitespace.trailing) {
        content = content.trim()
      }
      replacement = whitespace.leading +
        converter.replacement.call(toMarkdown, content, node) +
        whitespace.trailing
      break
    }
  }

  if (node.nodeName == 'TABLE') {
    replacement = convertTableElementToMarkdown(node);
  }
  
  node._replacement = replacement
}

For alignement, I'm still searching

The Woofmark editor (not very maintained) uses Domador (https://github.com/bevacqua/domador) to do this. It works all right, but has some bugs.