@worktile/theia 13.0.0-next.3 → 13.0.2

package/styles/editor.scss

@@ -1,8 +1,10 @@
-$thy-icon-nav-link-margin-right: 5px;
+@use 'ngx-tethys/styles/variables.scss';
+@use './variables.scss' as theVariables;
+@use './mixins.scss' as mixins;
 
 .the-editor {
     display: block;
-    border: 1px solid $gray-200;
+    border: 1px solid variables.$gray-200;
     border-radius: 3px;
     position: relative;
     max-width: 100%;
@@ -36,7 +38,7 @@ $thy-icon-nav-link-margin-right: 5px;
                 cursor: auto;
             }
             input[type='checkbox']:not(:checked):hover {
-                border-color: $gray-300;
+                border-color: variables.$gray-300;
             }
         }
         .the-todo-item-selectable {
@@ -52,7 +54,7 @@ $thy-icon-nav-link-margin-right: 5px;
                 cursor: auto;
             }
             input[type='checkbox']:not(:checked):hover {
-                border-color: $gray-300;
+                border-color: variables.$gray-300;
             }
         }
     }
@@ -122,7 +124,7 @@ $thy-icon-nav-link-margin-right: 5px;
     [the-code-line] {
         margin: 0 4px;
         padding: 2px 3px;
-        border: 1px solid $gray-300;
+        border: 1px solid variables.$gray-300;
         border-radius: 2px;
         font-family: monospace;
         font-size: inherit;
@@ -130,7 +132,7 @@ $thy-icon-nav-link-margin-right: 5px;
         line-height: inherit;
         word-wrap: break-word;
         text-indent: 0;
-        color: $gray-700;
+        color: variables.$gray-700;
     }
 
     .leaf-with-placeholder {
@@ -159,7 +161,7 @@ $thy-icon-nav-link-margin-right: 5px;
     @each $size, $liMl, $liMultiDigitMl in (12, 13, 14, 15, 16, 18, 20, (24 null 35px), (28 null 42px), (32 33px 50px), (40 40px 62px), (48 50px 78px)) {
         [the-font-size="#{$size}"] {
             font-size: #{$size}px;
-            line-height: $font-size-line-height;
+            line-height: theVariables.$font-size-line-height;
         }
         .slate-element-list-item {
             &.font-size-#{$size} {
@@ -209,74 +211,8 @@ $thy-icon-nav-link-margin-right: 5px;
     }
 }
 
-.the-nav-split-line {
-    &.horizontal {
-        margin: 5px 20px;
-        display: block;
-        border-top: 1px solid $gray-200;
-    }
-    &.vertical {
-        width: 1px;
-        height: 1rem;
-        margin-top: 0.45rem;
-        margin-right: 5px;
-        background: $gray-300;
-    }
-}
-
-@mixin controlSelected {
-    background-color: rgba($color: $primary, $alpha: 0.6);
-    border-color: $primary;
-}
-
-@mixin controlDangerous {
-    background-color: rgba($color: $danger, $alpha: 0.6);
-    border-color: $danger;
-}
-
-@mixin custom-thy-icon-nav() {
-    .thy-icon-nav .thy-icon-nav-link {
-        position: relative;
-        cursor: pointer;
-        &:not(:last-child) {
-            margin-right: $thy-icon-nav-link-margin-right;
-        }
-    }
-}
-
-@mixin thy-icon-nav-disabled {
-    .thy-icon-nav .thy-icon-nav-link {
-        &.disabled {
-            cursor: not-allowed;
-            color: $gray-400;
-            &:hover {
-                background: transparent;
-                border-radius: unset;
-            }
-        }
-    }
-}
-
-@mixin the-toolbar-disabled {
-    &.disabled {
-        cursor: not-allowed;
-        opacity: 0.25;
-
-        .thy-icon-nav-link {
-            pointer-events: none;
-        }
-    }
-}
-
-@mixin the-toolbar-layout {
-    position: absolute;
-    padding: 5px 10px;
-    background: $white;
-    box-shadow: $box-shadow;
-}
-
 .the-code-block-operation {
-    @include the-toolbar-layout();
+    @include mixins.the-toolbar-layout();
     display: flex;
     transform: translateY(-100%);
     left: 0;
@@ -289,9 +225,6 @@ $thy-icon-nav-link-margin-right: 5px;
             border: none;
         }
     }
