+
appId:
+
+
${app?.appId}
+
+
API demo:
diff --git a/src/index.scss b/src/index.scss
index c8efd4f..e69de29 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,26 +0,0 @@
-#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 aa7bd75..5b50c49 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,16 +9,22 @@ import {
getFrontend,
getBackend,
IModel,
- Setting,
- fetchPost,
- Protyle, openWindow, IOperation
+ Protyle,
+ openWindow,
+ IOperation,
+ Constants,
+ openMobileFileById,
+ lockScreen,
+ ICard,
+ ICardData
} from "siyuan";
import "@/index.scss";
import HelloExample from "@/hello.svelte";
-import SettingPannel from "@/libs/setting-panel.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";
@@ -26,7 +32,7 @@ const DOCK_TYPE = "dock_tab";
export default class PluginSample extends Plugin {
- private customTab: () => IModel;
+ customTab: () => IModel;
private isMobile: boolean;
private blockIconEventBindThis = this.blockIconEvent.bind(this);
private settingUtils: SettingUtils;
@@ -115,38 +121,66 @@ 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,
- init() {
- this.element.innerHTML = `
-
-
-
- Custom Dock
-
-
-
-
-
- ${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.settingUtils = new SettingUtils(this, STORAGE_NAME);
+ 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",
@@ -154,6 +188,14 @@ 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",
@@ -161,24 +203,31 @@ 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: "Readonly text",
+ title: "Select",
description: "Select description",
- select: {
- options: [
- {
- val: 1,
- text: "Option 1"
- },
- {
- val: 2,
- text: "Option 2"
- }
- ]
+ 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({
@@ -187,10 +236,18 @@ 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({
@@ -206,6 +263,42 @@ 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"],
@@ -216,6 +309,38 @@ 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);
}
@@ -223,6 +348,14 @@ 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,
@@ -247,26 +380,42 @@ 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: "600px",
+ 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 SettingPannel({
+ let pannel = new SettingExample({
target: dialog.element.querySelector("#SettingPanel"),
});
}
@@ -307,18 +456,30 @@ export default class PluginSample extends Plugin {
}
private showDialog() {
- let dialog = new Dialog({
- title: "Hello World",
- content: `
`,
+ // 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",
- destroyCallback(options) {
- // hello.$destroy();
- },
- });
- new HelloExample({
- target: dialog.element.querySelector("#helloPanel"),
- props: {
- app: this.app,
+ constructor: (container: HTMLElement) => {
+ return new HelloExample({
+ target: container,
+ props: {
+ app: this.app,
+ }
+ });
}
});
}
@@ -427,7 +588,22 @@ 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",
@@ -492,6 +668,18 @@ 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",
@@ -528,6 +716,18 @@ 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",
@@ -648,6 +848,18 @@ 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/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); }}
+ >
+
+
+