How to use SQL code folding function?

1

codemirror “^5.41.0”

import 'codemirror/addon/fold/foldgutter.css';

import 'codemirror/addon/fold/foldcode';

import 'codemirror/addon/fold/foldgutter';

import 'codemirror/addon/fold/brace-fold';

import 'codemirror/addon/fold/comment-fold';

 cmOptions: {
                minimap: true,
                tabSize: 4,
                mode: 'text/x-sql',
                theme: 'darcula',
                autofocus: true, // 自动获取焦点
                styleActiveLine: true, // 光标代码高亮
                lineNumbers: true, // 显示行号
                lineWrapping: true,
                foldGutter: true,
                extraKeys: {
                    // tab 转空格
                    Tab: function (cm) {
                        cm.replaceSelection('    ', 'end');
                    },
                    Ctrl: 'autocomplete'
                },
                lineWiseCopyCut: true,
                showCursorWhenSelecting: true,
                matchBrachets: true,
                line: true,
                autoCloseBrackets: true,
                allowAtxHeaderWithoutSpace: true,
                specialChars:
                    // eslint-disable-next-line no-control-regex
                    /\s/g,
                specialCharPlaceholder: function (ch) {
                    let token = document.createElement('span');
                    let content = '\u002e';
                    token.className = 'cm-invalidchar';
                    if (typeof content == 'string') {
                        token.appendChild(document.createTextNode(content));
                    }
                    token.title = '\\u' + ch.charCodeAt(0).toString(16);
                    token.setAttribute('aria-label', token.title);
                    token.setAttribute('style', 'color:#444');
                    return token;
                }
            }

codefold is not work;

2

You also need to enable the fold gutter in the gutters option. See the source of the folding demo for an example.

3

thx for answer,but the demo is about javascript,html, python,markdown ,I just went use for SQL

I find an other way :

foldGutter: {
                rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.indent,CodeMirror.fold.comment)
            },
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
4

sorry,I set ‘gutters’ like this before,it doesn’t work
gutters: [“CodeMirror-linenumbers”, “CodeMirror-foldgutter”]

5

Oh, right, there is no folding function for SQL in the distribution, so the library won’t help you there.