-    .thy-icon-nav {
-        flex-wrap: nowrap;
-    }
 }
 
 .the-block-toolbar {
@@ -304,28 +237,18 @@ $thy-icon-nav-link-margin-right: 5px;
 .the-block-toolbar-popover {
     display: flex;
     padding: 5px 10px;
-    background: $white;
-    box-shadow: $box-shadow;
-
-    .thy-icon-nav .thy-icon-nav-link {
-        margin-right: $thy-icon-nav-link-margin-right;
+    background: variables.$white;
+    box-shadow: variables.$box-shadow;
 
+    .thy-action {
         &:last-child {
             margin-right: 0;
         }
 
         &.remove-link:hover {
-            @include remove-link-hover();
+            @include mixins.remove-link-hover();
         }
     }
 }
 
-@mixin the-toolbar-active {
-    .thy-icon-nav-link.thy-popover-origin-active,
-    .the-toolbar-dropdown-container.thy-popover-origin-active .thy-icon-nav-link {
-        color: $primary;
-        background: rgba($primary, 0.1);
-        border-radius: 0.25rem;
-        visibility: visible !important;
-    }
-}
+

package/styles/index.scss

@@ -1,21 +1,29 @@
-@import 'ngx-tethys/styles/variables.scss';
-@import './typo.scss';
-@import './editor.scss';
-@import '../plugins/image/image.component.scss';
-@import '../plugins/todo-item/todo-item.component.scss';
-@import '../components/toolbar-dropdown/toolbar-dropdown.component.scss';
-@import '../components/toolbar-group/toolbar-group.component.scss';
-@import '../components/toolbar/toolbar.component.scss';
-@import '../components/color-select/color-select.component.scss';
-@import '../plugins/code/code.component.scss';
-@import '../plugins/link/link.component.scss';
-@import '../components/column-resize/column-resize.scss';
-@import '../plugins/table/components/table.component.scss';
-@import '../components/table-select/table-select.component.scss';
-@import '../components/conversion-hint/conversion-hint.component.scss';
-@import '../plugins/vertical-align/vertical-align.scss';
-@import '../components/inline-toolbar/inline-toolbar.component.scss';
-@import '../plugins/quick-insert/components/quick-insert.component.scss';
-@import '../plugins/quick-insert/components/quick-toolbar/quick-toolbar.component.scss';
-@import '../plugins/font-size/toolbar-item.component.scss';
-@import '../plugins/inline-code/inline-code.component.scss';
+@use 'ngx-tethys/styles/variables.scss';
+@use './variables.scss' as theVariables;
+@use './mixins.scss' as mixins;
+@use 'ngx-tethys/styles/index.scss' as tethys;
+@use 'ng-codemirror/index.scss' as codemirror;
+
+@forward 'ngx-tethys/styles/variables.scss';
+@forward 'ngx-tethys/styles/basic.scss';
+
+@forward './typo.scss';
+@forward './editor.scss';
+@forward '../plugins/image/image.component.scss';
+@forward '../plugins/todo-item/todo-item.component.scss';
+@forward '../components/toolbar-dropdown/toolbar-dropdown.component.scss';
+@forward '../components/toolbar-group/toolbar-group.component.scss';
+@forward '../components/toolbar/toolbar.component.scss';
+@forward '../components/color-select/color-select.component.scss';
+@forward '../plugins/code/code.component.scss';
+@forward '../plugins/link/link.component.scss';
+@forward '../components/column-resize/column-resize.scss';
+@forward '../plugins/table/components/table.component.scss';
+@forward '../components/table-select/table-select.component.scss';
+@forward '../components/conversion-hint/conversion-hint.component.scss';
+@forward '../plugins/vertical-align/vertical-align.scss';
+@forward '../components/inline-toolbar/inline-toolbar.component.scss';
+@forward '../plugins/quick-insert/components/quick-insert.component.scss';
+@forward '../plugins/quick-insert/components/quick-toolbar/quick-toolbar.component.scss';
+@forward '../plugins/font-size/toolbar-item.component.scss';
+@forward '../plugins/inline-code/inline-code.component.scss';

package/styles/mixins.scss

@@ -0,0 +1,76 @@
+@use 'ngx-tethys/styles/variables.scss';
+@use './variables.scss' as theVariables;
+
+@mixin remove-link-hover {
+    color: variables.$danger;
+    background: hsla(0,100%,73%,.1);
+}
+
+@mixin controlSelected {
+    background-color: rgba($color: variables.$primary, $alpha: 0.6);
+    border-color: variables.$primary;
+}
+
+@mixin controlDangerous {
+    background-color: rgba($color: variables.$danger, $alpha: 0.6);
+    border-color: variables.$danger;
+}
+
+@mixin the-custom-action() {
+    .thy-action {
+        position: relative;
+        cursor: pointer;
+
+        &:not(:last-child) {
+            margin-right: theVariables.$thy-action-margin-right;
+        }
+    }
+}
+
+@mixin the-action-disabled {
+    .thy-action {
+        &.disabled {
+            cursor: not-allowed;
+            color: variables.$gray-400;
+
+            &:hover {
+                background: transparent;
+                border-radius: unset;
+            }
+        }
+    }
+}
+
+@mixin the-toolbar-disabled {
+    &.disabled {
+        cursor: not-allowed;
+        opacity: 0.25;
+
+        .thy-action {
+            pointer-events: none;
+        }
+    }
+}
+
+@mixin the-toolbar-layout {
+    position: absolute;
+    padding: 5px 10px;
+    background: variables.$white;
+    box-shadow: variables.$box-shadow;
+}
+
+@mixin the-toolbar-active {
+    .thy-action.thy-popover-origin-active,
+    .the-toolbar-dropdown-container.thy-popover-origin-active .thy-action {
+        color: variables.$primary;
+        background: rgba(variables.$primary, 0.1);
+        border-radius: 0.25rem;
+        visibility: visible !important;
+    }
+}
+
+@mixin the-toolbar-divider-spacing {
+    & + .thy-divider {
+        margin-left: #{theVariables.$thy-action-margin-right} !important;
+    }
+}

package/styles/typo.scss

@@ -1,32 +1,11 @@
 @use 'sass:math';
-
-$default-text-space: 10px; // text white space 18(distance between paragrahp) - 8(block margin)
-$headline-one-size: 28px;
-$headline-two-size: 24px;
-$headline-three-size: 20px;
-$headline-four-size: 18px;
-$headline-five-size: 16px;
-$headline-one-lineHeight: 40px;
-$headline-two-lineHeight: 38px;
-$headline-three-lineHeight: 34px;
-$headline-four-lineHeight: 30px;
-$headline-five-lineHeight: 28px;
-$headline-six-lineHeight: 26px;
-$the-font-size-base: 14px;
-$block-mb: 8px;
-$block-line-heith: 24px;
-$nav-item-margin: 5px;
-$selection-background: rgba($color: $primary, $alpha: 0.3);
-$font-size-line-height: 1.5;
-
-@mixin remove-link-hover {
-    color: $danger;
-    background: hsla(0,100%,73%,.1);
-}
+@use 'ngx-tethys/styles/variables.scss';
+@use './variables.scss' as theVariables;
+@use './mixins.scss' as mixins;
 
 .the-editor-typo {
     display: flow-root;
-    font-size: $the-font-size-base;
+    font-size: theVariables.$the-font-size-base;
     min-height: 250px;
     padding: 28px 30px;
     word-break: break-all;
@@ -40,28 +19,28 @@ $font-size-line-height: 1.5;
         font-weight: bold;
     }
     h1 {
-        line-height: $headline-one-lineHeight;
-        font-size: $headline-one-size;
+        line-height: theVariables.$headline-one-lineHeight;
+        font-size: theVariables.$headline-one-size;
     }
     h2 {
-        line-height: $headline-two-lineHeight;
-        font-size: $headline-two-size;
+        line-height: theVariables.$headline-two-lineHeight;
+        font-size: theVariables.$headline-two-size;
     }
     h3 {
-        line-height: $headline-three-lineHeight;
-        font-size: $headline-three-size;
+        line-height: theVariables.$headline-three-lineHeight;
+        font-size: theVariables.$headline-three-size;
     }
     h4 {
-        line-height: $headline-four-lineHeight;
-        font-size: $headline-four-size;
+        line-height: theVariables.$headline-four-lineHeight;
+        font-size: theVariables.$headline-four-size;
     }
     h5 {
-        line-height: $headline-five-lineHeight;
-        font-size: $headline-five-size;
+        line-height: theVariables.$headline-five-lineHeight;
+        font-size: theVariables.$headline-five-size;
     }
     h6 {
-        line-height: $headline-six-lineHeight;
-        font-size: $the-font-size-base;
+        line-height: theVariables.$headline-six-lineHeight;
+        font-size: theVariables.$the-font-size-base;
     }
     // margin
     ul,
@@ -71,7 +50,7 @@ $font-size-line-height: 1.5;
         padding: 0;
         li {
             margin-left: 2em;
-            margin-bottom: math.div($block-mb, 2);
+            margin-bottom: math.div(theVariables.$block-mb, 2);
             &:last-child {
                 margin-bottom: 0;
             }
@@ -80,9 +59,9 @@ $font-size-line-height: 1.5;
     blockquote {
         margin-left: 0;
         margin-right: 0;
-        color: $gray-600;
+        color: variables.$gray-600;
         padding-left: 10px !important;
-        border-left: 4px solid $gray-200;
+        border-left: 4px solid variables.$gray-200;
     }
     .the-hr {
         border: 1px solid transparent;
@@ -92,7 +71,7 @@ $font-size-line-height: 1.5;
         hr {
             box-sizing: border-box;
             width: 100%;
-            border-top: 1px solid $gray-200;
+            border-top: 1px solid variables.$gray-200;
             padding: 0;
             margin: 0;
         }
@@ -108,7 +87,7 @@ $font-size-line-height: 1.5;
     code {
         margin: 0 4px;
         padding: 2px 3px;
-        border: 1px solid $gray-300;
+        border: 1px solid variables.$gray-300;
         border-radius: 2px;
         font-family: monospace;
         font-size: inherit;
@@ -116,7 +95,7 @@ $font-size-line-height: 1.5;
         line-height: inherit;
         word-wrap: break-word;
         text-indent: 0;
-        color: $gray-700;
+        color: variables.$gray-700;
     }
     .slate-element-hr{
         display: block;
@@ -125,18 +104,12 @@ $font-size-line-height: 1.5;
     .slate-element-code,
     .slate-element-image,
     .slate-element-block-quote {
-        padding: math.div($default-text-space, 2) 0;
-    }
-    .slate-element-image {
-        .image-content {
-            max-width: 100%;
-            height: auto !important;
-        }
+        padding: math.div(theVariables.$default-text-space, 2) 0;
     }
     .slate-block-card {
         .card-left,
         .card-right {
-            bottom: math.div($default-text-space, 2);
+            bottom: math.div(theVariables.$default-text-space, 2);
             line-height: 17px; // cursor default height
         }
         &.slate-block-card-table {
@@ -154,30 +127,30 @@ $font-size-line-height: 1.5;
     }
     .slate-element-table-content,
     .slate-element-paragraph {
-        line-height: $block-line-heith;
+        line-height: theVariables.$block-line-heith;
     }
     & .slate-block:not(:last-child),
     & .slate-block-card:not(:last-child) {
-        margin-bottom: $block-mb;
+        margin-bottom: theVariables.$block-mb;
     }
     .CodeMirror-focused .CodeMirror-selected {
-        background: $selection-background;
+        background: theVariables.$selection-background;
     }
      ::-moz-selection {
         /* Code for Firefox */
-        background: $selection-background;
+        background: theVariables.$selection-background;
     }
      ::selection {
-        background: $selection-background;
+        background: theVariables.$selection-background;
     }
-    .thy-icon-nav .thy-icon-nav-link {
-        margin-right: 5px;
+    .thy-action {
+        margin-right: theVariables.$thy-action-margin-right;
         &:last-child {
             margin-right: 0;
         }
     }
-    .remove-link.thy-icon-nav-link:hover {
-        @include remove-link-hover();
+    .remove-link.thy-action:hover {
+        @include mixins.remove-link-hover();
     }
 
     // 处理 block-card 图文混排

package/styles/variables.scss

@@ -0,0 +1,21 @@
+@use 'ngx-tethys/styles/variables.scss';
+
+$default-text-space: 10px; // text white space 18(distance between paragrahp) - 8(block margin)
+$headline-one-size: 28px;
+$headline-two-size: 24px;
+$headline-three-size: 20px;
+$headline-four-size: 18px;
+$headline-five-size: 16px;
+$headline-one-lineHeight: 40px;
+$headline-two-lineHeight: 38px;
+$headline-three-lineHeight: 34px;
+$headline-four-lineHeight: 30px;
+$headline-five-lineHeight: 28px;
+$headline-six-lineHeight: 26px;
+$the-font-size-base: 14px;
+$block-mb: 8px;
+$block-line-heith: 24px;
+$nav-item-margin: 5px;
+$selection-background: rgba($color: variables.$primary, $alpha: 0.3);
+$font-size-line-height: 1.5;
+$thy-action-margin-right: 4px;

package/components/nav-split-line/nav-split-line.component.d.ts

@@ -1,13 +0,0 @@
-import { OnInit } from '@angular/core';
-import { ToolbarItemMode } from '../../constants/toolbar';
-import * as i0 from "@angular/core";
-export declare class NavSplitLineComponent implements OnInit {
-    mode: ToolbarItemMode;
-    theNavSplitLine: boolean;
-    get horizontal(): boolean;
-    get vertical(): boolean;
-    constructor();
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NavSplitLineComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NavSplitLineComponent, "nav-split-line", never, { "mode": "mode"; }, {}, never, never>;
-}

package/esm2020/components/nav-split-line/nav-split-line.component.mjs

@@ -1,37 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-import { ToolbarItemMode } from '../../constants/toolbar';
-import * as i0 from "@angular/core";
-export class NavSplitLineComponent {
-    constructor() {
-        this.mode = ToolbarItemMode.vertical;
-        this.theNavSplitLine = true;
-    }
-    get horizontal() {
-        return this.mode === ToolbarItemMode.horizontal;
-    }
-    get vertical() {
-        return this.mode === ToolbarItemMode.vertical;
-    }
-    ngOnInit() { }
-}
-NavSplitLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NavSplitLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavSplitLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: NavSplitLineComponent, selector: "nav-split-line", inputs: { mode: "mode" }, host: { properties: { "class.the-nav-split-line": "this.theNavSplitLine", "class.horizontal": "this.horizontal", "class.vertical": "this.vertical" } }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NavSplitLineComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'nav-split-line',
-                    template: ''
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { mode: [{
-                type: Input
-            }], theNavSplitLine: [{
-                type: HostBinding,
-                args: ['class.the-nav-split-line']
-            }], horizontal: [{
-                type: HostBinding,
-                args: ['class.horizontal']
-            }], vertical: [{
-                type: HostBinding,
-                args: ['class.vertical']
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2LXNwbGl0LWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvc3JjL2NvbXBvbmVudHMvbmF2LXNwbGl0LWxpbmUvbmF2LXNwbGl0LWxpbmUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUN0RSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0seUJBQXlCLENBQUM7O0FBTTFELE1BQU0sT0FBTyxxQkFBcUI7SUFjOUI7UUFiUyxTQUFJLEdBQW9CLGVBQWUsQ0FBQyxRQUFRLENBQUM7UUFHMUQsb0JBQWUsR0FBRyxJQUFJLENBQUM7SUFVUixDQUFDO0lBUmhCLElBQXFDLFVBQVU7UUFDM0MsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLGVBQWUsQ0FBQyxVQUFVLENBQUM7SUFDcEQsQ0FBQztJQUVELElBQW1DLFFBQVE7UUFDdkMsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLGVBQWUsQ0FBQyxRQUFRLENBQUM7SUFDbEQsQ0FBQztJQUlELFFBQVEsS0FBVSxDQUFDOztrSEFoQlYscUJBQXFCO3NHQUFyQixxQkFBcUIsd09BRnBCLEVBQUU7MkZBRUgscUJBQXFCO2tCQUpqQyxTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFFBQVEsRUFBRSxFQUFFO2lCQUNmOzBFQUVZLElBQUk7c0JBQVosS0FBSztnQkFHTixlQUFlO3NCQURkLFdBQVc7dUJBQUMsMEJBQTBCO2dCQUdGLFVBQVU7c0JBQTlDLFdBQVc7dUJBQUMsa0JBQWtCO2dCQUlJLFFBQVE7c0JBQTFDLFdBQVc7dUJBQUMsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVG9vbGJhckl0ZW1Nb2RlIH0gZnJvbSAnLi4vLi4vY29uc3RhbnRzL3Rvb2xiYXInO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ25hdi1zcGxpdC1saW5lJyxcbiAgICB0ZW1wbGF0ZTogJydcbn0pXG5leHBvcnQgY2xhc3MgTmF2U3BsaXRMaW5lQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgICBASW5wdXQoKSBtb2RlOiBUb29sYmFySXRlbU1vZGUgPSBUb29sYmFySXRlbU1vZGUudmVydGljYWw7XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLnRoZS1uYXYtc3BsaXQtbGluZScpXG4gICAgdGhlTmF2U3BsaXRMaW5lID0gdHJ1ZTtcblxuICAgIEBIb3N0QmluZGluZygnY2xhc3MuaG9yaXpvbnRhbCcpIGdldCBob3Jpem9udGFsKCkge1xuICAgICAgICByZXR1cm4gdGhpcy5tb2RlID09PSBUb29sYmFySXRlbU1vZGUuaG9yaXpvbnRhbDtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLnZlcnRpY2FsJykgZ2V0IHZlcnRpY2FsKCkge1xuICAgICAgICByZXR1cm4gdGhpcy5tb2RlID09PSBUb29sYmFySXRlbU1vZGUudmVydGljYWw7XG4gICAgfVxuXG4gICAgY29uc3RydWN0b3IoKSB7fVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxufVxuIl19