Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://stackblitz.com/edit/easymde
MIT License
2.39k stars 316 forks source link

Detect an email link instead of a normal link #177

Open HectorLS opened 4 years ago

HectorLS commented 4 years ago

Hello, awesome library!!

"easymde": "^2.10.0",

I wanted to supply a fast button link (same as normal link but prefixed with 'mailto:' instead of 'https://'

Button looks fine and it works, but when i am over it, the button toolbar that gets active its the standard link. How can i set up this properly to get this email button highlighted when i am over a link with mailto instead of an https one, or telephone one in the future?

Thanks in advance

// Email toolbar object
    {
        name: 'email',
        action: (editor) => {
          var cm = editor.codemirror;
          var stat = editor.getState(cm);
          var options = editor.options;
          var url = 'mailto:';

          this._replaceSelection(cm, stat.link, options.insertTexts.link, url);
        },
        className: 'fa fa-envelope',
        title: 'Email'
    },

Method i had to take from the library since cannot get access to it 😢

_replaceSelection(cm, active, startEnd, url) {
    if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
      return;

    var text;
    var start = startEnd[0];
    var end = startEnd[1];
    var startPoint = cm.getCursor("start");
    var endPoint = cm.getCursor("end");
    if(url) {
      end = end.replace("#url#", url);
    }
    if(active) {
      text = cm.getLine(startPoint.line);
      start = text.slice(0, startPoint.ch);
      end = text.slice(startPoint.ch);
      cm.replaceRange(start + end, {
        line: startPoint.line,
        ch: 0
      });
    } else {
      text = cm.getSelection();
      cm.replaceSelection(start + text + end);

      startPoint.ch += start.length;
      if(startPoint !== endPoint) {
        endPoint.ch += start.length;
      }
    }
    cm.setSelection(startPoint, endPoint);
    cm.focus();
  }
Ionaru commented 4 years ago

I think we can add mail and telephone links to the toolbar (hidden by default) in the future.

Alternatively we could expose _replaceSelection or some kind of drawLink function to make this configurable by the user.

izzues commented 4 years ago

I, for one, would love to see a more generic function similar to this drawLink!

I'm currently trying to add some buttons that insert content and all of them need exactly this functionality of inserting some code, then placing the caret somewhere in the middle.

One of them actually inserts some multiline HTML (something like ['<container>\n<content>\n', '\n</content></container>']), and I changed one insertTexts just to see if it would work. It almost does, except it places the cursor at the end of the first line (right after <container>) instead of in the middle of the two strings. So this is also kind of a bug report for a feature that doesn't even exist yet. :p

Anyway, thank you so much for this wonderful work!

Edit: If I can suggest one more thing, it would be nice to be able to add a third string as a placeholder, which is automatically replaced when you select text and click the button (for example, ['[](', 'https://placeholder.com', ')']).