Small refactor; improve modal style for smaller screen sizes; control…

… modal size with hooks/attributers

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name = wagtail_fedit
-version = 1.5.0
+version = 1.5.1a0
 description = Frontend editing for your Wagtail site
 long_description = file: README.md
 long_description_content_type = text/markdown

wagtail_fedit/adapters/base.py

@@ -32,6 +32,10 @@ def content_id_from_parts(*parts: Any) -> str:
 
 
 
+class VARIABLES:
+    PY_SIZE_VAR = "editor_size"
+    FORM_SIZE_VAR = "data-editor-size"
+
 
 class PickleBlockSerializer:
     """
@@ -76,6 +80,9 @@ def check_permissions(self):
     def get_element_id(self) -> str:
         raise NotImplementedError
 
+    def get_form_attrs(self) -> dict:
+        return {}
+
     def get_form(self) -> "forms.Form":
         raise NotImplementedError
 

wagtail_fedit/adapters/block.py

@@ -16,6 +16,7 @@
 from .base import (
     BaseAdapter,
     AdapterError,
+    VARIABLES,
 )
 from ..forms import (
     blocks as block_forms,
@@ -66,6 +67,16 @@ def get_header_title(self):
 
     def get_element_id(self) -> str:
         return f"block-{self.kwargs['block_id']}-section"
+
+    def get_form_attrs(self) -> dict:
+
+        size = getattr(self.block.block.meta, VARIABLES.PY_SIZE_VAR, None)
+        if size:
+            return super().get_form_attrs() | {
+                VARIABLES.FORM_SIZE_VAR: size,
+            }
+
+        return {}
 
     def get_form(self):
 

wagtail_fedit/adapters/field.py

@@ -7,8 +7,15 @@
 
 from wagtail.log_actions import log
 from wagtail.models import RevisionMixin
+from wagtail import hooks
 
-from .base import BaseAdapter
+from .base import (
+    BaseAdapter,
+    VARIABLES,
+)
+from ..hooks import (
+    FIELD_EDITOR_SIZE,
+)
 from ..utils import (
     use_related_form,
     model_diff,
@@ -113,7 +120,30 @@ def get_help_text(self):
     def get_element_id(self) -> str:
         m = self.model
         return f"field-{self.field_name}-{m._meta.app_label}-{m._meta.model_name}-{self.object.pk}"
-
+
+    def get_form_attrs(self) -> dict:
+        attrs = super().get_form_attrs()
+
+        size = getattr(self.object, f"{VARIABLES.PY_SIZE_VAR}_{self.field_name}", None)
+        if not size:
+
+            for hook in hooks.get_hooks(FIELD_EDITOR_SIZE):
+                size = hook(self.object, self.meta_field)
+                if size:
+                    break
+
+        if not size \
+          and self.meta_field.is_relation \
+          and use_related_form(self.meta_field):
+            size = "full"
+
+        if size:
+            return attrs | {
+                VARIABLES.FORM_SIZE_VAR: size,
+            }
+
+        return attrs
+
     def get_form(self):
         if self.request.method == "POST":
             form = self.form_class(self.request.POST, request=self.request, instance=self.object)

wagtail_fedit/hooks.py

@@ -5,6 +5,7 @@ def prefix(name):
     return f"wagtail_fedit.{name}"
 
 
+
 CONSTRUCT_ADAPTER_TOOLBAR = prefix("construct_adapter_toolbar")
 """
 ### wagtail_fedit.construct_adapter_toolbar
@@ -53,6 +54,22 @@ def register_renderers(renderer_map):
 """
 
 
+FIELD_EDITOR_SIZE = prefix("field_editor_size")
+"""
+### wagtail_fedit.field_editor_size
+Control the size of the editor for the given model-field type.
+
+Example of how this hook is called:
+    
+    ```python
+    for hook in hooks.get_hooks(FEDIT_FIELD_EDITOR_SIZE):
+        size = hook(model_instance, model_field)
+        if size:
+            return size
+    ```
+"""
+
+
 EXCLUDE_FROM_RELATED_FORMS = prefix("exclude_related_forms")
 """
 ### wagtail_fedit.exclude_related_forms

wagtail_fedit/static/wagtail_fedit/css/frontend.css

@@ -23,7 +23,7 @@ html, body {
     pointer-events: none;
     z-index: 300;
 }
