@textbus/platform-browser 3.3.1 → 3.3.3

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

@@ -2,6 +2,9 @@ import { Injector } from '@tanbo/di';
 import { Selection, SelectionPaths, AbstractSelection, Scheduler } from '@textbus/core';
 import { SelectionBridge } from '../core/selection-bridge';
 import { Rect } from '../_utils/uikit';
+/**
+ * 远程用户及光标位置信息
+ */
 export interface RemoteSelection {
     id: string;
     color: string;
@@ -18,9 +21,15 @@ export interface RemoteSelectionCursor {
     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;
@@ -37,8 +46,15 @@ export declare class CollaborateCursor {
     private currentSelection;
     private container;
     constructor(injector: Injector, nativeSelection: SelectionBridge, scheduler: Scheduler, selection: Selection, awarenessDelegate?: CollaborateSelectionAwarenessDelegate | undefined);
+    /**
+     * 刷新协作光标，由于 Textbus 只会绘制可视区域的光标，当可视区域发生变化时，需要重新绘制
+     */
     refresh(): void;
     destroy(): void;
+    /**
+     * 根据远程用户光标位置，绘制协作光标
+     * @param paths
+     */
     draw(paths: RemoteSelection[]): void;
     protected drawUserCursor(rects: SelectionRect[]): void;
     private getUserCursor;

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

@@ -1,6 +1,6 @@
 import { VElement } from '@textbus/core';
 /**
- * HTML 输出转换器
+ * HTML 输出转换器，用于将虚拟 DOM 转换为 HTML 字符串
  */
 export declare class OutputTranslator {
     static singleTags: string[];
@@ -10,6 +10,10 @@ export declare class OutputTranslator {
         attrValue(text: string): string;
     };
     private singleTagTest;
+    /**
+     * 将虚拟 DOM 转换为 HTML 字符串的方法
+     * @param vDom 虚拟 DOM 节点
+     */
     transform(vDom: VElement): string;
     private vDomToHTMLString;
     private replaceEmpty;

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

@@ -1,6 +1,9 @@
 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;
@@ -9,7 +12,18 @@ export interface ComponentResources {
     scripts?: string[];
     editModeStyles?: string[];
 }
+/**
+ * 插槽解析器
+ */
 export interface SlotParser {
+    /**
+     * 将指定 DOM 节点解析为插槽数据
+     * @param childSlot 储存数据的插槽
+     * @param slotRootElement 插槽的根节点
+     * @param slotContentHostElement 插槽的内容节点
+     *
+     * 注意：当不传入内容节点时，Textbus 会把根节点当成内容节点
+     */
     <T extends Slot>(childSlot: T, slotRootElement: HTMLElement, slotContentHostElement?: HTMLElement): T;
 }
 /**
@@ -27,18 +41,43 @@ export interface FormatLoaderReadResult<T extends FormatValue> {
     formatter: Formatter<T>;
     value: T;
 }
+/**
+ * 格式加载器
+ */
 export interface FormatLoader<T extends FormatValue> {
+    /**
+     * 匹配一个 DOM 节点是否是某个格式节点
+     * @param element
+     */
     match(element: HTMLElement): boolean;
+    /**
+     * 读取匹配到的节点，并返回读取后的信息
+     * @param element
+     */
     read(element: HTMLElement): FormatLoaderReadResult<T>;
 }
 export interface AttributeLoaderReadResult<T extends FormatValue> {
     attribute: Attribute<T>;
     value: T;
 }
+/**
+ * 属性加载器
+ */
 export interface AttributeLoader<T extends FormatValue> {
+    /**
+     * 匹配一个 DOM 节点是否是某个属性节点
+     * @param element
+     */
     match(element: HTMLElement): boolean;
+    /**
+     * 读取匹配到的节点，并返回读取后的信息
+     * @param element
+     */
     read(element: HTMLElement): AttributeLoaderReadResult<T>;
 }
+/**
+ * 用于解析 HTML，并把 HTML 内容转换为 Textbus 可以支持的组件或插槽数据
+ */
 export declare class Parser {
     private options;
     private injector;
@@ -47,7 +86,17 @@ export declare class Parser {
     formatLoaders: FormatLoader<any>[];
     attributeLoaders: AttributeLoader<any>[];
     constructor(options: ViewOptions, injector: Injector);
+    /**
+     * 使用指定的组件加载器解析一段 HTML 字符串
+     * @param html
+     * @param rootComponentLoader
+     */
     parseDoc(html: string, rootComponentLoader: ComponentLoader): Slot<any> | ComponentInstance<import("@textbus/core").ComponentExtends, any, unknown>;
+    /**
+     * 将一段 HTML 解析到指定插槽
+     * @param html
+     * @param rootSlot
+     */
     parse(html: string, rootSlot: Slot): Slot<any>;
     private readComponent;
     private readFormats;

package/bundles/index.esm.js

@@ -463,28 +463,8 @@ let SelectionBridge = class SelectionBridge {
                 }
             }));
         }
-        const oldSelection = {
-            focusNode: null,
-            focusOffset: null,
-            anchorNode: null,
-            anchorOffset: null
-        };
         this.subs.push(fromEvent(document, 'selectionchange').pipe().subscribe(() => {
-            const { anchorNode, anchorOffset, focusOffset, focusNode } = this.nativeSelection;
-            if (anchorNode !== oldSelection.anchorNode ||
-                anchorOffset !== oldSelection.anchorOffset ||
-                focusNode !== oldSelection.focusNode ||
-                focusOffset !== oldSelection.focusOffset) {
-                this.syncSelection(connector);
-                oldSelection.anchorNode = anchorNode;
-                oldSelection.anchorOffset = anchorOffset;
-                oldSelection.focusNode = focusNode;
-                oldSelection.focusOffset = focusOffset;
-            }
-            else {
-                const nativeRange = this.nativeSelection.getRangeAt(0);
-                this.selectionChangeEvent.next(nativeRange || null);
-            }
+            this.syncSelection(connector);
         }));
     }
     syncSelection(connector) {
@@ -558,7 +538,10 @@ let SelectionBridge = class SelectionBridge {
                     nativeRange.setEnd(end.node, end.offset);
                 }
                 connector.setSelection(abstractSelection);
-                if (selection.isCollapsed) {
+                if (selection.isCollapsed && (rawRange.startContainer !== start.node ||
+                    rawRange.startOffset !== start.offset ||
+                    rawRange.endContainer !== end.node ||
+                    rawRange.endOffset !== end.offset)) {
                     rawRange.setStart(start.node, start.offset);
                     rawRange.setEnd(end.node, end.offset);
                 }
@@ -752,8 +735,14 @@ SelectionBridge = __decorate([
         Renderer])
 ], SelectionBridge);
 
+/**
+ * 远程光标绘制范围计算代理类，可用于定制特定场景下的远程选区绘制，如表格有选区，不会遵守常见的文档流形式
+ */
 class CollaborateSelectionAwarenessDelegate {
 }
+/**
+ * 协作光标绘制类
+ */
 let CollaborateCursor = class CollaborateCursor {
     constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
         this.injector = injector;
@@ -828,12 +817,19 @@ let CollaborateCursor = class CollaborateCursor {
             this.refresh();
         }));
     }
