Collapse Attributes (like MUI `sx`, React `className`) in JetBrains-Products using LivePlugin

plugin.groovy

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 https://github.com/dkandalov/live-plugin)

def collapsableAttributes = [
  "sx": [ "regex" : 'sx=\\{\\{(\s*.*?\s*)\\}\\}', "replace" : "..."],
  "className": ["regex":'className="([^"]*)"', "replace":"🍃…"]
]
def DEFAULT_KEYMAP_SHORTCUT ="ctrl alt 0"

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: matcher.group(1)]
  }

  editor.foldingModel.runBatchFoldingOperation(new Runnable() {
    @Override
    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) {
      editor.foldingModel.removeFoldRegion(region)
      info.removeRegion(region)
    }
  } else {
    region = ((FoldingModelEx)editor.foldingModel).addFoldRegion(start, end, placeHolderText)
    if (region == null) {
      return
    }
    region.expanded = false
  }
}

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.

Usage

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).