Collapse MUI sx prop in Webstorm 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 MUI `sx` prop.
// (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)

registerAction("symbolizeKeyWords", "ctrl alt 0", "MainToolbarCenter", "Collapse sx") { AnActionEvent event ->
  def editor = currentEditorIn(event.project)
  collapseIn(editor, "sx=\\{\\{(\s*.*?\s*)\\}\\}", { "..." })
}
if (!isIdeStartup) show("Loaded symbolizeKeywords action. Use Ctrl+Alt+0 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
  }
}

@denisborovikov I only found your GIST today because I was looking for a collapse of HTML Attributes. Thank you for your work 🙏 It works fine for sx attributes. I'm still making my adjustments for React classNames and then I'm happy 🥳.

Thank you so much for your amazing work 👏👍❤️

I created a modified version to handle React className too 👉 https://gist.github.com/tscharke/4afa1120828cc552f7b2c5470738231e

@tscharke Sure thing. Glad it helped ❤️