- System current time:
{time}
+
+
+
+
Hello {name} v{ver}
+
+
+ {time_str}
+
-
-
-
Protyle demo: id = {blockID}
-
-
+
+
+
{@html i18n.makesure}
+
+
+
diff --git a/public/i18n/en_US.json b/src/i18n/en_US.json
similarity index 50%
rename from public/i18n/en_US.json
rename to src/i18n/en_US.json
index 7a11256..7e9425a 100644
--- a/public/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -5,16 +5,8 @@
"byeMenu": "Bye, Menu!",
"helloPlugin": "Hello, Plugin!",
"byePlugin": "Bye, Plugin!",
- "showDialog": "Show dialog",
- "removedData": "Data deleted",
- "confirmRemove": "Confirm to delete the data in ${name}?",
- "insertEmoji": "Insert Emoji",
- "removeSpace": "Remove Space",
- "getTab": "Print out all opened custom tabs in the debugger",
"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/src/i18n/zh_CN.json b/src/i18n/zh_CN.json
new file mode 100644
index 0000000..7eaa3eb
--- /dev/null
+++ b/src/i18n/zh_CN.json
@@ -0,0 +1,12 @@
+{
+ "addTopBarIcon": "使用插件添加一个顶栏按钮",
+ "cancel": "取消",
+ "save": "保存",
+ "byeMenu": "再见，菜单！",
+ "helloPlugin": "你好，插件！",
+ "byePlugin": "再见，插件！",
+ "name": "思源",
+ "hello": {
+ "makesure": "使用这个模板之前，请阅读
官方教程, 确保自己已经理解了插件的基本开发流程。"
+ }
+}
\ No newline at end of file
diff --git a/src/index.scss b/src/index.scss
index e69de29..cb1be95 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -0,0 +1,3 @@
+#helloPanel {
+ border: 1px rgb(189, 119, 119) dashed;
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 5b50c49..f68a2d4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,936 +1,159 @@
-import {
- Plugin,
- showMessage,
- confirm,
- Dialog,
- Menu,
- openTab,
- adaptHotkey,
- getFrontend,
- getBackend,
- IModel,
- Protyle,
- openWindow,
- IOperation,
- Constants,
- openMobileFileById,
- lockScreen,
- ICard,
- ICardData
-} from "siyuan";
-import "@/index.scss";
+/**
+ * Copyright (c) 2023 frostime. All rights reserved.
+ * https://github.com/frostime/sy-plugin-template-vite
+ */
+import { Plugin, showMessage, confirm, Dialog, Menu, isMobile, openTab } from "siyuan";
+import "./index.scss";
-import HelloExample from "@/hello.svelte";
-import SettingExample from "@/setting-example.svelte";
-
-import { SettingUtils } from "./libs/setting-utils";
-import { svelteDialog } from "./libs/dialog";
+import HelloExample from "./hello.svelte";
+import DockExample from "./dock.svelte";
+import SettingPannel from "./libs/setting-panel.svelte";
const STORAGE_NAME = "menu-config";
const TAB_TYPE = "custom_tab";
const DOCK_TYPE = "dock_tab";
-export default class PluginSample extends Plugin {
+export default class SamplePlugin extends Plugin {
- customTab: () => IModel;
- private isMobile: boolean;
- private blockIconEventBindThis = this.blockIconEvent.bind(this);
- private settingUtils: SettingUtils;
+ counter: { [key: string]: number } = {
+ hello: 0,
+ };
+ private customTab: () => any;
async onload() {
- this.data[STORAGE_NAME] = { readonlyText: "Readonly" };
-
- console.log("loading plugin-sample", this.i18n);
-
- const frontEnd = getFrontend();
- this.isMobile = frontEnd === "mobile" || frontEnd === "browser-mobile";
- // 图标的制作参见帮助文档
- this.addIcons(`
-
-
-
-
-`);
+ showMessage("Hello SiYuan Plugin");
+ console.log(this.i18n.helloPlugin);
const topBarElement = this.addTopBar({
- icon: "iconFace",
+ icon: "iconEmoji",
title: this.i18n.addTopBarIcon,
- position: "right",
+ position: "left",
callback: () => {
- if (this.isMobile) {
- this.addMenu();
- } else {
- let rect = topBarElement.getBoundingClientRect();
- // 如果被隐藏，则使用更多按钮
- if (rect.width === 0) {
- rect = document.querySelector("#barMore").getBoundingClientRect();
- }
- if (rect.width === 0) {
- rect = document.querySelector("#barPlugins").getBoundingClientRect();
- }
- this.addMenu(rect);
- }
+ this.addMenu(topBarElement.getBoundingClientRect());
}
});
- const statusIconTemp = document.createElement("template");
- statusIconTemp.innerHTML = `
-
-
`;
- statusIconTemp.content.firstElementChild.addEventListener("click", () => {
- confirm("⚠️", this.i18n.confirmRemove.replace("${name}", this.name), () => {
- this.removeData(STORAGE_NAME).then(() => {
- this.data[STORAGE_NAME] = { readonlyText: "Readonly" };
- showMessage(`[${this.name}]: ${this.i18n.removedData}`);
- });
- });
+ let div = document.createElement("div");
+ new HelloExample({
+ target: div,
+ props: {
+ name: this.i18n.name,
+ i18n: this.i18n.hello
+ }
});
- this.addStatusBar({
- element: statusIconTemp.content.firstElementChild as HTMLElement,
- });
-
- this.addCommand({
- langKey: "showDialog",
- hotkey: "⇧⌘O",
- callback: () => {
- this.showDialog();
- },
- fileTreeCallback: (file: any) => {
- console.log(file, "fileTreeCallback");
- },
- editorCallback: (protyle: any) => {
- console.log(protyle, "editorCallback");
- },
- dockCallback: (element: HTMLElement) => {
- console.log(element, "dockCallback");
- },
- });
- this.addCommand({
- langKey: "getTab",
- hotkey: "⇧⌘M",
- globalCallback: () => {
- console.log(this.getOpenedTab());
+ this.customTab = this.addTab({
+ type: TAB_TYPE,
+ init() {
+ this.element.appendChild(div);
+ console.log(this.element);
},
+ destroy() {
+ console.log("destroy tab:", TAB_TYPE);
+ }
});
this.addDock({
config: {
position: "LeftBottom",
size: { width: 200, height: 0 },
- icon: "iconSaving",
+ icon: "iconEmoji",
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.component = new DockExample({
+ target: this.element,
+ props: {
+ text: this.data.text,
+ }
+ });
},
destroy() {
console.log("destroy dock:", DOCK_TYPE);
+ this.component.$destroy();
}
});
- this.settingUtils = new SettingUtils({
- plugin: this, name: 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",
- value: "",
- 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",
- value: true,
- 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",
- 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);
- }
- }
- });
- this.settingUtils.addItem({
- key: "Slider",
- value: 50,
- 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({
- key: "Btn",
- value: "",
- type: "button",
- title: "Button",
- description: "Button description",
- button: {
- label: "Button",
- callback: () => {
- showMessage("Button clicked");
- }
- }
- });
- 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"],
- html: `
${this.i18n.insertEmoji}😊
`,
- id: "insertEmoji",
- callback(protyle: Protyle) {
- protyle.insert("😊");
- }
- }];
-
- 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);
}
- onLayoutReady() {
- // 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,
- props: {
- app: this.app,
- }
- });
- this.customTab = this.addTab({
- type: TAB_TYPE,
- init() {
- this.element.appendChild(tabDiv);
- console.log(this.element);
- },
- beforeDestroy() {
- console.log("before destroy tab:", TAB_TYPE);
- },
- destroy() {
- console.log("destroy tab:", TAB_TYPE);
- }
- });
- }
-
- async onunload() {
- console.log(this.i18n.byePlugin);
- 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",
- destroyCallback: (options) => {
- console.log("destroyCallback", options);
- //You'd better destroy the component when the dialog is closed
- pannel.$destroy();
- }
- });
- let pannel = new SettingExample({
- target: dialog.element.querySelector("#SettingPanel"),
- });
- }
-
- private eventBusPaste(event: any) {
- // 如果需异步处理请调用 preventDefault， 否则会进行默认处理
- event.preventDefault();
- // 如果使用了 preventDefault，必须调用 resolve，否则程序会卡死
- event.detail.resolve({
- textPlain: event.detail.textPlain.trim(),
- });
- }
-
- private eventBusLog({ detail }: any) {
+ private wsEvent({ detail }: any) {
console.log(detail);
}
- private blockIconEvent({ detail }: any) {
- detail.menu.addItem({
- iconHTML: "",
- label: this.i18n.removeSpace,
- click: () => {
- const doOperations: IOperation[] = [];
- detail.blockElements.forEach((item: HTMLElement) => {
- const editElement = item.querySelector('[contenteditable="true"]');
- if (editElement) {
- editElement.textContent = editElement.textContent.replace(/ /g, "");
- doOperations.push({
- id: item.dataset.nodeId,
- data: item.outerHTML,
- action: "update"
- });
- }
- });
- detail.protyle.getInstance().transaction(doOperations);
- }
- });
- }
-
- 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}`,
- width: this.isMobile ? "92vw" : "720px",
- constructor: (container: HTMLElement) => {
- return new HelloExample({
- target: container,
- props: {
- app: this.app,
- }
- });
- }
- });
- }
-
- private addMenu(rect?: DOMRect) {
+ private async addMenu(rect: DOMRect) {
const menu = new Menu("topBarSample", () => {
console.log(this.i18n.byeMenu);
});
+ menu.addItem({
+ icon: "iconHelp",
+ label: "Confirm",
+ click() {
+ confirm("Confirm", "Is this a confirm?", () => {
+ showMessage("confirm");
+ }, () => {
+ showMessage("cancel");
+ });
+ }
+ });
+ menu.addItem({
+ icon: "iconFeedback",
+ label: "Message",
+ click: () => {
+ showMessage(this.i18n.helloPlugin);
+ }
+ });
menu.addItem({
icon: "iconInfo",
- label: "Dialog(open help first)",
- accelerator: this.commands[0].customHotkey,
- click: () => {
- this.showDialog();
- }
+ label: "Dialog",
+ click: () => this.openHelloInDialog()
});
- if (!this.isMobile) {
- menu.addItem({
- icon: "iconFace",
- label: "Open Custom Tab",
- click: () => {
- const tab = openTab({
- app: this.app,
- custom: {
- icon: "iconFace",
- title: "Custom Tab",
- data: {
- text: "This is my custom tab",
- },
- id: this.name + TAB_TYPE
+ menu.addItem({
+ icon: "iconLayoutBottom",
+ label: "Open Tab",
+ click: () => {
+ openTab({
+ custom: {
+ icon: "iconEmoji",
+ title: "Custom Tab",
+ data: {
+ text: "This is my custom tab",
},
- });
- console.log(tab);
- }
- });
- menu.addItem({
- icon: "iconImage",
- label: "Open Asset Tab(open help first)",
- click: () => {
- const tab = openTab({
- app: this.app,
- asset: {
- path: "assets/paragraph-20210512165953-ag1nib4.svg"
- }
- });
- console.log(tab);
- }
- });
- menu.addItem({
- icon: "iconFile",
- label: "Open Doc Tab(open help first)",
- click: async () => {
- const tab = await openTab({
- app: this.app,
- doc: {
- id: "20200812220555-lj3enxa",
- }
- });
- console.log(tab);
- }
- });
- menu.addItem({
- icon: "iconSearch",
- label: "Open Search Tab",
- click: () => {
- const tab = openTab({
- app: this.app,
- search: {
- k: "SiYuan"
- }
- });
- console.log(tab);
- }
- });
- menu.addItem({
- icon: "iconRiffCard",
- label: "Open Card Tab",
- click: () => {
- const tab = openTab({
- app: this.app,
- card: {
- type: "all"
- }
- });
- console.log(tab);
- }
- });
- menu.addItem({
- icon: "iconLayout",
- label: "Open Float Layer(open help first)",
- click: () => {
- this.addFloatLayer({
- ids: ["20210428212840-8rqwn5o", "20201225220955-l154bn4"],
- defIds: ["20230415111858-vgohvf3", "20200813131152-0wk5akh"],
- x: window.innerWidth - 768 - 120,
- y: 32
- });
- }
- });
- menu.addItem({
- icon: "iconOpenWindow",
- label: "Open Doc Window(open help first)",
- click: () => {
- openWindow({
- doc: {id: "20200812220555-lj3enxa"}
- });
- }
- });
- } 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);
+ fn: this.customTab
+ },
+ });
}
});
menu.addItem({
- icon: "iconScrollHoriz",
- label: "Event Bus",
- type: "submenu",
- submenu: [{
- icon: "iconSelect",
- label: "On ws-main",
- click: () => {
- this.eventBus.on("ws-main", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off ws-main",
- click: () => {
- this.eventBus.off("ws-main", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On click-blockicon",
- click: () => {
- this.eventBus.on("click-blockicon", this.blockIconEventBindThis);
- }
- }, {
- icon: "iconClose",
- label: "Off click-blockicon",
- click: () => {
- this.eventBus.off("click-blockicon", this.blockIconEventBindThis);
- }
- }, {
- icon: "iconSelect",
- label: "On click-pdf",
- click: () => {
- this.eventBus.on("click-pdf", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off click-pdf",
- click: () => {
- this.eventBus.off("click-pdf", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On click-editorcontent",
- click: () => {
- this.eventBus.on("click-editorcontent", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off click-editorcontent",
- click: () => {
- this.eventBus.off("click-editorcontent", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On click-editortitleicon",
- click: () => {
- this.eventBus.on("click-editortitleicon", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off click-editortitleicon",
- 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",
- click: () => {
- this.eventBus.on("open-noneditableblock", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-noneditableblock",
- click: () => {
- this.eventBus.off("open-noneditableblock", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On loaded-protyle-static",
- click: () => {
- this.eventBus.on("loaded-protyle-static", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off loaded-protyle-static",
- click: () => {
- this.eventBus.off("loaded-protyle-static", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On loaded-protyle-dynamic",
- click: () => {
- this.eventBus.on("loaded-protyle-dynamic", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off loaded-protyle-dynamic",
- 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",
- click: () => {
- this.eventBus.on("destroy-protyle", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off destroy-protyle",
- click: () => {
- this.eventBus.off("destroy-protyle", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On open-menu-doctree",
- click: () => {
- this.eventBus.on("open-menu-doctree", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-menu-doctree",
- click: () => {
- this.eventBus.off("open-menu-doctree", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On open-menu-blockref",
- click: () => {
- this.eventBus.on("open-menu-blockref", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-menu-blockref",
- click: () => {
- this.eventBus.off("open-menu-blockref", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On open-menu-fileannotationref",
- click: () => {
- this.eventBus.on("open-menu-fileannotationref", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-menu-fileannotationref",
- click: () => {
- this.eventBus.off("open-menu-fileannotationref", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On open-menu-tag",
- click: () => {
- this.eventBus.on("open-menu-tag", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-menu-tag",
- click: () => {
- this.eventBus.off("open-menu-tag", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On open-menu-link",
- click: () => {
- this.eventBus.on("open-menu-link", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-menu-link",
- click: () => {
- this.eventBus.off("open-menu-link", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On open-menu-image",
- click: () => {
- this.eventBus.on("open-menu-image", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-menu-image",
- click: () => {
- this.eventBus.off("open-menu-image", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On open-menu-av",
- click: () => {
- this.eventBus.on("open-menu-av", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-menu-av",
- click: () => {
- this.eventBus.off("open-menu-av", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On open-menu-content",
- click: () => {
- this.eventBus.on("open-menu-content", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-menu-content",
- click: () => {
- this.eventBus.off("open-menu-content", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On open-menu-breadcrumbmore",
- click: () => {
- this.eventBus.on("open-menu-breadcrumbmore", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-menu-breadcrumbmore",
- 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",
- click: () => {
- this.eventBus.on("input-search", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off input-search",
- click: () => {
- this.eventBus.off("input-search", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On paste",
- click: () => {
- this.eventBus.on("paste", this.eventBusPaste);
- }
- }, {
- icon: "iconClose",
- label: "Off paste",
- click: () => {
- this.eventBus.off("paste", this.eventBusPaste);
- }
- }, {
- icon: "iconSelect",
- label: "On open-siyuan-url-plugin",
- click: () => {
- this.eventBus.on("open-siyuan-url-plugin", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-siyuan-url-plugin",
- click: () => {
- this.eventBus.off("open-siyuan-url-plugin", this.eventBusLog);
- }
- }, {
- icon: "iconSelect",
- label: "On open-siyuan-url-block",
- click: () => {
- this.eventBus.on("open-siyuan-url-block", this.eventBusLog);
- }
- }, {
- icon: "iconClose",
- label: "Off open-siyuan-url-block",
- click: () => {
- this.eventBus.off("open-siyuan-url-block", this.eventBusLog);
- }
- }]
+ icon: "iconTrashcan",
+ label: "Remove Data",
+ click: () => {
+ this.removeData(STORAGE_NAME);
+ }
+ });
+ menu.addItem({
+ icon: "iconSelect",
+ label: "On ws-main",
+ click: () => {
+ this.eventBus.on("ws-main", this.wsEvent);
+ }
+ });
+ menu.addItem({
+ icon: "iconClose",
+ label: "Off ws-main",
+ click: () => {
+ this.eventBus.off("ws-main", this.wsEvent);
+ }
});
menu.addSeparator();
- menu.addItem({
- icon: "iconSettings",
- label: "Official Setting Dialog",
- click: () => {
- this.openSetting();
- }
- });
- menu.addItem({
- icon: "iconSettings",
- label: "A custom setting dialog (by svelte)",
- click: () => {
- this.openDIYSetting();
- }
- });
menu.addItem({
icon: "iconSparkles",
- label: this.data[STORAGE_NAME].readonlyText || "Readonly",
+ label: this.data[STORAGE_NAME] || "Readonly",
type: "readonly",
});
- if (this.isMobile) {
+ if (isMobile()) {
menu.fullscreen();
} else {
menu.open({
@@ -940,4 +163,44 @@ export default class PluginSample extends Plugin {
});
}
}
+
+ openSetting(): void {
+ let dialog = new Dialog({
+ title: "SettingPannel",
+ content: `
`,
+ width: "600px",
+ destroyCallback: (options) => {
+ console.log("destroyCallback", options);
+ //You must destroy the component when the dialog is closed
+ pannel.$destroy();
+ }
+ });
+ let pannel = new SettingPannel({
+ target: dialog.element.querySelector("#SettingPanel"),
+ });
+ }
+
+ private openHelloInDialog() {
+ this.counter.hello++;
+ let dialog = new Dialog({
+ title: "Hello World",
+ content: `
`,
+ destroyCallback(options) {
+ //You must destroy the component when the dialog is closed
+ hello.$destroy();
+ },
+ });
+ let hello = new HelloExample({
+ target: dialog.element.querySelector("#helloPanel"),
+ props: {
+ name: this.i18n.name,
+ i18n: this.i18n.hello
+ }
+ });
+ }
+
+ async onunload() {
+ showMessage("Goodbye SiYuan Plugin");
+ console.log("onunload");
+ }
}
diff --git a/src/libs/b3-list.svelte b/src/libs/b3-list.svelte
new file mode 100644
index 0000000..edbab36
--- /dev/null
+++ b/src/libs/b3-list.svelte
@@ -0,0 +1,8 @@
+
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/b3-typography.svelte b/src/libs/components/b3-typography.svelte
deleted file mode 100644
index 60227cd..0000000
--- a/src/libs/components/b3-typography.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
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); }}
- >
-
-
-