open-index/open-npm huggingface dataset:
npm package: @norlandsoft/air-design
Description: > 一组自定义的前端组件，集成了ant-design， semi-ui， rsuite-table等第三方组件
Author: eric.chai
Latest version: 0.1.6

# AirDesign
> 一组自定义的前端组件，集成了ant-design， semi-ui， rsuite-table等第三方组件
npm package: @norlandsoft/tide
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide

## 介绍

本包提供了 React 易于使用的编辑器组件。

## 安装

> 如果你不希望启用代码块的语法高亮功能，可以不安装 `highlight.js`。

```bash
npm install --save @norlandsoft/tide @norlandsoft/tide-starter-kit highlight.js
# or
yarn add @norlandsoft/tide @norlandsoft/tide-starter-kit highlight.js
# or
pnpm add @norlandsoft/tide @norlandsoft/tide-starter-kit highlight.js
```

## 使用

```tsx
import React, { useState } from 'react';
import { EditorRender, useEditor } from '@norlandsoft/tide';
import { StarterKit } from '@norlandsoft/tide-starter-kit';

import '@norlandsoft/tide/dist/style.css';
import 'highlight.js/styles/default.css';

function App() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '# Hello World!',
    onChange: (doc) => console.log('onChange', doc),
  });

  // Update editor content
  // editor.setContent('Changed content');

  return <EditorRender editor={editor} />;
}
```

如需自定义样式，可参考 `@norlandsoft/tide-theme/dist/variable.less` 中的 CSS Variables 进行覆盖。

## 配置

### useEditor Options

| 配置                 | 说明                     | 类型                                                     | 默认值  |
| -------------------- | ------------------------ | -------------------------------------------------------- | ------- |
| content              | 内容                     | `HTMLContent \| JSONContent \| JSONContent[] \| null`    | -       |
| autofocus            | 是否自动聚焦             | `'start' \| 'end' \| 'all' \| number \| boolean \| null` | `false` |
| editable             | 是否允许编辑             | `boolean`                                                | `true`  |
| fullscreen           | 是否全屏模式             | `boolean`                                                | `false` |
| readOnlyEmptyView    | 只读模式下无内容时的视图 | `ReactNode`                                              | `null`  |
| readOnlyShowMenu     | 只读模式下是否显示菜单栏 | `boolean`                                                | `false` |
| menuEnableUndoRedo   | 菜单栏是否启用撤销重做   | `boolean`                                                | `true`  |
| menuEnableFullscreen | 菜单栏是否启用全屏       | `boolean`                                                | `true`  |
| onFullscreenChange   | 全屏状态变更时的回调函数 | `(fullscreen: boolean) => void`                          | -       |
| onReady              | 初始化完成后的回调函数   | `(editor: TideEditor) => void`                           | -       |
| onChange             | 内容变更时的回调函数     | `(doc: JSONContent, editor: TideEditor) => void`         | -       |

更多配置可参考 `TideEditorOptions` 接口定义。

### EditorRenderProps

| 属性             | 说明                     | 类型            | 默认值 |
| ---------------- | ------------------------ | --------------- | ------ |
| className        | 容器自定义 `className`   | `string`        | -      |
| style            | 容器自定义 `style`       | `CSSProperties` | -      |
| menuClassName    | 菜单栏自定义 `className` | `string`        | -      |
| menuStyle        | 菜单栏自定义 `style`     | `CSSProperties` | -      |
| contentClassName | 内容区自定义 `className` | `string`        | -      |
| contentStyle     | 内容区自定义 `style`     | `CSSProperties` | -      |
npm package: @norlandsoft/tide-common
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-common

## 介绍

本包为编辑器提供常用的 `Command`、`Extension`、`Helpers`、`Input Rule` 等。

## 功能

### Extensions

- Commands
  - toggleList
  - sinkListItem
  - liftListItem
  - listBackspace
  - markLeftExit
- LowPriorityKeymap
- HighPriorityKeymap

### Helpers

- isActive
- isMarkActive
- isList
- isListItem
- joinListBackwards
- joinListForwards
- listBackspace
- transformer
- isWindows
- selectionInfo

### Input Rules

