自定义tiptap插件

本文为开发开源项目的真实开发经历,感兴趣的可以来给我的项目点个star,谢谢啦~

具体博文介绍:
开源|Documind协同文档(接入deepseek-r1、支持实时聊天)Documind 🚀 一个支持实时聊天和接入 - 掘金

我干了什么

我定义了两个插件:

  • font-size:支持通过setFontSize设置tiptap编辑器字体大小,通过unsetFontSize重置为默认大小。
  • line-height:支持通过设置setLineHeight设置tiptap编辑器行高,通过unsetLineHeight重置为默认行高。

源码参考

这里就不一点一点讲解了,注释看不懂的话可以叫AI帮你解析。

font-size插件:
import { Extension } from "@tiptap/core";
import "@tiptap/extension-text-style";// 声明类型
declare module "@tiptap/core" {interface Commands<ReturnType> {fontSize: {/** 设置字体大小(支持CSS单位如12px/1.2rem等) */setFontSize: (fontSize: string) => ReturnType;/** 清除字体大小设置 */unsetFontSize: () => ReturnType;};}
}// 创建扩展
export const FontSizeExtension = Extension.create({name: "fontSize",// 扩展配置项addOptions() {return {types: ["textStyle"], // 作用对象为文本样式标记};},// 注册全局属性addGlobalAttributes() {return [{types: this.options.types, // 应用范围(textStyle类型)attributes: {fontSize: {default: null, // 默认无字体大小// 从DOM解析字体大小(读取style属性)parseHTML: (element) => element.style.fontSize,// 渲染到DOM时生成样式renderHTML: (attributes) => {if (!attributes.fontSize) {return {}; // 无设置时返回空对象}return {style: `font-size: ${attributes.fontSize};`, // 生成内联样式};},},},},];},// 注册编辑器命令addCommands() {return {/** 设置字体大小命令 */setFontSize:(fontSize: string) =>({ chain }) => {return chain().setMark("textStyle", { fontSize }) // 更新文本样式标记.run();},/** 清除字体大小命令 */unsetFontSize:() =>({ chain }) => {return chain().setMark("textStyle", { fontSize: null }) // 清除字体大小属性.removeEmptyTextStyle() // 移除空文本样式标记.run();},};},
});
line-height插件:
import { Extension } from "@tiptap/core";// 类型声明:扩展Tiptap的命令接口
declare module "@tiptap/core" {interface Commands<ReturnType> {lineHeight: {/** 设置行高(支持CSS单位如1.5/2/24px等) */setLineHeight: (lineHeight: string) => ReturnType;/** 重置为默认行高 */unsetLineHeight: () => ReturnType;};}
}export const LineHeightExtension = Extension.create({name: "lineHeight",// 扩展配置项addOptions() {return {types: ["paragraph", "heading"], // 应用行高样式的节点类型defaultLineHeight: null, // 默认行高(null表示不设置)};},// 添加全局属性处理addGlobalAttributes() {return [{types: this.options.types, // 应用到的节点类型attributes: {lineHeight: {// 默认值(从配置项获取)default: this.options.defaultLineHeight,// 渲染到HTML时的处理renderHTML: (attributes) => {if (!attributes.lineHeight) {return {};}// 将行高转换为行内样式return {style: `line-height: ${attributes.lineHeight};`,};},// 从HTML解析时的处理parseHTML: (element) => {return {// 获取行高样式或使用默认值lineHeight: element.style.lineHeight || this.options.defaultLineHeight,};},},},},];},// 添加自定义命令addCommands() {return {setLineHeight:(lineHeight) =>({ tr, state, dispatch }) => {// 创建事务副本以保持不可变性tr = tr.setSelection(state.selection);// 遍历选区内的所有节点state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {// 只处理配置的类型节点if (this.options.types.includes(node.type.name)) {tr = tr.setNodeMarkup(pos, undefined, {...node.attrs,lineHeight, // 更新行高属性});}});// 提交事务更新if (dispatch) {dispatch(tr);}return true;},unsetLineHeight:() =>({ tr, state, dispatch }) => {tr = tr.setSelection(state.selection);// 遍历选区节点重置行高state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {if (this.options.types.includes(node.type.name)) {tr = tr.setNodeMarkup(pos, undefined, {...node.attrs,lineHeight: this.options.defaultLineHeight, // 重置为默认值});}});if (dispatch) {dispatch(tr);}return true;},};},
});

