Richtext custom toolbar per field + custom config per field

config/app_local.example.php

@@ -564,16 +564,6 @@
     //     ],
     // ],
 
-    /**
-     * UI settings.
-     * index.copy2clipboard => enable "onmouseover" of index general cells showing copy to clipboard button
-     */
-    // 'UI' => [
-    //     'index' => [
-    //         'copy2clipboard' => true,
-    //     ],
-    // ],
-
     /**
      * Richeditor configuration.
      */
@@ -618,6 +608,7 @@
      * UI settings.
      * - index: index settings. 'copy2clipboard' enables "onmouseover" of index general cells showing copy to clipboard button
      * - modules: modules settings. 'counters' to show counters in modules; 'all', 'none', <list of modules> to show all, none or custom modules. Default is ['trash']
+     * - richeditor: richeditor settings per field: you can set 'config' and 'toolbar' per single field.
      */
     // 'UI' => [
     //     'index' => [
@@ -626,6 +617,34 @@
     //     'modules' => [
     //         'counters' => ['objects', 'media', 'images', 'videos', 'audio', 'files', 'trash', 'users'],
     //     ],
+    //     'richeditor' => [
+    //         'title' => [
+    //             'config' => [
+    //                 'forced_root_block' => 'div',
+    //                 'forced_root_block_attrs' => ['class' => 'titleContainer'],
+    //             ],
+    //             'toolbar' => [
+    //                 'italic',
+    //                 'subscript',
+    //                 'superscript',
+    //             ],
+    //         ],
+    //         'description' => [
+    //             'config' => [
+    //                 'forced_root_block' => 'div',
+    //                 'forced_root_block_attrs' => ['class' => 'descriptionContainer'],
+    //             ],
+    //             'toolbar' => [
+    //                 'bold',
+    //                 'italic',
+    //                 'subscript',
+    //                 'superscript',
+    //                 'link',
+    //                 'unlink',
+    //                 'code',
+    //             ],
+    //         ],
+    //     ],
     // ],
 
     /**

resources/js/app/components/index-cell/index-cell.vue

@@ -0,0 +1,104 @@
+<template>
+    <div
+        :class="className()"
+        untitled-label="${t`Untitled`}"
+        @mouseover="onMouseover()"
+        @mouseleave="onMouseleave()"
+    >
+        <div
+            v-html="truncated"
+            v-if="!msg"
+        />
+
+        <div
+            class="ml-05"
+            @click.stop.prevent="copy()"
+            v-if="showCopyIcon()"
+        >
+            <app-icon icon="carbon:copy" />
+        </div>
+
+        <div
+            class="msg"
+            v-if="msg"
+        >
+            <app-icon icon="carbon:checkmark" color="green" />
+            <span>{{ msg }}</span>
+        </div>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+export default {
+    name: 'IndexCell',
+    props: {
+        settings: {
+            type: Object,
+            default: () => ({}),
+        },
+        prop: {
+            type: String,
+            default: '',
+        },
+        text: {
+            type: String,
+            default: '',
+        },
+        untitledlabel: {
+            type: String,
+            default: '',
+        },
+    },
+    data() {
+        return {
+            msg: '',
+            showCopy: false,
+            truncated: '',
+        };
+    },
+    async mounted() {
+        this.truncated = this.text.length <= 100 ? this.text : this.text.substring(0, 100);
+    },
+    methods: {
+        className() {
+            return `index-cell ${this.prop}-cell`;
+        },
+        copy() {
+            navigator.clipboard.writeText(this.text.replace(/<[^>]*>/g, ''));
+            this.msg = t`copied in the clipboard`;
+            setTimeout(() => this.reset(), 2000)
+        },
+        onMouseover() {
+            if (this.settings?.copy2clipboard !== true) {
+                return;
+            }
+            this.showCopy = true;
+        },
+        onMouseleave() {
+            if (this.settings?.copy2clipboard !== true) {
+                return;
+            }
+            this.showCopy = false;
+        },
+        reset() {
+            this.msg = '';
+        },
+        showCopyIcon() {
+            if (this.settings?.copy2clipboard !== true) {
+                return false;
+            }
+            return !this.msg && this.showCopy;
+        },
+    },
+};
+</script>
+<style scoped>
+div.index-cell > div {
+    display: inline-block;;
+}
+div.index-cell > div.msg {
+    color: forestgreen;
+    font-family: monospace;
+    font-style: italic;
+}
+</style>

resources/js/app/components/recent-activity/recent-activity.vue

@@ -171,12 +171,20 @@ export default {
                 this.loading = false;
             }
         },
+        getTextFromHtml(s) {
+            const e = document.createElement('div');
+            e.innerHTML = s;
+
+            return e.textContent || e.innerText || '';
+        },
         pageButtonClass() {
             return 'has-text-size-smallest button is-width-auto button-outlined';
         },
         title(item) {
             if (item.object_title) {
-                return this.$helpers.truncate(item.object_title, 100);
+                const text = this.getTextFromHtml(item.object_title);
+
+                return this.$helpers.truncate(text, 100);
             }
             const id = `#${item.meta.resource_id}`;
             const uname = item.object_uname ? this.$helpers.truncate(item.object_uname, 100) : t`(deleted)`;

resources/js/app/directives/richeditor.js

@@ -79,11 +79,9 @@ export default {
              */
             async inserted(element, binding) {
                 let changing = false;
-                let items = JSON.parse(binding.expression || '');
-                if (!items) {
-                    items = DEFAULT_TOOLBAR;
-                }
-
+                const exp = binding.expression || '';
+                const json = JSON.parse(exp);
+                let items = json ? json.join(' ') : DEFAULT_TOOLBAR;
                 if (!binding.modifiers?.placeholders) {
                     items = items.replace(/\bplaceholders\b/, '');
                 }
@@ -121,10 +119,20 @@ export default {
                     add_unload_trigger: false, // fix populating textarea elements with garbage when the user initiates a navigation with unsaved changes, but cancels it when the alert is shown
                     readonly: element.getAttribute('readonly') === 'readonly' ? 1 : 0,
                     ... BEDITA?.richeditorConfig,
+                    ... BEDITA?.richeditorByPropertyConfig?.[element?.name]?.config || {},
                     setup: (editor) => {
                         editor.on('change', () => {
                             EventBus.send('refresh-placeholders', {id: editor.id, content: editor.getContent()});
                         });
+                        editor.on('init', () => {
+                            // force height from config
+                            const height = BEDITA?.richeditorByPropertyConfig?.[element?.name]?.config?.height;
+                            if (height) {
+                                const id = editor.id;
+                                const elem = document.getElementById(id + '_ifr').parentNode.parentNode.parentNode.parentNode;
+                                elem.style.height = height;
+                            }
+                        });
                     }
                 });
 

