introduce display_class widget property, update docs

Author: lenadax

CHANGES.rst

@@ -4,6 +4,9 @@ Changes
 1.0 (unreleased)
 ----------------
 
+- Introduce ``display_class`` widget property.
+  [lenadax]
+
 - Update jQuery to version ``4.0.0-beta.2``.
   [lenadax]
 

src/yafowil/widget/tiptap/example.py

@@ -144,9 +144,83 @@ def colors_example():
     }
 
 
+DOC_DISPLAY_TIPTAP = """
+Display Mode
+------------
+
+In Display Mode, the widget is not editable and Actions will not be rendered.
+The ``display_class`` widget property can be used to style the div containing the
+widget value.
+
+.. code-block:: python
+
+    tiptap = factory(
+        'tiptap',
+        value=(
+            '<p>'
+              'This widget is in '
+              '<strong style="color: rgb(66,209,245)">display mode</strong>, '
+              'but it will still show <strong>custom formatting</strong>.'
+              '<br />'
+              'Its border was adding with the <strong>display_class</strong> property.'
+            '</p>'
+        ),
+        props={
+            'label': 'Tiptap Widget in display mode',
+            'actions': ['color'],
+            'colors': [
+                {'name': 'Purple', 'color': 'rgb(161,66,245)'},
+                {'name': 'Blue', 'color': 'rgb(66,111,245)'},
+                {'name': 'Turqoise', 'color': 'rgb(66,209,245)'},
+                {'name': 'Green', 'color': 'rgb(105,245,66)'},
+                {'name': 'Yellow', 'color': 'rgb(245,236,66)'},
+                {'name': 'Orange', 'color': 'rgb(245,167,66'},
+                {'name': 'Red', 'color': 'rgb(245,66,66)'}
+            ],
+            'display_class': 'form-control border-2 border-info'
+        },
+        mode='display')
+"""
+
+
+def display_example():
+    part = factory(u'fieldset', name='yafowil.widget.tiptap')
+    part['tiptap'] = factory(
+        'tiptap',
+        value=(
+            '<p>'
+              'This widget is in '
+              '<strong style="color: rgb(66,209,245)">display mode</strong>, '
+              'but it will still show <strong>custom formatting</strong>.'
+              '<br />'
+              'Its border was adding with the <strong>display_class</strong> property.'
+            '</p>'
+        ),
+        props={
+            'label': 'Tiptap Widget in display mode',
+            'actions': ['color'],
+            'colors': [
+                {'name': 'Purple', 'color': 'rgb(161,66,245)'},
+                {'name': 'Blue', 'color': 'rgb(66,111,245)'},
+                {'name': 'Turqoise', 'color': 'rgb(66,209,245)'},
+                {'name': 'Green', 'color': 'rgb(105,245,66)'},
+                {'name': 'Yellow', 'color': 'rgb(245,236,66)'},
+                {'name': 'Orange', 'color': 'rgb(245,167,66'},
+                {'name': 'Red', 'color': 'rgb(245,66,66)'}
+            ],
+            'display_class': 'form-control border-2 border-info'
+        }, mode='display')
+    return {
+        'widget': part,
+        'doc': DOC_DISPLAY_TIPTAP,
+        'title': 'Tiptap Widget in display mode',
+    }
+
+
 def get_example():
     return [
         default_example(),
         actions_example(),
-        colors_example()
+        colors_example(),
+        display_example()
     ]

src/yafowil/widget/tiptap/widget.py

@@ -5,6 +5,7 @@
 from yafowil.common import generic_required_extractor
 from yafowil.datatypes import generic_emptyvalue_extractor
 from yafowil.textarea import textarea_renderer
+from yafowil.utils import attr_value
 from yafowil.utils import cssclasses
 from yafowil.utils import data_attrs_helper
 from yafowil.utils import managedprops
@@ -34,7 +35,10 @@ def tiptap_display_renderer(widget, data):
     value = fetch_value(widget, data)
     if not value:
         value = ''
-    return data.tag('div', value, **{'class': 'display-tiptap'})
+    display_class = attr_value("display_class", widget, data)
+    return data.tag('div', value, **{
+        'class': 'display-tiptap' + f' {display_class}' if display_class is not None else ''
+    })
 
 
 factory.register(