✨ feat: examples

auto-i18n.project.yaml

@@ -18,19 +18,17 @@ code_files:
 - src/**/*.ts
 - src/**/*.svelte
 dict:
-  - 思源翻译为 SiYuan
-  - QueryView, DataView 这些专有名词, 不用翻译, 保持原名
-  - "视图组件" 翻译成 "View Component"
-  - "块" 是思源笔记中的基本单位，翻译成 Block
-  - 嵌入块 翻译成 Embed Block
-  - "反向链接" 或者 "反链" 翻译成 "backlink"
+# - 思源翻译为 SiYuan
+# - QueryView, DataView 这些专有名词, 不用翻译, 保持原名
+# - "视图组件" 翻译成 "View Component"
+# - "块" 是思源笔记中的基本单位，翻译成 Block
+# - 嵌入块 翻译成 Embed Block
+# - "反向链接" 或者 "反链" 翻译成 "backlink"
 export_dir: src/types
 i18n_dir: public/i18n
 i18n_pattern: \(\(`(.+?)`\)\)
 i18n_var_mid: pathname
 i18n_var_prefix: i18n
 main_file: zh_CN.yaml
 strategy: diff
-global_config:
-  GPT:
-    model: doubao-pro-128k
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sy-query-view",
-  "version": "1.0.0-beta9",
+  "version": "1.0.0-beta10",
   "type": "module",
   "description": "This is a sample plugin based on vite and svelte for Siyuan (https://b3log.org/siyuan). Created with siyuan-plugin-cli v2.4.5.",
   "repository": "https://github.com/frostime/sy-query-view",

plugin.json

@@ -2,7 +2,7 @@
   "name": "sy-query-view",
   "author": "frostime",
   "url": "https://github.com/frostime/sy-query-view",
