-
-
Hello {name} v{ver}
-
-
- {time_str}
-
+
+
appId:
+
+
${app?.appId}
+
+
+
API demo:
+
+
+ System current time: {time}
-
-
- Wellcome to plugin sample with vite & svelte
- {@html i18n.makesure}
-
-
+
+
+
Protyle demo: id = {blockID}
+
+
-
diff --git a/src/i18n/zh_CN.json b/src/i18n/zh_CN.json
deleted file mode 100644
index 7eaa3eb..0000000
--- a/src/i18n/zh_CN.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "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 cb1be95..e69de29 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +0,0 @@
-#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 5e566c4..5b50c49 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,168 +1,607 @@
-import { Plugin, showMessage, confirm, Dialog, Menu, isMobile, openTab } from "siyuan";
-import "./index.scss";
+import {
+ Plugin,
+ showMessage,
+ confirm,
+ Dialog,
+ Menu,
+ openTab,
+ adaptHotkey,
+ getFrontend,
+ getBackend,
+ IModel,
+ Protyle,
+ openWindow,
+ IOperation,
+ Constants,
+ openMobileFileById,
+ lockScreen,
+ ICard,
+ ICardData
+} from "siyuan";
+import "@/index.scss";
-import HelloExample from "./hello.svelte";
-import DockExample from "./dock.svelte";
-import SettingPannel from "./libs/setting-panel.svelte";
+import HelloExample from "@/hello.svelte";
+import SettingExample from "@/setting-example.svelte";
+
+import { SettingUtils } from "./libs/setting-utils";
+import { svelteDialog } from "./libs/dialog";
const STORAGE_NAME = "menu-config";
const TAB_TYPE = "custom_tab";
const DOCK_TYPE = "dock_tab";
-export default class SamplePlugin extends Plugin {
+export default class PluginSample extends Plugin {
- private customTab: () => any;
+ customTab: () => IModel;
+ private isMobile: boolean;
+ private blockIconEventBindThis = this.blockIconEvent.bind(this);
+ private settingUtils: SettingUtils;
async onload() {
- showMessage("Hello SiYuan Plugin");
- this.data[STORAGE_NAME] = {readonlyText: "Readonly"};
+ 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(`
+
+
+
+
+`);
const topBarElement = this.addTopBar({
- icon: "iconEmoji",
+ icon: "iconFace",
title: this.i18n.addTopBarIcon,
- position: "left",
+ position: "right",
callback: () => {
- this.addMenu(topBarElement.getBoundingClientRect());
+ 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);
+ }
}
});
- let div = document.createElement("div");
- new HelloExample({
- target: div,
- props: {
- name: this.i18n.name,
- i18n: this.i18n.hello
- }
+ 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}`);
+ });
+ });
});
- this.customTab = this.addTab({
- type: TAB_TYPE,
- init() {
- this.element.appendChild(div);
- console.log(this.element);
+ 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());
},
- destroy() {
- console.log("destroy tab:", TAB_TYPE);
- }
});
this.addDock({
config: {
position: "LeftBottom",
size: { width: 200, height: 0 },
- icon: "iconEmoji",
+ icon: "iconSaving",
title: "Custom Dock",
+ hotkey: "⌥⌘W",
},
data: {
text: "This is my custom dock"
},
type: DOCK_TYPE,
- init() {
- this.component = new DockExample({
- target: this.element,
- props: {
- text: this.data.text,
- }
- });
+ 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}
+
+
`;
+ }
},
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.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);
+ }
+ });
}
- onunload() {
+ async onunload() {
console.log(this.i18n.byePlugin);
showMessage("Goodbye SiYuan Plugin");
console.log("onunload");
}
- private wsEvent({ detail }: any) {
+ 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) {
console.log(detail);
}
- private blockIconEvent({detail}: any) {
- console.log(detail);
- detail.menu.addSeparator(0);
- const ids: string[] = [];
- detail.blockElements.forEach((item: HTMLElement) => {
- ids.push(item.getAttribute("data-node-id"));
- });
+ private blockIconEvent({ detail }: any) {
detail.menu.addItem({
- index: 1,
iconHTML: "",
- type: "readonly",
- label: "IDs
" + ids.join("
"),
+ 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 async addMenu(rect: DOMRect) {
+ 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) {
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",
- click: () => this.openHelloInDialog()
- });
- menu.addItem({
- icon: "iconLayoutBottom",
- label: "Open Tab",
+ label: "Dialog(open help first)",
+ accelerator: this.commands[0].customHotkey,
click: () => {
- openTab({
- custom: {
- icon: "iconEmoji",
- title: "Custom Tab",
- data: {
- text: "This is my custom tab",
+ this.showDialog();
+ }
+ });
+ 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
},
- fn: this.customTab
- },
- });
- }
- });
+ });
+ 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: "iconLayout",
- label: "Open Float Layer(open help)",
+ icon: "iconLock",
+ label: "Lockscreen",
click: () => {
- this.addFloatLayer({
- ids: ["20230523173319-xj1l3qu", "20230523173321-55o0w2n"],
- defIds: ["20230523173323-imgm9tp", "20230523173324-cxu98t3"],
- x: window.innerWidth - 768 - 120,
- y: 32
- });
- }
- });
- menu.addItem({
- icon: "iconTrashcan",
- label: "Remove Data",
- click: () => {
- this.removeData(STORAGE_NAME).then(() => {
- this.data[STORAGE_NAME] = {readonlyText: "Readonly"};
- });
+ lockScreen(this.app);
}
});
menu.addItem({
@@ -173,59 +612,325 @@ export default class SamplePlugin extends Plugin {
icon: "iconSelect",
label: "On ws-main",
click: () => {
- this.eventBus.on("ws-main", this.wsEvent);
+ this.eventBus.on("ws-main", this.eventBusLog);
}
}, {
icon: "iconClose",
label: "Off ws-main",
click: () => {
- this.eventBus.off("ws-main", this.wsEvent);
+ this.eventBus.off("ws-main", this.eventBusLog);
}
}, {
icon: "iconSelect",
label: "On click-blockicon",
click: () => {
- this.eventBus.on("click-blockicon", this.blockIconEvent);
+ this.eventBus.on("click-blockicon", this.blockIconEventBindThis);
}
}, {
icon: "iconClose",
label: "Off click-blockicon",
click: () => {
- this.eventBus.off("click-blockicon", this.blockIconEvent);
+ this.eventBus.off("click-blockicon", this.blockIconEventBindThis);
}
}, {
icon: "iconSelect",
label: "On click-pdf",
click: () => {
- this.eventBus.on("click-pdf", this.wsEvent);
+ this.eventBus.on("click-pdf", this.eventBusLog);
}
}, {
icon: "iconClose",
label: "Off click-pdf",
click: () => {
- this.eventBus.off("click-pdf", this.wsEvent);
+ this.eventBus.off("click-pdf", this.eventBusLog);
}
}, {
icon: "iconSelect",
label: "On click-editorcontent",
click: () => {
- this.eventBus.on("click-editorcontent", this.wsEvent);
+ this.eventBus.on("click-editorcontent", this.eventBusLog);
}
}, {
icon: "iconClose",
label: "Off click-editorcontent",
click: () => {
- this.eventBus.off("click-editorcontent", this.wsEvent);
+ 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);
}
}]
});
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] || "Readonly",
+ label: this.data[STORAGE_NAME].readonlyText || "Readonly",
type: "readonly",
});
- if (isMobile()) {
+ if (this.isMobile) {
menu.fullscreen();
} else {
menu.open({
@@ -235,38 +940,4 @@ export default class SamplePlugin 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() {
- 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
- }
- });
- }
}
diff --git a/src/libs/components/Form/form-input.svelte b/src/libs/components/Form/form-input.svelte
new file mode 100644
index 0000000..cbf5a7e
--- /dev/null
+++ b/src/libs/components/Form/form-input.svelte
@@ -0,0 +1,118 @@
+
+
+{#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
new file mode 100644
index 0000000..4d8092e
--- /dev/null
+++ b/src/libs/components/Form/form-wrap.svelte
@@ -0,0 +1,53 @@
+
+
+
+{#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
new file mode 100644
index 0000000..a5c81c0
--- /dev/null
+++ b/src/libs/components/Form/index.ts
@@ -0,0 +1,6 @@
+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/b3-typography.svelte b/src/libs/components/b3-typography.svelte
similarity index 100%
rename from src/libs/b3-typography.svelte
rename to src/libs/components/b3-typography.svelte
diff --git a/src/libs/components/setting-panel.svelte b/src/libs/components/setting-panel.svelte
new file mode 100644
index 0000000..783e2b6
--- /dev/null
+++ b/src/libs/components/setting-panel.svelte
@@ -0,0 +1,51 @@
+
+
+
+
+
+ {#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
new file mode 100644
index 0000000..2dd3e06
--- /dev/null
+++ b/src/libs/const.ts
@@ -0,0 +1,99 @@
+/*
+ * 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
new file mode 100644
index 0000000..d0fe582
--- /dev/null
+++ b/src/libs/dialog.ts
@@ -0,0 +1,164 @@
+/*
+ * 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); }}
+ >
+
+
+