@textbus/platform-browser 4.0.0-alpha.5 → 4.0.0-alpha.50

package/README.md

@@ -4,120 +4,6 @@ Textbus PC 浏览器支持模块
 Textbus 是一套用于构建富交互的富文本编辑框架。和大多数富文本编辑器不同的是，Textbus 以组件为核心，格式为辅助，并大幅简化了富文本编辑器开发中常见
 API，且提供了更高的抽象层，使 Textbus 不仅易于上手，同时还能驱动复杂的富文本应用。
 
-本项目为 Textbus PC 端浏览器中间层实现，提供了 Textbus PC 端所需要的编辑器基本支持能力。如光标、选区桥接、DOM 解析及渲染能力桥接等。
-
-如果你需要一个开箱即用的编辑器，请参考[官方文档](https://textbus.io)。
-
-## 安装
-
-```
-npm install @textbus/core @textbus/platform-browser
-```
-
-## 创建编辑器
-
-```ts
-import { Viewer, ViewOptions } from '@textbus/browser'
-
-import { rootComponent, rootComponentLoader } from './root.component'
-
-const config: ViewOptions = {
-  // ...配置项
-}
-
-const editor = new Viewer(rootComponent, rootComponentLoader, config)
-```
-
-其中 `rootComponent`，`rootComponentLoader` 实现请参考[官方文档](https://textbus.io/docs/guide)。
-
-### 配置项
-
-配置项接口如下：
-
-```ts
-export interface ViewModule extends Module {
-  componentLoaders?: ComponentLoader[]
-  formatLoaders?: FormatLoader[]
-}
-
-/**
- * Textbus PC 端配置接口
- */
-export interface ViewOptions extends TextbusConfig {
-  imports?: ViewModule[]
-  /** 自动获取焦点 */
-  autoFocus?: boolean
-  /** 编辑区最小高度 */
-  minHeight?: string
-  /** 组件加载器 */
-  componentLoaders?: ComponentLoader[]
-  /** 格式加载器 */
-  formatLoaders?: FormatLoader[]
-  /** 默认内容 */
-  content?: string | ComponentLiteral
-  /** 文档默认样式表 */
-  styleSheets?: string[]
-  /** 配置文档编辑状态下用到的样式 */
-  editingStyleSheets?: string[]
-}
-```
-
-### 启动
-
-```ts
-const host = document.getElementById('editor')
-
-editor.mount(host).then(() => {
-  console.log('编辑器创建成功！')
-})
-```
-
-### 销毁编辑器
-
-```ts
-editor.destroy()
-```
-
-### 获取焦点
-
-```ts
-editor.focus()
-```
-
-### 取消焦点
-
-```ts
-editor.blur()
-```
-
-### 获取 HTML 内容
-
-```ts
-const content = editor.getContents().content
-```
-
-### 获取 JSON 内容
-
-```ts
-const json = editor.getJSON().content
-```
-
-### 替换内容
-
-```ts
-editor.replaceContent('<p>新内容！</p>')
-
-editor.replaceContent({
-  // 必须为 Textbus 导出的 JSON 格式
-})
-```
-
-### 清空编辑器
-
-```ts
-editor.replaceContent('')
-```
-
 ### 官方文档
 
 更多文档请参考：[中文文档](https://textbus.io)

package/bundles/browser-module.d.ts

@@ -1,4 +1,4 @@
-import { ComponentLiteral, Module } from '@textbus/core';
+import { ComponentConstructor, Component, ComponentLiteral, Module, Textbus } from '@textbus/core';
 import { Provider } from '@viewfly/core';
 import { AttributeLoader, ComponentLoader, FormatLoader } from './parser';
 import { DomAdapter } from './dom-adapter';
@@ -6,7 +6,10 @@ import { DomAdapter } from './dom-adapter';
  * Textbus PC 端配置接口
  */
 export interface ViewOptions {
-    adapter: DomAdapter<any, any>;
+    /** 跨平台适配器 */
+    adapter: DomAdapter;
+    /** 编辑器根节点 */
+    renderTo(): HTMLElement;
     /** 自动获取焦点 */
     autoFocus?: boolean;
     /** 编辑区最小高度 */
@@ -17,17 +20,29 @@ export interface ViewOptions {
     formatLoaders?: FormatLoader<any>[];
     /** 属性加载器 */
     attributeLoaders?: AttributeLoader<any>[];
-    /** 默认内容 */
-    content?: string | ComponentLiteral;
     /** 使用 contentEditable 作为编辑器控制可编辑范围 */
     useContentEditable?: boolean;
 }
 export declare class BrowserModule implements Module {
-    host: HTMLElement;
     config: ViewOptions;
     providers: Provider[];
     private workbench;
-    constructor(host: HTMLElement, config: ViewOptions);
-    onDestroy(): void;
+    constructor(config: ViewOptions);
+    /**
+     * 解析 HTML 并返回一个组件实例
+     * @param html 要解析的 HTML
+     * @param rootComponentLoader 文档根组件加载器
+     * @param textbus
+     */
+    readDocumentByHTML(html: string, rootComponentLoader: ComponentLoader, textbus: Textbus): Component;
+    /**
+     * 将组件数据解析到组件实例中
+     * @param data 要解析的 JSON 数据
+     * @param rootComponent 根组件
+     * @param textbus
+     */
+    readDocumentByComponentLiteral(data: ComponentLiteral, rootComponent: ComponentConstructor, textbus: Textbus): Component;
+    setup(textbus: Textbus): () => void;
+    onAfterStartup(textbus: Textbus): void;
     private static createLayout;
 }

package/bundles/collaborate-cursor.d.ts

@@ -1,16 +1,7 @@
-import { Injector } from '@viewfly/core';
-import { Selection, SelectionPaths, AbstractSelection, Scheduler } from '@textbus/core';
+import { Selection, AbstractSelection, Scheduler, Textbus } from '@textbus/core';
+import { UserActivity } from '@textbus/collaborate';
 import { SelectionBridge } from './selection-bridge';
 import { Rect } from './_utils/uikit';
-/**
- * 远程用户及光标位置信息
- */
-export interface RemoteSelection {
-    id: string;
-    color: string;
-    username: string;
-    paths: SelectionPaths;
-}
 export interface SelectionRect extends Rect {
     color: string;
     username: string;
@@ -34,6 +25,7 @@ export declare class CollaborateCursor {
     private nativeSelection;
     private scheduler;
     private selection;
+    private userActivity;
     private awarenessDelegate?;
     private host;
     private canvasContainer;
@@ -44,7 +36,9 @@ export declare class CollaborateCursor {
     private subscription;
     private currentSelection;
     private container;
-    constructor(injector: Injector, nativeSelection: SelectionBridge, scheduler: Scheduler, selection: Selection, awarenessDelegate?: CollaborateSelectionAwarenessDelegate | undefined);
+    private ratio;
+    constructor(textbus: Textbus, nativeSelection: SelectionBridge, scheduler: Scheduler, selection: Selection, userActivity: UserActivity, awarenessDelegate?: CollaborateSelectionAwarenessDelegate | undefined);
+    init(): void;
     /**
      * 刷新协作光标，由于 Textbus 只会绘制可视区域的光标，当可视区域发生变化时，需要重新绘制
      */
@@ -54,7 +48,7 @@ export declare class CollaborateCursor {
      * 根据远程用户光标位置，绘制协作光标
      * @param paths
      */
-    draw(paths: RemoteSelection[]): void;
+    private draw;
     protected drawUserCursor(rects: SelectionRect[]): void;
     private getUserCursor;
 }

package/bundles/dom-adapter.d.ts

@@ -1,66 +1,6 @@
-import { ComponentInstance, Slot, ViewAdapter, NodeLocation, VElement, VTextNode } from '@textbus/core';
-/**
- * Textbus PC 端浏览器渲染能力桥接器抽象类，提供了 DOM 元素查询能力，具体渲染能力由各前端框架实现相应桥接
- */
-export declare abstract class DomAdapter<ViewComponent, ViewElement> extends ViewAdapter {
-    private mount;
+import { Adapter } from '@textbus/core';
+import { Subject } from '@tanbo/stream';
+export declare abstract class DomAdapter<ViewComponent extends object = object, ViewElement extends object = object> extends Adapter<HTMLElement, Node, ViewComponent, ViewElement> {
+    onViewUpdated: Subject<void>;
     host: HTMLElement;
-    protected componentRootElementCaches: {
-        set: {
-            (key: ComponentInstance<unknown, unknown, unknown>, value: HTMLElement): void;
-            (key: HTMLElement, value: ComponentInstance<unknown, unknown, unknown>): void;
-        };
-        get: {
-            (key: ComponentInstance<unknown, unknown, unknown>): HTMLElement;
-            (key: HTMLElement): ComponentInstance<unknown, unknown, unknown>;
-        };
-        remove: (key: HTMLElement | ComponentInstance<unknown, unknown, unknown>) => void;
-    };
-    protected slotRootNativeElementCaches: {
-        set: {
-            (key: Slot<any>, value: HTMLElement): void;
-            (key: HTMLElement, value: Slot<any>): void;
-        };
-        get: {
-            (key: Slot<any>): HTMLElement;
-            (key: HTMLElement): Slot<any>;
-        };
-        remove: (key: HTMLElement | Slot<any>) => void;
-    };
-    protected slotRootVElementCaches: WeakMap<Slot<any>, VElement>;
-    protected constructor(mount: (host: HTMLElement, viewComponent: ViewComponent) => (void | (() => void)));
-    render(rootComponent: ComponentInstance): void | (() => void);
-    abstract componentRender(component: ComponentInstance): ViewComponent;
-    abstract slotRender(slot: Slot, slotHostRender: (children: Array<VElement | VTextNode | ComponentInstance>) => VElement, renderEnv: any): ViewElement;
-    copy(): void;
-    /**
-     * 根据组件获取组件的根 DOM 节点
-     * @param component
-     */
-    getNativeNodeByComponent(component: ComponentInstance): HTMLElement | null;
-    /**
-     * 根据 DOM 节点，获对对应的组件根节点，如传入的 DOM 节点不为组件的根节点，则返回 null
-     * @param node
-     */
-    getComponentByNativeNode(node: HTMLElement): ComponentInstance | null;
-    /**
-     * 根据插槽获取插槽的根 DOM 节点
-     * @param slot
-     */
-    getNativeNodeBySlot(slot: Slot): HTMLElement | null;
-    /**
-     * 根据 DOM 节点，获对对应的插槽根节点，如传入的 DOM 节点不为插槽的根节点，则返回 null
-     * @param node
-     */
-    getSlotByNativeNode(node: HTMLElement): Slot | null;
-    /**
-     * 获取插槽内容节点集合
-     * @param slot
-     */
-    getNodesBySlot(slot: Slot): Node[];
-    /**
-     * 获取原生节点的原始数据在文档中的位置
-     * @param node
-     */
-    getLocationByNativeNode(node: Node): NodeLocation | null;
 }