当前位置: 首页 > news >正文

React富文本编辑器开发(九)位置

位置是指在使用Slate编辑器中进行插入、删除或执行其它操作时引用文档中特定位置的方式。有几种不同类型的位置接口,每种接口都用于不同的用例。

Path路径

路径是引用位置的最低级别的方法。每个路径都是一个简单的数字数组,它通过文档树下每个祖先节点中的索引来引用文档树中的一个节点。

type Path = number[]

例如,在文档中:

const editor = {children: [{type: 'paragraph',children: [{text: 'A line of text!',},],},],
}

叶子文本节点的路径为: [0, 0]。因为本文中只一个根节点,它又是根节点中的第一个节点,第一个节点中的第一个子节点。索引号都是从0开始的。
编辑器本身的路径为 []。 例如,若要选择编辑器的全部内容,请调用Transforms.select(editor, [])

Point插入点

这些路径的表述表具体,它包含了与特定文本节点的偏移量。它的接口标准为:

interface Point {path: Pathoffset: number
}

针对于同一个文档,如果我们想引用第一个起点位置,我们就可以把光标放在它下面:

const start = {path: [0, 0],offset: 0,
}

或如果我们引用句子的末尾:

const end = {path: [0, 0],offset: 15,
}

这就表示光标在文本节点的第15个字符位置处。

Range范围

范围就是选中的内容的范围,在表述上有起点和终点,起点可能在终点前面也可以在终点后面,因为我们可能会正向选择,或反向选择。其接口标准为:

interface Range {anchor: Pointfocus: Point
}

由一个锚点和一个焦点组成。都是Point类型。锚点是用户开始选择的位置,焦点是用户结束选择的位置。

注意,一个选择区域的锚点和焦点始终引用文档中的叶级文本节点,而从不引用元素。

Selection选择

当我们需要引用两点之间的内容范围时,Slate的API中的许多地方都使用了范围,不过,最常见的一种是用户当前的 “选择”。
选择是一个特殊的范围,是顶级编辑器的一个属性。例如,假设某人当前选择了整个句子:

const editor = {selection: {anchor: { path: [0, 0], offset: 0 },focus: { path: [0, 0], offset: 15 },},children: [{type: 'paragraph',children: [{text: 'A line of text!',},],},],
}

又假如,要查找包含所有当前选择的最低块,请执行以下操作:

function getCommonBlock(editor) {const range = Editor.unhangRange(editor, editor.selection, { voids: true })let [common, path] = SlateNode.common(editor,range.anchor.path,range.focus.path)if (Editor.isBlock(editor, common) || Editor.isEditor(common)) {return [common, path]} else {return Editor.above(editor, {at: path,match: n => Editor.isBlock(editor, n) || Editor.isEditor(n),})}
}

相关文章:

React富文本编辑器开发(九)位置

位置是指在使用Slate编辑器中进行插入、删除或执行其它操作时引用文档中特定位置的方式。有几种不同类型的位置接口,每种接口都用于不同的用例。 Path路径 路径是引用位置的最低级别的方法。每个路径都是一个简单的数字数组,它通过文档树下每个祖先节点…...

一次直播和图像识别技术应用的探索之旅

背景 Think Better 很多行业都在“卷”,作为金融科技行业的信也,也不例外。除了卷云计算、大数据和人工智能这些非常有深度的技术以外,信也向着技术融合创新的方向逐步探索,做得更好一些,为用户提供更好的价值&#xf…...

Ubuntu 下使用 Pybind11 实现 C++ 调用 Python 接口的示例

Pybind11 是一个轻量级的库,它提供了在 C 中无缝集成 Python 代码的能力。使用 Pybind11,你可以很容易地从 C 调用 Python 代码,反之亦然。下面我将通过一个简单的例子来展示如何在 Ubuntu 系统上使用 Pybind11 从 C 调用 Python 接口。 安装…...

docker安装和使用kafka

1. 启动zookeeper Kafka依赖zookeeper, 首先安装zookeeper -p:设置映射端口(默认2181) docker run --name zookeeper \--network app-tier \-e ALLOW_ANONYMOUS_LOGINyes \--restartalways \-d bitnami/zookeeper:latest2. 启动kafka docker…...

CTP-API开发系列之接口对接准备

CTP-API开发系列之接口对接准备 CTP-API开发系列之接口对接准备CTP-API文件清单CTP-API通用规则命名规则Spi与Api CTP-API通讯模式开发语言选择 CTP-API开发系列之接口对接准备 CTP-API文件清单 文件名说明ThostFtdcTraderApi.h交易接口,C头文件,包括 …...

C++小记 -链表

链表 文章目录 链表链表基础理论链表的类型单链表双链表循环链表 链表的存储方式链表的定义链表的操作添加节点删除节点 性能分析构建链表删除节点(内存泄漏的坑)1.直接移除2.使用虚拟头结点3.delete指针后,要将指针置为NULL!&…...

