@zeedhi/zd-richtext-common 1.3.1 → 1.4.0

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 (5) hide show
  1. package/dist/rich-text-common.esm.js +51 -1
  2. package/dist/rich-text-common.umd.js +51 -1
  3. package/package.json +2 -2
  4. package/types/interfaces.d.ts +12 -1
  5. package/types/rich-text.d.ts +11 -2
package/dist/rich-text-common.esm.js CHANGED
@@ -10,7 +10,13 @@ class RichText extends ComponentRender {
10
10
  /**
11
11
  * The content output format.
12
12
  */
13
- this.outputFormat = 'json';
13
+ this.outputFormat = 'html';
14
+ this.fonts = [
15
+ { font: 'Inter', title: 'Inter' },
16
+ { font: 'Roboto', title: 'Roboto' },
17
+ { font: 'serif', title: 'Serif' },
18
+ { font: 'monospace', title: 'Monospace' },
19
+ ];
14
20
  /**
15
21
  * Placeholder is displayed when there is no content in the editor.
16
22
  */
@@ -36,6 +42,7 @@ class RichText extends ComponentRender {
36
42
  */
37
43
  this.height = '';
38
44
  this.fillHeight = false;
45
+ this.formatGetter = {};
39
46
  /**
40
47
  * Rich text content
41
48
  */
@@ -49,13 +56,56 @@ class RichText extends ComponentRender {
49
56
  this.width = this.getInitValue('width', props.width, this.width);
50
57
  this.height = this.getInitValue('height', props.height, this.height);
51
58
  this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
59
+ this.formatGetter = this.getInitValue('formatGetter', props.formatGetter, this.formatGetter);
60
+ this.content = this.getInitValue('content', props.content, this.content);
61
+ this.value = this.getInitValue('value', props.value, this.value);
62
+ this.fonts = this.getInitValue('fonts', props.fonts, this.fonts);
52
63
  this.createAccessors();
53
64
  }
65
+ get value() {
66
+ if (typeof this.formatGetter[this.outputFormat] === 'function') {
67
+ return this.formatGetter[this.outputFormat]();
68
+ }
69
+ return this.content;
70
+ }
71
+ set value(value) {
72
+ this.content = value;
73
+ }
54
74
  onKeyDown(element, key) {
55
75
  this.callEvent('onKeyDown', {
56
76
  element, component: this, key, content: this.content,
57
77
  });
58
78
  }
79
+ input(text, event, element) {
80
+ this.callEvent('input', {
81
+ text,
82
+ event,
83
+ element,
84
+ component: this,
85
+ });
86
+ }
87
+ onChange(text, event, element) {
88
+ this.callEvent('onChange', {
89
+ text,
90
+ event,
91
+ element,
92
+ component: this,
93
+ });
94
+ }
95
+ onBlur(event, element) {
96
+ this.callEvent('onBlur', {
97
+ event,
98
+ element,
99
+ component: this,
100
+ });
101
+ }
102
+ onFocus(event, element) {
103
+ this.callEvent('onFocus', {
104
+ event,
105
+ element,
106
+ component: this,
107
+ });
108
+ }
59
109
  }
60
110
 
61
111
  const packageContent = require('../package.json');
package/dist/rich-text-common.umd.js CHANGED
@@ -13,7 +13,13 @@
13
13
  /**
14
14
  * The content output format.
15
15
  */
16
- this.outputFormat = 'json';
16
+ this.outputFormat = 'html';
17
+ this.fonts = [
18
+ { font: 'Inter', title: 'Inter' },
19
+ { font: 'Roboto', title: 'Roboto' },
20
+ { font: 'serif', title: 'Serif' },
21
+ { font: 'monospace', title: 'Monospace' },
22
+ ];
17
23
  /**
18
24
  * Placeholder is displayed when there is no content in the editor.
19
25
  */
@@ -39,6 +45,7 @@
39
45
  */
40
46
  this.height = '';
41
47
  this.fillHeight = false;
48
+ this.formatGetter = {};
42
49
  /**
43
50
  * Rich text content
44
51
  */
@@ -52,13 +59,56 @@
52
59
  this.width = this.getInitValue('width', props.width, this.width);
53
60
  this.height = this.getInitValue('height', props.height, this.height);
54
61
  this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
62
+ this.formatGetter = this.getInitValue('formatGetter', props.formatGetter, this.formatGetter);
63
+ this.content = this.getInitValue('content', props.content, this.content);
64
+ this.value = this.getInitValue('value', props.value, this.value);
65
+ this.fonts = this.getInitValue('fonts', props.fonts, this.fonts);
55
66
  this.createAccessors();
56
67
  }
