Custom logger, seperated Webpack conf, Webpack for MainProc, new npm srcipt and more.

.github/workflows/webpack.yml

@@ -25,7 +25,6 @@ jobs:
     - name: Build
       run: |
         npm install
-        npm run build
         npm run release
         unzip release.zip -d ./artifact_content
         rm release.zip

docs/dev/renderer.md

@@ -1,43 +1,49 @@
-![React](https://img.shields.io/badge/React-blue?style=for-the-badge&logo=react&logoColor=white)![JavaScript](https://img.shields.io/badge/JavaScript-yellow?style=for-the-badge&logo=javascript&logoColor=white)![Typescript](https://img.shields.io/badge/TypeScript-blue?style=for-the-badge&logo=typescript&logoColor=white)![Webpack](https://img.shields.io/badge/Webpack-grey?style=for-the-badge&logo=react&logoColor=white)
+![React](https://img.shields.io/badge/React-blue?style=for-the-badge&logo=react&logoColor=white)
+![JavaScript](https://img.shields.io/badge/JavaScript-yellow?style=for-the-badge&logo=javascript&logoColor=white)
+![Typescript](https://img.shields.io/badge/TypeScript-blue?style=for-the-badge&logo=typescript&logoColor=white)
+![Webpack](https://img.shields.io/badge/Webpack-grey?style=for-the-badge&logo=react&logoColor=white)
 
+- [Introduction](#introduction)
+  - [Start Developing](#start-developing)
+  - [Create Release Version](#create-release-version)
+- [UI Development](#ui-development)
+- [Content Rendering Test Example](#content-rendering-test-example)
 
 
 # Introduction
 
-For how to clone and build this project, checkout the third method mentioned in [Installation Guide](/docs/plug_install.md)
+For how to clone and build this project, checkout the third method mentioned in [Installation Guide](/docs/plug_install.md).
 
-## Bundling Using Webpack
+## Start Developing
 
-All markdown rendering business is inside Renderer Process currently, 
-and all code in Renderer process has been bundled to `dist/renderer.js` using `webpack`. 
-So before start developing, run `npm install` to get all dependencies.
+First of all, run:
 
-For a better dev experience, you could change the webpack config:
+```shell
+npm install
+```
 
-```js
-module.exports = {
+This will help you get all deps used by this project. Then you can call:
 
-    watch: true,            // rebundle when file changed
-    mode: 'development',    // enable webpack development mode
-                            // check out https://webpack.js.org/configuration/mode/ for more info.
-    ...// other configs
-};
+```shell
+npm run dev
 ```
 
-> Remember to change mode back to `production` when bundling release version.
+This will start `webpack` in watch mode with `development` flag enabled.
+
 
 ## Create Release Version
 
-`dist` directory is not included in `git`, to create a release version of this extension, please run:
+To create a release version of this extension, please run:
 
 ```shell
-npm run release
+npm run release # create Release.zip with ./dist included
 ```
 
-This script will:
+The script `npm run release` will:
 
-- First use `git archive` to create a `release.zip` file contains all code included in `git`.
-- Use `zip -r` to add `dist` directory into previously generated `release.zip`.
+1. Run `npm run build` to generate `./dist` resources.
+2. Run `git archive` to create a `release.zip` file contains all code included in `git`.
+3. Run `zip -r` to add `dist` directory into previously generated `release.zip`.
 
 # UI Development
 

manifest.json

@@ -30,4 +30,4 @@
         "main": "./src/main.js",
         "preload": "./src/preload.js"
     }
-}
+}

package.json

@@ -7,11 +7,14 @@
         "markdown-it": "^14.1.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "throttle-debounce": "^5.0.2",
         "zustand": "^4.5.4"
     },
     "scripts": {
-        "build": "webpack",
-        "release": "git archive -o release.zip HEAD && zip -r release.zip dist"
+        "build": "webpack --config webpack.prod.js",
+        "dev": "webpack --config webpack.dev.js",
+        "release": "git archive -o release.zip HEAD && zip -r release.zip dist",
+        "prerelease": "npm run build"
     },
     "devDependencies": {
         "@babel/core": "^7.24.7",
@@ -22,6 +25,7 @@
         "babel-loader": "^9.1.3",
         "webpack": "^5.92.1",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.4"
+        "webpack-dev-server": "^5.0.4",
+        "webpack-merge": "^6.0.1"
     }
-}
+}

src/components/code_block.jsx

@@ -3,15 +3,14 @@ import hljs from 'highlight.js';
 
 import { unescapeHtml, escapeHtml } from '@/utils/htmlProc';
 import { useSettingsStore } from '@/states/settings';
+import { mditLogger } from "@/utils/logger";
 
 export function HighLightedCodeBlock({ content, lang, markdownItIns }) {
 
     if (!lang || !hljs.getLanguage(lang)) {
         lang = 'plaintext';
     }
 
-    console.debug(`[Markdown-it] Inside Fenced Code, unescapeBeforeHighlight=${useSettingsStore.getState().unescapeBeforeHighlight}`);
-
     function contentPreprocess(input) {
 
         // if unescapeAll has enabled, unescape code content again may cause display error
@@ -31,7 +30,7 @@ export function HighLightedCodeBlock({ content, lang, markdownItIns }) {
     try {
         Finalcontent = hljs.highlight(contentPreprocess(content), { language: lang, ignoreIllegals: true }).value;
     } catch (e) {
-        console.debug(`[Markdown-it] hljs error: ${e}`);
+        mditLogger('error', `hljs error:`, e);
     }
 
     return (<pre className='hljs hl-code-block'>
@@ -47,10 +46,8 @@ export function renderInlineCodeBlockString(tokens, idx, options, env, slf) {
     var token = tokens[idx];
 
     if (useSettingsStore.getState().unescapeAllHtmlEntites === true) {
-        console.debug(`[Markdown-it] Inside Inline Render: escape=true`);
         token.content = escapeHtml(token.content);
     }
-    console.debug(`[Markdown-it] Inside Inline Render: escape=false`);
 
 
     return '<code' + slf.renderAttrs(token) + '>' +

src/components/setting_page.jsx

@@ -10,7 +10,7 @@ export function SettingPage() {
     // use encapsulated <DescriptionTile> and <SwitchSettingTile> whenever possible.
     return (<>
 
-        <setting-section data-title='注意事项'>
+        <setting-section data-title='关于'>
             <setting-panel>
                 <setting-list data-direction='column'>
                     <setting-item data-direction='row'>
@@ -78,6 +78,11 @@ export function SettingPage() {
 
                     <DescriptionTile title='SettingsState' caption={JSON.stringify(settings, undefined, ' ')} />
 
+                    <SwitchSettingTile
+                        settingName='consoleOutput'
+                        title='控制台输出'
+                        caption='关闭后，将屏蔽 MarkdownIt 插件向控制台输出的信息，目前仅能屏蔽部分信息。' />
+
                     <SwitchSettingTile
                         settingName='unescapeGtInText'
                         title='反转义消息字符中的">"符号'