Skip to content

Commit

Permalink
✨ 尝试将设置变为两栏，但还不知道怎么保存
Browse files Browse the repository at this point in the history
  • Loading branch information
@Achuan-2
Achuan-2 committed Dec 8, 2024
1 parent a4f8a4c commit 274f654
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 84 deletions.
52 changes: 27 additions & 25 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,14 @@
import {
Plugin,
// getFrontend,
fetchSyncPost,
Dialog,
Protyle
} from "siyuan";
import { Plugin, fetchSyncPost, Dialog, Protyle } from "siyuan";
import "@/index.scss";
import { IMenuItem } from "siyuan/types";

import { appendBlock, deleteBlock, setBlockAttrs, getBlockAttrs, pushMsg, pushErrMsg, sql, renderSprig, getChildBlocks, insertBlock, renameDocByID, prependBlock, updateBlock, createDocWithMd, getDoc, getBlockKramdown, getBlockDOM } from "./api";
import { SettingUtils } from "./libs/setting-utils";
import SettingExample from "@/setting-example.svelte";
import LoadingDialog from "./components/LoadingDialog.svelte";
const STORAGE_NAME = "config";
const zeroWhite = "​"



class FootnoteDialog {
private dialog: HTMLDialogElement;
private protyle: Protyle;
Expand Down Expand Up @@ -451,7 +444,6 @@ export default class PluginFootnote extends Plugin {
hotkey: "",
callback: async () => {
// Get current doc ID
// TODO: 分屏应该选哪个？
const activeElement = document.querySelector('.layout__wnd--active .protyle.fn__flex-1:not(.fn__none) .protyle-title')?.getAttribute('data-node-id');
if (activeElement) {
// 添加pushMsg
Expand Down Expand Up @@ -743,9 +735,6 @@ export default class PluginFootnote extends Plugin {
onunload() {
}




private deleteMemo = ({ detail }: any) => {
if (detail.element && detail.element.getAttribute("custom-footnote")) {
detail.menu.addItem({
Expand Down Expand Up @@ -961,11 +950,6 @@ export default class PluginFootnote extends Plugin {
break;
}






// 过滤掉脚注文本 <sup>((id "text"))</sup>
// 正则表达式匹配包含 custom-footnote="true" 的 <span> 标签
let customFootnotePattern = /<span[^>]*?custom-footnote=[^>]*?>.*?<\/span>/g;
Expand All @@ -978,11 +962,11 @@ export default class PluginFootnote extends Plugin {
let selectedTextPattern2 = /\s*custom-footnote-hidden-selected-text(?:|-[^"\s>]*)(?="|>|\s)/g;
// 正则表达式匹配不含data-type的普通span标签，提取其中的文本
let plainSpanPattern = /<span(?![^>]*data-type)[^>]*>(.*?)<\/span>/g;
// 正则表达式中匹配data-type=为空的span标签，提取其��的文本
// 正则表达式中匹配data-type=为空的span标签，提取其中的文本
let plainSpanPattern2 = /<span[^>]*data-type=""[^>]*>(.*?)<\/span>/g;


// 使用 replace() 方法替换匹配的部分为空字符���
// 使用 replace() 方法替换匹配的部分为空字符
let cleanSelection = selection
.replace(katexPattern, '')
.replace(customFootnotePattern, '')
Expand Down Expand Up @@ -1267,8 +1251,6 @@ export default class PluginFootnote extends Plugin {
}
}



// Add new function to reorder footnotes
private async reorderFootnotes(docID: string, reorderBlocks: boolean, protyle?: any) {

Expand Down Expand Up @@ -1439,6 +1421,7 @@ export default class PluginFootnote extends Plugin {
return element?.getAttribute('data-node-id');
}


private showLoadingDialog(message: string) {
if (this.loadingDialog) {
this.loadingDialog.destroy();
Expand All @@ -1463,11 +1446,30 @@ export default class PluginFootnote extends Plugin {
this.loadingDialog = null;
}
}
// async openSetting() {
// // Load settings before opening dialog
// await this.settingUtils.load();

// let dialog = new Dialog({
// title: "SettingPannel",
// content: `<div id="SettingPanel" style="height: 100%;"></div>`,
// width: "800px",
// destroyCallback: (options) => {
// console.log("destroyCallback", options);
// pannel.$destroy();
// }
// });

// let pannel = new SettingExample({
// target: dialog.element.querySelector("#SettingPanel"),
// props: {
// i18n: this.i18n,
// plugin: this
// }
// });
// }
}




export function saveViaTransaction(protyleElem) {
let protyle: HTMLElement
if (protyleElem != null) {
Expand Down
196 changes: 137 additions & 59 deletions src/setting-example.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,157 @@
<script lang="ts">
import { showMessage } from "siyuan";
import type PluginFootnote from './index';
import SettingPanel from "./libs/components/setting-panel.svelte";
export let i18n;
export let plugin: PluginFootnote; // Add plugin as prop
let groups: string[] = ["🌈 Group 1", "✨ Group 2"];
let groups: string[] = [
i18n.settings.groups.container,
i18n.settings.groups.style
];
let focusGroup = groups[0];
const group1Items: ISettingItem[] = [
// Container Settings
const containerItems: ISettingItem[] = [
{
type: 'checkbox',
title: 'checkbox',
description: 'checkbox',
key: 'a',
value: true
type: 'select',
title: i18n.settings.saveLocation.title,
description: i18n.settings.saveLocation.description,
key: 'saveLocation',
value: '1',
options: {
1: i18n.settings.saveLocation.current,
2: i18n.settings.saveLocation.specified,
3: i18n.settings.saveLocation.childDoc,
4: i18n.settings.saveLocation.afterParent
}
},
{
type: 'textinput',
title: 'text',
description: 'This is a text',
key: 'b',
value: 'This is a text',
placeholder: 'placeholder'
title: i18n.settings.footnoteContainerTitle.title,
description: i18n.settings.footnoteContainerTitle.description,
key: 'footnoteContainerTitle',
value: i18n.settings.footnoteContainerTitle.value
},
{
type: 'textarea',
title: 'textarea',
description: 'This is a textarea',
key: 'b2',
value: 'This is a textarea',
placeholder: 'placeholder',
direction: 'row'
type: 'textinput',
title: i18n.settings.docId.title,
description: i18n.settings.docId.description,
key: 'docID',
value: ''
},
{
type: 'checkbox',
title: i18n.settings.updateFootnoteContainerTitle.title,
description: i18n.settings.updateFootnoteContainerTitle.description,
key: 'updateFootnoteContainerTitle',
value: true
},
{
type: 'select',
title: 'select',
description: 'select',
key: 'c',
value: 'x',
title: i18n.settings.order.title,
description: i18n.settings.order.description,
key: 'order',
value: '1',
options: {
x: 'x',
y: 'y',
z: 'z'
1: i18n.settings.order.asc,
2: i18n.settings.order.desc
}
}
];
const group2Items: ISettingItem[] = [
// Style Settings
const styleItems: ISettingItem[] = [
{
type: 'button',
title: 'button',
description: 'This is a button',
key: 'e',
value: 'Click Button',
button: {
label: 'Click Me',
callback: () => {
showMessage('Hello, world!');
}
type: 'select',
title: i18n.settings.footnoteRefStyle.title,
description: i18n.settings.footnoteRefStyle.description,
key: 'footnoteRefStyle',
value: '1',
options: {
1: i18n.settings.footnoteRefStyle.ref,
2: i18n.settings.footnoteRefStyle.link
}
},
{
type: 'slider',
title: 'slider',
description: 'slider',
key: 'd',
value: 50,
slider: {
min: 0,
max: 100,
step: 1
type: 'textinput',
title: i18n.settings.footnoteBlockref.title,
description: i18n.settings.footnoteBlockref.description,
key: 'footnoteBlockref',
value: i18n.settings.footnoteBlockref.value
},
{
type: 'checkbox',
title: i18n.settings.enableOrderedFootnotes.title,
description: i18n.settings.enableOrderedFootnotes.description,
key: 'enableOrderedFootnotes',
value: false
},
{
type: 'select',
title: i18n.settings.selectFontStyle.title,
description: i18n.settings.selectFontStyle.description,
key: 'selectFontStyle',
value: '1',
options: {
1: i18n.settings.selectFontStyle.none,
2: i18n.settings.selectFontStyle.custom
}
},
{
type: 'checkbox',
title: i18n.settings.floatDialog.title,
description: i18n.settings.floatDialog.description,
key: 'floatDialogEnable',
value: true
},
{
type: 'textarea',
title: i18n.settings.template.title,
description: i18n.settings.template.description,
key: 'templates',
value: '',
direction: 'row'
},
{
type: 'textinput',
title: i18n.settings.footnoteAlias.title,
description: i18n.settings.footnoteAlias.description,
key: 'footnoteAlias',
value: ''
},
{
type: 'textarea',
title: i18n.settings.css.title,
description: i18n.settings.css.description,
key: 'css',
value: '',
direction: 'row'
}
];
/********** Events **********/
interface ChangeEvent {
group: string;
key: string;
value: any;
// Initialize settings values from plugin
$: {
if (plugin) {
containerItems.forEach(item => {
item.value = plugin.settingUtils.get(item.key);
});
styleItems.forEach(item => {
item.value = plugin.settingUtils.get(item.key);
});
}
}
const onChanged = ({ detail }: CustomEvent<ChangeEvent>) => {
if (detail.group === groups[0]) {
// setting.set(detail.key, detail.value);
//Please add your code here
//Udpate the plugins setting data, don't forget to call plugin.save() for data persistence
const onChanged = async ({ detail }: CustomEvent<ChangeEvent>) => {
if (detail.group === groups[0] || detail.group === groups[1]) {
// Update plugin settings
await plugin.settingUtils.set(detail.key, detail.value);
await plugin.settingUtils.save();
// Update CSS if needed
if (detail.key === 'css') {
plugin.updateCSS(detail.value);
}
}
};
</script>
Expand All @@ -108,7 +176,7 @@
<div class="config__tab-wrap">
<SettingPanel
group={groups[0]}
settingItems={group1Items}
settingItems={containerItems}
display={focusGroup === groups[0]}
on:changed={onChanged}
on:click={({ detail }) => { console.debug("Click:", detail.key); }}
Expand All @@ -119,7 +187,7 @@
</SettingPanel>
<SettingPanel
group={groups[1]}
settingItems={group2Items}
settingItems={styleItems}
display={focusGroup === groups[1]}
on:changed={onChanged}
on:click={({ detail }) => { console.debug("Click:", detail.key); }}
Expand All @@ -135,5 +203,15 @@
.config__panel > ul > li {
padding-left: 1rem;
}
.config__tab-wrap {
overflow: auto;
box-sizing: border-box;
background-color: var(--b3-theme-background);
border-radius: 0 var(--b3-border-radius-b) var(--b3-border-radius-b) 0;
width: 100%;
height: 600px;
display: flex;
flex-direction: column;
}
</style>

0 comments on commit 274f654

Please sign in to comment.