@textbus/platform-browser 3.0.0-alpha.20

package/README.md

@@ -0,0 +1,123 @@
+Textbus PC 浏览器支持模块
+=====================
+
+Textbus 是一套用于构建富交互的富文本编辑框架。和大多数富文本编辑器不同的是，Textbus 以组件为核心，格式为辅助，并大幅简化了富文本编辑器开发中常见
+API，且提供了更高的抽象层，使 Textbus 不仅易于上手，同时还能驱动复杂的富文本应用。
+
+本项目为 Textbus PC 端浏览器中间层实现，提供了 Textbus PC 端所需要的编辑器基本支持能力。如光标、选区桥接、DOM 解析及渲染能力桥接等。
+
+如果你需要一个开箱即用的编辑器，请参考[官方文档](https://textbus.io)。
+
+## 安装
+
+```
+npm install @textbus/core @textbus/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/_utils/env.d.ts

@@ -0,0 +1,3 @@
+export declare const isWindows: () => boolean;
+export declare const isMac: () => boolean;
+export declare const isSafari: () => boolean;

package/bundles/_utils/uikit.d.ts

@@ -0,0 +1,16 @@
+export interface UIElementParams {
+    classes?: string[];
+    attrs?: {
+        [key: string]: any;
+    };
+    props?: {
+        [key: string]: any;
+    };
+    styles?: {
+        [key: string]: any;
+    };
+    children?: (Node | null)[];
+    on?: Record<string, (ev: Event) => void>;
+}
+export declare function createElement(tagName: string, options?: UIElementParams): HTMLElement;
+export declare function createTextNode(content: string): Text;

package/bundles/collaborate/collaborate-cursor.d.ts

@@ -0,0 +1,44 @@
+import { Injector } from '@tanbo/di';
+import { Selection, SelectionPaths, AbstractSelection, Scheduler } from '@textbus/core';
+import { SelectionBridge, Rect } from '../core/selection-bridge';
+export interface RemoteSelection {
+    id: string;
+    color: string;
+    username: string;
+    paths: SelectionPaths;
+}
+export interface SelectionRect extends Rect {
+    color: string;
+    username: string;
+    id: string;
+}
+export interface RemoteSelectionCursor {
+    cursor: HTMLElement;
+    anchor: HTMLElement;
+    userTip: HTMLElement;
+}
+export declare abstract class CollaborateSelectionAwarenessDelegate {
+    abstract getRects(abstractSelection: AbstractSelection, nativeRange: Range): false | Rect[];
+}
+export declare class CollaborateCursor {
+    private injector;
+    private nativeSelection;
+    private scheduler;
+    private selection;
+    private awarenessDelegate;
+    private host;
+    private canvasContainer;
+    private canvas;
+    private context;
+    private tooltips;
+    private onRectsChange;
+    private subscription;
+    private currentSelection;
+    private container;
+    constructor(injector: Injector, nativeSelection: SelectionBridge, scheduler: Scheduler, selection: Selection, awarenessDelegate?: CollaborateSelectionAwarenessDelegate | null);
+    refresh(): void;
+    destroy(): void;
+    draw(paths: RemoteSelection[]): void;
+    protected drawUserCursor(rects: SelectionRect[]): void;
+    private getUserCursor;
+}

package/bundles/core/_api.d.ts

@@ -0,0 +1,6 @@
+export * from './caret';
+export * from './dom-renderer';
+export * from './injection-tokens';
+export * from './input';
+export * from './selection-bridge';
+export * from './types';

package/bundles/core/caret.d.ts

@@ -0,0 +1,51 @@
+import { Observable } from '@tanbo/stream';
+import { Injector } from '@tanbo/di';
+import { Scheduler } from '@textbus/core';
+import { Rect } from './selection-bridge';
+export declare function getLayoutRectByRange(range: Range): Rect;
+export interface CaretPosition {
+    left: number;
+    top: number;
+    height: number;
+}
+export interface CaretStyle {
+    height: string;
+    lineHeight: string;
+    fontSize: string;
+}
+export interface CaretLimit {
+    top: number;
+    bottom: number;
+}
+export interface Scroller {
+    onScroll: Observable<any>;
+    getLimit(): CaretLimit;
+    setOffset(offsetScrollTop: number): void;
+}
+export declare class Caret {
+    private scheduler;
+    private injector;
+    onPositionChange: Observable<CaretPosition | null>;
+    onStyleChange: Observable<CaretStyle>;
+    elementRef: HTMLElement;
+    private timer;
+    private caret;
+    private oldPosition;
+    private set display(value);
+    private get display();
+    private _display;
+    private flashing;
+    private subs;
+    private positionChangeEvent;
+    private styleChangeEvent;
+    private oldRange;
+    private isFixed;
+    private editorMask;
+    constructor(scheduler: Scheduler, injector: Injector);
+    refresh(isFixedCaret?: boolean): void;
+    show(range: Range, restart: boolean): void;
+    hide(): void;
+    destroy(): void;
+    correctScrollTop(scroller: Scroller): void;
+    private updateCursorPosition;
+}

package/bundles/core/dom-renderer.d.ts

@@ -0,0 +1,51 @@
+import { NativeNode, NativeRenderer } from '@textbus/core';
+/**
+ * Textbus PC 端浏览器渲染能力实现
+ */
+export declare class DomRenderer implements NativeRenderer {
+    isSVG: RegExp;
+    xlinkNameSpace: string;
+    possibleXlinkNames: {
+        xlinkActuate: string;
+        xlinkactuate: string;
+        'xlink:actuate': string;
+        xlinkArcrole: string;
+        xlinkarcrole: string;
+        'xlink:arcrole': string;
+        xlinkHref: string;
+        xlinkhref: string;
+        'xlink:href': string;
+        xlinkRole: string;
+        xlinkrole: string;
+        'xlink:role': string;
+        xlinkShow: string;
+        xlinkshow: string;
+        'xlink:show': string;
+        xlinkTitle: string;
+        xlinktitle: string;
+        'xlink:title': string;
+        xlinkType: string;
+        xlinktype: string;
+        'xlink:type': string;
+    };
+    formElement: Record<string, string[]>;
+    listen<T = any>(node: NativeNode, type: string, callback: (ev: T) => any): void;
+    unListen(node: NativeNode, type: string, callback: (ev: any) => any): void;
+    createTextNode(textContent: string): NativeNode;
+    createElement(name: string): NativeNode;
+    appendChild(parent: NativeNode, newChild: NativeNode): void;
+    remove(node: NativeNode): void;
+    insertBefore(newNode: NativeNode, ref: NativeNode): void;
+    getChildByIndex(parent: NativeNode, index: number): NativeNode | null;
+    addClass(target: NativeNode, name: string): void;
+    removeClass(target: NativeNode, name: string): void;
+    setStyle(target: NativeNode, key: string, value: any): void;
+    removeStyle(target: NativeNode, key: string): void;
+    setAttribute(target: NativeNode, key: string, value: string): void;
+    removeAttribute(target: NativeNode, key: string): void;
+    setXlinkAttribute(target: NativeNode, key: string, value: string): void;
+    removeXlinkAttribute(target: NativeNode, key: string): void;
+    replace(newChild: NativeNode, oldChild: NativeNode): void;
+    copy(): void;
+    static replaceEmpty(s: string, target: string): string;
+}

package/bundles/core/injection-tokens.d.ts

@@ -0,0 +1,18 @@
+import { InjectionToken } from '@tanbo/di';
+import { ViewOptions } from './types';
+/**
+ * 编辑器可选项依赖注入 token
+ */
+export declare const EDITOR_OPTIONS: InjectionToken<ViewOptions>;
+/**
+ * 编辑器容器依赖注入 token
+ */
+export declare const VIEW_CONTAINER: InjectionToken<HTMLElement>;
+/**
+ * 编辑器容器依赖注入 token
+ */
+export declare const VIEW_DOCUMENT: InjectionToken<HTMLElement>;
+/**
+ * 编辑器容器遮罩层 token
+ */
+export declare const VIEW_MASK: InjectionToken<HTMLElement>;

package/bundles/core/input.d.ts

@@ -0,0 +1,40 @@
+import { Commander, Controller, Keyboard, Scheduler, Selection } from '@textbus/core';
+import { Parser } from '../dom-support/parser';
+import { Caret } from './caret';
+/**
+ * Textbus PC 端输入实现
+ */
+export declare class Input {
+    private parser;
+    private keyboard;
+    private commander;
+    private selection;
+    private controller;
+    private scheduler;
+    private caret;
+    static openExperimentalCompositionInput: boolean;
+    onReady: Promise<void>;
+    private container;
+    private subscription;
+    private doc;
+    private textarea;
+    private isFocus;
+    private inputFormatterId;
+    private inputFormatter;
+    private nativeFocus;
+    private isSafari;
+    private isMac;
+    private isWindows;
+    private isSougouPinYin;
+    constructor(parser: Parser, keyboard: Keyboard, commander: Commander, selection: Selection, controller: Controller, scheduler: Scheduler, caret: Caret);
+    focus(): void;
+    blur(): void;
+    destroy(): void;
+    private init;
+    private handleDefaultActions;
+    private handlePaste;
+    private handleShortcut;
+    private handleInput;
+    private experimentalCompositionInput;
+    private createEditableFrame;
+}

package/bundles/core/selection-bridge.d.ts

@@ -0,0 +1,77 @@
+import { Observable } from '@tanbo/stream';
+import { Injector } from '@tanbo/di';
+import { NativeSelectionBridge, NativeSelectionConnector, Renderer, SelectionPosition, AbstractSelection, RootComponentRef, Controller, Selection } from '@textbus/core';
+import { Caret } from './caret';
+import { Input } from './input';
+/**
+ * 选区焦点可视位置
+ */
+export interface Rect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/**
+ * Textbus PC 端选区桥接实现
+ */
+export declare class SelectionBridge implements NativeSelectionBridge {
+    private injector;
+    caret: Caret;
+    private controller;
+    private selection;
+    private rootComponentRef;
+    private input;
+    private renderer;
+    onSelectionChange: Observable<Range | null>;
+    nativeSelection: globalThis.Selection;
+    private selectionMaskElement;
+    private selectionChangeEvent;
+    private subs;
+    private sub;
+    private connector;
+    private ignoreSelectionChange;
+    private changeFromUser;
+    private docContainer;
+    private maskContainer;
+    private cacheCaretPositionTimer;
+    private oldCaretPosition;
+    constructor(injector: Injector, caret: Caret, controller: Controller, selection: Selection, rootComponentRef: RootComponentRef, input: Input, renderer: Renderer);
+    connect(connector: NativeSelectionConnector): void;
+    disConnect(): void;
+    getRect(location: SelectionPosition): Rect | null;
+    restore(abstractSelection: AbstractSelection | null, formLocal: boolean): void;
+    destroy(): void;
+    getPositionByRange(abstractSelection: AbstractSelection): {
+        focus: {
+            node: Node;
+            offset: number;
+        } | null;
+        anchor: {
+            node: Node;
+            offset: number;
+        } | null;
+    };
+    getPreviousLinePositionByCurrent(position: SelectionPosition): SelectionPosition | null;
+    getNextLinePositionByCurrent(position: SelectionPosition): SelectionPosition | null;
+    private getLinePosition;
+    /**
+     * 获取选区向上移动一行的位置。
+     * @param currentPosition
+     * @param startLeft 参考位置。
+     */
+    private getPreviousLinePositionByOffset;
+    /**
+     * 获取选区向下移动一行的位置。
+     * @param currentPosition
+     * @param startLeft 参考位置。
+     */
+    private getNextLinePositionByOffset;
+    private unListen;
+    private listen;
+    private syncSelection;
+    private findSelectedNodeAndOffset;
+    private getCorrectedPosition;
+    private findFocusNode;
+    private findFocusNodeByParent;
+}

package/bundles/core/types.d.ts

@@ -0,0 +1,29 @@
+import { ComponentLiteral, Module, TextbusConfig } from '@textbus/core';
+import { FormatLoader, ComponentLoader, AttributeLoader } from '../dom-support/parser';
+export interface ViewModule extends Module {
+    componentLoaders?: ComponentLoader[];
+    formatLoaders?: FormatLoader<any>[];
+    attributeLoaders?: AttributeLoader<any>[];
+}
+/**
+ * Textbus PC 端配置接口
+ */
+export interface ViewOptions extends TextbusConfig {
+    imports?: ViewModule[];
+    /** 自动获取焦点 */
+    autoFocus?: boolean;
+    /** 编辑区最小高度 */
+    minHeight?: string;
+    /** 组件加载器 */
+    componentLoaders?: ComponentLoader[];
+    /** 格式加载器 */
+    formatLoaders?: FormatLoader<any>[];
+    /** 属性加载器 */
+    attributeLoaders?: AttributeLoader<any>[];
+    /** 默认内容 */
+    content?: string | ComponentLiteral;
+    /** 文档默认样式表 */
+    styleSheets?: string[];
+    /** 配置文档编辑状态下用到的样式 */
+    editingStyleSheets?: string[];
+}

package/bundles/dom-support/_api.d.ts

@@ -0,0 +1,2 @@
+export * from './output-translator';
+export * from './parser';

package/bundles/dom-support/output-translator.d.ts

@@ -0,0 +1,16 @@
+import { VElement } from '@textbus/core';
+/**
+ * HTML 输出转换器
+ */
+export declare class OutputTranslator {
+    static singleTags: string[];
+    static simpleXSSFilter: {
+        text(text: string): string;
+        attrName(text: string): string;
+        attrValue(text: string): string;
+    };
+    private singleTagTest;
+    transform(vDom: VElement): string;
+    private vDomToHTMLString;
+    private replaceEmpty;
+}

package/bundles/dom-support/parser.d.ts

@@ -0,0 +1,56 @@
+import { Injector } from '@tanbo/di';
+import { Attribute, ComponentInstance, Formatter, FormatValue, Slot } from '@textbus/core';
+import { ViewOptions } from '../core/types';
+export interface ComponentResources {
+    links?: Array<{
+        [key: string]: string;
+    }>;
+    styles?: string[];
+    scripts?: string[];
+    editModeStyles?: string[];
+}
+export interface SlotParser {
+    <T extends Slot>(childSlot: T, slotRootElement: HTMLElement, slotContentHostElement?: HTMLElement): T;
+}
+/**
+ * 组件加载器
+ */
+export interface ComponentLoader {
+    /** 组件所需要的外部资源 */
+    resources?: ComponentResources;
+    /** 识别组件的匹配方法 */
+    match(element: HTMLElement): boolean;
+    /** 读取组件内容的方法 */
+    read(element: HTMLElement, context: Injector, slotParser: SlotParser): ComponentInstance | Slot;
+}
+export interface FormatLoaderReadResult<T extends FormatValue> {
+    formatter: Formatter<T>;
+    value: T;
+}
+export interface FormatLoader<T extends FormatValue> {
+    match(element: HTMLElement): boolean;
+    read(element: HTMLElement): FormatLoaderReadResult<T>;
+}
+export interface AttributeLoaderReadResult<T extends FormatValue> {
+    attribute: Attribute<T>;
+    value: T;
+}
+export interface AttributeLoader<T extends FormatValue> {
+    match(element: HTMLElement): boolean;
+    read(element: HTMLElement): AttributeLoaderReadResult<T>;
+}
+export declare class Parser {
+    private options;
+    private injector;
+    static parseHTML(html: string): HTMLElement;
+    componentLoaders: ComponentLoader[];
+    formatLoaders: FormatLoader<any>[];
+    attributeLoaders: AttributeLoader<any>[];
+    constructor(options: ViewOptions, injector: Injector);
+    parseDoc(html: string, rootComponentLoader: ComponentLoader): Slot<any> | ComponentInstance<import("@textbus/core").ComponentExtends, any, unknown>;
+    parse(html: string, rootSlot: Slot): Slot<any>;
+    private readComponent;
+    private readFormats;
+    private readSlot;
+    private applyFormats;
+}