🎨 siyuan-note#8766

app/appearance/icons/ant/icon.json

@@ -2,5 +2,5 @@
   "name": "ant",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.23.0"
+  "version": "1.23.1"
 }

app/appearance/icons/index.html

@@ -508,12 +508,6 @@ <h2>SiYuan</h2>
         </svg>
         iconBazaar
     </div>
-    <div>
-        <svg>
-            <use xlink:href="#iconCalendar"></use>
-        </svg>
-        iconCalendar
-    </div>
     <div>
         <svg>
             <use xlink:href="#iconKeymap"></use>

app/appearance/icons/material/icon.json

@@ -2,5 +2,5 @@
   "name": "material",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.23.0"
+  "version": "1.23.1"
 }

app/src/menus/Menu.ts

@@ -206,7 +206,7 @@ export class MenuItem {
             if (typeof options.iconHTML === "string") {
                 html = options.iconHTML + html;
             } else {
-                html = `<svg class="b3-menu__icon${["HTML (SiYuan)", window.siyuan.languages.template].includes(options.label) ? " ft__error" : ""}" style="${options.icon === "iconClose" ? "height:10px;" : ""}"><use xlink:href="#${options.icon || ""}"></use></svg>${html}`;
+                html = `<svg class="b3-menu__icon ${options.iconClass || ""}" style="${options.icon === "iconClose" ? "height:10px;" : ""}"><use xlink:href="#${options.icon || ""}"></use></svg>${html}`;
             }
             if (options.accelerator) {
                 html += `<span class="b3-menu__accelerator">${updateHotkeyTip(options.accelerator)}</span>`;

app/src/menus/commonMenuItem.ts

@@ -431,6 +431,7 @@ export const exportMd = (id: string) => {
         icon: "iconUpload",
         submenu: [{
             label: window.siyuan.languages.template,
+            iconClass: "ft__error",
             icon: "iconMarkdown",
             click: async () => {
                 const result = await fetchSyncPost("/api/block/getRefText", {id: id});
@@ -536,6 +537,7 @@ export const exportMd = (id: string) => {
                 }
             }, {
                 label: "HTML (SiYuan)",
+                iconClass: "ft__error",
                 icon: "iconHTML5",
                 click: () => {
                     saveExport({type: "html", id});

app/src/protyle/render/av/addCol.ts

@@ -230,5 +230,30 @@ export const addCol = (protyle: IProtyle, blockElement: Element) => {
             });
         }
     });
+    menu.addItem({
+        icon: "iconMath",
+        label: window.siyuan.languages.template,
+        click() {
+            const id = Lute.NewNodeID();
+            transaction(protyle, [{
+                action: "addAttrViewCol",
+                name: window.siyuan.languages.template,
+                avID,
+                type: "template",
+                id
+            }], [{
+                action: "removeAttrViewCol",
+                id,
+                avID,
+            }]);
+            addAttrViewColAnimation({
+                blockElement: blockElement,
+                protyle: protyle,
+                type: "template",
+                name: window.siyuan.languages.template,
+                id
+            });
+        }
+    });
     return menu;
 };

app/src/protyle/render/av/blockAttr.ts

@@ -47,6 +47,9 @@ export const genAVValueHTML = (value: IAVCellValue) => {
 <span class="fn__space"></span>
 <a href="tel:${value.phone.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconPhone"></use></svg></a>`;
             break;
+        case "template":
+            html = `<input value="${value.template.content}" class="b3-text-field b3-text-field--text fn__flex-1">`;
+            break;
         case "email":
             html = `<input value="${value.email.content}" class="b3-text-field b3-text-field--text fn__flex-1">
 <span class="fn__space"></span>
@@ -83,7 +86,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle?: IP
     </div>
     <div data-av-id="${table.avID}" data-col-id="${item.values[0].keyID}" data-block-id="${item.values[0].blockID}" data-id="${item.values[0].id}" data-type="${item.values[0].type}" 
 data-options="${item.key?.options ? escapeAttr(JSON.stringify(item.key.options)) : "[]"}"
-class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}">
+class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "template"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}">
         ${genAVValueHTML(item.values[0])}
     </div>
 </div>`;
@@ -117,7 +120,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
         element.querySelectorAll(".b3-text-field--text").forEach((item: HTMLInputElement) => {
             item.addEventListener("change", () => {
                 let value;
-                if (["url", "text", "email", "phone"].includes(item.parentElement.dataset.type)) {
+                if (["url", "text", "email", "phone", "template"].includes(item.parentElement.dataset.type)) {
                     value = {
                         [item.parentElement.dataset.type]: {
                             content: item.value

app/src/protyle/render/av/cell.ts

@@ -85,7 +85,7 @@ export const genCellValue = (colType: TAVCol, value: string | any) => {
                     }
                 };
             }
-        } else if (["text", "block", "url", "phone", "email"].includes(colType)) {
+        } else if (["text", "block", "url", "phone", "email", "template"].includes(colType)) {
             cellValue = {
                 type: colType,
                 [colType]: {
@@ -353,7 +353,9 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
     const blockElement = hasClosestBlock(cellElements[0]);
     if (["text", "url", "email", "phone", "block"].includes(type)) {
         html = `<textarea ${style} class="b3-text-field">${cellElements[0].firstElementChild.textContent}</textarea>`;
-    } else if (type === "number") {
+    } else if (type === "template") {
+        html = `<textarea ${style} class="b3-text-field">${cellElements[0].firstElementChild.getAttribute("data-content")}</textarea>`;
+    }else if (type === "number") {
         html = `<input type="number" value="${cellElements[0].firstElementChild.getAttribute("data-content")}" ${style} class="b3-text-field">`;
     } else if (["select", "mSelect"].includes(type) && blockElement) {
         openMenuPanel({protyle, blockElement, type: "select", cellElements});

app/src/protyle/render/av/col.ts

@@ -251,6 +251,8 @@ export const getColIconByType = (type: TAVCol) => {
             return "iconEmail";
         case "phone":
             return "iconPhone";
+        case "template":
+            return "iconMath";
     }
 };
 

app/src/protyle/render/av/filter.ts

@@ -11,7 +11,7 @@ export const getDefaultOperatorByType = (type: TAVCol) => {
     if (type === "number" || type === "select") {
         return "=";
     }
-    if (["text", "mSelect", "url", "block", "email", "phone"].includes(type)) {
+    if (["text", "mSelect", "url", "block", "email", "phone", "template"].includes(type)) {
         return "Contains";
     }
 };
@@ -140,6 +140,7 @@ export const setFilter = (options: {
         case "text":
         case "url":
         case "phone":
+        case "template":
         case "email":
             selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">${window.siyuan.languages.filterOperatorIs}</option>
 <option ${"!=" === options.filter.operator ? "selected" : ""} value="!=">${window.siyuan.languages.filterOperatorIsNot}</option>
@@ -214,7 +215,7 @@ export const setFilter = (options: {
                 }
             });
         });
-    } else if (["text", "url", "block", "email", "phone"].includes(colData.type)) {
+    } else if (["text", "url", "block", "email", "phone", "template"].includes(colData.type)) {
         menu.addItem({
             iconHTML: "",
             label: `<input style="margin: 4px 0" value="${options.filter.value ? options.filter.value[colData.type as "text"].content : ""}" class="b3-text-field fn__size200">`

app/src/protyle/render/av/render.ts

@@ -64,6 +64,8 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                         let text = "";
                         if (cell.valueType === "text") {
                             text = `<span class="av__celltext">${cell.value?.text.content || ""}</span>`;
+                        } else if (cell.valueType === "template") {
+                            text = `<span class="av__celltext" data-content="${cell.value?.template.content || ""}">${cell.value?.template.renderedContent || ""}</span>`;
                         } else if (["url", "email", "phone"].includes(cell.valueType)) {
                             const urlContent = cell.value ? cell.value[cell.valueType as "url"].content : "";
                             // https://github.com/siyuan-note/siyuan/issues/9291

app/src/types/index.d.ts

@@ -62,6 +62,7 @@ type TAVCol =
     | "email"
     | "phone"
     | "mAsset"
+    | "template"
 type THintSource = "search" | "av" | "hint";
 type TAVFilterOperator =
     "="
@@ -929,6 +930,7 @@ interface IModels {
 }
 
 interface IMenu {
+    iconClass?: string,
     label?: string,
     click?: (element: HTMLElement, event: MouseEvent) => boolean | void | Promise<boolean | void>
     type?: "separator" | "submenu" | "readonly",
@@ -1071,6 +1073,10 @@ interface IAVCellValue {
     email?: {
         content: string
     }
+    template?: {
+        content: string
+        renderedContent?:string
+    }
     date?: IAVCellDateValue
 }