Skip to content

Instantly share code, notes, and snippets.

Last active March 22, 2024 19:07
Show Gist options
  • Save denisborovikov/e5241c93f0dd9007b3fdb00d8c6e125b to your computer and use it in GitHub Desktop.
Save denisborovikov/e5241c93f0dd9007b3fdb00d8c6e125b to your computer and use it in GitHub Desktop.
Collapse MUI sx prop in Webstorm 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 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
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:]
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

denisborovikov commented Dec 9, 2022

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.

Copy link

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

Copy link

I created a modified version to handle React className too 👉

Copy link

@tscharke Sure thing. Glad it helped ❤️

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