MarkdownX

Frontend (JavaScript) management of Django-MarkdownX package.

Written in JavaScript ECMA 2016, trans-compiled to ECMA 5 (2011).

Requirements:
  • Modern browser with support for HTML5 and ECMA 2011+ (IE 10+). Older browsers would work but some features may be missing.
  • TypeScript 2+

JavaScript ECMA 5 files formatted as .js or .min.js are trans-compiled files. Please do not modify such files as all changes will be lost. To contribute, please edit static-src/markdownx/js/markdownx.ts. See contributions in the documentations for additional instructions.

Note

Typescript type definitions of this module are defined in static-src/markdownx/js/types.ts.

GeneralEventHandlers
JSON Object:General (document level) event handlers.
inhibitDefault(event)

Routine tasks for event handlers (e.g. default preventions).

Arguments:
  • event (Event|KeyboardEvent) – The events to be inhibited.
Returns:

event
Return type:

Event
onDragEnter(event)

Upon enter (when a file, e.g. an image, is dragged into the browser), the defualt events are inhibited, and the drop event is set as copy.

Arguments:
  • event (DragEvent) – Drag event.
Returns:

Inhibited drag event with copy added to the drop event.
Return type:

Event
keyboardEvents
JSON Object:Keyboard events and their handlers.
keys
JSON Object:Custom hotkeys.
TAB
  • (string) - represents: Tab
DUPLICATE
  • (string) - represents: d
UNINDENT
  • (string) - represents: [
INDENT
  • (string) - represents: ]
hub(event)

Mapping of hotkeys from keyboard events to their corresponding functions.

Arguments:
  • event (KeyboardEvent) – Keyboard event to be handled.
Return type:

Function | Boolean
Handlers

Handler functions, as mapped by hub().

JSON Object:Hotkey response functions.

Note

Properties receive a single argument properties, which is an instance of properties. See the markdownx class for additional details.

applyTab(properties)

Smart application of tab indentations under various conditions.

Arguments:
  • properties (JSON) – See object descriptions for details.
Return type:

string
removeTab(properties)

Smart removal of tab indentations.

Arguments:
  • properties (JSON) – See object descriptions for details.
Return type:

string
_multiLineIndentation(properties)

private

Handles multi line indentations.

Arguments:
  • properties (JSON) – See object descriptions for details.
Return type:

string
applyIndentation(properties)

Smart application of indentation at the beginning of the line.

Arguments:
  • properties (JSON) – See object descriptions for details.
Return type:

string
removeIndentation(properties)

Smart removal of indentation from the beginning of the line.

Arguments:
  • properties (JSON) – See object descriptions for details.
Return type:

string
applyDuplication(properties)

Duplication of the current or selected lines.

Arguments:
  • properties (JSON) – See object descriptions for details.
Return type:

string
getHeight(element)

Returns either the height of an element as defined in the style attribute or CSS or its browser-computed height.

Arguments:
  • HTMLElement (element) – The element whose height is to be determined.
Returns:

Height of the element.
Return type:

number
updateHeight(element)

Updates the height of an element based on its scroll height.

Arguments:
  • editor (HTMLTextAreaElement) – Editor element whose height is to be updated.
Return type:

HTMLTextAreaElement
class MarkdownX(editor, preview)

MarkdownX initializer.

Example:
>>> let parent  = document.getElementsByClassName('markdownx'),
...     editor  = parent.querySelector('.MyMarkdownEditor'),
...     preview = parent.querySelector('.MyMarkdownPreview');

>>> let mdx = new MarkdownX(parent, editor, preview)
Arguments:
  • parent (HTMLElement) – Markdown editor element.
  • editor (HTMLTextAreaElement) – Markdown editor element.
  • preview (HTMLElement) – Markdown preview element.
properties
JSON Object:Class variables.
editor
  • (HTMLTextAreaElement) - Instance editor.
preview
  • (HMTLElement) - Instance preview.
parent
  • (HMTLElement) - Instance parent.
_latency

private

  • (number | null) - Private property; timeout settings.
_editorIsResizable

private

  • (Boolean) - Private property; true if instance editor is resizable, otherwise false.
_markdownify()

private

Settings for timeout.

_routineEventResponse(event)

private

Routine tasks for event handlers (e.g. default preventions).

Arguments:
  • event (Event) – Event to be handled.
getEditorHeight(editor)
Arguments:
  • editor (HTMLTextAreaElement) – Markdown editor element.
Returns:

The editor’s height in pixels; e.g. "150px".
Return type:

string
inputChanged()

Event handlers in response to alterations in the instance editor.

Arguments:
  • event (Event) – Event to be handled.
onDragEnter(event)

Event handler for dragEnter events.

Arguments:
  • event (Event) – Event to be handled.
onDragLeave(event)

Event handler for dragLeave events.

Arguments:
  • event (Event) – Event to be handled.
onDrop(event)

Event handler for drop events (in drag and drops).

Arguments:
  • event (Event) – Event to be handled.
onKeyDown(event)

Event handler for keyDown events as registered in the instance editor.

Arguments:
  • event (Event) – Event to be handled.
Returns:

null if the key pressed is Tab (ASCII #9) else false.
Return type:

boolean | null
sendFile(file)

Uploading the file onto the server through an AJAX request.

Arguments:
  • file (File) – File to be uploaded.
getMarkdown()

Uploading the markdown text from properties.editor onto the server through an AJAX request, and upon receiving the HTML encoded text in response, the response will be displayed in properties.preview.

insertImage(textToInsert)

Inserts markdown encoded image URL into properties.editor where the cursor is located.

Arguments:
  • textToInsert (string) – Markdown text (with path to the image) to be inserted into the editor.