网络协议学习DAY1

1.网络协议模型: OSI协议模型 应用层 实际发送的数据 表示层 发送的数据是否加密 会话层 是否建立会话连接 传输层 数据传输的方式(数据报、流式) 网…...

vue3中全局变量的定义和获取

在vue项目中,我们知道vue2定义全局变量是在main.js文件将变量挂载到vue.prototype.name"lisi",在页面通过this.name去调用。但是在vue3中,这个定义全局变量有所改变: const app createApp(App) app.config.globalProp…...

1.2 数据模型 数据库系统概论

目录 1.2.1 两类数据模型 1.2.2 概念模型 1.信息世界中的基本概念 (1)实体 (2)属性 (3)码 (4)实体型 (5)实体集 (6)联系 2.…...

C#中openFileDialog 对话框不在最顶层,TopMost的异常情况

重点&#xff01;&#xff01;&#xff01;若 当前窗体this的TopMost是false&#xff0c;可以设置为true&#xff0c;这样打开的对话框就是最顶层 /// <summary> /// 设置窗体TopMost&#xff0c;缺点和其他程序ide有冲突。例如VS有断点的调试会卡死 /// </summary&g…...

信息安全与阿里云等保三级方案实践总结

信息安全在当今数字化时代变得至关重要&#xff0c;企业和组织需要采取有效措施来保护其数据和信息资产。阿里云作为中国领先的云服务提供商&#xff0c;提供了等保三级方案&#xff0c;帮助用户满足国家信息安全等级保护的要求。本文将探讨信息安全和阿里云等保三级方案的重要…...

嵌入式学习记录——线程

线程基本概念: 线程:线程是一个轻量级的进程,位于进程空间内部,一个进程中可以创建多个线程 1.线程创建: 线程独占栈空间,文本段、数据段和堆区与进程共享 2.线程调度: 与进程调度是一样的 宏观并行,微观串行 3.线程消亡: 与进程消亡是一样的 4.进程和线程…...

同步服务器操作系统公网仓库到本地 _ 统信UOS _ 麒麟KYLINOS

原文链接&#xff1a;同步服务器操作系统公网仓库到本地 | 统信UOS | 麒麟KYLINOS 在如今快速发展的信息技术时代&#xff0c;维护和更新服务器操作系统变得越来越重要。无论是为了提高安全性、增加新功能还是提升系统稳定性&#xff0c;同步公网源仓库到本地都是一个关键步骤。…...

【数仓】flume常见配置总结,以及示例

相关文章 【数仓】基本概念、知识普及、核心技术【数仓】数据分层概念以及相关逻辑【数仓】Hadoop软件安装及使用&#xff08;集群配置&#xff09;【数仓】Hadoop集群配置常用参数说明【数仓】zookeeper软件安装及集群配置【数仓】kafka软件安装及集群配置【数仓】flume软件安…...

统计信息锁定

在导入成功后我要收集下这些表的信息&#xff0c;结果发现好几张表都没法收集&#xff0c;用DBMS_STATS包显示ORA-20005&#xff1a;object statistics are locked (stattype ALL)&#xff0c;用Analyze命令显示ORA-38029&#xff1a; 对象统计信息已锁定。 解决办法很明确&a…...

光猫改为bridge模式

注意事项&#xff1a; 改成桥接模式后&#xff0c;光猫将不再拨号上网&#xff0c;建议提前记录自己的宽带账号&#xff0c;打10010申请修改自己的宽带密码。 光猫改好桥接之后&#xff0c;把宽带账号和密码输入到负责拨号上网的终端设备中&#xff0c;完成宽带PPPOE拨号设置。…...

回溯算法01-组合(Java)

1.组合 题目描述 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4]]示例 2&#xff1a; 输入&#x…...

初始网络 --- 网络基础

目录 0、 前言 1、 计算机网络发展背景 1.1. 局域网(LAN) && 广域网(WAN) 2、 认识并理解协议 3、 初始网络协议 3.1. 协议分层 4、 TCP/IP 五层(或四层)模型 4.1. 简单了解TCP/IP层状体系 4.2. TCP/IP协议层状结构和计算机层状结构的关系 5、 OSI七层模型 …...

在Linux/Ubuntu/Debian中计算MD5,SHA256的方法

MD5&#xff08;消息摘要算法 5&#xff09;和 SHA-256&#xff08;安全哈希算法 256 位&#xff09;等流行的哈希算法广泛用于从任意数据生成固定大小的哈希值或校验和。 以下是这些算法及其计算方式的简要概述&#xff1a; MD5&#xff08;消息摘要算法5&#xff09;&#x…...

mybatis mysql insert 主键id为空

错误示范 java代码设置了param参数&#xff0c;但是sql 字段没有带上参数&#xff0c;例如 void insertV2(Param("historyDO") HistoryDO historyDO); <insert id"insertDuplicate" parameterType"com.test.entity.HistoryDO"keyProperty&…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...