+    /**
+     * 刷新协作光标，由于 Textbus 只会绘制可视区域的光标，当可视区域发生变化时，需要重新绘制
+     */
     refresh() {
         this.draw(this.currentSelection);
     }
     destroy() {
         this.subscription.unsubscribe();
     }
+    /**
+     * 根据远程用户光标位置，绘制协作光标
+     * @param paths
+     */
     draw(paths) {
         this.currentSelection = paths;
         const containerRect = this.container.getBoundingClientRect();
@@ -1214,6 +1210,9 @@ DomRenderer = DomRenderer_1 = __decorate([
 ], DomRenderer);
 
 var Parser_1;
+/**
+ * 用于解析 HTML，并把 HTML 内容转换为 Textbus 可以支持的组件或插槽数据
+ */
 let Parser = Parser_1 = class Parser {
     static parseHTML(html) {
         return new DOMParser().parseFromString(html, 'text/html').body;
@@ -1239,12 +1238,22 @@ let Parser = Parser_1 = class Parser {
         this.formatLoaders = formatLoaders;
         this.attributeLoaders = attributeLoaders;
     }
+    /**
+     * 使用指定的组件加载器解析一段 HTML 字符串
+     * @param html
+     * @param rootComponentLoader
+     */
     parseDoc(html, rootComponentLoader) {
         const element = Parser_1.parseHTML(html);
         return rootComponentLoader.read(element, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
             return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
         });
     }
+    /**
+     * 将一段 HTML 解析到指定插槽
+     * @param html
+     * @param rootSlot
+     */
     parse(html, rootSlot) {
         const element = Parser_1.parseHTML(html);
         return this.readFormats(element, rootSlot);
@@ -1530,7 +1539,7 @@ class ExperimentalCaret {
         else {
             height = parseFloat(fontSize) * parseFloat(lineHeight);
         }
-        const boxHeight = Math.floor(Math.max(height, rect.height));
+        const boxHeight = Math.max(Math.floor(Math.max(height, rect.height)), 12);
         // const boxHeight = Math.floor(height)
         let rectTop = rect.top;
         if (rect.height < height) {
@@ -2345,12 +2354,16 @@ NativeInput = __decorate([
 
 var OutputTranslator_1;
 /**
- * HTML 输出转换器
+ * HTML 输出转换器，用于将虚拟 DOM 转换为 HTML 字符串
  */
 let OutputTranslator = OutputTranslator_1 = class OutputTranslator {
     constructor() {
         this.singleTagTest = new RegExp(`^(${OutputTranslator_1.singleTags.join('|')})$`, 'i');
     }
+    /**
+     * 将虚拟 DOM 转换为 HTML 字符串的方法
+     * @param vDom 虚拟 DOM 节点
+     */
     transform(vDom) {
         return vDom.children.map(child => {
             return this.vDomToHTMLString(child);

package/bundles/index.js

@@ -465,28 +465,8 @@ exports.SelectionBridge = class SelectionBridge {
                 }
             }));
         }
-        const oldSelection = {
-            focusNode: null,
-            focusOffset: null,
-            anchorNode: null,
-            anchorOffset: null
-        };
         this.subs.push(stream.fromEvent(document, 'selectionchange').pipe().subscribe(() => {
-            const { anchorNode, anchorOffset, focusOffset, focusNode } = this.nativeSelection;
-            if (anchorNode !== oldSelection.anchorNode ||
-                anchorOffset !== oldSelection.anchorOffset ||
-                focusNode !== oldSelection.focusNode ||
-                focusOffset !== oldSelection.focusOffset) {
-                this.syncSelection(connector);
-                oldSelection.anchorNode = anchorNode;
-                oldSelection.anchorOffset = anchorOffset;
-                oldSelection.focusNode = focusNode;
-                oldSelection.focusOffset = focusOffset;
-            }
-            else {
-                const nativeRange = this.nativeSelection.getRangeAt(0);
-                this.selectionChangeEvent.next(nativeRange || null);
-            }
+            this.syncSelection(connector);
         }));
     }
     syncSelection(connector) {
@@ -560,7 +540,10 @@ exports.SelectionBridge = class SelectionBridge {
                     nativeRange.setEnd(end.node, end.offset);
                 }
                 connector.setSelection(abstractSelection);
-                if (selection.isCollapsed) {
+                if (selection.isCollapsed && (rawRange.startContainer !== start.node ||
+                    rawRange.startOffset !== start.offset ||
+                    rawRange.endContainer !== end.node ||
+                    rawRange.endOffset !== end.offset)) {
                     rawRange.setStart(start.node, start.offset);
                     rawRange.setEnd(end.node, end.offset);
                 }
@@ -754,8 +737,14 @@ exports.SelectionBridge = __decorate([
         core.Renderer])
 ], exports.SelectionBridge);
 
+/**
+ * 远程光标绘制范围计算代理类，可用于定制特定场景下的远程选区绘制，如表格有选区，不会遵守常见的文档流形式
+ */
 class CollaborateSelectionAwarenessDelegate {
 }
+/**
+ * 协作光标绘制类
+ */
 exports.CollaborateCursor = class CollaborateCursor {
     constructor(injector, nativeSelection, scheduler, selection, awarenessDelegate) {
         this.injector = injector;
@@ -830,12 +819,19 @@ exports.CollaborateCursor = class CollaborateCursor {
             this.refresh();
         }));
     }
+    /**
+     * 刷新协作光标，由于 Textbus 只会绘制可视区域的光标，当可视区域发生变化时，需要重新绘制
+     */
     refresh() {
         this.draw(this.currentSelection);
     }
     destroy() {
         this.subscription.unsubscribe();
     }
+    /**
+     * 根据远程用户光标位置，绘制协作光标
+     * @param paths
+     */
     draw(paths) {
         this.currentSelection = paths;
         const containerRect = this.container.getBoundingClientRect();
@@ -1216,6 +1212,9 @@ exports.DomRenderer = DomRenderer_1 = __decorate([
 ], exports.DomRenderer);
 
 var Parser_1;
+/**
+ * 用于解析 HTML，并把 HTML 内容转换为 Textbus 可以支持的组件或插槽数据
+ */
 exports.Parser = Parser_1 = class Parser {
     static parseHTML(html) {
         return new DOMParser().parseFromString(html, 'text/html').body;
@@ -1241,12 +1240,22 @@ exports.Parser = Parser_1 = class Parser {
         this.formatLoaders = formatLoaders;
         this.attributeLoaders = attributeLoaders;
     }
+    /**
+     * 使用指定的组件加载器解析一段 HTML 字符串
+     * @param html
+     * @param rootComponentLoader
+     */
     parseDoc(html, rootComponentLoader) {
         const element = Parser_1.parseHTML(html);
         return rootComponentLoader.read(element, this.injector, (childSlot, slotRootElement, slotContentHostElement = slotRootElement) => {
             return this.readSlot(childSlot, slotRootElement, slotContentHostElement);
         });
     }
+    /**
+     * 将一段 HTML 解析到指定插槽
+     * @param html
+     * @param rootSlot
+     */
     parse(html, rootSlot) {
         const element = Parser_1.parseHTML(html);
         return this.readFormats(element, rootSlot);
@@ -1532,7 +1541,7 @@ class ExperimentalCaret {
         else {
             height = parseFloat(fontSize) * parseFloat(lineHeight);
         }
-        const boxHeight = Math.floor(Math.max(height, rect.height));
+        const boxHeight = Math.max(Math.floor(Math.max(height, rect.height)), 12);
         // const boxHeight = Math.floor(height)
         let rectTop = rect.top;
         if (rect.height < height) {
@@ -2347,12 +2356,16 @@ exports.NativeInput = __decorate([
 
 var OutputTranslator_1;
 /**
- * HTML 输出转换器
+ * HTML 输出转换器，用于将虚拟 DOM 转换为 HTML 字符串
  */
 exports.OutputTranslator = OutputTranslator_1 = class OutputTranslator {
     constructor() {
         this.singleTagTest = new RegExp(`^(${OutputTranslator_1.singleTags.join('|')})$`, 'i');
     }
+    /**
+     * 将虚拟 DOM 转换为 HTML 字符串的方法
+     * @param vDom 虚拟 DOM 节点
+     */
     transform(vDom) {
         return vDom.children.map(child => {
             return this.vDomToHTMLString(child);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/platform-browser",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "description": "Textbus is a rich text editor and framework that is highly customizable and extensible to achieve rich wysiwyg effects.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -27,7 +27,7 @@
   "dependencies": {
     "@tanbo/di": "^1.1.4",
     "@tanbo/stream": "^1.1.9",
-    "@textbus/core": "^3.3.1",
+    "@textbus/core": "^3.3.3",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
@@ -48,5 +48,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "afa1c378f5f46be38bd4b1fe8f881e7c6e0c7478"
+  "gitHead": "eed9200db6a32b45de15797d655f07939c88764b"
 }