src/Form/Control.php

@@ -149,11 +149,13 @@ public static function richtext(array $options): array
     {
         $schema = (array)Hash::get($options, 'schema');
         $value = Hash::get($options, 'value');
-        $key = !empty($schema['placeholders']) ? 'v-richeditor.placeholders' : 'v-richeditor';
+        $richeditorKey = !empty($schema['placeholders']) ? 'v-richeditor.placeholders' : 'v-richeditor';
+        $override = !empty($options[$richeditorKey]);
+        $toolbar = $override ? $options[$richeditorKey] : json_encode(Configure::read('RichTextEditor.default.toolbar', ''));
 
         return [
             'type' => 'textarea',
-            $key => json_encode(Configure::read('RichTextEditor.default.toolbar', '')),
+            $richeditorKey => $toolbar,
             'value' => $value,
         ];
     }

src/View/Helper/LayoutHelper.php

@@ -109,6 +109,7 @@ public function title(): string
         $name = (string)Hash::get($module, 'name');
         $object = (array)$this->getView()->get('object');
         $title = (string)Hash::get($object, 'attributes.title');
+        $title = strip_tags($title);
 
         return empty($title) ? $name : sprintf('%s | %s', $title, $name);
     }
@@ -371,6 +372,7 @@ public function metaConfig(): array
             'uploadConfig' => $this->System->uploadConfig(),
             'relationsSchema' => $this->getView()->get('relationsSchema', []),
             'richeditorConfig' => (array)Configure::read('Richeditor'),
