Adds a binding to a content control and registers the BindingDataChanged event type.

Add change text event handler to CC.WORD.yaml

name: Add change text event handler to CC
description: >-
  Adds a binding to a content control and registers the BindingDataChanged event
  type.
host: WORD
api_set: {}
script:
  content: |+
    $("#run").click(() => tryCatch(run));

    async function run() {
      await Word.run(function (context) {
        //first we get the first word in the selection by using the split method, and using space as delimiter and then we add a content control
        var firstWordContentControl = context.document.body.paragraphs.getFirst().insertContentControl();
        //let's add a title.
        firstWordContentControl.title = "BindingID";
        return context.sync()
          .then(function () {
            //we reuse the title to create the binding.
            Office.context.document.bindings.addFromNamedItemAsync("BindingID", "text", {}, function (result) {
              console.log(result.status);
              if (result.status == "succeeded") {
                // lets create an event!
                result.value.addHandlerAsync(Office.EventType.BindingDataChanged, function () {
                  console.log("event happened");
                })
              }
            });
          })
      })
    }

    /** Default helper for invoking an action and handling errors. */
    async function tryCatch(callback) {
      try {
        await callback();
      } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
      }
    }


  language: typescript
template:
  content: |
    <button id="run" class="ms-Button">
        <span class="ms-Button-label">Run</span>
    </button>
  language: html
style:
  content: |-
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  [email protected]/dist/css/fabric.min.css
  [email protected]/dist/css/fabric.components.min.css

  [email protected]/client/core.min.js
  @types/core-js

  [email protected]
  @types/[email protected]