Skip to content

Instantly share code, notes, and snippets.

Last active February 25, 2024 16:24
Show Gist options
  • Save tscharke/4afa1120828cc552f7b2c5470738231e to your computer and use it in GitHub Desktop.
Save tscharke/4afa1120828cc552f7b2c5470738231e to your computer and use it in GitHub Desktop.
Collapse Attributes (like MUI `sx`, React `className`) in JetBrains-Products using LivePlugin
import com.intellij.codeInsight.folding.impl.EditorFoldingInfo
import com.intellij.codeInsight.folding.impl.FoldingUtil
import com.intellij.openapi.actionSystem.AnActionEvent
import com.intellij.openapi.editor.Document
import com.intellij.openapi.editor.Editor
import com.intellij.openapi.editor.FoldRegion
import com.intellij.openapi.editor.ex.FoldingModelEx
import java.util.regex.Pattern
import static liveplugin.PluginUtil.*
// This is a micro-plugin to collapse Attributes like `sx`, `className`, etc.
// (looks better if folded text background is the same as normal text; Settings -> Editor -> Colors & Fonts)
// (Note that it can only be executed within this plugin
def collapsableAttributes = [
"sx": [ "regex" : 'sx=\\{\\{(\s*.*?\s*)\\}\\}', "replace" : "..."],
"className": ["regex":'className="([^"]*)"', "replace":"🍃…"]
registerAction("symbolizeKeyWords", DEFAULT_KEYMAP_SHORTCUT, "MainToolbarCenter", "Collapse Attributes") { AnActionEvent event ->
def editor = currentEditorIn(event.project)
collapsableAttributes.each { key, value ->
collapseIn(editor, value["regex"], { value["replace"] })
//if (!isIdeStartup) show("Loaded symbolizeKeywords action. Use Ctrl+Alt+0 to run it.")
if (!isIdeStartup) show("Loaded symbolizeKeywords action. Use ${DEFAULT_KEYMAP_SHORTCUT.replace(' ', '+')} to run it.")
def collapseIn(Editor editor, String regExp, Closure replacementFor) {
def matches = []
def matcher = Pattern.compile(regExp, Pattern.DOTALL).matcher(editor.document.charsSequence)
while (matcher.find()) {
matches << [start: matcher.start(1), end: matcher.end(1), text:]
editor.foldingModel.runBatchFoldingOperation(new Runnable() {
public void run() {
matches.each { foldText(it.start, it.end, replacementFor(it.text), editor) }
* Originally copied from com.intellij.codeInsight.folding.impl.CollapseSelectionHandler
def foldText(int start, int end, String placeHolderText, Editor editor) {
if (start + 1 >= end) return
if (start < end && editor.document.charsSequence.charAt(end - 1) == '\n') end--
FoldRegion region = FoldingUtil.findFoldRegion(editor, start, end)
if (region != null) {
EditorFoldingInfo info = EditorFoldingInfo.get(editor)
if (info.getPsiElement(region) == null) {
} else {
region = ((FoldingModelEx)editor.foldingModel).addFoldRegion(start, end, placeHolderText)
if (region == null) {
region.expanded = false
Copy link

This modification was inspired by @denisborovikov GIST that's collapse MUI sx props.

My extension of this plugin handles React's className attributes. I've also outsourced the corresponding regex so that further attributes can be added.

Copy link


  1. Install LivePlugin
  2. Copy this code from Gist (there's an option in LivePlugin for this or paste it manually)
  3. Change the assigned keys in line 21 (ctrl alt 0 by default).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment