fix: codeblock various fixes (#6550)

2026-09-13 05:07:43 +02:00 · 2024-09-13 21:48:00 +07:00
parent 81fbac2a73
commit 24bd0e9f59
16 changed files with 141 additions and 28 deletions
@@ -0,0 +1,26 @@
+<!--
+// 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.
+-->
+<script lang="ts">
+  import { Html } from '@hcengineering/ui'
+
+  import { highlightText } from '../highlight'
+
+  export let value: string
+  export let language: string | undefined = undefined
+
+  $: highlighted = highlightText(value, { language })
+</script>
+
+<Html value={highlighted} />
@@ -19,18 +19,18 @@ import { hljsDefineSvelte } from './languages/svelte-hljs'
 hljs.registerLanguage('svelte', hljsDefineSvelte)

 export interface HighlightOptions {
-  language: string
+  language: string | undefined
 }

 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
-  const validLanguage = options.language !== '' && hljs.getLanguage(options.language) !== undefined
-  const language = validLanguage ? options.language : 'text'
+  const { language } = options
+  const validLanguage = language !== undefined && hljs.getLanguage(language) !== undefined

-  const { value: highlighted } = hljs.highlight(text, { language })
-  const normalized = normalizeHighlightTags(highlighted)
-  return normalized
+  const { value: highlighted } = validLanguage ? hljs.highlight(text, { language }) : hljs.highlightAuto(text)
+
+  return normalizeHighlightTags(highlighted)
 }

 export function highlightLines (lines: string[], options: HighlightOptions): string[] {
@@ -15,10 +15,12 @@

 import { type Resources } from '@hcengineering/platform'
 import DiffView from './components/DiffView.svelte'
+import Highlight from './components/Highlight.svelte'
 import InlineDiffView from './components/InlineDiffView.svelte'
 export default async (): Promise<Resources> => ({
  component: {
    DiffView,
-    InlineDiffView
+    InlineDiffView,
+    Highlight
  }
 })