canvas-editor首行缩进

news2024/10/23 18:17:01

canvas-editor中渲染部分的源码都在Draw.ts里,能找到computeRowList方法中并没有实现首行缩进相关的逻辑,但是实现了element.type === ElementType.TAB的缩进,如图:canvas-editor源码-Tab缩进
因此我们可以基于tab进行首行缩进的逻辑编写,在main.ts末尾(初始化脚本内部)添加如下内容:

  // 段落首行缩进按钮
  const indentParagraphsDom = document.querySelector<HTMLDivElement>(
    '.menu-item__indent-paragraphs'
  )!
  indentParagraphsDom.onclick = function () {
    console.log('indent paragraphs')
    const data = instance.command.getValue()
    console.log('data: ', data)
    // 插入tab符
    const tabElement: IElement = {
      type: ElementType.TAB,
      value: ''
    }
    if (data && data.data && Array.isArray(data.data.main)) {
      const newMain = data.data.main.flatMap(item => {
        // 检查是否为段落(不是标题或换行符)
        if (
          typeof item === 'object' &&
          !item.type &&
          typeof item.value === 'string' &&
          item.value.trim() !== '' &&
          item.value !== '\n'
        ) {
          // 如果是段落,在前面插入制表符对象
          return [tabElement,
            item
          ]
        }
        return [item]
      })
      const fixedData = { ...data.data, main: newMain }
      console.log('fixedData: ', fixedData)
      // 更新编辑器内容
      instance.command.executeSetValue(fixedData)
    }
    const newdata = instance.command.getValue()
    console.log('newdata: ', newdata)
  }

我们就可以用一个按钮来直接控制全文正文部分进行首行缩进
在这里插入图片描述
更进一步的,如果想要一键切换缩进/不缩进可以这样写:

