mushroom-cli 1.2.0-alpha.2 → 1.2.0-alpha.20

package/dist/docs/docs.v2.js

@@ -0,0 +1,1907 @@
+function toCSharpName(str) {
+  if (typeof str != 'string' || str === '') return '';
+  const name = str.replace(/\W/g, '_');
+  return name.charAt(0).toUpperCase() + name.substring(1);
+}
+function encodeHtml(data) {
+  if (data === undefined || data === null) return '';
+  var html = typeof data === 'string' ? data : data.toString();
+  html = html.replace(/&/g, '&');
+  html = html.replace(/</g, '&lt;');
+  html = html.replace(/>/g, '&gt;');
+  html = html.replace(/"/g, '&quot;');
+  html = html.replace(/'/g, '&apos;');
+  return html;
+}
+function populateTemplates() {
+  const templates = {};
+  document.querySelectorAll('.mushroom-docs-template').forEach((dom) => {
+    templates[dom.id] = dom.innerHTML;
+    dom.remove();
+  });
+  window.templates = templates;
+}
+function renderTemplate(templateId, data) {
+  const template = window.templates[templateId];
+  if (!template) return '';
+  return template.replace(/\{\{(\w+)(:html)?\}\}/g, (_, field, format) =>
+    format === ':html' ? (data?.[field] ?? '') : encodeHtml(data?.[field]),
+  );
+}
+
+function getApiDomain(url) {
+  const m = url.match(/^(\w+:)?\/\/(([\w-]+\.)+\w+(:\d+)?)/);
+  return m ? m[2] : 'your host';
+}
+function getApiPath(url) {
+  const m = url.match(/^(\w+:)?\/\/([\w-]+\.)+\w+(:\d+)?/);
+  return m ? url.substring(m[0].length) : url;
+}
+
+function getPanelClass(actionName) {
+  switch (actionName) {
+    case 'findMany':
+    case 'findById':
+      return 'panel panel-primary';
+    case 'createOne':
+    case 'createMany':
+      return 'panel panel-info';
+    case 'updateOne':
+    case 'updateMany':
+      return 'panel panel-warning';
+    case 'updatePartially':
+      return 'panel panel-warning';
+    case 'deleteOne':
+    case 'deleteMany':
+      return 'panel panel-danger';
+    default:
+      return 'panel panel-default';
+  }
+}
+function getHttpMethod(actionName) {
+  switch (actionName) {
+    case 'findMany':
+    case 'findById':
+      return 'GET';
+    case 'createOne':
+    case 'createMany':
+      return 'POST';
+    case 'updateOne':
+    case 'updateMany':
+      return 'PUT';
+    case 'updatePartially':
+      return 'PATCH';
+    case 'deleteOne':
+    case 'deleteMany':
+      return 'DELETE';
+    default:
+      if (actionName && actionName.indexOf('_raw_http_method_') !== -1)
+        return actionName.substring('_raw_http_method_'.length);
+      return 'UNKNOWN(' + actionName + ')';
+  }
+}
+function getApiUrl(actionName, rootUrl, entityName) {
+  switch (actionName) {
+    case 'findMany':
+    case 'createOne':
+    case 'createMany':
+    case 'updateMany':
+    case 'deleteMany':
+      return rootUrl + entityName + 's';
+    case 'findById':
+    case 'updateOne':
+    case 'updatePartially':
+    case 'deleteOne':
+      return rootUrl + entityName + 's/{' + entityName + 'Id}';
+    default:
+      if (actionName && actionName.indexOf('_raw_http_method_') !== -1)
+        return rootUrl + entityName + 's/' + actionName.substring('_raw_http_method_'.length);
+      return 'UNKNOWN(' + actionName + ')';
+  }
+}
+function getApiViewUrl(rootUrl, entityName, viewName) {
+  return rootUrl + entityName + 's/views/' + viewName;
+}
+function getDescriptionByActionName(actionName, entityName) {
+  switch (actionName) {
+    case 'findMany':
+      return 'Lấy về danh sách các ' + entityName;
+    case 'findById':
+      return 'Lấy về một ' + entityName + ' theo mã của nó';
+    case 'createOne':
+      return 'Tạo mới một ' + entityName;
+    case 'createMany':
+      return 'Tạo mới hàng loạt các ' + entityName;
+    case 'updateOne':
+      return 'Cập nhật một ' + entityName;
+    case 'updateMany':
+      return 'Cập nhật hàng loạt các ' + entityName;
+    case 'updatePartially':
+      return 'Cập nhật một phần dữ liệu của ' + entityName;
+    case 'deleteOne':
+      return 'Xóa một ' + entityName + ' theo mã của nó';
+    case 'deleteMany':
+      return 'Xóa hàng loạt ' + entityName;
+    default:
+      if (actionName && actionName.indexOf('_raw_http_method_') !== -1) return '';
+      return 'UNKNOWN(' + actionName + ')';
+  }
+}
+function explainRoles(strRoles) {
+  if (!strRoles) return '';
+
+  return strRoles
+    .split('|')
+    .map(function (item) {
+      if (item === '*') return '[Mọi người dùng]';
+      const roles = item.split('+');
+      let s = '';
+      if (roles.length > 1) s += '(';
+
+      s += roles.join(' và ');
+
+      if (roles.length > 1) s += ')';
+
+      return s;
+    })
+    .join(' hoặc ');
+}
+function getModelOutput(arrFields, fields, options) {
+  if (!fields || !arrFields) return '';
+
+  var obj = {};
+  for (var j = 0; j < arrFields.length; j++) {
+    if (!arrFields[j]) continue;
+    var segs = arrFields[j].split('.');
+    var objFields = fields;
+    var cur = obj;
+    for (var i = 0; i < segs.length; i++) {
+      if (segs[i] in objFields) {
+        var field = objFields[segs[i]];
+
+        if (i === segs.length - 1) {
+          if (!(segs[i] in cur)) cur[segs[i]] = JSON.parse(JSON.stringify(field));
+        } else if (field.type === 'object') {
+          objFields = field.fields;
+          if (!(segs[i] in cur)) {
+            var o = { type: 'object', fields: {} };
+            cur[segs[i]] = o;
+            cur = o.fields;
+          } else cur = cur[segs[i]].fields;
+        } else if (field.type === 'array') {
+          objFields = field.items.fields;
+          if (!(segs[i] in cur)) {
+            var a = { type: 'array', items: { type: 'object', fields: {} } };
+            cur[segs[i]] = a;
+            cur = a.items.fields;
+          } else cur = cur[segs[i]].items.fields;
+        }
+      }
+    }
+  }
+
+  return formatModel(obj, '', options).trim();
+}
+function formatModel(obj, strIndent, options) {
+  if (!obj) return '';
+
+  options = options || {};
+
+  var result = '';
+  var nextIndent = strIndent + '    ';
+  for (var m in obj) {
+    if (!obj.hasOwnProperty(m)) continue;
+
+    var child = obj[m];
+
+    var validation = !options.optionalToAll && child.validation && child.validation.required ? 'required' : 'optional';
+    if (child.type === 'IdRef' && child.reference) {
+      validation +=
+        ", ref: <a href='#" +
+        encodeHtml(child.reference) +
+        "' onclick='setTimeout(gotoHash, 20)'>" +
+        encodeHtml(child.reference) +
+        '</a>';
+    }
+
+    if (child.validation) {
+      if ('validValues' in child.validation)
+        validation += ', enum(' + encodeHtml(child.validation.validValues.join(', ')) + ')';
+      if ('invalidValues' in child.validation)
+        validation += ', not allow(' + encodeHtml(child.validation.invalidValues.join(', ')) + ')';
+      if ('pattern' in child.validation) validation += ', pattern: /' + encodeHtml(child.validation.pattern) + '/';
+      if ('length' in child.validation) validation += ', length: ' + child.validation.length;
+      if ('minLength' in child.validation) validation += ', minLength: ' + child.validation.minLength;
+      if ('maxLength' in child.validation) validation += ', maxLength: ' + child.validation.maxLength;
+      if ('min' in child.validation) validation += ', min: ' + encodeHtml(child.validation.min);
+      if ('max' in child.validation) validation += ', max: ' + encodeHtml(child.validation.max);
+      if ('gt' in child.validation) validation += ', gt: ' + encodeHtml(child.validation.gt);
+      if ('lt' in child.validation) validation += ', lt: ' + encodeHtml(child.validation.lt);
+    }
+
+    if (child.type === 'array' && child.items && child.items.type != 'object' && child.items.validation) {
+      validation +=
+        ', array items: ' + (!options.optionalToAll && child.items.validation.required ? 'required' : 'optional');
+      if ('validValues' in child.items.validation)
+        validation += ', enum(' + encodeHtml(child.items.validation.validValues.join(', ')) + ')';
+      if ('invalidValues' in child.items.validation)
+        validation += ', not allow(' + encodeHtml(child.items.validation.invalidValues.join(', ')) + ')';
+      if ('pattern' in child.items.validation)
+        validation += ', pattern: /' + encodeHtml(child.items.validation.pattern) + '/';
+      if ('length' in child.items.validation) validation += ', length: ' + child.items.validation.length;
+      if ('minLength' in child.items.validation) validation += ', minLength: ' + child.items.validation.minLength;
+      if ('maxLength' in child.items.validation) validation += ', maxLength: ' + child.items.validation.maxLength;
+      if ('min' in child.items.validation) validation += ', min: ' + encodeHtml(child.items.validation.min);
+      if ('max' in child.items.validation) validation += ', max: ' + encodeHtml(child.items.validation.max);
+      if ('gt' in child.items.validation) validation += ', gt: ' + encodeHtml(child.items.validation.gt);
+      if ('lt' in child.items.validation) validation += ', lt: ' + encodeHtml(child.items.validation.lt);
+    }
+
+    let defaultValueDocs = '';
+    if (options.showDefaultValue && child.defaultValue !== undefined && child.defaultValue !== null) {
+      defaultValueDocs = `, default: ${encodeHtml(child.type === 'string' ? JSON.stringify(child.defaultValue) : child.defaultValue)}`;
+    }
+
+    var comment = `<span class="code-comment">// ${validation}${defaultValueDocs} ${typeof child.description === 'string' && child.description !== '' ? '- ' + encodeHtml(child.description) : ''}</span>`;
+
+    if (options.mode === 'model') {
+      if (child.type === 'object')
+        result +=
+          '\r\n' + nextIndent + '"' + m + '": ' + comment + formatModel(child.fields, nextIndent, options) + ',';
+      else if (child.type === 'array') {
+        result += `\r\n${nextIndent}"${m}": [`;
+        if (child.items.type === 'object')
+          result += ' ' + comment + formatModel(child.items.fields, nextIndent, options);
+        else if (child.items.type === 'datetime')
+          result +=
+            `\r\n${nextIndent}    ` +
+            JSON.stringify(child.items.defaultValue || 'ISODate_ISO_8601') +
+            ' ' +
+            comment +
+            `\r\n${nextIndent}`;
+        else if (child.items.type === 'boolean')
+          result += `\r\n${nextIndent}    ` + child.items.defaultValue || 'false' + ' ' + comment + `\r\n${nextIndent}`;
+        else if (child.items.type === 'integer' || child.items.type === 'long' || child.items.type === 'double')
+          result += `\r\n${nextIndent}    ` + child.items.defaultValue || '0' + ' ' + comment + `\r\n${nextIndent}`;
+        else
+          result +=
+            `\r\n${nextIndent}    ` +
+            JSON.stringify(child.defaultValue || child.type) +
+            ' ' +
+            comment +
+            `\r\n${nextIndent}`;
+        result += `]`;
+      } else if (child.type === 'datetime')
+        result +=
+          `\r\n${nextIndent}"${m}": ` + JSON.stringify(child.defaultValue || 'ISODate_ISO_8601') + ', ' + comment;
+      else if (child.type === 'boolean')
+        result += `\r\n${nextIndent}"${m}": ` + (child.defaultValue || 'false') + ', ' + comment;
+      else if (child.type === 'integer' || child.type === 'long' || child.type === 'double')
+        result += `\r\n${nextIndent}"${m}": ` + (child.defaultValue || '0') + ', ' + comment;
+      else result += `\r\n${nextIndent}"${m}": ` + JSON.stringify(child.defaultValue || child.type) + ', ' + comment;
+    } else if (options.mode === 'model_null') {
+      if (child.type === 'object')
+        result += '\r\n' + nextIndent + '"' + m + '": ' + comment + formatModel(child.fields, nextIndent, options);
+      else if (child.type === 'array') {
+        result += `\r\n${nextIndent}"${m}": [`;
+        if (child.items.type === 'object')
+          result += ' ' + comment + formatModel(child.items.fields, nextIndent, options) + '],';
+        else result += '], ' + comment;
+      } else result += `\r\n${nextIndent}"${m}": null, ${comment}`;
+    } else if (options.mode === 'model_undefined') {
+      if (child.type === 'object')
+        result += '\r\n' + nextIndent + '"' + m + '": ' + comment + formatModel(child.fields, nextIndent, options);
+      else if (child.type === 'array') {
+        result += `\r\n${nextIndent}"${m}": [`;
+        if (child.items.type === 'object')
+          result += ' ' + comment + formatModel(child.items.fields, nextIndent, options) + '], ';
+        else result += '], ' + comment;
+      } else result += `\r\n${nextIndent}"${m}": undefined, ${comment}`;
+    } else {
+      result += '\r\n' + strIndent + encodeHtml(m) + ': ' + encodeHtml(child.type);
+      if (child.type === 'array') result += child.items.type === 'object' ? ' of object' : ' of ' + child.items.type;
+      if (child.type === 'object') result += ' ' + comment + formatModel(child.fields, strIndent + '    ', options);
+      else if (child.type === 'array' && child.items.type === 'object')
+        result += ' ' + comment + formatModel(child.items.fields, strIndent + '    ', options);
+      else result += ', ' + comment;
+    }
+  }
+
+  if (options.mode === 'model' || options.mode === 'model_null' || options.mode === 'model_undefined') {
+    return (strIndent ? '\r\n' + strIndent : '') + '{' + result + '\r\n' + strIndent + '}';
+  }
+
+  return result;
+}
+function toCachePolicyString(cachePolicy) {
+  if (cachePolicy === undefined || cachePolicy === null || cachePolicy === 'unset') return 'Không thiết lập cấu hình';
+  if (cachePolicy === 'required') return 'Bắt buộc phải cache';
+  if (cachePolicy === 'allow') return 'Cho phép';
+  if (cachePolicy === 'disabled') return 'Bắt buộc không được cache';
+  return '';
+}
+function getModelInput(excludedFields, fields, options) {
+  fields = JSON.parse(JSON.stringify(fields));
+  if (!fields) return '';
+
+  options = options || {};
+
+  fields.id = fields.id || {};
+  fields.id.type = fields.id.type || 'AutoId';
+  fields.id.validation = fields.id.validation || {};
+  fields.id.validation.required = true;
+
+  if (excludedFields && Array.isArray(excludedFields)) {
+    if (options.excludeId && fields.id.type === 'AutoId') {
+      excludedFields = [...excludedFields, 'id'];
+    }
+
+    excludedFields.forEach((item) => {
+      let obj = fields;
+      const segs = item.split('.');
+      for (let i = 0; i < segs.length; i++) {
+        if (!obj) return;
+        const seg = segs[i];
+        if (!(seg in obj)) return;
+
+        if (i === segs.length - 1) delete obj[seg];
+        else if (obj[seg].type === 'object') obj = obj[seg].fields;
+        else if (obj[seg].type === 'array') obj = obj[seg].items?.fields;
+        else return;
+      }
+    });
+  }
+
+  return formatModel(fields, '', { ...options, showValidation: true }).trim();
+}
+function formatHintModel(obj, strIndent, options) {
+  if (!obj) return '';
+
+  strIndent = strIndent || '';
+  options = options || {};
+
+  var result = '';
+  var nextIndent = strIndent + '    ';
+  for (var m in obj) {
+    if (!obj.hasOwnProperty(m)) continue;
+
+    var child = obj[m];
+
+    var validation = !options.optionalToAll && child.required ? 'required' : 'optional';
+    if (child.type === 'IdRef' && child.reference) {
+      validation +=
+        ", ref: <a href='#" +
+        encodeHtml(child.reference) +
+        "' onclick='setTimeout(gotoHash, 20)'>" +
+        encodeHtml(child.reference) +
+        '</a>';
+    }
+
+    if (child.validValues && Array.isArray(child.validValues)) {
+      validation += ', enum(' + encodeHtml(child.validValues.join(', ')) + ')';
+    }
+
+    if (child.type === 'array' && child.items && child.items.type != 'object') {
+      validation += ', array items: ' + (!options.optionalToAll && child.items.required ? 'required' : 'optional');
+      if (child.items.validValues && Array.isArray(child.items.validValues))
+        validation += ', enum(' + encodeHtml(child.items.validValues.join(', ')) + ')';
+    }
+
+    var comment = `<span class="code-comment">// ${validation} ${typeof child.description === 'string' && child.description !== '' ? '- ' + encodeHtml(child.description) : ''}</span>`;
+
+    if (options.mode === 'model') {
+      if (child.type === 'object')
+        result +=
+          '\r\n' + nextIndent + '"' + m + '": ' + comment + formatHintModel(child.fields, nextIndent, options) + ',';
+      else if (child.type === 'array') {
+        result += `\r\n${nextIndent}"${m}": [`;
+        if (child.items.type === 'object')
+          result += ' ' + comment + formatHintModel(child.items.fields, nextIndent, options);
+        else if (child.items.type === 'datetime')
+          result +=
+            `\r\n${nextIndent}    ` +
+            JSON.stringify(child.items.defaultValue || 'ISODate_ISO_8601') +
+            ' ' +
+            comment +
+            `\r\n${nextIndent}`;
+        else if (child.items.type === 'boolean')
+          result += `\r\n${nextIndent}    ` + child.items.defaultValue || 'false' + ' ' + comment + `\r\n${nextIndent}`;
+        else if (child.items.type === 'integer' || child.items.type === 'long' || child.items.type === 'double')
+          result += `\r\n${nextIndent}    ` + child.items.defaultValue || '0' + ' ' + comment + `\r\n${nextIndent}`;
+        else
+          result +=
+            `\r\n${nextIndent}    ` +
+            JSON.stringify(child.defaultValue || child.type) +
+            ' ' +
+            comment +
+            `\r\n${nextIndent}`;
+        result += `]`;
+      } else if (child.type === 'datetime')
+        result +=
+          `\r\n${nextIndent}"${m}": ` + JSON.stringify(child.defaultValue || 'ISODate_ISO_8601') + ', ' + comment;
+      else if (child.type === 'boolean')
+        result += `\r\n${nextIndent}"${m}": ` + (child.defaultValue || 'false') + ', ' + comment;
+      else if (child.type === 'integer' || child.type === 'long' || child.type === 'double')
+        result += `\r\n${nextIndent}"${m}": ` + (child.defaultValue || '0') + ', ' + comment;
+      else result += `\r\n${nextIndent}"${m}": ` + JSON.stringify(child.defaultValue || child.type) + ', ' + comment;
+    } else if (options.mode === 'model_null') {
+      if (child.type === 'object')
+        result += '\r\n' + nextIndent + '"' + m + '": ' + comment + formatHintModel(child.fields, nextIndent, options);
+      else if (child.type === 'array') {
+        result += `\r\n${nextIndent}"${m}": [`;
+        if (child.items.type === 'object')
+          result += ' ' + comment + formatHintModel(child.items.fields, nextIndent, options) + '],';
+        else result += '], ' + comment;
+      } else result += `\r\n${nextIndent}"${m}": null, ${comment}`;
+    } else if (options.mode === 'model_undefined') {
+      if (child.type === 'object')
+        result += '\r\n' + nextIndent + '"' + m + '": ' + comment + formatHintModel(child.fields, nextIndent, options);
+      else if (child.type === 'array') {
+        result += `\r\n${nextIndent}"${m}": [`;
+        if (child.items.type === 'object')
+          result += ' ' + comment + formatHintModel(child.items.fields, nextIndent, options) + '], ';
+        else result += '], ' + comment;
+      } else result += `\r\n${nextIndent}"${m}": undefined, ${comment}`;
+    } else {
+      result += '\r\n' + strIndent + encodeHtml(m) + ': ' + encodeHtml(child.type);
+      if (child.type === 'array') result += child.items.type === 'object' ? ' of object' : ' of ' + child.items.type;
+      if (child.type === 'object') result += ' ' + comment + formatHintModel(child.fields, strIndent + '    ', options);
+      else if (child.type === 'array' && child.items.type === 'object')
+        result += ' ' + comment + formatHintModel(child.items.fields, strIndent + '    ', options);
+      else result += ', ' + comment;
+    }
+  }
+
+  if (options.mode === 'model' || options.mode === 'model_null' || options.mode === 'model_undefined') {
+    return (strIndent ? '\r\n' + strIndent : '') + '{' + result + '\r\n' + strIndent + '}';
+  }
+
+  return result;
+}
+
+function renderInfo() {
+  document.title = document.querySelector('#project-title').innerText = window.docs.info.name + ' API document';
+  document.querySelector('#project-description').innerText = window.docs.info.description;
+
+  document.querySelector('#project-roles').innerHTML =
+    window.docs.roles.map((role) => renderTemplate('template-project-role', role)).join('') ?? '';
+
+  if (window.docs.info.security?.crossDomain === false) {
+    document.querySelector('#project-security-crossDomain-false').style.display = 'block';
+  }
+  if (
+    window.docs.info.security?.crossDomain === true &&
+    Array.isArray(window.docs.info.security.allowOrigins) &&
+    window.docs.info.security.allowOrigins.length &&
+    !window.docs.info.security.allowOrigins.includes('*')
+  ) {
+    document.querySelector('#project-security-allowOrigins').style.display = 'block';
+    document.querySelector('#project-security-allowOrigins ul').innerHTML = window.docs.info.security.allowOrigins
+      .map((origin) => renderTemplate('template-li-code', { value: origin }))
+      .join('');
+  }
+
+  const domRootUrls = document.querySelector('#project-rootUrls');
+  const rootUrls = Object.keys(localStorage)
+    .filter((key) => localStorage.hasOwnProperty(key) && key.startsWith('rootUrl.'))
+    .map((key) => key.substring(8));
+  if (!rootUrls.includes(window.docs.info.rootUrl)) rootUrls.unshift(window.docs.info.rootUrl);
+
+  let selected = localStorage.selected_root_url;
+  if (!selected) selected = localStorage.selected_root_url = window.docs.info.rootUrl;
+  const onspanclick = function () {
+    this.parentNode.parentNode.querySelector('.selected').className = '';
+    selected = this.innerText;
+    this.className = 'selected';
+    const old_root_url = localStorage.selected_root_url;
+    const new_root_url = this.innerText;
+    localStorage.selected_root_url = new_root_url;
+    document
+      .querySelectorAll('.contain-root-url')
+      .forEach((dom) => (dom.innerHTML = dom.innerHTML.replace(old_root_url, new_root_url)));
+    document.querySelectorAll('.root-url').forEach((dom) => (dom.innerText = new_root_url));
+    document.querySelectorAll('.domain').forEach((dom) => (dom.innerText = getApiDomain(new_root_url)));
+  };
+  const onlabelclick = function () {
+    const span = this.parentNode.querySelector('span');
+    if (span.className == 'selected') return;
+
+    const rootUrl = span.innerText;
+    const index = rootUrls.indexOf(rootUrl);
+    if (index !== -1) rootUrls.splice(index, 1);
+
+    localStorage.removeItem(`rootUrl.${rootUrl}`);
+
+    this.parentNode.remove();
+  };
+
+  const addRootUrlDom = (rootUrl, liAddNew) => {
+    const li = document.createElement('li');
+    if (rootUrl == window.docs.info.rootUrl) li.className = 'origin';
+    const span = document.createElement('span');
+    span.innerText = rootUrl;
+    if (rootUrl == selected) span.className = 'selected';
+    li.appendChild(span);
+    const label = document.createElement('label');
+    label.className = 'delete';
+    label.title = 'Xóa';
+    li.appendChild(label);
+    domRootUrls.insertBefore(li, liAddNew);
+    span.onclick = onspanclick;
+    label.onclick = onlabelclick;
+  };
+
+  const li = document.createElement('li');
+  const span = document.createElement('span');
+  span.innerText = 'Thêm mới API root url';
+  span.className = 'add-new';
+  li.appendChild(span);
+  domRootUrls.appendChild(li);
+
+  rootUrls.forEach((rootUrl) => addRootUrlDom(rootUrl, li));
+  span.onclick = () => {
+    const newRootUrl = prompt('Nhập API root url mới:');
+    if (!newRootUrl) return;
+    if (rootUrls.includes(newRootUrl)) return;
+
+    if (!newRootUrl.match(/^(https?:)?\/\//i)) {
+      alert('API root url không hợp lệ!');
+      return;
+    }
+
+    rootUrls.push(newRootUrl);
+    localStorage[`rootUrl.${newRootUrl}`] = '';
+    addRootUrlDom(newRootUrl, li);
+  };
+}
+
+function renderEnvironmentVariables() {
+  document.querySelector('#extension-env-vars').innerHTML = renderTemplate('template-project-environmentVariables');
+  if (!window.docs.environmentVariables) return;
+  const keys = Object.keys(window.docs.environmentVariables);
+  if (!keys.length) return;
+
+  document.querySelector('#extension-env-vars-custom').innerHTML = keys
+    .map((name) =>
+      renderTemplate('template-project-environmentVariables-custom', {
+        name,
+        description: window.docs.environmentVariables[name].description,
+        type: window.docs.environmentVariables[name].type,
+      }),
+    )
+    .join('');
+}
+
+function renderExtensionAuth() {
+  if (!window.docs.features?.includes('auth')) return;
+  document.querySelector('#extension-auth').innerHTML = renderTemplate('template-extension-DefaultAuth-module', {
+    rootUrl: localStorage.selected_root_url,
+    rootUrlPath: getApiPath(localStorage.selected_root_url),
+    domain: getApiDomain(localStorage.selected_root_url),
+  });
+}
+
+function renderExtensionFile() {
+  if (!window.docs.features?.includes('file')) return;
+  document.querySelector('#extension-file').innerHTML = renderTemplate('template-extension-File-module', {
+    rootUrl: localStorage.selected_root_url,
+    rootUrlPath: getApiPath(localStorage.selected_root_url),
+    domain: getApiDomain(localStorage.selected_root_url),
+  });
+}
+
+function renderExtensionMail() {
+  if (!window.docs.features?.includes('mail')) return;
+  document.querySelector('#extension-mailing').innerHTML = renderTemplate('template-extension-Mailing-module', {
+    rootUrl: localStorage.selected_root_url,
+    rootUrlPath: getApiPath(localStorage.selected_root_url),
+    domain: getApiDomain(localStorage.selected_root_url),
+  });
+}
+
+function renderClientDrivers() {
+  if (!window.docs.features?.includes('driver')) return;
+  document.querySelector('#extension-client-drivers').innerHTML = renderTemplate('template-client-drivers');
+}
+
+function renderEntities() {
+  if (!window.docs.entities || typeof window.docs.entities !== 'object') return;
+  document.querySelector('#project-entities').innerHTML = Object.values(window.docs.entities)
+    .map((entity) => renderTemplate('template-project-entity', entity))
+    .join('');
+}
+
+function renderEntity(entityName) {
+  if (this.dataset.rendered) return;
+  this.dataset.rendered = true;
+  const entity = window.docs.entities[entityName];
+  if (!entity) return;
+  if (entity.actions && typeof entity.actions === 'object') {
+    const dom = this.parentNode.querySelector('.project-entity-actions');
+    dom.innerHTML = Object.keys(entity.actions)
+      .map((actionName) =>
+        renderTemplate('template-project-entity-actions', {
+          entityName: entity.name,
+          actionName,
+          className: getPanelClass(actionName),
+          actionHttpMethod: getHttpMethod(actionName),
+          actionApiUrl: getApiUrl(actionName, localStorage.selected_root_url, entity.name),
+          actionDescription: getDescriptionByActionName(actionName, entity.name),
+        }),
+      )
+      .join('');
+    initDom(dom);
+  }
+
+  if (entity.views && typeof entity.views === 'object') {
+    const dom = this.parentNode.querySelector('.project-entity-views');
+    dom.innerHTML = Object.keys(entity.views)
+      .map((viewName) =>
+        renderTemplate('template-project-entity-views', {
+          entityName: entity.name,
+          viewName,
+          actionApiUrl: getApiViewUrl(localStorage.selected_root_url, entity.name, viewName),
+          description: entity.views[viewName]?.[0]?.description ?? '',
+        }),
+      )
+      .join('');
+    initDom(dom);
+  }
+}
+
+function renderEntityAction(entityName, actionName) {
+  if (this.dataset.rendered) return;
+  this.dataset.rendered = true;
+
+  const entity = window.docs.entities[entityName];
+  const actionRoles = entity.actions[actionName];
+
+  const navTabs = this.parentNode.querySelector('.nav-tabs');
+
+  navTabs.innerHTML = actionRoles
+    .map((actionRole) =>
+      renderTemplate('template-project-entity-action-role', {
+        explainedRole: explainRoles(actionRole.grant),
+        entityName,
+        actionName,
+        grant: actionRole.grant,
+      }),
+    )
+    .join('');
+
+  initDom(navTabs);
+
+  activeFirstChild.call(navTabs);
+}
+
+function renderEntityActionRolePage(entityName, actionName, grant) {
+  if (this.dataset.rendered) return;
+  this.dataset.rendered = true;
+
+  const entity = window.docs.entities[entityName];
+  const action = entity.actions[actionName].find((a) => a.grant === grant);
+
+  const tabPages = this.parentNode.parentNode.parentNode.querySelector('.tab-pages');
+  tabPages.innerHTML += renderTemplate('template-project-entity-action-page', { grant });
+
+  let template;
+  let callback;
+  let codeSnippetName = actionName;
+  switch (actionName) {
+    case 'findMany':
+      template = 'template-findMany';
+      callback = renderFindMany;
+      break;
+    case 'findById':
+      template = 'template-findById';
+      callback = renderFindById;
+      break;
+    case 'createOne':
+      template = 'template-createOne';
+      callback = renderCreateOne;
+      break;
+    case 'createMany':
+      template = 'template-createMany';
+      callback = renderCreateMany;
+      break;
+    case 'updateOne':
+      template = 'template-updateOne';
+      callback = renderUpdateOne;
+      break;
+    case 'updateMany':
+      template = 'template-updateMany';
+      callback = renderUpdateMany;
+      break;
+    case 'updatePartially':
+      template = 'template-updatePartially';
+      callback = renderUpdatePartially;
+      break;
+    case 'deleteOne':
+      template = 'template-deleteOne';
+      callback = renderDeleteOne;
+      break;
+    case 'deleteMany':
+      template = 'template-deleteMany';
+      callback = renderDeleteMany;
+      break;
+    default:
+      template = 'template-generalAction';
+      callback = renderGeneralAction;
+      codeSnippetName = 'generalAction';
+      break;
+  }
+  const tabPage = Array.prototype.find.call(
+    tabPages.querySelectorAll('.tab-page'),
+    (dom) => dom.dataset?.role == action.grant,
+  );
+  if (!tabPage) return;
+  const args = {
+    tabPage,
+    action,
+    actionName,
+    entity,
+    entityName,
+    EntityName: toCSharpName(entityName),
+    domain: getApiDomain(localStorage.selected_root_url),
+    rootUrlPath: getApiPath(localStorage.selected_root_url),
+  };
+  const snippet = window.codeSnippets[codeSnippetName] ?? {};
+  const data = {
+    explainedDenyRoles: explainRoles(action.deny),
+    entityName,
+    codeSnippetTabHeaders: Object.keys(snippet)
+      .map(
+        (lang, idx) =>
+          `<li role="presentation" ${idx ? '' : 'class="active"'}><a data-role="${lang}" onclick="activeRoleTab.call(this)">${lang}</a></li>`,
+      )
+      .join(''),
+    codeSnippetTabPages: Object.keys(snippet)
+      .map(
+        (lang, idx) =>
+          `<div class="tab-page ${lang} ${idx ? '' : 'active'}" data-role="${lang}">${snippet[lang]?.call(null, args) ?? ''}</div>`,
+      )
+      .join(''),
+    EntityName: args.EntityName,
+    domain: args.domain,
+    rootUrlPath: args.rootUrlPath,
+    description: action.description,
+  };
+  tabPage.innerHTML =
+    renderTemplate(template, data) + renderTemplate('template-project-entity-action-page-codeSnippets', data);
+  initDom(tabPage);
+  if (!action.deny) tabPage.querySelector('.deny-roles')?.remove();
+
+  if (!action.matches || !Array.isArray(action.matches) || !action.matches.length)
+    tabPage.querySelector('.matches')?.remove();
+  else {
+    if (action.matches.length === 1) {
+      tabPage.querySelector('.matches .matches-length-gt-1')?.remove();
+    }
+    const dom = tabPage.querySelector('.matches .match-conditions');
+    if (dom) {
+      dom.innerHTML = action.matches.map((m) => renderTemplate('template-li-code', { value: m })).join('');
+    }
+  }
+  if (!action.description) {
+    tabPage.querySelector('.description')?.remove();
+  }
+  callback(args);
+}
+
+function renderFindMany(args) {
+  if (Array.isArray(args.action.returnableFields)) {
+    args.tabPage.querySelector('.output-without-fields').innerHTML = getModelOutput(
+      args.action.defaultFields,
+      args.entity.fields,
+    );
+    args.tabPage.querySelector('.field-list').innerHTML = args.action.returnableFields
+      .map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+      .join('');
+    args.tabPage.querySelector('.output-with-fields').innerHTML = getModelOutput(
+      args.action.returnableFields,
+      args.entity.fields,
+    );
+  }
+
+  if (
+    !args.action.defaultFilters &&
+    !args.action.allowFilteringFields &&
+    !args.action.requiredFilteringFields &&
+    !args.entity.features?.vn_text?.fields?.length
+  ) {
+    args.tabPage.querySelector('.filters')?.remove();
+  } else {
+    if (Array.isArray(args.action.defaultFilters) && args.action.defaultFilters.length) {
+      if (args.action.defaultFilters.length === 1) args.tabPage.querySelector('.defaultFilters-length-gt-1')?.remove();
+      args.tabPage.querySelector('.defaultFilters-ul').innerHTML = args.action.defaultFilters
+        .map((filter) => renderTemplate('template-li-code', { value: filter }))
+        .join('');
+    } else {
+      args.tabPage.querySelector('.defaultFilters')?.remove();
+    }
+
+    if (Array.isArray(args.action.allowFilteringFields) && args.action.allowFilteringFields.length) {
+      args.tabPage.querySelector('.allowFilteringFields-list').innerHTML = args.action.allowFilteringFields
+        .map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+        .join(' ');
+    } else {
+      args.tabPage.querySelector('.allowFilteringFields')?.remove();
+    }
+
+    if (Array.isArray(args.action.requiredFilteringFields) && args.action.requiredFilteringFields.length) {
+      args.tabPage.querySelector('.requiredFilteringFields-list').innerHTML = args.action.requiredFilteringFields
+        .map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+        .join(' ');
+    } else {
+      args.tabPage.querySelector('.requiredFilteringFields')?.remove();
+    }
+
+    if (args.entity.features?.vn_text?.fields?.length) {
+      args.tabPage.querySelector('.features-vn_text-fields-channel-default-fields').innerHTML =
+        args.entity.features.vn_text.fields
+          .map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(' ');
+
+      if (args.entity.features?.vn_text?.channels?.length) {
+        args.tabPage.querySelector('.features-vn_text-channels-list').innerHTML = args.entity.features.vn_text.channels
+          .map((channel) =>
+            renderTemplate('template-findMany-vn_text-channel', {
+              name: channel.name,
+              htmlFields: channel.fields
+                ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+                .join(' '),
+            }),
+          )
+          .join('');
+      }
+    } else {
+      args.tabPage.querySelector('.features-vn_text-fields')?.remove();
+    }
+  }
+
+  if (!args.action.allowSortings && !args.action.defaultSortings) {
+    args.tabPage.querySelector('.sort')?.remove();
+  } else {
+    if (Array.isArray(args.action.allowSortings) && args.action.allowSortings.length) {
+      args.tabPage.querySelector('.allowSortings-fields').innerHTML = args.action.allowSortings
+        .map((item) =>
+          renderTemplate('template-findMany-sorting', {
+            field: item.field,
+            sortType:
+              item.type === 'Both'
+                ? 'Cả TĂNG dần và GIẢM dần'
+                : item.type === 'Asc'
+                  ? 'Chỉ TĂNG dần'
+                  : item.type === 'Desc'
+                    ? 'Chỉ GIẢM dần'
+                    : item.type === undefined || item.type === null
+                      ? 'Chỉ TĂNG dần'
+                      : '',
+          }),
+        )
+        .join('');
+    } else {
+      args.tabPage.querySelector('.defaultFilters')?.remove();
+    }
+
+    if (Array.isArray(args.action.defaultSortings) && args.action.defaultSortings.length) {
+      args.tabPage.querySelector('.defaultSortings-fields').innerHTML = args.action.defaultSortings
+        .map((item) =>
+          renderTemplate('template-findMany-sorting', {
+            field: item.field,
+            sortType:
+              item.type === 'Asc'
+                ? 'TĂNG dần'
+                : item.type === 'Desc'
+                  ? 'GIẢM dần'
+                  : item.type === undefined || item.type === null
+                    ? 'TĂNG dần'
+                    : '',
+          }),
+        )
+        .join('');
+    } else {
+      args.tabPage.querySelector('.defaultSortings')?.remove();
+    }
+  }
+
+  args.tabPage.querySelector('.paging').innerHTML = renderTemplate('template-findMany-paging', {
+    strPagingType:
+      args.action.pagingType === undefined || args.action.pagingType === null || args.action.pagingType === 'None'
+        ? 'Không phân trang'
+        : args.action.pagingType === 'LimitOffset'
+          ? 'Theo limit, offset'
+          : args.action.pagingType === 'Page'
+            ? 'Theo page number'
+            : '',
+    entityName: args.entityName,
+    maxPageSize: args.action.maxPageSize,
+    maxRecordCount:
+      args.action.maxPageSize === undefined || args.action.maxPageSize === null
+        ? (args.action.pageSize ?? 25)
+        : Math.min(args.action.maxPageSize, args.action.pageSize ?? 25),
+  });
+
+  if (args.action.pagingType === undefined || args.action.pagingType === null || args.action.pagingType === 'None') {
+    args.tabPage.querySelector('.pagingType-ne-None')?.remove();
+  } else if (args.action.maxPageSize === undefined || args.action.maxPageSize === null) {
+    args.tabPage.querySelector('.maxPageSize')?.remove();
+  }
+
+  if (args.action.includeTotal !== true) {
+    args.tabPage.querySelector('.includeTotal')?.remove();
+  }
+
+  if (args.action.cache?.enable !== true) {
+    args.tabPage.querySelector('.cache')?.remove();
+  } else {
+    args.tabPage.querySelector('.cache').innerHTML = renderTemplate('template-findMany-cache', {
+      serverPolicy: toCachePolicyString(args.action.cache?.server?.policy),
+      clientPolicy: toCachePolicyString(args.action.cache?.client?.policy),
+    });
+  }
+}
+
+function renderFindById(args) {
+  if (Array.isArray(args.action.returnableFields)) {
+    args.tabPage.querySelector('.output-without-fields').innerHTML = getModelOutput(
+      args.action.defaultFields,
+      args.entity.fields,
+    );
+    args.tabPage.querySelector('.field-list').innerHTML = args.action.returnableFields
+      .map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+      .join('');
+    args.tabPage.querySelector('.output-with-fields').innerHTML = getModelOutput(
+      args.action.returnableFields,
+      args.entity.fields,
+    );
+  }
+
+  if (args.action.cache?.enable !== true) {
+    args.tabPage.querySelector('.cache')?.remove();
+  } else {
+    args.tabPage.querySelector('.cache').innerHTML = renderTemplate('template-findMany-cache', {
+      serverPolicy: toCachePolicyString(args.action.cache?.server?.policy),
+      clientPolicy: toCachePolicyString(args.action.cache?.client?.policy),
+    });
+  }
+}
+
+function renderCreateOne(args) {
+  args.tabPage.querySelector('.input-model').innerHTML = getModelInput(args.action.exclude, args.entity.fields, {
+    excludeId: true,
+    showDefaultValue: true,
+  });
+}
+
+function renderCreateMany(args) {
+  args.tabPage.querySelector('.input-model').innerHTML = getModelInput(args.action.exclude, args.entity.fields, {
+    excludeId: true,
+    showDefaultValue: true,
+  });
+}
+
+function renderUpdateOne(args) {
+  args.tabPage.querySelector('.input-model').innerHTML = getModelInput(args.action.exclude, args.entity.fields, {
+    showDefaultValue: true,
+  });
+}
+
+function renderUpdateMany(args) {
+  args.tabPage.querySelector('.input-model').innerHTML = getModelInput(args.action.exclude, args.entity.fields, {
+    showDefaultValue: true,
+  });
+}
+
+function renderUpdatePartially(args) {
+  args.tabPage.querySelector('.input-model').innerHTML = getModelInput(args.action.exclude, args.entity.fields, {
+    optionalToAll: true,
+  });
+}
+
+function renderDeleteOne(args) {}
+
+function renderDeleteMany(args) {}
+
+function renderGeneralAction(args) {
+  if (args.action?.codeHint?.delegator?.param?.fields) {
+    args.tabPage.querySelector('.query-string-model').innerHTML = formatHintModel(
+      args.action.codeHint.delegator.param.fields,
+    );
+  } else {
+    args.tabPage.querySelector('.query-string')?.remove();
+  }
+  if (args.action?.codeHint?.delegator?.requestBody?.fields) {
+    args.tabPage.querySelector('.request-body-model').innerHTML = formatHintModel(
+      args.action.codeHint.delegator.requestBody.fields,
+    );
+  } else {
+    args.tabPage.querySelector('.request-body')?.remove();
+  }
+}
+
+function renderEntityView(entityName, viewName) {
+  if (this.dataset.rendered) return;
+  this.dataset.rendered = true;
+
+  const entity = window.docs.entities[entityName];
+  const viewRoles = entity.views[viewName];
+
+  const navTabs = this.parentNode.querySelector('.nav-tabs');
+
+  navTabs.innerHTML = viewRoles
+    .map((viewRole) =>
+      renderTemplate('template-project-entity-view-role', {
+        explainedRole: explainRoles(viewRole.grant),
+        entityName,
+        viewName,
+        grant: viewRole.grant,
+      }),
+    )
+    .join('');
+  initDom(navTabs);
+  activeFirstChild.call(navTabs);
+}
+
+function renderEntityViewRolePage(entityName, viewName, grant) {
+  if (this.dataset.rendered) return;
+  this.dataset.rendered = true;
+
+  const entity = window.docs.entities[entityName];
+  const view = entity.views[viewName].find((a) => a.grant === grant);
+
+  const tabPages = this.parentNode.parentNode.parentNode.querySelector('.tab-pages');
+  tabPages.innerHTML += renderTemplate('template-project-entity-view-page', { grant });
+
+  const tabPage = Array.prototype.find.call(
+    tabPages.querySelectorAll('.tab-page'),
+    (dom) => dom.dataset?.role == view.grant,
+  );
+  if (!tabPage) return;
+  const args = {
+    tabPage,
+    view,
+    viewName,
+    entity,
+    entityName,
+    EntityName: toCSharpName(entityName),
+    domain: getApiDomain(localStorage.selected_root_url),
+    rootUrlPath: getApiPath(localStorage.selected_root_url),
+  };
+  const snippet = window.codeSnippets.view;
+  const data = {
+    explainedDenyRoles: explainRoles(view.deny),
+    entityName,
+    viewName,
+    codeSnippetTabHeaders: Object.keys(snippet)
+      .map(
+        (lang, idx) =>
+          `<li role="presentation" ${idx ? '' : 'class="active"'}><a data-role="${lang}" onclick="activeRoleTab.call(this)">${lang}</a></li>`,
+      )
+      .join(''),
+    codeSnippetTabPages: Object.keys(snippet)
+      .map(
+        (lang, idx) =>
+          `<div class="tab-page ${lang} ${idx ? '' : 'active'}" data-role="${lang}">${snippet[lang]?.call(null, args) ?? ''}</div>`,
+      )
+      .join(''),
+    description: view.description,
+    outputModel: formatHintModel(view.codeHint?.output?.fields),
+    outputEmptyResult: JSON.stringify(view.emptyResult, null, 4),
+  };
+  tabPage.innerHTML =
+    renderTemplate('template-view', data) + renderTemplate('template-project-entity-view-page-codeSnippets', data);
+  initDom(tabPage);
+  if (!view.deny) tabPage.querySelector('.deny-roles')?.remove();
+
+  if (!Array.isArray(view.parameters) || !view.parameters.length) {
+    tabPage.querySelector('.parameters-input-pane')?.remove();
+  } else {
+    tabPage.querySelector('.parameters-list').innerHTML = view.parameters
+      .map((p) =>
+        renderTemplate('template-view-parameters', {
+          field: p.field,
+          type: (p.isArray ? 'array of ' : '') + (p.type ?? 'string'),
+          description: p.description ?? '',
+          defaultValue: p.defaultValue ? `, default (${p.defaultValue})` : '',
+          required: p.required ? 'required' : 'optional',
+        }),
+      )
+      .join('');
+  }
+  if (!view.codeHint?.output?.fields) {
+    tabPage.querySelector('.output-model')?.remove();
+  }
+  if (!view.emptyResult) {
+    tabPage.querySelector('.output-epmty-result')?.remove();
+  }
+  if (!view.codeHint?.output?.fields && !view.emptyResult) {
+    tabPage.querySelector('.output-pane')?.remove();
+  }
+
+  if (!view.description) {
+    tabPage.querySelector('.description')?.remove();
+  }
+  //callback(args);
+}
+
+window.codeSnippets = {
+  findMany: {
+    Javascript: (args) =>
+      renderTemplate('template-codeSnippets-findMany-Javascript', {
+        entityName: args.entityName,
+        allowPagingDisplay: args.action.pagingType && args.action.pagingType != 'None' ? 'inline' : 'none',
+        includeTotalDisplay: args.action.includeTotal ? 'inline' : 'none',
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+        allowSortingsDisplay: args.action.allowSortings ? 'inline' : 'none',
+        sortFields: args.action.allowSortings
+          ?.map(
+            (sort) =>
+              (sort.type === 'Desc' ? '-' : '') + renderTemplate('template-fields-inline', { fieldName: sort.field }),
+          )
+          .join(''),
+        limitDisplay: args.action.pagingType === 'LimitOffset' || args.action.pagingType === 'Page' ? 'inline' : 'none',
+        offsetDisplay: args.action.pagingType === 'LimitOffset' ? 'inline' : 'none',
+        pageDisplay: args.action.pagingType === 'Page' ? 'inline' : 'none',
+        vnTextDisplay: args.entity.features?.vn_text?.fields?.length ? 'inline' : 'none',
+        vnTextFields: args.entity.features?.vn_text?.fields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+        countAsyncDisplay: args.action.includeTotal ? 'inline' : 'none',
+      }),
+    JavascriptModel: (args) =>
+      renderTemplate('template-codeSnippets-findMany-JavascriptModel', {
+        undefinedModel: getModelOutput(args.action.returnableFields, args.entity.fields, { mode: 'model_undefined' }),
+        valueModel: getModelOutput(args.action.returnableFields, args.entity.fields, { mode: 'model' }),
+        nullModel: getModelOutput(args.action.returnableFields, args.entity.fields, { mode: 'model_null' }),
+      }),
+    CSharp: (args) =>
+      renderTemplate('template-codeSnippets-findMany-CSharp', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+        sortFields: args.action.allowSortings
+          ?.map(
+            (sort) =>
+              (sort.type === 'Desc' ? '-' : '') + renderTemplate('template-fields-inline', { fieldName: sort.field }),
+          )
+          .join(''),
+      }),
+    HTTP: (args) =>
+      renderTemplate('template-codeSnippets-findMany-HTTP', {
+        domain: args.domain,
+        rootUrlPath: args.rootUrlPath,
+        entityName: args.entityName,
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+        allowSortingsDisplay: args.action.allowSortings ? 'inline' : 'none',
+        sortFields: args.action.allowSortings
+          ?.map(
+            (sort) =>
+              (sort.type === 'Desc' ? '-' : '') + renderTemplate('template-fields-inline', { fieldName: sort.field }),
+          )
+          .join(''),
+        limitOffsetDisplay: args.action.pagingType === 'LimitOffset' ? 'inline' : 'none',
+        pageDisplay: args.action.pagingType === 'Page' ? 'inline' : 'none',
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    cURL: (args) =>
+      renderTemplate('template-codeSnippets-findMany-cURL', {
+        rootUrl: localStorage.selected_root_url,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+        allowSortingsDisplay: args.action.allowSortings ? 'inline' : 'none',
+        sortFields: args.action.allowSortings
+          ?.map(
+            (sort) =>
+              (sort.type === 'Desc' ? '-' : '') + renderTemplate('template-fields-inline', { fieldName: sort.field }),
+          )
+          .join(''),
+        limitOffsetDisplay: args.action.pagingType === 'LimitOffset' ? 'inline' : 'none',
+        pageDisplay: args.action.pagingType === 'Page' ? 'inline' : 'none',
+      }),
+    Java: (args) =>
+      renderTemplate('template-codeSnippets-findMany-Java', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+        allowSortingsDisplay: args.action.allowSortings ? 'inline' : 'none',
+        sortFields: args.action.allowSortings
+          ?.map(
+            (sort) =>
+              (sort.type === 'Desc' ? '-' : '') + renderTemplate('template-fields-inline', { fieldName: sort.field }),
+          )
+          .join(''),
+      }),
+    JavaAsync: (args) =>
+      renderTemplate('template-codeSnippets-findMany-JavaAsync', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+        allowSortingsDisplay: args.action.allowSortings ? 'inline' : 'none',
+        sortFields: args.action.allowSortings
+          ?.map(
+            (sort) =>
+              (sort.type === 'Desc' ? '-' : '') + renderTemplate('template-fields-inline', { fieldName: sort.field }),
+          )
+          .join(''),
+      }),
+  },
+  findById: {
+    Javascript: (args) =>
+      renderTemplate('template-codeSnippets-findById-Javascript', {
+        entityName: args.entityName,
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+      }),
+    JavascriptModel: (args) =>
+      renderTemplate('template-codeSnippets-findById-JavascriptModel', {
+        undefinedModel: getModelOutput(args.action.returnableFields, args.entity.fields, { mode: 'model_undefined' }),
+        valueModel: getModelOutput(args.action.returnableFields, args.entity.fields, { mode: 'model' }),
+        nullModel: getModelOutput(args.action.returnableFields, args.entity.fields, { mode: 'model_null' }),
+      }),
+    CSharp: (args) =>
+      renderTemplate('template-codeSnippets-findById-CSharp', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+      }),
+    HTTP: (args) =>
+      renderTemplate('template-codeSnippets-findById-HTTP', {
+        domain: args.domain,
+        rootUrlPath: args.rootUrlPath,
+        entityName: args.entityName,
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    cURL: (args) =>
+      renderTemplate('template-codeSnippets-findById-cURL', {
+        rootUrl: localStorage.selected_root_url,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+      }),
+    Java: (args) =>
+      renderTemplate('template-codeSnippets-findById-Java', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+      }),
+    JavaAsync: (args) =>
+      renderTemplate('template-codeSnippets-findById-JavaAsync', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        fields: args.action.returnableFields
+          ?.map((fieldName) => renderTemplate('template-fields-inline', { fieldName }))
+          .join(''),
+      }),
+  },
+  createOne: {
+    Javascript: (args) =>
+      renderTemplate('template-codeSnippets-createOne-Javascript', {
+        entityName: args.entityName,
+      }),
+    JavascriptModel: (args) =>
+      renderTemplate('template-codeSnippets-createOne-JavascriptModel', {
+        undefinedModel: getModelInput(args.action.exclude, args.entity.fields, {
+          mode: 'model_undefined',
+          excludeId: true,
+        }),
+        valueModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model', excludeId: true }),
+        nullModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model_null', excludeId: true }),
+      }),
+    CSharp: (args) =>
+      renderTemplate('template-codeSnippets-createOne-CSharp', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    HTTP: (args) =>
+      renderTemplate('template-codeSnippets-createOne-HTTP', {
+        domain: args.domain,
+        rootUrlPath: args.rootUrlPath,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    cURL: (args) =>
+      renderTemplate('template-codeSnippets-createOne-cURL', {
+        rootUrl: localStorage.selected_root_url,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    Java: (args) =>
+      renderTemplate('template-codeSnippets-createOne-Java', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    JavaAsync: (args) =>
+      renderTemplate('template-codeSnippets-createOne-JavaAsync', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+  },
+  createMany: {
+    Javascript: (args) =>
+      renderTemplate('template-codeSnippets-createMany-Javascript', {
+        entityName: args.entityName,
+      }),
+    JavascriptModel: (args) =>
+      renderTemplate('template-codeSnippets-createMany-JavascriptModel', {
+        undefinedModel: getModelInput(args.action.exclude, args.entity.fields, {
+          mode: 'model_undefined',
+          excludeId: true,
+        }),
+        valueModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model', excludeId: true }),
+        nullModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model_null', excludeId: true }),
+      }),
+    CSharp: (args) =>
+      renderTemplate('template-codeSnippets-createMany-CSharp', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    HTTP: (args) =>
+      renderTemplate('template-codeSnippets-createMany-HTTP', {
+        domain: args.domain,
+        rootUrlPath: args.rootUrlPath,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    cURL: (args) =>
+      renderTemplate('template-codeSnippets-createMany-cURL', {
+        rootUrl: localStorage.selected_root_url,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    Java: (args) =>
+      renderTemplate('template-codeSnippets-createMany-Java', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    JavaAsync: (args) =>
+      renderTemplate('template-codeSnippets-createMany-JavaAsync', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+  },
+  updateOne: {
+    Javascript: (args) =>
+      renderTemplate('template-codeSnippets-updateOne-Javascript', {
+        entityName: args.entityName,
+      }),
+    JavascriptModel: (args) =>
+      renderTemplate('template-codeSnippets-updateOne-JavascriptModel', {
+        undefinedModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model_undefined' }),
+        valueModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model' }),
+        nullModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model_null' }),
+      }),
+    CSharp: (args) =>
+      renderTemplate('template-codeSnippets-updateOne-CSharp', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    HTTP: (args) =>
+      renderTemplate('template-codeSnippets-updateOne-HTTP', {
+        domain: args.domain,
+        rootUrlPath: args.rootUrlPath,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    cURL: (args) =>
+      renderTemplate('template-codeSnippets-updateOne-cURL', {
+        rootUrl: localStorage.selected_root_url,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    Java: (args) =>
+      renderTemplate('template-codeSnippets-updateOne-Java', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    JavaAsync: (args) =>
+      renderTemplate('template-codeSnippets-updateOne-JavaAsync', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+  },
+  updateMany: {
+    Javascript: (args) =>
+      renderTemplate('template-codeSnippets-updateMany-Javascript', {
+        entityName: args.entityName,
+      }),
+    JavascriptModel: (args) =>
+      renderTemplate('template-codeSnippets-updateMany-JavascriptModel', {
+        undefinedModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model_undefined' }),
+        valueModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model' }),
+        nullModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model_null' }),
+      }),
+    CSharp: (args) =>
+      renderTemplate('template-codeSnippets-updateMany-CSharp', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    HTTP: (args) =>
+      renderTemplate('template-codeSnippets-updateMany-HTTP', {
+        domain: args.domain,
+        rootUrlPath: args.rootUrlPath,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    cURL: (args) =>
+      renderTemplate('template-codeSnippets-updateMany-cURL', {
+        rootUrl: localStorage.selected_root_url,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    Java: (args) =>
+      renderTemplate('template-codeSnippets-updateMany-Java', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    JavaAsync: (args) =>
+      renderTemplate('template-codeSnippets-updateMany-JavaAsync', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+  },
+  updatePartially: {
+    Javascript: (args) =>
+      renderTemplate('template-codeSnippets-updatePartially-Javascript', {
+        entityName: args.entityName,
+      }),
+    JavascriptModel: (args) =>
+      renderTemplate('template-codeSnippets-updatePartially-JavascriptModel', {
+        undefinedModel: getModelInput(args.action.exclude, args.entity.fields, {
+          mode: 'model_undefined',
+          optionalToAll: true,
+        }),
+        valueModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model', optionalToAll: true }),
+        nullModel: getModelInput(args.action.exclude, args.entity.fields, { mode: 'model_null', optionalToAll: true }),
+      }),
+    CSharp: (args) =>
+      renderTemplate('template-codeSnippets-updatePartially-CSharp', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    HTTP: (args) =>
+      renderTemplate('template-codeSnippets-updatePartially-HTTP', {
+        domain: args.domain,
+        rootUrlPath: args.rootUrlPath,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    cURL: (args) =>
+      renderTemplate('template-codeSnippets-updatePartially-cURL', {
+        rootUrl: localStorage.selected_root_url,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    Java: (args) =>
+      renderTemplate('template-codeSnippets-updatePartially-Java', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    JavaAsync: (args) =>
+      renderTemplate('template-codeSnippets-updatePartially-JavaAsync', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+  },
+  deleteOne: {
+    Javascript: (args) =>
+      renderTemplate('template-codeSnippets-deleteOne-Javascript', {
+        entityName: args.entityName,
+      }),
+    CSharp: (args) =>
+      renderTemplate('template-codeSnippets-deleteOne-CSharp', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    HTTP: (args) =>
+      renderTemplate('template-codeSnippets-deleteOne-HTTP', {
+        domain: args.domain,
+        rootUrlPath: args.rootUrlPath,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    cURL: (args) =>
+      renderTemplate('template-codeSnippets-deleteOne-cURL', {
+        rootUrl: localStorage.selected_root_url,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    Java: (args) =>
+      renderTemplate('template-codeSnippets-deleteOne-Java', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    JavaAsync: (args) =>
+      renderTemplate('template-codeSnippets-deleteOne-JavaAsync', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+  },
+  deleteMany: {
+    Javascript: (args) =>
+      renderTemplate('template-codeSnippets-deleteMany-Javascript', {
+        entityName: args.entityName,
+      }),
+    CSharp: (args) =>
+      renderTemplate('template-codeSnippets-deleteMany-CSharp', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    HTTP: (args) =>
+      renderTemplate('template-codeSnippets-deleteMany-HTTP', {
+        domain: args.domain,
+        rootUrlPath: args.rootUrlPath,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    cURL: (args) =>
+      renderTemplate('template-codeSnippets-deleteMany-cURL', {
+        rootUrl: localStorage.selected_root_url,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    Java: (args) =>
+      renderTemplate('template-codeSnippets-deleteMany-Java', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+    JavaAsync: (args) =>
+      renderTemplate('template-codeSnippets-deleteMany-JavaAsync', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+      }),
+  },
+  generalAction: {
+    Javascript: (args) =>
+      renderTemplate('template-codeSnippets-generalAction-Javascript', {
+        entityName: args.entityName,
+        httpMethod: getHttpMethod(args.actionName),
+        paramDisplay: args.action?.codeHint?.delegator?.param?.fields ? 'inline' : 'none',
+        bodyDisplay: args.action?.codeHint?.delegator?.requestBody?.fields ? 'inline' : 'none',
+      }),
+    CSharp: (args) =>
+      renderTemplate('template-codeSnippets-generalAction-CSharp', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        MethodName: toCSharpName(getHttpMethod(args.actionName)),
+      }),
+    HTTP: (args) =>
+      renderTemplate('template-codeSnippets-generalAction-HTTP', {
+        domain: args.domain,
+        rootUrlPath: args.rootUrlPath,
+        entityName: args.entityName,
+        httpMethod: getHttpMethod(args.actionName),
+        bodyDisplay: args.action?.codeHint?.delegator?.requestBody?.fields ? 'inline' : 'none',
+        noBodyDisplay: args.action?.codeHint?.delegator?.requestBody?.fields ? 'none' : 'inline',
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    cURL: (args) =>
+      renderTemplate('template-codeSnippets-generalAction-cURL', {
+        rootUrl: localStorage.selected_root_url,
+        entityName: args.entityName,
+        tokenDisplay: args.action.grant !== '*' ? 'inline' : 'none',
+      }),
+    Java: (args) =>
+      renderTemplate('template-codeSnippets-generalAction-Java', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        methodName: getHttpMethod(args.actionName),
+        MethodName: toCSharpName(getHttpMethod(args.actionName)),
+      }),
+    JavaAsync: (args) =>
+      renderTemplate('template-codeSnippets-generalAction-JavaAsync', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        methodName: getHttpMethod(args.actionName),
+        MethodName: toCSharpName(getHttpMethod(args.actionName)),
+      }),
+  },
+  view: {
+    Javascript: (args) =>
+      renderTemplate('template-codeSnippets-view-Javascript', {
+        entityName: args.entityName,
+        viewName: args.viewName,
+        parameters: args.view.parameters
+          ? '{\n        ' +
+            args.view.parameters
+              .map((p) => `${encodeHtml(p.field)}: <span class="place-holder">value_of_${encodeHtml(p.field)}</span>`)
+              .join(',\n        ') +
+            '\n    }'
+          : '',
+      }),
+    JavascriptModel: (args) =>
+      args.view.codeHint?.output?.fields
+        ? renderTemplate('template-codeSnippets-view-JavascriptModel', {
+            undefinedModel: formatHintModel(args.view.codeHint.output.fields, undefined, { mode: 'model_undefined' }),
+            valueModel: formatHintModel(args.view.codeHint.output.fields, undefined, { mode: 'model' }),
+            nullModel: formatHintModel(args.view.codeHint.output.fields, undefined, { mode: 'model_null' }),
+          })
+        : '',
+    CSharp: (args) =>
+      renderTemplate('template-codeSnippets-view-CSharp', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        grantDisplay: args.view.grant === '*' ? 'none' : 'inline',
+        Grant: toCSharpName(args.view.grant),
+        ViewName: toCSharpName(args.viewName),
+        parameters: args.view.parameters
+          ? args.view.parameters
+              .map(
+                (p) =>
+                  `${encodeHtml(toCSharpName(p.field))} = <span class="place-holder">value_of_${encodeHtml(p.field)}</span>`,
+              )
+              .join(',\n        ')
+          : '',
+      }),
+    HTTP: (args) =>
+      renderTemplate('template-codeSnippets-view-HTTP', {
+        domain: args.domain,
+        rootUrlPath: args.rootUrlPath,
+        entityName: args.entityName,
+        viewName: args.viewName,
+        tokenDisplay: args.view.grant !== '*' ? 'inline' : 'none',
+        parameters: args.view.parameters
+          ? '?' +
+            args.view.parameters
+              .map((p) => `${encodeHtml(p.field)}=<span class="place-holder">value_of_${encodeHtml(p.field)}</span>`)
+              .join('&')
+          : '',
+      }),
+    cURL: (args) =>
+      renderTemplate('template-codeSnippets-view-cURL', {
+        rootUrl: localStorage.selected_root_url,
+        entityName: args.entityName,
+        tokenDisplay: args.view.grant !== '*' ? 'inline' : 'none',
+        parameters: args.view.parameters
+          ? '?' +
+            args.view.parameters
+              .map((p) => `${encodeHtml(p.field)}=<span class="place-holder">value_of_${encodeHtml(p.field)}</span>`)
+              .join('&')
+          : '',
+      }),
+    Java: (args) =>
+      renderTemplate('template-codeSnippets-view-Java', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        viewName: args.viewName,
+        ViewName: toCSharpName(args.viewName),
+        parameters: args.view.parameters
+          ? args.view.parameters
+              .map(
+                (p) =>
+                  `arg.set${encodeHtml(toCSharpName(p.field))}(<span class="place-holder">value_of_${encodeHtml(p.field)}</span>);`,
+              )
+              .join(',\n    ')
+          : '',
+      }),
+    JavaAsync: (args) =>
+      renderTemplate('template-codeSnippets-view-JavaAsync', {
+        entityName: args.entityName,
+        EntityName: args.EntityName,
+        viewName: args.viewName,
+        ViewName: toCSharpName(args.viewName),
+        parameters: args.view.parameters
+          ? args.view.parameters
+              .map(
+                (p) =>
+                  `arg.set${encodeHtml(toCSharpName(p.field))}(<span class="place-holder">value_of_${encodeHtml(p.field)}</span>);`,
+              )
+              .join(',\n    ')
+          : '',
+      }),
+  },
+};
+
+function toggleParentClass() {
+  const clazz = $(this).data('toggledClass');
+  $(this).parent().toggleClass(clazz);
+  var hash = $(this).data('hash');
+  if (hash) {
+    location.hash = hash;
+  }
+  const computedStyle = getComputedStyle(this);
+  let stickyTop = 0;
+  if (computedStyle.position === 'sticky') {
+    stickyTop = parseInt(computedStyle.top);
+    if (isNaN(stickyTop)) stickyTop = 0;
+  }
+
+  if (!$(this).parent().hasClass(clazz)) {
+    const b = document.body; //IE 'quirks'
+    let d = document.documentElement; //IE with doctype
+    d = d.clientHeight ? d : b;
+
+    if (parseInt(d.scrollTop) > this.offsetTop - stickyTop) window.scrollTo(0, this.offsetTop - stickyTop);
+  }
+}
+
+function activeRoleTab() {
+  var role = $(this).data('role');
+  $(this).parent().parent().find('.active').removeClass('active');
+  $(this).parent().addClass('active');
+  $(this)
+    .parent()
+    .parent()
+    .parent()
+    .find('> .tab-pages > .tab-page')
+    .removeClass('active')
+    .filter(function () {
+      return $(this).data('role') === role;
+    })
+    .addClass('active');
+}
+
+function activeFirstChild() {
+  let dom = this;
+  dom = dom.children.length && dom.children[0];
+  if (!dom) return;
+  dom = dom.children.length && dom.children[0];
+  if (!dom) return;
+  dom.onclick && dom.onclick();
+}
+
+function gotoHash() {
+  if (!location.hash) return;
+
+  const m = location.hash.match(/^#(\$[\w-]+|\w+)(\.((views\.)?\w+))?$/);
+  if (!m) return;
+
+  const cardSelector = m[1].charAt(0) === '$' ? '#extension-' + m[1].substring(1) : '#entity-' + m[1];
+  let dom = document.querySelector(cardSelector);
+  if (!dom) return;
+
+  let top = dom.offsetTop;
+  dom = dom.firstElementChild;
+  if (!dom) return;
+  dom.onclick && dom.onclick();
+  let computedStyle = getComputedStyle(dom);
+  let stickyTop = 0;
+  if (computedStyle.position === 'sticky') {
+    stickyTop = parseInt(computedStyle.top);
+    if (isNaN(stickyTop)) stickyTop = 0;
+  }
+  window.scrollTo(0, top - stickyTop);
+
+  if (!m[3]) return;
+
+  const panelSelector =
+    m[1].charAt(0) === '$'
+      ? '#extension-' + m[1].substring(1) + '-' + m[3].replace(/[.]/g, '-')
+      : '#action-' + m[1] + '-' + m[3].replace(/[.]/g, '-');
+  dom = document.querySelector(panelSelector);
+  if (!dom) return;
+
+  top = dom.offsetTop;
+  dom = dom.firstElementChild;
+  if (!dom) return;
+  dom.onclick && dom.onclick();
+  computedStyle = getComputedStyle(dom);
+  stickyTop = 0;
+  if (computedStyle.position === 'sticky') {
+    stickyTop = parseInt(computedStyle.top);
+    if (isNaN(stickyTop)) stickyTop = 0;
+  }
+  window.scrollTo(0, top - stickyTop);
+}
+
+function copied() {
+  const dom = document.querySelector('#copied');
+  if (!dom) return;
+
+  dom.classList.add('show');
+  setTimeout(() => dom.classList.remove('show'), 1000);
+}
+
+function initDom(dom) {
+  $('pre[data-language]', dom).each(function () {
+    const holder = document.createElement('div');
+    holder.className = 'command-bar';
+    const copyButton = document.createElement('a');
+    copyButton.innerHTML = 'Copy';
+    holder.appendChild(copyButton);
+    $(this).prepend(holder);
+    copyButton.onclick = function () {
+      if (location.protocol !== 'https:' && location.protocol !== 'file:') {
+        alert('Can not copy, please use https protocol!');
+        return;
+      }
+      const pre = $(this).parent().parent();
+      const commandBar = $(this).parent().detach();
+      try {
+        if (window.ClipboardItem) {
+          const content = pre.text();
+          const blob = new Blob([content], { type: 'text/plain' });
+          const text = new ClipboardItem({ 'text/plain': blob });
+          navigator.clipboard.write([text]);
+        } else {
+          if (document.body.createTextRange) {
+            const range = document.body.createTextRange();
+            range.moveToElementText(pre[0]);
+            range.select();
+          } else if (window.getSelection) {
+            const selection = window.getSelection();
+            const range = document.createRange();
+            range.selectNodeContents(pre[0]);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+          document.execCommand('copy');
+        }
+      } finally {
+        pre.prepend(commandBar);
+      }
+
+      copied();
+    };
+  });
+
+  $('pre[data-language=json] .command-bar', dom).each(function () {
+    const copyButton = document.createElement('a');
+    copyButton.innerHTML = 'Copy (without comment)';
+    $(this).prepend(copyButton);
+    copyButton.onclick = function () {
+      if (location.protocol !== 'https:' && location.protocol !== 'file:') {
+        alert('Can not copy, please use https protocol!');
+        return;
+      }
+      const pre = $(this).parent().parent();
+      const commandBar = $(this).parent().detach();
+      pre.find('.code-comment').each(function () {
+        this.dataset.innerHTML = this.innerHTML;
+        this.innerHTML = '';
+      });
+      try {
+        if (window.ClipboardItem) {
+          const content = pre.text();
+          const blob = new Blob([content], { type: 'text/plain' });
+          const text = new ClipboardItem({ 'text/plain': blob });
+          navigator.clipboard.write([text]);
+        } else {
+          if (document.body.createTextRange) {
+            const range = document.body.createTextRange();
+            range.moveToElementText(pre[0]);
+            range.select();
+          } else if (window.getSelection) {
+            const selection = window.getSelection();
+            const range = document.createRange();
+            range.selectNodeContents(pre[0]);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+          document.execCommand('copy');
+        }
+      } finally {
+        pre.prepend(commandBar);
+        pre.find('.code-comment').each(function () {
+          this.innerHTML = this.dataset.innerHTML;
+          delete this.dataset.innerHTML;
+        });
+      }
+
+      copied();
+    };
+  });
+}