@bendyline/squisq-editor-反应

对 Squisq 文档进行反应编辑器外壳, 包含三个集成视图: 一个摩纳哥驱动的原始 Markdown 编辑器, 一个 Tiptap WYSIWYG 丰富的文本编辑器,和一个活块预览. 视图之间的切换使文档自动同步.

部分 斯奎斯克语Name 单相机.

安装

npm install @bendyline/squisq-editor-react @bendyline/squisq @bendyline/squisq-react monaco-editor

同伴依赖性 : react 财务报告和审定财务报表 react-dom (v18或v19),加 monaco-editor (~0.50.0) (中文(简体) ). 摩纳哥在运行时间是懒散地装货,但它是一个 需要对等点, 因为软件包的公开类型Script声明曝光 摩纳哥编辑类型. Tiptap 被捆绑为一个正常的依赖性——你不 需要自己安装.

快速启动

import { EditorShell } from '@bendyline/squisq-editor-react';
import '@bendyline/squisq-editor-react/styles';

function App() {
  return <EditorShell initialMarkdown="# Hello World" />;
}

编辑器视图

构成部分

除了组件外, 软件包还导出作者的 Tiptap 扩展名 ASCII 图,树和时间表. 时间线围栏成为共享尺度 wYSIWYG模式下的铁道画布:单击线条或键盘可访问的添加按钮 添加点,选择要编辑其标签/调用的任何点,并保留多个 铁轨和树枝可见。 每个安全编辑都被写回 重新生成, 已校验的栅栏文字, 所以 Raw Markdown 保留了真理的来源; 视觉突变 如果丢失未建模的源头, 则暂停 。 软件包还导出标题模板说明, 标记下QQ Tiptap 桥 (单位:千美元)markdownToTiptap 编号 : tiptapToMarkdown),拖放辅助工具 (单位:千美元)useFileDrop, (中文(简体) ), processMediaFiles),文件类型检测(resolveFileKind, (中文(简体) ), 和块-时/时序编辑原始(useBlockNavigator, (中文(简体) ), BlockCardView, (中文(简体) ), TimelineTrack) (中文(简体) ).

显著 EditorShell 特性

• 版本 - 通过 allowVersioning + 键 workspaceContainer 自动保存 闲置的快照( t)versioningAutoSaveIdleMs,默认值为5000毫秒) (单位:千美元)versioningPrunePolicy,默认保存倒数-50;一个版本历史面板 在工具栏中显示.
• 记录 - 带有 mediaProvider 有线,在 工具栏(allowRecording默认值 true) (中文(简体) ). 屏幕捕获曝光 怎么办 记录 高级设置: 表面偏好, 屏幕/ 窗口拾取器 行动,以及整个地表或协调区域捕捉。 坐标为像素 相对于所选表面的左上; 现场预览和编码视频 使用相同的裁剪,音频不变。 无效或出入境区域 明显失败并释放捕获。 区域录制使用30英尺高的画布; 缩小区域的窗口或停止屏幕共享会结束拍摄 . 浏览器或主机仍然拥有取源器和可用的表面类型. 记录器的高级设备 设置扩展 发现麦克风/相机, 只显示抓取 浏览器广告的限制,将相机和屏幕分开 限制双相录音,并曝光MediaRecorder编码器,比特率, 和键框提示。 首选限制使用最接近的现有设置; 所需麦克风/相机限制在选定输入不能时失败 满足它们( 屏幕设置仍为首选项, 按 getDisplayMedia) (中文(简体) ).
• 演示文稿模式 – 每个使用视图可以填充 Squisq 控件,打开 a 同步观众窗口,或者接管整个屏幕. 幻灯片放映/录像 回放、 Page/ 文件滚动和 Narate 表面仍然链接到 主视图.
• 闪卡模式 —— Use 菜单可以预测原始嵌入区块树 逐渐揭示了学习卡和多选题。 普通类 标题自动推断; {study=flashcard} 拆散一张牌 边界和 {study=multiple-choice-flashcard} 让孩子成为问题之一, 儿童2是默认正确的答案, 其余的儿童分散注意力.
• 小组讨论会 —— 说 outline (标题图框)和 inlinePreview (每个街区) SVG 预览地沟, inlinePreviewWidth 默认 320). 块预览包括 普通章节和无标题的入门文本;模板标签是可选的. 在~720px下面,这些窗帘隐藏的地方 导航表 现为:a 右边缘有外观和块预览标签 。 在接触中, 从右边切入到轮廓,或向下切入 预览; 选择一节将其关闭 。 用它来控制它 navigationSheet 编号 : onNavigationSheetChange 从主机输入如后键关闭它.
• 代码和图像模式 - 通过 fileName 编号 : language 获得摩纳哥独占 代码编辑器,或 imageSrc (+ 数) imageMode: 'edit')用于图像表面. .jsonc 文档, language="jsonc"栅栏 jsonc 片段使用 JSON 以行和块注释支持来突出显示.
• 主机触发查找模式 控制 findMode 财务报告和审定财务报表 onFindModeChange (或打电话) setFindMode 从上下文改为: 工具栏的编辑动作带有活搜索, Match case / 完整单词, 上/下个导航,突出显示匹配,并替换/替换全部 可编辑文档. findRequest 在给定查询和匹配时打开“查找”; findShortcut 选择入选 Ctrl/Cmd+F和 Ctrl+H(苹果上的Cmd+可选+F). 没有 查找触发按钮会被添加, 除非主机提供了一个 .
• 嵌入 —— 说 readOnly, (中文(简体) ), placeholder, (中文(简体) ), submitOnEnter, (中文(简体) ), fullWidth, (中文(简体) ), thinMargins, (中文(简体) ), minHeight编号 :maxHeight 用于聊天组合器的自动浏览,加 通过主机控制写打字 writeCanvasSettings (单位:千美元)textSize 财务报告和审定财务报表 lineSpacing) (中文(简体) ). 设定 hostMode="chat" 将外壳保存在 Write 视图中, 删除它的视图标签,并隐藏自定义布局、变形、视图选项,以及 文档设置 . showCodeCopyButton 选择文档/页面预览到一个 微妙的栅栏编码复制控制; 使用 onCopyCode 连接剪贴板 在电子或本地主机中(浏览器主机返回到 navigator.clipboard.writeText) (中文(简体) ).
• 颜色方案 - 通过 colorScheme="light" | "dark" 用于编辑的铬 (单位:千美元)v1.5: (中文(简体) ) 重新命名为旧 theme 道具; RawEditor属于自己的 theme 道具为 现在 monacoTheme) (中文(简体) ).

还出口(v1.5): useMonacoLoader (摩尼宝靴一分), 和自定义主题/模板提供者堆栈 - CustomThemeProvider 编号 : useCustomThemes 编号 : useDocCustomThemes 财务报告和审定财务报表 CustomTemplateProvider 编号 : useCustomTemplates 编号 : useDocCustomTemplates。 。 。 .

上下文 API

使用 useEditorContext() 访问编辑器状态和来自孩子的行动 组件。 上下文值平平-州域和行动方法活 并肩作战:

import { useEditorContext } from '@bendyline/squisq-editor-react';

function MyComponent() {
  const { markdownSource, doc, activeView, setMarkdownSource, setActiveView, setFindMode } =
    useEditorContext();
  // markdownSource: string, doc: Doc | null, activeView: 'raw' | 'wysiwyg' | 'preview'
}

样式

导入编辑器 CSS :

import '@bendyline/squisq-editor-react/styles';

完整 API 参考

见 文件/API.md 全体会议 EditorShellProps 引用、上下文 API 和每个导出 组件、钩和帮助器.

相关软件包

许可证

麻省理工学院