- textblockTypeInputRule
- wrappingInputRule
- wrapInListInputRule
npm package: @norlandsoft/tide-extension-blockquote
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-blockquote

## 介绍

本扩展可为编辑器启用「块引用」功能（类似于 HTML 标签 `<blockquote>`），一般用于引用其他来源的内容或注释。

## 功能

本扩展基于 `@tiptap/extension-blockquote` 修改了如下内容：

- 快捷键：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>.</kbd> 插入或取消块引用
- 输入规则：在行首输入 `> ` 或 `》 ` 快速创建块引用
- 粘贴规则：粘贴 `> 引文` 格式的内容，自动转换为块引用
npm package: @norlandsoft/tide-extension-bold
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-bold

## 介绍

本扩展可为文本添加**粗体**效果。

## 功能

本扩展基于 `@tiptap/extension-bold` 修改了如下内容：

- 输入规则：输入 `**text**` 或 `__text__` 且在后面输入 <kbd>空格</kbd> 时，自动转换为粗体文本
npm package: @norlandsoft/tide-extension-bullet-list
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-bullet-list

## 介绍

本扩展可为编辑器启用「无序列表」功能（类似于 HTML 标签 `<ul>`）。

## 功能

本扩展基于 `@tiptap/extension-bullet-list` 修改了如下内容：

- 输入规则：在行首输入 `- ` 或 `* ` 快速创建无序列表
- 若在创建无序列表项的前、后位置存在无序列表，将自动合并为一个无序列表
- 在 有序列表、任务列表 内，通过在 列表项 开头输入符合上述输入规则的内容，快速转换为 无序列表
npm package: @norlandsoft/tide-extension-code
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-code

## 介绍

本扩展可为编辑器启用「行内代码」功能（类似于 HTML 标签 `<code>`）。

## 功能

本扩展基于 `@tiptap/extension-code` 修改了如下内容：

- 输入规则：输入 <code>\`code\`</code> 或 `·code·` 且在后面输入 <kbd>空格</kbd> 时，自动转换为行内代码
- 快捷键：当「行内代码」位于行首时，在它的左侧按下 <kbd>←</kbd> 可退出行内代码。
npm package: @norlandsoft/tide-extension-code-block
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-code-block

## 介绍

本扩展可为编辑器启用「代码块」功能，一般用于输入多行代码。

## 功能

本扩展基于 `@tiptap/extension-code-block-lowlight` 修改了如下内容：

- 代码高亮
- 语言选择
- 自动换行
- 复制代码
- 选中多个段落文本后，可合并转换为一个代码块
- 在代码块内，可选中多行，通过 <kbd>Tab</kbd> 快捷键缩进
- 输入规则：输入 <code>\`\`\`</code>、`···`、`~~~`、`～～～` 且在后面输入 <kbd>空格</kbd> 或 <kbd>回车</kbd> 时，自动创建代码块。也可以在输入时指定语言，例如 <code>\`\`\`js</code> 将创建对应语言的代码块。

## 使用

本扩展使用 `highlight.js` 作为代码高亮库，因此需要安装 `highlight.js`，并引入其样式文件。

```bash
npm install --save @norlandsoft/tide-extension-code-block highlight.js
# or
yarn add @norlandsoft/tide-extension-code-block highlight.js
# or
pnpm add @norlandsoft/tide-extension-code-block highlight.js
```

在编辑器中启用本扩展：

```tsx
import React, { useState } from 'react';
import { EditorRender, JSONContent } from '@norlandsoft/tide';
import { CodeBlock } from '@norlandsoft/tide-extension-code-block';

import '@norlandsoft/tide/dist/style.css';
import 'highlight.js/styles/default.css';

