slate-angular 1.7.0 → 1.7.5

package/bundles/slate-angular.umd.js

@@ -2177,6 +2177,31 @@
             }
             this.cdr.markForCheck();
         };
+        BaseLeafComponent.prototype.renderPlaceholder = function () {
+            // issue-1: IME input was interrupted
+            // issue-2: IME input focus jumping
+            // Issue occurs when the span node of the placeholder is before the slateString span node
+            if (this.context.leaf['placeholder']) {
+                if (!this.placeholderElement) {
+                    this.placeholderElement = document.createElement('span');
+                    this.placeholderElement.innerText = this.context.leaf['placeholder'];
+                    this.placeholderElement.contentEditable = 'false';
+                    this.placeholderElement.setAttribute('data-slate-placeholder', 'true');
+                    this.nativeElement.classList.add('leaf-with-placeholder');
+                    this.nativeElement.appendChild(this.placeholderElement);
+                }
+            }
+            else {
+                this.destroyPlaceholder();
+            }
+        };
+        BaseLeafComponent.prototype.destroyPlaceholder = function () {
+            if (this.placeholderElement) {
+                this.placeholderElement.remove();
+                this.placeholderElement = null;
+                this.nativeElement.classList.remove('leaf-with-placeholder');
+            }
+        };
         return BaseLeafComponent;
     }(BaseComponent));
     BaseLeafComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: BaseLeafComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
@@ -2295,7 +2320,7 @@
         }
         Object.defineProperty(BaseTextComponent.prototype, "text", {
             get: function () {
-                return this._context.text;
+                return this._context && this._context.text;
             },
             enumerable: false,
             configurable: true
@@ -2503,15 +2528,23 @@
         function SlateDefaultLeafComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        SlateDefaultLeafComponent.prototype.onContextChange = function () {
+            _super.prototype.onContextChange.call(this);
+            this.renderPlaceholder();
+        };
+        SlateDefaultLeafComponent.prototype.ngOnDestroy = function () {
+            // Because the placeholder span is not in the current component, it is destroyed along with the current component
+            this.destroyPlaceholder();
+        };
         return SlateDefaultLeafComponent;
     }(BaseLeafComponent));
     SlateDefaultLeafComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SlateDefaultLeafComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    SlateDefaultLeafComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SlateDefaultLeafComponent, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"context.leaf['placeholder']\">\n            <span contenteditable=\"false\" data-slate-placeholder=\"true\" slate-placeholder=\"true\">{{context.leaf['placeholder']}}</span>\n        </ng-container>\n        <span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>", isInline: true, components: [{ type: SlateStringComponent, selector: "span[slateString]", inputs: ["context"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SlateDefaultLeafComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SlateDefaultLeafComponent, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0__namespace, template: "<span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>", isInline: true, components: [{ type: SlateStringComponent, selector: "span[slateString]", inputs: ["context"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SlateDefaultLeafComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'span[slateDefaultLeaf]',
-                        template: "\n        <ng-container *ngIf=\"context.leaf['placeholder']\">\n            <span contenteditable=\"false\" data-slate-placeholder=\"true\" slate-placeholder=\"true\">{{context.leaf['placeholder']}}</span>\n        </ng-container>\n        <span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>",
+                        template: "<span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         host: {
                             'data-slate-leaf': 'true'
@@ -2938,7 +2971,6 @@
     var forceOnDOMPaste = IS_SAFARI;
     var SlateEditableComponent = /** @class */ (function () {
         function SlateEditableComponent(elementRef, renderer2, cdr, ngZone, injector) {
-            var _this = this;
             this.elementRef = elementRef;
             this.renderer2 = renderer2;
             this.cdr = cdr;
@@ -2953,22 +2985,6 @@
             this.onTouchedCallback = function () { };
             this.onChangeCallback = function () { };
             this.decorate = function () { return []; };
-            this.placeholderDecorate = function (editor) {
-                if (_this.placeholder &&
-                    editor.children.length === 1 &&
-                    Array.from(slate.Node.texts(editor)).length === 1 &&
-                    slate.Node.string(editor) === '') {
-                    var start = slate.Editor.start(editor, []);
-                    return [{
-                            placeholder: _this.placeholder,
-                            anchor: start,
-                            focus: start
-                        }];
-                }
-                else {
-                    return [];
-                }
-            };
             this.isStrictDecorate = true;
             this.trackBy = function () { return null; };
             this.readonly = false;
@@ -3010,6 +3026,9 @@
             this.initializeContext();
             // remove unused DOM, just keep templateComponent instance
             this.templateElementRef.nativeElement.remove();
+            // add browser class
+            var browserClass = IS_FIREFOX ? 'firefox' : (IS_SAFARI ? 'safari' : '');
+            browserClass && this.elementRef.nativeElement.classList.add(browserClass);
         };
         SlateEditableComponent.prototype.ngOnChanges = function (simpleChanges) {
             if (!this.initialized) {
@@ -3228,9 +3247,32 @@
                 };
             }
         };
+        SlateEditableComponent.prototype.composePlaceholderDecorate = function (editor) {
+            if (this.placeholderDecorate) {
+                return this.placeholderDecorate(editor) || [];
+            }
+            if (this.placeholder &&
+                editor.children.length === 1 &&
+                Array.from(slate.Node.texts(editor)).length === 1 &&
+                slate.Node.string(editor) === '') {
+                var start = slate.Editor.start(editor, []);
+                return [
+                    {
+                        placeholder: this.placeholder,
+                        anchor: start,
+                        focus: start,
+                    },
+                ];
+            }
+            else {
+                return [];
+            }
+        };
         SlateEditableComponent.prototype.generateDecorations = function () {
             var decorations = this.decorate([this.editor, []]);
-            var placeholderDecorations = this.isComposing ? [] : this.placeholderDecorate(this.editor);
+            var placeholderDecorations = this.isComposing
+                ? []
+                : this.composePlaceholderDecorate(this.editor);
             decorations.push.apply(decorations, __spreadArray([], __read(placeholderDecorations)));
             return decorations;
         };
@@ -3793,7 +3835,7 @@
                     if (!slate.Range.isCollapsed(this.editor.selection)) {
                         slate.Editor.deleteFragment(this.editor);
                     }
-                    // just handle Non-IME input  
+                    // just handle Non-IME input
                     if (!this.isComposing) {
                         slate.Editor.insertText(this.editor, text);
                     }