Merge pull request #17 from siyuan-note/dev

Update
2023-06-28 21:29:16 +08:00 · 2023-06-28 21:29:16 +08:00 · f0ef27efab
commit f0ef27efab
parent d4f9ffa687 ddca3e0e24
11 changed files with 103 additions and 66 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,12 @@
+## 0.1.8
+
+* [Add protyleSlash to the plugin](https://github.com/siyuan-note/siyuan/issues/8599)
+* [Add plugin API protyle](https://github.com/siyuan-note/siyuan/issues/8445)
+
+## 0.1.7
+
+* [Support build js and json](https://github.com/siyuan-note/plugin-sample/pull/8)
+
+## 0.1.6
+
+* add `fetchPost` example
--- a/README.md
+++ b/README.md
@ -3,7 +3,7 @@

 [中文版](./README_zh_CN.md)

-> Consistent with [siyuan/plugin-sample](https://github.com/siyuan-note/plugin-sample) [v0.1.5](https://github.com/siyuan-note/plugin-sample/tree/v0.1.5).
+> Consistent with [siyuan/plugin-sample](https://github.com/siyuan-note/plugin-sample) [v0.1.8](https://github.com/siyuan-note/plugin-sample/tree/v0.1.8).



--- a/README_zh_CN.md
+++ b/README_zh_CN.md
@ -4,7 +4,7 @@
 [English](./README.md)


-> 本例和 [siyuan/plugin-sample](https://github.com/siyuan-note/plugin-sample) [v0.1.5](https://github.com/siyuan-note/plugin-sample/tree/v0.1.5)
+> 本例和 [siyuan/plugin-sample](https://github.com/siyuan-note/plugin-sample) [v0.1.8](https://github.com/siyuan-note/plugin-sample/tree/v0.1.8)

 1. 使用 vite 打包
 2. 使用符号链接、而不是把项目放到插件目录下的模式进行开发
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plugin-sample-vite-svelte",
-  "version": "0.1.5",
+  "version": "0.1.8",
  "type": "module",
  "description": "",
  "repository": "",
@ -22,7 +22,7 @@
    "minimist": "^1.2.8",
    "rollup-plugin-livereload": "^2.0.5",
    "sass": "^1.62.1",
-    "siyuan": "0.7.4",
+    "siyuan": "0.7.5",
    "svelte": "^3.57.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.4",
--- a/plugin.json
+++ b/plugin.json
@ -2,7 +2,7 @@
  "name": "plugin-sample-vite-svelte",
  "author": "frostime",
  "url": "https://github.com/siyuan-note/plugin-sample-vite-svelte",
-  "version": "0.1.5",
+  "version": "0.1.8",
  "minAppVersion": "2.9.0",
  "backends": ["all"],
  "frontends": ["all"],
--- a/src/hello.svelte
+++ b/src/hello.svelte
@ -1,61 +1,50 @@
 <script lang="ts">
    import { onDestroy, onMount } from "svelte";
-    import { version } from "@/api";
-    import { showMessage } from "siyuan";
-    import Typo from "@/libs/b3-typography.svelte";
+    import { version, sql as query } from "@/api";
+    import { showMessage, fetchPost, Protyle } from "siyuan";

-    export let name: string;
-    export let i18n: any;
+    export let app;

-    let time;
-    let ver;
+    let time: string = "";
+    let ver: string;

-    let intv1 = setInterval(async () => {
-        time = new Date();
-    }, 1000);
+    let divProtyle: HTMLDivElement;
+    let protyle: any;
+    let blockID: string = '';

    onMount(async () => {
-        time = new Date();
        ver = await version();
+        fetchPost("/api/system/currentTime", {}, (response) => {
+            time = new Date(response.data).toString();
+        });
+        protyle = await initProtyle();
    });

-    /**
-     * You must call this function when the component is destroyed.
-    */
    onDestroy(() => {
        showMessage("Hello panel closed");
-        clearInterval(intv1);
+        protyle.destroy();
    });

-    $: time_str = new Date(time).toLocaleTimeString();
-
+    async function initProtyle() {
+        let sql = "SELECT * FROM blocks ORDER BY RANDOM () LIMIT 1;";
+        let blocks: Block[] = await query(sql);
+        blockID = blocks[0].id;
+        return new Protyle(app, divProtyle, {
+            blockId: blockID
+        });
+    }
 </script>

-<div id="hello">
-    <div class="fn__flex">
-        <div class="fn__flex-1">
-            <h2>Hello {name} v{ver}</h2>
-        </div>
-        <div class="fn__flex-1 b3-label__text __text-right">
-            {time_str}
-        </div>
+<div class="b3-dialog__content">
+    <div>API demo:</div>
+    <div class="fn__hr" />
+    <div class="plugin-sample__time">
+        System current time: <span id="time">{time}</span>
    </div>
-
-    <Typo>
-        <h2>Wellcome to plugin sample with vite & svelte</h2>
-        <p>{@html i18n.makesure}</p>
-    </Typo>
-
+    <div class="fn__hr" />
+    <div class="fn__hr" />
+    <div>Protyle demo: id = {blockID}</div>
+    <div class="fn__hr" />
+    <div id="protyle" style="height: 360px;" bind:this={divProtyle}/>
 </div>

-<style lang="scss">
-    #hello {
-        margin: 20px;
-        div {
-            margin-bottom: 10px;
-        }
-    }
-    .__text-right {
-        text-align: right;
-    }
-</style>
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@ -8,6 +8,7 @@
    "showDialog": "Show dialog",
    "removedData": "Data deleted",
    "confirmRemove": "Confirm to delete the data in ${name}?",
+    "insertEmoji": "Insert Emoji",
    "name": "SiYuan",
    "hello": {
        "makesure": "Before using this template, please read the <a href=\"https://github.com/siyuan-note/plugin-sample\">offical sample</a>, make sure that you've known about the pipeline for plugin developing."
--- a/src/i18n/zh_CN.json
+++ b/src/i18n/zh_CN.json
@ -8,6 +8,7 @@
    "showDialog": "弹出一个对话框",
    "removedData": "数据已删除",
    "confirmRemove": "确认删除 ${name} 中的数据？",
+    "insertEmoji": "插入表情",
    "name": "思源",
    "hello": {
        "makesure": "使用这个模板之前，请阅读<a href=\"https://github.com/siyuan-note/plugin-sample\">官方教程</a>, 确保自己已经理解了插件的基本开发流程。"
--- a/src/index.scss
+++ b/src/index.scss
@ -1,3 +1,26 @@
 #helloPanel {
    border: 1px rgb(189, 119, 119) dashed;
+}
+
+.plugin-sample {
+    &__custom-tab {
+        background-color: var(--b3-theme-background);
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__custom-dock {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__time {
+        background: var(--b3-card-info-background);
+        border-radius: 4px;
+        padding: 2px 8px;
+    }
 }
--- a/src/index.ts
+++ b/src/index.ts
@ -9,7 +9,9 @@ import {
    getFrontend,
    getBackend,
    IModel,
-    Setting
+    Setting,
+    fetchPost,
+    Protyle
 } from "siyuan";
 import "@/index.scss";

@ -83,8 +85,7 @@ export default class PluginSample extends Plugin {
        new HelloExample({
            target: tabDiv,
            props: {
-                name: this.i18n.name,
-                i18n: this.i18n.hello
+                app: this.app,
            }
        });
        this.customTab = this.addTab({
@ -167,6 +168,15 @@ export default class PluginSample extends Plugin {
            actionElement: btnaElement,
        });

+        this.protyleSlash = [{
+            filter: ["insert emoji 😊", "插入表情 😊", "crbqwx"],
+            html: `<div class="b3-list-item__first"><span class="b3-list-item__text">${this.i18n.insertEmoji}</span><span class="b3-list-item__meta">😊</span></div>`,
+            id: "insertEmoji",
+            callback(protyle: Protyle) {
+                protyle.insert("😊");
+            }
+        }];
+
        console.log(this.i18n.helloPlugin);
    }

@ -225,11 +235,10 @@ export default class PluginSample extends Plugin {
                // hello.$destroy();
            },
        });
-        let hello = new HelloExample({
+        new HelloExample({
            target: dialog.element.querySelector("#helloPanel"),
            props: {
-                name: this.i18n.name,
-                i18n: this.i18n.hello
+                app: this.app,
            }
        });
    }
@ -240,10 +249,10 @@ export default class PluginSample extends Plugin {
        });
        menu.addItem({
            icon: "iconInfo",
-            label: "Dialog",
+            label: "Dialog(open help first)",
            accelerator: this.commands[0].customHotkey,
            click: () => {
-                this.showDialog()
+                this.showDialog();
            }
        });
        if (!this.isMobile) {
--- a/src/libs/setting-item.svelte
+++ b/src/libs/setting-item.svelte
@ -13,7 +13,7 @@
        min: number;
        max: number;
        step: number;
-    } = {min: 0, max: 100, step: 1}; // Use it if type is slider
+    } = { min: 0, max: 100, step: 1 }; // Use it if type is slider

    const dispatch = createEventDispatcher();

@ -76,15 +76,17 @@
        </select>
    {:else if type == "slider"}
        <!-- Slider -->
-        <input
-            class="b3-slider fn__size200"
-            id="fontSize"
-            min="{slider.min}"
-            max="{slider.max}"
-            step="{slider.step}"
-            type="range"
-            bind:value={settingValue}
-            on:change={changed}
-        />
+        <div class="b3-tooltips b3-tooltips__n" aria-label={settingValue}>
+            <input
+                class="b3-slider fn__size200"
+                id="fontSize"
+                min={slider.min}
+                max={slider.max}
+                step={slider.step}
+                type="range"
+                bind:value={settingValue}
+                on:change={changed}
+            />
+        </div>
    {/if}
 </label>