added bootstrap template

Author: agusmakmun

martor/settings.py

@@ -1,17 +1,19 @@
 from django.conf import settings
 
+MARTOR_THEME = getattr(settings, 'MARTOR_THEME', 'bootstrap')
+
 # Global martor settings
 # Input: string boolean, `true/false`
 MARTOR_ENABLE_CONFIGS = getattr(
     settings, 'MARTOR_ENABLE_CONFIGS', {
+        'theme': 'bootstrap',   # to select theme
         'emoji': 'true',        # to enable/disable emoji icons.
         'imgur': 'true',        # to enable/disable imgur/custom uploader.
         'mention': 'false',     # to enable/disable mention
         'jquery': 'true',       # to include/revoke jquery (require for admin default django)
         'living': 'false',      # to enable/disable live updates in preview
         'spellcheck': 'false',  # to enable/disable spellcheck in form textareas
         'hljs': 'true',         # to enable/disable hljs highlighting in preview
-        'semantic': 'true',    # to enable/disable using packaged semantic version
     }
 )
 
@@ -91,10 +93,13 @@
 MARTOR_MARKDOWN_BASE_EMOJI_URL = getattr(
     settings, 'MARTOR_MARKDOWN_BASE_EMOJI_URL', 'https://github.githubassets.com/images/icons/emoji/'
 )
+
 # to use static and keep backward compatibility
 # set to true if using bucket like storage engine
 MARTOR_MARKDOWN_BASE_EMOJI_USE_STATIC = getattr(
-    settings, 'MARTOR_MARKDOWN_BASE_EMOJI_USE_STATIC', False)
+    settings, 'MARTOR_MARKDOWN_BASE_EMOJI_USE_STATIC', False
+)
+
 MARTOR_MARKDOWN_BASE_MENTION_URL = getattr(
     settings, 'MARTOR_MARKDOWN_BASE_MENTION_URL', 'https://python.web.id/author/'
 )

martor/static/martor/css/martor.bootstrap.css

@@ -0,0 +1,30 @@
+body.overflow {
+  overflow: hidden!important;
+}
+
+.main-martor .modal-header {
+  padding: 10px 1rem;
+}
+.main-martor .modal-header h5 {
+  font-size: 16px;
+}
+
+.martor-toolbar {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.table.markdown-reference {
+  font-size: 12px;
+}
+.table.markdown-reference h1 {
+  font-size: 2em;
+}
+.table.markdown-reference h2 {
+  font-size: 1.5em;
+}
+.table.markdown-reference ul,
+.table.markdown-reference ol {
+  padding-left: 1rem!important;
+}

martor/static/martor/js/martor.bootstrap.js

@@ -0,0 +1,33 @@
+{% load i18n %}
+
+
+<div class="main-martor main-martor-{{ field_name }}" data-field-name="{{ field_name }}">
+  <nav style="position:relative">
+    <div class="nav nav-tabs" id="nav-tab" role="tablist">
+      <a class="nav-link active" id="nav-editor-tab" data-toggle="tab" href="#nav-editor" role="tab" aria-controls="nav-editor" aria-selected="true">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
+          <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
+        </svg>
+        <span>{% trans "Editor" %}</span>
+      </a>
+      <a class="nav-link" id="nav-preview-tab" data-toggle="tab" href="#nav-preview" role="tab" aria-controls="nav-preview" aria-selected="false">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
+          <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
+        </svg>
+        <span>{% trans "Preview" %}</span>
+      </a>
+
+      {% include "martor/bootstrap/toolbar.html" %}
+    </div>
+  </nav>
+
+  <div class="tab-content" id="nav-tabContent">
+    <div class="tab-pane fade show active" id="nav-editor" role="tabpanel" aria-labelledby="nav-editor-tab">...</div>
+    <div class="tab-pane fade" id="nav-preview" role="tabpanel" aria-labelledby="nav-preview-tab">...</div>
+  </div>
+
+  {% include 'martor/bootstrap/guide.html' %}
+  {% include 'martor/bootstrap/emoji.html' %}
+</div>

martor/static/plugins/css/bootstrap.min.css

@@ -0,0 +1,29 @@
+{% load i18n %}
+
+<div class="modal fade modal-emoji" id="modalInsertEmoji" tabindex="-1" aria-labelledby="modalInsertEmojiTitle" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content emoji-content-base">
+      <div class="modal-header">
+        <h5 class="modal-title" id="modalInsertEmojiTitle">
+          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-info-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+            <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
+            <circle cx="8" cy="4.5" r="1"/>
+          </svg>
+          <span>{% trans "Select Emoji to Insert" %}</span>
+        </h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body emoji-content-body">
+        <div class="text-center emoji-loader-init">
+          <div class="spinner-border" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+          <div>{% trans "Preparing emojis..." %}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>