UBERF-8560 Imrove editor code highlight (#7074)

Author: aonnikov

common/config/rush/pnpm-lock.yaml

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: ['./node_modules/@hcengineering/platform-rig/profiles/ui/eslint.config.json'],
+  parserOptions: { tsconfigRootDir: __dirname }
+}

packages/highlight/.eslintrc.js

@@ -0,0 +1,22 @@
+{
+  "$schema": "http://json-schema.org/draft-04/schema#",
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "proseWrap": "preserve",
+  "plugins": [
+      "prettier-plugin-svelte"
+  ],
+  "overrides": [
+      {
+          "files": "*.svelte",
+          "options": {
+              "parser": "svelte"
+          }
+      }
+  ]
+}

packages/highlight/.prettierrc

@@ -0,0 +1,5 @@
+{  
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+  "rigPackageName": "@hcengineering/platform-rig",
+  "rigProfile": "ui"
+}

packages/highlight/config/rig.json

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
+  roots: ["./src"],
+  coverageReporters: ["text-summary", "html"]
+}

packages/highlight/jest.config.js

@@ -0,0 +1,46 @@
+{
+  "name": "@hcengineering/highlight",
+  "version": "0.6.0",
+  "main": "src/index.ts",
+  "author": "Hardcore Engineering Inc.",
+  "license": "EPL-2.0",
+  "scripts": {
+    "build": "compile ui",
+    "build:docs": "api-extractor run --local",
+    "format": "format src",
+    "svelte-check": "do-svelte-check",
+    "_phase:svelte-check": "do-svelte-check",
+    "build:watch": "compile ui",
+    "_phase:build": "compile ui",
+    "_phase:format": "format src",
+    "_phase:validate": "compile validate"
+  },
+  "devDependencies": {
+    "svelte-loader": "^3.2.0",
+    "sass": "^1.53.0",
+    "svelte-preprocess": "^5.1.3",
+    "@hcengineering/platform-rig": "^0.6.0",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "eslint-config-standard-with-typescript": "^40.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-n": "^15.4.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "prettier-plugin-svelte": "^3.2.2",
+    "eslint": "^8.54.0",
+    "prettier": "^3.1.0",
+    "svelte-check": "^3.6.9",
+    "typescript": "^5.3.3",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.1.1",
+    "@types/jest": "^29.5.5",
+    "eslint-plugin-svelte": "^2.35.1",
+    "svelte-eslint-parser": "^0.33.1"
+  },
+  "dependencies": {
+    "svelte": "^4.2.12",
+    "@hcengineering/ui": "^0.6.15",
+    "highlight.js": "~11.8.0",
+    "lowlight": "^3.1.0"
+  }
+}

packages/highlight/package.json

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}

packages/highlight/postcss.config.js

@@ -1,5 +1,5 @@
 //
-// Copyright © 2023 Hardcore Engineering Inc.
+// Copyright © 2024 Hardcore Engineering Inc.
 //
 // Licensed under the Eclipse Public License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License. You may
@@ -13,16 +13,29 @@
 // limitations under the License.
 //
 
-import hljs from 'highlight.js'
-import { hljsDefineSvelte } from './languages/svelte-hljs'
+import hljs, { type LanguageFn } from 'highlight.js'
+import { all } from 'lowlight'
+import { svelte } from './languages/svelte'
+import { vlang } from './languages/vlang'
 
-hljs.registerLanguage('svelte', hljsDefineSvelte)
+/** @public */
+export const grammars: Record<string, LanguageFn> = {
+  ...all,
+  svelte,
+  vlang
+}
+
+Object.entries(grammars).forEach((grammar) => {
+  hljs.registerLanguage(...grammar)
+})
 
+/** @public */
 export interface HighlightOptions {
   auto?: boolean
   language: string | undefined
 }
 
+/** @public */
 export function highlightText (text: string, options: HighlightOptions): string {
   // We should always use highlighter because it sanitizes the input
   // We have to always use highlighter to ensure that the input is sanitized
@@ -38,6 +51,7 @@ export function highlightText (text: string, options: HighlightOptions): string
   return normalizeHighlightTags(highlighted)
 }
 
+/** @public */
 export function highlightLines (lines: string[], options: HighlightOptions): string[] {
   const highlighted = highlightText(lines.join('\n'), options)
   return highlighted.split('\n')

plugins/diffview-resources/src/highlight/highlight.ts renamed to packages/highlight/src/index.ts

@@ -1,4 +1,19 @@
-export function hljsDefineSvelte (hljs: any): any {
+//
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+export function svelte (hljs: any): any {
   return {
     subLanguage: 'xml',
     contains: [