DTStack / DTStack/monaco-sql-languages

替换 Monaco 内置的图标

Abierto
#105 5 comentarios 2 reacciones 1 asignado Reclamado por @liuxy0551 Ver en GitHub
new features
Lenguaje dominante
TypeScript
Estrellas
295
Forks
50
Merge medio
1 h 21 min
PR fusionados (30 d)
1

Descripción

## Why?
monaco-sql-languages 支持的 language 都是各种 SQL,与之对应的就会有许多符号/icon是SQL语言特有的,比如 database 、table 等,而monaco 内置并不支持这些符号/icon,目前自动补全项左侧的 icon 问题尤为明显:

![image](https://github.com/DTStack/monaco-sql-languages/assets/58289241/ad0d55ec-eab0-43d5-b08c-2a4d4358a108)

## 方案概述
1. 制作自动补全项对应的 iconfont
2. 新增 css 文件,覆盖monaco 内置的字体图标

## 字体图标风格
与monaco/vscode 的字体图标风格保持一致 https://code.visualstudio.com/api/references/icons-in-labels#icon-listing
![image](https://github.com/DTStack/monaco-sql-languages/assets/58289241/5ad00f63-92c9-4bf7-bff6-d22a48dfff1c)

## 字体图标表

类型 | icon name
-- | --
keyword 关键字 | symbol-keyword
Snippet 代码片段 | symbol-snippet
catalog | symbol-catalog
database/schema 数据库 | symbol-database
table 表 | symbol-table
view 视图 | symbol-view
column 字段 | symbol-column
function 函数 | symbol-function
procedure 存储过程 | symbol-procedure

## SQL 补全项类型与 monaco 内置的 CompletionItemKind 映射表
自动补全项左侧会根据不同的自动补全项的 `CompletionItemKind` 属性显示不同的 icon,但是内置的类型并不能覆盖所有的 SQL 补全项类型,比如 table、database 等,所以需要一个类型映射

类型 | CompletionItemKind
-- | --
keyword 关键字 | CompletionItemKind.Keyword
Snippet 代码片段 | CompletionItemKind.Snippet
catalog | CompletionItemKind.Folder
database/schema 数据库 | CompletionItemKind.File
table 表 | CompletionItemKind.Class
view 视图 | CompletionItemKind.Interface
column 字段 | CompletionItemKind.Field
function 函数 | CompletionItemKind.Function
procedure 存储过程 | CompletionItemKind.Constructor

同时,monaco-sql-languages 需要新增公开的辅助方法,用于将 dt-sql-parser 中的 实体类型(`EntityContextType`/ `SyntaxContextType` )转换为 `CompletionItemKind`

```typescript
import { SyntaxContextType } from 'dt-sql-parser';
import { languages } from 'monaco-editor/esm/vs/editor/editor.api';

export function toCompletionItemKind(type: SyntaxContextType): languages.CompletionItemKind {
switch(type) {
case SyntaxContextType.CATALOG:
return languages.CompletionItemKind.Folder;
case SyntaxContextType.DATABASE:
return languages.CompletionItemKind.File;
// ...
default:
return languages.CompletionItemKind.Text;
}
}
```

## 覆盖 icon 的 css 文件参考
每一种类型对应的icon 类名格式为: `.codicon-${built-in-icon-name}`

内置的 icon 名称看这里: https://code.visualstudio.com/api/references/icons-in-labels#icon-listing

自动补全项的icon名称都是以 `symbol-` 为前缀的

```css
.codicon-symbol-text:before {
content: '\eb01';
}
.codicon-symbol-function:before {
content: '\eb02';
}
.codicon-symbol-folder:before {
content: '\eb03';
}
.codicon-symbol-field:before {
content: '\eb04';
}
```

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.