diff --git a/packages/admin/src/components/Editor/customContainer.tsx b/packages/admin/src/components/Editor/customContainer.tsx
index e18421781..d8a75f221 100644
--- a/packages/admin/src/components/Editor/customContainer.tsx
+++ b/packages/admin/src/components/Editor/customContainer.tsx
@@ -1,109 +1,120 @@
-import { BytemdPlugin } from 'bytemd';
+import { BytemdPlugin } from "bytemd";
+import remarkDirective from "remark-directive";
+import { visit } from "unist-util-visit";
-import remarkDirective from 'remark-directive';
-import { visit } from 'unist-util-visit';
-import { icons } from './icons';
-export function customContainer(): BytemdPlugin {
- return {
- remark: (processer) => processer.use(remarkDirective).use(customContainerPlugin),
-
- viewerEffect: ({ markdownBody }) => {
- const els = markdownBody.querySelectorAll('.custom-container');
- els.forEach((el) => {
- const type = el.className.replace('custom-container', '').trim();
- const title = el.getAttribute('type');
- const titleEl = document.createElement('p');
- titleEl.className = `custom-container-title ${title}`;
-
- const icon = icons[type];
- const html = `${icon}${title}`;
+import { icons } from "./icons";
- titleEl.innerHTML = html;
+const CUSTOM_CONTAINER_ICON =
+ '';
- el.insertBefore(titleEl, el.firstChild);
- });
- },
- actions: [
- {
- title: '自定义高亮块',
- icon: '',
- cheatsheet: `:::info{title="标题"}`,
- handler: {
- type: 'dropdown',
- actions: customContainerActionItems.map(({ title, code }) => {
- return {
- title,
- handler: {
- type: 'action',
- click({ editor, appendBlock, codemirror }) {
- const { line } = appendBlock(code);
- editor.setSelection(codemirror.Pos(line + 1, 0), codemirror.Pos(line + 1));
- editor.focus();
- },
- },
- };
- }),
- },
- },
- ],
- };
-}
-
-const customContainerActionItems = [
+const CUSTOM_CONTAINER_ACTIONS = [
{
- title: 'info',
+ title: "info",
code: `:::info{title="相关信息"}\n相关信息\n:::`,
},
{
- title: 'note',
+ title: "note",
code: `:::note{title="注"}\n注\n:::`,
},
{
- title: 'warning',
+ title: "warning",
code: `:::warning{title="注意"}\n注意\n:::`,
},
{
- title: 'danger',
+ title: "danger",
code: `:::danger{title="警告"}\n警告\n:::`,
},
{
- title: 'tip',
+ title: "tip",
code: `:::tip{title="提示"}\n提示\n:::`,
},
];
-const customContainerTitleMap: Record = {
- note: '注',
- info: '相关信息',
- warning: '注意',
- danger: '警告',
- tip: '提示',
+const CUSTOM_CONTAINER_TITLE: Record = {
+ note: "注",
+ info: "相关信息",
+ warning: "注意",
+ danger: "警告",
+ tip: "提示",
};
-function customContainerPlugin() {
- return (tree) => {
- visit(tree, (node) => {
- if (
- node.type === 'textDirective' ||
- node.type === 'leafDirective' ||
- node.type === 'containerDirective'
- ) {
- if (node.type == 'containerDirective') {
- const data = node.data || (node.data = {});
- const tagName = node.name;
- data.hName = 'div';
- const { attributes } = node || {};
- const title = attributes?.title || customContainerTitleMap[tagName];
- const cls = `custom-container ${tagName}`;
- data.hProperties = {
- class: cls,
- ['type']: title,
- };
- return {
- ...node,
- data,
- };
- }
+
+// FIXME: Addd Types
+const customContainerPlugin = () => (tree) => {
+ visit(tree, (node) => {
+ if (
+ node.type === "textDirective" ||
+ node.type === "leafDirective" ||
+ node.type === "containerDirective"
+ ) {
+ if (node.type == "containerDirective") {
+ const { attributes, data = {}, name: tagName } = node;
+
+ const title = attributes?.title || CUSTOM_CONTAINER_TITLE[tagName];
+ const cls = `custom-container ${tagName}`;
+
+ data.hName = "div";
+ data.hProperties = {
+ class: cls,
+ ["type"]: title,
+ };
+
+ return {
+ ...node,
+ data,
+ };
}
- });
+ }
+ });
+};
+
+export function customContainer(): BytemdPlugin {
+ return {
+ remark: (processor) =>
+ processor.use(remarkDirective).use(customContainerPlugin),
+
+ viewerEffect: ({ markdownBody }) => {
+ const elements = markdownBody.querySelectorAll(".custom-container");
+
+ elements.forEach((element) => {
+ const type = element.className.replace("custom-container", "").trim();
+ const title = element.getAttribute("type");
+ const titleEl = document.createElement("p");
+
+ titleEl.className = `custom-container-title ${title}`;
+
+ const icon = icons[type];
+ const html = `${icon}${title}`;
+
+ titleEl.innerHTML = html;
+
+ element.insertBefore(titleEl, element.firstChild);
+ });
+ },
+
+ actions: [
+ {
+ title: "自定义高亮块",
+ icon: CUSTOM_CONTAINER_ICON,
+ cheatsheet: `:::info{title="标题"}`,
+ handler: {
+ type: "dropdown",
+ actions: CUSTOM_CONTAINER_ACTIONS.map(({ title, code }) => ({
+ title,
+ handler: {
+ type: "action",
+ click: ({ editor, appendBlock, codemirror }) => {
+ const { line } = appendBlock(code);
+
+ editor.setSelection(
+ codemirror.Pos(line + 1, 0),
+ codemirror.Pos(line + 1)
+ );
+ editor.focus();
+ },
+ },
+ })),
+ },
+ },
+ ],
};
}