使用案例

首先我们在extensions中添加扩展以激活

extensions: [/*......*/FontSizeExtension,LineHeightExtension.configure({types: ["paragraph", "heading"],}),/*......*/
];

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/33932.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件测试之测试分类

1. 为什么要对软件测试进行分类 软件测试是软件⽣命周期中的⼀个重要环节&#xff0c;具有较⾼的复杂性&#xff0c;对于软件测试&#xff0c;可以从不同的⻆度 加以分类&#xff0c;使开发者在软件开发过程中的不同层次、不同阶段对测试⼯作进⾏更好的执⾏和管理测试 的分类⽅…

Devops CI/CD

Devops CI/CD DevOps 中的 CI/CD&#xff1a;持续集成与持续部署的深度解析一、CI/CD 基本概念&#xff08;一&#xff09;持续集成&#xff08;二&#xff09;持续部署 二、CI/CD 实施步骤&#xff08;一&#xff09;版本控制&#xff08;二&#xff09;自动化构建&#xff08…

leetcode105为什么可以root.left可以截取到前序遍历二叉树的(0,index),而不是(1,index+1)

这里以105前序和中序遍历构造二叉树为例&#xff0c;106同理 原因在于preoder.shift()会改变原数组&#xff0c;已经把preoder的第一个队头元素已经排除出去了&#xff01;&#xff01;&#xff01; 306题中的截取后续遍历中用pop&#xff08;&#xff09;同理

数据结构---堆栈和列

一、堆栈 1.栈堆&#xff1a;具有一定操作约束的线性表&#xff1b;&#xff08;只在一端做插入删除&#xff09; 2.栈的顺序存储结构&#xff1a; 由一个一维数组和一个记录栈顶元素位置的变量组成。定义方式如下&#xff1a; 3.入栈操作&#xff1a; 注意&#xff1a;&…

golang快速上手基础语法

变量 第一种&#xff0c;指定变量类型&#xff0c;声明后若不赋值&#xff0c;使用默认值0 package mainimport "fmt"func main() {var a int //第一种&#xff0c;指定变量类型&#xff0c;声明后若不赋值&#xff0c;使用默认值0。fmt.Printf(" a %d\n"…

【idea代码ai插件】利用接入硅基流动的deepseekR1的api在idea里实现问答,辅助写代码

注册硅基流动账号 https://siliconflow.cn/zh-cn/ 然后新建api密钥&#xff0c;这里的api密钥可以点击复制&#xff0c;等会输入要用 可以看到现在新注册是有额度的&#xff0c;你们应该是14元 模型广场这里可以调用deepseek的v3和r1&#xff0c;注意因为是蹭&#xff0c;赠…

NO.42十六届蓝桥杯备战|数据结构|算法|时间复杂度|空间复杂度|STL(C++)

数据结构 什么是数据结构 在计算机科学中&#xff0c;数据结构是⼀种数据组织、管理和存储的格式。它是相互之间存在⼀种或多种特定关系的数据元素的集合。 说点通俗易懂的话&#xff0c;数据结构就是数据的组织形式&#xff0c;研究的就是把数据按照何种形式存储在计算机中 …

【CSS3】化神篇

目录 平面转换平移旋转改变旋转原点多重转换缩放倾斜 渐变线性渐变径向渐变 空间转换平移视距旋转立体呈现缩放 动画使现步骤animation 复合属性animation 属性拆分逐帧动画多组动画 平面转换 作用&#xff1a;为元素添加动态效果&#xff0c;一般与过渡配合使用 概念&#x…

Keepalived高可用架构实战:从安装配置到高级应用详解

一.架构 用户空间核心组件&#xff1a; vrrp stack&#xff1a;VIP 消息通信checkers&#xff1a;监测 Real Serversystem call&#xff1a;实现 vrrp 协议状态转换时调用相关本地功能SMTP&#xff1a;邮件组件IPVS wrapper&#xff1a;生成 IPVS 规则Netlink Reflector&…

Linux:利用System V系列的-共享内存,消息队列实现进程间通信

对于管道的进程间通信方式&#xff0c;需要频繁的调用系统调用(read,write)。而我们今天首先要介绍的共享内存&#xff0c;在开辟好空间之后&#xff0c;便可以跳过系统调用&#xff0c;直接进行读写操作。 一.System V共享内存(主要) 共享内存区是最快的IPC形式。一旦这样的内…