function App() {
  const [value, setValue] = useState<JSONContent | null>(null);
  return (
    <EditorRender
      defaultValue={`\`\`\`js
console.log('Hello World!')
\`\`\``}
      onChange={(doc) => setValue(doc)}
      editorOptions={{
        extensions: [CodeBlockExtension],
      }}
    />
  );
}
```
npm package: @norlandsoft/tide-extension-emoji
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-emoji

## 介绍

本扩展可为编辑器启用「Emoji」功能，可以在文本中插入表情。

## 功能

- 提供表情面板：表情搜索、分类筛选、最近使用记录，支持键盘操作
- 支持使用 `:smile:` 语法输入表情
- 支持使用表情符号输入表情（如 `<3`）
- 支持使用图片渲染设备不支持的 Emoji 表情
- 支持自定义 Emoji 表情
npm package: @norlandsoft/tide-extension-horizontal-rule
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-horizontal-rule

## 介绍

本扩展可为编辑器启用「分割线」功能（类似于 HTML 标签 `<hr>`）。

## 功能

本扩展基于 `@tiptap/extension-horizontal-rule` 修改了如下内容：

- 快捷键：<kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>S</kbd> (Mac) 或 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>S</kbd> (Windows/Linux) 插入分割线
npm package: @norlandsoft/tide-extension-image
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-image

## 介绍

本扩展可为编辑器启用「图片」功能，可以插入图片块，支持缩放、对齐。

## 功能

- 支持使用 Markdown 语法 `![图片替代文本](图片地址 "图片标题")` 或 `![图片替代文本](图片地址)` 插入图片
- 支持对图片进行缩放操作
- 支持图片居左、居中、居右对齐
npm package: @norlandsoft/tide-extension-indentation
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-indentation

## 介绍

本扩展可为编辑器的 `node` 节点启用缩进功能，例如段落、标题。

## 功能

- 为指定类型的 `node` 增加缩进功能（默认为段落、标题）
- 支持限制最小、最大层级
- 快捷键支持：通过 <kbd>Tab</kbd> 增加缩进，通过 <kbd>Shift</kbd> + <kbd>Tab</kbd> 或 <kbd>Backspace</kbd> 减少缩进
npm package: @norlandsoft/tide-extension-italic
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-italic

## 介绍

本扩展可为文本添加*斜体*效果。

## 功能

本扩展基于 `@tiptap/extension-italic` 修改了如下内容：

- 输入规则：输入 `*text*` 或 `_text_` 且在后面输入 <kbd>空格</kbd> 时，自动转换为斜体文本
npm package: @norlandsoft/tide-extension-link
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-link

## 介绍

本扩展可为编辑器启用「链接」功能（类似于 HTML 标签 `<a>`），提供添加、修改、删除链接的界面。

## 功能

本扩展基于 `@tiptap/extension-link` 修改了如下内容：

- 提供添加、修改、删除链接的界面
- 支持使用 Markdown 语法 `[链接文本](链接地址)` 插入链接
- 支持使用快捷键 <kbd>Ctrl/Command</kbd> + <kbd>K</kbd> 插入或移除链接
npm package: @norlandsoft/tide-extension-list-item
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-list-item

## 介绍

本扩展可为编辑器启用「列表项」功能（类似于 HTML 标签 `<li>`），依赖 有序列表 或 无序列表 扩展。

## 功能

本扩展基于 `@tiptap/extension-list-item` 修改了如下内容：

- 指定 `group` 为 `listItem`，用于创建列表项时自动与前、后列表合并
npm package: @norlandsoft/tide-extension-lists-indentation
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-lists-indentation

## 介绍

本扩展用于为列表（有序列表、无序列表、任务列表）的列表项添加层级信息、列表符号类型。

## 功能

- 为列表项增加 `data-list-indent-level` 属性，用于表示列表项的层级信息
- 为列表项增加 `data-list-style-type` 属性，用于表示列表项的列表符号类型（实现不同层级的列表项使用不同的列表符号类型）
npm package: @norlandsoft/tide-extension-markdown
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-markdown

## 介绍

本扩展可为编辑器启用 Markdown 格式支持，基于 `tiptap-markdown` 开发。

## 功能

- 支持 Markdown 格式内容的输入、输出（`setContent()`、`getMarkdown()`）
- 支持粘贴 Markdown 格式的文本到编辑器
- 支持将编辑器的内容复制为 Markdown 格式的文本
npm package: @norlandsoft/tide-extension-mention
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-mention

## 介绍

本扩展可为编辑器启用「提及」功能，一般用于实现 `@user` 提及用户。

## 功能

本扩展基于 `@tiptap/extension-mention` 修改了如下内容：

- 提供提及列表通用组件 `MentionList`
- 提供工具方法快速创建 `SuggestionOptions` 配置
npm package: @norlandsoft/tide-extension-menubar
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-menubar

## 介绍

本扩展可为编辑器启用「菜单」功能，包括工具栏和气泡菜单。

## 功能

- 提供工具栏组件
- 提供常用功能的菜单按钮
- 提供自定义菜单按钮组件
- 提供文本气泡菜单组件（加粗、斜体、删除线、链接）
npm package: @norlandsoft/tide-extension-ordered-list
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-ordered-list

## 介绍

本扩展可为编辑器启用「有序列表」功能（类似于 HTML 标签 `<ol>`）。

## 功能

本扩展基于 `@tiptap/extension-ordered-list` 修改了如下内容：

- 输入规则：在行首输入 `1. `、`1) ` 或 `1） `（可以是任意数字）快速创建有序列表
- 若在创建有序列表项的前、后位置存在有序列表，将自动合并为一个有序列表
- 在 无序列表、任务列表 内，通过在 列表项 开头输入符合上述输入规则的内容，快速转换为 有序列表
npm package: @norlandsoft/tide-extension-strike
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-strike

## 介绍

本扩展可为文本添加~~删除线~~效果。

## 功能

本扩展基于 `@tiptap/extension-strike` 修改了如下内容：

- 输入规则：输入 `~~text~~` 或 `～～text～～` 且在后面输入 <kbd>空格</kbd> 时，自动转换为删除线文本
npm package: @norlandsoft/tide-extension-table
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-table

## 介绍

本扩展可为编辑器启用「表格」功能。

## 功能

本扩展基于 `@tiptap/extension-table` 修改了如下内容：

- 支持调整单元格列宽大小
- 支持插入或删除表格行、列
- 支持合并或拆分单元格
- 支持单元格内居左、居中、居右对齐
- 输入规则：输入 `||` 或 `｜｜`（两个竖线或以上，每多一个竖线表示多一列）快速创建表格
- 快捷键：
  - <kbd>←</kbd>、<kbd>→</kbd>、<kbd>↑</kbd>、<kbd>↓</kbd> 在表格内移动单元格光标
  - <kbd>Ctrl/Command</kbd> + <kbd>A</kbd> 选中光标所在单元格的内容，再按一次选中所在单元格，再按一次选中整个表格
npm package: @norlandsoft/tide-extension-task-item
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-task-item

## 介绍

本扩展用于渲染「任务列表」功能的列表项，有一个复选框表示选中状态，依赖 任务列表 扩展。

## 功能

本扩展参考 `@tiptap/extension-task-item` 重新实现了如下内容：

- 允许在只读模式下修改选中状态
- 输入规则：在行首输入 `[ ] `、`[x] `、`【 】 `、`【x】 ` 快速创建任务列表
- 粘贴规则：粘贴 `[ ] 文字` 或 `[x] 文字` 格式的内容，自动转换为任务列表项
- 若在创建任务列表项的前、后位置存在任务列表，将自动合并为一个任务列表
- 在 无序列表、有序列表 内，通过在 列表项 开头输入符合上述输入规则的内容，快速转换为 任务列表
npm package: @norlandsoft/tide-extension-uploader
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-extension-uploader

## 介绍

本扩展可为编辑器提供统一的文件上传功能，支持粘贴、拖拽、选择本地文件上传。

> 暂时仅支持上传图片类型的文件，后续将支持更多文件类型。

## 功能

- 提供粘贴、拖拽上传文件的功能
- 提供选择本地文件上传的功能（调用 `uploadImage` Command）
npm package: @norlandsoft/tide-react
Description: ## 介绍
Latest version: 0.0.6

# @norlandsoft/tide-react

## 介绍

本扩展是 `tiptap` 的 React 封装，用于在 React 中使用 `tiptap`。

> 本扩展是在 `@tiptap/react` 基础上，修复了 `Queue flushSync call` 问题，未来待官方更新后将移除本扩展。
>
> 相关链接：
>
> 1. [#3533 fix: Queue flushSync call](https://github.com/ueberdosis/tiptap/pull/3533)
> 2. [#4000 Destroy editor in safe](https://github.com/ueberdosis/tiptap/pull/4000)

## TODO

- [ ] 移除此包，直接使用官方包