feat(editor): add lowlight code blocks

[AlexAndBear]

Description

This PR adds syntax-highlighted code blocks to the Tiptap editor using @tiptap/extension-code-block-lowlight and a dedicated code block node view with language selection.

It also switches Highlight.js themes based on the active app theme (isDark):

• light mode: atom-one-light
• dark mode: atom-one-dark

Related Issue

• Fixes N/A

How Has This Been Tested?

• test environment: local development environment
• test case 1: ./node_modules/.bin/vue-tsc --declaration --noEmit --project packages/web-pkg/tsconfig.build.json
• test case 2: verified code block language selector rendering and position in the editor node view
• test case 3: verified theme stylesheet switches between atom-one-light and atom-one-dark when theme changes

Types of changes

• Bugfix
• Enhancement (a change that doesn't break existing code or deployments)
• Breaking change (a modification that affects current functionality)
• Technical debt (addressing code that needs refactoring or improvements)
• Tests (adding or improving tests)
• Documentation (updates or additions to documentation)
• Maintenance (like dependency updates or tooling adjustments)

[AlexAndBear]

Build Size Comparison

I compared the build sizes between main and this PR branch to assess the impact of adding lowlight for syntax highlighting.

Editor Chunk Size

main branch:

• dist/js/chunks/editor-*.mjs: 783.32 kB (gzip: 240.58 kB)

This PR (with lowlight):

• dist/js/chunks/editor-*.mjs: 962.76 kB (gzip: 297.01 kB)

Impact

• Uncompressed: +179.44 kB (+22.9%)
• Gzipped: +56.43 kB (+23.4%)

The lowlight package (including the highlight.js themes) adds approximately 56 kB (gzipped) to the editor bundle. This is a noticeable but reasonable increase for syntax highlighting functionality.

[JammingBen]

I think it's fine for the scope of this PR, but we're already getting a warning about the biggest chunk, and now it's even more big. So we should make the editor components async and/or put them into dedicated chunks (kinda already a to-do in #3033).

[JammingBen]

A few findings from my side:

• Inline blocks via single backticks like this lost their styling.
• The select is editable in read-only mode.
• The select overflows the code block initially, which looks a bit off. Maybe reduce its size? Or more general: do we really need this? 🙈 I feel like this feature gets mostly used by technical users that now how to work with code blocks.

[kulmann]

good that you moved it 👍

[AlexAndBear]

A few findings from my side:

• Inline blocks via single backticks like this lost their styling.
• The select is editable in read-only mode.
• The select overflows the code block initially, which looks a bit off. Maybe reduce its size? Or more general: do we really need this? 🙈 I feel like this feature gets mostly used by technical users that now how to work with code blocks.

Hmm I would keep the select, as it also indicates which languages are supported for code hilighting 🤔