// 段落首行缩进按钮
const indentParagraphsDom = document.querySelector<HTMLDivElement>(
  '.menu-item__indent-paragraphs'
)!
indentParagraphsDom.onclick = function () {
  console.log('indent paragraphs')
  const data = instance.command.getValue()
  console.log('data: ', data)
  
  if (data && data.data && Array.isArray(data.data.main)) {
    let shouldRemoveTabs = false
    const newMain: IElement[] = []
    
    // 检查是否存在制表符
    shouldRemoveTabs = data.data.main.some((item, index) => 
      item.type === ElementType.TAB && 
      index + 1 < data.data.main.length && 
      typeof data.data.main[index + 1] === 'object' &&
      !data.data.main[index + 1].type &&
      typeof data.data.main[index + 1].value === 'string' &&
      data.data.main[index + 1].value.trim() !== '' &&
      data.data.main[index + 1].value !== '\n'
    )
    
    console.log('shouldRemoveTabs:', shouldRemoveTabs)

    for (let i = 0; i < data.data.main.length; i++) {
      const item = data.data.main[i]
      if (shouldRemoveTabs) {
        // 移除制表符
        if (item.type !== ElementType.TAB) {
          newMain.push(item)
        }
      } else {
        // 添加制表符
        if (typeof item === 'object' &&
            !item.type &&
            typeof item.value === 'string' &&
            item.value.trim() !== '' &&
            item.value !== '\n') {
          // 如果是段落,在前面添加制表符
          if (i === 0 || data.data.main[i-1].type !== ElementType.TAB) {
            newMain.push({ type: ElementType.TAB, value: '' })
          }
        }
        newMain.push(item)
      }
    }
    
    const fixedData = { ...data.data, main: newMain }
    console.log('fixedData: ', fixedData)
    // 更新编辑器内容
    instance.command.executeSetValue(fixedData)
  }
  const newdata = instance.command.getValue()
  console.log('newdata: ', newdata)
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

通过DevTools逃离Chrome沙盒(CVE-2024-6778和CVE-2024-5836)

介绍 这篇博文详细介绍了如何发现CVE-2024-6778和CVE-2024-5836的&#xff0c;这是Chromium web浏览器中的漏洞&#xff0c;允许从浏览器扩展&#xff08;带有一点点用户交互&#xff09;中进行沙盒逃逸。 简而言之&#xff0c;这些漏洞允许恶意的Chrome扩展在你的电脑上运行…

2015年-2017年 计算机技术专业 程序设计题(算法题)实战_c语言程序设计数据结构程序设计分析

文章目录 20151.C语言算法设计部分2.数据结构算法设计部分 20161.C语言算法设计部分2.数据结构算法设计部分 2017年1. C语言算法设计部分2.数据结构算法设计部分 2015 1.C语言算法设计部分 int total(int n) {if(n1) return 1;return total(n-1)n1; } //主函数测试代码已省略…

Android 15 推出新安全功能以保护敏感数据

Android 15 带来了增强的安全功能&#xff0c;可保护您的敏感健康、财务和个人数据免遭盗窃和欺诈。 它还为大屏幕设备带来了生产力改进&#xff0c;并对相机、消息和密钥等应用进行了更新。 Android 防盗保护 Google 开发并严格测试了一套全面的功能&#xff0c;以在盗窃之…

Ubuntu22.04 制作系统ISO镜像

第一步&#xff1a;安装软件-Systemback 1.如果已经添加过ppa&#xff0c;可以删除重新添加或者跳过此步 sudo add-apt-repository --remove ppa:nemh/systemback 2.添加ppa 我是ubuntu20&#xff0c;但这个软件最后支持的是 ubuntu16.04版本&#xff0c;所以加一个16版本…

【Docker】Harbor 私有仓库和管理

目录 一、搭建本地私有仓库 二、harbor简介&#xff08;特性、构成、架构的数据流向&#xff09; 2.1 什么是Harbor 2.2 Harbor的特性 2.3 Harbor的构成 2.4 Harbor的工作原理&#xff08;运行流程&#xff09; 三、harbor部署以及配置文件 1. 部署 Docker-Compose 服…

2010年国赛高教杯数学建模B题上海世博会影响力的定量评估解题全过程文档及程序

2010年国赛高教杯数学建模 B题 上海世博会影响力的定量评估 2010年上海世博会是首次在中国举办的世界博览会。从1851年伦敦的“万国工业博览会”开始&#xff0c;世博会正日益成为各国人民交流历史文化、展示科技成果、体现合作精神、展望未来发展等的重要舞台。请你们选择感兴…

Hadoop生态圈三大组件:HDFS的读写流程、MapReduce计算流程、Yarn资源调度

文章目录 1. HDFS的读写流程1.1 HDFS读流程1.2 HDFS写流程 2. MapReduce计算流程3. Yarn资源调度一、客户端请求资源二、Resource Manager处理请求三、任务资源计算与申请四、Resource Manager分配资源五、Node Manager执行任务六、任务执行与监控 1. HDFS的读写流程 1.1 HDFS…

C++ 中的友元(Friend)用法详解

什么是友元&#xff08;Friend&#xff09;&#xff1f;&#x1f46d; 友元 (C) | Microsoft Learn 在C中&#xff0c;友元&#xff08;Friend&#xff09;是一种机制&#xff0c;允许外部函数或类访问某个类的私有&#xff08;private&#xff09;或保护&#xff08;protecte…

[Unity Demo]从零开始制作空洞骑士Hollow Knight第十五集:制作更多地图,更多敌人,更多可交互对象

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、第一个代表性场景 1.制作更多敌人2.制作更多可交互对象二、第二个代表性场景 1.制作更多敌人2.制作更多可交互对象三、第三个代表性场景 1.制作更多敌人2.制…

【计算机网络 - 基础问题】每日 3 题(五十二)

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞…

Solr5.5.0单机部署

Solr5.5.0集成Tomcat8部署 1、 准备条件 JDK1.7以上 Solr5.5.0部署包&#xff08;solr-5.5.0.zip&#xff09; Tomcat8部署包 &#xff08;apache-tomcat-8.5.16.tar.gz&#xff09; 上传Solr5.5.0和tomcat8 部署包并解压使用 2、准备部署 将./solr-5.5.0/server/solr-we…

SPI的学习

工作原理 SPI的工作原理基于主从架构。主设备通过四条主要信号线与一个或多个从设备进行通信&#xff1a; MOSI&#xff08;主输出&#xff0c;从输入&#xff09;DI&#xff08;Master Output Slave Input&#xff09;&#xff1a;主设备发送数据到从设备。MISO&#xff08;…

MySQL 回收表碎片实践教程

前言&#xff1a; 在 MySQL 数据库中&#xff0c;随着数据的增删改操作&#xff0c;表空间可能会出现碎片化&#xff0c;这不仅会占用额外的存储空间&#xff0c;还可能降低表的扫描效率&#xff0c;特别是一些大表&#xff0c;在进行数据清理后会产生大量的碎片。本篇文章我们…

MAC电脑的JDK、MAVEN配置及IDEA激活

1、JDK配置环境 vim ~/.bash_profile # 添加 Java 目录&#xff0c;类路径和指令路径的配置&#xff0c;若已存在则用目标值覆盖 export JAVA_HOME/Library/Java/JavaVirtualMachines/jdk1.8.0_311.jdk/Contents/Home export CLASSPATH.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/…

Oracle单实例静默安装

oracle 11g单实例静默安装 在CentOS上静默安装Oracle数据库 引言 在企业环境中&#xff0c;自动化和标准化是提高效率的关键。静默安装&#xff08;也称为无人值守安装&#xff09;是一种无需人工干预的安装方法&#xff0c;适用于大规模部署或需要重复安装的场景。本文将介…

【KEIL那些事 4】CMSIS缺失!!!!导致不能编译!!!!软件自带芯片下载缓慢!!!!!!快速下载芯片包!!!!!

安装了keli发现emmm&#xff0c;CMSIS缺失&#xff01;&#xff01;&#xff01;&#xff01;不能编译&#xff0c;&#xff0c;&#xff0c;自带下载芯片缓慢&#xff0c;&#xff0c;&#xff0c;官网下载emmm&#xff0c;竟然不带动的&#xff01;&#xff01;&#xff01;&…

MySQL根据.idb数据恢复脚本,做成了EXE可执行文件

文章目录 1.代码2.Main方法打包3.Jar包打成exe可执行文件4.使用&#xff08;1.&#xff09;准备一个表结构一样得数据库&#xff08;2.&#xff09;打开软件&#xff08;3.&#xff09;输入路径 5.恢复成功 本文档只是为了留档方便以后工作运维&#xff0c;或者给同事分享文档内…

查看Chrome安装路

谷歌Google浏览器查看安装路径&#xff0c;浏览器Google Chrome浏览器查看安装路径 chrome://version/ 来源&#xff1a;笔记云

(数据结构)单链表——C语言

目录 1 概念与结构 1.1 结点 1.2 链表的性质 2 实现单链表 2.1打印SLPrint 2.2申请一个结点SLBuyNode 2.3尾插SLPushBack 2.4头插SLPushfront 2.5尾删SLPopBack 2.6头删SLPopfront 2.7查找结点位置SLFindNode 2.8在pos位置插入SLInsert 2.9在pos节点之后插入SLInse…

2024HarmonyOS应用开发者高级认证 最新题库第二部分

单选题 1.以下哪个装饰器用来表示并发共享对象。&#xff08;D&#xff09; AShared BState CStyle DSendable 2.hiAppEvent提供的Watcher接口&#xff0c;需要订阅到OS的崩溃事件&#xff0c;正确的实现方式(选下面这个) hiAppEvent.addWatcher({ name:"watcher&…