不像人做的题————十四届蓝桥杯省赛真题解析(上)A,B,C,D题解析

题目A&#xff1a;日期统计 思路分析&#xff1a; 本题的题目比较繁琐&#xff0c;我们采用暴力加DFS剪枝的方式去做&#xff0c;我们在DFS中按照8位日期的每一个位的要求进行初步剪枝找出所有的八位子串&#xff0c;但是还是会存在19月的情况&#xff0c;为此还需要在CHECK函数…

宇树人形机器人开源模型

1. 下载源码 https://github.com/unitreerobotics/unitree_ros.git2. 启动Gazebo roslaunch h1_description gazebo.launch3. 仿真效果 H1 GO2 B2 Laikago Z1 4. VMware: vmw_ioctl_command error Invalid argument 这个错误通常出现在虚拟机环境中运行需要OpenGL支持的应用…

【C/C++算法】从浅到深学习--- 前缀和算法(图文兼备 + 源码详解)

绪论&#xff1a;冲击蓝桥杯一起加油&#xff01;&#xff01; 每日激励&#xff1a;“不设限和自我肯定的心态&#xff1a;I can do all things。 — Stephen Curry” 绪论​&#xff1a; 本章将使用八道题由浅到深的带你了解并基本掌握前缀和思想&#xff0c;以及前缀和的基…

脑电:时域分析(任务态)

时域分析&#xff1a;时间序列&#xff08;时域信号&#xff09; EEG和ERP都是时间序列 ERP&#xff1a;事件诱发的电位是随着时间变化 组水平&#xff1a;需要这一组的个体不能差异性太大。 提值的指标&#xff0c;选取平均幅值确定成分的显著情况 mean(EEG.data,3): 在第…

【C语言】自定义类型:结构体,联合,枚举(下)

前言&#xff1b;上一期我们侧重讲了一个非常重要的自定义类型结构体&#xff0c;这一期我们来说说另外两种自定义类型&#xff1a;联合&#xff0c;和枚举。 传送门&#xff1a;自定义类型&#xff1a;结构体&#xff0c;联合&#xff0c;枚举(上) 文章目录 一&#xff0c;联…

数组的介绍

1.数组的概念 数组是一组相同类型元素的集合&#xff0c;从这个描述中我们知道&#xff1a; 数组中存放1个或多个数据&#xff0c;但是数组的元素个数不为0。数组中存放的多个数据&#xff0c;类型是相同的。 数组分为一维数组和多维数组&#xff0c;多维数组一般比较多见的…

蓝桥杯 17110抓娃娃

问题描述 小明拿了 n 条线段练习抓娃娃。他将所有线段铺在数轴上&#xff0c;第 i 条线段的左端点在 li&#xff0c;右端点在 ri​。小明用 m 个区间去框这些线段&#xff0c;第 i个区间的范围是 [Li​, Ri​]。如果一个线段有 至少一半 的长度被包含在某个区间内&#xff0c;…

linux ptrace 图文详解(二) PTRACE_TRACEME 跟踪程序

目录 一、基础介绍 二、PTRACE_TRACE 实现原理 三、代码实现 四、总结 &#xff08;代码&#xff1a;linux 6.3.1&#xff0c;架构&#xff1a;arm64&#xff09; One look is worth a thousand words. —— Tess Flanders 一、基础介绍 GDB&#xff08;GNU Debugger&…

记录致远OA服务器硬盘升级过程

前言 日常使用中OA系统突然卡死&#xff0c;刷新访问进不去系统&#xff0c;ping服务器地址正常&#xff0c;立马登录服务器检查&#xff0c;一看磁盘爆了。 我大脑直接萎缩了&#xff0c;谁家OA系统配400G的空间啊&#xff0c;过我手的服务器没有50也是30台&#xff0c;还是…

电网电压暂态扰动机理与工业设备抗失压防护策略研究

什么是晃电&#xff1f; 国标GB/T 30137-2013 中定义:工频电压方均根值突然降至额定值的90%~10%&#xff0c;持续时间为10ms~1min后恢复正常的现象。Acrel8757V 晃电的原因 1.系统侧因素 短路故障&#xff1a;雷击、线路接地、设备误碰等导致电网短路&#xff0c;故障点电压…