Skip to content

Commit 24b76f2

Browse files
author
guqiankun.gqk
committed
feat: 更新格式化选定内容
1 parent 1b39794 commit 24b76f2

7 files changed

Lines changed: 126 additions & 50 deletions

File tree

‎packages/alex/src/api/createApp.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,6 @@ export function createApp({ appConfig, runtimeConfig }: IConfig): IAppInstance {
9292
// 托管 preference 逻辑
9393
registerLocalStorageProvider(opts);
9494

95-
console.log(' ==> opts',opts.injector);
96-
9795
const app = new ClientApp(opts) as IAppInstance;
9896

9997
Object.defineProperty(app, 'currentThemeType', {

‎packages/integrations/src/sql/index.tsx‎

Lines changed: 59 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from '@alipay/alex-sql-service';
1111
import { Button } from '@opensumi/ide-components';
1212
import * as SQLPlugin from './sql.plugin';
13-
import { IEditor } from '@opensumi/ide-editor';
13+
import { ICodeEditor, IEditor } from '@opensumi/ide-editor';
1414
import { Popover, Radio, Menu } from 'antd';
1515
import 'antd/dist/antd.css';
1616
import odcTheme from '@alipay/alex/extensions/alex.odc-theme';
@@ -21,7 +21,6 @@ import { ILanguageService } from '@opensumi/monaco-editor-core/esm/vs/editor/com
2121
import { StandaloneServices } from '@opensumi/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
2222

2323
const App = () => {
24-
2524
const [fontValue, setFontValue] = useState(16);
2625
const [encoding, setEncoding] = useState('utf8');
2726
const [editorNumber, setEditorNumber] = useState(1);
@@ -65,8 +64,28 @@ const App = () => {
6564
setEditorNumber(editorNumber + 1);
6665
}
6766

68-
function format() {
69-
SQLPlugin.api.commands?.executeCommand('editor.action.formatDocument');
67+
async function format() {
68+
const editor = (await SQLPlugin.api.commands?.executeCommand('alex.sql.editor')) as IEditor;
69+
if (editor) {
70+
const monacoEditor = editor.monacoEditor;
71+
const selectText = monacoEditor
72+
.getModel()
73+
?.getValueInRange(
74+
monacoEditor.getSelection() || {
75+
startColumn: 1,
76+
startLineNumber: 1,
77+
endColumn: 1,
78+
endLineNumber: 1,
79+
}
80+
);
81+
if (selectText) {
82+
// 格式化选中内容
83+
SQLPlugin.api.commands?.executeCommand('editor.action.formatSelection');
84+
} else {
85+
// 格式化全部文本
86+
SQLPlugin.api.commands?.executeCommand('editor.action.formatDocument');
87+
}
88+
}
7089
}
7190

7291
function updatePrefeence(perferenceName, value) {
@@ -84,8 +103,12 @@ const App = () => {
84103
* @param {string} uri - 文件uri
85104
* @param {string} content - 文件内容 无内容时创建并注入默认内容
86105
*/
87-
const result = await SQLPlugin.api.commands?.executeCommand('alex.sql.open', 'test1.sql', '默认内容');
88-
console.log('open',result);
106+
const result = await SQLPlugin.api.commands?.executeCommand(
107+
'alex.sql.open',
108+
'test1.sql',
109+
'默认内容'
110+
);
111+
console.log('open', result);
89112
}
90113

91114
async function editor() {
@@ -123,9 +146,9 @@ const App = () => {
123146
const menuCick = (e) => {
124147
setCurrent(e.key);
125148
// 每次切换tab 打开对应的文件
126-
if(e.key === '1') {
127-
SQLPlugin.api.commands?.executeCommand('alex.sql.open', 'test_uri1/test.sql', '');
128-
}else {
149+
if (e.key === '1') {
150+
SQLPlugin.api.commands?.executeCommand('alex.sql.open', 'test_uri1/test.sql', '');
151+
} else {
129152
SQLPlugin.api.commands?.executeCommand('alex.sql.open', 'test_uri3/test.sql');
130153
}
131154
};
@@ -143,7 +166,6 @@ const App = () => {
143166
'editorBracketMatch.background': '#8AA7F8', // 选中括号的背景色
144167
'editor.selectionHighlightBackground': '#CBD4F2', // 已选中的其他内容的高亮颜色
145168
'editor.findMatchBackground': '#FFA011',
146-
147169
},
148170
rules: [
149171
{ token: '', foreground: '171617', background: 'EBEAEF' }, // 默认字体颜色,以及右侧 minimap 背景色
@@ -185,7 +207,6 @@ const App = () => {
185207
],
186208
};
187209

188-
189210
function initMonaco() {
190211
initMonacoTheme();
191212
createMonao();
@@ -198,14 +219,16 @@ const App = () => {
198219
}
199220

200221
function initMonacoLanguage() {
201-
const LanguageService = StandaloneServices.get(ILanguageService)
202-
LanguageService['_registry']['_registerLanguages']([{
203-
id: 'odc-sql'
204-
}])
222+
const LanguageService = StandaloneServices.get(ILanguageService);
223+
LanguageService['_registry']['_registerLanguages']([
224+
{
225+
id: 'odc-sql',
226+
},
227+
]);
205228
monaco.languages.registerCompletionItemProvider('odc-sql', {
206229
provideCompletionItems: (model, position, context, token) => {
207230
// TODO 关键词排序
208-
const suggestions = ['select','from'].map((key) => {
231+
const suggestions = ['select', 'from'].map((key) => {
209232
return {
210233
label: key,
211234
kind: monaco.languages.CompletionItemKind.Keyword,
@@ -225,7 +248,6 @@ const App = () => {
225248
});
226249
}
227250

228-
229251
function createMonao() {
230252
monaco.editor.create(document.getElementById('monaco') as HTMLElement, {
231253
language: 'odc-sql',
@@ -243,36 +265,34 @@ const App = () => {
243265
formatOnPaste: true,
244266
renderValidationDecorations: 'on',
245267
});
246-
247268
}
248269

249270
return (
250271
<div style={{ height: '100%', overflow: 'scroll' }}>
251272
<div style={{ height: '300px' }}>
252-
<Button onClick={() => format()}>格式化</Button>
253-
<Button onClick={() => addLine()}>添加行</Button>
254-
<Button onClick={async() => await openFile()}>打开文件</Button>
255-
<Button onClick={() => editor()}>获取当前内容</Button>
256-
<Button onClick={() => initMonaco()}>原生编辑器</Button>
273+
<Button onClick={() => format()}>格式化</Button>
274+
<Button onClick={() => format()}>格式化选中行</Button>
275+
<Button onClick={() => addLine()}>添加行</Button>
276+
<Button onClick={async () => await openFile()}>打开文件</Button>
277+
<Button onClick={() => editor()}>获取当前内容</Button>
278+
<Button onClick={() => initMonaco()}>原生编辑器</Button>
257279

258-
{/* <Button onClick={() => changeTables()}>change suggest Tables</Button> */}
259-
<Popover content={content} placement="top">
260-
<Button>设置</Button>
261-
</Popover>
262-
{/* <Button onClick={() => changeTables()}>change suggest Tables</Button> */}
263-
<Button onClick={() => window.reset()}>reset </Button>
264-
{/* <Button onClick={() => editorNumberUpdate()}>添加编辑器</Button> */}
265-
<Menu onClick={menuCick} selectedKeys={[current]} mode="horizontal" items={items} />
266-
<div style={{ display: `${current === '1' ? 'block' : 'none'}` }}>
267-
<SQLRender id={current} visible={current === '1'} />
268-
</div>
269-
<div style={{ display: `${current === '2' ? 'block' : 'none'}` }} >
270-
<SQLRender id={current} visible={current === '2'} />
271-
</div>
280+
{/* <Button onClick={() => changeTables()}>change suggest Tables</Button> */}
281+
<Popover content={content} placement="top">
282+
<Button>设置</Button>
283+
</Popover>
284+
{/* <Button onClick={() => changeTables()}>change suggest Tables</Button> */}
285+
<Button onClick={() => window.reset()}>reset </Button>
286+
{/* <Button onClick={() => editorNumberUpdate()}>添加编辑器</Button> */}
287+
<Menu onClick={menuCick} selectedKeys={[current]} mode="horizontal" items={items} />
288+
<div style={{ display: `${current === '1' ? 'block' : 'none'}` }}>
289+
<SQLRender id={current} visible={current === '1'} />
272290
</div>
273-
<div style={{ height: '300px', margin: '20px', border: '2px soldi' }} id="monaco">
274-
291+
<div style={{ display: `${current === '2' ? 'block' : 'none'}` }}>
292+
<SQLRender id={current} visible={current === '2'} />
275293
</div>
294+
</div>
295+
<div style={{ height: '300px', margin: '20px', border: '2px soldi' }} id="monaco"></div>
276296
</div>
277297
);
278298
};

‎packages/sql-service/src/contribution/sql-keybind.contribution.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
QUICK_OPEN_COMMANDS,
99
EDITOR_COMMANDS,
1010
Keybinding,
11+
KeybindingRegistryImpl,
1112
} from '@opensumi/ide-core-browser';
1213
import { WorkbenchEditorService } from '@opensumi/ide-editor';
1314
import { AppConfig, RuntimeConfig, WORKSPACE_ROOT } from '@alipay/alex-core';
@@ -99,6 +100,11 @@ export class SQLKeybindContribution
99100
keybindingList.forEach((binding) => {
100101
keybindings.unregisterKeybinding(binding);
101102
});
103+
keybindings.registerKeybinding({
104+
command: KeybindingRegistryImpl.PASSTHROUGH_PSEUDO_COMMAND,
105+
keybinding: 'ctrlcmd+f',
106+
when: '!editorFocus',
107+
})
102108
}
103109
registerMenus(menus: IMenuRegistry): void {
104110
// menus.unregisterMenuItem(MenuId.EditorContext, QUICK_OPEN_COMMANDS.OPEN.id);

‎packages/sql-service/src/contribution/sql-service.contribution.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -229,10 +229,10 @@ export class SqlServiceContribution
229229
);
230230

231231
// /** 选中内容格式化 */
232-
// monaco.languages.registerDocumentRangeFormattingEditProvider(
233-
// languageId,
234-
// new SQLGenericsFeatures.DocumentRangeFormattingEditAdapter(worker, options)
235-
// );
232+
monaco.languages.registerDocumentRangeFormattingEditProvider(
233+
languageId,
234+
new SQLGenericsFeatures.DocumentRangeFormattingEditAdapter(worker, options)
235+
);
236236
}
237237

238238
getWorkspaceRelativePath(uri: URI): string | null {

packages/sql-service/src/sql-generics/document-form-adapter.ts renamed to packages/sql-service/src/sql-generics/document-format-adapter.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import { transferFormatTextByCustomRules } from './utils/editor';
55
import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api'
66
class FormatterAdapter implements monaco.languages.DocumentFormattingEditProvider {
77
private options;
8-
8+
displayName= 'ODPS Formatter'
9+
extensionId = "odps-formatter"
910
constructor(private _worker: WorkerAccessor, options: CompletionProviderOptions) {
1011
this.options = options;
1112
}
12-
1313
provideDocumentFormattingEdits(
1414
model: monaco.editor.IReadOnlyModel,
1515
options: monaco.languages.FormattingOptions,

‎packages/sql-service/src/sql-generics/document-range-format-adapter.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { WorkerAccessor, CompletionProviderOptions } from '../types';
2+
import { wireCancellationToken } from './utils/promise';
3+
import {
4+
CancellationToken,
5+
Thenable,
6+
IRange,
7+
Range,
8+
} from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
9+
import { transferFormatTextByCustomRules } from './utils/editor';
10+
import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
11+
import * as ls from 'vscode-languageserver-types';
12+
13+
class DocumentRangeFormattingEditAdapter
14+
implements monaco.languages.DocumentRangeFormattingEditProvider {
15+
16+
displayName= 'ODPS Formatter'
17+
extensionId = "odps-formatter"
18+
private options;
19+
20+
constructor(private _worker: WorkerAccessor, options: CompletionProviderOptions) {
21+
this.options = options
22+
}
23+
24+
provideDocumentRangeFormattingEdits(model: monaco.editor.IReadOnlyModel, range: monaco.Range, option, token): Thenable<monaco.languages.TextEdit[]> {
25+
const startTime = Date.now();
26+
const resource = model.uri;
27+
28+
const document = model.getValueInRange(range);
29+
return wireCancellationToken(
30+
token,
31+
this._worker(resource)
32+
.then(worker => {
33+
return worker.format(resource.toString(), document,{});
34+
})
35+
.then(document => {
36+
// 格式化回调函数
37+
if (this.options?.onFormat) {
38+
this.options?.onFormat(document, {
39+
language: this.options.options.language,
40+
time: new Date().getTime() - startTime,
41+
})
42+
}
43+
return [{
44+
range,
45+
text: document
46+
}]
47+
}),
48+
);
49+
}
50+
}
51+
52+
export default DocumentRangeFormattingEditAdapter;

‎packages/sql-service/src/sql-generics/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import CompletionAdapter from './completion-adapter';
33
import DefinitionAdapter from './definition-adapter';
44
import DiagnosticsAdapter from './diagnostic-adapter';
55
import DocumentColorAdapter from './document-color-adapter';
6-
import DocumentFormattingEditAdapter from './document-form-adapter';
7-
// import DocumentRangeFormattingEditAdapter from './DocumentRangeFormattingEditAdapter';
6+
import DocumentFormattingEditAdapter from './document-format-adapter';
7+
import DocumentRangeFormattingEditAdapter from './document-range-format-adapter';
88
import HoverAdapter from './hover-adapter';
99
import SignatureHelpAdapter from './signature-help-adapter';
1010

@@ -16,7 +16,7 @@ export const SQLGenericsFeatures = {
1616
DiagnosticsAdapter,
1717
DocumentColorAdapter,
1818
DocumentFormattingEditAdapter,
19-
// DocumentRangeFormattingEditAdapter,
19+
DocumentRangeFormattingEditAdapter,
2020
HoverAdapter,
2121
SignatureHelpAdapter,
2222
}

0 commit comments

Comments
 (0)