404
Page not found
'+ escapeHtml(title) + '
' + escapeHtml(summary) +'
Customization¶
General (ex. settings)¶
Widget¶
The default widget is as seen here.
If you would like to customise this; for instance, using Bootstrap v3 to implement side-by-side panes (as seen in :doc:preview animation<index>), you should override the default widget’s template by creating your own template and saving it under markdownx/widget.html in your project's TEMPLATE_DIRS.
Here is an example of the contents:
<div class="markdownx row">
<div class="col-md-6">
{% include 'django/forms/widgets/textarea.html' %}
</div>
<div class="col-md-6">
<div class="markdownx-preview"></div>
</div>
</div>Fields¶
We have ensured that MarkdownX is fully extensible and provides a high degree of flexibility in development.
There are times that you may wish to Markdownify a different type of field, or utilize your own customized widget. To accommodate this, we have provided the tools to apply MarkdownX infrastructure to other fields through Widgets.
For instance, to apply MarkdownX to TextField instances in your Django Admins, you can override the default widget in the Admins module in admin.py of your Django App as follows:
from django.db import models
from django.contrib import admin
from markdownx.widgets import AdminMarkdownxWidget
from .models import MyModel
class MyModelAdmin(admin.ModelAdmin):
formfield_overrides = {
models.TextField: {'widget': AdminMarkdownxWidget},
}
admin.site.register(MyModel, MyModelAdmin)Image tags¶
Markdown uses ![]() tag by default to insert uploaded image file. This generates a simple (X)HTML <image> tag. If you wish to have more control and use your own HTML tags, you may create a custom form_valid() function in
ImageUploadView class, as highlighted here.
Settings¶
You may place any of the variables outlined in this page in your settings.py, alter their values and override default behaviours:
MARKDOWNX_MARKDOWNIFY_FUNCTIONMARKDOWNX_MARKDOWN_EXTENSIONSMARKDOWNX_MARKDOWN_EXTENSION_CONFIGSMARKDOWNX_URLS_PATHMARKDOWNX_UPLOAD_URLS_PATHMARKDOWNX_MEDIA_PATHMARKDOWNX_UPLOAD_MAX_SIZEMARKDOWNX_UPLOAD_CONTENT_TYPESMARKDOWNX_SKIP_RESIZEMARKDOWNX_IMAGE_MAX_SIZEMARKDOWNX_SVG_JAVASCRIPT_PROTECTIONMARKDOWNX_EDITOR_RESIZABLEMARKDOWNX_SERVER_CALL_LATENCY
Attention
The focus of this section is on the customisation of features controlled in the backend. Additional customisations, or to be rather more accurate, event controls are enabled in the frontend through JavaScript events. To learn more about these events, see our JavaScript documentation on events.
MARKDOWNX_MARKDOWNIFY_FUNCTION¶
Default: 'markdownx.utils.markdownify'
Markdown to HTML function. Takes an argument of type str() and returns the HTML encoded output as str().
Default function that compiles markdown using defined extensions. Using custom function can allow you to pre-process or post-process markdown text. See below for more info.
MARKDOWNX_MARKDOWNIFY_FUNCTION = 'markdownx.utils.markdownify'This function uses the Markdown package for trans-compilation.
Note
The function name must be entered as string, and the relevant package must be installed and accessible to the current interpreter such that it can later be imported as and when needed. So markdownx.utils.markdownify essentially means from markdownx.utils import markdownify.
Hint
The default function (markdownx.utils.markdownify) that handles the trans-compilation of Markdown to HTML looks like this:
from markdown import markdown
from .settings import (
MARKDOWNX_MARKDOWN_EXTENSIONS,
MARKDOWNX_MARKDOWN_EXTENSION_CONFIGS
)
def markdownify(content):
md = markdown(
text=content,
extensions=MARKDOWNX_MARKDOWN_EXTENSIONS,
extension_configs=MARKDOWNX_MARKDOWN_EXTENSION_CONFIGS
)
return mdMARKDOWNX_MARKDOWN_EXTENSIONS¶
Default: empty list()
List of str(). List of Markdown extensions that you would like to use. See available extensions in Markdown docs. For instance, the extension extra enables features such as abbreviations, footnotes, tables and so on.
We recommend you read the documentation for the Markdown package, our default Markdown trans-compiler.
MARKDOWNX_MARKDOWN_EXTENSIONS = [
'markdown.extensions.extra'
]MARKDOWNX_MARKDOWN_EXTENSION_CONFIGS¶
Default: empty dict()
Configuration object for used markdown extensions. See extension_configs in Markdown docs. Here is a general idea:
MARKDOWNX_MARKDOWN_EXTENSION_CONFIGS = {
'extension_name_1': {
'option_1': 'value_1'
}
}MARKDOWNX_URLS_PATH¶
Default: '/markdownx/markdownify/'
Relative URL to which the Markdown text is sent to be encoded as HTML.
MARKDOWNX_URLS_PATH = '/markdownx/markdownify/'MARKDOWNX_UPLOAD_URLS_PATH¶
Default: '/markdownx/upload/'
URL that accepts file uploads (images) through an AJAX POST request. The request response will contain markdown formatted markup containing the relative URL for the image.
MARKDOWNX_UPLOAD_URLS_PATH = '/markdownx/upload/'MARKDOWNX_MEDIA_PATH¶
Default: 'markdownx/'
The path where the images will be stored in your MEDIA_ROOT directory.
MARKDOWNX_MEDIA_PATH = 'markdownx/'Tip
Recommended: Storing all uploaded images in a single directory would over time results in a lot files being stored in one location. This would slow down the process of saving and loading files substantially, and can in turn lead to your website becoming very slow when it comes to loading images. To address this issue, it is better to save the uploads in different directories. Here is an example of how this can be achieved:
from datetime import datetime
MARKDOWNX_MEDIA_PATH = datetime.now().strftime('markdownx/%Y/%m/%d')This ensures that uploaded files are stored in a different directory on the basis of the date on which they are uploaded. So for instance; an image uploaded on the 15th of April 2017 will be stored under media/markdownx/2017/4/15/unique_name.png.
MARKDOWNX_UPLOAD_MAX_SIZE¶
Default: 50 * 1024 * 1024 bytes
Maximum image size allowed in bytes: Default is 50MB, which is equal to 52,428,800 bytes.
MARKDOWNX_UPLOAD_MAX_SIZE = 50 * 1024 * 1024Tip
It is considered a good practice to display large numbers in a meaningful way. For instance, 52,438,800 bytes is better displayed in code as = 50 * 1024 * 1024 # 50 MB in bytes instead (the comment is also important). Fellow programmers will thank you for this in the future!
MARKDOWNX_UPLOAD_CONTENT_TYPES¶
Default: ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']
Image formats that the user is permitted to upload. Enable / disable support for different image formats.
MARKDOWNX_UPLOAD_CONTENT_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']MARKDOWNX_SKIP_RESIZE¶
Default: ['image/svg+xml', 'image/gif']
Image formats that should not be resized automatically. The default value honors that resizing an SVG does not make sense and that PIL does not support GIF animation.
MARKDOWNX_SKIP_RESIZE = ['image/svg+xml', 'image/gif']MARKDOWNX_IMAGE_MAX_SIZE¶
Default: { 'size': (500, 500), 'quality': 90 }
Different options describing final image processing; e.g. dimension and quality.
Note
Quality restrictions do not apply to image/svg+xml formatted graphics.
Options are:
| Option | Value | Description |
|---|---|---|
| size | (width,height) |
when one of the dimensions is set to zero, e.g. (500, 0), the height is calculated automatically so as to keep the dimensions intact. |
| quality | int |
image quality from 0 (full compression) to 100 (no compression). Default: 90 |
| crop | Boolean |
if True, the size is used to crop the image. Default: False |
| upscale | Boolean |
if image dimensions are smaller than those defined in size, upscale to size dimensions. Default: False |
MARKDOWNX_IMAGE_MAX_SIZE = {
'size': (500, 500),
'quality': 90
}MARKDOWNX_SVG_JAVASCRIPT_PROTECTION¶
Default: True
SVG graphics are in essence XML files formatted in a specific way; which means that they can contain JavaScript codes. This introduces a potential front-end security vulnerability for prospective users who will see the SVG image in context; e.g. it may be employed to collect the user's IP address or other personal information.
Note
This type of attack is known as XSS (Cross-site Scripting) attack. See this presentation by Mario Heiderich to learn more on SVG XSS attacks. There are a number of ways to deal with this vulnerability.
Django is great at security, and provides very good protection against XSS attacks (see the Django documentation for additional information) providing the CSRF protection middleware is enabled. When it comes to AJAX requests, however, CSRF protection may sometimes be disabled for various reasons.
As a last resort, however, we have included an optional integrity check against JavaScript tags for SVG formatted files just in case everything else is disabled. This protection is enabled by default, and may be disabled by setting the value to False if so is desired.
MARKDOWNX_SVG_JAVASCRIPT_PROTECTION = TrueImportant
MarkdownX does not disable CSRF protection by default, and requires the token for all AJAX request.
MARKDOWNX_EDITOR_RESIZABLE¶
Default: True
Change the editor's height to match the height of the inner contents whilst typing.
MARKDOWNX_EDITOR_RESIZABLE = TrueMARKDOWNX_SERVER_CALL_LATENCY¶
Default: 500 miliseconds
Latency (minimum lag) between server calls as int. Minimum allowed: 500 milliseconds.
Note
When the value of a MarkdownX editor is changed, a call is made to the server to trans-compile Markdown into HTML. However, a minimum latency of 500 milliseconds has been imposed between the calls. This is to prevent the bombardment of the server with a huge number of HTTP requests (you don't want to DDoS your own server). This latency maintains a balance between responsiveness and protection, and is well-suited for medium traffic. Nonetheless, if your website enjoys a particularly high traffic, you may wish to alter this value slightly depending on the number of CPUs, the amount memory, and how much you are willing to compromise on responsiveness.
MARKDOWNX_SERVER_CALL_LATENCY = 500 # millisecondsAttention
Any values below 500 milliseconds is silently ignored and replaced.
Example¶
Have you:
- successfully installed MarkdownX?
- followed the instructions on how to get started?
If so, you are set for the next step. Here you can find comprehensive examples of how to use different MarkdownX features to your advantage.
Model¶
This is how you implement a MarkdownX field in your models. In your app/models.py:
from markdownx.models import MarkdownxField
class MyModel(models.Model):
myfield = MarkdownxField()... and then, include the form media in the relevant template using {{ form.media }}, like so:
<form method="POST" action="">{% csrf_token %}
{{ form }}
</form>
{{ form.media }}Note
The field extends Django's own TextField and is saved in the database accordingly.
Form¶
You can also implement MarkdownX through the forms. This will be done in your app/forms.py as follows:
from markdownx.fields import MarkdownxFormField
class MyForm(forms.Form):
myfield = MarkdownxFormField()... and then, include a form's required media in the template using {{ form.media }}:
<form method="POST" action="">{% csrf_token %}
{{ form }}
</form>
{{ form.media }}Django Admin¶
When using included MarkdownxModel class in your models, just use MarkdownxModelAdmin in your app/admin.py as follows:
from django.contrib import admin
from markdownx.admin import MarkdownxModelAdmin
from .models import MyModel
admin.site.register(MyModel, MarkdownxModelAdmin)Getting Started¶
First and foremost, add markdownx to the list of INSTALLED_APPS in settings.py.
INSTALLED_APPS = (
# [...]
'markdownx',
)You may alter default behaviours by adding and changing relevant variables in your settings. See customization for additional information.
Add MarkdownX URL patterns to your urls.py. You can do this using either of these methods depending on your style:
urlpatterns = [
# [...]
path('markdownx/', include('markdownx.urls')),
]or alternatively:
from django.conf.urls import url, include
from markdownx import urls as markdownx
urlpatterns += [
path('markdownx/', include(markdownx)),
]and, don't forget to collect MarkdownX assets to your STATIC_ROOT. To do this, run:
python3 manage.py collectstaticDjango MarkdownX¶
Django MarkdownX is a comprehensive Markdown plugin built for Django, the renowned high-level Python web framework, with flexibility, extensibility, and ease-of-use at its core.
GitHub: https://github.com/neutronX/django-markdownx
PyPi: https://pypi.org/project/django-markdownx/
Key features¶
- Raw editing.
- Live preview.
- Drag & drop image uploads (automatically stored in the designated location in the Media directory).
- Customizable image insertion tag.
- Definition of maximum size for an image.
- Definition of acceptable image formats (PNG, JPEG, SVG).
- Image manipulations (compression, size reduction, cropping, upscaling).
- Pre- and post- text modification.
- Easy template customization, layout modification, and personalization.
- Multiple editors per page.
- Django Admin support.
Preview¶
Acknowledgements¶
We acknowledge and appreciate every contribution made towards improving Django MarkdownX, a list of which can be found on our GitHub contributors page.
Installation¶
Using PIP¶
Django MarkdownX may be installed directly using Python Package Index (PyPi):
pip install django-markdownxFrom the source¶
Should you wish to download and install it using the source code, you can do as follows:
Note
Make sure you have activated your virtual environment if you’re using one.
We start off by downloading the source code from GitHub and navigate to the downloaded directory:
git clone https://github.com/neutronX/django-markdownx.git
cd django-markdownx/Install the package.
python3 setup.py installJavaScript¶
Events¶
Some MarkdownX processes trigger events that may be utilized for different purposes. To handle such events in JavaScript, you may take advantage of event listeners as exemplified below:
markdownx.initmarkdownx.updatemarkdownx.updateErrormarkdownx.markdownx.fileUploadBeginmarkdownx.fileUploadEndmarkdownx.fileUploadError
markdownx.init¶
Triggered after jQuery plugin init. markdownx.init is an event that does not return a response.
JavaScript ECMA 2015+:
let element = document.getElementsByClassName('markdownx');
Object.keys(element).map(key =>
element[key].addEventListener('markdownx.init', () => console.log("MarkdownX initialized."))
);markdownx.update¶
Triggered when editor text is markdownified. Returns: response (string) variable containing markdownified text.
JavaScript ECMA 2015+:
let element = document.getElementsByClassName('markdownx');
Object.keys(element).map(key =>
element[key].addEventListener('markdownx.update', event => console.log(event.detail))
);markdownx.updateError¶
Triggered when a problem occurred during markdownify.
markdownx.markdownx.fileUploadBegin¶
Triggered when the file is posted.
markdownx.fileUploadEnd¶
Triggered when the file has been uploaded.
markdownx.fileUploadError¶
Triggered if the upload didn’t work.
Compatibility¶
We rely on JavaScript to handle front-end events (e.g. trans-compilation of Markdown to HTML, uploading image).
MarkdownX's JavaScript code is written in TypeScript using Pure JavaScript and under ECMA 2016 standard.
Currently, the code is trans-compiled into ECMA 5 (approved in 2011) to provide support for older browsers, specifically IE 10+. See additional detailed on browser compatibilities.
License¶
MarkdownX is licensed under the 2-clause BSD license, and Open Source Initiative approved license.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
This software is provided by the copyright holders and contributors "as is" and any express or implied warranties, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose are disclaimed. in no event shall the copyright owner or contributors be liable for any direct, indirect, incidental, special, exemplary, or consequential damages (including, but not limited to, procurement of substitute goods or services; loss of use, data, or profits; or business interruption) however caused and on any theory of liability, whether in contract, strict liability, or tort (including negligence or otherwise) arising in any way out of the use of this software, even if advised of the possibility of such damage.
' + noResultsText + '
'); } } function doSearch () { var query = document.getElementById('mkdocs-search-query').value; if (query.length > min_search_length) { if (!window.Worker) { displayResults(search(query)); } else { searchWorker.postMessage({query: query}); } } else { // Clear results for short queries displayResults([]); } } function initSearch () { var search_input = document.getElementById('mkdocs-search-query'); if (search_input) { search_input.addEventListener("keyup", doSearch); } var term = getSearchTermFromLocation(); if (term) { search_input.value = term; doSearch(); } } function onWorkerMessage (e) { if (e.data.allowSearch) { initSearch(); } else if (e.data.results) { var results = e.data.results; displayResults(results); } else if (e.data.config) { min_search_length = e.data.config.min_search_length-1; } } if (!window.Worker) { console.log('Web Worker API not supported'); // load index in main thread $.getScript(joinUrl(base_url, "search/worker.js")).done(function () { console.log('Loaded worker'); init(); window.postMessage = function (msg) { onWorkerMessage({data: msg}); }; }).fail(function (jqxhr, settings, exception) { console.error('Could not load worker.js'); }); } else { // Wrap search in a web worker var searchWorker = new Worker(joinUrl(base_url, "search/worker.js")); searchWorker.postMessage({init: true}); searchWorker.onmessage = onWorkerMessage; } ================================================ FILE: docs/search/search_index.json ================================================ {"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Django MarkdownX \u00b6 Django MarkdownX is a comprehensive Markdown plugin built for Django , the renowned high-level Python web framework, with flexibility, extensibility, and ease-of-use at its core. GitHub: https://github.com/neutronX/django-markdownx PyPi: https://pypi.org/project/django-markdownx/ Key features \u00b6 Raw editing. Live preview. Drag & drop image uploads (automatically stored in the designated location in the Media directory). Customizable image insertion tag. Definition of maximum size for an image. Definition of acceptable image formats (PNG, JPEG, SVG). Image manipulations (compression, size reduction, cropping, upscaling). Pre- and post- text modification. Easy template customization, layout modification, and personalization. Multiple editors per page. Django Admin support. Preview \u00b6 Acknowledgements \u00b6 We acknowledge and appreciate every contribution made towards improving Django MarkdownX , a list of which can be found on our GitHub contributors page .","title":"Django MarkdownX"},{"location":"#django-markdownx","text":"Django MarkdownX is a comprehensive Markdown plugin built for Django , the renowned high-level Python web framework, with flexibility, extensibility, and ease-of-use at its core. GitHub: https://github.com/neutronX/django-markdownx PyPi: https://pypi.org/project/django-markdownx/","title":"Django MarkdownX"},{"location":"#key-features","text":"Raw editing. Live preview. Drag & drop image uploads (automatically stored in the designated location in the Media directory). Customizable image insertion tag. Definition of maximum size for an image. Definition of acceptable image formats (PNG, JPEG, SVG). Image manipulations (compression, size reduction, cropping, upscaling). Pre- and post- text modification. Easy template customization, layout modification, and personalization. Multiple editors per page. Django Admin support.","title":"Key features"},{"location":"#preview","text":"","title":"Preview"},{"location":"#acknowledgements","text":"We acknowledge and appreciate every contribution made towards improving Django MarkdownX , a list of which can be found on our GitHub contributors page .","title":"Acknowledgements"},{"location":"contributions/","text":"Contributions \u00b6 We welcome and encourage contributions of all nature; from pointing out an error or a potential problem, to translations, to feature requests, and pull requests. We have a implemented a fully comprehensive developers' environment that comes with many functionalities, including its own Vagrant and Docker containers. To set up the developers' environment, start off by cloning our source code from GitHub , like so: git clone https://github.com/neutronX/django-markdownx.git One that's done, change to the cloned directory and run: python3 dev.py -h to see the options available. Quick reference \u00b6 -h , --help \u00b6 Show the help message and exit. -v , --vagrant \u00b6 Install Vagrant development environment (requires Vagrant). -d , --docker \u00b6 Install Docker development environment (requires Docker). -c , --clean \u00b6 Clean up the development files (only the ones that have been automatically created). -run-vagrant \u00b6 Run vagrant development environment (runs --vagrant if the files don't already exist). Vagrant must be installed on your machine. -run-docker \u00b6 Run docker development environment (runs --docker if the files don't already exist). Docker must already be installed on your machine, and Docker Daemon must be up and running. -no-container \u00b6 Create development files without a container-based development environment (creates manage.py and runtests.py ). Optional \u00b6 --with-docs \u00b6 Install documentation development environment. --with-npm-settings \u00b6 Install npm installation environment, including package.json for front-end (TypeScript) development (requires node.js and npm ). Note --with-docs and --with-npm-settings are optional and need to be accompanied by one of the required arguments. To save the changes made within the developers' environment, use -c or --clean ; and you will be asked if you would like to override the existing settings. Do not commit your changes before doing this . Example \u00b6 This will install the following files: manage.py runtests.py Makefile create_docs.py It will also install the requirements for compiling the documentations. You do not need to create the documentations locally if you do not intend to change them. Although you are welcome to do so, for minor changes, it is probably easier to report an issue on GitHub as compiling the documentations can be somewhat tricky. python3 dev.py -no-container --with-docs However, if you still want to run a preview of the edited documentation, use the following command to see the result (it will run documentation preview on port http://localhost:8001 ) mkdocs serve Once done, please run: python3 dev.py -c to clean the installed files. If any of them have been altered, you will be asked for additional instructions as to whether to save the changes or discard them and hold onto the default. Tests \u00b6 Django packages require manage.py and more often than not, settings.py files to run. This introduces a challenge for testing apps outside of a fully constructed project environment. This is one of the reasons why we introduced the developers' environment, which allows for a fully setup container ( Vagrant or Docker ) to create an inclusive virtual server that can be used to run MarkdownX independently. Attention You need to have either Vagrant or Docker along with Oracle VirtualBox installed and configured to run either of these. Note Vagrant will attempt to download and install Ubuntu Xenial, whilst Docker uses the default operating system if one already exists. To take advantage of this, you should clone the source code from GitHub as explained above, and depending on your container of choice, follow these instructions: Vagrant \u00b6 python3 dev.py --vagrant Files will be created: Vagrantfile bootstrap.sh runtests.py manage.py package.json python3 dev.py -run-vagrant Connect to server using http://localhost:8000/ or http://127.0.0.1:8000/ Docker \u00b6 python3 dev.py --docker Files will be created: Dockerfile docker-compose.yml entrypoint.sh runtests.py manage.py package.json python3 dev.py -run-docker Connect to server using http://localhost:8000/ or http://127.0.0.1:8000/ Tip Any changes made to the code whilst the container is up and running is automatically reflected without the need to restart the container. Cleanup \u00b6 Once done, please run: python3 dev.py -c to clean the installed files. If any of them have been altered, you will be asked for additional instructions as to whether to save the changes or discard them and hold onto the default.","title":"Contributions"},{"location":"contributions/#contributions","text":"We welcome and encourage contributions of all nature; from pointing out an error or a potential problem, to translations, to feature requests, and pull requests. We have a implemented a fully comprehensive developers' environment that comes with many functionalities, including its own Vagrant and Docker containers. To set up the developers' environment, start off by cloning our source code from GitHub , like so: git clone https://github.com/neutronX/django-markdownx.git One that's done, change to the cloned directory and run: python3 dev.py -h to see the options available.","title":"Contributions"},{"location":"contributions/#quick-reference","text":"","title":"Quick reference"},{"location":"contributions/#-h-help","text":"Show the help message and exit.","title":"-h, --help"},{"location":"contributions/#-v-vagrant","text":"Install Vagrant development environment (requires Vagrant).","title":"-v, --vagrant"},{"location":"contributions/#-d-docker","text":"Install Docker development environment (requires Docker).","title":"-d, --docker"},{"location":"contributions/#-c-clean","text":"Clean up the development files (only the ones that have been automatically created).","title":"-c, --clean"},{"location":"contributions/#-run-vagrant","text":"Run vagrant development environment (runs --vagrant if the files don't already exist). Vagrant must be installed on your machine.","title":"-run-vagrant"},{"location":"contributions/#-run-docker","text":"Run docker development environment (runs --docker if the files don't already exist). Docker must already be installed on your machine, and Docker Daemon must be up and running.","title":"-run-docker"},{"location":"contributions/#-no-container","text":"Create development files without a container-based development environment (creates manage.py and runtests.py ).","title":"-no-container"},{"location":"contributions/#optional","text":"","title":"Optional"},{"location":"contributions/#-with-docs","text":"Install documentation development environment.","title":"--with-docs"},{"location":"contributions/#-with-npm-settings","text":"Install npm installation environment, including package.json for front-end (TypeScript) development (requires node.js and npm ). Note --with-docs and --with-npm-settings are optional and need to be accompanied by one of the required arguments. To save the changes made within the developers' environment, use -c or --clean ; and you will be asked if you would like to override the existing settings. Do not commit your changes before doing this .","title":"--with-npm-settings"},{"location":"contributions/#example","text":"This will install the following files: manage.py runtests.py Makefile create_docs.py It will also install the requirements for compiling the documentations. You do not need to create the documentations locally if you do not intend to change them. Although you are welcome to do so, for minor changes, it is probably easier to report an issue on GitHub as compiling the documentations can be somewhat tricky. python3 dev.py -no-container --with-docs However, if you still want to run a preview of the edited documentation, use the following command to see the result (it will run documentation preview on port http://localhost:8001 ) mkdocs serve Once done, please run: python3 dev.py -c to clean the installed files. If any of them have been altered, you will be asked for additional instructions as to whether to save the changes or discard them and hold onto the default.","title":"Example"},{"location":"contributions/#tests","text":"Django packages require manage.py and more often than not, settings.py files to run. This introduces a challenge for testing apps outside of a fully constructed project environment. This is one of the reasons why we introduced the developers' environment, which allows for a fully setup container ( Vagrant or Docker ) to create an inclusive virtual server that can be used to run MarkdownX independently. Attention You need to have either Vagrant or Docker along with Oracle VirtualBox installed and configured to run either of these. Note Vagrant will attempt to download and install Ubuntu Xenial, whilst Docker uses the default operating system if one already exists. To take advantage of this, you should clone the source code from GitHub as explained above, and depending on your container of choice, follow these instructions:","title":"Tests"},{"location":"contributions/#vagrant","text":"python3 dev.py --vagrant Files will be created: Vagrantfile bootstrap.sh runtests.py manage.py package.json python3 dev.py -run-vagrant Connect to server using http://localhost:8000/ or http://127.0.0.1:8000/","title":"Vagrant"},{"location":"contributions/#docker","text":"python3 dev.py --docker Files will be created: Dockerfile docker-compose.yml entrypoint.sh runtests.py manage.py package.json python3 dev.py -run-docker Connect to server using http://localhost:8000/ or http://127.0.0.1:8000/ Tip Any changes made to the code whilst the container is up and running is automatically reflected without the need to restart the container.","title":"Docker"},{"location":"contributions/#cleanup","text":"Once done, please run: python3 dev.py -c to clean the installed files. If any of them have been altered, you will be asked for additional instructions as to whether to save the changes or discard them and hold onto the default.","title":"Cleanup"},{"location":"customization/","text":"Customization \u00b6 General (ex. settings) \u00b6 Widget \u00b6 The default widget is as seen here . If you would like to customise this; for instance, using Bootstrap v3 to implement side-by-side panes (as seen in :doc: preview animation {% include 'django/forms/widgets/textarea.html' %}
{% include 'django/forms/widgets/textarea.html' %}
Search Results
Searching...
Translations¶
Django's strength is in its global community. Similarly, MarkdownX developers come from across the world too. We are therefore commit to make the plugin as inclusive as possible. To this end, we provide translation of all messages produced by MarkdownX to various languages.
Current languages¶
- English
- Polish (Polski)
- German (Deutsch)
- French (Français)
- Persian (فارسی)
- Dutch (Nederlands)
Your language is not included?¶
Wanna contribute? Why not help us with the translation of messages? It's not really that long.
Even more? Help us translate the documentations.
{% include 'django/forms/widgets/textarea.html' %}
**PyPi:** [https://pypi.org/project/django-markdownx/](https://pypi.org/project/django-markdownx/) ## Key features * Raw editing. * Live preview. * Drag & drop image uploads (automatically stored in the designated location in the *Media* directory). * Customizable image insertion tag. * Definition of maximum size for an image. * Definition of acceptable image formats (PNG, JPEG, SVG). * Image manipulations (compression, size reduction, cropping, upscaling). * Pre- and post- text modification. * Easy template customization, layout modification, and personalization. * Multiple editors per page. * Django Admin support. ## Preview  ## Acknowledgements We acknowledge and appreciate every contribution made towards improving **Django MarkdownX**, a list of which can be found on our [GitHub contributors page](https://github.com/adi-/django-markdownx/graphs/contributors). ================================================ FILE: docs-src/installation.md ================================================ # Installation ## Using PIP Django MarkdownX may be installed directly using Python Package Index (PyPi): ```bash pip install django-markdownx ``` ## From the source Should you wish to download and install it using the source code, you can do as follows: !!! note Make sure you have activated your virtual environment if you’re using one. We start off by downloading the source code from GitHub and navigate to the downloaded directory: ```bash git clone https://github.com/neutronX/django-markdownx.git cd django-markdownx/ ``` Install the package. ```bash python3 setup.py install ``` ================================================ FILE: docs-src/javascript.md ================================================ # JavaScript ## Events Some MarkdownX processes trigger events that may be utilized for different purposes. To handle such events in JavaScript, you may take advantage of event listeners as exemplified below: - [`markdownx.init`](#markdownxinit) - [`markdownx.update`](#markdownxupdate) - [`markdownx.updateError`](#markdownxupdateerror) - [`markdownx.markdownx.fileUploadBegin`](#markdownxmarkdownxfileuploadbegin) - [`markdownx.fileUploadEnd`](#markdownxfileuploadend) - [`markdownx.fileUploadError`](#markdownxfileuploaderror) ### `markdownx.init` Triggered after jQuery plugin init. `markdownx.init` is an event that does *not* return a response. JavaScript ECMA 2015+: ```javascript let element = document.getElementsByClassName('markdownx'); Object.keys(element).map(key => element[key].addEventListener('markdownx.init', () => console.log("MarkdownX initialized.")) ); ``` ### `markdownx.update` Triggered when editor text is markdownified. Returns: **response** (*string*) variable containing markdownified text. JavaScript ECMA 2015+: ```javascript let element = document.getElementsByClassName('markdownx'); Object.keys(element).map(key => element[key].addEventListener('markdownx.update', event => console.log(event.detail)) ); ``` ### `markdownx.updateError` Triggered when a problem occurred during markdownify. ### `markdownx.markdownx.fileUploadBegin` Triggered when the file is posted. ### `markdownx.fileUploadEnd` Triggered when the file has been uploaded. ### `markdownx.fileUploadError` Triggered if the upload didn’t work. ## Compatibility We rely on JavaScript to handle front-end events (e.g. trans-compilation of Markdown to HTML, uploading image). MarkdownX's JavaScript code is written in TypeScript using Pure JavaScript and under ECMA 2016 standard. Currently, the code is trans-compiled into ECMA 5 (approved in 2011) to provide support for older browsers, specifically IE 10+. See additional detailed on [browser compatibilities](https://kangax.github.io/compat-table/es5/). ================================================ FILE: docs-src/license.md ================================================ # License MarkdownX is licensed under the [2-clause BSD](https://opensource.org/licenses/BSD-2-Clause) license, and Open Source Initiative approved license. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. This software is provided by the copyright holders and contributors "as is" and any express or implied warranties, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose are disclaimed. in no event shall the copyright owner or contributors be liable for any direct, indirect, incidental, special, exemplary, or consequential damages (including, but not limited to, procurement of substitute goods or services; loss of use, data, or profits; or business interruption) however caused and on any theory of liability, whether in contract, strict liability, or tort (including negligence or otherwise) arising in any way out of the use of this software, even if advised of the possibility of such damage. ================================================ FILE: docs-src/requirements.txt ================================================ mkdocs pymdown-extensions ================================================ FILE: docs-src/translations.md ================================================ # Translations Django's strength is in its global community. Similarly, MarkdownX developers come from across the world too. We are therefore commit to make the plugin as inclusive as possible. To this end, we provide translation of all messages produced by MarkdownX to various languages. ## Current languages - English - Polish (Polski) - German (Deutsch) - French (Français) - Persian (فارسی) - Dutch (Nederlands) --- ### Your language is not included? **Wanna contribute?** Why not help us with the translation of messages? It's not really that long. **Even more?** Help us translate the documentations. ================================================ FILE: markdownx/__init__.py ================================================ """ Django MarkdownX ================ |PyPi_Status| |Build_Status| |Format| |Supported_versions_of_Python| |Supported_versions_of_Django| |License| .. raw:: html ------------ Documentations -------------- Django MarkdownX is a comprehensive Markdown_ plugin built for Django_, the renowned high-level Python web framework, with flexibility, extensibility, and ease-of-use at its core. Key features ```````````` * Raw editing. * Live preview. * Drag & drop image uploads (automatically stored in the designated location in the *Media* directory). * Customizable image insertion tag. * Definition of maximum size for an image. * Definition of acceptable image formats (PNG, JPEG, SVG). * Image manipulations (compression, size reduction, cropping, upscaling). * Pre- and post- text modification. * Easy template customization, layout modification, and personalization. * Multiple editors per page. * Django Admin support. .. image:: https://github.com/neutronX/django-markdownx/raw/master/django-markdownx-preview.gif?raw=true :target: https://github.com/neutronX/django-markdownx :align: center :alt: django-markdownx preview .. _Markdown: https://en.wikipedia.org/wiki/Markdown .. _Django: https://www.djangoproject.com .. |PyPi_Status| image:: https://img.shields.io/pypi/status/django-markdownx.svg .. |Build_Status| image:: https://img.shields.io/travis/neutronX/django-markdownx.svg .. |Format| image:: https://img.shields.io/pypi/format/django-markdownx.svg .. |Supported_versions_of_Python| image:: https://img.shields.io/pypi/pyversions/django-markdownx.svg .. |Supported_versions_of_Django| image:: https://img.shields.io/badge/Django-2.0,%202.1,%202.2,%203.0-green.svg .. |License| image:: https://img.shields.io/pypi/l/django-markdownx.svg ------------ """ # ~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~= # Imports # ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~- # None # ~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~= # Documentations # ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~- __credits__ = 'Adi, Pouria Hadjibagheri' __copyright__ = 'Copyright 2017' __license__ = 'BSD' __maintainer__ = 'Adi, Pouria Hadjibagheri' __url__ = 'https://github.com/neutronX/django-markdownx' __version__ = '4.0.9' __description__ = 'A comprehensive Markdown editor built for Django.' # ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~- if __name__ == '__main__': raise RuntimeError( 'MarkdownX is a Django plugin. It is not meant to be run as an stand-alone module.' ) ================================================ FILE: markdownx/admin.py ================================================ from django.contrib import admin from .models import MarkdownxField from .widgets import AdminMarkdownxWidget class MarkdownxModelAdmin(admin.ModelAdmin): """ Django admin representation for ``MarkdownxField`` in models. See **Django Admin** in :doc:`../../example` for additional information. """ formfield_overrides = { MarkdownxField: {'widget': AdminMarkdownxWidget} } ================================================ FILE: markdownx/exceptions.py ================================================ from django.forms import ValidationError from django.utils.translation import gettext_lazy as _ class MarkdownxImageUploadError(ValidationError): """ Custom **MarkdownX** exceptions. """ @classmethod def not_uploaded(cls): """ No file is available to upload. :return: Locale compatible version of the error with the following message: - No files have been uploaded. :rtype: MarkdownxImageUploadError """ return cls(_('No files have been uploaded.')) @classmethod def unsupported_format(cls): """ The file is of a format not defined in :guilabel:`settings.py` or if default, in :guilabel:`markdownx/settings.py`. :return: Locale compatible version of the error with the following message: - File type is not supported. :rtype: MarkdownxImageUploadError """ return cls(_('File type is not supported.')) @classmethod def invalid_size(cls, current, expected): """ The file is larger in size that the maximum allow in :guilabel:`settings.py` (or the default). :param current: Current size of the file. :type current: float, int :param expected: Expected (maximum permitted) size of the file. :type expected: float, int :return: Locale compatible version of the error with the following message: - Please keep file size under %(max)s. Current file size: %(current)s.' :rtype: MarkdownxImageUploadError """ from django.template.defaultfilters import filesizeformat return cls( _('Please keep file size under %(max)s. Current file size: %(current)s.') % { 'max': filesizeformat(expected), 'current': filesizeformat(current) } ) ================================================ FILE: markdownx/fields.py ================================================ from django import forms from .widgets import MarkdownxWidget class MarkdownxFormField(forms.CharField): """ Used in FormFields as a Markdown enabled replacement for ``CharField``. """ def __init__(self, *args, **kwargs): """ Arguments are similar to Django's default ``CharField``. See Django's `documentations on CharField`_ for additional information. .. _docs on Charfield: https://docs.djangoproject.com/en/dev/ref/models/fields/#django.db.models.CharField """ super(MarkdownxFormField, self).__init__(*args, **kwargs) if issubclass(self.widget.__class__, forms.widgets.MultiWidget): is_markdownx_widget = any( issubclass(item.__class__, MarkdownxWidget) for item in getattr(self.widget, 'widgets', list()) ) if not is_markdownx_widget: self.widget = MarkdownxWidget() elif not issubclass(self.widget.__class__, MarkdownxWidget): self.widget = MarkdownxWidget() ================================================ FILE: markdownx/forms.py ================================================ from collections import namedtuple from io import BytesIO from os import SEEK_END from os import SEEK_SET from os import path from uuid import uuid4 from django import forms from django.core.files.storage import default_storage from django.core.files.uploadedfile import InMemoryUploadedFile from .exceptions import MarkdownxImageUploadError from .settings import MARKDOWNX_IMAGE_MAX_SIZE from .settings import MARKDOWNX_MEDIA_PATH from .settings import MARKDOWNX_SKIP_RESIZE from .settings import MARKDOWNX_SVG_JAVASCRIPT_PROTECTION from .settings import MARKDOWNX_UPLOAD_CONTENT_TYPES from .settings import MARKDOWNX_UPLOAD_MAX_SIZE from .utils import scale_and_crop from .utils import xml_has_javascript class ImageForm(forms.Form): """ Used for the handling of images uploaded using the editor through :guilabel:`AJAX`. """ image = forms.FileField() # Separately defined as it needs to be # processed a text file rather than image. _SVG_TYPE = 'image/svg+xml' def save(self, commit=True): """ Saves the uploaded image in the designated location. If image type is not liste as ``MARKDOWNX_SKIP_RESIZE``, a byteIO of image content_type is created and subsequently save; otherwise, the image is saved in its existing ``charset`` with its existing mime type. *Note*: The dimension of image files (excluding SVG) are set using ``PIL``. :param commit: If ``True``, the file is saved to the disk; otherwise, it is held in the memory. :type commit: bool :return: An instance of saved image if ``commit is True``, else ``namedtuple(path, image)``. :rtype: bool, namedtuple """ image = self.files.get('image') content_type = image.content_type file_name = image.name image_extension = content_type.split('/')[-1].upper() image_size = image.size if content_type.lower() not in MARKDOWNX_SKIP_RESIZE: # Processing the raster graphic image. # Note that some graphics do not require (or enable) # additional processing (such as GIF or SVG) and # may be stored as uploaded. image = self._process_raster(image, image_extension) image_size = image.tell() image.seek(0, SEEK_SET) # Processed file (or the actual file in the case of SVG) is now # saved in the memory as a Django object. uploaded_image = InMemoryUploadedFile( file=image, field_name=None, name=file_name, content_type=content_type, size=image_size, charset=None ) if (content_type.lower() == self._SVG_TYPE and MARKDOWNX_SVG_JAVASCRIPT_PROTECTION and xml_has_javascript(uploaded_image.read())): raise MarkdownxImageUploadError( 'Failed security monitoring: SVG file contains JavaScript.' ) return self._save(uploaded_image, file_name, commit) def _save(self, image, file_name, commit): """ Final saving process, called internally after processing tasks are complete. :param image: Prepared image :type image: django.core.files.uploadedfile.InMemoryUploadedFile :param file_name: Name of the file using which the image is to be saved. :type file_name: str :param commit: If ``True``, the image is saved onto the disk. :type commit: bool :return: URL of the uploaded image ``commit=True``, otherwise a namedtuple of ``(path, image)`` where ``path`` is the absolute path generated for saving the file, and ``image`` is the prepared image. :rtype: str, namedtuple """ # Defining a universally unique name for the file # to be saved on the disk. unique_file_name = self.get_unique_file_name(file_name) full_path = path.join(MARKDOWNX_MEDIA_PATH, unique_file_name) if commit: default_storage.save(full_path, image) return default_storage.url(full_path) # If `commit is False`, return the path and in-memory image. image_data = namedtuple('image_data', ['path', 'image']) return image_data(path=full_path, image=image) @staticmethod def _process_raster(image, extension): """ Processing of raster graphic image using Python Imaging Library (PIL). This is where raster graphics are processed to the specifications as defined in ``settings.py``. *Note*: The file needs to be uploaded and saved temporarily in the memory to enable processing tasks using Python Imaging Library (PIL) to take place and subsequently retained until written onto the disk. :param image: Non-SVG image as processed by Django. :type image: django.forms.BaseForm.file :param extension: Image extension (e.g.: png, jpg, gif) :type extension: str :return: The image object ready to be written into a file. :rtype: BytesIO """ thumb_io = BytesIO() preped_image = scale_and_crop(image, **MARKDOWNX_IMAGE_MAX_SIZE) preped_image.save(thumb_io, extension, **MARKDOWNX_IMAGE_MAX_SIZE) thumb_io.seek(0, SEEK_END) return thumb_io @staticmethod def get_unique_file_name(file_name): """ Generates a universally unique ID using Python ``UUID`` and attaches the extension of file name to it. :param file_name: Name of the uploaded file, including the extension. :type file_name: str :return: Universally unique ID, ending with the extension extracted from ``file_name``. :rtype: str """ extension = 1 extension_dot_index = 1 file_name = "{unique_name}.{extension}".format( unique_name=uuid4(), extension=path.splitext(file_name)[extension][extension_dot_index:] ) return file_name def clean(self): """ Checks the upload against allowed extensions and maximum size. :return: Upload """ upload = self.cleaned_data.get('image') # ----------------------------------------------- # See comments in `self._error_templates` for # additional information on each error. # ----------------------------------------------- if not upload: raise MarkdownxImageUploadError.not_uploaded() content_type = upload.content_type file_size = upload.size if content_type not in MARKDOWNX_UPLOAD_CONTENT_TYPES: raise MarkdownxImageUploadError.unsupported_format() elif file_size > MARKDOWNX_UPLOAD_MAX_SIZE: raise MarkdownxImageUploadError.invalid_size( current=file_size, expected=MARKDOWNX_UPLOAD_MAX_SIZE ) return upload ================================================ FILE: markdownx/locale/de/LC_MESSAGES/django.po ================================================ # SOME DESCRIPTIVE TITLE. # Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER # This file is distributed under the same license as the PACKAGE package. # FIRST AUTHOR
{% include 'django/forms/widgets/textarea.html' %}
================================================
FILE: markdownx/tests/__init__.py
================================================
================================================
FILE: markdownx/tests/models.py
================================================
from django.db import models
from markdownx.models import MarkdownxField
class MyModel(models.Model):
"""
"""
markdownx_field = MarkdownxField()
class Meta:
app_label = 'MyModel'
================================================
FILE: markdownx/tests/templates/test_view.html
================================================
{{ form.media }}
================================================
FILE: markdownx/tests/tests.py
================================================
import os
import re
from django.test import TestCase
from django.urls import reverse
class SimpleTest(TestCase):
def test_upload(self):
url = reverse('markdownx_upload')
with open('markdownx/tests/static/django-markdownx-preview.png', 'rb') as fp:
response = self.client.post(url, {'image': fp}, HTTP_X_REQUESTED_WITH='XMLHttpRequest')
json = response.json()
self.assertEqual(response.status_code, 200)
self.assertIn('image_code', json)
match = re.findall(r'(markdownx/[\w\-]+\.png)', json['image_code'])
try:
if match:
os.remove(match[0])
except OSError:
pass
================================================
FILE: markdownx/tests/urls.py
================================================
from django.conf.urls import include
from django.urls import path
from .views import TestView
urlpatterns = [
path('testview/', TestView.as_view()),
path('markdownx/', include('markdownx.urls')),
]
================================================
FILE: markdownx/tests/views.py
================================================
from django.views.generic.edit import CreateView
from .models import MyModel
class TestView(CreateView):
template_name = "test_view.html"
model = MyModel
fields = ['markdownx_field']
================================================
FILE: markdownx/urls.py
================================================
"""
**MarkdownX** default URLs, to be added to URLs in the main project.
See URLs in :doc:`../../example` to learn more.
"""
from django.urls import path
from .views import ImageUploadView
from .views import MarkdownifyView
urlpatterns = [
path('upload/', ImageUploadView.as_view(), name='markdownx_upload'),
path('markdownify/', MarkdownifyView.as_view(), name='markdownx_markdownify'),
]
================================================
FILE: markdownx/utils.py
================================================
from PIL import Image
from markdown import markdown
from .settings import MARKDOWNX_MARKDOWN_EXTENSIONS
from .settings import MARKDOWNX_MARKDOWN_EXTENSION_CONFIGS
# TODO: try catch for file.open when image is corrupted
def markdownify(content):
"""
Trans-compiles Markdown text to HTML.
:param content: Markdown text.
:type content: str
:return: HTML encoded text.
:rtype: str
"""
md = markdown(
text=content,
extensions=MARKDOWNX_MARKDOWN_EXTENSIONS,
extension_configs=MARKDOWNX_MARKDOWN_EXTENSION_CONFIGS
)
return md
def _crop(im, target_x, target_y):
"""
Crops the image to the given specifications.
:param im: Instance of the image.
:type im: PIL Image
:param target_x: New x-axis.
:type target_x: int
:param target_y: New y-axis
:type target_y: int
:return: Cropped image.
:rtype: PIL.Image
"""
# Use integer values now.
source_x, source_y = im.size
# Difference between new image size and requested size.
diff_x = int(source_x - min(source_x, target_x))
diff_y = int(source_y - min(source_y, target_y))
if diff_x or diff_y:
# Center cropping (default).
halfdiff_x, halfdiff_y = diff_x // 2, diff_y // 2
box = [
halfdiff_x,
halfdiff_y,
min(source_x, int(target_x) + halfdiff_x),
min(source_y, int(target_y) + halfdiff_y)
]
# Finally, crop the image!
im = im.crop(box)
return im
def _scale(im, x, y):
"""
Scales the image to the given specifications.
:param im: Instance of the image.
:type im: PIL Image
:param x: x-axis size.
:type x: int
:param y: y-axis size.
:type y: int
:return: Scaled image, re-sampled with anti-aliasing filter.
:rtype: Image
"""
im = im.resize(
(int(x), int(y)),
resample=Image.Resampling.LANCZOS
)
return im
def scale_and_crop(image, size, crop=False, upscale=False, quality=None):
"""
Modifies raster graphic images to the specifications.
:param image: Raster graphic image.
:type image: BytesIO
:param size: New size.
:type size: int
:param crop: Perform cropping or not.
:type crop: bool
:param upscale: Whether or not to upscale the image.
:type upscale: bool
:param quality: Quality of the new image in DPI.
:type quality: int
:return: Raster graphic image modified to the given specifications.
:rtype: BytesIO
"""
# Open image and store format/metadata.
image.open()
im = Image.open(image)
im_format, im_info = im.format, im.info
if quality:
im_info['quality'] = quality
# Force PIL to load image data.
im.load()
source_x, source_y = map(float, im.size)
target_x, target_y = map(float, size)
if crop or not target_x or not target_y:
scale = max(target_x / source_x, target_y / source_y)
else:
scale = min(target_x / source_x, target_y / source_y)
# Handle one-dimensional targets.
if not target_x:
target_x = source_x * scale
elif not target_y:
target_y = source_y * scale
if scale < 1.0 or (scale > 1.0 and upscale):
im = _scale(im=im, x=source_x * scale, y=source_y * scale)
if crop:
im = _crop(im=im, target_x=target_x, target_y=target_y)
# Close image and replace format/metadata, as PIL blows this away.
im.format, im.info = im_format, im_info
image.close()
return im
def xml_has_javascript(data):
"""
Checks XML for JavaScript. See "security" in :doc:`customization <../../customization>` for
additional information.
:param data: Contents to be monitored for JavaScript injection.
:type data: str, bytes
:return: ``True`` if **data** contains JavaScript tag(s), otherwise ``False``.
:rtype: bool
"""
from re import search, IGNORECASE, MULTILINE
data = str(data, encoding='UTF-8')
# ------------------------------------------------
# Handles JavaScript nodes and stringified nodes.
# ------------------------------------------------
# Filters against "script" / "if" / "for" within node attributes.
pattern = r'(<\s*\bscript\b.*>.*)|(.*\bif\b\s*\(.?={2,3}.*\))|(.*\bfor\b\s*\(.*\))'
found = search(
pattern=pattern,
string=data,
flags=IGNORECASE | MULTILINE
)
if found is not None:
return True
# ------------------------------------------------
# Handles JavaScript injection into attributes
# for element creation.
# ------------------------------------------------
from xml.etree.ElementTree import fromstring
parsed_xml = (
(attribute, value)
for elm in fromstring(data).iter()
for attribute, value in elm.attrib.items()
)
for key, val in parsed_xml:
if '"' in val or "'" in val:
return True
# It is (hopefully) safe.
return False
================================================
FILE: markdownx/views.py
================================================
from django.http import HttpResponse
from django.http import JsonResponse
from django.utils.module_loading import import_string
from django.views.generic.edit import BaseFormView
from django.views.generic.edit import View
from .forms import ImageForm
from .settings import MARKDOWNX_MARKDOWNIFY_FUNCTION
markdownify_func = import_string(MARKDOWNX_MARKDOWNIFY_FUNCTION)
class MarkdownifyView(View):
"""
Conversion of Markdown to HTML.
"""
def post(self, request, *args, **kwargs):
"""
Handling of the conversion from Markdown to HTML using the conversion
function in settings under ``MARKDOWNX_MARKDOWNIFY_FUNCTION``.
:param request: HTTP request.
:param args: Default Django POST arguments.
:param kwargs: Default Django POST keyword arguments.
:return: HTTP response
:rtype: django.http.HttpResponse
"""
return HttpResponse(markdownify_func(request.POST['content']))
class ImageUploadView(BaseFormView):
"""
Handling requests for uploading images.
"""
# template_name = "dummy.html"
form_class = ImageForm
success_url = '/'
def form_invalid(self, form):
"""
Handling of invalid form events.
:param form: Django form instance.
:type form: django.forms.Form
:return: JSON response with the HTTP-400 error message for AJAX requests
and the default response for HTTP requests.
:rtype: django.http.JsonResponse, django.http.HttpResponse
"""
if self.request.headers.get('x-requested-with') == 'XMLHttpRequest':
return JsonResponse(form.errors, status=400)
response = super(ImageUploadView, self).form_invalid(form)
return response
def form_valid(self, form):
"""
If the form is valid, the contents are saved.
If the **POST** request is AJAX (image uploads), a JSON response will be
produced containing the Markdown encoded image insertion tag with the URL
using which the uploaded image may be accessed.
JSON response would be as follows:
.. code-block:: bash
{ image_code: "" }
:param form: Django form instance.
:type form: django.forms.Form
:return: JSON encoded Markdown tag for AJAX requests, and an appropriate
response for HTTP requests.
:rtype: django.http.JsonResponse, django.http.HttpResponse
"""
response = super(ImageUploadView, self).form_valid(form)
if self.request.headers.get('x-requested-with') == 'XMLHttpRequest':
image_path = form.save(commit=True)
image_code = ''.format(image_path)
return JsonResponse({'image_code': image_code})
return response
================================================
FILE: markdownx/widgets.py
================================================
from django import forms
from django.conf import settings
from django.contrib.admin import widgets
from django.core.exceptions import ImproperlyConfigured
from .settings import MARKDOWNX_EDITOR_RESIZABLE
from .settings import MARKDOWNX_SERVER_CALL_LATENCY
from .settings import MARKDOWNX_UPLOAD_URLS_PATH
from .settings import MARKDOWNX_URLS_PATH
try:
DEBUG = getattr(settings, 'DEBUG', False)
except ImproperlyConfigured:
# Documentations work around.
DEBUG = False
minified = '.min' if not DEBUG else str()
class MarkdownxWidget(forms.Textarea):
"""
MarkdownX TextArea widget for forms. Markdown enabled version of
Django "TextArea" widget.
"""
template_name = 'markdownx/widget.html'
def get_context(self, name, value, attrs=None):
"""
Context for the template in Django
"""
try:
attrs.update(self.add_markdownx_attrs(attrs))
except AttributeError:
attrs = self.add_markdownx_attrs(attrs)
return super(MarkdownxWidget, self).get_context(name, value, attrs)
def render(self, name, value, attrs=None, renderer=None):
"""
Rendering the template and attributes
"""
attrs.update(self.attrs)
attrs.update(self.add_markdownx_attrs(attrs))
return super(MarkdownxWidget, self).render(name, value, attrs, renderer)
@staticmethod
def add_markdownx_attrs(attrs):
"""
Setting (X)HTML node attributes.
:param attrs: Attributes to be set.
:type attrs: dict
:return: Dictionary of attributes, including the default attributes.
:rtype: dict
"""
if 'class' in attrs.keys():
if 'markdownx-editor' not in attrs['class']:
attrs['class'] += ' markdownx-editor'
else:
attrs.update({
'class': 'markdownx-editor'
})
attrs.update({
'data-markdownx-editor-resizable': '%s' % MARKDOWNX_EDITOR_RESIZABLE,
'data-markdownx-urls-path': MARKDOWNX_URLS_PATH,
'data-markdownx-upload-urls-path': MARKDOWNX_UPLOAD_URLS_PATH,
'data-markdownx-latency': MARKDOWNX_SERVER_CALL_LATENCY
})
return attrs
class Media:
js = [
'markdownx/js/markdownx{}.js'.format(minified),
]
class AdminMarkdownxWidget(MarkdownxWidget, widgets.AdminTextareaWidget):
"""
MarkdownX TextArea widget for admin. Markdown enabled version of
Django "TextArea" widget.
"""
class Media:
css = {
'all': ['markdownx/admin/css/markdownx{}.css'.format(minified)]
}
js = [
'markdownx/js/markdownx{}.js'.format(minified),
]
================================================
FILE: mkdocs.yml
================================================
site_name: Django Markdownx
site_url: https://neutronx.github.io/django-markdownx/
repo_url: https://github.com/neutronX/django-markdownx/
edit_uri: ''
nav:
- Django MarkdownX: index.md
- Installation: installation.md
- Getting Started: getting_started.md
- Example: example.md
- Customization: customization.md
- JavaScript: javascript.md
- Translations: translations.md
- Contributions: contributions.md
- License: license.md
theme:
name: readthedocs
hljs_languages:
- bash
- django
docs_dir: docs-src
site_dir: docs
use_directory_urls: true
dev_addr: 0.0.0.0:8001
exclude_docs: requirements.txt
markdown_extensions:
- toc:
permalink: True
- admonition
- pymdownx.superfences
================================================
FILE: requirements.txt
================================================
Django
Pillow
Markdown
================================================
FILE: setup.cfg
================================================
[bdist_wheel]
universal = 1
================================================
FILE: setup.py
================================================
"""
Installation
============
Using PIP
---------
Django MarkdownX may be installed directly using Python Package Index (PyPi):
.. code-block:: bash
python3 -m pip install django-markdownx
From the source
---------------
Should you wish to download and install it using the source code, you can do as follows:
Note
Make sure you have activated your virtual environment if you're using one.
We start off by downloading the source code from GitHub and navigate to the downloaded directory:
.. code-block:: bash
git clone https://github.com/adi-/django-markdownx.git
cd django-markdownx/
Install the package. You can replace ``python3`` with ``python`` or any of |Supported_versions_of_Python| if
you have multiple versions installed on your machine:
.. code-block:: bash
python3 setup.py install
.. |Supported_versions_of_Python| image:: https://img.shields.io/pypi/pyversions/django-markdownx.svg
"""
from setuptools import setup
from os import environ, link
from os.path import join, dirname
if 'vagrant' in str(environ):
del link
def get_meta():
from sys import version_info
keys = {
'__description__',
'__credits__',
'__copyright__',
'__license__',
'__maintainer__',
'__url__',
'__version__'
}
path = join(dirname(__file__), 'markdownx', '__init__.py')
from importlib.util import spec_from_file_location, module_from_spec
spec = spec_from_file_location('.', path)
mod = module_from_spec(spec)
spec.loader.exec_module(mod)
meta = {key.replace('__', ''): getattr(mod, key) for key in keys}
return meta
def get_requirements():
with open('requirements.txt') as requirements:
req = requirements.read().splitlines()
return req
def readme():
with open('README.md') as f:
return f.read()
metadata = get_meta()
setup(
name='django-markdownx',
version=metadata.get('version'),
packages=['markdownx', 'markdownx.tests'],
maintainer=metadata.get('maintainer'),
include_package_data=True,
description=metadata.get('description'),
long_description=readme(),
long_description_content_type='text/markdown',
url=metadata.get('url'),
license=metadata.get('license'),
classifiers=[
'Development Status :: 5 - Production/Stable',
'Environment :: Web Environment',
'Environment :: Plugins',
'Framework :: Django :: 4.2',
'Framework :: Django :: 5.0',
'Framework :: Django :: 5.1',
'Framework :: Django :: 5.2',
'Intended Audience :: Developers',
'License :: OSI Approved :: BSD License',
'Operating System :: OS Independent',
'Programming Language :: JavaScript',
"Programming Language :: Python",
'Programming Language :: Python :: 3.10',
'Programming Language :: Python :: 3.11',
'Programming Language :: Python :: 3.12',
'Programming Language :: Python :: 3.13',
'Topic :: Software Development :: Libraries :: Python Modules',
'Topic :: Multimedia :: Graphics',
'Topic :: Text Processing :: Markup',
'Topic :: Text Editors :: Text Processing',
'Topic :: Text Editors :: Word Processors',
'Topic :: Text Processing :: Markup :: HTML',
'Topic :: Multimedia :: Graphics :: Presentation',
'Topic :: Internet :: WWW/HTTP',
'Topic :: Internet :: WWW/HTTP :: Site Management'
],
keywords='django markdown markdownx django-markdownx editor image upload drag&drop ajax',
tests_require=get_requirements(),
test_suite='runtests',
install_requires=get_requirements(),
)
================================================
FILE: static-src/markdownx/admin/css/markdownx.css
================================================
/**
django-markdownx styles for Django Admin
**/
.markdownx {
display: inline-block;
}
.markdownx .markdownx-editor,
.markdownx .markdownx-preview {
margin-left: 0;
width: 610px;
box-sizing: border-box;
}
.markdownx .markdownx-preview {
overflow-y: scroll;
}
/* Django admin overrides */
.markdownx .markdownx-preview a { color: var(--link-fg); text-decoration:underline; }
.markdownx .markdownx-preview a:visited { color: var(--link-selected-fg); }
.markdownx .markdownx-preview a:hover { color: var(--link-hover-color); }
.markdownx .markdownx-preview a:active { color: var(--link-selected-fg); }
.markdownx .markdownx-preview a:focus { outline: thin dotted; }
.markdownx .markdownx-preview a:hover, .markdownx .markdownx-preview a:active { outline: 0; }
.markdownx .markdownx-preview p {
margin: 1em 0;
padding: 0;
font-size: 14px;
}
.markdownx .markdownx-preview h1,
.markdownx .markdownx-preview h2,
.markdownx .markdownx-preview h3,
.markdownx .markdownx-preview h4,
.markdownx .markdownx-preview h5,
.markdownx .markdownx-preview h6 {
font-weight: bold;
color: var(--body-fg);
margin-top: 1em;
margin-bottom: 0.75em;
padding: 0;
background: none;
}
.markdownx .markdownx-preview h1 { font-size: 2em; }
.markdownx .markdownx-preview h2 { font-size: 1.7em; }
.markdownx .markdownx-preview h3 { font-size: 1.4em; }
.markdownx .markdownx-preview h4 { font-size: 1.2em; }
.markdownx .markdownx-preview h5 { font-size: 1em; }
.markdownx .markdownx-preview h6 { font-size: 0.9em; }
.markdownx .markdownx-preview blockquote {
color: var(--body-quiet-color);
margin: 0;
padding-left: 1.5em;
font-style: italic;
border-left: 0.5em solid var(--hairline-color);
}
.markdownx .markdownx-preview hr { margin: 20px 0; }
.markdownx .markdownx-preview pre,
.markdownx .markdownx-preview code,
.markdownx .markdownx-preview kbd,
.markdownx .markdownx-preview samp {
font-family: monospace, monospace;
font-size: 14px;
}
.markdownx .markdownx-preview code,
.markdownx .markdownx-preview pre {
margin: 0 2px;
padding: 0 5px;
background-color: var(--hairline-color);
border-radius: 4px;
color: var(--body-quiet-color);
}
.markdownx .markdownx-preview pre {
margin: 1.5em 0 1.5em 0;
padding: 1em;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
.markdownx .markdownx-preview pre code {
margin: 0;
padding: 0;
background: transparent;
border: none;
}
.markdownx .markdownx-preview b,
.markdownx .markdownx-preview strong { font-weight: bold; }
.markdownx .markdownx-preview dfn { font-style: italic; }
.markdownx .markdownx-preview ins { background: var(--message-success-bg); color: var(--body-fg); text-decoration: none; }
.markdownx .markdownx-preview mark { background: var(--message-error-bg); color: var(--body-fg); font-style: italic; font-weight: bold; }
.markdownx .markdownx-preview sub,
.markdownx .markdownx-preview sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
.markdownx .markdownx-preview sup { top: -0.5em; }
.markdownx .markdownx-preview sub { bottom: -0.25em; }
.markdownx .markdownx-preview ul,
.markdownx .markdownx-preview ol { margin: .5em 0; padding: 0 0 0 2em !important; }
.markdownx .markdownx-preview ul,
.markdownx .markdownx-preview ul li,
.markdownx .markdownx-preview ul ul li { list-style: disc !important; }
.markdownx .markdownx-preview li p:last-child { margin:0; }
.markdownx .markdownx-preview dd { margin: 0 0 0 2em; }
.markdownx .markdownx-preview img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; max-width:100%; }
.markdownx .markdownx-preview table { border-collapse: collapse; border-spacing: 0; }
================================================
FILE: static-src/markdownx/js/markdownx.ts
================================================
/**
* **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` are trans-compiled files. Please do not edit such files as all
* changes will be lost. Please modify `.ts` stored in `django-markdownx/static-src/markdownx/js/` directory.
*
* @Copyright 2017 - Adi, Pouria Hadjibagheri.
*/
// Import, definitions and constant ------------------------------------------------------------------------------------
"use strict";
declare function docReady(args: any): any;
interface ImageUploadResponse {
image_code?: string,
image_path?: string,
[propName: string]: any;
}
interface HandlerFunction {
(properties: {
start: number,
end: number,
value: string
}): string
}
interface KeyboardEvents {
keys: {
TAB: string,
DUPLICATE: string,
UNINDENT: string,
INDENT: string
},
handlers: {
_multiLineIndentation: HandlerFunction,
applyTab: HandlerFunction,
applyIndentation: HandlerFunction,
removeIndentation: HandlerFunction,
removeTab: HandlerFunction,
applyDuplication: HandlerFunction
},
hub: Function
}
interface EventHandlers {
inhibitDefault: Function,
onDragEnter: Function
}
interface MarkdownxProperties {
parent: HTMLElement,
editor: HTMLTextAreaElement,
preview: HTMLElement,
_latency: number | null,
_editorIsResizable: Boolean | null
}
import {
Request,
mountEvents,
triggerEvent,
preparePostData,
triggerCustomEvent
} from "./utils";
const UPLOAD_URL_ATTRIBUTE: string = "data-markdownx-upload-urls-path",
PROCESSING_URL_ATTRIBUTE: string = "data-markdownx-urls-path",
RESIZABILITY_ATTRIBUTE: string = "data-markdownx-editor-resizable",
LATENCY_ATTRIBUTE: string = "data-markdownx-latency",
LATENCY_MINIMUM: number = 500, // microseconds.
XHR_RESPONSE_ERROR: string = "Invalid response",
UPLOAD_START_OPACITY: string = "0.3",
NORMAL_OPACITY: string = "1";
// ---------------------------------------------------------------------------------------------------------------------
/**
*
*/
const EventHandlers: EventHandlers = {
/**
* Routine tasks for event handlers (e.g. default preventions).
*
* @param {Event} event
* @returns {Event}
*/
inhibitDefault: function (event: Event | KeyboardEvent): any {
event.preventDefault();
event.stopPropagation();
return event
},
/**
*
* @param {DragEvent} event
* returns {Event}
*/
onDragEnter: function (event: DragEvent): Event {
event.dataTransfer.dropEffect = 'copy';
return EventHandlers.inhibitDefault(event)
}
};
/**
*
*/
const keyboardEvents: KeyboardEvents = {
/**
* Custom hotkeys.
*/
keys: {
TAB: "Tab",
DUPLICATE: "d",
UNINDENT: "[",
INDENT: "]"
},
/**
* Hotkey response functions.
*/
handlers: {
/**
* Smart application of tab indentations under various conditions.
*
* @param {JSON} properties
* @returns {string}
*/
applyTab: function (properties) {
// Do not replace with variables; this
// feature is optimised for swift response.
return properties.value
.substring(0, properties.start) + // Preceding text.
(
properties.value
.substring(properties.start, properties.end) // Selected text
.match(/\n/gm) === null ? // Not multi line?
`\t${properties.value.substring(properties.start)}` : // Add `\t`.
properties.value // Otherwise:
.substring(properties.start, properties.end)
.replace(/^/gm, '\t') + // Add `\t` to be beginning of each line.
properties.value.substring(properties.end) // Succeeding text.
)
},
/**
* Smart removal of tab indentations.
*
* @param {JSON} properties
* @returns {string}
*/
removeTab: function (properties) {
let substitution: string = null,
lineTotal: number = (
properties.value
.substring(
properties.start,
properties.end
).match(/\n/g) || [] // Number of lines (\n) or empty array (zero).
).length; // Length of the array is equal to the number of lines.
if (properties.start === properties.end) {
// Replacing `\t` at a specific location
// (+/- 1 chars) where there is no selection.
properties.start =
properties.start > 0 &&
properties.value[properties.start - 1] // -1 is to account any tabs just before the cursor.
.match(/\t/) !== null ? // if there's no `\t`, check the preceding character.
properties.start - 1 : properties.start;
substitution = properties.value
.substring(properties.start)
.replace("\t", ''); // Remove only a single `\t`.
} else if (!lineTotal) {
// Replacing `\t` within a single line selection.
substitution =
properties.value
.substring(properties.start)
.replace("\t", '')
} else {
// Replacing `\t` in the beginning of each line
// in a multi-line selection.
substitution =
properties.value.substring(
properties.start,
properties.end
).replace(/^\t/gm, '') + // Selection.
properties.value.substring(properties.end); // After the selection
}
return properties.value
.substring(0, properties.start) + // Text preceding to selection / cursor.
substitution
},
/**
* Handles multi line indentations.
*
* @param {JSON} properties
* @returns {string}
* @private
*/
_multiLineIndentation: function (properties) {
// Last line in the selection; regardless of
// where of not the entire line is selected.
const endLine: string =
new RegExp(`(?:\n|.){0,${properties.end}}(^.*$)`, "m")
.exec(properties.value)[1];
// Do not replace with variables; this
// feature is optimised for swift response.
return properties.value.substring(
// First line of the selection, regardless of
// whether or not the entire line is selected.
properties.value.indexOf(
new RegExp(`(?:\n|.){0,${properties.start}}(^.*$)`, "m")
.exec(properties.value)[1] // Start line.
), (
// If there is a last line in a multi line selected
// value where the last line is not empty or `\n`:
properties.value.indexOf(endLine) ?
// Location where the last line finishes with
// respect to the entire value.
properties.value.indexOf(endLine) + endLine.length :
// Otherwise, where the selection ends.
properties.end
)
);
},
/**
* Smart application of indentation at the beginning of the line.
*
* @param {JSON} properties
* @returns {string}
*/
applyIndentation: function (properties) {
// Single line?
if (properties.start === properties.end) {
// Current line, from the beginning to the end, regardless of any selections.
const line: string =
new RegExp(`(?:\n|.){0,${properties.start}}(^.+$)`, "m")
.exec(properties.value)[1];
return properties.value.replace(line, `\t${line}`)
}
// Multi line
const content: string = keyboardEvents.handlers._multiLineIndentation({
start: properties.start,
end: properties.end,
value: properties.value
});
return properties.value
.replace(
content, // Existing contents.
content.replace(/(^.+$)\n*/gmi, "\t$&") // Indented contents.
)
},
/**
* Smart removal of indentation from the beginning of the line.
*
* @param {JSON} properties
* @returns {string}
*/
removeIndentation: function (properties) {
// Single Line
if (properties.start === properties.end) {
// Entire line where the line immediately begins
// with a one or more `\t`, regardless of any
// selections.
const line: string =
new RegExp(`(?:\n|.){0,${properties.start}}(^\t.+$)`, "m")
.exec(properties.value)[1];
return properties.value
.replace(
line, // Existing content.
line.substring(1) // First character (necessarily a `\t`) removed.
)
}
// Multi line
const content: string = keyboardEvents.handlers._multiLineIndentation({
start: properties.start,
end: properties.end,
value: properties.value
});
return properties.value
.replace(
content, // Existing content.
content.replace(/^\t(.+)\n*$/gmi, "$1") // A single `\t` removed from the beginning.
)
},
/**
* Duplication of the current or selected lines.
*
* @param {JSON} properties
* @returns {string}
*/
applyDuplication: function (properties) {
// With selection.
// Do not replace with variables. This
// feature is optimised for swift response.
if (properties.start !== properties.end)
return (
properties.value.substring( // Text preceding the selected area.
0,
properties.start
) +
properties.value.substring( // Selected area
properties.start,
properties.end
) +
(
~properties.value // First character before the cursor is linebreak?
.charAt(properties.start - 1)
.indexOf('\n') || // --> or
~properties.value // Character on the cursor is linebreak?
.charAt(properties.start)
.indexOf('\n') ? '\n' : '' // If either, add linebreak, otherwise add nothing.
) +
properties.value.substring( // Selected area (again for duplication).
properties.start,
properties.end
) +
properties.value.substring(properties.end) // Text succeeding the selected area.
);
// Without selection.
let pattern: RegExp = // Separate lines up to the end of the current line.
new RegExp(`(?:.|\n){0,160}(^.*$)`, 'm'),
line: string = '';
// Add anything found to the `line`. Note that
// `replace` is used a simple hack; it functions
// in a similar way to `regex.search` in Python.
properties.value
.replace(pattern, (match, p1) => line += p1);
return properties.value
.replace(
line, // Existing line.
`${line}\n${line}` // Doubled ... magic!
)
},
},
/**
* Mapping of hotkeys from keyboard events to their corresponding functions.
*
* @param {KeyboardEvent} event
* @returns {Function | Boolean}
*/
hub: function (event: KeyboardEvent): Function | false {
switch (event.key) {
case this.keys.TAB: // Tab.
// Shift pressed: un-indent, otherwise indent.
return event.shiftKey ? this.handlers.removeTab : this.handlers.applyTab;
case this.keys.DUPLICATE: // Line duplication.
// Is CTRL or CMD (on Mac) pressed?
return (event.ctrlKey || event.metaKey) ? this.handlers.applyDuplication : false;
case this.keys.INDENT: // Indentation.
// Is CTRL or CMD (on Mac) pressed?
return (event.ctrlKey || event.metaKey) ? this.handlers.applyIndentation : false;
case this.keys.UNINDENT: // Unindentation.
// Is CTRL or CMD (on Mac) pressed?
return (event.ctrlKey || event.metaKey) ? this.handlers.removeIndentation : false;
default:
// default would prevent the
// inhibition of default settings.
return false
}
}
};
/**
* Get either the height of an element as defined in style/CSS or its browser-computed height.
*
* @param {HTMLElement} element
* @returns {number}
*/
function getHeight (element: HTMLElement): number {
return Math.max( // Maximum of computed or set heights.
parseInt(window.getComputedStyle(element).height), // Height is not set in styles.
(parseInt(element.style.height) || 0) // Property's own height if set, otherwise 0.
)
}
/**
* Update the height of an element based on its scroll height.
*
* @param {HTMLTextAreaElement} editor
* @returns {HTMLTextAreaElement}
*/
function updateHeight(editor: HTMLTextAreaElement): HTMLTextAreaElement {
// Ensure that the editor is resizable before anything else.
// Change size if scroll is larger that height, otherwise do nothing.
editor.style.height = `${editor.scrollHeight + parseInt(getComputedStyle(editor).borderTop) + parseInt(getComputedStyle(editor).borderBottom)}px`;
return editor
}
/**
* @example
*
* let element = document.getElementsByClassName('markdownx');
*
* new MarkdownX(
* element,
* element.querySelector('.markdownx-editor'),
* element.querySelector('.markdownx-preview')
* )
*
* @param {HTMLElement} parent - Markdown editor element.
* @param {HTMLTextAreaElement} editor - Markdown editor element.
* @param {HTMLElement} preview - Markdown preview element.
*/
const MarkdownX = function (parent: HTMLElement, editor: HTMLTextAreaElement, preview: HTMLElement): void {
/**
* MarkdownX properties.
*/
const properties: MarkdownxProperties = {
editor: editor,
preview: preview,
parent: parent,
_latency: null,
_editorIsResizable: null
};
/**
* Initialisation settings (mounting events, retrieval of initial data,
* setting animation properties, latency, timeout, and resizability).
*
* @private
*/
const _initialize = () => {
this.timeout = null;
// Events
// ----------------------------------------------------------------------------------------------
let documentListeners = {
object: document,
listeners: [
{ type: "drop" , capture: false, listener: EventHandlers.inhibitDefault },
{ type: "dragover" , capture: false, listener: EventHandlers.inhibitDefault },
{ type: "dragenter", capture: false, listener: EventHandlers.inhibitDefault },
{ type: "dragleave", capture: false, listener: EventHandlers.inhibitDefault }
]
},
editorListeners = {
object: properties.editor,
listeners: [
{ type: "paste", capture: false, listener: onPaste },
{ type: "drop", capture: false, listener: onDrop },
{ type: "input", capture: true , listener: inputChanged },
{ type: "keydown", capture: true , listener: onKeyDown },
{ type: "focusin", capture: true , listener: inputChanged },
{ type: "dragover", capture: false, listener: EventHandlers.onDragEnter },
{ type: "dragenter", capture: false, listener: EventHandlers.onDragEnter },
{ type: "dragleave", capture: false, listener: EventHandlers.inhibitDefault },
{ type: "compositionstart", capture: true , listener: onKeyDown }
]
};
// Initialise
// --------------------------------------------------------
// Mounting the defined events.
mountEvents(editorListeners, documentListeners);
properties.editor.setAttribute('data-markdownx-init', '');
// Set animation for image uploads lock down.
properties.editor.style.transition = "opacity 1s ease";
properties.editor.style.webkitTransition = "opacity 1s ease";
// Upload latency - must be a value >= 500 microseconds.
properties._latency =
Math.max(parseInt(properties.editor.getAttribute(LATENCY_ATTRIBUTE)) || 0, LATENCY_MINIMUM);
// If `true`, the editor will expand to scrollHeight when needed.
properties._editorIsResizable = (
(properties.editor.getAttribute(RESIZABILITY_ATTRIBUTE).match(/true/i) || []).length > 0 &&
properties.editor.offsetHeight > 0 &&
properties.editor.offsetWidth > 0
);
getMarkdown();
triggerCustomEvent("markdownx.init");
};
/**
* settings for `timeout`.
*
* @private
*/
const _markdownify = (): void => {
clearTimeout(this.timeout);
this.timeout = setTimeout(getMarkdown, properties._latency)
};
/**
* Handling changes in the editor.
*/
const inputChanged = (): void => {
properties.editor = properties._editorIsResizable ?
updateHeight(properties.editor) : properties.editor;
return _markdownify()
};
/**
* Handling of paste event.
*
* @param {ClipboardEvent} event
*/
const onPaste = (event: ClipboardEvent): void => {
if (event.clipboardData && event.clipboardData.files.length) {
Object.keys(event.clipboardData.files).map(fileKey =>
sendFile(event.clipboardData.files[fileKey])
);
EventHandlers.inhibitDefault(event);
}
};
/**
* Handling of drop events (when a file is dropped into `properties.editor`).
*
* @param {DragEvent} event
*/
const onDrop = (event: DragEvent): void => {
if (event.dataTransfer && event.dataTransfer.files.length)
Object.keys(event.dataTransfer.files).map(fileKey =>
sendFile(event.dataTransfer.files[fileKey])
);
EventHandlers.inhibitDefault(event);
};
/**
* Handling of keyboard events (i.e. primarily hotkeys).
*
* @param {KeyboardEvent} event
* @returns {Boolean | null}
*/
const onKeyDown = (event: KeyboardEvent): Boolean | null => {
const handlerFunc: Function | Boolean = keyboardEvents.hub(event);
if (typeof handlerFunc != 'function') return false;
EventHandlers.inhibitDefault(event);
// Holding the start location before anything changes.
const SELECTION_START: number = properties.editor.selectionStart;
properties.editor.value = handlerFunc({
start: properties.editor.selectionStart,
end: properties.editor.selectionEnd,
value: properties.editor.value
});
_markdownify();
properties.editor.focus();
// Set the cursor location.
switch (event.key) {
case keyboardEvents.keys.TAB: // Tab.
if (event.shiftKey) {
properties.editor.selectionEnd = properties.editor.selectionStart = SELECTION_START - 1
}
else {
properties.editor.selectionEnd = properties.editor.selectionStart = SELECTION_START + 1
}
break
case keyboardEvents.keys.INDENT: // Indentation.
properties.editor.selectionEnd = properties.editor.selectionStart = SELECTION_START + 1
break
case keyboardEvents.keys.UNINDENT: // Unindentation.
properties.editor.selectionEnd = properties.editor.selectionStart = SELECTION_START - 1
break
default:
properties.editor.selectionEnd = properties.editor.selectionStart = SELECTION_START
}
return false
};
/**
* Uploading the `file` onto the server through an AJAX request.
*
* @param {File} file
*/
const sendFile = (file: File) => {
properties.editor.style.opacity = UPLOAD_START_OPACITY;
const xhr = new Request(
properties.editor.getAttribute(UPLOAD_URL_ATTRIBUTE), // URL
preparePostData({image: file}) // Data
);
xhr.success = (resp: string): void | null => {
const response: ImageUploadResponse = JSON.parse(resp);
if (response.image_code) {
insertImage(response.image_code);
triggerCustomEvent('markdownx.fileUploadEnd', properties.parent, [response])
} else if (response.image_path) {
// ToDo: Deprecate.
insertImage(`![]("${response.image_path}")`);
triggerCustomEvent('markdownx.fileUploadEnd', properties.parent, [response])
} else {
console.error(XHR_RESPONSE_ERROR, response);
triggerCustomEvent('markdownx.fileUploadError', properties.parent, [response]);
insertImage(XHR_RESPONSE_ERROR);
}
properties.editor.style.opacity = NORMAL_OPACITY;
};
xhr.error = (response: any): void => {
console.error(response);
triggerCustomEvent('fileUploadError', properties.parent, [response]);
insertImage(XHR_RESPONSE_ERROR);
properties.editor.style.opacity = NORMAL_OPACITY;
};
return xhr.send()
};
/**
* 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 display in `properties.preview`.
*/
const getMarkdown = () => {
const xhr = new Request(
properties.editor.getAttribute(PROCESSING_URL_ATTRIBUTE), // URL
preparePostData({content: properties.editor.value}) // Data
);
xhr.success = (response: string): void => {
properties.preview.innerHTML = response;
properties.editor = properties._editorIsResizable ?
updateHeight(properties.editor) : properties.editor;
triggerCustomEvent('markdownx.update', properties.parent, [response])
};
xhr.error = (response: any): void => {
console.error(response);
triggerCustomEvent('markdownx.updateError', properties.parent, [response])
};
return xhr.send()
};
/**
* Inserts markdown encoded image URL into `properties.editor` where
* the cursor is located.
*
* @param textToInsert
*/
const insertImage = (textToInsert: string): void => {
properties.editor.value =
`${properties.editor.value.substring(0, properties.editor.selectionStart)}` + // Preceding text.
textToInsert +
`${properties.editor.value.substring(properties.editor.selectionEnd)}`; // Succeeding text.
properties.editor.selectionStart =
properties.editor.selectionEnd =
properties.editor.selectionStart + textToInsert.length;
triggerEvent(properties.editor, 'keyup');
inputChanged();
};
_initialize();
};
(function(funcName: any, baseObj: any) {
// The public function name defaults to window.docReady
// but you can pass in your own object and own function
// name and those will be used.
// if you want to put them in a different namespace
funcName = funcName || "docReady";
baseObj = baseObj || window;
let readyList = [],
readyFired = false,
readyEventHandlersInstalled = false;
/**
* Called when the document is ready. This function protects itself
* against being called more than once.
*/
const ready = () => {
if (!readyFired) {
// Must be `true` before the callbacks are called.
readyFired = true;
// if a callback here happens to add new ready handlers,
// the docReady() function will see that it already fired
// and will schedule the callback to run right after
// this event loop finishes so all handlers will still execute
// in order and no new ones will be added to the readyList
// while we are processing the list
readyList.map(ready => ready.fn.call(window, ready.ctx));
// allow any closures held by these functions to free
readyList = [];
}
};
const readyStateChange = () => document.readyState === "complete" ? ready() : null;
// This is the one public interface
// docReady(fn, context);
// the context argument is optional - if present, it will be passed
// as an argument to the callback
baseObj[funcName] = (callback, context) => {
// if ready has already fired, then just schedule the callback
// to fire asynchronously, but right away
if (readyFired) {
setTimeout(() => callback(context), 1);
return;
} else {
// add the function and context to the list
readyList.push({fn: callback, ctx: context});
}
// If the document is already ready, schedule the ready
// function to run.
if (document.readyState === "complete") {
setTimeout(ready, 1);
} else if (!readyEventHandlersInstalled) {
// otherwise if we don't have event handlers installed,
// install them first choice is DOMContentLoaded event.
document.addEventListener("DOMContentLoaded", ready, false);
// backup is window load event
window.addEventListener("load", ready, false);
readyEventHandlersInstalled = true;
}
}
})("docReady", window);
docReady(() => {
const ELEMENTS = document.getElementsByClassName('markdownx');
return Object.keys(ELEMENTS).map(key => {
let element = ELEMENTS[key],
editor = element.querySelector('.markdownx-editor'),
preview = element.querySelector('.markdownx-preview');
// Only add the new MarkdownX instance to fields that have no MarkdownX instance yet.
if (!editor.hasAttribute('data-markdownx-init'))
return new MarkdownX(element, editor, preview)
});
});
export {
MarkdownX
};
================================================
FILE: static-src/markdownx/js/tsconfig.json
================================================
{
"compilerOptions": {
"moduleResolution": "node",
"inlineSourceMap": false,
"inlineSources": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"preserveConstEnums": true,
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"pretty": true,
"noLib": false,
"emitBOM": true,
"allowJs": true
},
"declaration": true,
"files": [
"markdownx.ts"
]
}
================================================
FILE: static-src/markdownx/js/utils.ts
================================================
"use strict";
interface EventListener {
object: Element | Document,
listeners: {
type: string,
listener: any,
capture: boolean,
} []
}
export interface RequestBase {
url: string;
data: FormData;
progress(event: any): any;
error(response: string): any;
success(response: string): any;
send(): void;
}
/**
* Looks for a cookie, and if found, returns the values.
*
* @param {string} name - The name of the cookie.
* @returns {string | null}
*/
export function getCookie (name: string): string | null {
if (document.cookie && document.cookie.length) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) {
try {
return decodeURIComponent(parts.pop().split(';').shift());
}
catch (e) {
if (e instanceof TypeError) {
console.info("No cookie with key \"" + name + "\". Wrong name?");
return null;
}
throw e;
}
}
}
return null;
}
/**
* @example
*
*
* @param rows
* @returns
*/
export function zip (...rows: any[]) {
if (rows[0].constructor == Array)
return [...rows[0]].map((_, c) => rows.map(row => row[c]));
// ToDo: To be updated to Objects.values in ECMA2017 after the method is fully ratified.
const asArray = rows.map(row => Object.keys(row).map(key => row[key]));
return [...asArray[0]].map((_, c) => asArray.map(row => row[c]));
}
/**
*
* @param collections
* @returns
*/
export function mountEvents (...collections: EventListener[]): any[] {
return collections.map(events =>
events.listeners
.map(series =>
events.object
.addEventListener(
series.type,
series.listener,
series.capture
)
)
)
}
/**
*
* @param {JSON} data
* @param {Boolean} csrf
* @returns {FormData}
*/
export function preparePostData(data: Object, csrf: Boolean=true) {
let form: FormData = new FormData();
if (csrf) {
let csrfToken = getCookie('csrftoken');
if (!csrfToken) csrfToken = (