diff --git a/simplemde/simplemde-tests.ts b/simplemde/simplemde-tests.ts new file mode 100644 index 0000000000..cf0af6e147 --- /dev/null +++ b/simplemde/simplemde-tests.ts @@ -0,0 +1,158 @@ +/// + +function testSimplemde() { + + function customMarkdownParser(markdown: string) { + return "
" + markdown + "
"; + } + + 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 + } +} diff --git a/simplemde/simplemde.d.ts b/simplemde/simplemde.d.ts new file mode 100644 index 0000000000..e08e7f11a9 --- /dev/null +++ b/simplemde/simplemde.d.ts @@ -0,0 +1,130 @@ +// Type definitions for SimpleMDE v1.11.2 +// Project: https://github.com/NextStepWebs/simplemde-markdown-editor +// Definitions by: 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; + styleSelectedText?: boolean; + tabSize?: number; + toolbar?: boolean|Array; + 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; +} \ No newline at end of file