Merge pull request #135 from worktile/fix-composing

Fix composing

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+### [1.5.4](https://github.com/worktile/slate-angular/compare/v1.5.3...v1.5.4) (2021-10-11)
+
+### Bug Fixes
+
+* **core:** fix(core): add editable-text on the span for leaf
+
+
 ### [1.5.3](https://github.com/worktile/slate-angular/compare/v1.5.2...v1.5.3) (2021-10-09)
 
 ### Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-angular",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "scripts": {
     "ng": "ng",
     "start": "ng serve demo",

packages/src/components/editable/editable.component.ts

@@ -374,12 +374,17 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy, Aft
             const textDOMNode = AngularEditor.toDOMNode(this.editor, textNode);
             let textContent = '';
             // skip decorate text
-            textDOMNode.querySelectorAll('[data-slate-string="true"]').forEach((stringDOMNode) => {
-                textContent += stringDOMNode.textContent;
+            textDOMNode.querySelectorAll('[editable-text]').forEach((stringDOMNode) => {
+                let text = stringDOMNode.textContent;
+                const zeroChar = '\uFEFF';
                 // remove zero with char
-                if (textContent.endsWith('\uFEFF')) {
-                    textContent = textContent.slice(0, textContent.length - 1);
+                if (text.startsWith(zeroChar)) {
+                    text = text.slice(1);
                 }
+                if (text.endsWith(zeroChar)) {
+                    text = text.slice(0, text.length - 1);
+                }
+                textContent += text;
             });
             if (Node.string(textNode).endsWith(textContent)) {
                 this.isComposing = false;

packages/src/components/string/template.component.html

@@ -1,17 +1,17 @@
 <ng-template #stringTemplate let-context="context" let-viewContext="viewContext">
-    <span data-slate-string="true">{{ context.text }}</span>
+    <span editable-text data-slate-string="true">{{ context.text }}</span>
 </ng-template>
 <ng-template #compatStringTemplate let-context="context" let-viewContext="viewContext">
     <!-- Compatible with Chinese input in Chrome with \n -->
-    <span data-slate-string="true">{{ context.text }}<span data-slate-zero-width>{{'\uFEFF'}}</span></span>
+    <span editable-text data-slate-string="true">{{ context.text }}<span data-slate-zero-width>{{'\uFEFF'}}</span></span>
 </ng-template>
 <ng-template #emptyStringTemplate let-context="context" let-viewContext="viewContext">
-    <span data-slate-zero-width="z" attr.data-slate-length="{{ context.elementStringLength }}">{{ '\uFEFF' }}</span>
+    <span editable-text data-slate-zero-width="z" attr.data-slate-length="{{ context.elementStringLength }}">{{ '\uFEFF' }}</span>
 </ng-template>
 <ng-template #emptyTextTemplate let-context="context" let-viewContext="viewContext">
-    <span data-slate-zero-width="z" data-slate-length="0">{{ '\uFEFF' }}</span>
+    <span editable-text data-slate-zero-width="z" data-slate-length="0">{{ '\uFEFF' }}</span>
 </ng-template>
 <ng-template #lineBreakEmptyStringTemplate let-context="context" let-viewContext="viewContext">
-    <span data-slate-zero-width="n" attr.data-slate-length="{{ context.elementStringLength }}">{{ '\uFEFF'
+    <span editable-text data-slate-zero-width="n" attr.data-slate-length="{{ context.elementStringLength }}">{{ '\uFEFF'
         }}<br /></span>
 </ng-template>