feat: add multi-line support + documentation example

taiga-family · Mar 7, 2024 · bd6b5a8 · bd6b5a8
1 parent 960cf0c
commit bd6b5a8
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 10 deletions.
diff --git a/projects/core/src/lib/mask.ts b/projects/core/src/lib/mask.ts
@@ -237,7 +237,11 @@ export class Maskito extends MaskHistory {
             initialState.value.slice(0, initialFrom) +
             initialState.value.slice(initialTo);
 
-        if (newPossibleValue === newElementState.value && !force) {
+        if (
+            newPossibleValue === newElementState.value &&
+            !force &&
+            !this.element.isContentEditable
+        ) {
             return;
         }
 
@@ -285,7 +289,10 @@ export class Maskito extends MaskHistory {
             return event.preventDefault();
         }
 
-        if (newPossibleValue !== newElementState.value) {
+        if (
+            newPossibleValue !== newElementState.value ||
+            this.element.isContentEditable
+        ) {
             event.preventDefault();
 
             this.updateElementState(newElementState, {

diff --git a/projects/core/src/lib/utils/content-editable.ts b/projects/core/src/lib/utils/content-editable.ts
@@ -7,11 +7,12 @@ class ContentEditableAdapter implements TextfieldLike {
     constructor(private readonly element: HTMLElement) {}
 
     public get value(): string {
-        return this.element.textContent || '';
+        return this.element.innerText.replace(/\n\n$/, '\n');
     }
 
     public set value(value) {
-        this.element.textContent = value;
+        // Setting into innerHTML of element with `white-space: pre;` style
+        this.element.innerHTML = value.replace(/\n$/, '\n\n');
     }
 
     public get selectionStart(): number | null {

diff --git a/projects/demo/src/pages/recipes/content-editable/content-editable-doc.component.ts b/projects/demo/src/pages/recipes/content-editable/content-editable-doc.component.ts
@@ -6,11 +6,18 @@ import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule} from '@taiga-ui/core';
 
 import {ContentEditableDocExample1} from './examples/1-time/component';
+import {ContentEditableDocExample2} from './examples/2-multi-line/component';
 
 @Component({
     standalone: true,
     selector: 'content-editable-doc',
-    imports: [TuiAddonDocModule, TuiLinkModule, RouterLink, ContentEditableDocExample1],
+    imports: [
+        TuiAddonDocModule,
+        TuiLinkModule,
+        RouterLink,
+        ContentEditableDocExample1,
+        ContentEditableDocExample2,
+    ],
     templateUrl: './content-editable-doc.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -23,7 +30,17 @@ export default class ContentEditableDocComponent {
 
     protected readonly contentEditableExample1: TuiDocExample = {
         [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/1-time/mask.ts?raw'),
-        [DocExamplePrimaryTab.JavaScript]: import('./examples/1-time/vanilla-js.ts?raw'),
+        [DocExamplePrimaryTab.JavaScript]: import('./examples/vanilla-js-tab.md?raw'),
         [DocExamplePrimaryTab.Angular]: import('./examples/1-time/component.ts?raw'),
     };
+
+    protected readonly contentEditableExample2: TuiDocExample = {
+        [DocExamplePrimaryTab.MaskitoOptions]: import(
+            './examples/2-multi-line/mask.ts?raw'
+        ),
+        [DocExamplePrimaryTab.JavaScript]: import('./examples/vanilla-js-tab.md?raw'),
+        [DocExamplePrimaryTab.Angular]: import(
+            './examples/2-multi-line/component.ts?raw'
+        ),
+    };
 }
diff --git a/projects/demo/src/pages/recipes/content-editable/content-editable-doc.template.html b/projects/demo/src/pages/recipes/content-editable/content-editable-doc.template.html
@@ -58,4 +58,18 @@
         </ng-template>
         <content-editable-doc-example-1></content-editable-doc-example-1>
     </tui-doc-example>
+
+    <tui-doc-example
+        id="multi-line"
+        heading="Multi-line support"
+        [content]="contentEditableExample2"
+        [description]="description2"
+    >
+        <ng-template #description2>
+            Use
+            <code>white-space: pre</code>
+            for multi-line mode
+        </ng-template>
+        <content-editable-doc-example-2></content-editable-doc-example-2>
+    </tui-doc-example>
 </tui-doc-page>
diff --git a/projects/demo/src/pages/recipes/content-editable/examples/2-multi-line/component.ts b/projects/demo/src/pages/recipes/content-editable/examples/2-multi-line/component.ts
@@ -0,0 +1,35 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MaskitoDirective} from '@maskito/angular';
+
+import mask from './mask';
+
+@Component({
+    standalone: true,
+    selector: 'content-editable-doc-example-2',
+    imports: [MaskitoDirective],
+    template: `
+        <i>Enter message:</i>
+        <p
+            contenteditable="true"
+            [innerHTML]="initialText"
+            [maskito]="mask"
+        ></p>
+    `,
+    styles: [
+        `
+            [contenteditable] {
+                white-space: pre;
+                border: 3px dashed lightgray;
+                max-width: 30rem;
+                padding: 1rem;
+            }
+        `,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContentEditableDocExample2 {
+    protected readonly mask = mask;
+    protected initialText = `Hello, world!
+How are you today?
+Do not forget to read description of this example!`;
+}
diff --git a/projects/demo/src/pages/recipes/content-editable/examples/2-multi-line/mask.ts b/projects/demo/src/pages/recipes/content-editable/examples/2-multi-line/mask.ts
@@ -0,0 +1,5 @@
+import type {MaskitoOptions} from '@maskito/core';
+
+export default {
+    mask: /^[a-z\s.,/!?]+$/i,
+} as MaskitoOptions;
diff --git a/...nt-editable/examples/1-time/vanilla-js.ts → ...ntent-editable/examples/vanilla-js-tab.md b/...nt-editable/examples/1-time/vanilla-js.ts → ...ntent-editable/examples/vanilla-js-tab.md
@@ -1,3 +1,4 @@
+```ts
 import {Maskito, maskitoAdaptContentEditable} from '@maskito/core';
 
 import maskitoOptions from './mask';
@@ -6,7 +7,5 @@ const element = document.querySelector<HTMLElement>('[contenteditable]')!;
 
 const maskedInput = new Maskito(maskitoAdaptContentEditable(element), maskitoOptions);
 
-console.info(
-    'Call this function when the element is detached from DOM',
-    maskedInput.destroy,
-);
+console.info('Call this function when the element is detached from DOM', maskedInput.destroy);
+```