Skip to content

Commit

Permalink
feat(custom-fonts): 使用块菜单设置块字体 | Set block font using block menu.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zuoqiu-Yingyi
Zuoqiu-Yingyi committed Aug 2, 2023
1 parent bcb99eb commit 5cf3bcb
Show file tree
Hide file tree
Showing 9 changed files with 220 additions and 10 deletions.
7 changes: 7 additions & 0 deletions public/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,13 @@ After installing this plugin, click <kbd>SiYuan Settings</kbd> > <kbd>Marketplac

* Customizable font list for emoji symbols used in document icons

* `Menu Settings`

* `Block font list`

* This is a text input box
* Each line of the text box specifies a font name, and you can use the block menu to set the font of the block to this font

## CHANGELOG

[CHANGELOG.md](https://github.com/Zuoqiu-Yingyi/siyuan-plugin-custom-fonts/blob/main/CHANGELOG.md)
7 changes: 7 additions & 0 deletions public/README_zh_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,13 @@

* 在该选项卡中可以自定义文档图标中的表情符号所使用的字体

* `菜单设置`

* `块字体列表`

* 这是一个文本输入框
* 文本框的的每一行指定一个字体名称, 可以使用块菜单设置块的字体为该字体

## 更改日志

[CHANGELOG.md](https://github.com/Zuoqiu-Yingyi/siyuan-plugin-custom-fonts/blob/main/CHANGELOG.md)
18 changes: 16 additions & 2 deletions public/i18n/en_US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,17 @@
"menu": {
"allFonts": {
"label": "All Fonts"
},
"clearFontStyle": {
"label": "Clear Font Style"
},
"customBlockFont": {
"label": "Custom Block Font"
}
},
"message": {
"notSupportQueryLocalFonts": "The current app doesn't support querying local fonts!",
"loading": "Loading..."
"loading": "Loading...",
"notSupportQueryLocalFonts": "The current app doesn't support querying local fonts!"
},
"settings": {
"cssSettings": {
Expand Down Expand Up @@ -102,6 +108,14 @@
"title": "The List of Usable Fonts"
},
"title": "General Settings"
},
"menuSettings": {
"blockFontList": {
"description": "Use the block menu to quickly set the font of block, one font name per line, please refer to <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/font-family'>font-family</a> for the name format",
"placeholder": "Please enter a list of custom fonts here",
"title": "Block Font List"
},
"title": "Menu Settings"
}
}
}
18 changes: 16 additions & 2 deletions public/i18n/zh_CHT.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,17 @@
"menu": {
"allFonts": {
"label": "所有字型"
},
"clearFontStyle": {
"label": "清除字型樣式"
},
"customBlockFont": {
"label": "自定義塊字型"
}
},
"message": {
"notSupportQueryLocalFonts": "當前應用不支援查詢本地字型！",
"loading": "載入中..."
"loading": "載入中...",
"notSupportQueryLocalFonts": "當前應用不支援查詢本地字型！"
},
"settings": {
"cssSettings": {
Expand Down Expand Up @@ -102,6 +108,14 @@
"title": "可用字型列表"
},
"title": "常規設定"
},
"menuSettings": {
"blockFontList": {
"description": "使用塊選單快速設定塊字型，每行一個字型名稱，名稱格式請參考 <a href='https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family'>font-family</a>",
"placeholder": "請在這裡輸入自定義的字型列表",
"title": "塊字型列表"
},
"title": "選單設定"
}
}
}
18 changes: 16 additions & 2 deletions public/i18n/zh_CN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,17 @@
"menu": {
"allFonts": {
"label": "所有字体"
},
"clearFontStyle": {
"label": "清除字体样式"
},
"customBlockFont": {
"label": "自定义块字体"
}
},
"message": {
"notSupportQueryLocalFonts": "当前应用不支持查询本地字体！",
"loading": "加载中..."
"loading": "加载中...",
"notSupportQueryLocalFonts": "当前应用不支持查询本地字体！"
},
"settings": {
"cssSettings": {
Expand Down Expand Up @@ -102,6 +108,14 @@
"title": "可用字体列表"
},
"title": "常规设置"
},
"menuSettings": {
"blockFontList": {
"description": "使用块菜单快速设置块字体，每行一个字体名称，名称格式请参考 <a href='https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family'>font-family</a>",
"placeholder": "请在这里输入自定义的字体列表",
"title": "块字体列表"
},
"title": "菜单设置"
}
}
}
35 changes: 35 additions & 0 deletions src/components/Settings.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
general,
snippet,
fonts,
menu,
}
enum TabKey {
Expand Down Expand Up @@ -88,6 +89,12 @@
name: i18n.settings.fontsSettings.title,
icon: "#iconFont",
},
{
key: PanelKey.menu,
text: i18n.settings.menuSettings.title,
name: i18n.settings.menuSettings.title,
icon: "#iconMenu",
},
];
let fonts_settings_tabs_focus_key = TabKey.base;
Expand Down Expand Up @@ -466,6 +473,34 @@
</div>
</Tabs>
</Panel>

<!-- 块菜单设置面板 -->
<Panel display={panels[3].key === focusPanel}>
<!-- CSS 片段输入框 -->
<Item
block={true}
title={i18n.settings.menuSettings.blockFontList.title}
text={i18n.settings.menuSettings.blockFontList.description}
>
<Input
slot="input"
block={true}
type={ItemType.textarea}
height={textareaHeight}
settingKey="list"
settingValue={config.menu.block.list.join("\n")}
placeholder={i18n.settings.menuSettings.blockFontList.placeholder}
on:changed={e => {
if (e.detail.value === "") {
config.menu.block.list = [];
} else {
config.menu.block.list = e.detail.value.split("\n");
}
updated();
}}
/>
</Item>
</Panel>
</Panels>

