<commit_before>define(
  'ephox.alloy.demo.HtmlConverter',

  [
    'ephox.alloy.api.Gui',
    'ephox.alloy.api.GuiFactory',
    'ephox.alloy.api.GuiTemplate',
    'ephox.alloy.api.behaviour.Representing',
    'ephox.alloy.api.ui.Button',
    'ephox.alloy.api.ui.Input',
    'ephox.numerosity.api.JSON',
    'ephox.perhaps.Option',
    'ephox.sugar.api.Element',
    'ephox.sugar.api.Insert',
    'ephox.sugar.api.Remove',
    'ephox.sugar.api.SelectorFind',
    'ephox.sugar.api.Value',
    'global!document'
  ],

  function (Gui, GuiFactory, GuiTemplate, Representing, Button, Input, Json, Option, Element, Insert, Remove, SelectorFind, Value, document) {
    return function () {
      var ephoxUi = SelectorFind.first('#ephox-ui').getOrDie();

    // TODO: Change this to match the simplified UI templating model we have now.

      var page = {
        uiType: 'container',
        components: [
          {
            uiType: 'custom',
            dom: {
              tag: 'p',
              innerHtml: 'Copy your HTML structure into this textarea and press <strong>Convert</strong>'
            }
          },
          Input.build({
            tag: 'textarea',
            dom: {
              styles: {
                width: '90%',
                height: '300px',
                display: 'block'
              }
            },
            uid: 'textarea-input'
          }),
          Button.build({
            dom: {
              tag: 'button',
              innerHtml: 'Convert'
            },
            action: function (button) {
              var textarea = button.getSystem().getByUid('textarea-input').getOrDie();
              var value = Representing.getValue(textarea).value;

              var output = GuiTemplate.use(
                Option.none(),
                value,
                { },
                { fields: { } }
              );

              console.log('output', output);
              var display = button.getSystem().getByUid('pre-output').getOrDie();
              var prettyprint = Json.stringify(output, null, 2);

              Remove.empty(display.element());
              Insert.append(display.element(), Element.fromText(prettyprint));
            }
          }),

          {
            uiType: 'container',
            uid: 'pre-output',
            dom: {
              tag: 'pre'
            }
          }
        ]
      };

      var root = GuiFactory.build(page);
      var gui = Gui.takeover(root);

      Insert.append(ephoxUi, gui.element());
      
    };
  }
);<commit_msg>VAN-44: Container.build in HtmlConverter<commit_after>define(
  'ephox.alloy.demo.HtmlConverter',

  [
    'ephox.alloy.api.Gui',
    'ephox.alloy.api.GuiFactory',
    'ephox.alloy.api.GuiTemplate',
    'ephox.alloy.api.behaviour.Representing',
    'ephox.alloy.api.ui.Button',
    'ephox.alloy.api.ui.Container',
    'ephox.alloy.api.ui.Input',
    'ephox.numerosity.api.JSON',
    'ephox.perhaps.Option',
    'ephox.sugar.api.Element',
    'ephox.sugar.api.Insert',
    'ephox.sugar.api.Remove',
    'ephox.sugar.api.SelectorFind',
    'ephox.sugar.api.Value',
    'global!document'
  ],

  function (Gui, GuiFactory, GuiTemplate, Representing, Button, Container, Input, Json, Option, Element, Insert, Remove, SelectorFind, Value, document) {
    return function () {
      var ephoxUi = SelectorFind.first('#ephox-ui').getOrDie();

    // TODO: Change this to match the simplified UI templating model we have now.

      var page = Container.build({
        components: [
          {
            uiType: 'custom',
            dom: {
              tag: 'p',
              innerHtml: 'Copy your HTML structure into this textarea and press <strong>Convert</strong>'
            }
          },
          Input.build({
            tag: 'textarea',
            dom: {
              styles: {
                width: '90%',
                height: '300px',
                display: 'block'
              }
            },
            uid: 'textarea-input'
          }),
          Button.build({
            dom: {
              tag: 'button',
              innerHtml: 'Convert'
            },
            action: function (button) {
              var textarea = button.getSystem().getByUid('textarea-input').getOrDie();
              var value = Representing.getValue(textarea).value;

              var output = GuiTemplate.use(
                Option.none(),
                value,
                { },
                { fields: { } }
              );

              console.log('output', output);
              var display = button.getSystem().getByUid('pre-output').getOrDie();
              var prettyprint = Json.stringify(output, null, 2);

              Remove.empty(display.element());
              Insert.append(display.element(), Element.fromText(prettyprint));
            }
          }),

          {
            uiType: 'container',
            uid: 'pre-output',
            dom: {
              tag: 'pre'
            }
          }
        ]
      });

      var root = GuiFactory.build(page);
      var gui = Gui.takeover(root);

      Insert.append(ephoxUi, gui.element());
      
    };
  }
);
{'fraction_non_alphanumeric': 0.13509316770186336, 'fraction_numerical': 0.002717391304347826, 'mean_word_length': 1.549727857496289, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6879546', 'n_tokens_mistral': 1543, 'n_tokens_neox': 1514, 'n_words': 268}