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
  }
}

This is a slightly modified code from one of the LivePlugin examples.

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 17 (ctrl alt 0 by default).
4. Remove or change the 3rd and 4th arguments in the same line if you want to change/remove an icon from the toolbar.

@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 ❤️