-  "version": "1.0.0-beta9",
+  "version": "1.0.0-beta10",
   "minAppVersion": "3.1.14",
   "backends": [
     "windows",

public/i18n/en_US.yaml

@@ -12,6 +12,7 @@ src_core_editorts:
 src_core_indexts:
   custom_queryview_error: 'Note: There is a problem with the format of the custom
     QueryView script, and it cannot be imported normally!'
+  reload_custom_comp: Reload Custom
 src_dataquery_componentsts:
   mermaid_render_failed: Mermaid rendering failed, please check the code
 src_dataquery_editorts:
@@ -38,6 +39,8 @@ src_userhelp_indexts:
   download: Download
   help_doc: Help Document
   help_doc_2: Help Document
+src_userhelp_sydocts:
+  plugin_update_doc: Detected plugin version update, updating documentation, please wait...
 user_help:
   ahead_hint: |
     > 💡 Note: This document is automatically generated by the SiYuan Query&View plugin **{{version}}** for the plugin's README documentation.

public/i18n/zh_CN.yaml

@@ -7,6 +7,7 @@ src_core_editorts:
   unusableexteditorcmd: 无法使用外部编辑器命令 {0}, 请检查命令的正确性
 src_core_indexts:
   custom_queryview_error: '注意: 自定义的 QueryView 脚本格式存在问题，无法正常导入!'
+  reload_custom_comp: 重载自定义组件
 src_dataquery_componentsts:
   mermaid_render_failed: Mermaid 渲染失败, 请检查代码
 src_dataquery_editorts:
@@ -19,8 +20,7 @@ src_setting_indexts:
   echarts_renderer_option: Echarts 渲染器，可以为 "canvas" 或 "svg", 默认 "svg"
   import_failed: 导入失败, 详细情况请检查控制台报错
   import_success: 导入成功, 共 {cnt} 个自定义视图
-  local_command_desc: |
-    本地用于打开代码编辑器的命令, 默认为 "code -w {{filepath}}" 代表使用 VSCode 打开, 其中 {{filepath}} 在运行时会被替换为真实的代码文件
+  local_command_desc: '本地用于打开代码编辑器的命令, 默认为 "code -w {{filepath}}" 代表使用 VSCode 打开, 其中 {{filepath}} 在运行时会被替换为真实的代码文件'
   open_local_editor: ✒️ 打开本地编辑器
   reload: 重新加载
   table_default_columns: 🔑 表格视图默认显示列
@@ -32,6 +32,8 @@ src_userhelp_indexts:
   download: 下载
   help_doc: 帮助文档
   help_doc_2: 帮助文档
+src_userhelp_sydocts:
+  plugin_update_doc: 检查到插件版本已更新，正在更新文档，请稍等...
 user_help:
   ahead_hint: |
     > 💡 注: 本文档由 SiYuan Query&View 插件 **{{version}}** 版自动生成，为插件的 README 文档。

public/types.d.ts

@@ -2,7 +2,7 @@
  * @name sy-query-view
  * @author frostime
  * @version 1.0.0-beta9
- * @updated 2024-12-11T08:30:13.446Z
+ * @updated 2024-12-11T10:23:43.467Z
  */
 
 declare module 'siyuan' {

src/api.ts

@@ -385,7 +385,7 @@ export async function removeFile(path: string) {
 
 
 
-export async function readDir(path: string): Promise<IResReadDir> {
+export async function readDir(path: string): Promise<IResReadDir[]> {
     let data = {
         path: path
     }

src/core/data-view.ts

@@ -3,7 +3,7 @@
  * @Author       : frostime
  * @Date         : 2024-12-02 10:15:04
  * @FilePath     : /src/core/data-view.ts
- * @LastEditTime : 2024-12-10 16:11:54
+ * @LastEditTime : 2024-12-11 18:10:46
  * @Description  : 
  */
 import {
@@ -219,7 +219,23 @@ export class DataView extends UseStateMixin implements IDataView {
         this._element = document.createElement("div");
         this.lute = getLute();
 
-        this._element.classList.add(styles["data-query-embed"], 'protyle-wysiwyg__embed', 'protyle-custom');
+        this._element.classList.add(styles["data-query-embed"], 'protyle-custom');
+        /** 
+         * 加了这一行有时候会出现 getBlockInfo 的问题, 样例:
+            //!js
+            let dv = Query.DataView(protyle, item, top);
+            const state = dv.useState('counter', 1);
+            const button = document.createElement('button');
+            button.textContent = '+1';
+            button.onclick = (e) => {
+                state.value += 1;
+                dv.repaint();
+            }
+            dv.addcols([button, dv.md(`State = ${state()}`)]);
+
+            dv.render();
+         */
+        // this._element.classList.add('protyle-wysiwyg__embed');
         this._element.dataset.id = window.Lute.NewNodeID();
 
         this.thisEmbedNode.lastElementChild.insertAdjacentElement("beforebegin", this._element);
@@ -478,6 +494,11 @@ export class DataView extends UseStateMixin implements IDataView {
     markdown(md: string) {
         let elem = newViewWrapper();
         elem.innerHTML = this.lute.Md2BlockDOM(md);
+        // elem.querySelectorAll('[contenteditable]').forEach
+        let editableNodeList = elem.querySelectorAll('[contenteditable="true"]');
+        editableNodeList.forEach(node => {
+            node.setAttribute('contenteditable', 'false');
+        });
         return elem;
     }
 

src/core/index.ts

@@ -3,24 +3,24 @@
  * @Author       : frostime
  * @Date         : 2024-05-08 15:00:37
  * @FilePath     : /src/core/index.ts
- * @LastEditTime : 2024-12-08 21:34:19
+ * @LastEditTime : 2024-12-11 18:17:26
  * @Description  :
  *      - Fork from project https://github.com/zxhd863943427/siyuan-plugin-data-query
  *      - 基于该项目的 v0.0.7 版本进行修改
  */
 // import type FMiscPlugin from "@/index";
 import {
-    Plugin,
     showMessage,
 } from "siyuan";
 
 import { embedBlockEvent } from "./editor";
 import Query from "./query";
 import { finalizeAllDataviews, onProtyleDestroyed } from "./finalize";
 import { loadUserCustomView } from "./custom-view";
+import type QueryViewPlugin from "..";
+import { i18n } from "..";
 
-
-const load = (plugin: Plugin) => {
+const load = (plugin: QueryViewPlugin) => {
 
     globalThis.Query = Query;
 
@@ -38,9 +38,24 @@ const load = (plugin: Plugin) => {
             console.debug(`Load custom query-view: ${Object.keys(status.custom)}`);
         }
     });
+
+    plugin.registerMenuItem({
+        //@ts-ignore
+        label: i18n.src_core_indexts.reload_custom_comp,
+        icon: 'iconAccount',
+        click: async () => {
+            const result = await loadUserCustomView();
+            if (result.ok) {
+                let cnt = Object.keys(result.custom).length;
+                showMessage(i18n.src_setting_indexts.import_success.replace('{cnt}', `${cnt}`), 3000, 'info');
+            } else {
+                showMessage(i18n.src_setting_indexts.import_failed, 3000, 'error');
+            }
+        }
+    });
 }
 
-const unload = (plugin: Plugin) => {
+const unload = (plugin: QueryViewPlugin) => {
 
     finalizeAllDataviews();
 

src/setting/index.ts

@@ -106,6 +106,7 @@ export const load = async (plugin: Plugin) => {
             svg: 'svg'
         }
     });
+    /* For Debug Only
     settingUtils.addItem({
         type: 'hint',
         title: 'Session Storage Size',
@@ -152,6 +153,7 @@ export const load = async (plugin: Plugin) => {
             return div;
         }
     });
+    */
     const configs = await settingUtils.load();
     delete configs.codeEditor;
     defaultSetting = { ...defaultSetting, ...configs };

src/types/i18n.d.ts

@@ -9,6 +9,7 @@ interface I18n {
     };
     src_core_indexts: {
         custom_queryview_error: string;
+        reload_custom_comp: string;
     };
     src_dataquery_componentsts: {
         mermaid_render_failed: string;
@@ -37,6 +38,9 @@ interface I18n {
         help_doc: string;
         help_doc_2: string;
     };
+    src_userhelp_sydocts: {
+        plugin_update_doc: string;
+    };
     user_help: {
         ahead_hint: string;
     };

src/user-help/examples.ts

@@ -0,0 +1,60 @@
+import { getFileBlob, readDir } from "@/api";
+import type QueryViewPlugin from ".."
+import { getLute } from "@/core/lute";
+import { openTab } from "siyuan";
+
+let exampleHTML = '';
+
+const addSection = (title: string, content: string) => {
+let newpart = `
+<h4>${title}</h4>
+
+<textarea class="form-control" rows="15" readonly>${content}</textarea>
+`;
+    exampleHTML += newpart;
+}
+
+const loadJsContent = async (path: string) => {
+    const blob = await getFileBlob(path);
+    const content = await blob.text();
+    return content;
+}
+
+export const useExamples = async (plugin: QueryViewPlugin) => {
+    const examplePath = `/data/plugins/${plugin.name}/example`;
+    const files = await readDir(examplePath);
+
+    const routePrefix = `/plugins/${plugin.name}/example`;
+    for (const file of files) {
+        let name = file.name;
+        const filePath = `${examplePath}/${name}`;
+        const content = await loadJsContent(filePath);
+        addSection(name, content);
+    }
+
+    plugin.addTab({
+        type: 'js-example',
+        init() {
+            const readme = document.createElement('div');
+            readme.classList.add('item__readme');
+            readme.classList.add('b3-typography');
+            readme.classList.add('b3-typography--default');
+            readme.innerHTML = exampleHTML;
+            readme.style.padding = '10px 15px';
+            this.element.appendChild(readme);
+        }
+    });
+
+    return {
+        open() {
+            openTab({
+                app: plugin.app,
+                custom: {
+                    id: `${plugin.name}js-example`,
+                    title: 'Query&View Examples',
+                    icon: 'iconCode'
+                }
+            })
+        }
+    }
+}