npm package: @silly_yi/easy-sql-editor
Description: SQL editor with highlight, autocomplete and validation (jQuery wrapper).
Author: yijia
Latest version: 0.1.0

# @silly_yi/easy-sql-editor

SQL 编辑器组件：代码高亮、关键字提示、表/字段提示（支持异步回调）、自动语法校验并标记错误。容器/实例管理使用 jQuery。

![NPM Version](https://img.shields.io/npm/v/@silly_yi/easy-sql-editor)
![License](https://img.shields.io/npm/l/@silly_yi/easy-sql-editor)

## 安装

```bash
npm i @silly_yi/easy-sql-editor
```

要求：

- peerDependencies：`jquery >= 3`

## 快速开始（推荐：createEasySqlEditor）

```ts
import { createEasySqlEditor } from "@silly_yi/easy-sql-editor";

const editor = createEasySqlEditor("#sqlEditor", {
  dialect: "mysql",
  height: 280,
  placeholder: "请输入 SQL…",
  value: "SELECT * FROM user u WHERE u.",

  onRequestTables: async ({ prefix }) => {
    return ["user", "orders", "order_item"].filter((t) =>
      t.toLowerCase().startsWith(prefix.toLowerCase())
    );
  },

  onRequestFields: async ({ tableOrAlias, prefix }) => {
    if (tableOrAlias === "u" || tableOrAlias === "user") {
      return ["id", "name", "created_at"].filter((c) =>
        c.toLowerCase().startsWith(prefix.toLowerCase())
      );
    }
    return [];
  },

  onChange: (sql) => {
    console.log("changed:", sql);
  },

  onValidate: ({ valid, diagnostics }) => {
    console.log("valid:", valid, diagnostics);
  }
});

editor.focus();
```

## jQuery 插件用法（可选）

```ts
import { installEasySqlEditorJQueryPlugin } from "@silly_yi/easy-sql-editor";
import $ from "jquery";

installEasySqlEditorJQueryPlugin();

$("#sqlEditor").easySqlEditor({
  dialect: "postgres",
  height: 280
});

const editor = $("#sqlEditor").data("easySqlEditor");
console.log(editor?.getValue());
```

## 浏览器 script 标签用法（无打包器）

适用于直接在页面里用 `<script>` 引入（需要你自己引入 jQuery）。

```html
<div id="sqlEditor"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="./node_modules/@silly_yi/easy-sql-editor/dist/index.global.js"></script>
<script>
  const editor = window.EasySqlEditor.createEasySqlEditor("#sqlEditor", {
    dialect: "mssql",
    height: 280
  });
  editor.focus();
</script>
```

## API

### createEasySqlEditor(container, options)

- `container`: `string | HTMLElement | JQuery`
- `options`: `EasySqlEditorOptions`

返回：`EasySqlEditor` 实例。

### EasySqlEditor 实例方法

- `getValue()`：获取原始 SQL（多行，保留换行）
- `getValue({ singleLine: true })`：获取单行 SQL（把空白压成一个空格，便于粘贴到 Navicat）
- `setValue(value)`：设置 SQL
- `focus()`：聚焦
- `validate()`：手动触发一次校验并返回 `{ valid, diagnostics }`
- `destroy()`：销毁实例

## Options（EasySqlEditorOptions）

常用配置：

- `value?: string` 初始内容
- `dialect?: "mysql" | "postgres" | "sqlite" | "mssql" | "standard"`
- `readOnly?: boolean`
- `placeholder?: string`
- `height?: number | string`（如 `280` 或 `"300px"`）
- `minHeight?: number | string`
- `maxHeight?: number | string`
- `extraKeywords?: string[]` 额外关键字提示

提示回调（可同步返回或返回 Promise）：

- `onRequestTables?: (ctx) => string[] | Completion[] | Promise<(string|Completion)[]>`
  - `ctx.prefix`：当前已输入前缀
  - `ctx.sql`：全文 SQL
  - `ctx.pos`：光标位置
- `onRequestFields?: (ctx) => string[] | Completion[] | Promise<(string|Completion)[]>`
  - `ctx.tableOrAlias`：`u.` 中的 `u`
  - `ctx.prefix`：字段前缀
  - `ctx.sql` / `ctx.pos`

事件回调：

- `onChange?: (value: string) => void`
- `onValidate?: ({ valid, diagnostics }) => void`

## 语法校验说明

- 编辑过程中会自动校验，并在编辑器中用红色波浪线/左侧标记显示错误。
- `onValidate` 会在内容变化时被触发（有节流延迟），并在初始化时触发一次。
- `validate()` 可用于你在提交/保存前做一次手动校验。

## 本仓库本地运行示例

```bash
npm i
npm run build
npx http-server . -p 8089
```

打开：

- `http://127.0.0.1:8089/index.html`

## 发布到 npm（示例）

```bash
npm login
npm publish --access public
```