-
Notifications
You must be signed in to change notification settings - Fork 425
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
KTL-1707 Dokka: adjust code area to new design #4051
Draft
nikpachoo
wants to merge
1
commit into
master
Choose a base branch
from
ktl-1707-adjust-code-area
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
93 changes: 76 additions & 17 deletions
93
...jects/ui-showcase/jvm/src/main/kotlin/org/jetbrains/dokka/uitest/markdown/MarkdownCode.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,90 @@ | ||
| package org.jetbrains.dokka.uitest.markdown | ||
|
|
||
| /** | ||
| * Contains examples of Markdown code showcasing Kotlin syntax highlighting. | ||
| * | ||
| * Contains examples of Markdown code. | ||
| * | ||
| * Here's a code block: | ||
| * Here's a code block with various Kotlin features to test syntax highlighting: | ||
| * | ||
| * ``` | ||
| * class MyUIClass { | ||
| * val scope = MainScope() // the scope of MyUIClass, uses Dispatchers.Main | ||
| * // Single-line comment token | ||
| * /* Multi-line comment token */ | ||
| * /** Documentation comment token */ | ||
| * | ||
| * // Package declaration to test namespace token | ||
| * package com.example.highlighting | ||
| * | ||
| * // Imports to test namespace tokens | ||
| * import kotlin.random.Random | ||
| * import kotlin.collections.List | ||
| * | ||
| * // Type alias to test symbol token | ||
| * typealias Handler<T> = (T) -> Unit | ||
| * typealias AsyncOperation = suspend () -> Unit | ||
| * | ||
| * // Sealed interface to test class-name and keyword tokens | ||
| * sealed interface State { | ||
| * object Loading : State | ||
| * data class Success(val data: String) : State | ||
| * data class Error(val message: String) : State | ||
| * } | ||
| * | ||
| * // Class with various token types | ||
| * class SyntaxDemo { | ||
| * // Properties to test property and symbol tokens | ||
| * private val number: Int = 42 // number token | ||
| * protected var text: String = "Hello" // string token | ||
| * internal const val PI = 3.14159 // number token | ||
| * | ||
| * fun destroy() { // destroys an instance of MyUIClass | ||
| * scope.cancel() // cancels all coroutines launched in this scope | ||
| * // ... do the rest of cleanup here ... | ||
| * } | ||
| * protected var url: String = "https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/min.html" | ||
| * | ||
| * /* | ||
| * * Note: if this instance is destroyed or any of the launched coroutines | ||
| * * in this method throws an exception, then all nested coroutines are cancelled. | ||
| * */ | ||
| * fun showSomeData() = scope.launch { // launched in the main thread | ||
| * // ... here we can use suspending functions or coroutine builders with other dispatchers | ||
| * draw(data) // draw in the main thread | ||
| * var pattern = Regex("""\b\d{3}-\d{3}-\d{4}\b""") | ||
| * | ||
| * // Companion with property tokens | ||
| * companion object { | ||
| * const val DEBUG = true // boolean token | ||
| * const val CHAR_SAMPLE = 'A' // char token | ||
| * @JvmField val EMPTY = "" // string token | ||
| * } | ||
| * | ||
| * // Function to test various tokens | ||
| * fun calculate(x: Double): Double { | ||
| * val multiplier = 2.5 // number token | ||
| * val enabled: Boolean = false // boolean token | ||
| * | ||
| * // Operators test | ||
| * val result = when { | ||
| * x <= 0 -> x * multiplier | ||
| * x >= 100 -> x / multiplier | ||
| * else -> x + multiplier | ||
| * } | ||
| * | ||
| * // Built-in types and functions test | ||
| * val numbers: List<Int> = listOf(1, 2, 3) | ||
| * val filtered = numbers | ||
| * .filter { it > 0 } // lambda and operator tokens | ||
| * .map { it.toString() } // function token | ||
| * .joinToString(separator = ", ") | ||
| * | ||
| * // String template and escape sequence tokens | ||
| * println("Result: $result\nFiltered: $filtered") | ||
| * | ||
| * return result | ||
| * } | ||
| * | ||
| * // Extension function with operator and symbol tokens | ||
| * infix fun Int.power(exponent: Int): Int { | ||
| * require(exponent >= 0) { "Exponent must be non-negative" } | ||
| * return when (exponent) { | ||
| * 0 -> 1 | ||
| * 1 -> this | ||
| * else -> this * (this power (exponent - 1)) | ||
| * } | ||
| * } | ||
| * } | ||
| * ``` | ||
| * | ||
| * Here's inline code: `this` and `that` and `fun foo()` and `class Omg : MyInterface` | ||
| * Here's inline code with various token types: | ||
| * `val x: Int = 0`, `fun interface EventHandler`, `object : Runnable`, | ||
| * `class Sample<T : Any>`, `@Deprecated fun old()`, `var name: String?` | ||
| */ | ||
| class MarkdownCode {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
dokka-subprojects/plugin-base-frontend/src/main/ui-kit/code-block/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| /* | ||
| * Copyright 2014-2025 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. | ||
| */ | ||
| import './styles.scss'; | ||
|
|
||
| // helps with some corner cases where <wbr> starts working already, | ||
| // but the signature is not yet long enough to be wrapped | ||
|
|
||
| const CODE_BLOCK_PADDING = 16 * 2; | ||
|
|
||
| const symbolsObserver = new ResizeObserver((entries) => entries.forEach(wrapSymbolParameters)); | ||
|
|
||
| function initHandlers() { | ||
| document.querySelectorAll('div.symbol').forEach((symbol) => symbolsObserver.observe(symbol)); | ||
| } | ||
|
|
||
| if (document.readyState === 'loading') { | ||
| window.addEventListener('DOMContentLoaded', initHandlers); | ||
| } else { | ||
| initHandlers(); | ||
| } | ||
|
|
||
| function createNbspIndent() { | ||
| const indent = document.createElement('span'); | ||
| indent.append(document.createTextNode('\u00A0\u00A0\u00A0\u00A0')); | ||
| indent.classList.add('nbsp-indent'); | ||
| return indent; | ||
| } | ||
|
|
||
| function wrapSymbolParameters(entry: ResizeObserverEntry) { | ||
| const symbol = entry.target; | ||
| const symbolBlockWidth = entry.borderBoxSize && entry.borderBoxSize[0] && entry.borderBoxSize[0].inlineSize; | ||
| const sourceButtonWidth = symbol.querySelector('[data-element-type="source-link"]')?.getBoundingClientRect().width || 0; | ||
|
|
||
| // Even though the script is marked as `defer` and we wait for `DOMContentLoaded` event, | ||
| // or if this block is a part of hidden tab, it can happen that `symbolBlockWidth` is 0, | ||
| // indicating that something hasn't been loaded. | ||
| // In this case, observer will be triggered onсe again when it will be ready. | ||
| if (symbolBlockWidth > 0) { | ||
| const node = symbol.querySelector('.parameters'); | ||
|
|
||
| if (node) { | ||
| // if window resize happened and observer was triggered, reset previously wrapped | ||
| // parameters as they might not need wrapping anymore, and check again | ||
| node.classList.remove('wrapped'); | ||
| node.querySelectorAll('.parameter .nbsp-indent').forEach((indent) => indent.remove()); | ||
|
|
||
| const innerTextWidth = Array.from(symbol.children) | ||
| .filter((it) => !it.classList.contains('block')) // blocks are usually on their own (like annotations), so ignore it | ||
| .map((it) => it.getBoundingClientRect().width) | ||
| .reduce((a, b) => a + b, 0); | ||
|
|
||
| // if signature text takes up more than a single line, wrap params for readability | ||
| if (innerTextWidth > symbolBlockWidth - CODE_BLOCK_PADDING - sourceButtonWidth) { | ||
| node.classList.add('wrapped'); | ||
| node.querySelectorAll('.parameter').forEach((param) => { | ||
| // has to be a physical indent so that it can be copied. styles like | ||
| // paddings and `::before { content: " " }` do not work for that | ||
| param.prepend(createNbspIndent()); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| } |
76 changes: 76 additions & 0 deletions
76
dokka-subprojects/plugin-base-frontend/src/main/ui-kit/code-block/styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| /*! | ||
| * Copyright 2014-2025 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. | ||
| */ | ||
| @import '../_tokens/index'; | ||
|
|
||
| /** | ||
| http://localhost:8001/jvm/org.jetbrains.dokka.uitest.markdown/-markdown-code/index.html | ||
| */ | ||
| .symbol:not(.token, .wrapped), code.block { | ||
| display: block; | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| padding: 12px 16px; | ||
| border-radius: var(--size-s1); | ||
| background-color: var(--color-background-code-block); | ||
| font: var(--font-code); | ||
| white-space: pre-wrap; | ||
| overflow: scroll; | ||
| } | ||
|
|
||
| code.block { | ||
| overflow-x: auto; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| .source-link-wrapper::after { | ||
| display: block; | ||
| content: ''; | ||
| clear: both; | ||
| height: 0; | ||
| } | ||
|
|
||
| @media screen and (width <= 759px) { | ||
| .source-link-wrapper { | ||
| margin-top: 8px; | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| .source-link { | ||
| float: right; | ||
| } | ||
|
|
||
| /** | ||
| http://localhost:8001/jvm/org.jetbrains.dokka.uitest.types/-simple-deprecated-kotlin-class/index.html | ||
| */ | ||
|
|
||
| .sample-container, div.CodeMirror { | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .sample-container span.copy-icon { | ||
| display: none; | ||
|
|
||
| &::before { | ||
| width: 24px; | ||
| height: 24px; | ||
| display: inline-block; | ||
| content: ''; | ||
| /* masks are required if you want to change color of the icon dynamically instead of using those provided with the SVG */ | ||
| mask: url("../_assets/copy-icon.svg") no-repeat 50% 50%; | ||
| -webkit-mask-size: cover; | ||
| mask-size: cover; | ||
| background-color: var(--copy-icon-color); | ||
| } | ||
|
|
||
| &:hover::before { | ||
| background-color: var(--copy-icon-hover-color); | ||
| } | ||
| } | ||
|
|
||
| .js .sample-container:hover span.copy-icon { | ||
| display: inline-block; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What is the reason for this particular value? Is this a special case? Does it make sense to replace it with a standard breakpoint, for example $breakpoint-desktop-min or something?