feat(global-normalize): add and apply global-normalize

worktile · Jul 14, 2021 · c947c64 · c947c64
1 parent 91bfb9a
commit c947c64
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 5 deletions.
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -19,7 +19,8 @@ module.exports = {
                 'decorate',
                 'pretter',
                 'types',
-                'block-card'
+                'block-card',
+                'global-normalize'
             ]
         ]
     }

diff --git a/custom-types.d.ts b/custom-types.d.ts
@@ -90,6 +90,7 @@ export type CustomText = {
     italic?: boolean
     code?: boolean
     text: string
+    'code-line': boolean
 }
 
 export type EmptyText = {

diff --git a/packages/src/components/editable/editable.component.ts b/packages/src/components/editable/editable.component.ts
@@ -45,6 +45,7 @@ import { SlateChildrenContext, SlateViewContext } from '../../view/context';
 import { ViewType } from '../../types/view';
 import { HistoryEditor } from 'slate-history';
 import { isDecoratorRangeListEqual } from '../../utils';
+import { check, normalize } from '../../utils/global-normalize';
 
 const timeDebug = Debug('slate-time');
 // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
@@ -191,9 +192,18 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
         this.onTouchedCallback = fn;
     }
 
-    writeValue(value: Descendant[]) {
+    writeValue(value: Element[]) {
         if (value && value.length) {
-            this.editor.children = value;
+            if (check(value)) {
+                this.editor.children = value;
+            } else {
+                this.editor.onError({
+                    code: SlateErrorCode.InvalidValueError,
+                    name: 'initialize invalid data',
+                    data: value
+                });
+                this.editor.children = normalize(value);
+            }
             this.cdr.markForCheck();
         }
     }

diff --git a/packages/src/plugins/with-angular.ts b/packages/src/plugins/with-angular.ts
@@ -313,6 +313,8 @@ export const withAngular = <T extends Editor>(editor: T, clipboardFormatKey = 'x
   e.onError = (errorData: SlateError) => {
     if (errorData.nativeError) {
       console.error(errorData.nativeError);
+    } else {
+      console.error(errorData);
     }
   };
 

diff --git a/packages/src/types/error.ts b/packages/src/types/error.ts
@@ -7,7 +7,8 @@ export enum SlateErrorCode {
     OnSyntheticBeforeInputError = 2103,
     OnDOMKeydownError = 2104,
     GetStartPointError = 2105,
-    NotFoundPreviousRootNodeError = 3100
+    NotFoundPreviousRootNodeError = 3100,
+    InvalidValueError = 4100,
 }
 
 export interface SlateError {

diff --git a/packages/src/utils/global-normalize.spec.ts b/packages/src/utils/global-normalize.spec.ts
@@ -0,0 +1,114 @@
+import { Element } from 'slate';
+import { check, normalize } from './global-normalize';
+
+describe('global-normalize', () => {
+    const invalidData3: any[] = [
+        {
+            type: 'paragraph',
+            children: [
+                { text: '' }
+            ]
+        },
+        {
+            type: 'numbered-list',
+            children: [
+                {
+                    type: 'list-item',
+                    children: [
+                        {
+                            type: 'paragraph',
+                            children: [
+                                {
+                                    text: ''
+                                }
+                            ]
+                        },
+                        {
+                            type: 'paragraph',
+                            children: []
+                        }
+                    ]
+                }
+            ]
+        }
+    ];
+
+    it('should return true', () => {
+        const validData: Element[] = [
+            {
+                type: 'paragraph',
+                children: [
+                    { text: 'This is editable ' },
+                    { text: 'rich', bold: true },
+                    { text: ' text, ' },
+                    { text: 'much', bold: true, italic: true },
+                    { text: ' better than a ' },
+                    { text: '<textarea>', ['code-line']: true },
+                    { text: '!' }
+                ]
+            },
+            {
+                type: 'heading-one',
+                children: [{ text: 'This is h1 ' }]
+            },
+            {
+                type: 'heading-three',
+                children: [{ text: 'This is h3 ' }]
+            },
+            {
+                type: 'paragraph',
+                children: [
+                    {
+                        text: `Since it's rich text, you can do things like turn a selection of text `
+                    },
+                    { text: 'bold', bold: true },
+                    {
+                        text: ', or add a semantically rendered block quote in the middle of the page, like this:'
+                    }
+                ]
+            },
+            {
+                type: 'block-quote',
+                children: [{ text: 'A wise quote.' }]
+            },
+            {
+                type: 'paragraph',
+                children: [{ text: 'Try it out for yourself!' }]
+            },
+            {
+                type: 'paragraph',
+                children: [{ text: '' }]
+            }
+        ];
+        const result = check(validData);
+        expect(result).toBeTrue();
+    });
+
+    it('should return false', () => {
+        const invalidData1: any[] = [
+            { text: '' }
+        ];
+
+        const result1 = check(invalidData1);
+        expect(result1).toBeFalse();
+
+        const invalidData2: any[] = [
+            {
+                type: 'paragraph',
+                children: []
+            }
+        ];
+
+        const result2 = check(invalidData2);
+        expect(result2).toBeFalse();
+
+        const result3 = check(invalidData3);
+        expect(result3).toBeFalse();
+    });
+
+    it('should return valid data', () => {
+        const result3 = normalize(invalidData3);
+        expect(result3.length).toEqual(1);
+        expect(result3[0]).toEqual(invalidData3[0]);
+    })
+});
diff --git a/packages/src/utils/global-normalize.ts b/packages/src/utils/global-normalize.ts
@@ -0,0 +1,17 @@
+import { Descendant, Element, Text } from "slate";
+
+const isValid = (value: Descendant) => (
+    Element.isElement(value) &&
+    value.children.length > 0 &&
+    (value.children as Descendant[]).every((child) => isValid(child))) ||
+    Text.isText(value);
+
+const check = (document: Element[]) => {
+    return document.every((value) => Element.isElement(value) && isValid(value));;
+}
+
+function normalize(document: Element[]) {
+    return document.filter((value) => Element.isElement(value) && isValid(value));
+}
+
+export { normalize, check, isValid };
diff --git a/packages/src/utils/index.ts b/packages/src/utils/index.ts
@@ -5,4 +5,5 @@ export * from './view';
 export * from './environment';
 export * from './key';
 export * from './range-list';
-export * from './block-card';
+export * from './block-card';
+export * from './global-normalize';