@bendyline/squisq-反应

用于播放、渲染和与 Squisq 文档互动的响应组件库 。 包括一个全功能多克播放器,基于SVG的块渲染器,介质层和回放钩.

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

安装

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

同伴依赖性 : react 财务报告和审定财务报表 react-dom (v18或v19) (中文(简体) ).

快速启动

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

function App() {
  return <DocPlayer markdown={'# Hello\n\nWelcome to Squisq.'} />;
}

DocPlayer 接受 无论是 原始内容 markdown (内部分解和转换) 或者说 解析 doc; 如果你已经有一个 Doc,通过 <DocPlayer doc={doc} />。 。 。 . basePath 可选( 默认) '.'),是解决相对关系的基础 URL 媒体路径。 没有 markdown 也没有 doc,玩家使主题为空 而不是崩溃.

v1.5 断开更改 : 旧的 script 道具现在 doc,则 audioProvider 道具现在 audioController (类型) AudioProvider 曾经 重新命名为 AudioController) (中文(简体) ). LinearDocView 获得同样的 markdown 道具 (英语).

构成部分

栅栏码复制控制

MarkdownRenderer 而线性文档表面保持代码复制UI 默认。 打开 showCodeCopyButton。网络主机可以依赖 navigator.clipboard;电能或原生嵌入可以提供自己的 剪贴板桥:

<LinearDocView
  markdown={'```\n$ node packages/tooling/dist/cli.mjs components\n```'}
  showCodeCopyButton
  onCopyCode={(code, { language }) => hostClipboard.writeText(code)}
/>

同样的两个道具可以使用 DocPlayer (用于线性模式),和 独立静态 mount() 选项。 召回收到准确的栅栏 内装物,不包含后置分隔符.

层

块由作为 SVG 渲染的打字层组成:

钩子

useDocPlayback 将配置作为选项对象 :

useDocPlayback(doc, currentTime, { viewport, theme, onSeek });

独立玩家

非反应环境可使用全球建筑。 它暴露了一个 SquisqPlayer 全球 mount, (中文(简体) ), getHandle, (中文(简体) ), unmount,以及 version。 。 。 . mount 返回实例控件。 将软件包样式表与 原始全局架构, 这样作者Font Aweasy 图标可以使用共享的 Webfonts .

默认构建为轻玩家并省略美人鱼的多兆字节解析器 还有布局引擎 装有人鱼围栏的文档应使用全套 变量在 dist/squisq-player.full.global.js (也导出为 @bendyline/squisq-react/standalone/full) (中文(简体) ). 其他图表由 两个变体.

前者 mountStatic() 快捷键被删除; 通过 mode: 'static' 改为 mount()。渲染方法是实例范围,不再复制到 顶级 window.seekTo 编号 : window.getDuration 属性.

交互式挂载 :

<link rel="stylesheet" href="https://unpkg.com/@bendyline/squisq-react/dist/styles/index.css" />
<script src="https://unpkg.com/@bendyline/squisq-react/dist/squisq-player.global.js"></script>
<div id="player"></div>
<script>
  // docJson is a Doc (e.g. produced by markdownToDoc and serialized)
  const root = document.getElementById('player');
  const handle = SquisqPlayer.mount(root, docJson, {
    mode: 'slideshow', // or 'static' for a scrollable document view
    basePath: '/',
  });

  // In render mode: const api = await handle.renderAPI;
  // The same handle is available later as SquisqPlayer.getHandle(root).
</script>

对于无头捕捉,添加 renderMode: true,然后等待着 handle.renderAPI 打电话前 seekTo() 或读取生成元数据. seekTo() 只有在 React 承诺了所需的视觉时间后才能解决, CSS动画已定位, 活动视频已生成其追求 画框,一个最后的油漆机会完成. getRenderedTime() 返回承诺的 DOM 所代表的时间. 类型脚本主机可以导入 MountOptions 财务报告和审定财务报表 SquisqPlayerHandle 从 软件包根.

设定 animationsEnabled: false 打开 DocPlayer, (中文(简体) ), BlockRenderer,或独立 mount() 作为静态使编译的图层动画和块过渡 内容。 嵌入式视频、定时媒体、字幕、音频和文件计时停留 活动;这使得选项适合紧凑的MP4和动画-GIF导出.

对于构建时间嵌入, @bendyline/squisq-react/standalone-source 出口 玩家作为自定义的字符串常数( q)PLAYER_BUNDLE与 共享图标样式 。 它被使用为 @bendyline/squisq-formats 和 CLI 来生产单文件 HTML 并提供了视频导出.

图表

@bendyline/squisq-react/diagram-pictures 为文档绘制 PNG 图表 导出( 只浏览器) : renderMermaidPicture, (中文(简体) ), renderSquisqDiagramPicture (ASCII 图表和时间表、绘图、布局和图表块,裁剪到 他们的含量,没有滑动的铬, renderTreePicture,以及 createDiagramPictureRenderer,显示器 rasterizeDiagrams 内 @bendyline/squisq-formats/diagrams 拿着 图片是 Plain SVG 绘制到 a 画布 — SVG 文字标签的美人鱼, 不 <foreignObject> - 所以回读 在每个浏览器中工作,文本使用系统字体,因为图片不能 加载页面的网页字体.

样式

导入块过渡的软件包 CSS 和字体优美内线图标 :

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

完整 API 参考

见 文件/API.md 用于完整的道具表格、钩子签名和类型.

相关软件包

许可证

麻省理工学院