首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

最近迷上了富文本编辑器!

它为「协同编辑」所设计:因为网络条件、客户端硬件、应用架构的限制,早期的一些 Web 富文本编辑器并没有考虑到多人实时协同,Slate.js 的模型设计天然就亲和协同编辑,通过学习 Slate.js,我们也能借道了解基础的多人协作文档工作原理...image.png 这里我就大概简述一下我认为设计的好的地方 1、函数式的代码风格 从v4到v5 能明显的感觉到函数成了一等公民,这也与像vue3这类优秀的开源项目不谋而合。...通过不同函数的组合,减少项目中由于引用类型带来的副作用 2、鲜明的模块划分,实现功能解耦 在我解释,我理解的为什么这么设计之前,先介绍一下各个模块的作用和功能 core 整个编辑器最重要的模块就是core...模块,他主要承担了,slate 做不到的部分 ——也就是视图层的渲染 具体core 的核心逻辑,作者大佬也总结过了,如有需要请看图,不再赘述 我主要想说的是为什么v5为什么要使用vdom?...,插件机制怎样设计,怎样开放封闭,这样运用设计模式来巧妙解决问题,怎样判断那种编程思想合适,他都需要很长时间的摸索而形成的,还是需要多看源码、 在这举个例子,就是v5的插件机制,在上面也提到过,插件机制我认为是遵循了开闭原则

3.7K30

只需6步,就能让你的 React +Tailwind.css站点实现暗黑功能

对于你想要在暗黑模式下更改的每个样式,你需要在其前面加上dark:前缀。... 第五步:配置Tailwind的暗黑模式 为了使dark类正常工作,我们需要在tailwind.config.js文件中配置Tailwind以启用暗黑模式。...这就是为什么我们在 App.js 的根 div 中添加了 dark 类。 你还需要更改 content 属性,将所有模板文件的路径添加进去。...第六步:测试暗黑模式 一切都设置好了,现在是时候看看你的工作成果了。运行你的应用程序: npm start 你应该可以通过应用程序中的按钮在浅色和暗黑模式之间切换。...点击按钮将切换页面的整体主题,而Tailwind的暗黑模式实用工具帮你处理其余的细节问题。 你已经成功地在你的React.js网站中使用Tailwind.css实现了暗黑模式功能。

