文件向量 dDocs

ddocs. new (英语) 您的隐私专注,开源替代 Google Docs 。 它是一款端到端加密的文档编辑器,在无损于速度或人们对其数据的控制的情况下被优化用于多人协作.

其特征包括:

• 使用后量子加密的端到端加密
• 实时和同步协作
• 建议模式(跟踪更改)和评论
• 标记下和 LaTeX 支持
• 美人鱼JS 图表支持
• 进出口.docx,.md,.pdf,.html等.
• 黑暗模式和颜色主题
• 离线/在线编辑(即使没有WiFi,仍继续编写和打开更老的文件)
• 交叉设备同步(桌面和移动)
• 移动优化的网络应用和PWA
• 通过零知识证明启用的私人访问权限
• 通过零知识证明使私人社会收回账户/档案
• 版本历史
• 端到端加密,可编程的 API 优化代理( opt- in)

该寄存器包含:

• /package ——核心包码.
• 示例和演示源代码以显示 dDocs 功能 .

使用量

先决条件

您的应用程序运行 Tailwind CSS 3.4 并拥有 @tailwind base/components/utilities 输入。 包船只编辑CSS;飞行前、公用事业、 @fileverse/ui 样式,而 KATeX 样式表来自您的构建.

安装导入( I)

import { DdocEditor } from '@fileverse-dev/ddoc';

按此顺序装入样式表( 按导入顺序打印出 CSS ; 下一步将前两个放在根版式上, 将后两个放在编辑器路由上 :

import './globals.css';                 // your tailwind entry
import '@fileverse/ui/styles/base';     // tokens and base rules
import 'katex/dist/katex.min.css';      // math; fonts are served as files
import '@fileverse-dev/ddoc/styles';    // editor CSS

大小

DdocEditor 填充其父目录 : width: 100%; height: 100%。父母必须有一个明确的身高。 编辑器从来不读取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取

<div style={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
  <div style={{ flex: 1, minHeight: 0 }}>
    <DdocEditor renderNavbar={renderNavbar} />
  </div>
  <footer>…</footer>
</div>

如果编辑器不高地制作,则其母版没有.

renderNavbar 输出是编辑器默认的第一行, 已渲染为: 编辑器不添加样式, 所以返回一个带有您自己的背景、 绑定和边框的元素 。 在流动中,它坐落在一个没有风格的行上,它只会使倒塌产生动画. 无 renderNavbar 无所不能 将导航器移到别处, 传出要转换的元素 。 在状态下保持,而不是在裁判中,所以编辑在附加时重新表示:

const [navbarEl, setNavbarEl] = useState<HTMLElement | null>(null);

<header ref={setNavbarEl} />
<DdocEditor navbarContainer={navbarEl} renderNavbar={renderNavbar} />

布局遵循编辑器的宽度,而不是窗口的宽度:在一个窄面板中,它使用其狭长的布局. 已知限制:1 DdocEditor 每页;在宽屏幕上的窄编辑器中,注释页仍然覆盖整个取景口.

同伴依赖关系

此软件包需要在您的工程中安装以下对等依赖 :

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @fileverse/ui @fileverse/crypto viem framer-motion frimousse

对等范围是 @fileverse/ui@^5.4.2。如果你曾经测试过预放出配对,请精确地将两个包钉上:预放出不能满足护身范围.

这些从捆绑中外化,以避免在您的应用程序已经使用时出现重复. 如果没有安装它们,npm(v7+)会自动为您安装.

更新尾风配置

module.exports = {
  presets: [require('@fileverse-dev/ddoc/tailwind')],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@fileverse-dev/ddoc/dist/**/*.{js,mjs}',
    './node_modules/@fileverse/ui/dist/**/*.{js,mjs}',
  ],
};

需要两分两分,而不是单分 index.es.js 条目: dits被块(index.es.js 静态进口 use-headless-editor-<hash>.mjs),所以一个单文件条目会留下块 类未生成.

预设作曲 @fileverse/ui/tailwind (基于类的暗模式,动画插件,设计-系统类)并添加 mobile: 960px 屏幕上显示编辑器所用的内容.

tailwindcss@^3.4.0 是一个可选的对等点: 预设会运行在您自己的 Tailwind 构建中, 它也提供 postcss 财务报告和审定财务报表 postcss-js ii 预置负载。 尾风4不支持.

从 4.x 移动

5.0 停止运输前飞行, 尾风公用设备, ui样式表, KaTeX样式表 html, (中文(简体) ), body,以及 * 复发. 要升级 :

1. 添加预设和两个 content 以上条目.

2. 导入 @fileverse/ui/styles/base 财务报告和审定财务报表 katex/dist/katex.min.css 照上面的顺序.

3. 一揽子计划不再提出这些全球宣言:

   • * { margin: 0; padding: 0 }
   • html, body { height: 100%; width: 100% }
   • html, body { overflow: hidden }
   • body { position: static; user-select: none; -moz-osx-font-smoothing: grayscale }
   • *, ::before, ::after { border-color: hsl(var(--color-border-default)) }

   如果你的壳依赖 overflow: hidden 或者说 user-select: none中,添加到自己的 全局样式表。 其余的由尾风预飞或 @fileverse/ui/styles/base 床单.

4. 删除任何重新声明的工作 mobile: 类; 预设生成它们.

5. 添加 katex 属于自己的依附者npm install katex@^0.16.11),包裹不再保证被吊起.

