-
Notifications
You must be signed in to change notification settings - Fork 426
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 前后台统一Markdown组件，展示效果完全一致；解决了主题重影问题 #136
- Loading branch information
Showing
39 changed files
with
1,720 additions
and
1,608 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 93 additions & 0 deletions
93
packages/admin/src/components/Editor/plugins/codeBlock.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import type { BytemdPlugin } from "bytemd"; | ||
| import { visit } from "unist-util-visit"; | ||
| import copy from 'copy-to-clipboard'; | ||
| import { message } from "antd"; | ||
| // FIXME: Addd Types | ||
| const codeBlockPlugin = () => (tree) => { | ||
| visit(tree, (node) => { | ||
| if (node.type === "element" && node.tagName === "pre") { | ||
| const oldChildren = JSON.parse(JSON.stringify(node.children)); | ||
| const codeProperties = oldChildren.find((child: any) => child.tagName === "code").properties; | ||
| let language = ""; | ||
| if (codeProperties.className) { | ||
| for (const each of codeProperties.className) { | ||
| if (each.startsWith("language-")) { | ||
| language = each.replace("language-", ""); | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| if (language === "mermaid") return; | ||
| // 复制按钮 | ||
| const codeCopyBtn = { | ||
| type: "element", | ||
| tagName: "div", | ||
| properties: { | ||
| class: "code-copy-btn", | ||
| }, | ||
| children: [] | ||
| } | ||
| const languageTag = { | ||
| type: "element", | ||
| tagName: "span", | ||
| properties: { | ||
| class: "language-tag mr-1", | ||
| style: "line-height: 21px" | ||
| }, | ||
| children: [ | ||
| { | ||
| type: "text", | ||
| value: language | ||
| } | ||
| ] | ||
| } | ||
| // 上方右侧 header | ||
| const headerRight = { | ||
| type: "element", | ||
| tagName: "div", | ||
| properties: { | ||
| class: "header-right flex", | ||
| style: "color: #6f7177", | ||
|
|
||
| }, | ||
| children: [ | ||
| languageTag, codeCopyBtn | ||
| ] | ||
| } | ||
| // 包裹的 div | ||
| const wrapperDiv = { | ||
| type: "element", | ||
| tagName: "div", | ||
| properties: { | ||
| class: "code-block-wrapper relative" | ||
| }, | ||
| children: [ | ||
| headerRight, ...oldChildren | ||
| ] | ||
| } | ||
| node.children = [wrapperDiv] | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const onClickCopyCode = (e: PointerEvent) => { | ||
| const copyBtn = e.target as HTMLElement; | ||
| const code = copyBtn.parentElement?.parentElement?.querySelector("code")?.innerText; | ||
| copy(code); | ||
| message.success("复制成功") | ||
| } | ||
|
|
||
| export function customCodeBlock(): BytemdPlugin { | ||
| return { | ||
| rehype: (processor) => | ||
| processor.use(codeBlockPlugin), | ||
| viewerEffect: ({ markdownBody }) => { | ||
| markdownBody.querySelectorAll(".code-block-wrapper").forEach((codeBlock) => { | ||
| const copyBtn = codeBlock.querySelector(".code-copy-btn") | ||
| //remove first | ||
| copyBtn.removeEventListener("click", onClickCopyCode); | ||
| copyBtn.addEventListener("click", onClickCopyCode); | ||
| }) | ||
| } | ||
| }; | ||
| } |
Oops, something went wrong.