+            'richeditorByPropertyConfig' => (array)Configure::read('UI.richeditor', []),
         ];
     }
 

src/View/Helper/SchemaHelper.php

@@ -66,6 +66,8 @@ public function controlOptions(string $name, $value, ?array $schema = null): arr
         $ctrlOptions = (array)Configure::read($ctrlOptionsPath);
 
         if (!empty($options)) {
+            $this->updateRicheditorOptions($name, !empty($schema['placeholders']), $options);
+
             return array_merge($options, [
                 'label' => Hash::get($ctrlOptions, 'label'),
                 'readonly' => Hash::get($ctrlOptions, 'readonly', false),
@@ -98,10 +100,30 @@ public function controlOptions(string $name, $value, ?array $schema = null): arr
         if (!empty($ctrlOptions['step'])) {
             $opts['step'] = $ctrlOptions['step'];
         }
+        $this->updateRicheditorOptions($name, !empty($schema['placeholders']), $opts);
 
         return Control::control($opts);
     }
 
+    /**
+     * Update richeditor options if a toolbar config is defined in UI.richeditor for the property.
+     *
+     * @param string $name Property name
+     * @param bool $placeholders True if property has placeholders in schema
+     * @param array $options Control options
+     * @return void
+     */
+    protected function updateRicheditorOptions(string $name, bool $placeholders, array &$options)
+    {
+        $uiRichtext = (array)Configure::read(sprintf('UI.richeditor.%s.toolbar', $name));
+        if (empty($uiRichtext)) {
+            return;
+        }
+        $options['type'] = 'textarea';
+        $richeditorKey = $placeholders ? 'v-richeditor.placeholders' : 'v-richeditor';
+        $options[$richeditorKey] = json_encode($uiRichtext);
+    }
+
     /**
      * Return custom control array if a custom handler has been defined or null otherwise.
      *

templates/Element/Modules/index_table_row.twig

@@ -22,7 +22,7 @@
                     {{ element('Modules/index_properties_date_ranges', { dateRanges: object.attributes[prop] }) }}
                 </div>
             {% else %}
-                <index-cell :settings="{{ config('UI.index')|default({'copy2clipboard': false})|json_encode }}" :prop="{{ prop|json_encode }}" :text="{{ Property.value(object, prop)|striptags|json_encode }}">
+                <index-cell :settings="{{ config('UI.index')|default({'copy2clipboard': false})|json_encode }}" :prop="{{ prop|json_encode }}" :text="{{ Property.value(object, prop)|json_encode }}">
                 </index-cell>
             {% endif %}
         {% endfor %}

templates/Layout/default.twig

@@ -19,7 +19,7 @@ BEdita Manager
     {{ Html.meta('description', 'BEdita Manager, official BEdita API admin tool')|raw }}
     {{ Html.meta('generator', 'BEdita Manager v' ~ config('Manager.version'))|raw }}
 
-    <title>{{ "#{_view.fetch('title')} | #{project.name ?: 'BEdita Manager'}" }}</title>
+    <title>{{ Layout.title()|default(_view.fetch('title')) }} | {{ "#{project.name ?: 'BEdita Manager'}" }}</title>
 
     {{ Html.meta('icon', "favicon.png", { type:'image/png' } )|raw }}
     {# fonts #}

templates/Layout/error.twig

@@ -29,7 +29,7 @@ BEdita Manager
 
     {{ element('custom_colors') }}
 
-    <title>{{ "#{_view.fetch('title')} | #{project.name ?: 'BEdita Manager'}" }}</title>
+    <title>{{ Layout.title()|default(_view.fetch('title')) }} | {{ "#{project.name ?: 'BEdita Manager'}" }}</title>
 
     {{ element('json_meta_config') }}
 </head>