Release 0.16 New field type: custom for custom js field

README.md

@@ -78,6 +78,7 @@ Enjoy !
 |          |                   |
 | -------- | ----------------- |
 | ✅       | A checkbox field  |
+| ✅       | A custom js field  |
 | ☐ | Switch field      |
 | ☐ | Radio field       |
 | ☐ | Slider field      |
@@ -87,6 +88,11 @@ Enjoy !
 
 # Changelog:
 
+### v0.16 - 2024-10-14
+
+-   New field type: `custom` for custom js field with React.createElement
+-   Checkout [/example/app/Blocks/CustomField.php](https://github.com/customberg/customberg-php/blob/main/example/app/Blocks/CustomField.php) for an example with summernote for Backpack V5 (TODO: update to V6)
+
 ### v0.15 - 2024-09-26
 
 -   New field types: `checkbox`, `textarea`, `number`, `email`, `url`

example/app/Blocks/CustomField.php

@@ -0,0 +1,83 @@
+<?php
+
+namespace App\Blocks;
+
+class CustomField
+{
+    public static function render()
+    {
+        return [
+            'name' => 'CustomField',
+            'slug' => 'cb-custom-field',
+            'icon' => 'block-default', // https://developer.wordpress.org/resource/dashicons/
+            'fields' => [
+                [
+                    'name' => 'content',
+                    'label' => 'Content',
+                    'type' => 'custom',
+                    'multilanguage' => true,
+                    'js' => <<<'JS'
+                        const element = React.useRef(null);
+                        const instance = React.useRef(null);
+                        const old = React.useRef(props.activeLang);
+                        const doubleChange = React.useRef();
+                        
+                        function loadLibrary() {
+                            return new Promise((resolve, reject) => {
+                                if ($.fn.summernote) {
+                                    resolve();
+                                } else {
+                                    $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/packages/summernote/dist/summernote-bs4.css'));
+                                    $('head').append($('<style type="text/css"> .note-editor.note-frame .note-status-output, .note-editor.note-airframe .note-status-output { height: auto; } </style>'));
+                                    $.getScript('/packages/summernote/dist/summernote-bs4.min.js', resolve);
+                                }
+                            });
+                        }
+                        
+                        React.useEffect(() => {
+                            var summernoteOptions = {
+                                dialogsInBody: true,
+                                tooltip: false,
+                                callbacks: {
+                                    onChange: function(contents, $editable) {
+                                        if (doubleChange.current) {
+                                            doubleChange.current = null;
+                                            return;
+                                        }
+                                        props.onChange(contents);
+                                    },
+                                },
+                            };
+                            loadLibrary().then(() => {
+                                $(element.current).summernote(summernoteOptions);
+                                instance.current = $(element.current);
+                            });
+                            return () => {
+                                if (instance.current) instance.current.summernote('destroy');
+                            }
+                        }, [element]);
+                        
+                        React.useEffect(() => {
+                            console.log('useeffect old', old.current, 'new', props.activeLang);
+                            if (instance.current && old.current !== props.activeLang) {
+                                let newVal = props.field.multilanguage ? props.value[props.activeLang] : props.value;
+                                doubleChange.current = true; // the next line trigger onchange. this disables it;
+                                instance.current.summernote('code', newVal);
+                            }
+                            old.current = props.activeLang;
+                        }, [props.value, props.activeLang]);
+                        
+                        return (
+                            React.createElement('div', {},
+                                React.createElement('textarea', {
+                                    ref: element,
+                                    value: props.field.multilanguage ? props.value[props.activeLang] : props.value,
+                                })
+                            )
+                        );
+                    JS,
+                ],
+            ],
+        ];
+    }
+}

example/resources/views/blocks/cb-custom-field.blade.php

@@ -0,0 +1,2 @@
+
+{!! isset($content) ? $content : '' !!}