replace resizable by css resize

.github/workflows/run-tests.yml

@@ -11,39 +11,15 @@ on:
 # https://docs.djangoproject.com/en/dev/faq/install/#what-python-version-can-i-use-with-django
 jobs:
   build:
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        os: [ macos-latest, ubuntu-latest ]
-        python-version: [ 3.9, "3.10" ]
-        django-version: [ 3.2, 4.0, 4.1, 4.2 ]
+        python-version: [ "3.10", "3.11", "3.12" , "3.13"]
+        django-version: [ "5.0", "5.1" ]
         include:
-          - os: macos-latest
-            python-version: "3.8"
-            django-version: "3.2"
-          - os: ubuntu-latest
-            python-version: "3.8"
-            django-version: "3.2"
-          - os: macos-latest
-            python-version: "3.8"
-            django-version: "4.0"
-          - os: ubuntu-latest
-            python-version: "3.8"
-            django-version: "4.0"
-          - os: macos-latest
-            python-version: "3.10"
-            django-version: "5.0"
-          - os: ubuntu-latest
-            python-version: "3.10"
-            django-version: "5.0"
-          - os: macos-latest
-            python-version: "3.10"
-            django-version: "5.0.3"
-          - os: ubuntu-latest
-            python-version: "3.10"
-            django-version: "5.0.3"
-
+          - python-version: "3.9"
+            django-version: "4.2"
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -55,8 +31,8 @@ jobs:
 
       - name: Install dependencies
         run: |
-          pip install -q Django==${{ matrix.django-version }}
-          python -m pip install --upgrade pip
+          pip install -U pip setuptools 
+          pip install -q django==${{ matrix.django-version }}
           python setup.py install
 
       - name: Test with pytest

README.md

@@ -300,7 +300,6 @@ Different with *Template Renderer*, the *Template Editor Form* have more css & j
 
 {% block css %}
   <link href="{% static 'plugins/css/ace.min.css' %}" type="text/css" media="all" rel="stylesheet" />
-  <link href="{% static 'plugins/css/resizable.min.css' %}" type="text/css" media="all" rel="stylesheet" />
   <link href="{% static 'martor/css/martor.bootstrap.min.css' %}" type="text/css" media="all" rel="stylesheet" />
 {% endblock %}
 
@@ -328,7 +327,6 @@ Different with *Template Renderer*, the *Template Editor Form* have more css & j
   <script type="text/javascript" src="{% static 'plugins/js/typo.js' %}"></script>
   <script type="text/javascript" src="{% static 'plugins/js/spellcheck.js' %}"></script>
   <script type="text/javascript" src="{% static 'plugins/js/highlight.min.js' %}"></script>
-  <script type="text/javascript" src="{% static 'plugins/js/resizable.min.js' %}"></script>
   <script type="text/javascript" src="{% static 'plugins/js/emojis.min.js' %}"></script>
   <script type="text/javascript" src="{% static 'martor/js/martor.bootstrap.min.js' %}"></script>
 {% endblock %}

martor/static/martor/css/martor-admin.css

@@ -127,6 +127,11 @@ fieldset .form-row .main-martor {
   display: revert;
 }
 
+/* fix issue: #270 */
+table {
+  caption-side: top;
+}
+
 /* fix issue: #168 */
 @media (prefers-color-scheme: dark) {
   body {

martor/static/martor/css/martor-admin.min.css

@@ -129,6 +129,10 @@ fieldset .form-row .main-martor {
     display: revert
 }
 
+table {
+    caption-side: top;
+}
+
 @media (prefers-color-scheme:dark) {
     body {
         color: #fff;

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

@@ -10,6 +10,9 @@ body.overflow {
   width: 100%;
   height: 250px;
   min-height: 100px;
+  resize: vertical;
+  border-right: 1px solid rgb(204, 204, 204);
+  border-bottom: 1px solid rgb(204, 204, 204);
 }
 .main-martor {
   margin: 1em 0;

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

@@ -18,7 +18,10 @@ body.overflow {
 .martor-field {
     width: 100%;
     height: 250px;
-    min-height: 100px
+    min-height: 100px;
+    resize: vertical;
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc
 }
 
 .main-martor {

martor/static/martor/css/martor.semantic.css

@@ -226,6 +226,9 @@ div.martor-preview pre tt{margin:0;padding:0;background-color:transparent;border
   width: 100%;
   height: 250px;
   min-height: 100px;
+  resize: vertical;
+  border-right: 1px solid rgb(204, 204, 204);
+  border-bottom: 1px solid rgb(204, 204, 204);
 }
 
 div.martor-preview {

martor/static/martor/css/martor.semantic.min.css

@@ -37,7 +37,8 @@ body.overflow {
 }
 
 .martor-toolbar {
-    padding: 0 0.85714286em !important4px !important !important
+    padding: 0 0.85714286em !important;
+    padding-bottom: 4px!important
 }
 
 .martor-toolbar .ui.icon .markdown-image-upload {
@@ -499,7 +500,10 @@ div.martor-preview pre tt {
 .martor-field {
     width: 100%;
     height: 250px;
-    min-height: 100px
+    min-height: 100px;
+    resize: vertical;
+    border-right: 1px solid rgb(204, 204, 204);
+    border-bottom: 1px solid rgb(204, 204, 204)
 }
 
 div.martor-preview {

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

@@ -136,14 +136,6 @@
                 textareaId.val(value);
             });
 
-            // resize the editor using `resizable.min.js`
-            $('#' + editorId).resizable({
-                direction: 'bottom',
-                stop: function () {
-                    editor.resize();
-                }
-            });
-
             // update the preview if this menu is clicked
             var currentTab = $('.tab-pane#nav-preview-' + field_name);
             var editorTabButton = $('.nav-link#nav-editor-tab-' + field_name);

martor/static/martor/js/martor.semantic.js

@@ -136,14 +136,6 @@
                 textareaId.val(value);
             });
 
-            // resize the editor using `resizable.min.js`
-            $('#' + editorId).resizable({
-                direction: 'bottom',
-                stop: function () {
-                    editor.resize();
-                }
-            });
-
             // update the preview if this menu is clicked
             var currentTab = $('.tab.segment[data-tab=preview-tab-' + field_name + ']');
             var previewTabButton = $('.item[data-tab=preview-tab-' + field_name + ']');