@worktile/theia 1.2.7 → 1.2.11

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 (84) hide show
  1. package/bundles/worktile-theia.umd.js +802 -162
  2. package/bundles/worktile-theia.umd.js.map +1 -1
  3. package/components/inline-toolbar/inline-toolbar.component.d.ts +24 -0
  4. package/components/inline-toolbar/inline-toolbar.component.scss +18 -0
  5. package/components/nav-split-line/nav-split-line.component.d.ts +6 -1
  6. package/components/toolbar-dropdown/toolbar-dropdown.component.scss +3 -0
  7. package/components/toolbar-item/toolbar-item.component.d.ts +14 -5
  8. package/constants/code.d.ts +7 -7
  9. package/constants/node-types.d.ts +0 -1
  10. package/constants/toolbar.d.ts +6 -2
  11. package/custom-types.d.ts +1 -0
  12. package/editor.component.d.ts +6 -4
  13. package/editor.module.d.ts +59 -52
  14. package/esm2015/components/color-select/color-select.component.js +3 -2
  15. package/esm2015/components/inline-toolbar/inline-toolbar.component.js +136 -0
  16. package/esm2015/components/nav-split-line/nav-split-line.component.js +26 -5
  17. package/esm2015/components/toolbar-base-item/toolbar-base-item.component.js +3 -2
  18. package/esm2015/components/toolbar-item/toolbar-item.component.js +70 -24
  19. package/esm2015/constants/code.js +7 -7
  20. package/esm2015/constants/node-types.js +1 -2
  21. package/esm2015/constants/toolbar.js +37 -5
  22. package/esm2015/custom-types.js +1 -1
  23. package/esm2015/editor.component.js +24 -19
  24. package/esm2015/editor.module.js +20 -8
  25. package/esm2015/interfaces/toolbar.js +1 -1
  26. package/esm2015/plugins/code/code.component.js +13 -8
  27. package/esm2015/plugins/common/auto-insert-data..js +2 -3
  28. package/esm2015/plugins/common/get-fragment.plugin.js +4 -4
  29. package/esm2015/plugins/deserializers/deserialize-html.plugin.js +8 -1
  30. package/esm2015/plugins/image/image.plugin.js +1 -2
  31. package/esm2015/plugins/index.js +8 -4
  32. package/esm2015/plugins/link/link.plugin.js +7 -2
  33. package/esm2015/plugins/list/list.plugin.js +9 -9
  34. package/esm2015/plugins/list/queries/get-start-list-item.js +9 -2
  35. package/esm2015/plugins/list/queries/is-selection-in-same-list-item.js +17 -0
  36. package/esm2015/plugins/node-id/node-id.plugin.js +7 -2
  37. package/esm2015/plugins/paint-format/options.js +54 -0
  38. package/esm2015/plugins/paint-format/paint-format.editor.js +67 -0
  39. package/esm2015/plugins/placeholder/placeholder.component.js +75 -0
  40. package/esm2015/plugins/public-api.js +2 -1
  41. package/esm2015/plugins/quick-insert/components/quick-insert.component.js +76 -0
  42. package/esm2015/plugins/quick-insert/components/quick-toolbar/quick-toolbar.component.js +75 -0
  43. package/esm2015/plugins/quick-insert/quick-insert.editor.js +61 -0
  44. package/esm2015/plugins/quick-insert/quick-insert.plugint.js +37 -0
  45. package/esm2015/plugins/table/components/row/row.component.js +3 -1
  46. package/esm2015/plugins/table/components/table.component.js +6 -3
  47. package/esm2015/plugins/table/components/td/td.component.js +2 -1
  48. package/esm2015/plugins/table/components/toolbar/table-toolbar.component.js +1 -1
  49. package/esm2015/plugins/table/table.plugin.js +3 -3
  50. package/esm2015/plugins/vertical-align/toolbar-item.component.js +11 -6
  51. package/esm2015/public-api.js +2 -1
  52. package/esm2015/services/context.service.js +2 -2
  53. package/esm2015/services/toolbar.service.js +5 -5
  54. package/esm2015/utils/auto-focus.js +2 -2
  55. package/esm2015/utils/fragment.js +3 -3
  56. package/esm2015/utils/is-clean-empty-paragraph.js +32 -0
  57. package/esm2015/utils/weak-maps.js +2 -1
  58. package/fesm2015/worktile-theia.js +778 -160
  59. package/fesm2015/worktile-theia.js.map +1 -1
  60. package/interfaces/toolbar.d.ts +3 -2
  61. package/package.json +1 -1
  62. package/plugins/code/code.component.d.ts +3 -2
  63. package/plugins/list/queries/get-start-list-item.d.ts +8 -2
  64. package/plugins/list/queries/is-selection-in-same-list-item.d.ts +5 -0
  65. package/plugins/paint-format/options.d.ts +2 -0
  66. package/plugins/paint-format/paint-format.editor.d.ts +7 -0
  67. package/{components → plugins}/placeholder/placeholder.component.d.ts +5 -6
  68. package/{components → plugins}/placeholder/placeholder.component.scss +0 -0
  69. package/plugins/public-api.d.ts +1 -0
  70. package/plugins/quick-insert/components/quick-insert.component.d.ts +25 -0
  71. package/plugins/quick-insert/components/quick-insert.component.scss +21 -0
  72. package/plugins/quick-insert/components/quick-toolbar/quick-toolbar.component.d.ts +29 -0
  73. package/plugins/quick-insert/components/quick-toolbar/quick-toolbar.component.scss +21 -0
  74. package/plugins/quick-insert/quick-insert.editor.d.ts +8 -0
  75. package/plugins/quick-insert/quick-insert.plugint.d.ts +2 -0
  76. package/plugins/table/components/table.component.d.ts +1 -0
  77. package/plugins/vertical-align/toolbar-item.component.d.ts +1 -0
  78. package/public-api.d.ts +1 -0
  79. package/services/toolbar.service.d.ts +1 -1
  80. package/styles/editor.scss +41 -15
  81. package/styles/index.scss +5 -2
  82. package/utils/is-clean-empty-paragraph.d.ts +8 -0
  83. package/utils/weak-maps.d.ts +1 -0
  84. package/esm2015/components/placeholder/placeholder.component.js +0 -88