6. 如果你把旧包里的东西按类名排序: .custom-scrollbar 现在 .ddoc-scrollbar,以及 .highlight-comment-bg, (中文(简体) ), .is-active, (中文(简体) ), .custom-border-bg, (中文(简体) ), .animate-fade-in-out, (中文(简体) ), .placeholder-disabled, (中文(简体) ), .tooltip:before 以未使用方式删除.

7. 编 成 @fileverse/ui 预设定义 rounded-sm 作为 calc(var(--radius) - 4px) (4px) (中文(简体) ) 而不是 Tailwind的默认 2px, 所以任何使用 ddoc 的表面 rounded-sm 现在公用事业 使4px角.

8. 第三方 CSS ddoc 导入( 突出主题. js, tippy) 仍为全球船舶 .hljs* 财务报告和审定财务报表 .tippy-box 选择者——这超出了软件包自己的选择者所有权担保范围.

9. 列表规则( E)ul, (中文(简体) ), ol,而"巢居清单"的计数器)现在被扩大为 :where(.ProseMirror, .presentation-mode) 不再有风格 ol编号 :ul 编辑器外或 演示文稿表面。 如果你的应用依赖于Ddoc的全局列表规则 在其他地方,你自己拥有.

你现在应该使用 DDocs !

从 6. x 移走

7.0会改变编辑器的大小. 没有删除道具.

• 给编辑器一个有确定高度的父(参见 Sizing) 。 它已经不再大小了 100dvh。 。 。 .
• 把脚印放在编辑器正常流后. footerHeight 没有效果,可以删除.
• 导航和工具栏已经不在了 #editor-canvas. 使用的中央支助系统 #editor-canvas 因为他们的祖先应该使用 .ddoc-editor-root。 。 。 .
• 编辑器不再将您的导航栏包入 <nav id="Navbar">它使什么 renderNavbar 返回,因此移动包装的样式(color-bg-default p-2 flex gap-10 items-center justify-between w-full border-b color-border-default)和 id,如果选中的话,请在自己的元素上。 "逃生归来"对"编辑"的处理器也随之而去,而现在隐藏起来会倒塌一排没有风格的.ddoc-navbar-row围绕你的元素。 无 renderNavbar 无所不能 导航器的高度来自其内容;它是一个固定的64px,下面是46px lg。 。 。 .
• editorCanvasClassNames 不应该设置高度.
• zoomLevel, (中文(简体) ), isNavbarVisible 财务报告和审定财务报表 isPreviewMode 是可选的。 每个UI状态都可以被忽略,或者用一个值和一个来控制 onXChange 调用。 这个 setX 道具还行并被腐烂.
• 您的尾风建筑不需要改变配置 。 新的 ddoc-* 变体( 随编辑器宽度而来的容器- query 断点)来自 @fileverse-dev/ddoc/tailwind 预设已使用.

修改时没有更改代码的行为 :

• 没有他们的UI功能 setX prop现在在内部状态上工作. Split View 切换显示, 何时关闭现场协作( 需要) setIsSplitView )),以及注释抽屉,大纲和演示文稿模式打开而不用设置. 为了固定一个, 传递它的值 没有回调, 例如 isPresentationMode={false}。对于 Split 视图, isSplitView={false} 没有回调时,也会隐藏工具栏切换.
• onFocusModeChange 和堕落者 onFocusMode 当 isFocusMode 未通过.
• #editor-canvas 现在是文档滚动器( 它携带 data-editor-scroll-container)和根 ([.ddoc-editor-root)为 overflow: hidden。 。 。 .
• 一个传送到 navbarContainer 由您定位并分层;编辑器只将它切入元素。 焦点模式和工具栏的崩溃切换不隐藏它: 隐藏您自己的元素 onFocusModeChange 财务报告和审定财务报表 onNavbarVisibleChange 如果你想要,或通过 showNavbarToggle={false} 以删除崩溃切换.
• 工具栏在隐藏时不再滑动或淡出;其行被去掉并被画布取去空间. 一个入流的导航器仍然会滑出并淡出超过300ms. 对于一个传送的导航器,动画是你的:放 ddoc-navbar-row 并添加 ddoc-navbar-row--hidden 来摧毁它.
• 移动制表板坐落在编辑器的下边. 它不再添加 24px + env(safe-area-inset-bottom),所以你的脚必须携带安全区域设置.
• 编辑的应变课使用 :where() 因此他们需要Chrome 88+,Safari 14+或Firefox 78+.

