From 7678bd48607fa6cd94bbb6f11f8b03c815ac457e Mon Sep 17 00:00:00 2001 From: Innei Date: Fri, 9 Aug 2024 14:29:33 +0800 Subject: [PATCH] chore: remove markdown-it, use remark Signed-off-by: Innei --- package.json | 9 +- pnpm-lock.yaml | 380 ++++++++++++++---- .../src/components/ui/markdown/Markdown.tsx | 35 +- .../components/ui/markdown/index.module.css | 264 ------------ .../ui/markdown/plugins/container.ts | 31 -- src/renderer/src/lib/parse-markdown.ts | 49 ++- .../src/modules/ai/ai-daily/daily.tsx | 20 +- 7 files changed, 374 insertions(+), 414 deletions(-) delete mode 100644 src/renderer/src/components/ui/markdown/index.module.css delete mode 100644 src/renderer/src/components/ui/markdown/plugins/container.ts diff --git a/package.json b/package.json index 050e26273..8af60e258 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@hono/auth-js": "1.0.10", "@hookform/resolvers": "3.9.0", "@iconify/tools": "4.0.4", + "@microflash/remark-callout-directives": "4.3.1", "@mozilla/readability": "^0.5.0", "@radix-ui/react-alert-dialog": "1.1.1", "@radix-ui/react-avatar": "1.1.0", @@ -93,8 +94,6 @@ "linkedom": "^0.18.4", "lodash-es": "4.17.21", "lowdb": "7.0.1", - "markdown-it": "14.1.0", - "markdown-it-container": "4.0.0", "nanoid": "5.0.7", "ofetch": "1.3.4", "path-to-regexp": "7.1.0", @@ -113,6 +112,9 @@ "rehype-parse": "9.0.0", "rehype-sanitize": "6.0.0", "rehype-stringify": "10.0.0", + "remark-directive": "3.0.0", + "remark-gfm": "4.0.0", + "remark-gh-alerts": "0.0.3", "remark-parse": "11.0.0", "remark-rehype": "11.1.0", "semver": "7.6.3", @@ -142,8 +144,7 @@ "@tailwindcss/container-queries": "0.1.1", "@tailwindcss/typography": "0.5.13", "@types/lodash-es": "4.17.12", - "@types/markdown-it": "14.1.2", - "@types/markdown-it-container": "2.0.10", + "@types/node": "^20.14.12", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aae28df9d..30911b1c4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,6 +43,9 @@ importers: '@iconify/tools': specifier: 4.0.4 version: 4.0.4 + '@microflash/remark-callout-directives': + specifier: 4.3.1 + version: 4.3.1 '@mozilla/readability': specifier: ^0.5.0 version: 0.5.0(patch_hash=fgkvsbckled47trggkhdkimzbm) @@ -208,12 +211,6 @@ importers: lowdb: specifier: 7.0.1 version: 7.0.1 - markdown-it: - specifier: 14.1.0 - version: 14.1.0 - markdown-it-container: - specifier: 4.0.0 - version: 4.0.0 nanoid: specifier: 5.0.7 version: 5.0.7 @@ -268,6 +265,15 @@ importers: rehype-stringify: specifier: 10.0.0 version: 10.0.0 + remark-directive: + specifier: 3.0.0 + version: 3.0.0 + remark-gfm: + specifier: 4.0.0 + version: 4.0.0 + remark-gh-alerts: + specifier: 0.0.3 + version: 0.0.3(@types/mdast@4.0.3)(unified@11.0.5) remark-parse: specifier: 11.0.0 version: 11.0.0 @@ -350,12 +356,6 @@ importers: '@types/lodash-es': specifier: 4.17.12 version: 4.17.12 - '@types/markdown-it': - specifier: 14.1.2 - version: 14.1.2 - '@types/markdown-it-container': - specifier: 2.0.10 - version: 2.0.10 '@types/node': specifier: ^20.14.12 version: 20.14.12 @@ -1091,6 +1091,9 @@ packages: resolution: {integrity: sha512-9QOtNffcOF/c1seMCDnjckb3R9WHcG34tky+FHpNKKCW0wc/scYLwMtO+ptyGUfMW0/b/n4qRiALlaFHc9Oj7Q==} engines: {node: '>= 10.0.0'} + '@microflash/remark-callout-directives@4.3.1': + resolution: {integrity: sha512-ZCS8+6ykJ4AqKPi6w1q3oV8RnRkaU+jOyT8b8LcvF1sNe9aufqgkInXvE93lrYyD7+04cVtmdtiUa07dI7KTNA==} + '@mozilla/readability@0.5.0': resolution: {integrity: sha512-Z+CZ3QaosfFaTqvhQsIktyGrjFjSC0Fa4EMph4mqKnWhmyoGICsV/8QK+8HpXut6zV7zwfWwqDmEjtk1Qf6EgQ==} engines: {node: '>=14.0.0'} @@ -2453,27 +2456,15 @@ packages: '@types/koa__router@12.0.3': resolution: {integrity: sha512-5YUJVv6NwM1z7m6FuYpKfNLTZ932Z6EF6xy2BbtpJSyn13DKNQEkXVffFVSnJHxvwwWh2SAeumpjAYUELqgjyw==} - '@types/linkify-it@5.0.0': - resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==} - '@types/lodash-es@4.17.12': resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==} '@types/lodash@4.17.4': resolution: {integrity: sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==} - '@types/markdown-it-container@2.0.10': - resolution: {integrity: sha512-zv+YxrlSYRq51e9kzm3orv4OvF4U79Ll1OyplNXr00o4ZC/8PukJk/jEWH7CnsMtrSWZlyv0czhz42jm9J4uLw==} - - '@types/markdown-it@14.1.2': - resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==} - '@types/mdast@4.0.3': resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==} - '@types/mdurl@2.0.0': - resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==} - '@types/mime@1.3.5': resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==} @@ -3675,6 +3666,10 @@ packages: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} + escape-string-regexp@5.0.0: + resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==} + engines: {node: '>=12'} + eslint-compat-utils@0.5.0: resolution: {integrity: sha512-dc6Y8tzEcSYZMHa+CMPLi/hyo1FzNeonbhJL7Ol0ccuKQkwopJcJBA9YL/xmMTLU1eKigXo9vj9nALElWYSowg==} engines: {node: '>=12'} @@ -4313,6 +4308,9 @@ packages: hastscript@8.0.0: resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} + hastscript@9.0.0: + resolution: {integrity: sha512-jzaLBGavEDKHrc5EfFImKN7nZKKBdSLIdGvCwDZ9TfzbF2ffXiov8CKE445L2Z1Ek2t/m4SKQ2j6Ipv7NyUolw==} + hermes-estree@0.20.1: resolution: {integrity: sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==} @@ -4766,9 +4764,6 @@ packages: linkedom@0.18.4: resolution: {integrity: sha512-JhLErxMIEOKByMi3fURXgI1fYOzR87L1Cn0+MI9GlMckFrqFZpV1SUGox1jcKtsKN3y6JgclcQf0FzZT//BuGw==} - linkify-it@5.0.0: - resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==} - lint-staged@15.2.7: resolution: {integrity: sha512-+FdVbbCZ+yoh7E/RosSdqKJyUM2OEjTciH0TFNkawKgvFp1zbGlEC39RADg+xKBG1R4mhoH2j85myBQZ5wR+lw==} engines: {node: '>=18.12.0'} @@ -4909,20 +4904,43 @@ packages: resolution: {integrity: sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==} engines: {node: '>=6'} - markdown-it-container@4.0.0: - resolution: {integrity: sha512-HaNccxUH0l7BNGYbFbjmGpf5aLHAMTinqRZQAEQbMr2cdD3z91Q6kIo1oUn1CQndkT03jat6ckrdRYuwwqLlQw==} - - markdown-it@14.1.0: - resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==} - hasBin: true + markdown-table@3.0.3: + resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==} matcher@3.0.0: resolution: {integrity: sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==} engines: {node: '>=10'} + mdast-util-directive@3.0.0: + resolution: {integrity: sha512-JUpYOqKI4mM3sZcNxmF/ox04XYFFkNwr0CFlrQIkCwbvH0xzMCqkMqAde9wRd80VAhaUrwFwKm2nxretdT1h7Q==} + + mdast-util-find-and-replace@3.0.1: + resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==} + mdast-util-from-markdown@2.0.0: resolution: {integrity: sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==} + mdast-util-from-markdown@2.0.1: + resolution: {integrity: sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==} + + mdast-util-gfm-autolink-literal@2.0.0: + resolution: {integrity: sha512-FyzMsduZZHSc3i0Px3PQcBT4WJY/X/RCtEJKuybiC6sjPqLv7h1yqAkmILZtuxMSsUyaLUWNp71+vQH2zqp5cg==} + + mdast-util-gfm-footnote@2.0.0: + resolution: {integrity: sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==} + + mdast-util-gfm-strikethrough@2.0.0: + resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==} + + mdast-util-gfm-table@2.0.0: + resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==} + + mdast-util-gfm-task-list-item@2.0.0: + resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==} + + mdast-util-gfm@3.0.0: + resolution: {integrity: sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==} + mdast-util-mdx-expression@2.0.0: resolution: {integrity: sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==} @@ -4950,9 +4968,6 @@ packages: mdn-data@2.0.30: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} - mdurl@2.0.0: - resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==} - mem@4.3.0: resolution: {integrity: sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==} engines: {node: '>=6'} @@ -4967,6 +4982,30 @@ packages: micromark-core-commonmark@2.0.0: resolution: {integrity: sha512-jThOz/pVmAYUtkroV3D5c1osFXAMv9e0ypGDOIZuCeAe91/sD6BoE2Sjzt30yuXtwOYUmySOhMas/PVyh02itA==} + micromark-extension-directive@3.0.1: + resolution: {integrity: sha512-VGV2uxUzhEZmaP7NSFo2vtq7M2nUD+WfmYQD+d8i/1nHbzE+rMy9uzTvUybBbNiVbrhOZibg3gbyoARGqgDWyg==} + + micromark-extension-gfm-autolink-literal@2.1.0: + resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==} + + micromark-extension-gfm-footnote@2.1.0: + resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==} + + micromark-extension-gfm-strikethrough@2.1.0: + resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==} + + micromark-extension-gfm-table@2.1.0: + resolution: {integrity: sha512-Ub2ncQv+fwD70/l4ou27b4YzfNaCJOvyX4HxXU15m7mpYY+rjuWzsLIPZHJL253Z643RpbcP1oeIJlQ/SKW67g==} + + micromark-extension-gfm-tagfilter@2.0.0: + resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==} + + micromark-extension-gfm-task-list-item@2.1.0: + resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==} + + micromark-extension-gfm@3.0.0: + resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==} + micromark-factory-destination@2.0.0: resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==} @@ -5647,10 +5686,6 @@ packages: pump@3.0.0: resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==} - punycode.js@2.3.1: - resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==} - engines: {node: '>=6'} - punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} @@ -5879,12 +5914,27 @@ packages: rehype-stringify@10.0.0: resolution: {integrity: sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==} + remark-directive@3.0.0: + resolution: {integrity: sha512-l1UyWJ6Eg1VPU7Hm/9tt0zKtReJQNOA4+iDMAxTyZNWnJnFlbS/7zhiel/rogTLQ2vMYwDzSJa4BiVNqGlqIMA==} + + remark-gfm@4.0.0: + resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==} + + remark-gh-alerts@0.0.3: + resolution: {integrity: sha512-c+LiDARwwUnDN60dSlQDV4hoGFDrtkTdZZ6F2r0f5BANLejLNP1ywZIzQTWfN+fTwyGHp+O3wjXqK1QVtmVBRQ==} + peerDependencies: + '@types/mdast': ^4.0.3 + unified: ^11.0.4 + remark-parse@11.0.0: resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} remark-rehype@11.1.0: resolution: {integrity: sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==} + remark-stringify@11.0.0: + resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} + repeat-string@1.6.1: resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==} engines: {node: '>=0.10'} @@ -6479,9 +6529,6 @@ packages: engines: {node: '>=14.17'} hasBin: true - uc.micro@2.1.0: - resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==} - ufo@1.5.3: resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==} @@ -7858,6 +7905,15 @@ snapshots: transitivePeerDependencies: - supports-color + '@microflash/remark-callout-directives@4.3.1': + dependencies: + defu: 6.1.4 + hastscript: 9.0.0 + mdast-util-from-markdown: 2.0.1 + unist-util-visit: 5.0.0 + transitivePeerDependencies: + - supports-color + '@mozilla/readability@0.5.0(patch_hash=fgkvsbckled47trggkhdkimzbm)': {} '@nodelib/fs.scandir@2.1.5': @@ -9465,29 +9521,16 @@ snapshots: dependencies: '@types/koa': 2.14.0 - '@types/linkify-it@5.0.0': {} - '@types/lodash-es@4.17.12': dependencies: '@types/lodash': 4.17.4 '@types/lodash@4.17.4': {} - '@types/markdown-it-container@2.0.10': - dependencies: - '@types/markdown-it': 14.1.2 - - '@types/markdown-it@14.1.2': - dependencies: - '@types/linkify-it': 5.0.0 - '@types/mdurl': 2.0.0 - '@types/mdast@4.0.3': dependencies: '@types/unist': 3.0.2 - '@types/mdurl@2.0.0': {} - '@types/mime@1.3.5': {} '@types/minimatch@5.1.2': {} @@ -10810,6 +10853,8 @@ snapshots: escape-string-regexp@4.0.0: {} + escape-string-regexp@5.0.0: {} + eslint-compat-utils@0.5.0(eslint@9.8.0): dependencies: eslint: 9.8.0 @@ -11773,6 +11818,14 @@ snapshots: property-information: 6.5.0 space-separated-tokens: 2.0.2 + hastscript@9.0.0: + dependencies: + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + hast-util-parse-selector: 4.0.0 + property-information: 6.5.0 + space-separated-tokens: 2.0.2 + hermes-estree@0.20.1: {} hermes-parser@0.20.1: @@ -12209,10 +12262,6 @@ snapshots: htmlparser2: 9.1.0 uhyphen: 0.2.0 - linkify-it@5.0.0: - dependencies: - uc.micro: 2.1.0 - lint-staged@15.2.7: dependencies: chalk: 5.3.0 @@ -12387,22 +12436,33 @@ snapshots: dependencies: p-defer: 1.0.0 - markdown-it-container@4.0.0: {} - - markdown-it@14.1.0: - dependencies: - argparse: 2.0.1 - entities: 4.5.0 - linkify-it: 5.0.0 - mdurl: 2.0.0 - punycode.js: 2.3.1 - uc.micro: 2.1.0 + markdown-table@3.0.3: {} matcher@3.0.0: dependencies: escape-string-regexp: 4.0.0 optional: true + mdast-util-directive@3.0.0: + dependencies: + '@types/mdast': 4.0.3 + '@types/unist': 3.0.2 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.0 + mdast-util-to-markdown: 2.1.0 + parse-entities: 4.0.1 + stringify-entities: 4.0.4 + unist-util-visit-parents: 6.0.1 + transitivePeerDependencies: + - supports-color + + mdast-util-find-and-replace@3.0.1: + dependencies: + '@types/mdast': 4.0.3 + escape-string-regexp: 5.0.0 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + mdast-util-from-markdown@2.0.0: dependencies: '@types/mdast': 4.0.3 @@ -12420,6 +12480,80 @@ snapshots: transitivePeerDependencies: - supports-color + mdast-util-from-markdown@2.0.1: + dependencies: + '@types/mdast': 4.0.3 + '@types/unist': 3.0.2 + decode-named-character-reference: 1.0.2 + devlop: 1.1.0 + mdast-util-to-string: 4.0.0 + micromark: 4.0.0 + micromark-util-decode-numeric-character-reference: 2.0.1 + micromark-util-decode-string: 2.0.0 + micromark-util-normalize-identifier: 2.0.0 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + unist-util-stringify-position: 4.0.0 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-autolink-literal@2.0.0: + dependencies: + '@types/mdast': 4.0.3 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-find-and-replace: 3.0.1 + micromark-util-character: 2.1.0 + + mdast-util-gfm-footnote@2.0.0: + dependencies: + '@types/mdast': 4.0.3 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.0 + mdast-util-to-markdown: 2.1.0 + micromark-util-normalize-identifier: 2.0.0 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-strikethrough@2.0.0: + dependencies: + '@types/mdast': 4.0.3 + mdast-util-from-markdown: 2.0.0 + mdast-util-to-markdown: 2.1.0 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-table@2.0.0: + dependencies: + '@types/mdast': 4.0.3 + devlop: 1.1.0 + markdown-table: 3.0.3 + mdast-util-from-markdown: 2.0.0 + mdast-util-to-markdown: 2.1.0 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-task-list-item@2.0.0: + dependencies: + '@types/mdast': 4.0.3 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.0 + mdast-util-to-markdown: 2.1.0 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm@3.0.0: + dependencies: + mdast-util-from-markdown: 2.0.0 + mdast-util-gfm-autolink-literal: 2.0.0 + mdast-util-gfm-footnote: 2.0.0 + mdast-util-gfm-strikethrough: 2.0.0 + mdast-util-gfm-table: 2.0.0 + mdast-util-gfm-task-list-item: 2.0.0 + mdast-util-to-markdown: 2.1.0 + transitivePeerDependencies: + - supports-color + mdast-util-mdx-expression@2.0.0: dependencies: '@types/estree-jsx': 1.0.5 @@ -12496,8 +12630,6 @@ snapshots: mdn-data@2.0.30: {} - mdurl@2.0.0: {} - mem@4.3.0: dependencies: map-age-cleaner: 0.1.3 @@ -12527,6 +12659,74 @@ snapshots: micromark-util-symbol: 2.0.0 micromark-util-types: 2.0.0 + micromark-extension-directive@3.0.1: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.0 + micromark-factory-whitespace: 2.0.0 + micromark-util-character: 2.1.0 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + parse-entities: 4.0.1 + + micromark-extension-gfm-autolink-literal@2.1.0: + dependencies: + micromark-util-character: 2.1.0 + micromark-util-sanitize-uri: 2.0.0 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + + micromark-extension-gfm-footnote@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-core-commonmark: 2.0.0 + micromark-factory-space: 2.0.0 + micromark-util-character: 2.1.0 + micromark-util-normalize-identifier: 2.0.0 + micromark-util-sanitize-uri: 2.0.0 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + + micromark-extension-gfm-strikethrough@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.0 + micromark-util-classify-character: 2.0.0 + micromark-util-resolve-all: 2.0.0 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + + micromark-extension-gfm-table@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.0 + micromark-util-character: 2.1.0 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + + micromark-extension-gfm-tagfilter@2.0.0: + dependencies: + micromark-util-types: 2.0.0 + + micromark-extension-gfm-task-list-item@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.0 + micromark-util-character: 2.1.0 + micromark-util-symbol: 2.0.0 + micromark-util-types: 2.0.0 + + micromark-extension-gfm@3.0.0: + dependencies: + micromark-extension-gfm-autolink-literal: 2.1.0 + micromark-extension-gfm-footnote: 2.1.0 + micromark-extension-gfm-strikethrough: 2.1.0 + micromark-extension-gfm-table: 2.1.0 + micromark-extension-gfm-tagfilter: 2.0.0 + micromark-extension-gfm-task-list-item: 2.1.0 + micromark-util-combine-extensions: 2.0.0 + micromark-util-types: 2.0.0 + micromark-factory-destination@2.0.0: dependencies: micromark-util-character: 2.1.0 @@ -13223,8 +13423,6 @@ snapshots: end-of-stream: 1.4.4 once: 1.4.0 - punycode.js@2.3.1: {} - punycode@2.3.1: {} querystringify@2.2.0: @@ -13481,6 +13679,32 @@ snapshots: hast-util-to-html: 9.0.1 unified: 11.0.5 + remark-directive@3.0.0: + dependencies: + '@types/mdast': 4.0.3 + mdast-util-directive: 3.0.0 + micromark-extension-directive: 3.0.1 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-gfm@4.0.0: + dependencies: + '@types/mdast': 4.0.3 + mdast-util-gfm: 3.0.0 + micromark-extension-gfm: 3.0.0 + remark-parse: 11.0.0 + remark-stringify: 11.0.0 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-gh-alerts@0.0.3(@types/mdast@4.0.3)(unified@11.0.5): + dependencies: + '@types/mdast': 4.0.3 + unified: 11.0.5 + unist-util-visit: 5.0.0 + remark-parse@11.0.0: dependencies: '@types/mdast': 4.0.3 @@ -13498,6 +13722,12 @@ snapshots: unified: 11.0.5 vfile: 6.0.2 + remark-stringify@11.0.0: + dependencies: + '@types/mdast': 4.0.3 + mdast-util-to-markdown: 2.1.0 + unified: 11.0.5 + repeat-string@1.6.1: optional: true @@ -14101,8 +14331,6 @@ snapshots: typescript@5.5.4: {} - uc.micro@2.1.0: {} - ufo@1.5.3: {} uhyphen@0.2.0: {} diff --git a/src/renderer/src/components/ui/markdown/Markdown.tsx b/src/renderer/src/components/ui/markdown/Markdown.tsx index bc609ecd7..087371d43 100644 --- a/src/renderer/src/components/ui/markdown/Markdown.tsx +++ b/src/renderer/src/components/ui/markdown/Markdown.tsx @@ -1,27 +1,18 @@ +import { parseMarkdown } from "@renderer/lib/parse-markdown" import { cn } from "@renderer/lib/utils" -import markdownit from "markdown-it" import { useMemo } from "react" -import styles from "./index.module.css" -import { createContainer } from "./plugins/container" - -const md = markdownit() - .use(...createContainer("tip", "TIP", () => md)) - .use(...createContainer("info", "INFO", () => md)) - .use(...createContainer("warning", "WARNING", () => md)) - .use(...createContainer("danger", "DANGER", () => md)) - .use(...createContainer("details", "Details", () => md)) - export const Markdown: Component<{ children: string -}> = (props) => ( -
({ - __html: md.render(props.children as string), - }), - [props.children], - )} - /> -) +}> = ({ children, className }) => { + const markdownElement = useMemo( + () => parseMarkdown(children).content, + [children], + ) + + return ( +
+ {markdownElement} +
+ ) +} diff --git a/src/renderer/src/components/ui/markdown/index.module.css b/src/renderer/src/components/ui/markdown/index.module.css deleted file mode 100644 index 40b57e913..000000000 --- a/src/renderer/src/components/ui/markdown/index.module.css +++ /dev/null @@ -1,264 +0,0 @@ -.markdown { - --vp-custom-block-font-size: 16px; - --vp-custom-block-code-font-size: 14px; - --vp-custom-block-info-border: #0077cc; - --vp-custom-block-info-text: #0077cc; - --vp-custom-block-info-bg: #f0f9ff; - --vp-custom-block-info-code-bg: #f0f9ff; - --vp-custom-block-note-border: #f6c244; - --vp-custom-block-note-text: #f6c244; - --vp-custom-block-note-bg: #fff8e6; - --vp-custom-block-note-code-bg: #fff8e6; - --vp-custom-block-tip-border: #0077cc; - --vp-custom-block-tip-text: #0077cc; - --vp-custom-block-tip-bg: #f0f9ff; - --vp-custom-block-tip-code-bg: #f0f9ff; - --vp-custom-block-important-border: #ff4d4f; - --vp-custom-block-important-text: #ff4d4f; - --vp-custom-block-important-bg: #fff1f0; - --vp-custom-block-important-code-bg: #fff1f0; - --vp-custom-block-warning-border: #ffaa00; - --vp-custom-block-warning-text: #ffaa00; - --vp-custom-block-warning-bg: #fffbe6; - --vp-custom-block-warning-code-bg: #fffbe6; - --vp-custom-block-danger-border: #ff4d4f; - --vp-custom-block-danger-text: #ff4d4f; - --vp-custom-block-danger-bg: #fff1f0; - --vp-custom-block-danger-code-bg: #fff1f0; - --vp-custom-block-caution-border: #ffaa00; - --vp-custom-block-caution-text: #ffaa00; - --vp-custom-block-caution-bg: #fffbe6; - --vp-custom-block-caution-code-bg: #fffbe6; - --vp-custom-block-details-border: #0077cc; - --vp-custom-block-details-text: #0077cc; - --vp-custom-block-details-bg: #f0f9ff; - --vp-custom-block-details-code-bg: #f0f9ff; - - --vp-c-text-2: #333; - --vp-c-brand-1: #0077cc; - --vp-c-brand-2: #005faa; - --vp-c-tip-1: #0077cc; - --vp-c-tip-2: #005faa; - --vp-c-important-1: #ff4d4f; - --vp-c-important-2: #d32f2f; - --vp-c-warning-1: #ffaa00; - --vp-c-warning-2: #cc8400; - --vp-c-danger-1: #ff4d4f; - --vp-c-danger-2: #d32f2f; - --vp-c-caution-1: #ffaa00; - --vp-c-caution-2: #cc8400; - - :global { - .custom-block { - @apply text-sm; - - border: 1px solid transparent; - border-radius: 8px; - padding: 16px 16px 8px; - line-height: 24px; - - color: var(--vp-c-text-2); - } - - .custom-block.info { - border-color: var(--vp-custom-block-info-border); - color: var(--vp-custom-block-info-text); - background-color: var(--vp-custom-block-info-bg); - } - - .custom-block.info a, - .custom-block.info code { - color: var(--vp-c-brand-1); - } - - .custom-block.info a:hover, - .custom-block.info a:hover > code { - color: var(--vp-c-brand-2); - } - - .custom-block.info code { - background-color: var(--vp-custom-block-info-code-bg); - } - - .custom-block.note { - border-color: var(--vp-custom-block-note-border); - color: var(--vp-custom-block-note-text); - background-color: var(--vp-custom-block-note-bg); - } - - .custom-block.note a, - .custom-block.note code { - color: var(--vp-c-brand-1); - } - - .custom-block.note a:hover, - .custom-block.note a:hover > code { - color: var(--vp-c-brand-2); - } - - .custom-block.note code { - background-color: var(--vp-custom-block-note-code-bg); - } - - .custom-block.tip { - border-color: var(--vp-custom-block-tip-border); - color: var(--vp-custom-block-tip-text); - background-color: var(--vp-custom-block-tip-bg); - } - - .custom-block.tip a, - .custom-block.tip code { - color: var(--vp-c-tip-1); - } - - .custom-block.tip a:hover, - .custom-block.tip a:hover > code { - color: var(--vp-c-tip-2); - } - - .custom-block.tip code { - background-color: var(--vp-custom-block-tip-code-bg); - } - - .custom-block.important { - border-color: var(--vp-custom-block-important-border); - color: var(--vp-custom-block-important-text); - background-color: var(--vp-custom-block-important-bg); - } - - .custom-block.important a, - .custom-block.important code { - color: var(--vp-c-important-1); - } - - .custom-block.important a:hover, - .custom-block.important a:hover > code { - color: var(--vp-c-important-2); - } - - .custom-block.important code { - background-color: var(--vp-custom-block-important-code-bg); - } - - .custom-block.warning { - border-color: var(--vp-custom-block-warning-border); - color: var(--vp-custom-block-warning-text); - background-color: var(--vp-custom-block-warning-bg); - } - - .custom-block.warning a, - .custom-block.warning code { - color: var(--vp-c-warning-1); - } - - .custom-block.warning a:hover, - .custom-block.warning a:hover > code { - color: var(--vp-c-warning-2); - } - - .custom-block.warning code { - background-color: var(--vp-custom-block-warning-code-bg); - } - - .custom-block.danger { - border-color: var(--vp-custom-block-danger-border); - color: var(--vp-custom-block-danger-text); - background-color: var(--vp-custom-block-danger-bg); - } - - .custom-block.danger a, - .custom-block.danger code { - color: var(--vp-c-danger-1); - } - - .custom-block.danger a:hover, - .custom-block.danger a:hover > code { - color: var(--vp-c-danger-2); - } - - .custom-block.danger code { - background-color: var(--vp-custom-block-danger-code-bg); - } - - .custom-block.caution { - border-color: var(--vp-custom-block-caution-border); - color: var(--vp-custom-block-caution-text); - background-color: var(--vp-custom-block-caution-bg); - } - - .custom-block.caution a, - .custom-block.caution code { - color: var(--vp-c-caution-1); - } - - .custom-block.caution a:hover, - .custom-block.caution a:hover > code { - color: var(--vp-c-caution-2); - } - - .custom-block.caution code { - background-color: var(--vp-custom-block-caution-code-bg); - } - - .custom-block.details { - border-color: var(--vp-custom-block-details-border); - color: var(--vp-custom-block-details-text); - background-color: var(--vp-custom-block-details-bg); - } - - .custom-block.details a { - color: var(--vp-c-brand-1); - } - - .custom-block.details a:hover, - .custom-block.details a:hover > code { - color: var(--vp-c-brand-2); - } - - .custom-block.details code { - background-color: var(--vp-custom-block-details-code-bg); - } - - .custom-block-title { - font-weight: 600; - @apply m-0 text-base; - } - - .custom-block p + p { - margin: 8px 0; - } - - .custom-block.details summary { - margin: 0 0 8px; - font-weight: 700; - cursor: pointer; - user-select: none; - } - - .custom-block.details summary + p { - margin: 8px 0; - } - - .custom-block a { - color: inherit; - font-weight: 600; - text-decoration: underline; - text-underline-offset: 2px; - transition: opacity 0.25s; - } - - .custom-block a:hover { - opacity: 0.75; - } - - .custom-block code { - font-size: var(--vp-custom-block-code-font-size); - } - - .custom-block.custom-block th, - .custom-block.custom-block blockquote > p { - font-size: var(--vp-custom-block-font-size); - color: inherit; - } - } -} diff --git a/src/renderer/src/components/ui/markdown/plugins/container.ts b/src/renderer/src/components/ui/markdown/plugins/container.ts deleted file mode 100644 index a84cead43..000000000 --- a/src/renderer/src/components/ui/markdown/plugins/container.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type MarkdownIt from "markdown-it" -import type { RenderRule } from "markdown-it/lib/renderer.mjs" -import container from "markdown-it-container" -/** @copy vuejs/vitepress/src/node/markdown/plugins/containers.ts */ -type ContainerArgs = [typeof container, string, { render: RenderRule }] - -export function createContainer( - klass: string, - defaultTitle: string, - getMd: () => MarkdownIt, -): ContainerArgs { - return [ - container, - klass, - { - render(tokens, idx, _options, env: { references?: any }) { - const md = getMd() - const token = tokens[idx] - const info = token.info.trim().slice(klass.length).trim() - const attrs = md.renderer.renderAttrs(token) - if (token.nesting === 1) { - const title = md.renderInline(info || defaultTitle, { - references: env.references, - }) - if (klass === "details") { return `
${title}\n` } - return `

${title}

\n` - } else { return klass === "details" ? `
\n` : `
\n` } - }, - }, - ] -} diff --git a/src/renderer/src/lib/parse-markdown.ts b/src/renderer/src/lib/parse-markdown.ts index cb7f5c803..44b8821f4 100644 --- a/src/renderer/src/lib/parse-markdown.ts +++ b/src/renderer/src/lib/parse-markdown.ts @@ -1,9 +1,17 @@ +import "@microflash/remark-callout-directives/theme/github" +import "remark-gh-alerts/styles/github-colors-light.css" +import "remark-gh-alerts/styles/github-colors-dark-media.css" +import "remark-gh-alerts/styles/github-base.css" + +import remarkCalloutDirectives from "@microflash/remark-callout-directives" import { MarkdownLink } from "@renderer/components/ui/markdown/renderers" import { toJsxRuntime } from "hast-util-to-jsx-runtime" import { createElement } from "react" import { Fragment, jsx, jsxs } from "react/jsx-runtime" -import rehypeSanitize from "rehype-sanitize" import rehypeStringify from "rehype-stringify" +import remarkDirective from "remark-directive" +import remarkGfm from "remark-gfm" +import remarkGithubAlerts from "remark-gh-alerts" import remarkParse from "remark-parse" import remarkRehype from "remark-rehype" import { unified } from "unified" @@ -14,9 +22,42 @@ export const parseMarkdown = (content: string) => { const pipeline = unified() .use(remarkParse) - .use(remarkRehype) - .use(rehypeSanitize) - .use(rehypeStringify) + + .use(remarkGfm) + .use(remarkGithubAlerts) + + .use(remarkDirective) + .use(remarkCalloutDirectives, { + aliases: { + danger: "deter", + tip: "note", + }, + callouts: { + note: { + title: "Note", + hint: ``, + }, + commend: { + title: "Success", + hint: ``, + }, + warn: { + title: "Warning", + hint: ``, + }, + deter: { + title: "Danger", + hint: ``, + }, + assert: { + title: "Info", + hint: ``, + }, + }, + }) + + .use(remarkRehype, { allowDangerousHtml: true }) + .use(rehypeStringify, { allowDangerousHtml: true }) const tree = pipeline.parse(content) diff --git a/src/renderer/src/modules/ai/ai-daily/daily.tsx b/src/renderer/src/modules/ai/ai-daily/daily.tsx index dee14b985..a6c65ee2e 100644 --- a/src/renderer/src/modules/ai/ai-daily/daily.tsx +++ b/src/renderer/src/modules/ai/ai-daily/daily.tsx @@ -2,6 +2,7 @@ import { AutoResizeHeight } from "@renderer/components/ui/auto-resize-height" import { Card, CardHeader } from "@renderer/components/ui/card" import { Collapse } from "@renderer/components/ui/collapse" import { LoadingCircle } from "@renderer/components/ui/loading" +import { Markdown } from "@renderer/components/ui/markdown" import { ScrollArea } from "@renderer/components/ui/scroll-area" import { Tooltip, @@ -12,10 +13,9 @@ import { import { useAuthQuery } from "@renderer/hooks/common" import { apiClient } from "@renderer/lib/api-fetch" import { defineQuery } from "@renderer/lib/defineQuery" -import { parseMarkdown } from "@renderer/lib/parse-markdown" import { MarkAllButton } from "@renderer/modules/entry-column/mark-all-button" import type { FC } from "react" -import { useMemo, useState } from "react" +import { useState } from "react" import { useParseDailyDate } from "./hooks" import type { DailyItemProps, DailyView } from "./types" @@ -113,12 +113,6 @@ export const DailyReportContent: FC<{ const [markAllButtonRef, setMarkAllButtonRef] = useState(null) - const eleContent = useMemo(() => { - if (!content.data) return null - const { content: _content } = parseMarkdown(content.data) - return _content - }, [content.data]) - return ( @@ -131,15 +125,15 @@ export const DailyReportContent: FC<{ {content.isLoading ? ( ) : ( - eleContent && ( -
- {eleContent} -
+ !!content.data && ( + + {content.data} + ) )} - {eleContent && ( + {!!content.data && (