From da59391061382b5db004136f8be3a3952f195ad1 Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Fri, 15 Dec 2023 15:29:41 -0500 Subject: [PATCH] refactor: shikiji --- package.json | 3 +- pnpm-lock.yaml | 270 ++------------------------ src/components/MarkdownUi.vue | 45 +++-- src/composables/index.ts | 2 + src/composables/useMarkdownActions.ts | 18 +- src/composables/useShikiji.ts | 201 +++++++++++++++++++ src/constants.ts | 2 +- src/types/markdown-ui.ts | 4 +- 8 files changed, 266 insertions(+), 279 deletions(-) create mode 100644 src/composables/useShikiji.ts diff --git a/package.json b/package.json index e096f18d..2d6b74e5 100644 --- a/package.json +++ b/package.json @@ -106,13 +106,14 @@ "eslint-plugin-promise": "^6.1.1", "eslint-plugin-vue": "^9.19.2", "jsdom": "^22.1.0", - "markdown-it-shikiji": "^0.8.7", + "markdown-it-shikiji": "^0.9.3", "postcss": "^8.4.32", "postcss-html": "^1.5.0", "rimraf": "^5.0.5", "rollup-plugin-visualizer": "^5.11.0", "sass": "^1.69.5", "semantic-release": "^22.0.12", + "shikiji": "^0.9.3", "stylelint": "^15.11.0", "stylelint-config-html": "^1.1.0", "stylelint-config-recommended-scss": "^13.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 19ef9183..ca14a3a8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -158,8 +158,8 @@ devDependencies: specifier: ^22.1.0 version: 22.1.0 markdown-it-shikiji: - specifier: ^0.8.7 - version: 0.8.7 + specifier: ^0.9.3 + version: 0.9.3 postcss: specifier: ^8.4.32 version: 8.4.32 @@ -178,6 +178,9 @@ devDependencies: semantic-release: specifier: ^22.0.12 version: 22.0.12(typescript@5.3.3) + shikiji: + specifier: ^0.9.3 + version: 0.9.3 stylelint: specifier: ^15.11.0 version: 15.11.0(typescript@5.3.3) @@ -1277,12 +1280,6 @@ packages: '@types/ms': 0.7.34 dev: false - /@types/hast@3.0.3: - resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==} - dependencies: - '@types/unist': 3.0.2 - dev: true - /@types/istanbul-lib-coverage@2.0.6: resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==} dev: true @@ -1336,12 +1333,6 @@ packages: '@types/unist': 2.0.10 dev: false - /@types/mdast@4.0.3: - resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==} - dependencies: - '@types/unist': 3.0.2 - dev: true - /@types/mdurl@1.0.5: resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==} @@ -1381,10 +1372,6 @@ packages: resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==} dev: false - /@types/unist@3.0.2: - resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==} - dev: true - /@types/uuid@9.0.7: resolution: {integrity: sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==} dev: true @@ -2200,10 +2187,6 @@ packages: redeyed: 2.1.1 dev: true - /ccount@2.0.1: - resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} - dev: true - /chai@4.3.10: resolution: {integrity: sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==} engines: {node: '>=4'} @@ -2244,14 +2227,6 @@ packages: engines: {node: '>=10'} dev: true - /character-entities-html4@2.1.0: - resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==} - dev: true - - /character-entities-legacy@3.0.0: - resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==} - dev: true - /character-entities@2.0.2: resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==} dev: false @@ -2377,10 +2352,6 @@ packages: delayed-stream: 1.0.0 dev: true - /comma-separated-tokens@2.0.3: - resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} - dev: true - /commander@10.0.1: resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==} engines: {node: '>=14'} @@ -3055,6 +3026,7 @@ packages: /dequal@2.0.3: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} engines: {node: '>=6'} + dev: false /detect-file@1.0.0: resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==} @@ -3066,12 +3038,6 @@ packages: engines: {node: '>=8'} dev: true - /devlop@1.1.0: - resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} - dependencies: - dequal: 2.0.3 - dev: true - /diff-sequences@29.6.3: resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -4148,88 +4114,6 @@ packages: function-bind: 1.1.2 dev: true - /hast-util-from-parse5@8.0.1: - resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==} - dependencies: - '@types/hast': 3.0.3 - '@types/unist': 3.0.2 - devlop: 1.1.0 - hastscript: 8.0.0 - property-information: 6.4.0 - vfile: 6.0.1 - vfile-location: 5.0.2 - web-namespaces: 2.0.1 - dev: true - - /hast-util-parse-selector@4.0.0: - resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==} - dependencies: - '@types/hast': 3.0.3 - dev: true - - /hast-util-raw@9.0.1: - resolution: {integrity: sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==} - dependencies: - '@types/hast': 3.0.3 - '@types/unist': 3.0.2 - '@ungap/structured-clone': 1.2.0 - hast-util-from-parse5: 8.0.1 - hast-util-to-parse5: 8.0.0 - html-void-elements: 3.0.0 - mdast-util-to-hast: 13.0.2 - parse5: 7.1.2 - unist-util-position: 5.0.0 - unist-util-visit: 5.0.0 - vfile: 6.0.1 - web-namespaces: 2.0.1 - zwitch: 2.0.4 - dev: true - - /hast-util-to-html@9.0.0: - resolution: {integrity: sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==} - dependencies: - '@types/hast': 3.0.3 - '@types/unist': 3.0.2 - ccount: 2.0.1 - comma-separated-tokens: 2.0.3 - hast-util-raw: 9.0.1 - hast-util-whitespace: 3.0.0 - html-void-elements: 3.0.0 - mdast-util-to-hast: 13.0.2 - property-information: 6.4.0 - space-separated-tokens: 2.0.2 - stringify-entities: 4.0.3 - zwitch: 2.0.4 - dev: true - - /hast-util-to-parse5@8.0.0: - resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==} - dependencies: - '@types/hast': 3.0.3 - comma-separated-tokens: 2.0.3 - devlop: 1.1.0 - property-information: 6.4.0 - space-separated-tokens: 2.0.2 - web-namespaces: 2.0.1 - zwitch: 2.0.4 - dev: true - - /hast-util-whitespace@3.0.0: - resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} - dependencies: - '@types/hast': 3.0.3 - dev: true - - /hastscript@8.0.0: - resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} - dependencies: - '@types/hast': 3.0.3 - comma-separated-tokens: 2.0.3 - hast-util-parse-selector: 4.0.0 - property-information: 6.4.0 - space-separated-tokens: 2.0.2 - dev: true - /he@1.2.0: resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} hasBin: true @@ -4289,10 +4173,6 @@ packages: engines: {node: '>=8'} dev: true - /html-void-elements@3.0.0: - resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} - dev: true - /htmlparser2@8.0.2: resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==} dependencies: @@ -5161,11 +5041,11 @@ packages: resolution: {integrity: sha512-YLhzaOsU9THO/cal0lUjfMjrqSMPjjyjChYM7oyj4DnyaXEzA8gnW6cVJeyCrCVeyesrY2PlEdUYJSPFYL4Nkg==} dev: false - /markdown-it-shikiji@0.8.7: - resolution: {integrity: sha512-PseTDi67w0i3kyex6ZM6HJBM7UMVwt+E17K0fp/5zUzJjgJSnbtbhSaHiozGxKqoC8xG1XiMAFm3tAq1/A5j0w==} + /markdown-it-shikiji@0.9.3: + resolution: {integrity: sha512-cM929MgXeyb2qcCBUNcPu0N5576JwfOAaPVWG2wzhN/8tf5AvKWWXPKG3H85keGjmHVAQBmLkZ61+WfkbfQHYQ==} dependencies: markdown-it: 14.0.0 - shikiji: 0.8.7 + shikiji: 0.9.3 dev: true /markdown-it-sub@2.0.0: @@ -5239,19 +5119,6 @@ packages: - supports-color dev: false - /mdast-util-to-hast@13.0.2: - resolution: {integrity: sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==} - dependencies: - '@types/hast': 3.0.3 - '@types/mdast': 4.0.3 - '@ungap/structured-clone': 1.2.0 - devlop: 1.1.0 - micromark-util-sanitize-uri: 2.0.0 - trim-lines: 3.0.1 - unist-util-position: 5.0.0 - unist-util-visit: 5.0.0 - dev: true - /mdast-util-to-string@3.2.0: resolution: {integrity: sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==} dependencies: @@ -5415,13 +5282,6 @@ packages: micromark-util-types: 1.1.0 dev: false - /micromark-util-character@2.0.1: - resolution: {integrity: sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==} - dependencies: - micromark-util-symbol: 2.0.0 - micromark-util-types: 2.0.0 - dev: true - /micromark-util-chunked@1.1.0: resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==} dependencies: @@ -5462,10 +5322,6 @@ packages: resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==} dev: false - /micromark-util-encode@2.0.0: - resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==} - dev: true - /micromark-util-html-tag-name@1.2.0: resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==} dev: false @@ -5490,14 +5346,6 @@ packages: micromark-util-symbol: 1.1.0 dev: false - /micromark-util-sanitize-uri@2.0.0: - resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==} - dependencies: - micromark-util-character: 2.0.1 - micromark-util-encode: 2.0.0 - micromark-util-symbol: 2.0.0 - dev: true - /micromark-util-subtokenize@1.1.0: resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==} dependencies: @@ -5511,18 +5359,10 @@ packages: resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==} dev: false - /micromark-util-symbol@2.0.0: - resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==} - dev: true - /micromark-util-types@1.1.0: resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==} dev: false - /micromark-util-types@2.0.0: - resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==} - dev: true - /micromark@3.2.0: resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==} dependencies: @@ -6283,10 +6123,6 @@ packages: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} dev: true - /property-information@6.4.0: - resolution: {integrity: sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==} - dev: true - /proto-list@1.2.4: resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==} dev: true @@ -6770,10 +6606,14 @@ packages: engines: {node: '>=8'} dev: true - /shikiji@0.8.7: - resolution: {integrity: sha512-j5usxwI0yHkDTHOuhuSJl9+wT5CNYeYO82dJMSJBlJ/NYT5SIebGcPoL6y9QOyH15wGrJC4LOP2nz5k8mUDGRQ==} + /shikiji-core@0.9.3: + resolution: {integrity: sha512-Khc/xyxUDAXit7QWA8QhtmuGSVdvpxooTathF+sYcsT52uKVH59GR2D48tMxQ8lnpW6Dx17TSZSE1ocRmhr6wQ==} + dev: true + + /shikiji@0.9.3: + resolution: {integrity: sha512-v1F/jlsEDjxVticC9IZ74vHOaLe6zpyXkv5sI/8mfZ0esoitDjVDoINP2Tmbsx9NZuX1gSvLfjbK2mqkPM1ViA==} dependencies: - hast-util-to-html: 9.0.0 + shikiji-core: 0.9.3 dev: true /side-channel@1.0.4: @@ -6856,10 +6696,6 @@ packages: engines: {node: '>= 8'} dev: true - /space-separated-tokens@2.0.2: - resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} - dev: true - /spawn-error-forwarder@1.0.0: resolution: {integrity: sha512-gRjMgK5uFjbCvdibeGJuy3I5OYz6VLoVdsOJdA6wV0WlfQVLFueoqMxwwYD9RODdgb6oUIvlRlsyFSiQkMKu0g==} dev: true @@ -6973,13 +6809,6 @@ packages: safe-buffer: 5.2.1 dev: true - /stringify-entities@4.0.3: - resolution: {integrity: sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==} - dependencies: - character-entities-html4: 2.1.0 - character-entities-legacy: 3.0.0 - dev: true - /strip-ansi@6.0.1: resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} engines: {node: '>=8'} @@ -7339,10 +7168,6 @@ packages: resolution: {integrity: sha512-/y956gpUo9ZNCb99YjxG7OaslxZWHfCHAUUfshwqOXmxUIvqLjVO581BT+gM59+QV9tFe6/CGG53tsA1Y7RSdg==} dev: true - /trim-lines@3.0.1: - resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==} - dev: true - /trim-newlines@3.0.1: resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==} engines: {node: '>=8'} @@ -7569,45 +7394,12 @@ packages: crypto-random-string: 4.0.0 dev: true - /unist-util-is@6.0.0: - resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} - dependencies: - '@types/unist': 3.0.2 - dev: true - - /unist-util-position@5.0.0: - resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} - dependencies: - '@types/unist': 3.0.2 - dev: true - /unist-util-stringify-position@3.0.3: resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==} dependencies: '@types/unist': 2.0.10 dev: false - /unist-util-stringify-position@4.0.0: - resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} - dependencies: - '@types/unist': 3.0.2 - dev: true - - /unist-util-visit-parents@6.0.1: - resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} - dependencies: - '@types/unist': 3.0.2 - unist-util-is: 6.0.0 - dev: true - - /unist-util-visit@5.0.0: - resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} - dependencies: - '@types/unist': 3.0.2 - unist-util-is: 6.0.0 - unist-util-visit-parents: 6.0.1 - dev: true - /universal-user-agent@6.0.1: resolution: {integrity: sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==} dev: true @@ -7691,28 +7483,6 @@ packages: spdx-expression-parse: 3.0.1 dev: true - /vfile-location@5.0.2: - resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==} - dependencies: - '@types/unist': 3.0.2 - vfile: 6.0.1 - dev: true - - /vfile-message@4.0.2: - resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==} - dependencies: - '@types/unist': 3.0.2 - unist-util-stringify-position: 4.0.0 - dev: true - - /vfile@6.0.1: - resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==} - dependencies: - '@types/unist': 3.0.2 - unist-util-stringify-position: 4.0.0 - vfile-message: 4.0.2 - dev: true - /vite-node@1.0.4(@types/node@20.10.4)(sass@1.69.5): resolution: {integrity: sha512-9xQQtHdsz5Qn8hqbV7UKqkm8YkJhzT/zr41Dmt5N7AlD8hJXw/Z7y0QiD5I8lnTthV9Rvcvi0QW7PI0Fq83ZPg==} engines: {node: ^18.0.0 || >=20.0.0} @@ -7900,10 +7670,6 @@ packages: defaults: 1.0.4 dev: true - /web-namespaces@2.0.1: - resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} - dev: true - /web-worker@1.2.0: resolution: {integrity: sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==} dev: false @@ -8106,7 +7872,3 @@ packages: resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} engines: {node: '>=12.20'} dev: true - - /zwitch@2.0.4: - resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} - dev: true diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue index f49b3ee9..6a04d219 100644 --- a/src/components/MarkdownUi.vue +++ b/src/components/MarkdownUi.vue @@ -39,7 +39,7 @@ class="markdown-preview" data-testid="markdown-preview" > - +
- +
@@ -69,7 +69,6 @@ import type { MarkdownMode, InlineFormat, MarkdownTemplate, TextAreaInputEvent } import formatHtml from 'html-format' // markdown-it import MarkdownIt from 'markdown-it' -import Shikiji from 'markdown-it-shikiji' import abbreviation from 'markdown-it-abbr' import anchor from 'markdown-it-anchor' import attrs from 'markdown-it-attrs' @@ -159,10 +158,14 @@ const { toggleInlineFormatting, toggleTab, insertMarkdownTemplate } = composable const formatSelection = (format: InlineFormat): void => { toggleInlineFormatting(rawMarkdown, format) + // Emulate an `input` event to trigger an update + emulateInputEvent() } const insertTemplate = (template: MarkdownTemplate): void => { insertMarkdownTemplate(rawMarkdown, template) + // Emulate an `input` event to trigger an update + emulateInputEvent() } const onTab = (): void => { @@ -206,11 +209,24 @@ const onContentEdit = debounce(async (event: TextAreaInputEvent): Promise await updateMermaid() }, 500) +/** Emulate an `input` event when injecting content into the textarea */ +const emulateInputEvent = (): void => { + const event: TextAreaInputEvent = { + target: { + value: rawMarkdown.value, + }, + } + + onContentEdit(event) +} + const saveChanges = async (): Promise => { emit('save', rawMarkdown.value) } onBeforeMount(async () => { + const { MarkdownItShikiji } = composables.useShikiji() + md.value = MarkdownIt({ html: false, // Keep disabled to prevent XSS xhtmlOut: true, // Use '/' to close single tags (
) @@ -220,14 +236,7 @@ onBeforeMount(async () => { quotes: '“”‘’', }) // Syntax highlighting - .use(await Shikiji({ - // TODO: Define langs? - // langs: [], - themes: { - light: 'github-light', - dark: 'github-dark', - }, - })) + .use(await MarkdownItShikiji()) .use(anchor, { level: 2, slugify: s => slugify(s), @@ -360,7 +369,19 @@ onMounted(async () => { } .preview-card { + background-color: var(--kui-color-background, $kui-color-background); + border: 0; + border-radius: var(--kui-border-radius-30, $kui-border-radius-30); + box-shadow: var(--kui-shadow-border, $kui-shadow-border); // Ensure the padding is calculated in the element's width + box-sizing: border-box; // Ensure the padding is calculated in the element's width + color: var(--kui-color-text, $kui-color-text); + font-family: var(--kui-font-family-text, $kui-font-family-text); + font-size: var(--kui-font-size-30, $kui-font-size-30); + font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular); height: 100%; + line-height: var(--kui-line-height-40, $kui-line-height-40); + padding: var(--kui-space-40, $kui-space-40) var(--kui-space-50, $kui-space-50); + width: 100%; } .markdown-html-preview { @@ -382,7 +403,7 @@ onMounted(async () => { color: var(--kui-color-text, $kui-color-text); cursor: text; display: block; - font-family: var(--kui-font-family-text, $kui-font-family-text); + font-family: var(--kui-font-family-code, $kui-font-family-code); font-size: var(--kui-font-size-40, $kui-font-size-40); // needs to be at least 16px to prevent automatic zoom in on focus on mobile font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular); height: 100%; diff --git a/src/composables/index.ts b/src/composables/index.ts index 281944e7..557fb153 100644 --- a/src/composables/index.ts +++ b/src/composables/index.ts @@ -1,7 +1,9 @@ import useDebounce from './useDebounce' import useMarkdownActions from './useMarkdownActions' +import useShikiji from './useShikiji' export default { useDebounce, useMarkdownActions, + useShikiji, } diff --git a/src/composables/useMarkdownActions.ts b/src/composables/useMarkdownActions.ts index dd7f4210..434772c1 100644 --- a/src/composables/useMarkdownActions.ts +++ b/src/composables/useMarkdownActions.ts @@ -1,6 +1,6 @@ import { reactive, nextTick } from 'vue' import type { Ref } from 'vue' -import { INLINE_FORMAT_WRAPPER, DEFAULT_CODEBLOCK_LANGUAGE } from '../constants' +import { InlineFormatWrapper, DEFAULT_CODEBLOCK_LANGUAGE } from '../constants' import type { InlineFormat, MarkdownTemplate } from '../types' /** @@ -70,28 +70,28 @@ export default function useMarkdownActions(componentContainerId: string) { switch (format) { case 'bold': - wrapper = INLINE_FORMAT_WRAPPER.Bold + wrapper = InlineFormatWrapper.Bold break case 'italic': - wrapper = INLINE_FORMAT_WRAPPER.Italic + wrapper = InlineFormatWrapper.Italic break case 'underline': - wrapper = INLINE_FORMAT_WRAPPER.Underline + wrapper = InlineFormatWrapper.Underline break case 'strikethrough': - wrapper = INLINE_FORMAT_WRAPPER.Strikethrough + wrapper = InlineFormatWrapper.Strikethrough break case 'subscript': - wrapper = INLINE_FORMAT_WRAPPER.Subscript + wrapper = InlineFormatWrapper.Subscript break case 'superscript': - wrapper = INLINE_FORMAT_WRAPPER.Superscript + wrapper = InlineFormatWrapper.Superscript break case 'mark': - wrapper = INLINE_FORMAT_WRAPPER.Mark + wrapper = InlineFormatWrapper.Mark break case 'code': - wrapper = INLINE_FORMAT_WRAPPER.Code + wrapper = InlineFormatWrapper.Code break } diff --git a/src/composables/useShikiji.ts b/src/composables/useShikiji.ts new file mode 100644 index 00000000..4220a339 --- /dev/null +++ b/src/composables/useShikiji.ts @@ -0,0 +1,201 @@ +import { fromHighlighter } from 'markdown-it-shikiji' +import { getHighlighterCore } from 'shikiji/core' +import { getWasmInlined } from 'shikiji/wasm' + +export default function useShikiji() { + const MarkdownItShikiji = async () => { + const highlighter = await getHighlighterCore({ + themes: [ + import('shikiji/themes/github-light.mjs'), + import('shikiji/themes/github-dark.mjs'), + ], + // TODO: For now, I'm including all languages but this bumps up the package size ~6MB + langs: [ + import('shikiji/langs/abap.mjs'), + import('shikiji/langs/actionscript-3.mjs'), + import('shikiji/langs/ada.mjs'), + import('shikiji/langs/apache.mjs'), + import('shikiji/langs/apex.mjs'), + import('shikiji/langs/apl.mjs'), + import('shikiji/langs/applescript.mjs'), + import('shikiji/langs/ara.mjs'), + import('shikiji/langs/asm.mjs'), + import('shikiji/langs/astro.mjs'), + import('shikiji/langs/awk.mjs'), + import('shikiji/langs/ballerina.mjs'), + import('shikiji/langs/bat.mjs'), + import('shikiji/langs/beancount.mjs'), + import('shikiji/langs/berry.mjs'), + import('shikiji/langs/bibtex.mjs'), + import('shikiji/langs/bicep.mjs'), + import('shikiji/langs/blade.mjs'), + import('shikiji/langs/c.mjs'), + import('shikiji/langs/cadence.mjs'), + import('shikiji/langs/clarity.mjs'), + import('shikiji/langs/clojure.mjs'), + import('shikiji/langs/cmake.mjs'), + import('shikiji/langs/cobol.mjs'), + import('shikiji/langs/codeql.mjs'), + import('shikiji/langs/coffee.mjs'), + import('shikiji/langs/cpp.mjs'), + import('shikiji/langs/crystal.mjs'), + import('shikiji/langs/csharp.mjs'), + import('shikiji/langs/css.mjs'), + import('shikiji/langs/csv.mjs'), + import('shikiji/langs/cue.mjs'), + import('shikiji/langs/cypher.mjs'), + import('shikiji/langs/d.mjs'), + import('shikiji/langs/dart.mjs'), + import('shikiji/langs/dax.mjs'), + import('shikiji/langs/diff.mjs'), + import('shikiji/langs/docker.mjs'), + import('shikiji/langs/dream-maker.mjs'), + import('shikiji/langs/elixir.mjs'), + import('shikiji/langs/elm.mjs'), + import('shikiji/langs/erb.mjs'), + import('shikiji/langs/erlang.mjs'), + import('shikiji/langs/fish.mjs'), + import('shikiji/langs/fsharp.mjs'), + import('shikiji/langs/gdresource.mjs'), + import('shikiji/langs/gdscript.mjs'), + import('shikiji/langs/gdshader.mjs'), + import('shikiji/langs/gherkin.mjs'), + import('shikiji/langs/git-commit.mjs'), + import('shikiji/langs/git-rebase.mjs'), + import('shikiji/langs/glimmer-js.mjs'), + import('shikiji/langs/glimmer-ts.mjs'), + import('shikiji/langs/glsl.mjs'), + import('shikiji/langs/gnuplot.mjs'), + import('shikiji/langs/go.mjs'), + import('shikiji/langs/graphql.mjs'), + import('shikiji/langs/groovy.mjs'), + import('shikiji/langs/hack.mjs'), + import('shikiji/langs/haml.mjs'), + import('shikiji/langs/handlebars.mjs'), + import('shikiji/langs/haskell.mjs'), + import('shikiji/langs/hcl.mjs'), + import('shikiji/langs/hjson.mjs'), + import('shikiji/langs/hlsl.mjs'), + import('shikiji/langs/html.mjs'), + import('shikiji/langs/http.mjs'), + import('shikiji/langs/imba.mjs'), + import('shikiji/langs/ini.mjs'), + import('shikiji/langs/java.mjs'), + import('shikiji/langs/javascript.mjs'), + import('shikiji/langs/jinja-html.mjs'), + import('shikiji/langs/jison.mjs'), + import('shikiji/langs/json.mjs'), + import('shikiji/langs/json5.mjs'), + import('shikiji/langs/jsonc.mjs'), + import('shikiji/langs/jsonl.mjs'), + import('shikiji/langs/jsonnet.mjs'), + import('shikiji/langs/jssm.mjs'), + import('shikiji/langs/jsx.mjs'), + import('shikiji/langs/julia.mjs'), + import('shikiji/langs/kotlin.mjs'), + import('shikiji/langs/kusto.mjs'), + import('shikiji/langs/latex.mjs'), + import('shikiji/langs/less.mjs'), + import('shikiji/langs/liquid.mjs'), + import('shikiji/langs/lisp.mjs'), + import('shikiji/langs/logo.mjs'), + import('shikiji/langs/lua.mjs'), + import('shikiji/langs/make.mjs'), + import('shikiji/langs/markdown.mjs'), + import('shikiji/langs/marko.mjs'), + import('shikiji/langs/matlab.mjs'), + import('shikiji/langs/mdc.mjs'), + import('shikiji/langs/mdx.mjs'), + import('shikiji/langs/mermaid.mjs'), + import('shikiji/langs/mojo.mjs'), + import('shikiji/langs/narrat.mjs'), + import('shikiji/langs/nextflow.mjs'), + import('shikiji/langs/nginx.mjs'), + import('shikiji/langs/nim.mjs'), + import('shikiji/langs/nix.mjs'), + import('shikiji/langs/objective-c.mjs'), + import('shikiji/langs/objective-cpp.mjs'), + import('shikiji/langs/ocaml.mjs'), + import('shikiji/langs/pascal.mjs'), + import('shikiji/langs/perl.mjs'), + import('shikiji/langs/php.mjs'), + import('shikiji/langs/plsql.mjs'), + import('shikiji/langs/postcss.mjs'), + import('shikiji/langs/powerquery.mjs'), + import('shikiji/langs/powershell.mjs'), + import('shikiji/langs/prisma.mjs'), + import('shikiji/langs/prolog.mjs'), + import('shikiji/langs/proto.mjs'), + import('shikiji/langs/pug.mjs'), + import('shikiji/langs/puppet.mjs'), + import('shikiji/langs/purescript.mjs'), + import('shikiji/langs/python.mjs'), + import('shikiji/langs/r.mjs'), + import('shikiji/langs/raku.mjs'), + import('shikiji/langs/razor.mjs'), + import('shikiji/langs/reg.mjs'), + import('shikiji/langs/rel.mjs'), + import('shikiji/langs/riscv.mjs'), + import('shikiji/langs/rst.mjs'), + import('shikiji/langs/ruby.mjs'), + import('shikiji/langs/rust.mjs'), + import('shikiji/langs/sas.mjs'), + import('shikiji/langs/sass.mjs'), + import('shikiji/langs/scala.mjs'), + import('shikiji/langs/scheme.mjs'), + import('shikiji/langs/scss.mjs'), + import('shikiji/langs/shaderlab.mjs'), + import('shikiji/langs/shellscript.mjs'), + import('shikiji/langs/shellsession.mjs'), + import('shikiji/langs/smalltalk.mjs'), + import('shikiji/langs/solidity.mjs'), + import('shikiji/langs/sparql.mjs'), + import('shikiji/langs/splunk.mjs'), + import('shikiji/langs/sql.mjs'), + import('shikiji/langs/ssh-config.mjs'), + import('shikiji/langs/stata.mjs'), + import('shikiji/langs/stylus.mjs'), + import('shikiji/langs/svelte.mjs'), + import('shikiji/langs/swift.mjs'), + import('shikiji/langs/system-verilog.mjs'), + import('shikiji/langs/tasl.mjs'), + import('shikiji/langs/tcl.mjs'), + import('shikiji/langs/tex.mjs'), + import('shikiji/langs/toml.mjs'), + import('shikiji/langs/tsx.mjs'), + import('shikiji/langs/turtle.mjs'), + import('shikiji/langs/twig.mjs'), + import('shikiji/langs/typescript.mjs'), + import('shikiji/langs/v.mjs'), + import('shikiji/langs/vb.mjs'), + import('shikiji/langs/verilog.mjs'), + import('shikiji/langs/vhdl.mjs'), + import('shikiji/langs/viml.mjs'), + import('shikiji/langs/vue.mjs'), + import('shikiji/langs/vue-html.mjs'), + import('shikiji/langs/vyper.mjs'), + import('shikiji/langs/wasm.mjs'), + import('shikiji/langs/wenyan.mjs'), + import('shikiji/langs/wgsl.mjs'), + import('shikiji/langs/wolfram.mjs'), + import('shikiji/langs/xml.mjs'), + import('shikiji/langs/xsl.mjs'), + import('shikiji/langs/yaml.mjs'), + import('shikiji/langs/zenscript.mjs'), + import('shikiji/langs/zig.mjs'), + ], + loadWasm: getWasmInlined, + }) + + return fromHighlighter(highlighter, { + themes: { + light: 'github-light', + dark: 'github-dark', + }, + }) + } + + return { + MarkdownItShikiji, + } +} diff --git a/src/constants.ts b/src/constants.ts index 0a4a7d72..23d25150 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,6 +1,6 @@ export const DEFAULT_CODEBLOCK_LANGUAGE = 'markdown' -export enum INLINE_FORMAT_WRAPPER { +export enum InlineFormatWrapper { Bold = '**', Italic = '_', Underline = '++', diff --git a/src/types/markdown-ui.ts b/src/types/markdown-ui.ts index e2e24637..5128067b 100644 --- a/src/types/markdown-ui.ts +++ b/src/types/markdown-ui.ts @@ -28,6 +28,6 @@ export interface TemplateOption { action: MarkdownTemplate } -export interface TextAreaInputEvent extends Event { - target: HTMLTextAreaElement +export interface TextAreaInputEvent { + target: Pick }