mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-11 12:30:18 +00:00
Add SimpleMDE definitions (#10165)
* Add SimpleMDE definitions * Fix SimpleMDE test
This commit is contained in:
vladapokorny
committed by
Mohamed Hegazy
Mohamed Hegazy
parent
f09ef9d5ee
commit
a2c5e146eb
@@ -0,0 +1,158 @@
|
||||
/// <reference path="simplemde.d.ts" />
|
||||
|
||||
function testSimplemde() {
|
||||
|
||||
function customMarkdownParser(markdown: string) {
|
||||
return "<div>" + markdown + "</div>";
|
||||
}
|
||||
|
||||
function testInit() {
|
||||
var simplemde1 = new SimpleMDE();
|
||||
var simplemde2 = new SimpleMDE({ element: document.getElementById("MyID") });
|
||||
}
|
||||
|
||||
function testAccessValue() {
|
||||
var simplemde = new SimpleMDE();
|
||||
var value: string = simplemde.value();
|
||||
simplemde.value("This text will appear in the editor");
|
||||
}
|
||||
|
||||
function testConfiguration() {
|
||||
var simplemde: SimpleMDE;
|
||||
|
||||
// Most options demonstrate the non-default behavior
|
||||
simplemde = new SimpleMDE({
|
||||
autofocus: true,
|
||||
autosave: {
|
||||
enabled: true,
|
||||
uniqueId: "MyUniqueID",
|
||||
delay: 1000
|
||||
},
|
||||
blockStyles: {
|
||||
bold: "__",
|
||||
italic: "_"
|
||||
},
|
||||
element: document.getElementById("MyID"),
|
||||
forceSync: true,
|
||||
hideIcons: ["guide", "heading"],
|
||||
indentWithTabs: false,
|
||||
initialValue: "Hello world!",
|
||||
insertTexts: {
|
||||
horizontalRule: ["", "\n\n-----\n\n"],
|
||||
image: ["![](http://", ")"],
|
||||
link: ["[", "](http://)"],
|
||||
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"]
|
||||
},
|
||||
lineWrapping: false,
|
||||
parsingConfig: {
|
||||
allowAtxHeaderWithoutSpace: true,
|
||||
strikethrough: false,
|
||||
underscoresBreakWords: true
|
||||
},
|
||||
placeholder: "Type here...",
|
||||
previewRender: function (plainText) {
|
||||
return customMarkdownParser(plainText); // Returns HTML from a custom parser
|
||||
},
|
||||
promptURLs: true,
|
||||
renderingConfig: {
|
||||
singleLineBreaks: false,
|
||||
codeSyntaxHighlighting: true
|
||||
},
|
||||
shortcuts: {
|
||||
drawTable: "Cmd-Alt-T"
|
||||
},
|
||||
showIcons: ["code", "table"],
|
||||
spellChecker: false,
|
||||
status: false,
|
||||
styleSelectedText: false,
|
||||
tabSize: 4,
|
||||
toolbar: false,
|
||||
toolbarTips: false
|
||||
});
|
||||
|
||||
simplemde = new SimpleMDE({
|
||||
previewRender: function (plainText, preview) { // Async method
|
||||
setTimeout(function () {
|
||||
preview.innerHTML = customMarkdownParser(plainText);
|
||||
}, 250);
|
||||
|
||||
return "Loading...";
|
||||
},
|
||||
status: ["autosave", "lines", "words", "cursor"] // Optional usage
|
||||
});
|
||||
|
||||
simplemde = new SimpleMDE({
|
||||
status: ["autosave", "lines", "words", "cursor", {
|
||||
className: "keystrokes",
|
||||
defaultValue: function (el) {
|
||||
this.keystrokes = 0;
|
||||
el.innerHTML = "0 Keystrokes";
|
||||
},
|
||||
onUpdate: function (el) {
|
||||
el.innerHTML = ++this.keystrokes + " Keystrokes";
|
||||
}
|
||||
}] // Another optional usage, with a custom status bar item that counts keystrokes
|
||||
});
|
||||
}
|
||||
|
||||
function testToolbarCustomize() {
|
||||
var simplemde: SimpleMDE;
|
||||
|
||||
// Customize only the order of existing buttons
|
||||
simplemde = new SimpleMDE({
|
||||
toolbar: ["bold", "italic", "heading", "|", "quote"]
|
||||
});
|
||||
|
||||
// Customize all information and/or add your own icons
|
||||
simplemde = new SimpleMDE({
|
||||
toolbar: [{
|
||||
name: "bold",
|
||||
action: SimpleMDE.toggleBold,
|
||||
className: "fa fa-bold",
|
||||
title: "Bold"
|
||||
},
|
||||
{
|
||||
name: "custom",
|
||||
action: function customFunction(editor) {
|
||||
// Add your own code
|
||||
},
|
||||
className: "fa fa-star",
|
||||
title: "Custom Button"
|
||||
},
|
||||
"|" // Separator
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function testKeyboardShortcuts() {
|
||||
var simplemde = new SimpleMDE({
|
||||
shortcuts: {
|
||||
"toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
|
||||
"toggleCodeBlock": null, // unbind Ctrl-Alt-C
|
||||
"drawTable": "Cmd-Alt-T" // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function testEventHandling() {
|
||||
var simplemde = new SimpleMDE();
|
||||
simplemde.codemirror.on("change", function () {
|
||||
console.log(simplemde.value());
|
||||
});
|
||||
}
|
||||
|
||||
function testRemoveFromTextArea() {
|
||||
var simplemde = new SimpleMDE();
|
||||
simplemde.toTextArea();
|
||||
simplemde = null;
|
||||
}
|
||||
|
||||
function testOtherMethods() {
|
||||
var simplemde = new SimpleMDE();
|
||||
var booleanVal: boolean;
|
||||
booleanVal = simplemde.isPreviewActive(); // returns boolean
|
||||
booleanVal = simplemde.isSideBySideActive(); // returns boolean
|
||||
booleanVal = simplemde.isFullscreenActive(); // returns boolean
|
||||
simplemde.clearAutosavedValue(); // no returned value
|
||||
}
|
||||
}
|
||||
Vendored
+130
@@ -0,0 +1,130 @@
|
||||
// Type definitions for SimpleMDE v1.11.2
|
||||
// Project: https://github.com/NextStepWebs/simplemde-markdown-editor
|
||||
// Definitions by: Scalesoft <https://github.com/Scalesoft>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
|
||||
declare namespace SimpleMDE {
|
||||
interface AutoSaveOptions {
|
||||
enabled?: boolean;
|
||||
delay?: number;
|
||||
uniqueId: string;
|
||||
}
|
||||
|
||||
interface BlockStyleOptions {
|
||||
bold?: string;
|
||||
code?: string;
|
||||
italic?: string;
|
||||
}
|
||||
|
||||
interface InsertTextOptions {
|
||||
horizontalRule?: string[];
|
||||
image?: string[];
|
||||
link?: string[];
|
||||
table?: string[];
|
||||
}
|
||||
|
||||
interface ParsingOptions {
|
||||
allowAtxHeaderWithoutSpace?: boolean;
|
||||
strikethrough?: boolean;
|
||||
underscoresBreakWords?: boolean;
|
||||
}
|
||||
|
||||
interface RenderingOptions {
|
||||
singleLineBreaks?: boolean;
|
||||
codeSyntaxHighlighting: boolean;
|
||||
}
|
||||
|
||||
interface ShortcutsArray {
|
||||
[action: string]: string;
|
||||
toggleBlockquote?: string;
|
||||
toggleBold?: string;
|
||||
cleanBlock?: string;
|
||||
toggleHeadingSmaller?: string;
|
||||
toggleItalic?: string;
|
||||
drawLink?: string;
|
||||
toggleUnorderedList?: string;
|
||||
togglePreview?: string;
|
||||
toggleCodeBlock?: string;
|
||||
drawImage?: string;
|
||||
toggleOrderedList?: string;
|
||||
toggleHeadingBigger?: string;
|
||||
toggleSideBySide?: string;
|
||||
toggleFullScreen?: string;
|
||||
}
|
||||
|
||||
interface StatusBarItem {
|
||||
className: string;
|
||||
defaultValue: (element: HTMLElement) => void;
|
||||
onUpdate: (element: HTMLElement) => void;
|
||||
}
|
||||
|
||||
interface ToolbarIcon {
|
||||
name: string;
|
||||
action: string|((editor: SimpleMDE) => void);
|
||||
className: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
interface Options {
|
||||
autoDownloadFontAwesome?: boolean;
|
||||
autofocus?: boolean;
|
||||
autosave?: AutoSaveOptions;
|
||||
blockStyles?: BlockStyleOptions;
|
||||
element?: HTMLElement;
|
||||
forceSync?: boolean;
|
||||
hideIcons?: string[];
|
||||
indentWithTabs?: boolean;
|
||||
initialValue?: string;
|
||||
insertTexts?: InsertTextOptions;
|
||||
lineWrapping?: boolean;
|
||||
parsingConfig?: ParsingOptions;
|
||||
placeholder?: string;
|
||||
previewRender?: (markdownPlaintext: string, previewElement?: HTMLElement) => string;
|
||||
promptURLs?: boolean;
|
||||
renderingConfig?: RenderingOptions;
|
||||
shortcuts?: ShortcutsArray;
|
||||
showIcons?: string[];
|
||||
spellChecker?: boolean;
|
||||
status?: boolean|Array<string|StatusBarItem>;
|
||||
styleSelectedText?: boolean;
|
||||
tabSize?: number;
|
||||
toolbar?: boolean|Array<string|ToolbarIcon>;
|
||||
toolbarTips?: boolean;
|
||||
}
|
||||
}
|
||||
|
||||
declare class SimpleMDE {
|
||||
constructor();
|
||||
constructor(options: SimpleMDE.Options);
|
||||
value(): string;
|
||||
value(val: string): void;
|
||||
codemirror: any;
|
||||
toTextArea(): void;
|
||||
isPreviewActive(): boolean;
|
||||
isSideBySideActive(): boolean;
|
||||
isFullscreenActive(): boolean;
|
||||
clearAutosavedValue(): void;
|
||||
|
||||
static toggleBold: (editor: SimpleMDE) => void;
|
||||
static toggleItalic: (editor: SimpleMDE) => void;
|
||||
static toggleStrikethrough: (editor: SimpleMDE) => void;
|
||||
static toggleHeadingSmaller: (editor: SimpleMDE) => void;
|
||||
static toggleHeadingBigger: (editor: SimpleMDE) => void;
|
||||
static toggleHeading1: (editor: SimpleMDE) => void;
|
||||
static toggleHeading2: (editor: SimpleMDE) => void;
|
||||
static toggleHeading3: (editor: SimpleMDE) => void;
|
||||
static toggleCodeBlock: (editor: SimpleMDE) => void;
|
||||
static toggleBlockquote: (editor: SimpleMDE) => void;
|
||||
static toggleUnorderedList: (editor: SimpleMDE) => void;
|
||||
static toggleOrderedList: (editor: SimpleMDE) => void;
|
||||
static cleanBlock: (editor: SimpleMDE) => void;
|
||||
static drawLink: (editor: SimpleMDE) => void;
|
||||
static drawImage: (editor: SimpleMDE) => void;
|
||||
static drawTable: (editor: SimpleMDE) => void;
|
||||
static drawHorizontalRule: (editor: SimpleMDE) => void;
|
||||
static togglePreview: (editor: SimpleMDE) => void;
|
||||
static toggleSideBySide: (editor: SimpleMDE) => void;
|
||||
static toggleFullScreen: (editor: SimpleMDE) => void;
|
||||
static undo: (editor: SimpleMDE) => void;
|
||||
static redo: (editor: SimpleMDE) => void;
|
||||
}
|
||||
Reference in New Issue
Block a user