替换 Monaco 内置的图标

[HaydenOrz]

Why?

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

方案概述

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

字体图标风格

与monaco/vscode 的字体图标风格保持一致 https://code.visualstudio.com/api/references/icons-in-labels#icon-listing

字体图标表

类型	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

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- 为前缀的

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

[dcycurry]

@HaydenOrz 你好，我想提示column的信息，需要获取table的名称，要如何获取啊

[HaydenOrz]

与本 issue 无关，已新建issue #107

@dcycurry 有更多问题，请在新的issue 下评论

[wanyakun]

css覆盖使用svg可以先将content内容清空，再用background设置即可。比如：

.codicon-symbol-file:before {
  content: '' !important;
  width: 16px;
  height: 16px;
  background: url('../assets/svg/database.svg') no-repeat 0 0/16px 16px;
}

.codicon-symbol-class:before {
  content: '' !important;
  width: 16px;
  height: 16px;
  background: url('../assets/svg/table.svg') no-repeat 0 0/16px 16px;
}

.codicon-symbol-field:before {
  content: '' !important;
  width: 16px;
  height: 16px;
  background: url('../assets/svg/column.svg') no-repeat 0 0/16px 16px;
}

[apankun]

css覆盖使用svg可以先将content内容清空，再用background设置即可。比如：

.codicon-symbol-file:before {
  content: '' !important;
  width: 16px;
  height: 16px;
  background: url('../assets/svg/database.svg') no-repeat 0 0/16px 16px;
}

.codicon-symbol-class:before {
  content: '' !important;
  width: 16px;
  height: 16px;
  background: url('../assets/svg/table.svg') no-repeat 0 0/16px 16px;
}

.codicon-symbol-field:before {
  content: '' !important;
  width: 16px;
  height: 16px;
  background: url('../assets/svg/column.svg') no-repeat 0 0/16px 16px;
}

你好，我想请问下这种情况下如何判断这个svg是否被选中，需要改变颜色

[JackWang032]

@apankun 选中后的类名区分