Tittap 拼写检查器扩展

这是将拼写检查器整合到 倾斜 编辑.

扩展名本身不执行拼写检查器: 您必须传递它一个执行拼写检查器的校验对象 IProofreaderInterface 接口。 这个校验器可以在浏览器中局部工作,也可以调用在线服务,或者任何你想用作拼写检查服务的东西.

要求数 @tiptap/core ^3.0.1 已经安装在您的工程中 .

安装

使用 npm 安装依赖 :

npm install @farscrl/tiptap-extension-spellchecker

或使用pnpm:

pnpm add @farscrl/tiptap-extension-spellchecker

使用量

将扩展名包含在您的平面编辑器配置中 :

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import SpellcheckerExtension, { IProofreaderInterface, ITextWithPosition } from '@farscrl/tiptap-extension-spellchecker';

const myProofreader = new Proofreader(); // implementing IProofreaderInterface

new Editor({
    extensions: [
        StarterKit,
        SpellcheckerExtension.configure({
            proofreader: myProofreader,
            uiStrings: {
                noSuggestions: 'No suggestions found'
            }
        })
    ],
});

执行 IProofreaderInterface 插入您自己的拼写检查逻辑 :

interface ITextWithPosition {
    offset: number;
    length: number;
    word: string;
}

interface IProofreaderInterface {
    // find misspelled words in a sentence
    proofreadText(sentence: string): Promise<ITextWithPosition[]>;
    // return suggestions for a misspelled word
    getSuggestions(word: string): Promise<string[]>;
    // normalize text (e.g. strip accents/casing) before it's checked
    normalizeTextForLanguage(text: string): string;
}

配置选项

• 校对器 (必须): 执行 IProofreaderInterface 接口
• 用户串 (可选):用于扩展最小UI的字符串. 如果不提供,则使用默认字符串.
• 显示建议活动 (可选) : (word: string) => void 当建议框显示拼写错误的单词时, 调用回调

图标

扩展注册这些编辑器命令 :

• 检查Spelling (): 对整个文档重新运行拼写检查器
• 全部选择( E): 选择整个文档内容
• 副本( ): 将当前选择复制到剪贴板

editor.commands.checkSpelling();

样式

分机不载运任何CSS. 拼错的单词以 spell-error 分类,建议降级作为 #suggestions-box 包含 a 的元素 ul.suggestion-list ——您需要为两者添加自己的风格,否则扩展没有明显效果. 最低起点:

.spell-error {
    text-decoration: underline wavy red;
}

#suggestions-box {
    position: absolute;
    border: 1px solid black;
    background-color: #f7f7f7;
    border-radius: 4px;
}

#suggestions-box ul {
    padding: 2px 4px;
    margin: 0;
    display: inline-block;
}

#suggestions-box li {
    cursor: pointer;
    list-style: none;
}

见 demo/src/css.css 一个更完整的例子.

演示

可在 demo 文件夹 : 使用本地、 浏览器词典( i)local),一名呼叫一个以洪斯佩尔为基地的检查员(hunspell) (中文(简体) ). 要运行他们:

# Clone the repository
git clone https://github.com/farscrl/tiptap-extension-spellchecker.git
cd tiptap-extension-spellchecker

# Install dependencies
pnpm install

# Build the extension
pnpm run build

# Run the demo
cd demo
pnpm install
pnpm start

演示将在您的浏览器中打开, 显示正在操作的拼写检查器 .

发展

大楼

构建类型脚本来源 :

pnpm run build

测试

运行测试套件 :

pnpm run test

线性

检查代码质量 :

pnpm run lint

出版

要发布新版本 :

1. 弹出 version 内 package.json。 。 。 .
2. 为新版本添加一个日期条目 CHANGELOG.md。 。 。 .
3. 提交两个文件为 chore: prepare version X.Y.Z。 。 。 .
4. 输入的标记 : git tag vX.Y.Z 推着它: git push --tags。 。 。 .
5. 运行 npm publish (单位:千美元) prepare 脚本构建 lib/ 发布前自动).

贷项

此扩展来自 提示语言工具 扩展名.

许可证

麻省理工学院