-.wagtail-fedit-adapter-wrapper.wagtail-fedit-field:has(.wagtail-fedit-adapter) > .wagtail-fedit-buttons {
+.wagtail-fedit-adapter-wrapper.wagtail-fedit-field:has(.wagtail-fedit-adapter-wrapper) > .wagtail-fedit-buttons {
     right: 30px;
 }
 .wagtail-fedit-buttons {
@@ -103,12 +103,6 @@ body:has(.wagtail-fedit-modal) {
     z-index: 400;
     overflow: auto;
 }
-.wagtail-fedit-modal-wrapper .wagtail-fedit-modal.fedit-full {
-    height: 100%;
-    width: 100%;
-    /* max-width: unset; */
-    /* max-height: unset; */
-}
 .wagtail-fedit-modal-wrapper .wagtail-fedit-modal {
     position: relative;
     min-width: max(60dvw, 15rem);
@@ -126,10 +120,48 @@ body:has(.wagtail-fedit-modal) {
     overflow: hidden;
     display: flex;
 }
-.wagtail-fedit-modal-wrapper .wagtail-fedit-modal:not(.fedit-full) {
-    margin-top: -5%;
+.wagtail-fedit-modal-wrapper:has(.wagtail-fedit-modal.fedit-full) {
+    z-index: 9999;
+}
+.wagtail-fedit-modal-wrapper .wagtail-fedit-modal.fedit-full {
+    height: 100%;
+    width: 100%;
+    max-width: unset;
+    max-height: unset;
+}
+.wagtail-fedit-modal-wrapper .wagtail-fedit-modal.fedit-large {
+    height: 100%;
+    width: 100%;
+}
+@media (min-width: 768px) {
+    .wagtail-fedit-modal-wrapper .wagtail-fedit-modal:not(.fedit-large, .fedit-full) {
+        margin-top: -5%;
+    }
+}
+@media (max-width: 1400px) {
+    .wagtail-fedit-modal-wrapper {
+        z-index: 9999;
+    }
+    .wagtail-fedit-modal-wrapper .wagtail-fedit-modal {
+        max-width: 80%;
+        max-height: 80%;
+        width: 100%;
+        height: 100%;
+    }
+}
+@media (max-width: 1100px) {
+    .wagtail-fedit-modal-wrapper .wagtail-fedit-modal {
+        max-width: 90%;
+        max-height: 90%;
+    }
+}
+@media (max-width: 768px) {
+    .wagtail-fedit-modal-wrapper .wagtail-fedit-modal {
+        margin: 0;
+        max-width: 100%;
+        max-height: 100%;
+    }
 }
-
 .wagtail-fedit-modal-wrapper iframe {
     width: 100%;
     height: 100%;

wagtail_fedit/static/wagtail_fedit/js/frontend.js

@@ -210,14 +210,16 @@ class WagtailFeditEditor {
                 // Check if we need to apply the fedit-full class to the modal
                 const formHeight = this.iframe.formElement.getBoundingClientRect().height;
                 const formWrapper = this.iframe.formWrapper;
-                if (
-                    (formWrapper && (
-                        formWrapper.classList.contains("fedit-full") ||
-                        (this.iframe.formElement.dataset.isRelation || "").toLowerCase() === "true"
-                    )) ||
-                    (formHeight > window.innerHeight)
-                ) {
-                    this.modal.classList.add("fedit-full");
+                const options = ["large", "full"]
+
+                for (const option of options) {
+                    if (formWrapper && (
+                        formWrapper.classList.contains(`fedit-${option}`) ||
+                        (this.iframe.formElement.dataset.editorSize || "").toLowerCase() === option
+                    )) {
+                        this.modal.classList.add(`fedit-${option}`);
+                        break;
+                    }
                 }
 
                 const url = window.location.href.split("#")[0];

wagtail_fedit/test/core/tests/test_adapters.py

@@ -21,8 +21,6 @@
     BaseFEditTest,
 )
 
-import json
-
 adapters = {}
 
 class TestAdapter(BaseAdapter):
@@ -39,19 +37,18 @@ def get_element_id(self) -> str:
     def render_content(self, parent_context: dict = None) -> str:
         return f"TestAdapter: {self.field_value}"
 
+class TestContextAdapter(TestAdapter):
+    identifier = "test_context"
+
+    def render_content(self, parent_context: dict = None) -> str:
+        return parent_context["testing"]
 
 class TestBlockAdapter(BlockAdapter, TestAdapter):
     identifier = "test_block"
 
 class TestFieldAdapter(FieldAdapter, TestAdapter):
     identifier = "test_field"
 
-class TestContextAdapter(TestAdapter):
-    identifier = "test_context"
-
-    def render_content(self, parent_context: dict = None) -> str:
-        return parent_context["testing"]
-
 adapter_registry.register(TestAdapter)
 adapter_registry.register(TestBlockAdapter)
 adapter_registry.register(TestFieldAdapter)

wagtail_fedit/views/adapters.py

@@ -138,6 +138,7 @@ def get_context_data(self, **kwargs):
             "field_name": self.adapter.field_name,
             "locked_for_user": self.locked_for_user,
             "shared_context": shared_context,
+            "form_attrs": self.adapter.get_form_attrs(),
             "locked": self.lock is not None,
         }
 

wagtail_fedit/wagtail_hooks/__init__.py

@@ -4,5 +4,4 @@
 from .userbar import *
 from .icons import *
 from .log_actions import *
-from .excluded_relations import *
-from .renderers import *
+from .adapter_hooks import *

wagtail_fedit/wagtail_hooks/adapter_hooks.py

@@ -0,0 +1,44 @@
+from wagtail import hooks
+from wagtail.models import Page
+from wagtail.fields import (
+    RichTextField,
+    StreamField,
+)
+from wagtail.templatetags.wagtailcore_tags import (
+    richtext,
+)
+from wagtail.images.models import (
+    Image,
+)
+from wagtail.documents.models import Document
+from ..hooks import (
+    EXCLUDE_FROM_RELATED_FORMS,
+    REGISTER_FIELD_RENDERER,
+    FIELD_EDITOR_SIZE,
+)
+
+@hooks.register(EXCLUDE_FROM_RELATED_FORMS)
+def exclude_related_forms(field):
+    if field.related_model in [Page, Image, Document]:
+        return True
+    return False
+
+
+@hooks.register(REGISTER_FIELD_RENDERER)
+def register_renderers(renderer_map):
+    # This is a custom renderer for RichText fields.
+    # It will render the RichText field as a RichText block.
+    renderer_map[RichTextField] = lambda request, context, instance, value: richtext(value)
+
+
+@hooks.register(FIELD_EDITOR_SIZE)
+def field_editor_size(model_instance, model_field):
+    if isinstance(model_field, RichTextField):
+        return "large"
+
+    if isinstance(model_field, StreamField):
+        return "full"
+
+    return None
+
+