@visactor/vrender-core 0.22.0-vstory.1 → 0.22.0-vstory.10

package/cjs/plugins/builtin-plugin/richtext-edit-plugin.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.RichTextEditPlugin = exports.FORMAT_ELEMENT_COMMAND = exports.FORMAT_TEXT_COMMAND = void 0;
+}), exports.RichTextEditPlugin = exports.FORMAT_ELEMENT_COMMAND = exports.FORMAT_ALL_TEXT_COMMAND = exports.FORMAT_TEXT_COMMAND = void 0;
 
 const vutils_1 = require("@visactor/vutils"), generator_1 = require("../../common/generator"), graphic_1 = require("../../graphic"), animate_1 = require("../../animate"), edit_module_1 = require("./edit-module"), application_1 = require("../../application"), utils_1 = require("../../graphic/richtext/utils");
 
@@ -31,6 +31,7 @@ class Selection {
         if (!this.rt) return null;
         let idx = Math.round(cursorIdx);
         const config = this.rt.attribute.textConfig;
+        if (!config.length) return null;
         for (let i = 0; i < config.length; i++) if ("\n" !== config[i].text && (idx--, idx < 0)) return config[i][key];
         return null !== (_a = config[Math.min(idx, config.length - 1)][key]) && void 0 !== _a ? _a : this.rt.attribute[key];
     }
@@ -48,7 +49,8 @@ class Selection {
     }
 }
 
