JSFiddle - React, Tailwind, and code Playground

by andrew rowe

JavaScript

let ActivityExpressionViewModel = function(data) {
  let self = this;

  if (data != null) {
    ko.mapping.fromJS(data, {}, self);
  } else {
    self.expression = ko.observable("");
  }

  self.Initialize = function(expression) {
    this.expression(expression);
  }

  self.EditExpression = function(data, event) {
    showModal({
        viewModel: new EditExpressionViewModel(self.expression),
        context: this
      })
      .done(function(result) {
        self.UpdateExpression(result);
      });
  }

  self.UpdateExpression = function(newExpression) {
    if (newExpression != "") {
      self.expression(newExpression);
    }
  }
};

let EditExpressionViewModel = function(currentExpressionAccessor) {
  let self = this;
  self.currentExpressionAccessor = currentExpressionAccessor;
  self.expression = ko.observable(currentExpressionAccessor());

  self.template = "editExpressionModalTemplate";

  self.CompleteEditing = function() {
    this.modal.close(this.expression());
  }

  self.CancelEditing = function() {
    this.modal.close();
  }
}

let monacoEditor = null;
let currentViewModel = null;

ko.bindingHandlers.activityExpressionMonacoEditor = {
  init: function(element, valueAccessor, allBindingsAccessor, bindingContext) {
    currentViewModel = allBindingsAccessor().currentViewModel;

    monacoEditor = monaco.editor.create(element, {
      codeLens: false,
      language: 'c#',
    });

    monacoEditor.setValue(currentViewModel.expression());

    monacoEditor.getModel().onDidChangeContent(event => {
      let value = monacoEditor.getValue();
      currentViewModel.expression(value);
    });

    monacoEditor.onDidBlurEditorText((event) => {
      if (currentViewModel != null) {
        currentViewModel.ValidateExpression();
      }
    });
  }
};