-
appId:
-
-
${app?.appId}
-
-
API demo:
diff --git a/public/i18n/en_US.json b/src/i18n/en_US.json
similarity index 80%
rename from public/i18n/en_US.json
rename to src/i18n/en_US.json
index 7a11256..c7ed102 100644
--- a/public/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -14,7 +14,5 @@
"name": "SiYuan",
"hello": {
"makesure": "Before using this template, please read the
offical sample, make sure that you've known about the pipeline for plugin developing."
- },
- "hintTitle":"About",
- "hintDesc":"
plugin-sample-vite-svelte@frostime
@88250
@zxkmm"
+ }
}
\ No newline at end of file
diff --git a/public/i18n/zh_CN.json b/src/i18n/zh_CN.json
similarity index 78%
rename from public/i18n/zh_CN.json
rename to src/i18n/zh_CN.json
index 6600f6a..49a7af8 100644
--- a/public/i18n/zh_CN.json
+++ b/src/i18n/zh_CN.json
@@ -14,7 +14,5 @@
"name": "思源",
"hello": {
"makesure": "使用这个模板之前，请阅读
官方教程, 确保自己已经理解了插件的基本开发流程。"
- },
- "hintTitle": "关于",
- "hintDesc": "
🔗 plugin-sample-vite-svelte💻 @frostime
💻 @88250
💻 @zxkmm"
+ }
}
\ No newline at end of file
diff --git a/src/index.scss b/src/index.scss
index e69de29..c8efd4f 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -0,0 +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;
+ }
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 5b50c49..aa7bd75 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,22 +9,16 @@ import {
getFrontend,
getBackend,
IModel,
- Protyle,
- openWindow,
- IOperation,
- Constants,
- openMobileFileById,
- lockScreen,
- ICard,
- ICardData
+ Setting,
+ fetchPost,
+ Protyle, openWindow, IOperation
} from "siyuan";
import "@/index.scss";
import HelloExample from "@/hello.svelte";
-import SettingExample from "@/setting-example.svelte";
+import SettingPannel from "@/libs/setting-panel.svelte";
import { SettingUtils } from "./libs/setting-utils";
-import { svelteDialog } from "./libs/dialog";
const STORAGE_NAME = "menu-config";
const TAB_TYPE = "custom_tab";
@@ -32,7 +26,7 @@ const DOCK_TYPE = "dock_tab";
export default class PluginSample extends Plugin {
- customTab: () => IModel;
+ private customTab: () => IModel;
private isMobile: boolean;
private blockIconEventBindThis = this.blockIconEvent.bind(this);
private settingUtils: SettingUtils;
@@ -121,66 +115,38 @@ export default class PluginSample extends Plugin {
size: { width: 200, height: 0 },
icon: "iconSaving",
title: "Custom Dock",
- hotkey: "⌥⌘W",
},
data: {
text: "This is my custom dock"
},
type: DOCK_TYPE,
- resize() {
- console.log(DOCK_TYPE + " resize");
- },
- update() {
- console.log(DOCK_TYPE + " update");
- },
- init: (dock) => {
- if (this.isMobile) {
- dock.element.innerHTML = `
-
- ${dock.data.text}
-
-
`;
- } else {
- dock.element.innerHTML = `
-
-
-
- Custom Dock
-
-
-
-
-
- ${dock.data.text}
-
-
`;
- }
+ init() {
+ this.element.innerHTML = `
+
+
+
+ Custom Dock
+
+
+
+
+
+ ${this.data.text}
+
+
`;
},
destroy() {
console.log("destroy dock:", DOCK_TYPE);
}
});
- this.settingUtils = new SettingUtils({
- plugin: this, name: STORAGE_NAME
- });
+ this.settingUtils = new SettingUtils(this, STORAGE_NAME);
this.settingUtils.addItem({
key: "Input",
value: "",
type: "textinput",
title: "Readonly text",
description: "Input description",
- action: {
- // Called when focus is lost and content changes
- callback: () => {
- // Return data and save it in real time
- let value = this.settingUtils.takeAndSave("Input");
- console.log(value);
- }
- }
});
this.settingUtils.addItem({
key: "InputArea",
@@ -188,14 +154,6 @@ export default class PluginSample extends Plugin {
type: "textarea",
title: "Readonly text",
description: "Input description",
- // Called when focus is lost and content changes
- action: {
- callback: () => {
- // Read data in real time
- let value = this.settingUtils.take("InputArea");
- console.log(value);
- }
- }
});
this.settingUtils.addItem({
key: "Check",
@@ -203,31 +161,24 @@ export default class PluginSample extends Plugin {
type: "checkbox",
title: "Checkbox text",
description: "Check description",
- action: {
- callback: () => {
- // Return data and save it in real time
- let value = !this.settingUtils.get("Check");
- this.settingUtils.set("Check", value);
- console.log(value);
- }
- }
});
this.settingUtils.addItem({
key: "Select",
value: 1,
type: "select",
- title: "Select",
+ title: "Readonly text",
description: "Select description",
- options: {
- 1: "Option 1",
- 2: "Option 2"
- },
- action: {
- callback: () => {
- // Read data in real time
- let value = this.settingUtils.take("Select");
- console.log(value);
- }
+ select: {
+ options: [
+ {
+ val: 1,
+ text: "Option 1"
+ },
+ {
+ val: 2,
+ text: "Option 2"
+ }
+ ]
}
});
this.settingUtils.addItem({
@@ -236,18 +187,10 @@ export default class PluginSample extends Plugin {
type: "slider",
title: "Slider text",
description: "Slider description",
- direction: "column",
slider: {
min: 0,
max: 100,
step: 1,
- },
- action:{
- callback: () => {
- // Read data in real time
- let value = this.settingUtils.take("Slider");
- console.log(value);
- }
}
});
this.settingUtils.addItem({
@@ -263,42 +206,6 @@ 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: "",
- type: "hint",
- title: this.i18n.hintTitle,
- description: this.i18n.hintDesc,
- });
-
- try {
- this.settingUtils.load();
- } catch (error) {
- console.error("Error loading settings storage, probably empty config json:", error);
- }
-
this.protyleSlash = [{
filter: ["insert emoji 😊", "插入表情 😊", "crbqwx"],
@@ -309,38 +216,6 @@ export default class PluginSample extends Plugin {
}
}];
- this.protyleOptions = {
- toolbar: ["block-ref",
- "a",
- "|",
- "text",
- "strong",
- "em",
- "u",
- "s",
- "mark",
- "sup",
- "sub",
- "clear",
- "|",
- "code",
- "kbd",
- "tag",
- "inline-math",
- "inline-memo",
- "|",
- {
- name: "insert-smail-emoji",
- icon: "iconEmoji",
- hotkey: "⇧⌘I",
- tipPosition: "n",
- tip: this.i18n.insertEmoji,
- click(protyle: Protyle) {
- protyle.insert("😊");
- }
- }],
- };
-
console.log(this.i18n.helloPlugin);
}
@@ -348,14 +223,6 @@ export default class PluginSample extends Plugin {
// this.loadData(STORAGE_NAME);
this.settingUtils.load();
console.log(`frontend: ${getFrontend()}; backend: ${getBackend()}`);
-
- console.log(
- "Official settings value calling example:\n" +
- this.settingUtils.get("InputArea") + "\n" +
- this.settingUtils.get("Slider") + "\n" +
- this.settingUtils.get("Select") + "\n"
- );
-
let tabDiv = document.createElement("div");
new HelloExample({
target: tabDiv,
@@ -380,42 +247,26 @@ export default class PluginSample extends Plugin {
async onunload() {
console.log(this.i18n.byePlugin);
+ await this.settingUtils.save();
showMessage("Goodbye SiYuan Plugin");
console.log("onunload");
}
- uninstall() {
- console.log("uninstall");
- }
-
- async updateCards(options: ICardData) {
- options.cards.sort((a: ICard, b: ICard) => {
- if (a.blockID < b.blockID) {
- return -1;
- }
- if (a.blockID > b.blockID) {
- return 1;
- }
- return 0;
- });
- return options;
- }
-
/**
* A custom setting pannel provided by svelte
*/
openDIYSetting(): void {
let dialog = new Dialog({
title: "SettingPannel",
- content: `
`,
- width: "800px",
+ content: `
`,
+ width: "600px",
destroyCallback: (options) => {
console.log("destroyCallback", options);
//You'd better destroy the component when the dialog is closed
pannel.$destroy();
}
});
- let pannel = new SettingExample({
+ let pannel = new SettingPannel({
target: dialog.element.querySelector("#SettingPanel"),
});
}
@@ -456,30 +307,18 @@ export default class PluginSample extends Plugin {
}
private showDialog() {
- // let dialog = new Dialog({
- // title: `SiYuan ${Constants.SIYUAN_VERSION}`,
- // content: `
`,
- // width: this.isMobile ? "92vw" : "720px",
- // destroyCallback() {
- // // hello.$destroy();
- // },
- // });
- // new HelloExample({
- // target: dialog.element.querySelector("#helloPanel"),
- // props: {
- // app: this.app,
- // }
- // });
- svelteDialog({
- title: `SiYuan ${Constants.SIYUAN_VERSION}`,
+ let dialog = new Dialog({
+ title: "Hello World",
+ content: `
`,
width: this.isMobile ? "92vw" : "720px",
- constructor: (container: HTMLElement) => {
- return new HelloExample({
- target: container,
- props: {
- app: this.app,
- }
- });
+ destroyCallback(options) {
+ // hello.$destroy();
+ },
+ });
+ new HelloExample({
+ target: dialog.element.querySelector("#helloPanel"),
+ props: {
+ app: this.app,
}
});
}
@@ -588,22 +427,7 @@ export default class PluginSample extends Plugin {
});
}
});
- } else {
- menu.addItem({
- icon: "iconFile",
- label: "Open Doc(open help first)",
- click: () => {
- openMobileFileById(this.app, "20200812220555-lj3enxa");
- }
- });
}
- menu.addItem({
- icon: "iconLock",
- label: "Lockscreen",
- click: () => {
- lockScreen(this.app);
- }
- });
menu.addItem({
icon: "iconScrollHoriz",
label: "Event Bus",
@@ -668,18 +492,6 @@ export default class PluginSample extends Plugin {
click: () => {
this.eventBus.off("click-editortitleicon", this.eventBusLog);
}
- }, {
- icon: "iconSelect",
- label: "On click-flashcard-action",
- click: () => {
- this.eventBus.on("click-flashcard-action", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off click-flashcard-action",
- click: () => {
- this.eventBus.off("click-flashcard-action", this.eventBusLog);
- }
}, {
icon: "iconSelect",
label: "On open-noneditableblock",
@@ -716,18 +528,6 @@ export default class PluginSample extends Plugin {
click: () => {
this.eventBus.off("loaded-protyle-dynamic", this.eventBusLog);
}
- }, {
- icon: "iconSelect",
- label: "On switch-protyle",
- click: () => {
- this.eventBus.on("switch-protyle", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off switch-protyle",
- click: () => {
- this.eventBus.off("switch-protyle", this.eventBusLog);
- }
}, {
icon: "iconSelect",
label: "On destroy-protyle",
@@ -848,18 +648,6 @@ export default class PluginSample extends Plugin {
click: () => {
this.eventBus.off("open-menu-breadcrumbmore", this.eventBusLog);
}
- }, {
- icon: "iconSelect",
- label: "On open-menu-inbox",
- click: () => {
- this.eventBus.on("open-menu-inbox", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-menu-inbox",
- click: () => {
- this.eventBus.off("open-menu-inbox", this.eventBusLog);
- }
}, {
icon: "iconSelect",
label: "On input-search",
diff --git a/src/libs/components/b3-typography.svelte b/src/libs/b3-typography.svelte
similarity index 100%
rename from src/libs/components/b3-typography.svelte
rename to src/libs/b3-typography.svelte
diff --git a/src/libs/components/Form/form-input.svelte b/src/libs/components/Form/form-input.svelte
deleted file mode 100644
index cbf5a7e..0000000
--- a/src/libs/components/Form/form-input.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-
-
-{#if type === "checkbox"}
-
-
-{:else if type === "textinput"}
-
-
-{:else if type === "textarea"}
-
-{:else if type === "number"}
-
-{:else if type === "button"}
-
-
-{:else if type === "select"}
-
-
-{:else if type == "slider"}
-
-
-
-
-{/if}
diff --git a/src/libs/components/Form/form-wrap.svelte b/src/libs/components/Form/form-wrap.svelte
deleted file mode 100644
index 4d8092e..0000000
--- a/src/libs/components/Form/form-wrap.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-
-
-
-{#if direction === "row"}
-
-
-
{title}
-
{@html description}
-
-
-
-
-
-
-{:else}
-
-
-
{title}
-
- {@html description}
-
-
-
-
-
-{/if}
-
-
diff --git a/src/libs/components/Form/index.ts b/src/libs/components/Form/index.ts
deleted file mode 100644
index a5c81c0..0000000
--- a/src/libs/components/Form/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import FormInput from './form-input.svelte';
-import FormWrap from './form-wrap.svelte';
-
-const Form = { Wrap: FormWrap, Input: FormInput };
-export default Form;
-export { FormInput, FormWrap };
diff --git a/src/libs/components/setting-panel.svelte b/src/libs/components/setting-panel.svelte
deleted file mode 100644
index 783e2b6..0000000
--- a/src/libs/components/setting-panel.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-
-
-
-
-
- {#each settingItems as item (item.key)}
-
-
-
- {/each}
-
\ No newline at end of file
diff --git a/src/libs/const.ts b/src/libs/const.ts
deleted file mode 100644
index 2dd3e06..0000000
--- a/src/libs/const.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * Copyright (c) 2024 by frostime. All Rights Reserved.
- * @Author : frostime
- * @Date : 2024-06-08 20:36:30
- * @FilePath : /src/libs/const.ts
- * @LastEditTime : 2024-06-08 20:48:06
- * @Description :
- */
-
-
-export const BlockType2NodeType: {[key in BlockType]: string} = {
- d: 'NodeDocument',
- p: 'NodeParagraph',
- query_embed: 'NodeBlockQueryEmbed',
- l: 'NodeList',
- i: 'NodeListItem',
- h: 'NodeHeading',
- iframe: 'NodeIFrame',
- tb: 'NodeThematicBreak',
- b: 'NodeBlockquote',
- s: 'NodeSuperBlock',
- c: 'NodeCodeBlock',
- widget: 'NodeWidget',
- t: 'NodeTable',
- html: 'NodeHTMLBlock',
- m: 'NodeMathBlock',
- av: 'NodeAttributeView',
- audio: 'NodeAudio'
-}
-
-
-export const NodeIcons = {
- NodeAttributeView: {
- icon: "iconDatabase"
- },
- NodeAudio: {
- icon: "iconRecord"
- },
- NodeBlockQueryEmbed: {
- icon: "iconSQL"
- },
- NodeBlockquote: {
- icon: "iconQuote"
- },
- NodeCodeBlock: {
- icon: "iconCode"
- },
- NodeDocument: {
- icon: "iconFile"
- },
- NodeHTMLBlock: {
- icon: "iconHTML5"
- },
- NodeHeading: {
- icon: "iconHeadings",
- subtypes: {
- h1: { icon: "iconH1" },
- h2: { icon: "iconH2" },
- h3: { icon: "iconH3" },
- h4: { icon: "iconH4" },
- h5: { icon: "iconH5" },
- h6: { icon: "iconH6" }
- }
- },
- NodeIFrame: {
- icon: "iconLanguage"
- },
- NodeList: {
- subtypes: {
- o: { icon: "iconOrderedList" },
- t: { icon: "iconCheck" },
- u: { icon: "iconList" }
- }
- },
- NodeListItem: {
- icon: "iconListItem"
- },
- NodeMathBlock: {
- icon: "iconMath"
- },
- NodeParagraph: {
- icon: "iconParagraph"
- },
- NodeSuperBlock: {
- icon: "iconSuper"
- },
- NodeTable: {
- icon: "iconTable"
- },
- NodeThematicBreak: {
- icon: "iconLine"
- },
- NodeVideo: {
- icon: "iconVideo"
- },
- NodeWidget: {
- icon: "iconBoth"
- }
-};
diff --git a/src/libs/dialog.ts b/src/libs/dialog.ts
deleted file mode 100644
index d0fe582..0000000
--- a/src/libs/dialog.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-/*
- * Copyright (c) 2024 by frostime. All Rights Reserved.
- * @Author : frostime
- * @Date : 2024-03-23 21:37:33
- * @FilePath : /src/libs/dialog.ts
- * @LastEditTime : 2024-10-16 14:31:04
- * @Description : Kits about dialogs
- */
-import { Dialog } from "siyuan";
-import { type SvelteComponent } from "svelte";
-
-export const inputDialog = (args: {
- title: string, placeholder?: string, defaultText?: string,
- confirm?: (text: string) => void, cancel?: () => void,
- width?: string, height?: string
-}) => {
- const dialog = new Dialog({
- title: args.title,
- content: `
-
-
-
-
`,
- width: args.width ?? "520px",
- height: args.height
- });
- const target: HTMLTextAreaElement = dialog.element.querySelector(".b3-dialog__content>div.ft__breakword>textarea");
- const btnsElement = dialog.element.querySelectorAll(".b3-button");
- btnsElement[0].addEventListener("click", () => {
- if (args?.cancel) {
- args.cancel();
- }
- dialog.destroy();
- });
- btnsElement[1].addEventListener("click", () => {
- if (args?.confirm) {
- args.confirm(target.value);
- }
- dialog.destroy();
- });
-};
-
-export const inputDialogSync = async (args: {
- title: string, placeholder?: string, defaultText?: string,
- width?: string, height?: string
-}) => {
- return new Promise
((resolve) => {
- let newargs = {
- ...args, confirm: (text) => {
- resolve(text);
- }, cancel: () => {
- resolve(null);
- }
- };
- inputDialog(newargs);
- });
-}
-
-
-interface IConfirmDialogArgs {
- title: string;
- content: string | HTMLElement;
- confirm?: (ele?: HTMLElement) => void;
- cancel?: (ele?: HTMLElement) => void;
- width?: string;
- height?: string;
-}
-
-export const confirmDialog = (args: IConfirmDialogArgs) => {
- const { title, content, confirm, cancel, width, height } = args;
-
- const dialog = new Dialog({
- title,
- content: `
-
-
-
-
+
+
+
This setting panel is provided by a svelte component
+
+
+ See:
+ /lib/setting-pannel.svelte
+
+
+
+
+
{
+ showMessage(
+ `Checkbox changed: ${event.detail.key} = ${event.detail.value}`
+ );
+ }}
+ />
+ {
+ showMessage(
+ `Input changed: ${event.detail.key} = ${event.detail.value}`
+ );
+ }}
+ />
+ {
+ showMessage("Button clicked");
+ }}
+ />
+ {
+ showMessage(
+ `Select changed: ${event.detail.key} = ${event.detail.value}`
+ );
+ }}
+ />
+ {
+ showMessage(
+ `Slide changed: ${event.detail.key} = ${event.detail.value}`
+ );
+ }}
+ />
+
-
- {#each groups as group}
-
- - {
- focusGroup = group;
- }}
- on:keydown={() => {}}
- >
- {group}
-
- {/each}
-
-
-
{ console.debug("Click:", detail.key); }}
- >
-
- 💡 This is our default settings.
-
-
-
{ console.debug("Click:", detail.key); }}
- >
-
-
-