🎨 feat: Add "custom setting-items" example

Author: frostime

src/index.ts

@@ -31,7 +31,7 @@ const DOCK_TYPE = "dock_tab";
 
 export default class PluginSample extends Plugin {
 
-    private customTab: () => IModel;
+    customTab: () => IModel;
     private isMobile: boolean;
     private blockIconEventBindThis = this.blockIconEvent.bind(this);
     private settingUtils: SettingUtils;
@@ -262,6 +262,28 @@ export default class PluginSample extends Plugin {
                 }
             }
         });
+        this.settingUtils.addItem({
+            key: "Custom Element",
+            value: "",
+            type: "custom",
+            direction: "row",
+            title: "Custom Element",
+            description: "Custom Element description",
+            //Any custom element must offer the following methods
+            createElement: (currentVal: any) => {
+                let div = document.createElement('div');
+                div.style.border = "1px solid var(--b3-theme-primary)";
+                div.contentEditable = "true";
+                div.textContent = currentVal;
+                return div;
+            },
+            getEleVal: (ele: HTMLElement) => {
+                return ele.textContent;
+            },
+            setEleVal: (ele: HTMLElement, val: any) => {
+                ele.textContent = val;
+            }
+        });
         this.settingUtils.addItem({
             key: "Hint",
             value: "",
@@ -437,7 +459,7 @@ export default class PluginSample extends Plugin {
             title: `SiYuan ${Constants.SIYUAN_VERSION}`,
             content: `<div id="helloPanel" class="b3-dialog__content"></div>`,
             width: this.isMobile ? "92vw" : "720px",
-            destroyCallback(options) {
+            destroyCallback() {
                 // hello.$destroy();
             },
         });

src/libs/index.d.ts

@@ -3,10 +3,10 @@
  * @Author       : frostime
  * @Date         : 2024-04-19 18:30:12
  * @FilePath     : /src/libs/index.d.ts
- * @LastEditTime : 2024-04-30 16:26:23
+ * @LastEditTime : 2024-04-30 16:39:54
  * @Description  : 
  */
-type TSettingItemType = "checkbox" | "select" | "textinput" | "textarea" | "number" | "slider" | "button" | "hint";
+type TSettingItemType = "checkbox" | "select" | "textinput" | "textarea" | "number" | "slider" | "button" | "hint" | "custom";
 
 interface ISettingItemCore {
     type: TSettingItemType;

src/libs/setting-utils.ts

@@ -3,7 +3,7 @@
  * @Author       : frostime
  * @Date         : 2023-12-17 18:28:19
  * @FilePath     : /src/libs/setting-utils.ts
- * @LastEditTime : 2024-04-30 16:28:00
+ * @LastEditTime : 2024-04-30 16:42:23
  * @Description  : 
  */
 
@@ -21,25 +21,23 @@ const createDefaultGetter = (type: TSettingItemType) => {
         case 'checkbox':
             getter = (ele: HTMLInputElement) => {
                 return ele.checked;
-            }
+            };
             break;
         case 'select':
         case 'slider':
         case 'textinput':
         case 'textarea':
             getter = (ele: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => {
                 return ele.value;
-            }
+            };
             break;
         case 'number':
             getter = (ele: HTMLInputElement) => {
                 return parseInt(ele.value);
             }
             break;
         default:
-            getter = (ele: HTMLElement) => {
-                return ele?.textContent;
-            }
+            getter = () => null;
             break;
     }
     return getter;
@@ -57,7 +55,7 @@ const createDefaultSetter = (type: TSettingItemType) => {
         case 'checkbox':
             setter = (ele: HTMLInputElement, value: any) => {
                 ele.checked = value;
-            }
+            };
             break;
         case 'select':
         case 'slider':
@@ -66,7 +64,10 @@ const createDefaultSetter = (type: TSettingItemType) => {
         case 'number':
             setter = (ele: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, value: any) => {
                 ele.value = value;
-            }
+            };
+            break;
+        default:
+            setter = () => {};
             break;
     }
     return setter;
@@ -240,6 +241,13 @@ export class SettingUtils {
 
     addItem(item: ISettingUtilsItem) {
         this.settings.set(item.key, item);
+        const IsCustom = item.type === 'custom';
+        let error = IsCustom && (item.createElement === undefined || item.getEleVal === undefined || item.setEleVal === undefined);
+        if (error) {
+            console.error('The custom setting item must have createElement, getEleVal and setEleVal methods');
+            return;
+        }
+
         if (item.getEleVal === undefined) {
             item.getEleVal = createDefaultGetter(item.type);
         }