68
+ get value() {
69
+ if (typeof this.formatGetter[this.outputFormat] === 'function') {
70
+ return this.formatGetter[this.outputFormat]();
71
+ }
72
+ return this.content;
73
+ }
74
+ set value(value) {
75
+ this.content = value;
76
+ }
57
77
  onKeyDown(element, key) {
58
78
  this.callEvent('onKeyDown', {
59
79
  element, component: this, key, content: this.content,
60
80
  });
61
81
  }
82
+ input(text, event, element) {
83
+ this.callEvent('input', {
84
+ text,
85
+ event,
86
+ element,
87
+ component: this,
88
+ });
89
+ }
90
+ onChange(text, event, element) {
91
+ this.callEvent('onChange', {
92
+ text,
93
+ event,
94
+ element,
95
+ component: this,
96
+ });
97
+ }
98
+ onBlur(event, element) {
99
+ this.callEvent('onBlur', {
100
+ event,
101
+ element,
102
+ component: this,
103
+ });
104
+ }
105
+ onFocus(event, element) {
106
+ this.callEvent('onFocus', {
107
+ event,
108
+ element,
109
+ component: this,
110
+ });
111
+ }
62
112
  }
63
113
 
64
114
  const packageContent = require('../package.json');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-richtext-common",
3
- "version": "1.3.1",
3
+ "version": "1.4.0",
4
4
  "description": "RichTextCommon by BVR",
5
5
  "main": "dist/rich-text-common.umd.js",
6
6
  "module": "dist/rich-text-common.esm.js",
@@ -23,5 +23,5 @@
23
23
  "@zeedhi/common": "*",
24
24
  "@zeedhi/core": "*"
25
25
  },
26
- "gitHead": "7f117f141fe0b7f61cc45217c9827d791a408705"
26
+ "gitHead": "dd32b1059b0544a88a2c91098d03b16d3608ecab"
27
27
  }
package/types/interfaces.d.ts CHANGED
@@ -1,16 +1,27 @@
1
- import { IEventParam, IEvent } from '@zeedhi/core';
2
1
  import { IComponentEvents, IComponentRender } from '@zeedhi/common';
2
+ import { IDictionary, IEvent, IEventParam } from '@zeedhi/core';
3
3
  export interface IRichText extends IComponentRender {
4
4
  outputFormat?: string;
5
5
  placeholder?: string;
6
6
  disabled?: boolean;
7
7
  toolbarColor?: string;
8
+ formatGetter?: IDictionary<() => any>;
9
+ value?: any;
8
10
  cardColor?: string;
9
11
  outlined?: boolean;
10
12
  width?: number | string;
11
13
  height?: number | string;
12
14
  fillHeight?: boolean;
15
+ fonts?: IFonts[];
16
+ }
17
+ export interface IFonts {
18
+ font: string;
19
+ title: string;
13
20
  }
14
21
  export interface IRickTextEvents<T = IEventParam<any>> extends IComponentEvents<T> {
15
22
  onKeyDown?: IEvent<T> | string;
23
+ onChange?: IEvent<T> | string;
24
+ onBlur?: IEvent<T> | string;
25
+ onFocus?: IEvent<T> | string;
26
+ input?: IEvent<T> | string;
16
27
  }
package/types/rich-text.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ComponentRender } from '@zeedhi/common';
2
- import { IRichText, IRickTextEvents } from './interfaces';
2
+ import { IDictionary } from '@zeedhi/core';
3
+ import { IFonts, IRichText, IRickTextEvents } from './interfaces';
3
4
  /**
4
5
  * Base class for Rich Text component.
5
6
  */
@@ -8,6 +9,7 @@ export declare class RichText extends ComponentRender implements IRichText {
8
9
  * The content output format.
9
10
  */
10
11
  outputFormat: string;
12
+ fonts: IFonts[];
11
13
  /**
12
14
  * Placeholder is displayed when there is no content in the editor.
13
15
  */
@@ -40,11 +42,18 @@ export declare class RichText extends ComponentRender implements IRichText {
40
42
  * Events registered to the Rich Text
41
43
  */
42
44
  events: IRickTextEvents;
45
+ get value(): any;
46
+ set value(value: any);
43
47
  fillHeight: boolean;
44
- constructor(props: IRichText);
48
+ formatGetter: IDictionary<() => any>;
45
49
  /**
46
50
  * Rich text content
47
51
  */
48
52
  content: string;
53
+ constructor(props: IRichText);
49
54
  onKeyDown(element?: HTMLElement, key?: string): void;
55
+ input(text: string, event?: Event, element?: HTMLElement): void;
56
+ onChange(text: string, event?: Event, element?: HTMLElement): void;
57
+ onBlur(event?: Event, element?: HTMLElement): void;
58
+ onFocus(event?: Event, element?: HTMLElement): void;
50
59
  }