@wizishop/wizi-block 4.2.30-beta → 4.2.33-beta

package/lib/shared/components/editorjs/editorjs.component.d.ts

@@ -15,6 +15,7 @@ export declare class EditorJsComponent implements OnInit, OnDestroy {
     timeoutHandle: any;
     timeoutTextEditionHandle: any;
     onChangeTimeoutHandle: any;
+    editorInitialized: boolean;
     wrapperTags: string;
     constructor(translateService: TranslateService, editorJSConversionService: EditorJSConversionService, editorJSTranslationService: EditorJSTranslationService);
     ngOnInit(): Promise<void>;

package/lib/shared/components/editorjs/tools/inline/bold-tool.component.d.ts

@@ -5,7 +5,7 @@ export declare class BoldTool extends InlineStyleTool implements InlineTool {
     private readonly commandName;
     private readonly CSS;
     private nodes;
-    private api;
+    api: any;
     private _state;
     tag: string;
     hasSeparatorBefore: boolean;

package/lib/shared/components/editorjs/tools/inline/capitalize-tool.component.d.ts

@@ -6,7 +6,7 @@ export declare class CapitalizeTool extends InlineStyleTool implements InlineToo
     private readonly commandName;
     private readonly CSS;
     private nodes;
-    private api;
+    api: any;
     private _state;
     tag: string;
     style: StyleObject;

package/lib/shared/components/editorjs/tools/inline/italic-tool.component.d.ts

@@ -5,7 +5,7 @@ export declare class ItalicTool extends InlineStyleTool implements InlineTool {
     private readonly commandName;
     private readonly CSS;
     private nodes;
-    private api;
+    api: any;
     private _state;
     tag: string;
     modifies: {

package/lib/shared/components/editorjs/tools/inline/link-tool.component.d.ts

@@ -6,7 +6,7 @@ export declare class LinkTool extends InlineStyleTool implements InlineTool {
     private readonly commandName;
     private readonly CSS;
     private nodes;
-    private api;
+    api: any;
     private _state;
     tag: string;
     hasSeparatorBefore: boolean;

package/lib/shared/components/editorjs/tools/inline/strike-tool.component.d.ts

@@ -5,7 +5,7 @@ export declare class StrikeTool extends InlineStyleTool implements InlineTool {
     private readonly commandName;
     private readonly CSS;
     private nodes;
-    private api;
+    api: any;
     private _state;
     tag: string;
     modifies: {

package/lib/shared/components/editorjs/tools/inline/subscript-tool.component.d.ts

@@ -5,7 +5,7 @@ export declare class SubscriptTool extends InlineStyleTool implements InlineTool
     private readonly commandName;
     private readonly CSS;
     private nodes;
-    private api;
+    api: any;
     private _state;
     tag: string;
     modifies: {

package/lib/shared/components/editorjs/tools/inline/superscript-tool.component.d.ts

@@ -5,7 +5,7 @@ export declare class SuperscriptTool extends InlineStyleTool implements InlineTo
     private readonly commandName;
     private readonly CSS;
     private nodes;
-    private api;
+    api: any;
     private _state;
     tag: string;
     modifies: {

package/lib/shared/components/editorjs/tools/inline/tool-type/inline-style-tool.component.d.ts

@@ -30,9 +30,11 @@ export declare abstract class InlineStyleTool extends EditorJSTool {
     private findStyleNode;
     private createElement;
     private removeChildrenClasses;
+    parentHasStyle(currentElement: HTMLElement, referenceElement: HTMLElement): boolean;
     private cleanupContainer;
     private hasNoAttributes;
     private identicalClassList;
+    private identicalAttributes;
     private identicalInlineStyle;
     private sortInlineStyle;
     private getInlineStyle;

package/lib/shared/components/editorjs/tools/inline/tool-type/text-tool.component.d.ts

@@ -17,5 +17,4 @@ export declare abstract class InlineTextTool extends InlineStyleTool {
     saveUserSelection(): void;
     resetUserSelection(): void;
     isDropdownFocusedOut($event: any): boolean;
-    findParentModifier(element: HTMLElement): HTMLElement | null;
 }

package/lib/shared/components/editorjs/tools/inline/underline-tool.component.d.ts

@@ -6,7 +6,7 @@ export declare class UnderlineTool extends InlineStyleTool implements InlineTool
     private readonly commandName;
     private readonly CSS;
     private nodes;
-    private api;
+    api: any;
     private _state;
     tag: string;
     style: StyleObject;

package/lib/shared/components/editorjs/tools/paragraph/tool-type/paragraph-style-tool.component.d.ts

@@ -14,7 +14,6 @@ export declare abstract class ParagraphStyleTool extends EditorJSTool {
     private getCurrentParagraph;
     private changeContainerTag;
     private changeCurrentClass;
-    findParentModifier(element: HTMLElement): HTMLElement | null;
 }
 export declare var listApi: any;
 export declare var listEditor: any;

package/lib/shared/components/editorjs/tools/utils/editorjs-tool.component.d.ts

@@ -10,6 +10,7 @@ export declare class AttributeObject {
     value: string;
 }
 export declare abstract class EditorJSTool {
+    api: any;
     parentEditor: HTMLDivElement;
     textContainers: string;
     currentSelection?: Selection;
@@ -25,6 +26,7 @@ export declare abstract class EditorJSTool {
     resetUserSelection(): void;
     collapseSelection(): void;
     findParentEditor(): HTMLDivElement | null;
+    findParentModifier(): HTMLElement | null;
     clear(): void;
     private getTextNodes;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizishop/wizi-block",
-  "version": "4.2.30-beta",
+  "version": "4.2.33-beta",
   "description": "## To use WiziBlock, you have to :",
   "repository": {
     "type": "git",
@@ -20,6 +20,10 @@
     "@angular/common": "^10.1.4",
     "@angular/core": "^10.1.4",
     "@asymmetrik/ngx-leaflet": "^8.1.0",
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/lang-html": "^6.1.0",
+    "@codemirror/state": "^6.0.1",
+    "@codemirror/view": "^6.0.2",
     "@ctrl/tinycolor": "^3.1.5",
     "@fortawesome/fontawesome-svg-core": "^1.2.31",
     "@fortawesome/free-brands-svg-icons": "^5.15.0",

package/wizi-block.scss

@@ -1882,33 +1882,204 @@ wb-structure-tools {
     }
   }
 }
-.wb-previews {
-  &__iframe {
-    opacity: 0;
-    width: 100%;
-    height: calc(100vh - #{rem(280)});
-    min-height: calc(100vh - #{rem(280)});
-    overflow-y: scroll;
-    &.is-active {
-      opacity: 1;
+.wb-blocks {
+    position: relative;
+    z-index: 1;
+
+    span[class^='wb-dynamic-size'] {
+        position: absolute;
+        color: $wb-secondary-text-color;
+        top: 1vw !important;
+        font-size: rem(14);
+        text-align: center;
+        width: rem(200);
+        left: 0;
+        right: 0;
+        margin: auto;
     }
-    border: rem(1) dashed $wb-border-color;
-  }
 
-  &__loader {
-    display: none;
-    height: calc(100vh - #{rem(280)});
-    min-height: calc(100vh - #{rem(280)});
+    .button.is-hidden-button.is-rounded {
+        padding: rem(8) rem(8);
+        border: rem(1) solid transparent;
+        position: absolute;
+        top: -#{rem(45)};
+        right: 0;
+        @include media('<=#{$block-width-mobile * 1.4}') {
+            right: -#{rem(26)};
+        }
+        z-index: 11000;
+        width: rem(36);
+        @include simple_transition();
 
-    &.is-active {
-      display: block;
+        &:not(.is-danger) {
+            color: lighten($wb-secondary-text-color, 20%);
+            @include media('>=1419px', '<1515px') {
+                right: -20px !important;
+            }
+
+            &:hover {
+                background-color: lighten($wb-secondary-text-color, 20%);
+                color: $wb-white;
+            }
+        }
     }
-  }
 
-  .wb-loader {
-    margin: 0 auto 1.875rem auto;
-    padding-top: rem(85);
-  }
+    &__container {
+        padding-bottom: rem(30);
+        display: block;
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+        transition: 0s !important;
+        position: relative;
+        z-index: 1;
+
+        &--focused {
+            z-index: 50;
+        }
+
+        .wb-component__container {
+            display: block;
+            height: 100%;
+            width: 100%;
+            position: relative;
+        }
+        &:hover,
+        &:focus,
+        .hover & {
+            .wb-component__container {
+                border-color: $wizishop-blue;
+            }
+            .wb-structure-tools {
+                background-color: $wizishop-blue;
+            }
+        }
+    }
+
+    .border-blue {
+        .wb-component__container {
+            border-color: $wizishop-blue;
+        }
+    }
+
+    &.cdk-drop-list-dragging .wb-blocks__container:not(.cdk-drag-placeholder) {
+        transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
+
+        .wb-videos-simple,
+        .wb-videos-txt,
+        .wb-videos-txt-left,
+        .wb-videos-txt-content {
+            &__fakeframe {
+                display: flex !important;
+            }
+
+            &__frame {
+                display: none !important;
+            }
+        }
+    }
+
+    &.cdk-drop-list-dragging {
+        .wb-videos-simple,
+        .wb-videos-txt,
+        .wb-videos-txt-left,
+        .wb-videos-txt-content {
+            &__fakeframe {
+                display: flex !important;
+            }
+            &__frame {
+                display: none !important;
+            }
+        }
+
+        .wb-component__container {
+            border: rem(2) solid $wizishop-blue !important;
+        }
+    }
+
+    &-empty {
+        text-align: center;
+        background-color: lighten($wb-border-color, 13%);
+        padding: rem(80);
+        margin-bottom: rem(30);
+
+        img {
+            width: rem(75);
+            margin: 0 auto;
+            display: block;
+        }
+
+        p {
+            &:first-of-type {
+                font-size: rem(16);
+                font-weight: 500;
+                color: $wb-main-text-color;
+                margin: rem(20);
+            }
+
+            &:last-of-type {
+                font-size: rem(14);
+                font-weight: 400;
+                color: $wb-secondary-text-color;
+            }
+        }
+    }
+}
+
+.wb-blocks__container.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+
+    .wb-videos-simple,
+    .wb-videos-txt,
+    .wb-videos-txt-left,
+    .wb-videos-txt-content {
+        &__fakeframe {
+            display: flex !important;
+        }
+        &__frame {
+            display: none !important;
+        }
+    }
+}
+
+.wb-blocks__container.cdk-drag-placeholder {
+    opacity: 0.2;
+    .wb-videos-simple,
+    .wb-videos-txt,
+    .wb-videos-txt-left,
+    .wb-videos-txt-content {
+        &__fakeframe {
+            display: flex !important;
+        }
+        &__frame {
+            display: none !important;
+        }
+    }
+}
+
+.wb-blocks__container.cdk-drag-preview {
+    box-shadow: 0 rem(30) rem(30) rgba(0, 0, 0, 0.2);
+    cursor: move;
+
+    .wb-videos-simple,
+    .wb-videos-txt,
+    .wb-videos-txt-left,
+    .wb-videos-txt-content {
+        &__fakeframe {
+            display: flex !important;
+        }
+        &__frame {
+            display: none !important;
+        }
+    }
+}
+
+.wb-component {
+    &.border-grey {
+        .wb-component__container {
+            border-color: darken(#95a5a6, 15%);
+        }
+    }
 }
 .wb-forms-onboarding {
     width: 100%;
@@ -14175,204 +14346,33 @@ $color-size-choose: #6c6c6c;
         }
     }
 }
-.wb-blocks {
-    position: relative;
-    z-index: 1;
-
-    span[class^='wb-dynamic-size'] {
-        position: absolute;
-        color: $wb-secondary-text-color;
-        top: 1vw !important;
-        font-size: rem(14);
-        text-align: center;
-        width: rem(200);
-        left: 0;
-        right: 0;
-        margin: auto;
-    }
-
-    .button.is-hidden-button.is-rounded {
-        padding: rem(8) rem(8);
-        border: rem(1) solid transparent;
-        position: absolute;
-        top: -#{rem(45)};
-        right: 0;
-        @include media('<=#{$block-width-mobile * 1.4}') {
-            right: -#{rem(26)};
-        }
-        z-index: 11000;
-        width: rem(36);
-        @include simple_transition();
-
-        &:not(.is-danger) {
-            color: lighten($wb-secondary-text-color, 20%);
-            @include media('>=1419px', '<1515px') {
-                right: -20px !important;
-            }
-
-            &:hover {
-                background-color: lighten($wb-secondary-text-color, 20%);
-                color: $wb-white;
-            }
-        }
-    }
-
-    &__container {
-        padding-bottom: rem(30);
-        display: block;
-        height: 100%;
-        width: 100%;
-        box-sizing: border-box;
-        transition: 0s !important;
-        position: relative;
-        z-index: 1;
-
-        &--focused {
-            z-index: 50;
-        }
-
-        .wb-component__container {
-            display: block;
-            height: 100%;
-            width: 100%;
-            position: relative;
-        }
-        &:hover,
-        &:focus,
-        .hover & {
-            .wb-component__container {
-                border-color: $wizishop-blue;
-            }
-            .wb-structure-tools {
-                background-color: $wizishop-blue;
-            }
-        }
-    }
-
-    .border-blue {
-        .wb-component__container {
-            border-color: $wizishop-blue;
-        }
-    }
-
-    &.cdk-drop-list-dragging .wb-blocks__container:not(.cdk-drag-placeholder) {
-        transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
-
-        .wb-videos-simple,
-        .wb-videos-txt,
-        .wb-videos-txt-left,
-        .wb-videos-txt-content {
-            &__fakeframe {
-                display: flex !important;
-            }
-
-            &__frame {
-                display: none !important;
-            }
-        }
-    }
-
-    &.cdk-drop-list-dragging {
-        .wb-videos-simple,
-        .wb-videos-txt,
-        .wb-videos-txt-left,
-        .wb-videos-txt-content {
-            &__fakeframe {
-                display: flex !important;
-            }
-            &__frame {
-                display: none !important;
-            }
-        }
-
-        .wb-component__container {
-            border: rem(2) solid $wizishop-blue !important;
-        }
-    }
-
-    &-empty {
-        text-align: center;
-        background-color: lighten($wb-border-color, 13%);
-        padding: rem(80);
-        margin-bottom: rem(30);
-
-        img {
-            width: rem(75);
-            margin: 0 auto;
-            display: block;
-        }
-
-        p {
-            &:first-of-type {
-                font-size: rem(16);
-                font-weight: 500;
-                color: $wb-main-text-color;
-                margin: rem(20);
-            }
-
-            &:last-of-type {
-                font-size: rem(14);
-                font-weight: 400;
-                color: $wb-secondary-text-color;
-            }
-        }
-    }
-}
-
-.wb-blocks__container.cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-
-    .wb-videos-simple,
-    .wb-videos-txt,
-    .wb-videos-txt-left,
-    .wb-videos-txt-content {
-        &__fakeframe {
-            display: flex !important;
-        }
-        &__frame {
-            display: none !important;
-        }
-    }
-}
-
-.wb-blocks__container.cdk-drag-placeholder {
-    opacity: 0.2;
-    .wb-videos-simple,
-    .wb-videos-txt,
-    .wb-videos-txt-left,
-    .wb-videos-txt-content {
-        &__fakeframe {
-            display: flex !important;
-        }
-        &__frame {
-            display: none !important;
-        }
+.wb-previews {
+  &__iframe {
+    opacity: 0;
+    width: 100%;
+    height: calc(100vh - #{rem(280)});
+    min-height: calc(100vh - #{rem(280)});
+    overflow-y: scroll;
+    &.is-active {
+      opacity: 1;
     }
-}
+    border: rem(1) dashed $wb-border-color;
+  }
 
-.wb-blocks__container.cdk-drag-preview {
-    box-shadow: 0 rem(30) rem(30) rgba(0, 0, 0, 0.2);
-    cursor: move;
+  &__loader {
+    display: none;
+    height: calc(100vh - #{rem(280)});
+    min-height: calc(100vh - #{rem(280)});
 
-    .wb-videos-simple,
-    .wb-videos-txt,
-    .wb-videos-txt-left,
-    .wb-videos-txt-content {
-        &__fakeframe {
-            display: flex !important;
-        }
-        &__frame {
-            display: none !important;
-        }
+    &.is-active {
+      display: block;
     }
-}
+  }
 
-.wb-component {
-    &.border-grey {
-        .wb-component__container {
-            border-color: darken(#95a5a6, 15%);
-        }
-    }
+  .wb-loader {
+    margin: 0 auto 1.875rem auto;
+    padding-top: rem(85);
+  }
 }
 .wb-text-backgrounds-link {
     position: relative;