feat: bbcode 增加代码解析

web/plugins/com.msgbyte.bbcode/package.json

@@ -5,6 +5,10 @@
   "private": true,
   "dependencies": {
     "@bbob/parser": "^2.7.0",
+    "react-highlight": "^0.14.0",
     "url-regex": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react-highlight": "^0.12.5"
   }
 }

web/plugins/com.msgbyte.bbcode/src/components/Highlight.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import CodeRender from 'react-highlight';
+
+import 'highlight.js/styles/default.css';
+
+const Highlight: React.FC<{
+  language: string;
+  code: string;
+}> = React.memo((props) => {
+  const CodeComponent = (CodeRender as any).default as typeof CodeRender; // TODO: ministar编译问题，先跳过
+  return <CodeComponent className={props.language}>{props.code}</CodeComponent>;
+});
+Highlight.displayName = 'Highlight';
+
+export default Highlight;

web/plugins/com.msgbyte.bbcode/src/tags/CodeTag.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { TagProps } from '../bbcode/type';
+
+const Highlight = React.lazy(() => import('../components/Highlight'));
+
+export const CodeTag: React.FC<TagProps> = React.memo((props) => {
+  const { node } = props;
+  const text = node.content.join('');
+  const language = node.attrs.language ?? 'bash';
+
+  return <Highlight language={language} code={text} />;
+});
+CodeTag.displayName = 'CodeTag';

web/plugins/com.msgbyte.bbcode/src/tags/__all__.ts

@@ -1,4 +1,5 @@
 import { registerBBCodeTag } from '../bbcode/parser';
+import { CodeTag } from './CodeTag';
 import { ImgTag } from './ImgTag';
 import { PlainText } from './PlainText';
 import { UrlTag } from './UrlTag';
@@ -6,3 +7,4 @@ import { UrlTag } from './UrlTag';
 registerBBCodeTag('_text', PlainText);
 registerBBCodeTag('url', UrlTag);
 registerBBCodeTag('img', ImgTag);
+registerBBCodeTag('code', CodeTag);

web/plugins/com.msgbyte.bbcode/tsconfig.json

@@ -3,6 +3,7 @@
     "rootDir": "./src",
     "baseUrl": "./src",
     "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "jsx": "react",
     "paths": {
       "@capital/*": ["../../../src/plugin/*"],

web/plugins/com.msgbyte.bbcode/yarn.lock

@@ -14,11 +14,54 @@
   resolved "https://registry.nlark.com/@bbob/plugin-helper/download/@bbob/plugin-helper-2.7.0.tgz#e24f4a103a2b4daa71674d751af766c791d1d570"
   integrity sha1-4k9KEDorTapxZ011Gvdmx5HR1XA=
 
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
+"@types/react-highlight@^0.12.5":
+  version "0.12.5"
+  resolved "https://registry.yarnpkg.com/@types/react-highlight/-/react-highlight-0.12.5.tgz#b2af7ca998247b0bc7859b674552df97b366c3b1"
+  integrity sha512-P8+mTxltxDdQ+99l+pjn40clziSbNrZy5d5zmvG+j3jKzokAhCoCZlIRmmnFgETTYubuqwKjvXSlvesBZcTfvQ==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "17.0.34"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.34.tgz#797b66d359b692e3f19991b6b07e4b0c706c0102"
+  integrity sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+csstype@^3.0.2:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
+  integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
+
+highlight.js@^10.5.0:
+  version "10.7.3"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
+  integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
+
 ip-regex@^4.1.0:
   version "4.3.0"
   resolved "https://registry.nlark.com/ip-regex/download/ip-regex-4.3.0.tgz#687275ab0f57fa76978ff8f4dddc8a23d5990db5"
   integrity sha1-aHJ1qw9X+naXj/j03dyKI9WZDbU=
 
+react-highlight@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/react-highlight/-/react-highlight-0.14.0.tgz#5aefa5518baa580f96b68d48129d7a5d2dc0c9ef"
+  integrity sha512-kWE+KXOXidS7SABhVopOgMnowbI3RAfeGZbnrduLNlWrYAED8sycL9l/Fvw3w0PFpIIawB7mRDnyhDcM/cIIGA==
+  dependencies:
+    highlight.js "^10.5.0"
+
 tlds@^1.203.0:
   version "1.221.1"
   resolved "https://registry.nlark.com/tlds/download/tlds-1.221.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftlds%2Fdownload%2Ftlds-1.221.1.tgz#6cf6bff5eaf30c5618c5801c3f425a6dc61ca0ad"