71940
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    为什么我们不擅长 CSS

    /home 本文探讨了为什么人们在CSS方面表现不佳。...但对其他人来说,CSS 更像是把手伸进《沙丘》中的痛苦之箱,而某个产品经理却拿着匕首抵着他们的脖子,让他们不敢把手抽出来。 有几个原因可以解释为什么科技公司在 CSS 方面一直举步维艰。...在这种情况下,我们不希望图片和引用块(blockquote)之间有间隙,因为这将由内边距(padding)来处理。...随着组件查询得到更广泛的支持,基于视口的媒体查询在类似情况下可能很快就不需要了。 现在,我们还可以在常青树浏览器中使用新的范围语法进行媒体查询!...我假设这实际上是一个链接,在这种情况下,我们可以在全局样式中为链接应用 .cool-text-interactive 样式,这样我们就可以直接使用不带类的 。

    20210

    「web应用架构」有原则GraphQL

    图的中央管理——例如,统一的访问控制策略——成为可能 当团队在没有协调工作的情况下创建他们自己的图表时,他们的图表几乎不可避免地会开始重叠,以不兼容的方式向图表添加相同的数据。...理想情况下,每个字段应该只在响应消费者对附加功能的具体需求时添加,而设计的目的是最大限度地让其他有类似需求的消费者重用。 更新图形应该是一个连续的过程。...有关废弃字段的信息可以传播到使用这些字段的开发人员的编辑器中,并提供建议的替代方案 根据实时生产数据,在开发人员输入查询时,可以向他们显示查询的估计成本(以延迟或服务器资源计算)。...在不分析实际发送的查询的情况下,仅将用户限制在每分钟特定的查询数量是不够的,因为查询可以访问大量的服务,而且查询的成本可以在多个数量级上变化。...作为第二道防线,在执行查询之前估计它的成本,并为每个用户和每个应用程序制定查询成本预算,可以防止过度使用预先注册的操作,或者在无法进行预先注册的操作的情况下。

    74510

    大数据架构的未来

    相反,HBase是一个数据库,其特有的数据编码方式可以将记录写入的速度最优化,在通过主键查询时执行只读的速度相对也很快。 这也是用Hadoop的数据湖之魅力所在,它能实现真实情况下的需求。...想象一下客服专员(CSR)告知消费者,因为数据湖仅支持这个主键,他必须提供账号才能查询所有的信息;或者查询需要10分钟时间。...例如,使用搜索引擎或者实体化视图而不是通过主键来查询;不过稍后还需返回到数据库,在有完整记录的数据库中对主表进行再次查询,以获得所需的完整信息。...我选择本文的主题是因为,MongoDB就是在Hadoop-only数据湖中,补位最优秀的数据库。...如今一些公司只是将数据复制到Hadoop中进行转换,然后再复制到其他地方,用于完成有价值的工作。为什么不直接利用数据湖,发挥最大价值呢?使用MongoDB可以将价值多次翻倍。

    79670

    UE4 GamePlay架构学习篇

    通过参考前辈的文章+通过查阅官方文档和官方的模板案例测试得出如下结论,供学习参考: 1>UGameInstance: 游戏实例,全局只存在一份,我们自己继承一下,实现Init()和ShutDown()...这样想就明白了了 我觉得UE4设置InOwner,InInstigator就是在射击游戏的原型上衍生出来的。 比如人拿枪,人开枪,枪发射子弹。...1>一般我们在这里面处理监听玩家的输入,当然也可以在Characer上面做,因为Pawn和Controller是一个相互持有的关系,Character又继承自Pawn。...里面封装了Slate。 14>UMG->Slate: 它是UMG的底层实现,也是UE4编辑器界面使用的GUI的架构,也就是说UE4的编辑器界面就是用Slate写的。...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.6K30

    生产者消费者模式

    在并发编程中使用生产者和消费者模式能够解决绝大多数并发问题。该模式通过平衡生产线程和消费线程的工作能力来提高程序的整体处理数据的速度。...为什么要使用生产者和消费者模式 在线程世界里,生产者就是生产数据的线程,消费者就是消费数据的线程。...生产者和消费者彼此之间不直接通讯,而通过阻塞队列来进行通讯,所以生产者生产 完数据之后不用等待消费者处理,直接扔给阻塞队列,消费者不找生产者要数据,而是直接从阻塞队列里取,阻塞队列就相当于一个缓冲区,平衡了生产者和消费者...; } Yuna工具在推广后,越来越多的部门使用这个工具,处理的时间越来越慢,Yuna是每隔5分钟进行一次抽取的,而当邮件多的时候一次处理可能就花了几分 钟,于是我在Yuna2.0版本里使用了生产者消费者模式来处理邮件...读者可以在平时的工作中思考下哪些场景可以使用生产者消费者模式,我相信这种场景应该非常之多,特别是 需要处理任务时间比较长的场景,比如上传附件并处理,用户把文件上传到系统后,系统把文件丢到队列里,然后立刻返回告诉用户上传成功

    1.2K10

    一文带你了解富文本是如何协同工作的

    之后块级编辑器的思路被认可,做L1的notion一样可以有自己排版布局,再加上现代浏览器国内的不断加强,似乎L1没有足够的动力升级为L2编辑器了。...而我们在协同编辑文档的时候,没有遇到过处理矛盾的时候,这是如何实现的呢?...我们文档拥有自己mvc模式,model层有8种基础的原子操作,所有操作都可以分解成这8种,yjs存储的其实就是这些操作,前端展示的时候,会一步步重现这些操作,形成用户可以看到的文档 insert_node...这里说一下,slate中Text相关的操作是通过String所自带的函数实现的,比如splice。...): 每一次读都会收到最近的写的结果或报错;表现起来像是在访问同一份数据 系统如果不能在时限内达成数据一致性,就意味着发生了分歧的情况,必须就当前操作在C和A之间做出选择,所以完美的一致性与完美的可用性是冲突的

    94730

    营销自动化终极指南——被忽略的电子邮件营销

    这个问题的答案将极大改变您电子邮件营销和自动化的方式。在B2B的模式中,受众是受在工作中表现出色和帮助雇主增长的动机驱动的。...在B2C的模式中,受众主要处于脑子需要休息一下的时候,他们可能也在上班,趁着午饭休息时间购物或者在会议间隙查看他们的手机。...我本季度能有奖金吗? 我是否得到了更好的价格? 如何获得良好的绩效评估? 我看起来好吗? 如何获得加薪? 如何将我的工作做得更好? 哪个产品可以帮我胜任我的角色?...在白板上绘制所有内容,列出您希望消费者采取的顺序,您的营销目标和准备采取的行动。 用户体验在概念层面上是很重要的。一旦您有一个明确的战略,解释是什么和为什么,那么您将能够顺利执行您的战术。...一定要注意的是,这些观众也可能正在使用智能手机。 有些消费者更喜欢在设备上滑动,而不是点击到新的网页。 通过滑动读者就可以浏览电子邮件的完整列表。

    9.6K50

    独家 | 手把手教你如何用Python从PDF文件中导出数据(附链接)

    不推荐使用HTML格式,因为pdf2txt生成的标记往往会很丑。以下是教你如何生成不同格式输出的方法: ? 第一条命令将创建一个HTML文件,而第二条将创建一个XML文件。...然而一旦安装了它,你将能够使用pip来安装slate: ? 注意最新的版本是0.5.2,而pip未必能拿到这个版本。如果拿不到,那么你可以从GitHub上直接获取slate安装: ?...如果PDF文件设有密码,你可以传入一个密码参数。不管怎样,一旦文件被分析,我们只要打印出每一页的文本即可。 我非常喜欢slate,它用起来更简单。不幸的是,这个包也几乎没有什么相关文档。...CSV的优点就是Microsoft Excel和 LibreOffice都能够自动地以漂亮的电子表格的方式将它们打开。你也可以在一个文本编辑器中打开CSV文件,如果你乐意看到它的原始值的话。...最后,我们研究了一下从PDF中导出图片这个棘手的问题。尽管Python目前没有任何出色的库可以完成这个工作,你可以采用其它工具的变通方案,例如Poppler的pdfimage工具模块。

    5.4K30

    CES上那些卖萌耍酷的家用机器人究竟怎么样?还是不太懂人话

    李杉 编译自 Slate 量子位 出品 | 公众号 QbitAI 这几天你可能在网上看见了不少机器人。...美国网络媒体Slate编辑April Glaser就说,最近几年的CES说明了一个显而易见的问题:面向消费者的机器人还远未迎来自己的“黄金时代”。...Pepper希望能在美国的商店前台和酒店大堂里面回答问题,促销商品,吸引顾客。 在软银的Pepper网站上,该公司还号称这款机器人拥有“一流的情绪感知能力”,而且已经进驻一些日本家庭。 ?...我说它错了,它也没有听懂。我必须在触摸屏上手动输入自己的名字,说实话,我很不愿意在商店里这样浪费时间。不过,现在已经有100多台Pepper在美国各地的超市、酒店和机场里工作。...而针对Sprint营业厅优化的Pepper则会回答不同手机的相关问题,但它也没有把我的名字加进去。 我在想,人形机器人目前的主要目的,是不是为了在网络购物日益发达的今天,吸引人们重新回到零售店?

    79770

    用Rust和React创建一个富文本编辑器

    我们曾经使用Slate.js——一个很好的编辑器——但是当我们为协作编辑实现我们自己的富文本基元时,我们发现我们自己的基元和Slate的数据模型之间的脱节是一个阻碍因素。...如果我们可以直接在React中实现视图,我们可以大大简化我们的堆栈,并完全控制它的每个方面。缺点是什么?RTEs因为需要支持复杂的用户交互而臭名昭著,而现在我们需要自己处理每一个交互。...这当然会让人感到不知所措,在开发过程中,可能很难保持对哪些工作和哪些不工作的概述。而这正是我们觉得最初没有contenteditable的工作很好的原因。...它依靠虚拟DOM来决定它需要如何更新实际的DOM,但当浏览器可以在它不知情的情况下把地毯从它下面拉出来并更新实际的DOM时,这种方法就陷入了困境。这也是我们一开始就避免的原因。...杂项 上述所有内容可能会让你对编辑器的工作原理有一个较高的认识,但魔鬼是在细节中的。下面是我们需要解决的一些小问题。 支持Unicode。每个人都喜欢的标准,但在工作中却很麻烦。

    2.6K133

    为什么微服务架构需要聚合

    在很多场景下,如果以某种特定的方式修改某种类型的某个实体,则必须同时修改另一个实体。或者,可能只能在特定环境下才能修改某个给定的实体。我们将这种规则称为不变量。不变量必须独立存在于一个聚合的上下文中。...为什么聚合 下面让我们更深刻地理解什么是聚合,以及探索确定聚合的方式。显然,在设计聚合前需要做一些期工作。 那么,为什么要关心这些准备动作呢?...为什么?是因为在我们的一体式模式中包含大量关联的外键。例如,我们可能有一个从ORDER表到USER表的外键(代表下订单的用户)。...因此,如果消费者在确认无法在没有人工介入的情况下无法处理某个消息时,就可以将该消息放到一个独立的队列中,它可以使用该GUID来表示被搁置的消息。...(此时缓存的不是内容,而是索引方式,当然也可以缓存整个聚合) 服务授权 在我之前所在的公司向微服务迈进时,我领导了一个团队,负责实施服务到服务的数据级别的授权。

    1.5K20

    用过 tailwindcss 才知道,命名真的是顶级痛点

    我一直都知道这是个痛点,所以我用的编辑器就得支持分屏,把 css 拖在另外一边。但是这样搞了之后,改的页面多了吧,css 堆来堆去的,最后就对应不上了,也不太爽 ......不用分屏之后,你猜怎么着,在一个很宽的代码区域里,看着这样的代码,居然也没觉得有多糟心。还行... 2、其他爽点 tailwindcss 的媒体查询的便捷性确实让我感到很舒服。...主要是媒体查询这玩意儿,我经常忘记它的语法。哪怕以前连续写了一年多的响应式布局,这语法还是没记住。 然后在 tailwindcss 中,我只需要加个前缀 md:w-32,轻松搞定。...具体效果怎么样我还不是很清楚,没有深度体会过。有深度使用经验的道友们可以在评论区跟我们分享一下具体的使用感受。 不过这对于喜欢定制自己 UI 的道友们而言,应该会很喜欢它。...当然这里你也可以直接使用他默认的配置,我这里就简单修改了一下。

    47610

    「分布式系统前沿技术」专题:Pulsar 的设计哲学

    IO 不隔离,消费者在清除 Backlog 时会影响其他生产者和消费者。 运维复杂,替换机器、服务扩容需重新均衡数据。 于是,我们决定开始研发 Pulsar来解决消息队列的扩展性问题。...下面我们来详细看一下在每种 IO 访问模式下的架构优势。 1.1 写 在传统消息系统架构中,一个分区的所有权会分配给 Leader Broker。...传统的消息系统架构中,所有不同的工作负载都被发送到一个中心(Leader Broker)位置,几乎不可能在工作负载之间提供任何隔离。...然而,Pulsar 的分层架构可以很容易地隔离这些 IO 模式:服务层的内存缓存为 Tailing Reads 这种消费者提供最新的数据;而存储层则为历史处理和数据分析型的消费者提供数据读取服务。...Pulsar SQL 允许 Presto SQL 引擎直接访问存储层中的数据,从而实现交互式 SQL 查询数据,而不会干扰 Pulsar 的其他工作负载。

    94950

    iRobot的30年成长史

    即使我们发明了一个工作异常出色的机器人——Roomba,消费者也根本不相信机器人可以做到我们所说的能够做到的事情。...事实证明,在过去30年的大部分时间里,人们反对购买机器人的主要原因是他们不相信机器人可以像他们期望的那样工作。...在很长一段时间里,我们也不例外:我们尝试了14种商业模式,最后才终于找到了一种可持续运作的模式。 ? 但我们商业模式的脆弱性确实教会了我们在找到一个可行的商业模式之前,为我们的业务拓展跑道的价值。...通过不预先支付利润,很明显,我们正在分享合伙伙伴最终会创造的价值,在最坏的情况下,对于我们的合作伙伴来说,如果没有成功地生产出产品,他们也得到了非常便宜的高质量研究成果。...因为在iRobot最初30年的大部分时间里,人们对我所说的机器人(特别是Roomba)的反应是:“我不敢相信它真的能工作”,但现在,他们问我的问题是“为什么机器人不能做更多的事?”

    51320

    【用户体验要素】结构层

    模型概念 ---- 交互组件怎么工作,取决于软件是否把某个特性处理成用户所熟悉的某个概念,规划好概念模型能够帮助你做出一致的设计决定 模型概念在我的理解里面而言是属于某个特定场景下的常规性操作,常规性操作是用户不需要思考...,顺其自然的一种操作行为 如:【购物车】,购物车首先是个容器,这个东西的添加和删除可以通过【编辑】来搞定,当用户推着【购物车】离开超市之前,必定是要有一补【结账】,而结账的载体就是【收银台】 使用人们熟悉的概念模型可以减少用户的思考成本...,但是常规化的场景也不能完全放在线上,书中有例子指出,国外有一款叫做slate做的是一个网络杂志,它将所有的现实世界都搬到了网上,这样用户会觉得很混乱,用户可能已经被一些已有的模式教育的很好了,所以考虑场景线上化的时候...错误处理的方式 ---- 1、不要【让用户发生错误】的设计 2、避免错误的方法就是使错误难以发生(吐槽下很多APP进入页面都会去关闭一个弹窗,其实真的是影响了我的使用,并且有可能会让我们做出错误的【...,没有必要再每个环节都展示出这样的东西,一定确保把用户的操作成本降到最低 【又想吐槽弹框,每次打开应用都出现弹框,也不代表我一定会点击去,点击去也不代表我一定会完成这项任务,都是人民,何必相互为难】 信息架构

    61320

    基于slate构建文档编辑器

    而类似于Draft.js、Slate.js,他们是富文本编辑器的core或者叫做controller,并不是一个完整的功能,这样就能够让我们有非常高的可定制性,当然也就会造成开发所需要的时间比较多。...在slate的文档中有对于框架的设计原则上的描述,搬运一下: 插件是一等公民,slate最重要的部分就是插件是一等公民实体,这意味着你可以完全定制编辑体验,去建立像Medium或是Dropbox这样复杂的编辑器...,几乎所有你在DOM中可以做到的事情,都可以在slate中做到。...在这里我使用的slate版本为0.80.0,不排除之后的框架策略调整,所以对于版本信息也需要注意。...,那么我们就可以自己实现一个插件的注册方案,统一封装一下插件的注册形式,用来拓展slate。

    1.1K10

    CQRS

    理解CQRS可以用分离Model和API集合来处理读取和写入请求开始,即CQS(Command Query Separation,命令查询分离)模式。...带缓存的Web架构 而实际上这样的服务器可能是多余的——我们为什么不直接生成HTML就好了?...编辑-发布分离 而最典型的应用就是流行于GitHub的Hexo、Jekyll框架之类的静态网站。如下图所示的是Hexo的工作流: ?...Hexo站点工作流 我们在本地生成我们的项目,然后可以创建一个新的博客、开始编写内容等等。接着,我们可以在本地运行起这个服务,除了查看博客的内容,还可以修改样式等等。...但是作为一个前端开发人员,没有JSON,用不了Ajax请求,我怎么把我的博客做成一个单页面应用? 编辑-发布-开发分离 ? 基于git的编辑-发布分离 对于有大量数据的网站怎么办?

    1.4K40
    领券