在数字化时代，高效的工具和插件无疑是提升工作效率的关键。今天，我要分享一个真实的开发经历——如何为TiPTap编辑器创建自定义插件。如果你对开源项目感兴趣，不妨给我点个星，感谢支持！

开源项目：Documind协同文档

Documind是一个支持实时聊天的协同文档编辑器，它不仅提供了强大的功能，还积极接入各种优秀的项目和技术。为了进一步提升用户体验，我决定为Documind开发两个自定义插件：font-size和line-height。

字体大小插件：fontSize

首先，我们来看一下fontSize插件的实现。这个插件允许用户通过setFontSize和unsetFontSize命令来设置和重置TiPTap编辑器的字体大小。

import { Extension } from "@tiptap/core";
import "@tiptap/extension-text-style";

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    fontSize: {
      setFontSize: (fontSize: string) => ReturnType;
      unsetFontSize: () => ReturnType;
    };
  }
}

const fontSizeExtension = Extension.create({
  name: "fontSize",
  addOptions() {
    return {
      types: ["textStyle"],
    };
  },
  addGlobalAttributes() {
    return [
      {
        types: this.options.types,
        attributes: {
          fontSize: {
            default: null,
            parseHTML: (element) => element.style.fontSize,
            renderHTML: (attributes) => {
              if (!attributes.fontSize) {
                return {};
              }
              return { style: `font-size:${attributes.fontSize};` };
            },
          },
        },
      },
    ];
  },
  addCommands() {
    return {
      setFontSize: (fontSize) => ({
        chain: () => {
          return chain()
            .setMark("textStyle", { fontSize })
            .run();
        },
      }),
      unsetFontSize: () => ({
        chain: () => {
          return chain()
            .setMark("textStyle", { fontSize: null })
            .run();
        },
      }),
    };
  },
});

行高插件：line-height

接下来，我们来看看line-height插件的实现。这个插件允许用户通过setLineHeight和unsetLineHeight命令来设置和重置TiPTap编辑器的行高。

import { Extension } from "@tiptap/core";

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    lineHeight: {
      setLineHeight: (lineHeight) => ReturnType;
      unsetLineHeight: () => ReturnType;
    };
  }
}

const lineHeightExtension = Extension.create({
  name: "lineHeight",
  addOptions() {
    return {
      types: ["paragraph", "heading"],
      defaultLineHeight: null,
    };
  },
  addGlobalAttributes() {
    return [
      {
        types: this.options.types,
        attributes: {
          lineHeight: {
            default: this.options.defaultLineHeight,
            parseHTML: (element) => element.style.lineHeight || this.options.defaultLineHeight,
            renderHTML: (attributes) => {
              if (!attributes.lineHeight) {
                return {};
              }
              return { style: `line-height:${attributes.lineHeight};` };
            },
          },
        },
      },
    ];
  },
  addCommands() {
    return {
      setLineHeight: (lineHeight) => ({
        tr, state, dispatch }) => {
          tr = tr.setSelection(state.selection);
          return chain()
            .setNodeMarkup(pos, undefined, {
              ...node.attrs,
              lineHeight,
            })
            .run();
        },
      }),
      unsetLineHeight: () => ({
        tr, state, dispatch }) => {
          tr = tr.setSelection(state.selection);
          return chain()
            .setNodeMarkup(pos, undefined, {
              ...node.attrs,
              lineHeight: this.options.defaultLineHeight,
            })
            .run();
        },
      },
    };
  },
});

使用案例

假设我们已经将这两个插件添加到Documind中，我们可以通过以下方式激活它们：

import Documind from "documind";

const documind = new Documind({
  extensions: [
    fontSizeExtension.configure({ types: ["textStyle"] }),
    lineHeightExtension.configure({ types: ["paragraph", "heading"], defaultLineHeight: "1.5" }),
  ],
});

// 设置字体大小为1.2rem
documind.executeCommand("fontSize", { fontSize: "1.2rem" });

// 设置行高为24px
documind.executeCommand("lineHeight", { lineHeight: "24px" });

通过这些自定义插件，用户可以更加灵活地控制文档的显示效果，提升编辑体验。

结语

开源项目不仅是技术的展示，更是社区合作的成果。如果你对TiPTap或Documind感兴趣，欢迎加入我们的社区，一起探索更多可能性。感谢阅读，希望这篇文章能给你带来启发和帮助！