mirror of
https://github.com/sparksuite/simplemde-markdown-editor.git
synced 2024-06-09 09:22:16 +02:00
before merge
This commit is contained in:
commit
68ba371fa3
5
.github/ISSUE_TEMPLATE.md
vendored
Normal file
5
.github/ISSUE_TEMPLATE.md
vendored
Normal file
|
@ -0,0 +1,5 @@
|
|||
If you're submitting a bug, complete these tasks:
|
||||
|
||||
- Set up a [JSFiddle](https://jsfiddle.net/) that replicates the bug
|
||||
- Link to your JSFiddle
|
||||
- Provide an exact list of step-by-step instructions that will replicate the bug
|
|
@ -3,7 +3,6 @@ node_js:
|
|||
- '6'
|
||||
- '5'
|
||||
- '4'
|
||||
- '0.12'
|
||||
before_script:
|
||||
- npm install -g gulp
|
||||
script: gulp
|
||||
|
|
33
README.md
33
README.md
|
@ -88,16 +88,22 @@ simplemde.value("This text will appear in the editor");
|
|||
- link
|
||||
- table
|
||||
- **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
|
||||
- **minHeight**: Sets the minimum height for the composition area, before it starts auto-growing. Should be a string containing a valid CSS value like `"500px"`. Dafaults to `"300px"`.
|
||||
- **parsingConfig**: Adjust settings for parsing the Markdown during editing (not previewing).
|
||||
- **allowAtxHeaderWithoutSpace**: If set to `true`, will render headers without a space after the `#`. Defaults to `false`.
|
||||
- **strikethrough**: If set to `false`, will not process GFM strikethrough syntax. Defaults to `true`.
|
||||
- **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
|
||||
- **placeholder**: Custom placeholder that should be displayed
|
||||
- **placeholder**: If set, displays a custom placeholder message.
|
||||
- **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
|
||||
- **promptTexts**: Customize title of the prompt box when the `promptURLs` option is set to `true` and the `image` or `url` button is clicked.
|
||||
- image
|
||||
- link
|
||||
- **promptURLs**: If set to `true`, a JS alert window appears asking for the link or image URL. Defaults to `false`.
|
||||
- **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing).
|
||||
- **codeSyntaxHighlighting**: If set to `true`, will highlight using [highlight.js](https://github.com/isagalaev/highlight.js). Defaults to `false`. To use this feature you must include highlight.js on your page or pass in using the `hljs` option. For example, include the script and the CSS files like:<br>`<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">`
|
||||
- **hljs**: An injectible instance of [highlight.js](https://github.com/isagalaev/highlight.js). If you don't want to rely on the global namespace (`window.hljs`), you can provide an instance here. Defaults to `undefined`.
|
||||
- **markedOptions**: Set the internal Markdown renderer's [options](https://github.com/chjj/marked#options-1). Other `renderingConfig` options will take precedence.
|
||||
- **singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
|
||||
- **codeSyntaxHighlighting**: If set to `true`, will highlight using [highlight.js](https://github.com/isagalaev/highlight.js). Defaults to `false`. To use this feature you must include highlight.js on your page. For example, include the script and the CSS files like:<br>`<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">`
|
||||
- **shortcuts**: Keyboard shortcuts associated with this instance. Defaults to the [array of shortcuts](#keyboard-shortcuts).
|
||||
- **showIcons**: An array of icon names to show. Can be used to show specific icons hidden by default without completely customizing the toolbar.
|
||||
- **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
|
||||
|
@ -133,6 +139,7 @@ var simplemde = new SimpleMDE({
|
|||
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
|
||||
},
|
||||
lineWrapping: false,
|
||||
minHeight: "500px",
|
||||
parsingConfig: {
|
||||
allowAtxHeaderWithoutSpace: true,
|
||||
strikethrough: false,
|
||||
|
@ -150,6 +157,10 @@ var simplemde = new SimpleMDE({
|
|||
return "Loading...";
|
||||
},
|
||||
promptURLs: true,
|
||||
promptTexts: {
|
||||
link: "URL for the link:",
|
||||
image: "URL of the image:"
|
||||
},
|
||||
renderingConfig: {
|
||||
singleLineBreaks: false,
|
||||
codeSyntaxHighlighting: true,
|
||||
|
@ -276,24 +287,6 @@ Shortcuts are automatically converted between platforms. If you define a shortcu
|
|||
|
||||
The list of actions that can be bound is the same as the list of built-in actions available for [toolbar buttons](#toolbar-icons).
|
||||
|
||||
#### Height
|
||||
|
||||
To change the minimum height (before it starts auto-growing):
|
||||
|
||||
```CSS
|
||||
.CodeMirror, .CodeMirror-scroll {
|
||||
min-height: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
Or, you can keep the height static:
|
||||
|
||||
```CSS
|
||||
.CodeMirror {
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
|
||||
## Event handling
|
||||
You can catch the following list of events: https://codemirror.net/doc/manual.html#events
|
||||
|
||||
|
|
|
@ -94,8 +94,14 @@
|
|||
|
||||
.cm-tab { display: inline-block; text-decoration: inherit; }
|
||||
|
||||
.CodeMirror-rulers {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: -50px; bottom: -20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.CodeMirror-ruler {
|
||||
border-left: 1px solid #ccc;
|
||||
top: 0; bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
@ -297,7 +303,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor { position: absolute; }
|
||||
.CodeMirror-cursor {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.CodeMirror-measure pre { position: static; }
|
||||
|
||||
div.CodeMirror-cursors {
|
||||
|
@ -345,7 +354,6 @@ span.CodeMirror-selectedtext { background: none; }
|
|||
|
||||
.CodeMirror {
|
||||
height: auto;
|
||||
min-height: 300px;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
|
@ -354,10 +362,6 @@ span.CodeMirror-selectedtext { background: none; }
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
min-height: 300px
|
||||
}
|
||||
|
||||
.CodeMirror-fullscreen {
|
||||
background: #fff;
|
||||
position: fixed !important;
|
||||
|
@ -367,6 +371,8 @@ span.CodeMirror-selectedtext { background: none; }
|
|||
bottom: 0;
|
||||
height: auto;
|
||||
z-index: 9;
|
||||
border-right: none !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.CodeMirror-sided {
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
2
dist/simplemde.min.css
vendored
2
dist/simplemde.min.css
vendored
File diff suppressed because one or more lines are too long
14
dist/simplemde.min.js
vendored
14
dist/simplemde.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -1,16 +1,13 @@
|
|||
.CodeMirror {
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
min-height: 300px;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
padding: 10px;
|
||||
font: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
min-height: 300px
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.CodeMirror-fullscreen {
|
||||
|
@ -22,6 +19,8 @@
|
|||
bottom: 0;
|
||||
height: auto;
|
||||
z-index: 9;
|
||||
border-right: none !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.CodeMirror-sided {
|
||||
|
@ -115,7 +114,9 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.editor-toolbar a {
|
||||
.editor-toolbar a,
|
||||
.editor-toolbar button {
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
text-decoration: none!important;
|
||||
|
@ -123,18 +124,22 @@
|
|||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editor-toolbar a.active,
|
||||
.editor-toolbar a:hover {
|
||||
.editor-toolbar a:hover,
|
||||
.editor-toolbar button.active,
|
||||
.editor-toolbar button:hover {
|
||||
background: #fcfcfc;
|
||||
border-color: #95a5a6;
|
||||
}
|
||||
|
||||
.editor-toolbar a:before {
|
||||
.editor-toolbar a:before,
|
||||
.editor-toolbar button:before {
|
||||
line-height: 30px
|
||||
}
|
||||
|
||||
|
@ -241,6 +246,7 @@
|
|||
display: none;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ddd;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.editor-preview-active-side {
|
||||
|
@ -325,4 +331,4 @@
|
|||
|
||||
.CodeMirror .CodeMirror-placeholder {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -96,11 +96,11 @@ function fixShortcut(name) {
|
|||
*/
|
||||
function createIcon(options, enableTooltips, shortcuts) {
|
||||
options = options || {};
|
||||
var el = document.createElement("a");
|
||||
var el = document.createElement("button");
|
||||
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
|
||||
|
||||
if(options.title && enableTooltips) {
|
||||
el.title = createTootlip(options.title, options.action, shortcuts);
|
||||
el.title = createTooltip(options.title, options.action, shortcuts);
|
||||
|
||||
if(isMac) {
|
||||
el.title = el.title.replace("Ctrl", "⌘");
|
||||
|
@ -120,7 +120,7 @@ function createSep() {
|
|||
return el;
|
||||
}
|
||||
|
||||
function createTootlip(title, action, shortcuts) {
|
||||
function createTooltip(title, action, shortcuts) {
|
||||
var actionName;
|
||||
var tooltip = title;
|
||||
|
||||
|
@ -827,8 +827,10 @@ function _replaceSelection(cm, active, startEnd, url) {
|
|||
var text;
|
||||
var start = startEnd[0];
|
||||
var end = startEnd[1];
|
||||
var startPoint = cm.getCursor("start");
|
||||
var endPoint = cm.getCursor("end");
|
||||
var startPoint = {},
|
||||
endPoint = {};
|
||||
Object.assign(startPoint, cm.getCursor("start"));
|
||||
Object.assign(endPoint, cm.getCursor("end"));
|
||||
if(url) {
|
||||
end = end.replace("#url#", url);
|
||||
}
|
||||
|
@ -928,26 +930,57 @@ function _toggleLine(cm, name) {
|
|||
if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
|
||||
return;
|
||||
|
||||
var listRegexp = /^(\s*)(\*|\-|\+|\d*\.)(\s+)/;
|
||||
var whitespacesRegexp = /^\s*/;
|
||||
|
||||
var stat = getState(cm);
|
||||
var startPoint = cm.getCursor("start");
|
||||
var endPoint = cm.getCursor("end");
|
||||
var repl = {
|
||||
"quote": /^(\s*)\>\s+/,
|
||||
"unordered-list": /^(\s*)(\*|\-|\+)\s+/,
|
||||
"ordered-list": /^(\s*)\d+\.\s+/
|
||||
"unordered-list": listRegexp,
|
||||
"ordered-list": listRegexp
|
||||
};
|
||||
var map = {
|
||||
"quote": "> ",
|
||||
"unordered-list": "* ",
|
||||
"ordered-list": "1. "
|
||||
|
||||
var _getChar = function(name, i) {
|
||||
var map = {
|
||||
"quote": ">",
|
||||
"unordered-list": "*",
|
||||
"ordered-list": "%%i."
|
||||
};
|
||||
|
||||
return map[name].replace("%%i", i);
|
||||
};
|
||||
|
||||
var _checkChar = function(name, char) {
|
||||
var map = {
|
||||
"quote": "\>",
|
||||
"unordered-list": "\*",
|
||||
"ordered-list": "\d+."
|
||||
};
|
||||
var rt = new RegExp(map[name]);
|
||||
|
||||
return char && rt.test(char);
|
||||
};
|
||||
|
||||
var line = 1;
|
||||
for(var i = startPoint.line; i <= endPoint.line; i++) {
|
||||
(function(i) {
|
||||
var text = cm.getLine(i);
|
||||
if(stat[name]) {
|
||||
text = text.replace(repl[name], "$1");
|
||||
} else {
|
||||
text = map[name] + text;
|
||||
var arr = listRegexp.exec(text);
|
||||
var char = _getChar(name, line);
|
||||
if(arr !== null) {
|
||||
if(_checkChar(name, arr[2])) {
|
||||
char = "";
|
||||
}
|
||||
text = arr[1] + char + arr[3] + text.replace(whitespacesRegexp, "").replace(repl[name], "$1");
|
||||
} else {
|
||||
text = char + " " + text;
|
||||
}
|
||||
line += 1;
|
||||
}
|
||||
cm.replaceRange(text, {
|
||||
line: i,
|
||||
|
@ -1386,7 +1419,7 @@ function SimpleMDE(options) {
|
|||
|
||||
|
||||
// Merging the promptTexts, with the given options
|
||||
options.promptTexts = promptTexts;
|
||||
options.promptTexts = extend({}, promptTexts, options.promptTexts || {});
|
||||
|
||||
|
||||
// Merging the blockStyles, with the given options
|
||||
|
@ -1396,6 +1429,8 @@ function SimpleMDE(options) {
|
|||
// Merging the shortcuts, with the given options
|
||||
options.shortcuts = extend({}, shortcuts, options.shortcuts || {});
|
||||
|
||||
options.minHeight = options.minHeight || "300px";
|
||||
|
||||
|
||||
// Change unique_id to uniqueId for backwards compatibility
|
||||
if(options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != "")
|
||||
|
@ -1424,8 +1459,12 @@ function SimpleMDE(options) {
|
|||
SimpleMDE.prototype.markdown = function(text) {
|
||||
if(marked) {
|
||||
// Initialize
|
||||
var markedOptions = {};
|
||||
|
||||
var markedOptions;
|
||||
if(this.options && this.options.renderingConfig && this.options.renderingConfig.markedOptions) {
|
||||
markedOptions = this.options.renderingConfig.markedOptions;
|
||||
} else {
|
||||
markedOptions = {};
|
||||
}
|
||||
|
||||
// Update options
|
||||
if(this.options && this.options.renderingConfig && this.options.renderingConfig.singleLineBreaks === false) {
|
||||
|
@ -1434,10 +1473,17 @@ SimpleMDE.prototype.markdown = function(text) {
|
|||
markedOptions.breaks = true;
|
||||
}
|
||||
|
||||
if(this.options && this.options.renderingConfig && this.options.renderingConfig.codeSyntaxHighlighting === true && window.hljs) {
|
||||
markedOptions.highlight = function(code) {
|
||||
return window.hljs.highlightAuto(code).value;
|
||||
};
|
||||
if(this.options && this.options.renderingConfig && this.options.renderingConfig.codeSyntaxHighlighting === true) {
|
||||
|
||||
/* Get HLJS from config or window */
|
||||
var hljs = this.options.renderingConfig.hljs || window.hljs;
|
||||
|
||||
/* Check if HLJS loaded */
|
||||
if(hljs) {
|
||||
markedOptions.highlight = function(code) {
|
||||
return hljs.highlightAuto(code).value;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -1527,6 +1573,8 @@ SimpleMDE.prototype.render = function(el) {
|
|||
styleSelectedText: (options.styleSelectedText != undefined) ? options.styleSelectedText : true
|
||||
});
|
||||
|
||||
this.codemirror.getScrollerElement().style.minHeight = options.minHeight;
|
||||
|
||||
if(options.forceSync === true) {
|
||||
var cm = this.codemirror;
|
||||
cm.on("change", function() {
|
||||
|
@ -1899,10 +1947,16 @@ SimpleMDE.prototype.createStatusbar = function(status) {
|
|||
* Get or set the text content.
|
||||
*/
|
||||
SimpleMDE.prototype.value = function(val) {
|
||||
var cm = this.codemirror;
|
||||
if(val === undefined) {
|
||||
return this.codemirror.getValue();
|
||||
return cm.getValue();
|
||||
} else {
|
||||
this.codemirror.getDoc().setValue(val);
|
||||
cm.getDoc().setValue(val);
|
||||
if(this.isPreviewActive()) {
|
||||
var wrapper = cm.getWrapperElement();
|
||||
var preview = wrapper.lastChild;
|
||||
preview.innerHTML = this.options.previewRender(val, preview);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
@ -2057,4 +2111,4 @@ SimpleMDE.prototype.toTextArea = function() {
|
|||
}
|
||||
};
|
||||
|
||||
module.exports = SimpleMDE;
|
||||
module.exports = SimpleMDE;
|
||||
|
|
Loading…
Reference in a new issue