How to use @lrnwebcomponents/haxcms-elements - 10 common examples

autorun(reaction => {
      this.manifest = toJS(store.routerManifest);
      if (varExists(this.manifest, "title")) {
        document.title = this.manifest.title;
      }
      if (varExists(this.manifest, "metadata.theme.variables.cssVariable")) {
        // json outline schema changed, allow other things to react
        // fake way of forcing an update of these items
        let ary = this.manifest.metadata.theme.variables.cssVariable
          .replace("--simple-colors-default-theme-", "")
          .split("-");
        ary.pop();
        this.accentColor = ary.join("-");
      }
      this.__disposer.push(reaction);
    });
    autorun(reaction => {

_activeIdChanged(newValue) {
    if (newValue) {
      let el = null;
      //ensure that this level is included
      if (this.shadowRoot.querySelector('[data-id="' + newValue + '"]')) {
        el = this.shadowRoot.querySelector('[data-id="' + newValue + '"]');
      } else {
        let tmpItem = store.manifest.items.find(i => i.id == newValue);
        // fallback, maybe there's a child of this currently active
        while (el === null && tmpItem && tmpItem.parent != null) {
          // take the parent object of this current item
          tmpItem = store.manifest.items.find(i => i.id == tmpItem.parent);
          // see if IT lives in the dom, if not, keep going until we run out
          if (
            tmpItem &&
            this.shadowRoot.querySelector('[data-id="' + tmpItem.id + '"]')
          ) {
            el = this.shadowRoot.querySelector(
              '[data-id="' + tmpItem.id + '"]'
            );
          }
        }
      }
      if (this._prevEl) {
        this._prevEl.classList.remove("active");
      }
      if (el) {
        el.classList.add("active");

jwtChanged(e) {
    this.jwt = e.detail.value;
    store.jwt = this.jwt;
    if (store.cmsSiteEditor && store.cmsSiteEditor.instance) {
      store.cmsSiteEditor.instance.jwt = this.jwt;
    }
    // support updates after the fact
    if (
      this.jwt != null &&
      this.jwt != "null" &&
      this.jwt != "" &&
      typeof this.jwt == "string"
    ) {
      this.dynamicallyImportEditor();
    }
  }
  /**

"haxcms-active-item-changed",
      this._activeItemUpdate.bind(element)
    );
    window.addEventListener(
      "haxcms-edit-mode-changed",
      this._globalEditChanged.bind(element)
    );
    window.addEventListener(
      "haxcms-trigger-update",
      this._triggerUpdate.bind(element)
    );
    // inject the tools to allow for an authoring experience
    // ensuring they are loaded into the correct theme
    store.cmsSiteEditorAvailability();
    store.cmsSiteEditor.instance.appElement = element;
    store.cmsSiteEditor.instance.appendTarget = injector;
    store.cmsSiteEditor.instance.appendTarget.appendChild(
      store.cmsSiteEditor.instance
    );
  }
  /**

editorLoaded(e) {
    if (!store.cmsSiteEditor.haxCmsSiteEditorUIElement) {
      import("@lrnwebcomponents/haxcms-elements/lib/core/haxcms-site-editor-ui.js");
      store.cmsSiteEditor.haxCmsSiteEditorUIElement = document.createElement(
        "haxcms-site-editor-ui"
      );
      document.body.appendChild(store.cmsSiteEditor.haxCmsSiteEditorUIElement);
      // forces a nice fade in transition
      setTimeout(() => {
        store.cmsSiteEditor.haxCmsSiteEditorUIElement.painting = false;
      }, 5);
    }
  }
  // simple path from a url modifier

async createNode(e) {
    let page = e.detail.values;
    // snag global to be sure we have it set first
    this.manifest = store.cmsSiteEditor.instance.manifest;
    // set items specifically since it's just an outline update
    this.manifest.items = e.detail;
    // loop through and match the data our backend generates
    this.manifest.items.forEach((element, index) => {
      // test for things that are not set and build the whole thing out
      if (typeof element.location === typeof undefined) {
        if (!page.id) {
          page.id = this.generateResourceID("item-");
        }
        if (!page.location) {
          page.location = "pages/" + page.id + "/index.html";
        }
        let directory = page.location.replace("/index.html", "");
        element.id = page.id;
        element.location = page.location;
        element.order = page.order;

e => {
          // validate availability
          store.cmsSiteEditorAvailability();
          store.cmsSiteEditor.instance.jwt = this.jwt;
          store.cmsSiteEditor.instance.method = "GET";
          store.cmsSiteEditor.instance.saveNodePath =
            window.appSettings.saveNodePath;
          store.cmsSiteEditor.instance.saveManifestPath =
            window.appSettings.saveManifestPath;
          store.cmsSiteEditor.instance.saveOutlinePath =
            window.appSettings.saveOutlinePath;
          store.cmsSiteEditor.instance.getNodeFieldsPath =
            window.appSettings.getNodeFieldsPath;
          store.cmsSiteEditor.instance.getSiteFieldsPath =
            window.appSettings.getSiteFieldsPath;
          store.cmsSiteEditor.instance.createNodePath =
            window.appSettings.createNodePath;
          store.cmsSiteEditor.instance.deleteNodePath =
            window.appSettings.deleteNodePath;
          store.cmsSiteEditor.instance.publishSitePath =
            window.appSettings.publishSitePath;
          store.cmsSiteEditor.instance.syncSitePath =
            window.appSettings.syncSitePath;
          store.cmsSiteEditor.instance.revertSitePath =
            window.appSettings.revertSitePath;
          store.cmsSiteEditor.instance.getUserDataPath =
            window.appSettings.getUserDataPath;
          store.cmsSiteEditor.instance.appStore = window.appSettings.appStore;
        },
        e => {

jwtChanged(e) {
    this.jwt = e.detail.value;
    store.jwt = this.jwt;
    if (store.cmsSiteEditor && store.cmsSiteEditor.instance) {
      store.cmsSiteEditor.instance.jwt = this.jwt;
    }
    // support updates after the fact
    if (
      this.jwt != null &&
      this.jwt != "null" &&
      this.jwt != "" &&
      typeof this.jwt == "string"
    ) {
      this.dynamicallyImportEditor();
    }
  }
  /**

jwtChanged(e) {
    this.jwt = e.detail.value;
    store.jwt = this.jwt;
    if (store.cmsSiteEditor && store.cmsSiteEditor.instance) {
      store.cmsSiteEditor.instance.jwt = this.jwt;
    }
    // support updates after the fact
    if (
      this.jwt != null &&
      this.jwt != "null" &&
      this.jwt != "" &&
      typeof this.jwt == "string"
    ) {
      this.dynamicallyImportEditor();
    }
  }
  /**

_editModeChanged(newValue, oldValue) {
      if (typeof oldValue !== typeof undefined) {
        // ensure global is kept in sync
        store.editMode = newValue;
        this.__styleReapply();
      }
    }
    /**