feat: add variable search & collapse

.editorconfig

@@ -3,6 +3,7 @@ root = true
 [*]
 indent_style = space
 tab_width = 4
+indent_size = 4
 charset = utf-8
 end_of_line = lf
 trim_trailing_whitespace = true

.github/workflows/lint.yml

@@ -10,8 +10,8 @@ jobs:
   javascript:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/setup-node@v2
-      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v4
       - run: yarn install --frozen-lockfile
 
       - run: yarn lint
@@ -23,7 +23,7 @@ jobs:
       run:
         working-directory: demo/symfonyapp
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: shivammathur/setup-php@v2
         with:
           php-version: '7.4'

index.html

@@ -88,7 +88,7 @@ <h1 class="username-{{ user.type }}">Welcome {{ username }} :-)</h1>
                         username: { type: 'string', label: 'The current user\'s username' },
                         favoriteColors: {
                             type: 'array',
-                                children: {
+                            children: {
                                 type: 'string'
                             }
                         }
@@ -104,7 +104,7 @@ <h1 class="username-{{ user.type }}">Welcome {{ username }} :-)</h1>
         // Array of objects
         countries: {
             type: 'array',
-                children: {
+            children: {
                 type: 'object',
 				properties: {
                     name: { type: 'string' },
@@ -115,10 +115,15 @@ <h1 class="username-{{ user.type }}">Welcome {{ username }} :-)</h1>
         // Array of arrays
         currentPositions: {
             type: 'array',
-                children: {
+            children: {
                 type: 'array',
-                    children: { type: 'float' }
+                children: { type: 'float' }
             }
+        },
+        // Big objects
+        locations: {
+            type: 'object',
+            properties: [...Array(100).keys()].reduce((obj, cur) => ({...obj, ['property-'+cur]: { type: 'int' }}), {})
         }
     };
 </script>

twig/plugin.css

@@ -76,22 +76,26 @@ table.twig-variables {
     font-size: 0.9em;
     border: 1px solid #ccc;
     border-collapse: collapse;
-    margin:0;
-    padding:0;
+    margin: 0;
+    padding: 0;
     width: 100%;
 }
+
 table.twig-variables tbody {
     border: 1px solid #ddd;
     padding: 3px;
 }
+
 table.twig-variables th, table.twig-variables td {
     padding: 4px 10px;
     text-align: left;
 }
+
 table.twig-variables th {
     font-weight: bold;
     letter-spacing: 1px;
 }
+
 table.twig-variables thead th {
     font-size: 1em;
     text-transform: uppercase
@@ -104,6 +108,41 @@ table.twig-variables tbody td[colspan] {
     padding-bottom: 10px;
 }
 
+/* Child tables */
+table.twig-variables table > tbody {
+    display: none;
+}
+
+table.twig-variables table[data-opened] > tbody {
+    display: table-row-group;
+}
+
+table.twig-variables a.twig-variables-collapse {
+    text-decoration: none;
+    color: #448acb;
+    font-weight: normal;
+    font-size: 0.7em;
+}
+
+table.twig-variables[data-opened] > thead > tr > th > a.twig-variables-collapse span.twig-variables-table-collapse,
+table.twig-variables:not([data-opened]) > thead > tr > th > a.twig-variables-collapse span.twig-variables-table-expand {
+    display: inline;
+}
+
+table.twig-variables[data-opened] > thead > tr > th > a.twig-variables-collapse span.twig-variables-table-expand,
+table.twig-variables:not([data-opened]) > thead > tr > th > a.twig-variables-collapse span.twig-variables-table-collapse {
+    display: none;
+}
+
+/* Table search */
+table.twig-variables input[type=search] {
+    display: inline-block;
+}
+
+table.twig-variables [data-searched] {
+    background-color: yellow;
+}
+
 /* Type column */
 table.twig-variables thead th:nth-child(2), table.twig-variables tbody td:nth-child(2) {
     width: 8rem;
@@ -138,23 +177,28 @@ table.twig-variables thead th:nth-child(4), table.twig-variables tbody td:nth-ch
 .twig-statement-doc {
     display: flex;
 }
+
 .twig-statement-doc > div {
     margin: auto;
     margin-top: 0;
 }
+
 .twig-statement-doc h3 {
     margin: 0;
     margin-bottom: 10px;
     border: none;
 }
+
 .twig-statement-doc a {
     font-size: 14px;
 }
+
 .twig-statement-doc pre {
     text-align: left;
     line-height: 14px;
     margin-top: 6px;
 }
+
 .twig-statement-doc pre code {
     padding: 0;
 }

twig/twigpluginui.js

@@ -48,6 +48,11 @@ export default class TwigPluginUI extends Plugin {
             'twig.variables.type.float': 'Float',
             'twig.variables.type.datetime': 'Datetime',
             'twig.variables.type.unknown': 'Unknown',
+            'twig.variables.table.collapse': '< Collapse',
+            'twig.variables.table.collapse-all': '< Collapse all',
+            'twig.variables.table.expand': '> Expand',
+            'twig.variables.table.expand-all': '> Expand all',
+            'twig.variables.search': 'Search...',
             'twig.import-export': 'Import / Export',
             'twig.import': 'Import',
             'twig.import.label': 'You can import your own twig/html content by pasting it bellow.\nCaution: if the pasted template is not valid, you can break the output.'
@@ -83,6 +88,11 @@ export default class TwigPluginUI extends Plugin {
             'twig.variables.type.float': 'Nombre à virgule',
             'twig.variables.type.datetime': 'Date et heure',
             'twig.variables.type.unknown': 'Inconnu',
+            'twig.variables.table.collapse': '< Fermer',
+            'twig.variables.table.collapse-all': '< Tout fermer',
+            'twig.variables.table.expand': '> Ouvrir',
+            'twig.variables.table.expand-all': '> Tout ouvrir',
+            'twig.variables.search': 'Rechercher...',
             'twig.import-export': 'Import / Export',
             'twig.import': 'Importer',
             'twig.import.label': 'Vous pouvez importer votre propre twig/html en le collant ci-dessous.\nAttention: un template non valide peut entraîner la perte de données.'

twig/variables/displayvariablescommand.js

@@ -48,6 +48,67 @@ export default class DisplayTwigVariablesCommand extends Command {
         return this._cachedTables[ hash ];
     }
 
+    _createCollapseLink( all = false ) {
+        const t = this.editor.t;
+
+        const linkEl = document.createElement( 'a' );
+        linkEl.href = '#';
+        linkEl.className = 'twig-variables-collapse';
+        linkEl.onclick = e => {
+            e.preventDefault();
+
+            const isOpened = e.target.closest( 'table' ).hasAttribute( 'data-opened' );
+            e.target.closest( 'table' ).toggleAttribute( 'data-opened' );
+            if ( all ) {
+                [ ...e.target.closest( 'table' ).getElementsByTagName( 'table' ) ].forEach( table => ( table.toggleAttribute( 'data-opened', !isOpened ) ) );
+            }
+        };
+
+        const expandSpanEl = textElement( 'span', t( 'twig.variables.table.expand' + ( all ? '-all' : '' ) ) );
+        expandSpanEl.className = 'twig-variables-table-expand';
+
+        const collapseSpanEl = textElement( 'span', t( 'twig.variables.table.collapse' + ( all ? '-all' : '' ) ) );
+        collapseSpanEl.className = 'twig-variables-table-collapse';
+
+        linkEl.append( expandSpanEl );
+        linkEl.append( collapseSpanEl );
+        return linkEl;
+    }
+
+    _search( tableEl, searchText ) {
+        [ ...tableEl.getElementsByTagName( 'table' ) ].forEach( table => ( table.toggleAttribute( 'data-opened', false ) ) );
+        [ ...tableEl.getElementsByClassName( 'variable-name' ) ].forEach( el => {
+            const elContent = el.textContent || el.innerText;
+            const isMatching = searchText && elContent.toUpperCase().indexOf( searchText.toUpperCase() ) >= 0;
+            el.toggleAttribute( 'data-searched', isMatching );
+
+            if ( isMatching ) {
+                this._openParentTable( el );
+            }
+        } );
+    }
+
+    _openParentTable( el ) {
+        const table = el.parentElement.closest( 'table' );
+        if ( !table ) {
+            return;
+        }
+        table.toggleAttribute( 'data-opened', true );
+        this._openParentTable( table );
+    }
+
+    _createSearchInput() {
+        const t = this.editor.t;
+        const searchEl = document.createElement( 'input' );
+        searchEl.type = 'search';
+        searchEl.placeholder = t( 'twig.variables.search' );
+        searchEl.oninput = () => {
+            this._search( searchEl.closest( 'table' ), searchEl.value || '' );
+        };
+
+        return searchEl;
+    }
+
     _createVariablesTable( vars, parents = [] ) {
         const t = this.editor.t;
 
@@ -67,11 +128,29 @@ export default class DisplayTwigVariablesCommand extends Command {
             headTrEl.append(
                 textElement( 'th', t( 'twig.variables.name' ) ),
                 textElement( 'th', t( 'twig.variables.type' ) ),
-                textElement( 'th', t( 'twig.variables.label' ) ),
-                textElement( 'th', '' )
+                textElement( 'th', t( 'twig.variables.label' ) )
             );
+            const thCollapseEl = document.createElement( 'th' );
+            thCollapseEl.append( this._createCollapseLink( true ) );
+            headTrEl.append( thCollapseEl );
+
+            const searchTrEl = document.createElement( 'tr' );
+            const searchThEl = document.createElement( 'th' );
+            searchThEl.append( this._createSearchInput() );
+
+            searchTrEl.append( searchThEl );
             theadEl.append( headTrEl );
+            theadEl.append( searchTrEl );
             tableEl.append( theadEl );
+        } else {
+            const theadCollapseEl = document.createElement( 'thead' );
+            const headTrEl = document.createElement( 'tr' );
+            const tdEl = document.createElement( 'th' );
+            tdEl.append( this._createCollapseLink() );
+
+            headTrEl.append( tdEl );
+            theadCollapseEl.append( headTrEl );
+            tableEl.append( theadCollapseEl );
         }
 
         const lines = Object.entries( vars ).map( ( [ name, conf ] ) => this._createVariableDomOutput( name, conf ) );
@@ -85,7 +164,7 @@ export default class DisplayTwigVariablesCommand extends Command {
         const tr = document.createElement( 'tr' );
 
         // Name
-        tr.append( textElement( 'th', name ) );
+        tr.append( textElement( 'th', name, 'variable-name' ) );
 
         // Type
         const cleanType = this._cleanType( conf.type );
@@ -345,8 +424,11 @@ function arrayItemName( name ) {
     return `${ name }Item`;
 }
 
-function textElement( tagName, text ) {
+function textElement( tagName, text, className ) {
     const el = document.createElement( tagName );
     el.innerText = text;
+    if ( className ) {
+        el.className = className;
+    }
     return el;
 }