@@ -14,7 +14,7 @@ export declare enum ToolbarAlignment {
14
14
  export declare type ToolbarDefinition = {
15
15
  global?: string[];
16
16
  inline?: string[];
17
- block?: string[];
17
+ quick?: string[];
18
18
  };
19
19
  interface ToolbarItemBase {
20
20
  key: ToolbarKey;
@@ -29,6 +29,7 @@ interface ToolbarItemBase {
29
29
  }
30
30
  export interface CustomizeToolbarItem extends ToolbarItemBase {
31
31
  iconComponent?: ComponentType<any>;
32
+ quickItemComponent?: ComponentType<any>;
32
33
  type?: ToolbarItemType;
33
34
  dropdownMode?: DropdownMode;
34
35
  }
@@ -41,7 +42,7 @@ export declare type ToolbarItem = CustomizeToolbarItem & DefaultToolbarItem;
41
42
  export declare type ToolbarEntity = {
42
43
  global?: ToolbarItem[];
43
44
  inline?: ToolbarItem[];
44
- block?: ToolbarItem[];
45
+ quick?: ToolbarItem[];
45
46
  };
46
47
  export interface ToolbarInitOption {
47
48
  toolbarDefinition: ToolbarDefinition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worktile/theia",
3
- "version": "1.2.7",
3
+ "version": "1.2.11",
4
4
  "description": "theia editor",
5
5
  "author": "YanDong <nanianqiumo@foxmail.com>",
6
6
  "homepage": "https://github.com/atinc/theia#readme",
@@ -2,7 +2,7 @@ import { ElementRef, ChangeDetectorRef, OnInit, AfterViewInit, NgZone } from '@a
2
2
  import { ThyNotifyService } from 'ngx-tethys/notify';
3
3
  import { Editor } from 'slate';
4
4
  import { CodeMirrorComponent } from 'ng-codemirror';
5
- import { DropdownMode } from '../../constants';
5
+ import { DropdownMode, CodeMode } from '../../constants';
6
6
  import { DefaultToolbarItem, TheBaseElementComponent } from '../../interfaces';
7
7
  import { CodeElement } from '../../custom-types';
8
8
  import * as i0 from "@angular/core";
@@ -11,6 +11,7 @@ export declare class TheCodeComponent extends TheBaseElementComponent<CodeElemen
11
11
  cdr: ChangeDetectorRef;
12
12
  private thyNotifyService;
13
13
  private ngZone;
14
+ private mode;
14
15
  startRenderCodemirror: boolean;
15
16
  dropdownMode: typeof DropdownMode;
16
17
  maxHeight: number;
@@ -32,7 +33,7 @@ export declare class TheCodeComponent extends TheBaseElementComponent<CodeElemen
32
33
  get code(): string;
33
34
  codemirror: CodeMirrorComponent;
34
35
  onContextChange(): void;
35
- constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyNotifyService: ThyNotifyService, ngZone: NgZone);
36
+ constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyNotifyService: ThyNotifyService, ngZone: NgZone, mode: CodeMode);
36
37
  ngOnInit(): void;
37
38
  ngAfterViewInit(): void;
38
39
  renderCodemirror(): void;
@@ -1,2 +1,8 @@
1
- import { Node } from 'slate';
2
- export declare const getStartListItem: (node: Node[], initialValue?: Node[]) => Node[];
1
+ import { Element } from 'slate';
2
+ /**
3
+ * 获取 List 中 ListItems,过滤掉空列表嵌套
4
+ * @param node
5
+ * @param initialValue
6
+ * @returns
7
+ */
8
+ export declare const getStartListItem: (node: Element[], initialValue?: Element[]) => import("@worktile/theia").CustomElement[];
@@ -0,0 +1,5 @@
1
+ import { Editor } from 'slate';
2
+ /**
3
+ * Is the selection in same li
4
+ */
5
+ export declare const isSelectionInSameListItem: (editor: Editor) => boolean;
@@ -0,0 +1,2 @@
1
+ import { ToolbarItem } from '../../interfaces';
2
+ export declare const PaintFormatOptions: ToolbarItem[];
@@ -0,0 +1,7 @@
1
+ import { TheEditor } from '../../interfaces';
2
+ export declare const PaintFormatEditor: {
3
+ formatBrush(editor: TheEditor): void;
4
+ isActive(editor: TheEditor): boolean;
5
+ enableFormatBrush(editor: TheEditor): void;
6
+ cancelFormatBrushStatus(editor: TheEditor): void;
7
+ };
@@ -1,20 +1,19 @@
1
1
  import { ElementRef, Renderer2 } from '@angular/core';
2
- import { Editor, Descendant } from 'slate';
2
+ import { Editor } from 'slate';
3
+ import { TheOptions } from '../../interfaces';
3
4
  import * as i0 from "@angular/core";
4
5
  export declare class ThePlaceholderComponent {
5
6
  private renderer;
6
7
  private elementRef;
7
8
  editor: Editor;
8
- autoFocus: boolean;
9
- placeholder: string;
9
+ options: TheOptions;
10
10
  isHide: boolean;
11
- get selection(): import("slate").BaseRange;
12
11
  handleCompositionStart(): void;
13
12
  handleCompositionEnd(event: any): void;
14
13
  constructor(renderer: Renderer2, elementRef: ElementRef);
15
- checkStatus(value?: Descendant[]): void;
14
+ checkStatus(): void;
16
15
  private updatePosition;
17
16
  private hide;
18
17
  static ɵfac: i0.ɵɵFactoryDeclaration<ThePlaceholderComponent, never>;
19
- static ɵcmp: i0.ɵɵComponentDeclaration<ThePlaceholderComponent, "div[thePlaceholder]", never, { "editor": "editor"; "autoFocus": "autoFocus"; "placeholder": "placeholder"; }, {}, never, never>;
18
+ static ɵcmp: i0.ɵɵComponentDeclaration<ThePlaceholderComponent, "div[thePlaceholder]", never, { "editor": "editor"; "options": "options"; }, {}, never, never>;
20
19
  }
@@ -11,3 +11,4 @@ export * from './table/table.editor';
11
11
  export * from './todo-item/todo-item.editor';
12
12
  export * from './vertical-align/vertical-align.editor';
13
13
  export * from './link/link.editor';
14
+ export * from './quick-insert/quick-insert.editor';
@@ -0,0 +1,25 @@
1
+ import { ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
2
+ import { Editor } from 'slate';
3
+ import { ToolbarItem } from '../../../interfaces/toolbar';
4
+ import * as i0 from "@angular/core";
5
+ export declare class TheQuickInsertComponent {
6
+ private renderer;
7
+ private elementRef;
8
+ private cdr;
9
+ editor: Editor;
10
+ quickToolbarItems: ToolbarItem[];
11
+ isHide: boolean;
12
+ defaultIconName: string;
13
+ iconNameFill: string;
14
+ displayIconName: string;
15
+ iconElement: ElementRef<any>;
16
+ handleMousedownNativeElement(event: any): void;
17
+ constructor(renderer: Renderer2, elementRef: ElementRef, cdr: ChangeDetectorRef);
18
+ checkStatus(): void;
19
+ private updatePosition;
20
+ mouseEnter(event: MouseEvent): void;
21
+ mouseLeave(event: MouseEvent): void;
22
+ handleClick(event: MouseEvent): void;
23
+ static ɵfac: i0.ɵɵFactoryDeclaration<TheQuickInsertComponent, never>;
24
+ static ɵcmp: i0.ɵɵComponentDeclaration<TheQuickInsertComponent, "[theQuickInsert]", never, { "editor": "editor"; "quickToolbarItems": "quickToolbarItems"; }, {}, never, never>;
25
+ }
@@ -0,0 +1,21 @@
1
+ .the-quick-insert {
2
+ position: absolute;
3
+ width: calc(100% - 30px);
4
+
5
+ &.hide {
6
+ display: none;
7
+ }
8
+
9
+ .quick-insert-icon {
10
+ position: absolute;
11
+ left: -25px;
12
+ top: 3px;
13
+ font-size: 18px !important;
14
+ color: #CACACA !important;
15
+ cursor: pointer;
16
+
17
+ &:hover {
18
+ color: $primary !important;
19
+ }
20
+ }
21
+ }
@@ -0,0 +1,29 @@
1
+ import { OnInit, OnDestroy, ElementRef } from '@angular/core';
2
+ import { MixinBase } from 'ngx-tethys/core';
3
+ import { ThyPopoverRef } from 'ngx-tethys/popover';
4
+ import { Editor } from 'slate';
5
+ import { ToolbarItem } from '../../../../interfaces/toolbar';
6
+ import { ToolbarActionTypes } from '../../../../constants/node-types';
7
+ import { ToolbarItemMode } from '../../../../constants/toolbar';
8
+ import * as i0 from "@angular/core";
9
+ declare const TheQuickToolbarComponent_base: import("ngx-tethys/core").Constructor<import("ngx-tethys/core").ThyUnsubscribe> & typeof MixinBase;
10
+ export declare class TheQuickToolbarComponent extends TheQuickToolbarComponent_base implements OnInit, OnDestroy {
11
+ private popoverRef;
12
+ elementRef: ElementRef;
13
+ editor: Editor;
14
+ quickToolbarItems: ToolbarItem[];
15
+ editorElement: HTMLElement;
16
+ ToolbarItemMode: typeof ToolbarItemMode;
17
+ ToolbarActionTypes: typeof ToolbarActionTypes;
18
+ handleMouseDown(event: MouseEvent): void;
19
+ handleEnter(): void;
20
+ constructor(popoverRef: ThyPopoverRef<TheQuickToolbarComponent>, elementRef: ElementRef);
21
+ ngOnInit(): void;
22
+ stopPropagation(event: any): void;
23
+ selectionChange(event: any): void;
24
+ removeHotKey(): void;
25
+ ngOnDestroy(): void;
26
+ static ɵfac: i0.ɵɵFactoryDeclaration<TheQuickToolbarComponent, never>;
27
+ static ɵcmp: i0.ɵɵComponentDeclaration<TheQuickToolbarComponent, "the-quick-toolbar", never, { "editor": "editor"; "quickToolbarItems": "quickToolbarItems"; }, {}, never, never>;
28
+ }
29
+ export {};
@@ -0,0 +1,21 @@
1
+ .the-quick-toolbar {
2
+ width: 200px;
3
+ height: 400px;
4
+ padding: 10px 0;
5
+ overflow-y: scroll;
6
+
7
+ .quick-toolbar-icon {
8
+ margin-right: 8px;
9
+ color: $gray-600;
10
+ }
11
+ .quick-toolbar-name {
12
+ flex: 1;
13
+ color: $gray-800;
14
+ }
15
+
16
+ &-container {
17
+ .thy-popover-container {
18
+ min-width: auto;
19
+ }
20
+ }
21
+ }
@@ -0,0 +1,8 @@
1
+ import { ElementRef } from '@angular/core';
2
+ import { Editor } from 'slate';
3
+ import { ToolbarItem } from '../../interfaces/toolbar';
4
+ export declare const QuickInsertEditor: {
5
+ openQuickToolbar(editor: Editor, toolbarItems: ToolbarItem[], origin: HTMLElement | ElementRef): void;
6
+ closeQuickToolbar(editor: Editor): void;
7
+ isOpenToolbar(editor: Editor, opTypes?: string[]): boolean;
8
+ };
@@ -0,0 +1,2 @@
1
+ import { Editor } from 'slate';
2
+ export declare const withQuickInsert: (editor: Editor) => import("@worktile/theia").TheEditor;
@@ -45,6 +45,7 @@ export declare class TheTableComponent extends TheBaseElementComponent<TableElem
45
45
  useTableWrapperWidth(): void;
46
46
  subscribeCellsChange(): void;
47
47
  useRowControls(): void;
48
+ detectChanges(): void;
48
49
  calculateMinRowSpanCellForRows(): {
49
50
  cell?: TableCellElement;
50
51
  rowIndex: number;
@@ -19,6 +19,7 @@ export declare class TheVerticalToolbarItemComponent extends TheToolbarBaseItemC
19
19
  toolbarItem: ToolbarItem;
20
20
  template: TemplateRef<any>;
21
21
  get isOpened(): boolean;
22
+ handleDocumentMouseDown(event: MouseEvent): void;
22
23
  constructor(elementRef: ElementRef, thyPopover: ThyPopover, viewContainerRef: ViewContainerRef);
23
24
  ngOnInit(): void;
24
25
  statusChange(editor: Editor): void;
package/public-api.d.ts CHANGED
@@ -8,6 +8,7 @@ export * from './plugins/image/image.component';
8
8
  export * from './services/toolbar.service';
9
9
  export * from './editor.component';
10
10
  export * from './components/toolbar/toolbar.component';
11
+ export * from './components/toolbar-base-item/toolbar-base-item.component';
11
12
  export * from './components/toolbar-dropdown/toolbar-dropdown.component';
12
13
  export * from './components/toolbar-group/toolbar-group.component';
13
14
  export * from './components/toolbar-item/toolbar-item.component';
@@ -1,7 +1,7 @@
1
1
  import { ToolbarKey, ToolbarItem, ToolbarDefinition, ToolbarEntity, ToolbarInitOption } from '../interfaces';
2
2
  import * as i0 from "@angular/core";
3
3
  export declare class TheToolbarService {
4
- initialize(toolbarItems: ToolbarItem[], global?: string[], inline?: string[], block?: string[]): ToolbarInitOption;
4
+ initialize(toolbarItems: ToolbarItem[], global?: string[], inline?: string[], quick?: string[]): ToolbarInitOption;
5
5
  nextToolbarEntity(toolbarDefinition: ToolbarDefinition, toolbarItems: Map<string, ToolbarItem>): ToolbarEntity;
6
6
  getToolbarItemByKeys(keys: ToolbarKey[], toolbarItems: Map<string, ToolbarItem>): ToolbarItem[];
7
7
  static ɵfac: i0.ɵɵFactoryDeclaration<TheToolbarService, never>;
@@ -12,12 +12,17 @@ $thy-icon-nav-link-margin-right: 5px;
12
12
 
13
13
  .the-editable-container {
14
14
  padding: 0;
15
- overflow-y: auto;
16
- overflow-x: hidden;
17
- }
18
- .slate-editable-container {
19
- min-height: initial;
20
- padding: 0;
15
+
16
+ &.max-height {
17
+ padding: 0;
18
+ overflow-y: auto;
19
+ overflow-x: hidden;
20
+ }
21
+
22
+ .the-editor-typo {
23
+ min-height: initial;
24
+ padding: 0;
25
+ }
21
26
  }
22
27
 
23
28
  .the-hr {
@@ -36,11 +41,25 @@ $thy-icon-nav-link-margin-right: 5px;
36
41
  }
37
42
  }
38
43
 
44
+ .the-editor-disabled {
45
+ .the-check-item {
46
+ input[type='checkbox'] {
47
+ cursor: auto;
48
+ }
49
+ input[type='checkbox']:not(:checked):hover {
50
+ border-color: $gray-300;
51
+ }
52
+ }
53
+ }
54
+
39
55
  .the-editable-container {
40
56
  position: relative;
41
- padding: 23px 0;
42
- margin-top: -23px;
43
- overflow-y: scroll;
57
+
58
+ &.max-height {
59
+ padding-top: 41px;
60
+ margin-top: -41px;
61
+ overflow-y: scroll;
62
+ }
44
63
  }
45
64
 
46
65
  // list style
@@ -109,12 +128,19 @@ $thy-icon-nav-link-margin-right: 5px;
109
128
  }
110
129
  }
111
130
 
112
- nav-split-line {
113
- width: 1px;
114
- height: 1rem;
115
- margin-top: 0.45rem;
116
- margin-right: 5px;
117
- background: $gray-300;
131
+ .the-nav-split-line {
132
+ &.horizontal {
133
+ margin: 5px 20px;
134
+ display: block;
135
+ border-top: 1px solid $gray-200;
136
+ }
137
+ &.vertical {
138
+ width: 1px;
139
+ height: 1rem;
140
+ margin-top: 0.45rem;
141
+ margin-right: 5px;
142
+ background: $gray-300;
143
+ }
118
144
  }
119
145
 
120
146
  @mixin controlSelected {
package/styles/index.scss CHANGED
@@ -6,7 +6,6 @@
6
6
  @import '../components/toolbar-dropdown/toolbar-dropdown.component.scss';
7
7
  @import '../components/toolbar-group/toolbar-group.component.scss';
8
8
  @import '../components/toolbar/toolbar.component.scss';
9
- @import '../components/placeholder/placeholder.component.scss';
10
9
  @import '../components/color-select/color-select.component.scss';
11
10
  @import '../plugins/code/code.component.scss';
12
11
  @import '../plugins/link/link.component.scss';
@@ -14,4 +13,8 @@
14
13
  @import '../plugins/table/components/table.component.scss';
15
14
  @import '../components/table-select/table-select.component.scss';
16
15
  @import '../components/conversion-hint/conversion-hint.component.scss';
17
- @import '../plugins/vertical-align/vertical-align.scss'
16
+ @import '../plugins/vertical-align/vertical-align.scss';
17
+ @import '../components/inline-toolbar/inline-toolbar.component.scss';
18
+ @import '../plugins/quick-insert/components/quick-insert.component.scss';
19
+ @import '../plugins/quick-insert/components/quick-toolbar/quick-toolbar.component.scss';
20
+ @import '../plugins/placeholder/placeholder.component.scss';
@@ -0,0 +1,8 @@
1
+ import { Editor } from 'slate';
2
+ /**
3
+ * whether the current node is a clean paragraph
4
+ * @param editor
5
+ * @param text
6
+ * @returns boolean
7
+ */
8
+ export declare const isCleanEmptyParagraph: (editor: Editor) => boolean;
@@ -2,3 +2,4 @@ import { ThyPopoverRef } from 'ngx-tethys/popover';
2
2
  import { Editor } from 'slate';
3
3
  export declare const THE_EDITOR_UUID: WeakMap<import("@worktile/theia").TheEditor, string>;
4
4
  export declare const THE_EDITOR_CONVERSION_HINT_REF: WeakMap<Editor, ThyPopoverRef<any>>;
5
+ export declare const THE_EDITOR_QUICK_TOOLBAR_REF: WeakMap<Editor, ThyPopoverRef<any>>;
@@ -1,88 +0,0 @@
1
- import { Component, Input, HostListener } from '@angular/core';
2
- import { Range, Editor, Node, Text, Element } from 'slate';
3
- import { AngularEditor } from 'slate-angular';
4
- import * as TheQueries from '../../queries';
5
- import { ElementKinds } from '../../constants/node-types';
6
- import * as i0 from "@angular/core";
7
- export class ThePlaceholderComponent {
8
- constructor(renderer, elementRef) {
9
- this.renderer = renderer;
10
- this.elementRef = elementRef;
11
- this.isHide = true;
12
- }
13
- get selection() {
14
- return this.editor.selection;
15
- }
16
- handleCompositionStart() {
17
- this.hide();
18
- }
19
- handleCompositionEnd(event) {
20
- if (!event.data) {
21
- this.checkStatus();
22
- }
23
- }
24
- checkStatus(value) {
25
- const { editor } = this;
26
- const children = value ? value : editor.children;
27
- // empty content and no selection processing
28
- if (this.autoFocus && !this.selection && TheQueries.isEmptyContent(children)) {
29
- this.updatePosition(30, 51);
30
- this.isHide = false;
31
- return;
32
- }
33
- if (AngularEditor.isFocused(editor) && this.selection && Range.isCollapsed(this.selection)) {
34
- const block = Node.ancestor(editor, [this.selection.anchor.path[0]]);
35
- const textIndent = 'textIndent';
36
- const align = 'align';
37
- const hasTextIndent = block[textIndent];
38
- const hasAlign = block[align];
39
- if (Node.string(block) === '' &&
40
- Element.isElement(block) &&
41
- block.type === ElementKinds.paragraph &&
42
- block.children.length === 1 &&
43
- Text.isText(block.children[0]) &&
44
- !Editor.isVoid(editor, block) &&
45
- !hasTextIndent &&
46
- !hasAlign) {
47
- const rootNode = AngularEditor.toDOMNode(this.editor, block);
48
- this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
49
- return;
50
- }
51
- }
52
- this.hide();
53
- }
54
- updatePosition(left, top) {
55
- this.isHide = false;
56
- this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${top}px`);
57
- this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${left}px`);
58
- }
59
- hide() {
60
- this.isHide = true;
61
- }
62
- }
63
- ThePlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ThePlaceholderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
64
- ThePlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: { editor: "editor", autoFocus: "autoFocus", placeholder: "placeholder" }, host: { listeners: { "document:compositionstart": "handleCompositionStart()", "document:compositionend": "handleCompositionEnd($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-placeholder" }, ngImport: i0, template: `{{ placeholder }}`, isInline: true });
65
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ThePlaceholderComponent, decorators: [{
66
- type: Component,
67
- args: [{
68
- selector: 'div[thePlaceholder]',
69
- template: `{{ placeholder }}`,
70
- host: {
71
- class: 'the-placeholder',
72
- '[class.hide]': 'isHide'
73
- }
74
- }]
75
- }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { editor: [{
76
- type: Input
77
- }], autoFocus: [{
78
- type: Input
79
- }], placeholder: [{
80
- type: Input
81
- }], handleCompositionStart: [{
82
- type: HostListener,
83
- args: ['document:compositionstart']
84
- }], handleCompositionEnd: [{
85
- type: HostListener,
86
- args: ['document:compositionend', ['$event']]
87
- }] } });
88
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGxhY2Vob2xkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvc3JjL2NvbXBvbmVudHMvcGxhY2Vob2xkZXIvcGxhY2Vob2xkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUFFLFlBQVksRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUN0RixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBYyxNQUFNLE9BQU8sQ0FBQztBQUN2RSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlDLE9BQU8sS0FBSyxVQUFVLE1BQU0sZUFBZSxDQUFDO0FBQzVDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7QUFVMUQsTUFBTSxPQUFPLHVCQUF1QjtJQXlCaEMsWUFBb0IsUUFBbUIsRUFBVSxVQUFzQjtRQUFuRCxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQVUsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQWxCdkUsV0FBTSxHQUFHLElBQUksQ0FBQztJQWtCNEQsQ0FBQztJQWhCM0UsSUFBSSxTQUFTO1FBQ1QsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQztJQUNqQyxDQUFDO0lBR0Qsc0JBQXNCO1FBQ2xCLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNoQixDQUFDO0lBR0Qsb0JBQW9CLENBQUMsS0FBSztRQUN0QixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRTtZQUNiLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUN0QjtJQUNMLENBQUM7SUFJTSxXQUFXLENBQUMsS0FBb0I7UUFDbkMsTUFBTSxFQUFFLE1BQU0sRUFBRSxHQUFHLElBQUksQ0FBQztRQUN4QixNQUFNLFFBQVEsR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQztRQUVqRCw0Q0FBNEM7UUFDNUMsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsSUFBSSxVQUFVLENBQUMsY0FBYyxDQUFDLFFBQVEsQ0FBQyxFQUFFO1lBQzFFLElBQUksQ0FBQyxjQUFjLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQzVCLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1lBQ3BCLE9BQU87U0FDVjtRQUVELElBQUksYUFBYSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLEtBQUssQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxFQUFFO1lBQ3hGLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNyRSxNQUFNLFVBQVUsR0FBRyxZQUFZLENBQUM7WUFDaEMsTUFBTSxLQUFLLEdBQUcsT0FBTyxDQUFDO1lBQ3RCLE1BQU0sYUFBYSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQUMsQ0FBQztZQUN4QyxNQUFNLFFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7WUFFOUIsSUFDSSxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUU7Z0JBQ3pCLE9BQU8sQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDO2dCQUN4QixLQUFLLENBQUMsSUFBSSxLQUFLLFlBQVksQ0FBQyxTQUFTO2dCQUNyQyxLQUFLLENBQUMsUUFBUSxDQUFDLE1BQU0sS0FBSyxDQUFDO2dCQUMzQixJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBQzlCLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDO2dCQUM3QixDQUFDLGFBQWE7Z0JBQ2QsQ0FBQyxRQUFRLEVBQ1g7Z0JBQ0UsTUFBTSxRQUFRLEdBQWdCLGFBQWEsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsQ0FBQztnQkFDMUUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxRQUFRLENBQUMsVUFBVSxFQUFFLFFBQVEsQ0FBQyxTQUFTLENBQUMsQ0FBQztnQkFDN0QsT0FBTzthQUNWO1NBQ0o7UUFDRCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDaEIsQ0FBQztJQUVPLGNBQWMsQ0FBQyxJQUFZLEVBQUUsR0FBWTtRQUM3QyxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxLQUFLLEVBQUUsR0FBRyxHQUFHLElBQUksQ0FBQyxDQUFDO1FBQ3pFLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLE1BQU0sRUFBRSxHQUFHLElBQUksSUFBSSxDQUFDLENBQUM7SUFDL0UsQ0FBQztJQUVPLElBQUk7UUFDUixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztJQUN2QixDQUFDOztvSEF2RVEsdUJBQXVCO3dHQUF2Qix1QkFBdUIscVdBTnRCLG1CQUFtQjsyRkFNcEIsdUJBQXVCO2tCQVJuQyxTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLFFBQVEsRUFBRSxtQkFBbUI7b0JBQzdCLElBQUksRUFBRTt3QkFDRixLQUFLLEVBQUUsaUJBQWlCO3dCQUN4QixjQUFjLEVBQUUsUUFBUTtxQkFDM0I7aUJBQ0o7eUhBRVksTUFBTTtzQkFBZCxLQUFLO2dCQUVHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBRUcsV0FBVztzQkFBbkIsS0FBSztnQkFTTixzQkFBc0I7c0JBRHJCLFlBQVk7dUJBQUMsMkJBQTJCO2dCQU16QyxvQkFBb0I7c0JBRG5CLFlBQVk7dUJBQUMseUJBQXlCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBIb3N0TGlzdGVuZXIsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUmFuZ2UsIEVkaXRvciwgTm9kZSwgVGV4dCwgRWxlbWVudCwgRGVzY2VuZGFudCB9IGZyb20gJ3NsYXRlJztcbmltcG9ydCB7IEFuZ3VsYXJFZGl0b3IgfSBmcm9tICdzbGF0ZS1hbmd1bGFyJztcbmltcG9ydCAqIGFzIFRoZVF1ZXJpZXMgZnJvbSAnLi4vLi4vcXVlcmllcyc7XG5pbXBvcnQgeyBFbGVtZW50S2luZHMgfSBmcm9tICcuLi8uLi9jb25zdGFudHMvbm9kZS10eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZGl2W3RoZVBsYWNlaG9sZGVyXScsXG4gICAgdGVtcGxhdGU6IGB7eyBwbGFjZWhvbGRlciB9fWAsXG4gICAgaG9zdDoge1xuICAgICAgICBjbGFzczogJ3RoZS1wbGFjZWhvbGRlcicsXG4gICAgICAgICdbY2xhc3MuaGlkZV0nOiAnaXNIaWRlJ1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgVGhlUGxhY2Vob2xkZXJDb21wb25lbnQge1xuICAgIEBJbnB1dCgpIGVkaXRvcjogRWRpdG9yO1xuXG4gICAgQElucHV0KCkgYXV0b0ZvY3VzOiBib29sZWFuO1xuXG4gICAgQElucHV0KCkgcGxhY2Vob2xkZXI6IHN0cmluZztcblxuICAgIGlzSGlkZSA9IHRydWU7XG5cbiAgICBnZXQgc2VsZWN0aW9uKCkge1xuICAgICAgICByZXR1cm4gdGhpcy5lZGl0b3Iuc2VsZWN0aW9uO1xuICAgIH1cblxuICAgIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmNvbXBvc2l0aW9uc3RhcnQnKVxuICAgIGhhbmRsZUNvbXBvc2l0aW9uU3RhcnQoKSB7XG4gICAgICAgIHRoaXMuaGlkZSgpO1xuICAgIH1cblxuICAgIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmNvbXBvc2l0aW9uZW5kJywgWyckZXZlbnQnXSlcbiAgICBoYW5kbGVDb21wb3NpdGlvbkVuZChldmVudCkge1xuICAgICAgICBpZiAoIWV2ZW50LmRhdGEpIHtcbiAgICAgICAgICAgIHRoaXMuY2hlY2tTdGF0dXMoKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMiwgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7fVxuXG4gICAgcHVibGljIGNoZWNrU3RhdHVzKHZhbHVlPzogRGVzY2VuZGFudFtdKSB7XG4gICAgICAgIGNvbnN0IHsgZWRpdG9yIH0gPSB0aGlzO1xuICAgICAgICBjb25zdCBjaGlsZHJlbiA9IHZhbHVlID8gdmFsdWUgOiBlZGl0b3IuY2hpbGRyZW47XG5cbiAgICAgICAgLy8gZW1wdHkgY29udGVudCBhbmQgbm8gc2VsZWN0aW9uIHByb2Nlc3NpbmdcbiAgICAgICAgaWYgKHRoaXMuYXV0b0ZvY3VzICYmICF0aGlzLnNlbGVjdGlvbiAmJiBUaGVRdWVyaWVzLmlzRW1wdHlDb250ZW50KGNoaWxkcmVuKSkge1xuICAgICAgICAgICAgdGhpcy51cGRhdGVQb3NpdGlvbigzMCwgNTEpO1xuICAgICAgICAgICAgdGhpcy5pc0hpZGUgPSBmYWxzZTtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmIChBbmd1bGFyRWRpdG9yLmlzRm9jdXNlZChlZGl0b3IpICYmIHRoaXMuc2VsZWN0aW9uICYmIFJhbmdlLmlzQ29sbGFwc2VkKHRoaXMuc2VsZWN0aW9uKSkge1xuICAgICAgICAgICAgY29uc3QgYmxvY2sgPSBOb2RlLmFuY2VzdG9yKGVkaXRvciwgW3RoaXMuc2VsZWN0aW9uLmFuY2hvci5wYXRoWzBdXSk7XG4gICAgICAgICAgICBjb25zdCB0ZXh0SW5kZW50ID0gJ3RleHRJbmRlbnQnO1xuICAgICAgICAgICAgY29uc3QgYWxpZ24gPSAnYWxpZ24nO1xuICAgICAgICAgICAgY29uc3QgaGFzVGV4dEluZGVudCA9IGJsb2NrW3RleHRJbmRlbnRdO1xuICAgICAgICAgICAgY29uc3QgaGFzQWxpZ24gPSBibG9ja1thbGlnbl07XG5cbiAgICAgICAgICAgIGlmIChcbiAgICAgICAgICAgICAgICBOb2RlLnN0cmluZyhibG9jaykgPT09ICcnICYmXG4gICAgICAgICAgICAgICAgRWxlbWVudC5pc0VsZW1lbnQoYmxvY2spICYmXG4gICAgICAgICAgICAgICAgYmxvY2sudHlwZSA9PT0gRWxlbWVudEtpbmRzLnBhcmFncmFwaCAmJlxuICAgICAgICAgICAgICAgIGJsb2NrLmNoaWxkcmVuLmxlbmd0aCA9PT0gMSAmJlxuICAgICAgICAgICAgICAgIFRleHQuaXNUZXh0KGJsb2NrLmNoaWxkcmVuWzBdKSAmJlxuICAgICAgICAgICAgICAgICFFZGl0b3IuaXNWb2lkKGVkaXRvciwgYmxvY2spICYmXG4gICAgICAgICAgICAgICAgIWhhc1RleHRJbmRlbnQgJiZcbiAgICAgICAgICAgICAgICAhaGFzQWxpZ25cbiAgICAgICAgICAgICkge1xuICAgICAgICAgICAgICAgIGNvbnN0IHJvb3ROb2RlOiBIVE1MRWxlbWVudCA9IEFuZ3VsYXJFZGl0b3IudG9ET01Ob2RlKHRoaXMuZWRpdG9yLCBibG9jayk7XG4gICAgICAgICAgICAgICAgdGhpcy51cGRhdGVQb3NpdGlvbihyb290Tm9kZS5vZmZzZXRMZWZ0LCByb290Tm9kZS5vZmZzZXRUb3ApO1xuICAgICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgICB0aGlzLmhpZGUoKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIHVwZGF0ZVBvc2l0aW9uKGxlZnQ6IG51bWJlciwgdG9wPzogbnVtYmVyKSB7XG4gICAgICAgIHRoaXMuaXNIaWRlID0gZmFsc2U7XG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICd0b3AnLCBgJHt0b3B9cHhgKTtcbiAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ2xlZnQnLCBgJHtsZWZ0fXB4YCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBoaWRlKCkge1xuICAgICAgICB0aGlzLmlzSGlkZSA9IHRydWU7XG4gICAgfVxufVxuIl19