Problem with color picker + put another color picker...

[alfazaz]

Hello !

I develop an extension for the markdown editor with a color button to change text color. I started from nodebb-plugin-extended-markdown where there is the same thing with a color picker... It uses the nodebb "integrated" color picker (vendor/colorpicker/colorpicker) but I need to change it for two reasons :

• Like in nodebb acp, there is a "bug" when clicking in the palette of this color picker : it's necessary to tap and move to select a color, which is counter-intuitive... (I don't know if it's necessary to write a bug report for this on nodebb github...).
• I need a greater color picker, like bootstrap-colorpicker (https://github.com/farbelous/bootstrap-colorpicker) which has good options (preselector colors...).

But... all my attemps to use bootstrap-colorpicker (v2 or v3) fail.
Do you have some guidelines to help me ? How can I have the bootstrap-colorpicker opening/working after click on my composer button added in the nodebb composer ?

[PitaJ]

What have you tried?

[alfazaz]

Example of try :

• Copied nodebb-plugin-extended-markdown as a basis of my plugin (unchanged, it works with colorpicker "of nodebb" like I said above).
• Added to dependencies in package.json :

"bootstrap-colorpicker": "^2.x"

• Added to plugin.json :

"modules": {
        "bootstrap-colorpicker.js": "node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"
    }

• I replaced the require call in client.js like this :

require([
            'composer/formatting',
            'composer/controls',
            'translator',
//	    'vendor/colorpicker/colorpicker',
	    'bootstrap-colorpicker'
	], function (formatting, controls, translator) {
            if (formatting && controls) {
                // params is (language, namespace, callback)
                translator.getTranslations(window.config.userLang || window.config.defaultLang, 'extendedmarkdown', function (strings) {
                    var composerTextarea;
		    $('li[data-format="color"]').colorpicker();
// Commented all the following from initial plugin
//                     $('li[data-format="color"]').ColorPicker({
//                         eventName: 'showPicker',
//                         color: '#a67f00',
// ......

• I commented also the last line in client.js here :

                    formatting.addButtonDispatch('color', function (textarea, selectionStart, selectionEnd) {
                        if (selectionStart === selectionEnd) {
                            controls.insertIntoTextarea(textarea, '%(#a67f00)[' + strings.color_text + ']');
                            controls.updateTextareaSelection(textarea, selectionStart + 3, selectionStart + 9);
                        } else {
                            var wrapDelta = controls.wrapSelectionInTextareaWith(textarea, '%(#a67f00)[', ']');
                            controls.updateTextareaSelection(textarea, selectionStart + 3, selectionStart + 9);
                        }
                        composerTextarea = textarea;
//                        $('li[data-format="color"]').trigger("showPicker");
                    });

(I must find with what I must replace this last line to call the colorpicker... but the problem is not here...)

Then, after build of course, when I open the editor in nodebb, I have this message in the console.log of the browser :

TypeError: e is undefined      bootstrap-colorpicker.js:1:21152

At 21152 corresponds "e.colorpicker=o;" in the following extract of bootstrap-colorpicker.js :

this.element.trigger({type:"changeColor",color:this.color,value:this.input.val()})}};e.colorpicker=o;e.fn.colorpicker=function(t){var i=Array.prototype.slice.call(arguments,1)

I think I make a big mistake in how to use the colorpicker or implement it in nodebb but I'm not a js expert (I learn about it each day ).

[alfazaz]

Hello !

I gave up with bootstrap-colorpicker.js not being able to integrate it in the composer.

I tried another thing... but also without success . I wanted to add a button into the composer to choose text color with spectrum.js. This library loads fine (after little changes in spectrum.js for define and jQuery) but how is it possible to add this color <input> as a toggle button in default composer ?

It's not the same thing as using addButtonDispatch no ?

[alfazaz]

Success ! I have been able to implement spectrum as a button in composer without using addButtonDispatch. Ouf !