api notebook example

foo.html

<div id="root"></div>
<script src="https://api-notebook.anypoint.mulesoft.com/scripts/embed.js"></script>
<script>
var exec = [
  'App.middleware.register(\'persistence:change\', function (notebook, next, done) {',
  '  App.postMessage.trigger(\'persistence:change\', {',
  '    meta: notebook.meta,',
  '    content: notebook.content',
  '  });',
  '  return done();',
  '});',

  // Enable local ajax requests to use session tokens.
  'App.middleware.register(\'ajax\', function (options, next, done) {',
  '  var origin = window.location.origin;',
  '  var token = ' + JSON.stringify('EL_TOKEN') + ';',
  '  var url = App.Library.url.resolve(origin, options.url);',
  '  // relative URL i.e. call to API Platform i.e. no sensitive data leaking? inject token!',
  '  if (token && url.indexOf(origin) === 0) {',
  '    for (var key in options.headers) {',
  '      if (key.toLowerCase() === \'authorization\') {',
  '        return next();',
  '      }',
  '    }',
  '    options.headers = options.headers || {};',
  '    options.headers.Authorization = \'Bearer \' + token;',
  '  }',
  '  return next();',
  '});',

  // When attempting to clone the notebook, dynamically generate a form
  // to post the notebook content to the api notebook site.
  'App.middleware.register(\'persistence:clone\', function (notebook, next, done) {',
  '  var form = new window.FormData();',
  '  form.append(\'name\', \'content\');',
  '  form.append(\'textContent\', notebook.content);',
  '  fetch(\'https://api-notebook.anypoint.mulesoft.com/notebooks\', { method: \'POST\', body: form })',
  '    .then(function () { done(); });',
  '});'
].join('\n');

var notebook = new Notebook(document.getElementById('root'), {
  content: '---\nsite: http://nico-test.com\napiNotebookVersion: 1.2.54\ntitle: foo\n---\n\n```javascript\nasdf\n```',
  exec: exec,
  config: {
    authentication: false,
    embedded: false
  }
});

notebook.on('persistence:change', function (notebook) {
  console.log(notebook.content);
});
</script>