-exports.FORMAT_TEXT_COMMAND = "FORMAT_TEXT_COMMAND", exports.FORMAT_ELEMENT_COMMAND = "FORMAT_ELEMENT_COMMAND";
+exports.FORMAT_TEXT_COMMAND = "FORMAT_TEXT_COMMAND", exports.FORMAT_ALL_TEXT_COMMAND = "FORMAT_ALL_TEXT_COMMAND", 
+exports.FORMAT_ELEMENT_COMMAND = "FORMAT_ELEMENT_COMMAND";
 
 class RichTextEditPlugin {
     static tryUpdateRichtext(richtext) {
@@ -67,46 +69,62 @@ class RichTextEditPlugin {
     }
     constructor() {
         this.name = "RichTextEditPlugin", this.activeEvent = "onRegister", this._uid = generator_1.Generator.GenAutoIncrementId(), 
-        this.key = this.name + this._uid, this.editing = !1, this.pointerDown = !1, this.handleKeyDown = e => {
+        this.key = this.name + this._uid, this.editing = !1, this.focusing = !1, this.pointerDown = !1, 
+        this.formatTextCommandCb = (payload, p) => {
+            const rt = p.currRt;
+            if (!rt) return;
+            const selectionData = p.getSelection();
+            if (!selectionData) return;
+            const {selectionStartCursorIdx: selectionStartCursorIdx, curCursorIdx: curCursorIdx} = selectionData, minCursorIdx = Math.min(selectionStartCursorIdx, curCursorIdx), maxCursorIdx = Math.max(selectionStartCursorIdx, curCursorIdx), minConfigIdx = (0, 
+            edit_module_1.findConfigIndexByCursorIdx)(rt.attribute.textConfig, minCursorIdx), maxConfigIdx = (0, 
+            edit_module_1.findConfigIndexByCursorIdx)(rt.attribute.textConfig, maxCursorIdx), config = rt.attribute.textConfig.slice(minConfigIdx, maxConfigIdx);
+            this._formatTextCommand(payload, config, rt);
+        }, this.formatAllTextCommandCb = (payload, p) => {
+            const rt = p.currRt;
+            if (!rt) return;
+            const config = rt.attribute.textConfig;
+            this._formatTextCommand(payload, config, rt);
+        }, this.handleKeyDown = e => {
             this.currRt && this.editing && (this.copyToClipboard(e) || this.fullSelection(e) || this.directKey(e));
         }, this.handleInput = (text, isComposing, cursorIdx, rt) => {
-            this.hideSelection(), this.updateCbs.forEach((cb => cb("input", this)));
+            this.currRt && (this.tryShowShadowPlaceholder(), this.tryShowInputBounds(), this.hideSelection(), 
+            this.updateCbs.forEach((cb => cb("input", this))));
         }, this.handleChange = (text, isComposing, cursorIdx, rt) => {
-            this.curCursorIdx = cursorIdx, this.selectionStartCursorIdx = cursorIdx;
+            if (!this.currRt) return;
+            this.tryShowShadowPlaceholder(), this.tryShowInputBounds(), this.curCursorIdx = cursorIdx, 
+            this.selectionStartCursorIdx = cursorIdx;
             const p = this.computedCursorPosByCursorIdx(cursorIdx, rt);
             this.setCursorAndTextArea(p.x, p.y1, p.y2, rt), this.hideSelection(), this.updateCbs.forEach((cb => cb("change", this)));
-        }, this.handleFocusIn = () => {}, this.handleFocusOut = () => {
-            this.editing = !1, this.deFocus(), this.pointerDown = !1, this.triggerRender(), 
-            this.updateCbs.forEach((cb => cb("defocus", this)));
+        }, this.handleFocusIn = () => {
+            throw new Error("不会走到这里 handleFocusIn");
+        }, this.handleFocusOut = () => {
+            throw new Error("不会走到这里 handleFocusOut");
         }, this.handleMove = e => {
-            this.isRichtext(e) && (this.currRt = e.target, this.handleEnter(e), e.target.once("pointerleave", this.handleLeave), 
-            this.tryShowSelection(e, !1));
-        }, this.handleEnter = e => {
+            this.currRt && !this.currRt.attribute.editable && this.deFocus(!0), this.isEditableRichtext(e) ? (this.handleEnter(), 
+            e.target.once("pointerleave", this.handleLeave), this.tryShowSelection(e, !1)) : this.handleLeave();
+        }, this.handleEnter = () => {
             this.editing = !0, this.pluginService.stage.setCursor("text");
-        }, this.handleLeave = e => {
+        }, this.handleLeave = () => {
             this.editing = !1, this.pluginService.stage.setCursor("default");
         }, this.handlePointerDown = e => {
-            this.editing ? this.onFocus(e) : this.deFocus(), this.triggerRender(), this.pointerDown = !0, 
-            this.updateCbs.forEach((cb => cb(this.editing ? "onfocus" : "defocus", this)));
+            this.editing && this.isEditableRichtext(e) ? this.onFocus(e) : this.deFocus(!0), 
+            this.triggerRender(), this.pointerDown = !0, this.updateCbs.forEach((cb => cb(this.editing ? "onfocus" : "defocus", this)));
         }, this.handlePointerUp = e => {
             this.pointerDown = !1;
         }, this.handleDBLClick = e => {
             this.editing && this.tryShowSelection(e, !0);
         }, this.commandCbs = new Map, this.commandCbs.set(exports.FORMAT_TEXT_COMMAND, [ this.formatTextCommandCb ]), 
+        this.commandCbs.set(exports.FORMAT_ALL_TEXT_COMMAND, [ this.formatAllTextCommandCb ]), 
         this.updateCbs = [], this.timeline = new animate_1.DefaultTimeline, this.ticker = new animate_1.DefaultTicker([ this.timeline ]), 
         this.deltaX = 0, this.deltaY = 0;
     }
-    formatTextCommandCb(payload, p) {
-        const rt = p.currRt;
-        if (!rt) return;
-        const selectionData = p.getSelection();
-        if (!selectionData) return;
-        const {selectionStartCursorIdx: selectionStartCursorIdx, curCursorIdx: curCursorIdx} = selectionData, minCursorIdx = Math.min(selectionStartCursorIdx, curCursorIdx), maxCursorIdx = Math.max(selectionStartCursorIdx, curCursorIdx), minConfigIdx = (0, 
-        edit_module_1.findConfigIndexByCursorIdx)(rt.attribute.textConfig, minCursorIdx), maxConfigIdx = (0, 
-        edit_module_1.findConfigIndexByCursorIdx)(rt.attribute.textConfig, maxCursorIdx), config = rt.attribute.textConfig.slice(minConfigIdx, maxConfigIdx);
+    _formatTextCommand(payload, config, rt) {
         "bold" === payload ? config.forEach((item => item.fontWeight = "bold")) : "italic" === payload ? config.forEach((item => item.fontStyle = "italic")) : "underline" === payload ? config.forEach((item => item.underline = !0)) : "lineThrough" === payload ? config.forEach((item => item.lineThrough = !0)) : (0, 
         vutils_1.isObject)(payload) && config.forEach((item => (0, vutils_1.merge)(item, payload))), 
         rt.setAttributes(rt.attribute);
+        const cache = rt.getFrameCache();
+        cache && (this.selectionRangeByCursorIdx(this.selectionStartCursorIdx, this.curCursorIdx, cache), 
+        this.tryShowInputBounds());
     }
     dispatchCommand(command, payload) {
         const cbs = this.commandCbs.get(command);
@@ -115,9 +133,17 @@ class RichTextEditPlugin {
     registerCommand(command, cb) {
         (this.commandCbs.get(command) || []).push(cb);
     }
+    removeCommand(command, cb) {
+        const cbs = this.commandCbs.get(command) || [], idx = cbs.indexOf(cb);
+        idx > -1 && cbs.splice(idx, 1);
+    }
     registerUpdateListener(cb) {
         (this.updateCbs || []).push(cb);
     }
+    removeUpdateListener(cb) {
+        const cbs = this.updateCbs || [], idx = cbs.indexOf(cb);
+        idx > -1 && cbs.splice(idx, 1);
+    }
     activate(context) {
         this.pluginService = context, this.editModule = new edit_module_1.EditModule, context.stage.on("pointermove", this.handleMove), 
         context.stage.on("pointerdown", this.handlePointerDown), context.stage.on("pointerup", this.handlePointerUp), 
@@ -141,8 +167,10 @@ class RichTextEditPlugin {
         if (!cache) return;
         const {lines: lines} = cache, totalCursorCount = lines.reduce(((total, line) => total + line.paragraphs.length), 0) - 1;
         startIdx > endIdx && ([startIdx, endIdx] = [ endIdx, startIdx ]), startIdx = Math.min(Math.max(startIdx, -.1), totalCursorCount + .1), 
-        endIdx = Math.min(Math.max(endIdx, -.1), totalCursorCount + .1), this.curCursorIdx = endIdx, 
-        this.selectionStartCursorIdx = startIdx;
+        endIdx = Math.min(Math.max(endIdx, -.1), totalCursorCount + .1), this.selectionRangeByCursorIdx(startIdx, endIdx, cache);
+    }
+    selectionRangeByCursorIdx(startCursorIdx, endCursorIdx, cache) {
+        this.curCursorIdx = endCursorIdx, this.selectionStartCursorIdx = startCursorIdx;
         const {x: x, y1: y1, y2: y2} = this.computedCursorPosByCursorIdx(this.selectionStartCursorIdx, this.currRt);
         this.startCursorPos = {
             x: x,
@@ -157,7 +185,10 @@ class RichTextEditPlugin {
             if (!currRt) return;
             const cache = currRt.getFrameCache();
             if (!cache) return;
-            const {lines: lines} = cache, totalCursorCount = lines.reduce(((total, line) => total + line.paragraphs.length), 0) - 1;
+            const {lines: lines} = cache;
+            if (0 === lines.length) return;
+            if (!lines[0].paragraphs || 0 === lines[0].paragraphs.length) return;
+            const totalCursorCount = lines.reduce(((total, line) => total + line.paragraphs.length), 0) - 1;
             return this.selectionRange(-.1, totalCursorCount + .1), e.preventDefault(), !0;
         }
         return !1;
@@ -195,60 +226,164 @@ class RichTextEditPlugin {
         }
         return !0;
     }
+    tryShowShadowPlaceholder() {
+        if (!this.currRt) return;
+        const shadowRoot = this.currRt.shadowRoot;
+        if (shadowRoot) {
+            const placeholder = shadowRoot.getElementsByType("richtext")[0];
+            placeholder && shadowRoot.removeChild(placeholder);
+        }
+        const {textConfig: textConfig, editOptions: editOptions} = this.currRt.attribute;
+        if (textConfig && textConfig.length) return;
+        if (!editOptions || !editOptions.placeholder) return;
+        const {placeholder: placeholder, placeholderColor: placeholderColor = "rgba(0, 0, 0, 0.6)", placeholderFontFamily: placeholderFontFamily, placeholderFontSize: placeholderFontSize} = editOptions, shadow = this.getShadow(this.currRt), textConfigItem = Object.assign(Object.assign({}, (0, 
+        edit_module_1.getDefaultCharacterConfig)(this.currRt.attribute)), {
+            text: placeholder
+        });
+        placeholderColor && (textConfigItem.fill = placeholderColor), placeholderFontFamily && (textConfigItem.fontFamily = placeholderFontFamily), 
+        placeholderFontSize && (textConfigItem.fontSize = placeholderFontSize), this.shadowPlaceHolder = (0, 
+        graphic_1.createRichText)(Object.assign(Object.assign({}, this.currRt.attribute), {
+            x: 0,
+            y: 0,
+            pickable: !1,
+            editable: !1,
+            editOptions: null,
+            angle: 0,
+            _debug_bounds: !1,
+            textConfig: [ textConfigItem ]
+        })), shadow.add(this.shadowPlaceHolder);
+    }
+    tryShowInputBounds() {
+        if (!this.currRt || !this.focusing) return;
+        const {editOptions: editOptions = {}} = this.currRt.attribute, {boundsStrokeWhenInput: boundsStrokeWhenInput} = editOptions;
+        if (!editOptions || !boundsStrokeWhenInput) return;
+        const {attribute: attribute} = this.currRt;
+        let b = this.currRt.AABBBounds, h = b.height();
+        if (!attribute.textConfig.length && this.editLine) {
+            const {points: points} = this.editLine.attribute;
+            h = points[1].y - points[0].y, b = (0, graphic_1.getRichTextBounds)(Object.assign({}, this.shadowPlaceHolder.attribute));
+        }
+        this.shadowBounds = this.shadowBounds || (0, graphic_1.createRect)({}), this.shadowBounds.setAttributes({
+            x: 0,
+            y: 0,
+            width: b.width(),
+            height: h,
+            fill: !1,
+            stroke: boundsStrokeWhenInput,
+            lineWidth: 1,
+            zIndex: -1
+        });
+        this.getShadow(this.currRt).add(this.shadowBounds), this.offsetLineBgAndShadowBounds();
+    }
+    trySyncPlaceholderToTextConfig() {
+        if (!this.currRt) return;
+        const {textConfig: textConfig, editOptions: editOptions} = this.currRt.attribute;
+        if (textConfig && textConfig.length) return;
+        if (!(editOptions && editOptions.placeholder && editOptions.syncPlaceHolderToTextConfig)) return;
+        const {placeholder: placeholder} = editOptions;
+        this.currRt.setAttributes({
+            textConfig: [ Object.assign({
+                text: placeholder
+            }, (0, edit_module_1.getDefaultCharacterConfig)(this.currRt.attribute)) ]
+        });
+    }
     deactivate(context) {
         context.stage.off("pointermove", this.handleMove), context.stage.off("pointerdown", this.handlePointerDown), 
         context.stage.off("pointerup", this.handlePointerUp), context.stage.off("pointerleave", this.handlePointerUp), 
         context.stage.off("dblclick", this.handleDBLClick), application_1.application.global.addEventListener("keydown", this.handleKeyDown);
     }
-    onFocus(e) {
-        this.deFocus(), this.currRt = e.target;
+    onFocus(e, data) {
+        this.updateCbs && this.updateCbs.forEach((cb => cb("beforeOnfocus", this))), this.deFocus(!1), 
+        this.focusing = !0;
         const target = e.target;
-        RichTextEditPlugin.tryUpdateRichtext(target);
-        const shadowRoot = target.attachShadow(), cache = target.getFrameCache();
-        if (!cache) return;
-        if (this.computeGlobalDelta(cache), shadowRoot.setAttributes({
-            shadowRootIdx: 1,
-            pickable: !1,
-            x: this.deltaX,
-            y: this.deltaY
-        }), !this.editLine) {
-            const line = (0, graphic_1.createLine)({
-                x: 0,
-                y: 0,
-                lineWidth: 1,
-                stroke: "black"
-            });
-            this.addAnimateToLine(line), this.editLine = line, this.ticker.start(!0);
-            const g = (0, graphic_1.createGroup)({
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0
-            });
-            this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
-        }
-        const data = this.computedCursorPosByEvent(e, cache);
-        if (data) {
-            const {x: x, y1: y1, y2: y2, cursorIndex: cursorIndex} = data;
-            this.startCursorPos = {
-                x: x,
-                y: (y1 + y2) / 2
-            }, this.curCursorIdx = cursorIndex, this.selectionStartCursorIdx = cursorIndex, 
-            this.setCursorAndTextArea(x, y1, y2, target);
+        if (!target || "richtext" !== target.type) return;
+        this.currRt = target, RichTextEditPlugin.tryUpdateRichtext(target);
+        const shadowRoot = this.getShadow(target), cache = target.getFrameCache();
+        if (cache) {
+            if (this.computeGlobalDelta(cache), shadowRoot.setAttributes({
+                shadowRootIdx: 1,
+                pickable: !1,
+                x: this.deltaX,
+                y: this.deltaY
+            }), !this.editLine) {
+                const line = (0, graphic_1.createLine)({
+                    x: 0,
+                    y: 0,
+                    lineWidth: 1,
+                    stroke: "black"
+                });
+                this.addAnimateToLine(line), this.editLine = line, this.ticker.start(!0);
+                const g = (0, graphic_1.createGroup)({
+                    x: 0,
+                    y: 0,
+                    width: 0,
+                    height: 0
+                });
+                this.editBg = g, shadowRoot.add(this.editLine), shadowRoot.add(this.editBg);
+            }
+            if (data = data || this.computedCursorPosByEvent(e, cache)) {
+                const {x: x, y1: y1, y2: y2, cursorIndex: cursorIndex} = data;
+                this.startCursorPos = {
+                    x: x,
+                    y: (y1 + y2) / 2
+                }, this.curCursorIdx = cursorIndex, this.selectionStartCursorIdx = cursorIndex, 
+                this.setCursorAndTextArea(x, y1, y2, target);
+            } else {
+                const x = 0, y1 = 0, y2 = (0, graphic_1.getRichTextBounds)(Object.assign(Object.assign({}, target.attribute), {
+                    textConfig: [ {
+                        text: "a"
+                    } ]
+                })).height();
+                this.startCursorPos = {
+                    x: x,
+                    y: (y1 + y2) / 2
+                }, this.curCursorIdx = -.1, this.selectionStartCursorIdx = -.1, this.setCursorAndTextArea(x, y1, y2, target);
+            }
+            this.tryShowShadowPlaceholder(), this.tryShowInputBounds(), this.currRt.addUpdateBoundTag();
         }
     }
-    deFocus() {
-        const target = this.currRt;
-        target && (target.detachShadow(), this.currRt = null, this.editLine && (this.editLine.parent.removeChild(this.editLine), 
-        this.editLine.release(), this.editLine = null, this.editBg.parent.removeChild(this.editBg), 
-        this.editBg.release(), this.editBg = null));
+    offsetLineBgAndShadowBounds() {
+        const rt = this.currRt, {textBaseline: textBaseline} = rt.attribute;
+        let b, dy = 0, attr = rt.attribute;
+        "middle" !== textBaseline && "bottom" !== textBaseline || (attr.textConfig.length || (attr = Object.assign(Object.assign({}, attr), {
+            textConfig: [ {
+                text: "a"
+            } ]
+        })), b = (0, graphic_1.getRichTextBounds)(attr)), "middle" === textBaseline ? dy = -b.height() / 2 : "bottom" === textBaseline && (dy = -b.height()), 
+        this.editLine && this.editLine.setAttributes({
+            dy: dy
+        }), this.editBg && this.editBg.setAttributes({
+            dy: dy
+        }), this.shadowBounds && this.shadowBounds.setAttributes({
+            dy: dy
+        });
+    }
+    deFocus(trulyDeFocus = !1) {
+        const currRt = this.currRt;
+        if (!currRt) return;
+        this.updateCbs && this.updateCbs.forEach((cb => cb("beforeDefocus", this, {
+            trulyDeFocus: trulyDeFocus
+        }))), trulyDeFocus && (this.trySyncPlaceholderToTextConfig(), currRt.detachShadow()), 
+        this.currRt = null, this.editLine && (this.editLine.parent && this.editLine.parent.removeChild(this.editLine), 
+        this.editLine.release(), this.editLine = null, this.editBg.parent && this.editBg.parent.removeChild(this.editBg), 
+        this.editBg.release(), this.editBg = null), trulyDeFocus && (this.shadowBounds && (this.shadowBounds.parent && this.shadowBounds.parent.removeChild(this.shadowBounds), 
+        this.shadowBounds.release(), this.shadowBounds = null), this.shadowPlaceHolder && (this.shadowPlaceHolder.parent && this.shadowPlaceHolder.parent.removeChild(this.shadowPlaceHolder), 
+        this.shadowPlaceHolder.release(), this.shadowPlaceHolder = null)), this.focusing = !1;
+        const textConfig = currRt.attribute.textConfig;
+        let lastConfig = textConfig[textConfig.length - 1], cleared = !1;
+        for (;lastConfig && "\n" === lastConfig.text; ) textConfig.pop(), lastConfig = textConfig[textConfig.length - 1], 
+        cleared = !0;
+        cleared && currRt.setAttributes({
+            textConfig: textConfig
+        }), currRt.removeEventListener("pointerleave", this.handleLeave);
     }
     addAnimateToLine(line) {
         line.animates && line.animates.forEach((animate => {
             animate.stop(), animate.release();
         }));
-        const animate = line.animate();
-        animate.setTimeline(this.timeline), animate.to({
+        line.animate({
+            timeline: this.timeline
+        }).to({
             opacity: 1
         }, 10, "linear").wait(700).to({
             opacity: 0
@@ -281,67 +416,75 @@ class RichTextEditPlugin {
             x: currCursorData.x,
             y: (currCursorData.y1 + currCursorData.y2) / 2
         }, line0Info = this.getLineByPoint(cache, startCursorPos), line1Info = this.getLineByPoint(cache, endCursorPos);
-        if ((startCursorPos.y > endCursorPos.y || startCursorPos.y === endCursorPos.y && startCursorPos.x > endCursorPos.x) && ([startCursorPos, endCursorPos] = [ endCursorPos, startCursorPos ], 
-        [line1Info, line0Info] = [ line0Info, line1Info ]), this.hideSelection(), line0Info === line1Info) this.editBg.setAttributes({
-            x: startCursorPos.x,
-            y: line0Info.top,
-            width: endCursorPos.x - startCursorPos.x,
-            height: line0Info.height,
-            fill: "#336df4",
-            fillOpacity: .2
-        }); else {
-            this.editBg.setAttributes({
-                x: 0,
+        if (line0Info && line1Info) {
+            if ((startCursorPos.y > endCursorPos.y || startCursorPos.y === endCursorPos.y && startCursorPos.x > endCursorPos.x) && ([startCursorPos, endCursorPos] = [ endCursorPos, startCursorPos ], 
+            [line1Info, line0Info] = [ line0Info, line1Info ]), this.hideSelection(), line0Info === line1Info) this.editBg.setAttributes({
+                x: startCursorPos.x,
                 y: line0Info.top,
-                width: 0,
-                height: 0
-            });
-            const startIdx = cache.lines.findIndex((item => item === line0Info)), endIdx = cache.lines.findIndex((item => item === line1Info));
-            let y = 0;
-            for (let i = startIdx; i <= endIdx; i++) {
-                const line = cache.lines[i];
-                if (i === startIdx) {
-                    const p = line.paragraphs[line.paragraphs.length - 1];
-                    this.editBg.add((0, graphic_1.createRect)({
-                        x: startCursorPos.x,
-                        y: y,
-                        width: p.left + p.width - startCursorPos.x,
-                        height: line.height,
-                        fill: "#336df4",
-                        fillOpacity: .2
-                    }));
-                } else if (i === endIdx) {
-                    const p = line.paragraphs[0];
-                    this.editBg.add((0, graphic_1.createRect)({
-                        x: p.left,
-                        y: y,
-                        width: endCursorPos.x - p.left,
-                        height: line.height,
-                        fill: "#336df4",
-                        fillOpacity: .2
-                    }));
-                } else {
-                    const p0 = line.paragraphs[0], p1 = line.paragraphs[line.paragraphs.length - 1];
-                    this.editBg.add((0, graphic_1.createRect)({
-                        x: p0.left,
-                        y: y,
-                        width: p1.left + p1.width - p0.left,
-                        height: line.height,
-                        fill: "#336df4",
-                        fillOpacity: .2
-                    }));
+                width: endCursorPos.x - startCursorPos.x,
+                height: line0Info.height,
+                fill: "#336df4",
+                fillOpacity: .2
+            }); else {
+                this.editBg.setAttributes({
+                    x: 0,
+                    y: line0Info.top,
+                    width: 0,
+                    height: 0
+                });
+                const startIdx = cache.lines.findIndex((item => item === line0Info)), endIdx = cache.lines.findIndex((item => item === line1Info));
+                let y = 0;
+                for (let i = startIdx; i <= endIdx; i++) {
+                    const line = cache.lines[i];
+                    if (i === startIdx) {
+                        const p = line.paragraphs[line.paragraphs.length - 1];
+                        this.editBg.add((0, graphic_1.createRect)({
+                            x: startCursorPos.x,
+                            y: y,
+                            width: p.left + p.width - startCursorPos.x,
+                            height: line.height,
+                            fill: "#336df4",
+                            fillOpacity: .2
+                        }));
+                    } else if (i === endIdx) {
+                        const p = line.paragraphs[0];
+                        this.editBg.add((0, graphic_1.createRect)({
+                            x: p.left,
+                            y: y,
+                            width: endCursorPos.x - p.left,
+                            height: line.height,
+                            fill: "#336df4",
+                            fillOpacity: .2
+                        }));
+                    } else {
+                        const p0 = line.paragraphs[0], p1 = line.paragraphs[line.paragraphs.length - 1];
+                        this.editBg.add((0, graphic_1.createRect)({
+                            x: p0.left,
+                            y: y,
+                            width: p1.left + p1.width - p0.left,
+                            height: line.height,
+                            fill: "#336df4",
+                            fillOpacity: .2
+                        }));
+                    }
+                    y += line.height;
                 }
-                y += line.height;
             }
+            this.setCursorAndTextArea(currCursorData.x, currCursorData.y1, currCursorData.y2, this.currRt), 
+            this.triggerRender(), this.updateCbs.forEach((cb => cb("selection", this)));
         }
-        this.setCursorAndTextArea(currCursorData.x, currCursorData.y1 + 2, currCursorData.y2 - 2, this.currRt), 
-        this.triggerRender(), this.updateCbs.forEach((cb => cb("selection", this)));
     }
     hideSelection() {
         this.editBg && (this.editBg.removeAllChild(), this.editBg.setAttributes({
             fill: "transparent"
         }));
     }
+    getShadow(rt) {
+        const sr = rt.shadowRoot || rt.attachShadow();
+        return sr.setAttributes({
+            boundsMode: "empty"
+        }), sr;
+    }
     getLineByPoint(cache, p1) {
         let lineInfo = cache.lines[0];
         for (let i = 0; i < cache.lines.length && !(lineInfo.top <= p1.y && lineInfo.top + lineInfo.height >= p1.y); i++) lineInfo = cache.lines[i + 1];
@@ -373,7 +516,10 @@ class RichTextEditPlugin {
         return -1;
     }
     isRichtext(e) {
-        return !(!e.target || "richtext" !== e.target.type || !e.target.attribute.editable);
+        return !(!e.target || "richtext" !== e.target.type);
+    }
+    isEditableRichtext(e) {
+        return this.isRichtext(e) && !!e.target.attribute.editable;
     }
     triggerRender() {
         this.pluginService.stage.renderNextFrame();
@@ -389,8 +535,15 @@ class RichTextEditPlugin {
             x: 0,
             y: 0
         };
-        return e.target.globalTransMatrix.transformPoint(p, p1), p1.x -= this.deltaX, p1.y -= this.deltaY, 
-        p1;
+        e.target.globalTransMatrix.transformPoint(p, p1), p1.x -= this.deltaX, p1.y -= this.deltaY;
+        const rt = this.currRt, {textBaseline: textBaseline} = rt.attribute;
+        let dy = 0;
+        if ("middle" === textBaseline) {
+            dy = (0, graphic_1.getRichTextBounds)(rt.attribute).height() / 2;
+        } else if ("bottom" === textBaseline) {
+            dy = (0, graphic_1.getRichTextBounds)(rt.attribute).height();
+        }
+        return p1.y += dy, p1;
     }
     setCursorAndTextArea(x, y1, y2, rt) {
         this.editLine.setAttributes({
@@ -411,15 +564,14 @@ class RichTextEditPlugin {
             y: y1
         }, out);
         const {left: left, top: top} = this.pluginService.stage.window.getBoundingClientRect();
-        out.x += left, out.y += top, this.editModule.moveTo(out.x, out.y, rt, this.curCursorIdx, this.selectionStartCursorIdx);
+        out.x += left, out.y += top, this.offsetLineBgAndShadowBounds(), this.editModule.moveTo(out.x, out.y, rt, this.curCursorIdx, this.selectionStartCursorIdx);
     }
     computedCursorPosByEvent(e, cache) {
         const p1 = this.getEventPosition(e), lineInfo = this.getLineByPoint(cache, p1);
         if (!lineInfo) return;
         const {columnInfo: columnInfo, delta: delta} = this.getColumnAndIndexByLinePoint(lineInfo, p1);
         if (!columnInfo) return;
-        let y1 = lineInfo.top, y2 = lineInfo.top + lineInfo.height;
-        y1 += 2, y2 -= 2;
+        const y1 = lineInfo.top, y2 = lineInfo.top + lineInfo.height;
         let cursorIndex = this.getColumnIndex(cache, columnInfo);
         cursorIndex += delta;
         return {
@@ -434,17 +586,31 @@ class RichTextEditPlugin {
     computedCursorPosByCursorIdx(cursorIdx, rt) {
         var _a, _b, _c;
         const idx = Math.round(cursorIdx), leftRight = cursorIdx - idx, cache = rt.getFrameCache(), column = this.getColumnByIndex(cache, idx), height = null !== (_a = rt.attribute.fontSize) && void 0 !== _a ? _a : null === (_c = null === (_b = rt.attribute.textConfig) || void 0 === _b ? void 0 : _b[0]) || void 0 === _c ? void 0 : _c.fontSize;
-        if (!column) return {
-            x: 0,
-            y1: 0,
-            y2: height
-        };
-        const {lineInfo: lineInfo, columnInfo: columnInfo} = column;
-        let y1 = lineInfo.top, y2 = lineInfo.top + lineInfo.height;
-        return y1 += 2, y2 -= 2, {
+        if (!column) {
+            if (!cache.lines.length) {
+                return {
+                    x: 0,
+                    y1: 0,
+                    y2: (0, graphic_1.getRichTextBounds)(Object.assign(Object.assign({}, rt.attribute), {
+                        textConfig: [ {
+                            text: "a"
+                        } ]
+                    })).height()
+                };
+            }
+            return {
+                x: 0,
+                y1: 0,
+                y2: height
+            };
+        }
+        const {lineInfo: lineInfo, columnInfo: columnInfo} = column, y1 = lineInfo.top, y2 = lineInfo.top + lineInfo.height;
+        return {
             x: columnInfo.left + (leftRight < 0 ? 0 : columnInfo.width),
             y1: y1,
-            y2: y2
+            y2: y2,
+            lineInfo: lineInfo,
+            columnInfo: columnInfo
         };
     }
     getColumnByIndex(cache, index) {
@@ -467,6 +633,30 @@ class RichTextEditPlugin {
     getSelection(defaultAll = !1) {
         return this.currRt ? null != this.selectionStartCursorIdx && null != this.curCursorIdx ? new Selection(this.selectionStartCursorIdx, this.curCursorIdx, this.currRt) : defaultAll ? RichTextEditPlugin.CreateSelection(this.currRt) : null : null;
     }
+    forceFocus(params) {
+        const {target: target, e: e, cursorIndex: cursorIndex} = params;
+        target && (this.currRt = target, e ? this._forceFocusByEvent(e) : this._forceFocusByCursorIndex(null != cursorIndex ? cursorIndex : -.1));
+    }
+    _forceFocusByEvent(e) {
+        this.handleEnter(), this.handlePointerDown(e), this.handlePointerUp(e);
+    }
+    _forceFocusByCursorIndex(cursorIndex) {
+        const richtext = this.currRt;
+        if (!richtext) return;
+        let x = 0, y1 = 0, y2 = 2, lineInfo = null, columnInfo = null;
+        const data = this.computedCursorPosByCursorIdx(cursorIndex, richtext);
+        x = data.x, y1 = data.y1, y2 = data.y2, lineInfo = data.lineInfo, columnInfo = data.columnInfo, 
+        this.onFocus({
+            target: this.currRt
+        }, {
+            x: x,
+            y1: y1,
+            y2: y2,
+            cursorIndex: cursorIndex,
+            lineInfo: lineInfo,
+            columnInfo: columnInfo
+        });
+    }
 }
 
 exports.RichTextEditPlugin = RichTextEditPlugin;