fix: codeblock various fixes

packages/presentation/package.json

@@ -48,6 +48,7 @@
     "@hcengineering/ui": "^0.6.15",
     "@hcengineering/view": "^0.6.13",
     "@hcengineering/text": "^0.6.5",
+    "@hcengineering/diffview": "^0.6.0",
     "@hcengineering/uploader": "^0.6.0",
     "svelte": "^4.2.12",
     "@hcengineering/client": "^0.6.18",

packages/presentation/src/components/markup/CodeBlockNode.svelte

@@ -0,0 +1,32 @@
+<!--
+// 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 diffview from '@hcengineering/diffview'
+  import { MarkupNode } from '@hcengineering/text'
+  import { Component } from '@hcengineering/ui'
+
+  export let node: MarkupNode
+  export let preview = false
+
+  $: language = node.attrs?.language
+  $: content = node.content ?? []
+  $: value = content.map((node) => node.text).join('/n')
+</script>
+
+{#if node}
+  <pre class="proseCodeBlock" style:margin={preview ? '0' : null}><code
+      ><Component is={diffview.component.Highlight} props={{ value, language }} /></code
+    ></pre>
+{/if}

packages/presentation/src/components/markup/NodeContent.svelte

@@ -17,6 +17,7 @@
   import { AttrValue, MarkupNode, MarkupNodeType } from '@hcengineering/text'
 
   import MarkupNodes from './Nodes.svelte'
+  import CodeBlockNode from './CodeBlockNode.svelte'
   import ObjectNode from './ObjectNode.svelte'
 
   export let node: MarkupNode
@@ -71,7 +72,7 @@
       <MarkupNodes {nodes} {preview} />
     </svelte:element>
   {:else if node.type === MarkupNodeType.code_block}
-    <pre class="proseCodeBlock" style:margin={preview ? '0' : null}><code><MarkupNodes {nodes} {preview} /></code></pre>
+    <CodeBlockNode {node} {preview} />
   {:else if node.type === MarkupNodeType.image}
     {@const src = toString(attrs.src)}
     {@const alt = toString(attrs.alt)}

packages/theme/styles/_colors.scss

@@ -77,7 +77,6 @@
   --text-editor-highlighted-node-delete-background-color: #F6DCDA;
   --text-editor-highlighted-node-delete-font-color: #54201C;
 
-  --text-editor-inline-code-color: #B02B46;
   --text-editor-table-marker-color: #bebebf;
 
   --theme-clockface-sec-arrow: conic-gradient(at 50% -10px, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 49%, #F47758 50%, rgba(255, 0, 0, 0) 51%, rgba(255, 0, 0, 0) 100%);

packages/theme/styles/prose.scss

@@ -345,7 +345,6 @@ table.proseTable {
   margin: 0 1px;
   padding: 0 .25rem;
   font-family: var(--mono-font);
-  color: var(--text-editor-inline-code-color);
   background-color: var(--theme-button-default);
   border: 1px solid var(--theme-button-border);
   border-radius: .25rem;

packages/ui/package.json

@@ -33,6 +33,7 @@
     "prettier": "^3.1.0",
     "typescript": "^5.3.3",
     "@types/jest": "^29.5.5",
+    "@types/dompurify": "^3.0.5",
     "jest": "^29.7.0",
     "ts-jest": "^29.1.1",
     "svelte-eslint-parser": "^0.33.1"
@@ -47,6 +48,7 @@
     "emoji-regex": "^10.1.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
+    "dompurify": "^3.1.6",
     "@hcengineering/analytics": "^0.6.0"
   },
   "repository": "https://github.com/hcenginneing/anticrm",

packages/ui/src/components/Html.svelte

@@ -0,0 +1,23 @@
+<!--
+// 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 dompurify from 'dompurify'
+
+  export let value: string
+
+  $: sanitized = dompurify.sanitize(value)
+</script>
+
+{@html sanitized}

packages/ui/src/index.ts

@@ -96,6 +96,7 @@ export { default as DatePresenter } from './components/calendar/DatePresenter.sv
 export { default as DueDatePresenter } from './components/calendar/DueDatePresenter.svelte'
 export { default as DateTimePresenter } from './components/calendar/DateTimePresenter.svelte'
 export { default as TimeInputBox } from './components/calendar/TimeInputBox.svelte'
+export { default as Html } from './components/Html.svelte'
 export { default as StylishEdit } from './components/StylishEdit.svelte'
 export { default as Grid } from './components/Grid.svelte'
 export { default as Row } from './components/Row.svelte'

plugins/diffview-resources/src/components/Highlight.svelte

@@ -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} />

plugins/diffview-resources/src/highlight/highlight.ts

@@ -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[] {

plugins/diffview-resources/src/index.ts

@@ -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
   }
 })