<style lang="less">
Expand Down
28 changes: 28 additions & 0 deletions src/configs/default.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,32 @@ export const DEFAULT_CONFIG: IConfig = {
],
},
},
menu: {
block: {
enable: true,
list: [
"等线",
"方正舒体",
"方正姚体",
"仿宋",
"黑体",
"华文彩云",
"华文仿宋",
"华文琥珀",
"华文楷体",
"华文隶书",
"华文宋体",
"华文细黑",
"华文新魏",
"华文行楷",
"华文中宋",
"楷体",
"隶书",
"宋体",
"微软雅黑",
"新宋体",
"幼圆",
],
}
}
};
97 changes: 94 additions & 3 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { type IListItem } from "@workspace/components/siyuan/list/list";
import List from "@workspace/components/siyuan/list/List.svelte"

import { fontData2CssFontStyle } from "@workspace/utils/font/css";
import { getBlockMenuContext } from "@workspace/utils/siyuan/menu/block";

import Settings from "./components/Settings.svelte";

Expand All @@ -36,10 +37,14 @@ import {
} from "./utils/style";
import { DEFAULT_CONFIG } from "./configs/default";
import type { IConfig } from "./types/config";
import type { IClickBlockIconEvent } from "@workspace/types/siyuan/events";
import type { I18N } from "@/utils/i18n";

export default class CustomFontsPlugin extends siyuan.Plugin {
static readonly GLOBAL_CONFIG_NAME = "global-config";

declare public readonly i18n: I18N;

public readonly siyuan = siyuan;
public readonly logger: InstanceType<typeof Logger>;
public readonly client: InstanceType<typeof Client>;
Expand Down Expand Up @@ -69,15 +74,33 @@ export default class CustomFontsPlugin extends siyuan.Plugin {
this.config = mergeIgnoreArray(DEFAULT_CONFIG, config || {}) as IConfig;
})
.catch(error => this.logger.error(error))
.finally(() => {
this.updateStyle();
.finally(async () => {
await this.updateStyle();

this.eventBus.on("click-blockicon", this.blockMenuEventListener);

/* 注册命令 */
this.addCommand({
langKey: "show-system-fonts",
langText: this.i18n.settings.generalSettings.showSystemFonts.title,
hotkey: "",
callback: () => this.showSystemFonts(),
});
this.addCommand({
langKey: "show-usable-fonts",
langText: this.i18n.settings.generalSettings.showUsableFonts.title,
hotkey: "",
callback: () => this.showUsableFonts(),
});
});
}

onLayoutReady(): void {
}

onunload(): void {
this.eventBus.off("click-blockicon", this.blockMenuEventListener);

this.client.getSnippet({
type: "css",
enabled: 2,
Expand Down Expand Up @@ -136,7 +159,7 @@ export default class CustomFontsPlugin extends siyuan.Plugin {
}
else {
snippets.push({
id: siyuan.Lute.NewNodeID(),
id: globalThis.Lute.NewNodeID(),
type: "css",
name: this.STYLE_SNIPPET_NAME,
memo: "",
Expand Down Expand Up @@ -246,4 +269,72 @@ export default class CustomFontsPlugin extends siyuan.Plugin {
siyuan.showMessage(`${this.i18n.message.notSupportQueryLocalFonts}<br />[${this.i18n.displayName} <code class="fn__code">${this.name}</code>]`, undefined, "error");
}
}

/* 块菜单 */
protected readonly blockMenuEventListener = (e: IClickBlockIconEvent) => {
// this.logger.debug(e);
const detail = e.detail;
const context = getBlockMenuContext(e.detail);
if (context) {
const submenu: siyuan.IMenuItemOption[] = [];

/* 清除字体 */
submenu.push({
icon: "iconClear",
label: this.i18n.menu.clearFontStyle.label,
click: () => {
context.blocks.forEach(async block => {
block.element.style.fontFamily = null;
const style = block.element.getAttribute("style");
this.client.setBlockAttrs({
id: block.id,
attrs: {
style,
},
});
});
},
});

submenu.push({
type: "separator",
});

/* 设置字体 */
this.config.menu.block.list.forEach(font => {
if (/^\s*$/.test(font)) return;
else font = font.trim();

submenu.push({
icon: "iconFont",
label: font,
accelerator: `font-family: ${font}`,
click: () => {
context.blocks.forEach(async block => {
block.element.style.fontFamily = font;
const style = block.element.getAttribute("style");
this.client.setBlockAttrs({
id: block.id,
attrs: {
style,
},
});
});
},
bind: element => {
const label: HTMLElement = element.querySelector(".b3-menu__label");
if (label) {
label.style.fontFamily = font;
}
},
});
});

detail.menu.addItem({
icon: "iconFont",
label: this.i18n.menu.customBlockFont.label,
submenu,
});
}
}
};
2 changes: 1 addition & 1 deletion src/types/config.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export interface IFonts {
}

export interface IMenu {
font: IFont, //
block: IFont, // 自定义块字体
}

export interface IConfig {
Expand Down

0 comments on commit 5cf3bcb

Please # to comment.