Add SimpleMDEField

README.md

@@ -115,6 +115,7 @@ Access your admin interface in your browser at [http://localhost:8000/admin](htt
 - [jsoneditor](https://github.com/josdejong/jsoneditor)
 - [fontawesome](https://fontawesome.com/)
 - [TinyMCE](https://www.tiny.cloud/)
+- [SimpleMDE](https://simplemde.com/)
 
 ## Contributing
 

docs/api/fields/index.md

@@ -10,6 +10,7 @@
               - StringField
               - TextAreaField
               - TinyMCEEditorField
+              - SimpleMDEField
               - TagsField
               - EmailField
               - URLField

starlette_admin/__init__.py

@@ -31,6 +31,7 @@
 from .fields import PasswordField as PasswordField
 from .fields import PhoneField as PhoneField
 from .fields import RelationField as RelationField
+from .fields import SimpleMDEField as SimpleMDEField
 from .fields import StringField as StringField
 from .fields import TagsField as TagsField
 from .fields import TextAreaField as TextAreaField

starlette_admin/fields.py

@@ -320,6 +320,70 @@ def input_params(self) -> str:
         )
 
 
+@dataclass
+class SimpleMDEField(TextAreaField):
+    """A field that provides a Markdown editor for long text content using the
+    [SimpleMDE](https://simplemde.com/) library.
+
+    This field can be used as an alternative to the [TextAreaField][starlette_admin.fields.TextAreaField]
+    to provide a more sophisticated editor for user input.
+
+    Parameters:
+        version: SimpleMDE version
+        spell_checker: Enable spell checker
+        status: Show status bar at the bottom
+        hide_icons: Hide icons from toolbar
+        autofocus: Enable autofocus
+        extra_options: Other options to pass to SimpleMDE
+    """
+
+    class_: str = "field-simplemde form-control"
+    display_template: str = "displays/tinymce.html"
+    version: str = "1.11.2"
+    placeholder: str = ""
+    spell_checker: bool = False
+    status: bool = False
+    hide_icons: List[str] = dc_field(default_factory=list)
+    autofocus: bool = True
+    extra_options: Dict[str, Any] = dc_field(default_factory=dict)
+    """For more options, see the [SimpleMDE](https://simplemde.com/)"""
+
+    def __post_init__(self) -> None:
+        super().__post_init__()
+
+    def additional_js_links(self, request: Request, action: RequestAction) -> List[str]:
+        if action.is_form():
+            return [
+                f"https://cdn.jsdelivr.net/npm/simplemde@{self.version}/dist/simplemde.min.js",
+            ]
+        return []
+
+    def additional_css_links(
+        self, request: Request, action: RequestAction
+    ) -> List[str]:
+        if action.is_form():
+            return [
+                f"https://cdn.jsdelivr.net/npm/simplemde@{self.version}/dist/simplemde.min.css",
+            ]
+        return []
+
+    def input_params(self) -> str:
+        _options = {
+            "placeholder": self.placeholder,
+            "spellChecker": self.spell_checker,
+            "status": self.status,
+            "hideIcons": self.hide_icons,
+            "autofocus": self.autofocus,
+            **self.extra_options,
+        }
+
+        return (
+            super().input_params()
+            + " "
+            + html_params({"data-options": json.dumps(_options)})
+        )
+
+
 @dataclass
 class NumberField(StringField):
     """This field is used to represent the value of properties

starlette_admin/statics/js/form.js

@@ -224,4 +224,19 @@ registerFieldInitializer(function (element) {
   });
 
   // end TinyMCEEditorField integration
+
+  // SimpleMDEField integration
+
+  $(".field-simplemde", element).each(function(){
+    let options = $(this).data("options");
+    new SimpleMDE({
+      element: this,
+      ...options
+    });
+  });
+
+  // end SimpleMDEField integration
+
+  }
+
 });