Issue with Textarea.

[mikhoul]

I start create a textarea and initiate codemirror with:

<script type="text/javascript">
    CodeMirror.fromTextArea(document.getElementById("less-input"), {
  mode: "css",

    colorpicker : {
            mode : 'edit'
        }
});
  </script>

The textarea is pre-made with CSS inside like:

<textarea id="less-input" less-editor ng-model="lessInput" class="less-input">

      color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

.form-control:focus {
  border-color: grey;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
  </textarea>

And colorview/coloredit don't work on the pre-made CSS, if I PASTE more CSS in the textarea it will work and pick up all the CSS with the color swatche.

I'm not sure if I'm clear enough in my description of the problem, if you don't understand just ask me for more information.

Regards :octocat:

[mikhoul]

@easylogic After tested more this weekend I think if you could just add a "listener" to see if there is code/text loaded in the editor when it is initialized or injected just few second after the initialization.

I'm forking a simple Skin Editor for Video.js and it was made with node.js and as a dynamic webpage. Also it was forked from another project.

I'm in the process of converting it to a static website do it will be more easy for me to maintain and update since it only need one page and I don't really know Node.js.

There is 2 textarea in the page one for the LESS code and another where it is converted in CSS dynamically. In the CSS windows the color swatch appear fine since when the page load the text inside the textarea is generated dynamically so the windows is refreshed.

But in the main windows there is the LESS code loaded inside but the color swatch don't appear. A dirty hack I've done to make it work is: setTimeout(function(){ window.resetStyles(); }, 2000); // Dirty Hack to make the color swatch show up in the Less Editor View

The "SetTimeout" run just after the LESS code is injected in the editor, the 2 sec delay it let the time to "Colorpicker" to initialize and right after it "reset" the style of the textarea to make colorpicker aware that there is some text to analyze/parse so the color swatch appears.

Here's a screenshot showing what happen when the page is freshly loaded: http://i.imgur.com/nm8wtMM.png

Regards :octocat:

[easylogic]

@mikhoul

i will make a sample with two textareas and test it.

I'll let you know after the test.

[mikhoul]

@easylogic I think I know a little bit more why the problem happen, it's not really related to having 2 textarea but more because one if filled automatically just after being created with code and colorpicker is not aware there is code to process inside.

It's kind of the same bug that we had with the pasting of text that was not detected until I write in the textarea. I see in your code that to fix it you put an event listener to watch when some codes is pasted: https://github.com/easylogic/codemirror-colorpicker/commit/2b0bdb86bb3fe6680b5c0217f26c92ef84ec446f

You should do the same thing that you do when pasting is detected but to include this method to inject some a file in the text area.

Here's the code that inject the "video-js.less" file in the editor when it is created:

/* 
  Vidoe.js-specific Javascript for getting the player and skin working 
*/

// Load the Video.js Less content from a file
// This allows us to easily swap in new versions of the video-js.less
// file when they're created
window.defaultStyles = '/* No Styles Loaded */';

window.resetStyles = function(){
  var cmEl = $('.CodeMirror')[0];

  // If CodeMirror has loaded we need to talk to it
  if (cmEl) {
    cmEl.CodeMirror.setValue(window.defaultStyles);

  // Otherwise we need to update the content of the textarea
  // pre CodeMirror init
  } else {
    $('#less-input').val(window.defaultStyles);
  }
};

$.ajax('/stylesheets/video-js.less', { async: false }).done(function(data){
  window.defaultStyles = data;
  setTimeout(function(){ window.resetStyles(); }, 2000);  // Dirty Hack to make the colorpicker swatchs show up in the Less Editor View
});

$('.skin-styles-reset').on('click', function(){
  window.resetStyles();
});

Here's how I start colorpicker from another module/file:

l2c.directive('lessEditor', [
  'LessOptions'

  , function(LessOptions) {
    return {
        restrict: 'A'
      , require: 'ngModel'

      , link: function(scope, elem, attrs, ngModel) {
        scope.opts = LessOptions.options;

        function deferCodeMirror() {
          var opts = scope.opts.lessEditorOptions
            , codeMirror = CodeMirror.fromTextArea(elem[0],opts);  // Start the CodeMirror Editor

           codeMirror.on('change', onChange(opts.onChange));
        // codeMirror.setOption("lineNumbers", "false"); // Mikhoul Modification to ad Codemirror Options
           codeMirror.setOption("colorpicker", { mode : 'edit' } ); // Mikhoul start the Color swatch editor

          ngModel.$render = function() {
            codeMirror.setValue(ngModel.$viewValue);

          };
        }

        function onChange() {
          return function(instance, changeObj) {
            var newValue = instance.getValue();

            if (newValue !== ngModel.$viewValue) {
              ngModel.$setViewValue(newValue);
              scope.$apply();
            }
          };
        }
        LessOptions.request.then(deferCodeMirror);
      }
    };
  }
]);

Regards ! :octocat:

[easylogic]

@mikhoul

colorpicker is now support update and refresh event for CodeMirror.

please test in v1.0.5.

thanks.