Ionaru / Ionaru/easy-markdown-editor

Detect an email link instead of a normal link

Open
#177 2 comments 0 reactions 0 assignees View on GitHub
Improvement Question
Dominant language
JavaScript
Stars
3.1k
Forks
363
PR merge metrics
No merged PRs in 30d

Description

Hello, **awesome library!!**
```json
"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

```javascript
// 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 😢
```javascript
_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();
}
```

Contributor guide

Open the contributing guide

Research direction

Start by tracing toolbar active-state detection from the custom Email action and the shown _replaceSelection path, then inspect how editor.getState(cm) identifies links. Add coverage for mailto: links and verify that the Email control becomes active over them without changing normal-link behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.