plugins/diffview/src/index.ts

@@ -48,7 +48,8 @@ export interface DiffFileId {
 export default plugin(diffviewId, {
   component: {
     DiffView: '' as AnyComponent,
-    InlineDiffView: '' as AnyComponent
+    InlineDiffView: '' as AnyComponent,
+    Highlight: '' as AnyComponent
   },
   string: {
     ViewMode: '' as IntlString,

plugins/text-editor-resources/src/components/extension/codeblock.ts

@@ -13,41 +13,48 @@
 // limitations under the License.
 //
 
+import { codeBlockOptions } from '@hcengineering/text'
 import { DropdownLabelsPopup, getEventPositionElement, showPopup } from '@hcengineering/ui'
 import { type CodeBlockLowlightOptions, CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { type Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { Decoration, DecorationSet, type EditorView } from '@tiptap/pm/view'
-import { type createLowlight } from 'lowlight'
+import { common, createLowlight } from 'lowlight'
 
 type Lowlight = ReturnType<typeof createLowlight>
 
 const chevronSvg = `<svg width="16" height="16" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path d="M16 22L6 12L7.4 10.6L16 19.2L24.6 10.6L26 12L16 22Z" />
 </svg>`
 
-export const CodeBlockExtension = CodeBlockLowlight.extend<CodeBlockLowlightOptions>({
+export const codeBlockHighlightOptions: CodeBlockLowlightOptions = {
+  ...codeBlockOptions,
+  lowlight: createLowlight(common)
+}
+
+export const CodeBlockHighlighExtension = CodeBlockLowlight.extend<CodeBlockLowlightOptions>({
   addProseMirrorPlugins () {
     return [...(this.parent?.() ?? []), LanguageSelector(this.options)]
   }
 })
 
 export function LanguageSelector (options: CodeBlockLowlightOptions): Plugin {
-  return new Plugin({
+  return new Plugin<DecorationSet>({
     key: new PluginKey('codeblock-language-selector'),
     props: {
       decorations (state) {
         return this.getState(state)
       }
     },
     state: {
-      init () {
-        return DecorationSet.empty
+      init (config, state) {
+        return createDecorations(state.doc, options)
       },
       apply (tr, prev) {
         if (tr.docChanged) {
           return createDecorations(tr.doc, options)
         }
+
         return prev
       }
     }
@@ -84,7 +91,7 @@ function createDecorations (doc: ProseMirrorNode, options: CodeBlockLowlightOpti
 
 function createLangButton (language: string | null): HTMLButtonElement {
   const button = document.createElement('button')
-  button.className = 'antiButton ghost small sh-no-shape bs-none gap-medium iconR'
+  button.className = 'antiButton link-bordered small sh-no-shape bs-none gap-medium iconR'
   button.style.position = 'absolute'
   button.style.top = '0.375rem'
   button.style.right = '0.375rem'

plugins/text-editor-resources/src/kits/default-kit.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 //
 
-import { codeBlockOptions, codeOptions } from '@hcengineering/text'
+import { codeOptions } from '@hcengineering/text'
 import { showPopup } from '@hcengineering/ui'
 import { type Editor, Extension } from '@tiptap/core'
 import type { CodeOptions } from '@tiptap/extension-code'
@@ -25,10 +25,9 @@ import Link from '@tiptap/extension-link'
 import Typography from '@tiptap/extension-typography'
 import Underline from '@tiptap/extension-underline'
 import StarterKit from '@tiptap/starter-kit'
-import { common, createLowlight } from 'lowlight'
 
 import LinkPopup from '../components/LinkPopup.svelte'
-import { CodeBlockExtension } from '../components/extension/codeblock'
+import { CodeBlockHighlighExtension, codeBlockHighlightOptions } from '../components/extension/codeblock'
 
 export interface DefaultKitOptions {
   codeBlock?: Partial<CodeBlockOptions> | false
@@ -66,10 +65,7 @@ export const DefaultKit = Extension.create<DefaultKitOptions>({
         openOnClick: true,
         HTMLAttributes: { class: 'cursor-pointer', rel: 'noopener noreferrer', target: '_blank' }
       }),
-      CodeBlockExtension.configure({
-        ...codeBlockOptions,
-        lowlight: createLowlight(common)
-      })
+      CodeBlockHighlighExtension.configure(codeBlockHighlightOptions)
     ]
   }
 })