mushroom-cli 1.2.0-alpha.1 → 1.2.0-alpha.11

package/docs/docs.v2.js

@@ -0,0 +1,1633 @@
+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();
+        }
+    });
+}