@worktile/theia 2.1.4 → 2.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/bundles/worktile-theia.umd.js +287 -58
  2. package/bundles/worktile-theia.umd.js.map +1 -1
  3. package/components/toolbar/toolbar.component.d.ts +1 -3
  4. package/constants/default.d.ts +1 -0
  5. package/constants/node-types.d.ts +4 -3
  6. package/custom-types.d.ts +4 -1
  7. package/editor.module.d.ts +24 -23
  8. package/esm2015/components/inline-toolbar/inline-toolbar.component.js +1 -1
  9. package/esm2015/components/toolbar/toolbar.component.js +7 -6
  10. package/esm2015/components/toolbar-group/toolbar-group.component.js +1 -1
  11. package/esm2015/constants/auto-format-rules.js +8 -3
  12. package/esm2015/constants/default.js +2 -1
  13. package/esm2015/constants/node-types.js +5 -4
  14. package/esm2015/constants/toolbar.js +5 -5
  15. package/esm2015/custom-types.js +1 -1
  16. package/esm2015/editor.component.js +10 -6
  17. package/esm2015/editor.module.js +6 -3
  18. package/esm2015/interfaces/auto-format.js +1 -1
  19. package/esm2015/interfaces/element.js +1 -1
  20. package/esm2015/plugins/autoformat/autoformat.plugin.js +2 -1
  21. package/esm2015/plugins/autoformat/transforms/auto-format-inline.js +27 -14
  22. package/esm2015/plugins/code/code.component.js +26 -10
  23. package/esm2015/plugins/font-size/font-size.editor.js +35 -1
  24. package/esm2015/plugins/index.js +7 -3
  25. package/esm2015/plugins/inline-code/inline-code.component.js +27 -0
  26. package/esm2015/plugins/inline-code/inline-code.editor.js +45 -0
  27. package/esm2015/plugins/inline-code/inline-code.plugin.js +46 -0
  28. package/esm2015/plugins/inline-code/options.js +14 -0
  29. package/esm2015/plugins/link/link.component.js +4 -2
  30. package/esm2015/plugins/list/components/list-item.component.js +29 -3
  31. package/esm2015/plugins/mark/options.js +1 -9
  32. package/esm2015/services/context.service.js +9 -1
  33. package/esm2015/shortcuts/mark.js +10 -4
  34. package/fesm2015/worktile-theia.js +283 -60
  35. package/fesm2015/worktile-theia.js.map +1 -1
  36. package/interfaces/auto-format.d.ts +1 -1
  37. package/interfaces/element.d.ts +1 -1
  38. package/package.json +1 -1
  39. package/plugins/autoformat/transforms/auto-format-inline.d.ts +3 -1
  40. package/plugins/code/code.component.d.ts +6 -3
  41. package/plugins/code/code.component.scss +16 -0
  42. package/plugins/font-size/font-size.editor.d.ts +2 -0
  43. package/plugins/inline-code/inline-code.component.d.ts +14 -0
  44. package/plugins/inline-code/inline-code.component.scss +13 -0
  45. package/plugins/inline-code/inline-code.editor.d.ts +7 -0
  46. package/plugins/inline-code/inline-code.plugin.d.ts +2 -0
  47. package/plugins/inline-code/options.d.ts +2 -0
  48. package/plugins/list/components/list-item.component.d.ts +4 -1
  49. package/queries/get-container-blocks.d.ts +1 -1
  50. package/queries/get-selection-marks.d.ts +1 -1
  51. package/services/context.service.d.ts +5 -1
  52. package/styles/editor.scss +18 -4
  53. package/styles/index.scss +1 -0
  54. package/transforms/set-marks.d.ts +1 -1