dDocProps 接口

这个 DdocProps 界面是一个 TypeScript 接口,用于定义页面相关组件的属性。 它包括处理预览模式,管理发布数据的属性,以及可选地存储与页面相关的元数据和内容.

核心道具

协作道具

UI/UX 推进

每个UI状态都可以被忽略(编辑器保持内部),或者用值和值来控制 onXChange 调用。 这个 setX 道具还行并被腐烂.

文档样式

这个 documentStyling prop允许您自定义文档的视觉外观, 有三个不同的样式区域:

interface ThemeVariantValue {
  light: string;
  dark: string;
}

interface DocumentStyling {
  /**
   * Background styling for the outer document area.
   * Supports CSS background values including gradients.
   * Example: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
   */
  background?: string | ThemeVariantValue;

  /**
   * Background color for the editor canvas/content area.
   * Should be a solid color value.
   * Example: "#ffffff" or "rgb(255, 255, 255)"
   */
  canvasBackground?: string | ThemeVariantValue;

  /**
   * Text color for the editor content.
   * Example: "#333333" or "rgb(51, 51, 51)"
   */
  textColor?: string | ThemeVariantValue;

  /**
   * Font family for the editor content.
   * Example: "Inter, sans-serif" or "'Times New Roman', serif"
   */
  fontFamily?: string;
}

用法示例

<DdocEditor
  documentStyling={{
    background: {
      light: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      dark: 'linear-gradient(135deg, #2a3145 0%, #3a2f59 100%)',
    },
    canvasBackground: { light: '#ffffff', dark: '#1e1f22' },
    textColor: { light: '#333333', dark: '#e8ebec' },
    fontFamily: 'Inter, sans-serif',
  }}
  // ... other props
/>

说明: 文档造型在正则编辑器模式和演示文稿模式两方面都有效. 仅以演示文稿形式 canvasBackground, (中文(简体) ), textColor,以及 fontFamily 用于维护干净的幻灯片外观.

自定义字体

编辑的船载着 仅限系统基准 (Arial, Calibri, Georgia, Times New Roman等)和制作 没有第三方字体请求 ——没有谷歌字体 @import。要提供额外字体,请通过 a fonts 目录. 每个字体都由您的应用程序自行托管并加载 需求 通过 CSS 字体加载 API: 一个字体的 woff2 只有在拾取器中选择或文档(包括远程协作者的更改)实际在其中生成文本时才获取.

type FontDescriptor = {
  /** Display name shown in the picker, e.g. "Poppins". */
  name: string;
  /** CSS font-family stack stored in the content, e.g. "Poppins, sans-serif". */
  family: string;
  /**
   * woff2 source(s). Omit for a pure system font (no loading).
   *   - string: a single file covering all weights (e.g. a variable font).
   *   - Record<number, string>: a per-weight map, e.g. { 400: url400, 700: url700 }.
   */
  url?: string | Record<number, string>;
  /**
   * Optional SVG preview rendered in the picker. Any React node that renders an
   * <svg>. Falls back to the font name in the default font when absent.
   */
  preview?: React.ReactNode;
};

用法示例

import { DdocEditor, FontDescriptor } from '@fileverse-dev/ddoc';
// Self-host the woff2 files however your bundler prefers (e.g. @fontsource/*).
import poppins400 from '@fontsource/poppins/files/poppins-latin-400-normal.woff2';
import poppins700 from '@fontsource/poppins/files/poppins-latin-700-normal.woff2';

const fonts: FontDescriptor[] = [
  {
    name: 'Poppins',
    family: 'Poppins, sans-serif',
    url: { 400: poppins400, 700: poppins700 },
    preview: <PoppinsPreview />, // optional SVG
  },
];

<DdocEditor fonts={fonts} /* ...other props */ />;

注释:

• 采集者列出系统的基线和目录 a-Z 组合 (与 默认 被钉入顶上.
• CSS的面部名称来源于第一个符号: family这样 name 纯粹是化妆品,可以有所不同(例如:. name: 'Poppins (Brand)', (中文(简体) ), family: 'Poppins, sans-serif') (中文(简体) ).
• 该目录还驱动 PDF/ 打印导出, 该导出 @font-face 规则.
• 主办您的 woff2 文件 原产地 因此,他们既解决编辑器,又解决了印刷物.

注释和协作道具

认证道具

工具软件

在当地运行此示例的步骤

• npm i
• npm run dev

它将打开一个 Vite 服务器, 这将拥有 Ddoc 编辑器 .

QQ 此寄存器正在快速开发, 经常更新和更改 。 我们建议暂时不要用于生产.