Add codemirror asset bundle (#4965)

CHANGELOG_DEV.md

@@ -6,6 +6,7 @@
 - Fix #4877: Check for writable uploads/profile_image directory
 - Enh #4868: Reset email summaries / notifications settings for all users
 - Enh #4884: New Space module setting to allow all users to add users without invite
+- Enh #4902: Added CodeMirror form field widget
 - Enh #4964: New CLI command to delete users 
 - Enh #4871: Default timezone for guests
 - Enh #5019: Alternative DashboardMemberStreamFilter based on Legitmation IDs

composer.json

@@ -35,6 +35,7 @@
         "npm-asset/bootstrap-markdown": "2.10.*",
         "npm-asset/bootstrap-tour": "0.11.0",
         "npm-asset/clipboard-polyfill": "3.0.*",
+        "npm-asset/codemirror": "^5.59",
         "npm-asset/font-awesome": "^4.7.0",
         "npm-asset/humhub-prosemirror-richtext": "1.1.5",
         "npm-asset/imagesloaded": "*",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "e25fa2ed3ad8e6c99542573587da0caa",
+    "content-hash": "3d17790ff0c912ffa14abea17f21d942",
     "packages": [
         {
             "name": "bower-asset/bootstrap",
@@ -3268,6 +3268,18 @@
                 "MIT"
             ]
         },
+        {
+            "name": "npm-asset/codemirror",
+            "version": "5.61.0",
+            "dist": {
+                "type": "tar",
+                "url": "https://registry.npmjs.org/codemirror/-/codemirror-5.61.0.tgz"
+            },
+            "type": "npm-asset",
+            "license": [
+                "MIT"
+            ]
+        },
         {
             "name": "npm-asset/component-bind",
             "version": "1.0.0",

package.json

@@ -12,7 +12,7 @@
     "grunt-contrib-copy": "*",
     "grunt-contrib-cssmin": "^2.1.0",
     "grunt-contrib-less": "^2.0.0",
-    "grunt-contrib-uglify": "^2.3.0",
+    "grunt-contrib-uglify": "^5.0",
     "grunt-shell": "^2.1.0"
   }
 }

protected/humhub/assets/CoreExtensionAsset.php

@@ -23,6 +23,7 @@ class CoreExtensionAsset extends WebStaticAssetBundle
         'js/humhub/humhub.ui.panel.js',
         'js/humhub/humhub.ui.gallery.js',
         'js/humhub/humhub.ui.picker.js',
+        'js/humhub/humhub.ui.codemirror.js',
         'js/humhub/humhub.oembed.js',
         'js/humhub/humhub.media.Jplayer.js',
         // Note this should stay at last for other click event listeners beeing able to prevent pjax handling (e.g gallery)

protected/humhub/modules/admin/views/setting/statistic.php

@@ -2,6 +2,10 @@
 
 use humhub\compat\CActiveForm;
 use humhub\compat\CHtml;
+use humhub\modules\admin\models\forms\StatisticSettingsForm;
+use humhub\modules\ui\form\widgets\CodeMirrorInputWidget;
+
+/* @var $model StatisticSettingsForm */
 ?>
 <?php $this->beginContent('@admin/views/setting/_advancedLayout.php') ?>
 
@@ -13,8 +17,7 @@ use humhub\compat\CHtml;
 <?= $form->errorSummary($model); ?>
 
 <div class="form-group">
-    <?= $form->labelEx($model, 'trackingHtmlCode'); ?>
-    <?= $form->textArea($model, 'trackingHtmlCode', ['class' => 'form-control', 'rows' => '8']); ?>
+    <?= $form->field($model, 'trackingHtmlCode')->widget(CodeMirrorInputWidget::class); ?>
 </div>
 <hr>
 

protected/humhub/modules/ui/form/assets/CodeMirrorAssetBundle.php

@@ -0,0 +1,44 @@
+<?php
+
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2021 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
+
+namespace humhub\modules\ui\form\assets;
+
+use yii\web\AssetBundle;
+use yii\web\View;
+
+class CodeMirrorAssetBundle extends AssetBundle
+{
+    /**
+     * v1.5 compatibility defer script loading
+     *
+     * Migrate to HumHub AssetBundle once minVersion is >=1.5
+     *
+     * @var bool
+     */
+    public $defer = true;
+
+    public $jsOptions = ['position' => View::POS_HEAD];
+    public $sourcePath = '@vendor/npm-asset/codemirror';
+
+    public $js = [
+        'lib/codemirror.js',
+        'addon/hint/show-hint.js',
+        'addon/hint/html-hint.js',
+        'addon/hint/xml-hint.js',
+        'mode/xml/xml.js',
+        'mode/javascript/javascript.js',
+        'mode/css/css.js',
+        'mode/htmlmixed/htmlmixed.js',
+    ];
+
+    public $css = [
+        'lib/codemirror.css',
+        'addon/hint/show-hint.css'
+    ];
+
+}

protected/humhub/modules/ui/form/widgets/CodeMirrorInputWidget.php

@@ -0,0 +1,65 @@
+<?php
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2021 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
+
+namespace humhub\modules\ui\form\widgets;
+
+use humhub\libs\Html;
+use humhub\modules\ui\form\assets\CodeMirrorAssetBundle;
+
+/**
+ * Textarea form field with highlight code by CodeMirror.
+ *
+ * @package humhub\widgets
+ * @since 1.9
+ */
+class CodeMirrorInputWidget extends JsInputWidget
+{
+    /**
+     * @var int defines the HTML rows attribute of the textarea
+     */
+    public $rows = 15;
+
+    /**
+     * @var string Style class of the textarea
+     */
+    public $inputClass = 'form-control';
+
+    /**
+     * @var string Mode of highlighting the textarea by CodeMirror
+     */
+    public $mode = 'text/html';
+
+    /**
+     * @var bool
+     */
+    public $spellcheck = true;
+
+    public function run()
+    {
+        CodeMirrorAssetBundle::register($this->view);
+
+        if ($this->form != null) {
+            $textArea = $this->form->field($this->model, $this->attribute)->textarea($this->getOptions());
+        } elseif ($this->hasModel()) {
+            $textArea = Html::activeTextarea($this->model, $this->attribute, $this->getOptions());
+        } else {
+            $textArea = Html::textarea($this->name, $this->value, $this->getOptions());
+        }
+
+        return $textArea;
+    }
+
+    public function getAttributes()
+    {
+        return [
+            'rows' => $this->rows,
+            'class' => $this->inputClass,
+            'data-codemirror' => $this->mode,
+            'spellcheck' => $this->spellcheck,
+        ];
+    }
+}

protected/humhub/modules/web/tests/codeception/acceptance/NonceCest.php

@@ -28,7 +28,7 @@ class NonceCest
     {
         $I->amAdmin();
         $I->amOnRoute(['/admin/setting/statistic']);
-        $I->fillField('#statisticsettingsform-trackinghtmlcode', '<script nonce="{{ nonce }}">alert("Tracking Script")</script>');
+        $I->executeJS('_editor = document.querySelectorAll("div.CodeMirror")[0].CodeMirror; _editor.setValue("<script nonce=\"{{ nonce }}\">alert(\"Tracking Script\")</script>");');
         $I->click('Save');
         $I->wait(2);
         $I->seeInPopup("Tracking Script");
@@ -36,9 +36,10 @@ class NonceCest
 
     public function testInvalidStatistic(AcceptanceTester $I)
     {
+        \Yii::$app->settings->set('trackingHtmlCode', '<script>alert("Tracking Script")</script>');
         $I->amAdmin();
         $I->amOnRoute(['/admin/setting/statistic']);
-        $I->fillField('#statisticsettingsform-trackinghtmlcode', '<script>$("body").html("Tracking Script")</script>');
+        $I->executeJS('_editor = document.querySelectorAll("div.CodeMirror")[0].CodeMirror; _editor.setValue("<script>alert(\"Tracking Script\")</script>");');
         $I->click('Save');
         $I->wait(2);
         $I->amOnDashboard();

static/js/humhub/humhub.ui.codemirror.js

@@ -0,0 +1,28 @@
+/**
+ * This module is used to initialize CodeMirror
+ *
+ * @namespace humhub.modules.ui.codemirror
+ */
+humhub.module('ui.codemirror', function(module, require, $) {
+    var event = require('event');
+
+    var init = function () {
+        event.on('humhub:ready', function (evt) {
+            if (typeof CodeMirror === 'undefined') {
+                return;
+            }
+            $('textarea[data-codemirror]').each(function() {
+                var codeMirrorInstance = CodeMirror.fromTextArea(this, {
+                    mode: $(this).data('codemirror'),
+                    lineNumbers: true,
+                    extraKeys: {'Ctrl-Space': 'autocomplete'}
+                });
+                $(this).data('codemirror-instance', codeMirrorInstance);
+            });
+        });
+    }
+
+    module.export({
+        init
+    });
+});