@@ -25,7 +25,7 @@ export interface AutoFormatRule {
25
25
  /**
26
26
  * Custom formatting function.
27
27
  */
28
- format?: (editor: Editor, markups?: string[]) => void;
28
+ format?: (editor: Editor, markup: string | string[]) => void;
29
29
  /**
30
30
  * - block (default) – set/insert block. Should be used with `markup`.
31
31
  * - inline – insert mark between markups. Should be used with `between`.
@@ -1,6 +1,6 @@
1
1
  import { Alignment, ElementKinds } from '../constants';
2
2
  export declare type HeadingElementKinds = ElementKinds.heading_1 | ElementKinds.heading_2 | ElementKinds.heading_3 | ElementKinds.heading_4 | ElementKinds.heading_5 | ElementKinds.heading_6;
3
- export declare type BlockElementKinds = ElementKinds.image | ElementKinds.paragraph | ElementKinds.numberedList | ElementKinds.bulletedList | ElementKinds.listItem | ElementKinds.checkItem | ElementKinds.table | ElementKinds.tableRow | ElementKinds.tableCell | ElementKinds.tableContent | ElementKinds.code | ElementKinds.blockquote | ElementKinds.hr | ElementKinds.link | HeadingElementKinds;
3
+ export declare type BlockElementKinds = ElementKinds.image | ElementKinds.paragraph | ElementKinds.numberedList | ElementKinds.bulletedList | ElementKinds.listItem | ElementKinds.checkItem | ElementKinds.table | ElementKinds.tableRow | ElementKinds.tableCell | ElementKinds.tableContent | ElementKinds.code | ElementKinds.blockquote | ElementKinds.hr | ElementKinds.link | ElementKinds.inlineCode | HeadingElementKinds;
4
4
  export declare type InlineElementKinds = ElementKinds.link;
5
5
  export interface TheBlockElement {
6
6
  align?: Alignment;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worktile/theia",
3
- "version": "2.1.4",
3
+ "version": "2.1.5",
4
4
  "description": "theia editor",
5
5
  "author": "YanDong <nanianqiumo@foxmail.com>",
6
6
  "homepage": "https://github.com/atinc/theia#readme",
@@ -1,7 +1,9 @@
1
+ import { Editor } from 'slate';
1
2
  import { MarkEditor } from '../../../plugins/mark/mark.editor';
2
- export declare const autoFormatInline: (editor: MarkEditor, { type, between, markup, ignoreTrim }: {
3
+ export declare const autoFormatInline: (editor: MarkEditor, { type, between, markup, ignoreTrim, format }: {
3
4
  type: string;
4
5
  between?: string[];
5
6
  markup?: string;
6
7
  ignoreTrim?: boolean;
8
+ format?: (editor: Editor, markup?: string) => void;
7
9
  }) => boolean;
@@ -1,4 +1,4 @@
1
- import { ElementRef, ChangeDetectorRef, OnInit, AfterViewInit, NgZone } from '@angular/core';
1
+ import { ElementRef, ChangeDetectorRef, OnInit, AfterViewInit, NgZone, OnDestroy } from '@angular/core';
2
2
  import { ThyNotifyService } from 'ngx-tethys/notify';
3
3
  import { Editor } from 'slate';
4
4
  import { CodeMirrorComponent } from 'ng-codemirror';
@@ -7,8 +7,9 @@ import { DefaultToolbarItem, TheBaseElementComponent } from '../../interfaces';
7
7
  import { CodeElement } from '../../custom-types';
8
8
  import { ThyResizeEvent } from 'ngx-tethys/resizable';
9
9
  import { TheContextService } from '../../services/context.service';
10
+ import { Subject } from 'rxjs';
10
11
  import * as i0 from "@angular/core";
11
- export declare class TheCodeComponent extends TheBaseElementComponent<CodeElement, Editor> implements OnInit, AfterViewInit {
12
+ export declare class TheCodeComponent extends TheBaseElementComponent<CodeElement, Editor> implements OnInit, AfterViewInit, OnDestroy {
12
13
  elementRef: ElementRef;
13
14
  cdr: ChangeDetectorRef;
14
15
  private thyNotifyService;
@@ -22,8 +23,9 @@ export declare class TheCodeComponent extends TheBaseElementComponent<CodeElemen
22
23
  key: string;
23
24
  name: string;
24
25
  }[];
26
+ destroy$: Subject<void>;
25
27
  ToolbarItemMode: typeof ToolbarItemMode;
26
- isFocusCode: boolean;
28
+ isHightLight: boolean;
27
29
  resizeHeight: number;
28
30
  options: {
29
31
  mode: string;
@@ -56,6 +58,7 @@ export declare class TheCodeComponent extends TheBaseElementComponent<CodeElemen
56
58
  onResize({ height }: ThyResizeEvent): void;
57
59
  onEndResize(): void;
58
60
  onChangeWrap(value: boolean): void;
61
+ ngOnDestroy(): void;
59
62
  static ɵfac: i0.ɵɵFactoryDeclaration<TheCodeComponent, never>;
60
63
  static ɵcmp: i0.ɵɵComponentDeclaration<TheCodeComponent, "div[theCode]", never, {}, {}, never, never>;
61
64
  }
@@ -10,6 +10,22 @@
10
10
  border-radius: 2px;
11
11
  color: $gray-600;
12
12
  background: rgba(243, 243, 243, 0.8);
13
+ &:hover{
14
+ border-color: $primary;
15
+ }
16
+ }
17
+ .resize-code-container.readonly, .resize-code-container.focus{
18
+ border-color: $gray-300;
19
+ &:hover{
20
+ border-color: $gray-300;
21
+ }
22
+ }
23
+
24
+ .resize-code-container.active {
25
+ border-color: $primary;
26
+ &:hover{
27
+ border-color: $primary;
28
+ }
13
29
  }
14
30
  .CodeMirror {
15
31
  height: 100% !important;
@@ -3,6 +3,8 @@ import { TheEditor } from '../../interfaces/editor';
3
3
  import { FontSizes } from '../../constants/node-types';
4
4
  export declare const FontSizeEditor: {
5
5
  setFontSize(editor: TheEditor, size: FontSizes): void;
6
+ setFontSizeMark(editor: Editor, size: FontSizes): void;
7
+ unsetFontSize(editor: Editor, size: FontSizes, fontSizeMark: number, isDefaultFontSize: boolean): boolean;
6
8
  isFontSizeActive(editor: Editor, size: FontSizes): boolean;
7
9
  isDisabled(editor: TheEditor): boolean;
8
10
  };
@@ -0,0 +1,14 @@
1
+ import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
2
+ import { Editor } from 'slate';
3
+ import { InlineCodeElement } from '../../custom-types';
4
+ import { TheBaseElementComponent } from '../../interfaces';
5
+ import * as i0 from "@angular/core";
6
+ export declare class TheInlineCodeComponent extends TheBaseElementComponent<InlineCodeElement, Editor> implements OnInit, OnDestroy {
7
+ elementRef: ElementRef;
8
+ cdr: ChangeDetectorRef;
9
+ constructor(elementRef: ElementRef, cdr: ChangeDetectorRef);
10
+ ngOnInit(): void;
11
+ ngOnDestroy(): void;
12
+ static ɵfac: i0.ɵɵFactoryDeclaration<TheInlineCodeComponent, never>;
13
+ static ɵcmp: i0.ɵɵComponentDeclaration<TheInlineCodeComponent, "span[theInlineCode]", never, {}, {}, never, never>;
14
+ }
@@ -0,0 +1,13 @@
1
+ .slate-element-inline-code{
2
+ margin: 0 4px;
3
+ padding: 2px 3px;
4
+ border: 1px solid $gray-300;
5
+ border-radius: 2px;
6
+ font-family: monospace;
7
+ font-size: inherit;
8
+ background-color: rgba(243, 243, 243, 0.8);
9
+ line-height: inherit;
10
+ word-wrap: break-word;
11
+ text-indent: 0;
12
+ color: $gray-700;
13
+ }
@@ -0,0 +1,7 @@
1
+ import { Editor } from 'slate';
2
+ export declare const InlineCodeEditor: {
3
+ toggleInlineCode(editor: any, text?: string): void;
4
+ wrapInlineCode(editor: Editor, text?: string): void;
5
+ unwrapInlineCode(editor: Editor): void;
6
+ isInlineCodeActive(editor: Editor): boolean;
7
+ };
@@ -0,0 +1,2 @@
1
+ import { Editor } from 'slate';
2
+ export declare const withInlineCode: (editor: Editor) => import("@worktile/theia").TheEditor;
@@ -0,0 +1,2 @@
1
+ import { ToolbarItem } from '../../interfaces';
2
+ export declare const InlineCodeOptions: ToolbarItem[];
@@ -10,8 +10,11 @@ export declare class TheListItemComponent extends TheBaseElementComponent<Elemen
10
10
  ngOnInit(): void;
11
11
  onContextChange(): void;
12
12
  ngOnDestroy(): void;
13
- applyFontSize(): void;
13
+ addFontSize(): void;
14
14
  clearFontSize(): void;
15
+ getStart(): number;
16
+ getLiIndex(): number;
17
+ addMultiDigit(): void;
15
18
  static ɵfac: i0.ɵɵFactoryDeclaration<TheListItemComponent, never>;
16
19
  static ɵcmp: i0.ɵɵComponentDeclaration<TheListItemComponent, "li[theLi]", never, {}, {}, never, never>;
17
20
  }
@@ -1,2 +1,2 @@
1
1
  import { Editor } from 'slate';
2
- export declare const getContainerBlocks: (editor: Editor) => (import("../constants/node-types").ElementKinds.image | import("../constants/node-types").ElementKinds.paragraph | import("../constants/node-types").ElementKinds.heading_1 | import("../constants/node-types").ElementKinds.heading_2 | import("../constants/node-types").ElementKinds.heading_3 | import("../constants/node-types").ElementKinds.heading_4 | import("../constants/node-types").ElementKinds.heading_5 | import("../constants/node-types").ElementKinds.heading_6 | import("../constants/node-types").ElementKinds.numberedList | import("../constants/node-types").ElementKinds.bulletedList | import("../constants/node-types").ElementKinds.listItem | import("../constants/node-types").ElementKinds.checkItem | import("../constants/node-types").ElementKinds.table | import("../constants/node-types").ElementKinds.tableRow | import("../constants/node-types").ElementKinds.tableCell | import("../constants/node-types").ElementKinds.code | import("../constants/node-types").ElementKinds.blockquote | import("../constants/node-types").ElementKinds.hr | import("../constants/node-types").ElementKinds.link)[];
2
+ export declare const getContainerBlocks: (editor: Editor) => (import("../constants/node-types").ElementKinds.image | import("../constants/node-types").ElementKinds.paragraph | import("../constants/node-types").ElementKinds.heading_1 | import("../constants/node-types").ElementKinds.heading_2 | import("../constants/node-types").ElementKinds.heading_3 | import("../constants/node-types").ElementKinds.heading_4 | import("../constants/node-types").ElementKinds.heading_5 | import("../constants/node-types").ElementKinds.heading_6 | import("../constants/node-types").ElementKinds.numberedList | import("../constants/node-types").ElementKinds.bulletedList | import("../constants/node-types").ElementKinds.listItem | import("../constants/node-types").ElementKinds.checkItem | import("../constants/node-types").ElementKinds.table | import("../constants/node-types").ElementKinds.tableRow | import("../constants/node-types").ElementKinds.tableCell | import("../constants/node-types").ElementKinds.code | import("../constants/node-types").ElementKinds.blockquote | import("../constants/node-types").ElementKinds.hr | import("../constants/node-types").ElementKinds.link | import("../constants/node-types").ElementKinds.inlineCode)[];
@@ -7,6 +7,6 @@ export declare const getSelectionMarks: (editor: Editor) => {
7
7
  strike?: any;
8
8
  color?: any;
9
9
  "background-color"?: any;
10
- "code-line"?: any;
11
10
  "font-size"?: any;
11
+ "code-line"?: any;
12
12
  };
@@ -1,8 +1,10 @@
1
1
  import { NgZone, ViewContainerRef } from '@angular/core';
2
2
  import { Observable } from 'rxjs';
3
- import { MarkTypes } from '../constants/node-types';
3
+ import { TheOptions } from '../interfaces/editor';
4
+ import { FontSizes, MarkTypes } from '../constants/node-types';
4
5
  import * as i0 from "@angular/core";
5
6
  export interface TheContextOptions {
7
+ theOptions: TheOptions;
6
8
  width?: number;
7
9
  nativeElement: HTMLElement;
8
10
  viewContainerRef: ViewContainerRef;
@@ -27,6 +29,8 @@ export declare class TheContextService {
27
29
  constructor(ngZone: NgZone);
28
30
  initialize(options: TheContextOptions): void;
29
31
  getOptions(): TheContextOptions;
32
+ getTheOptions(): TheOptions;
33
+ getDefaultFontSize(): FontSizes;
30
34
  getEditableElement(): Element;
31
35
  getFirstElementChild(): HTMLElement;
32
36
  setUploadFileList(file: {
@@ -127,14 +127,28 @@ $thy-icon-nav-link-margin-right: 5px;
127
127
  color: $gray-700;
128
128
  }
129
129
 
130
- @each $size in 12, 13, 14, 15, 16, 18, 20, 24, 28, 32, 40, 48 {
130
+ // list: fontSize, li marginLeft, multiDigit li marginLeft
131
+ @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)) {
131
132
  [the-font-size="#{$size}"] {
132
133
  font-size: #{$size}px;
133
134
  line-height: $font-size-line-height;
134
135
  }
135
- .slate-element-list-item.font-size-#{$size} {
136
- &::marker {
137
- font-size: #{$size}px;
136
+ .slate-element-list-item {
137
+ &.font-size-#{$size} {
138
+ &::marker {
139
+ font-size: #{$size}px;
140
+ }
141
+ }
142
+ }
143
+ .slate-element-numbered-list {
144
+ .slate-element-list-item {
145
+ &.font-size-#{$size} {
146
+ margin-left: $liMl;
147
+
148
+ &[data-multi-digit] {
149
+ margin-left: $liMultiDigitMl;
150
+ }
151
+ }
138
152
  }
139
153
  }
140
154
  }
package/styles/index.scss CHANGED
@@ -19,3 +19,4 @@
19
19
  @import '../plugins/quick-insert/components/quick-toolbar/quick-toolbar.component.scss';
20
20
  @import '../plugins/placeholder/placeholder.component.scss';
21
21
  @import '../plugins/font-size/toolbar-item.component.scss';
22
+ @import '../plugins/inline-code/inline-code.component.scss';
@@ -7,6 +7,6 @@ export declare const setMarks: (editor: Editor, marks: {
7
7
  strike?: any;
8
8
  color?: any;
9
9
  "background-color"?: any;
10
- "code-line"?: any;
11
10
  "font-size"?: any;
11
+ "code-line"?: any;
12
12
  }, at?: Path | Point | Range) => void;