roosterjs-content-model-plugins 9.16.1 → 9.17.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.
- package/lib/watermark/WatermarkPlugin.d.ts +3 -0
- package/lib/watermark/WatermarkPlugin.js +27 -9
- package/lib/watermark/WatermarkPlugin.js.map +1 -1
- package/lib-amd/watermark/WatermarkPlugin.d.ts +3 -0
- package/lib-amd/watermark/WatermarkPlugin.js +27 -9
- package/lib-amd/watermark/WatermarkPlugin.js.map +1 -1
- package/lib-mjs/watermark/WatermarkPlugin.d.ts +3 -0
- package/lib-mjs/watermark/WatermarkPlugin.js +27 -9
- package/lib-mjs/watermark/WatermarkPlugin.js.map +1 -1
- package/package.json +5 -5
|
@@ -9,6 +9,7 @@ export declare class WatermarkPlugin implements EditorPlugin {
|
|
|
9
9
|
private format;
|
|
10
10
|
private isShowing;
|
|
11
11
|
private darkTextColor;
|
|
12
|
+
private disposer;
|
|
12
13
|
/**
|
|
13
14
|
* Create an instance of Watermark plugin
|
|
14
15
|
* @param watermark The watermark string
|
|
@@ -32,6 +33,8 @@ export declare class WatermarkPlugin implements EditorPlugin {
|
|
|
32
33
|
* @param event PluginEvent object
|
|
33
34
|
*/
|
|
34
35
|
onPluginEvent(event: PluginEvent): void;
|
|
36
|
+
private onCompositionStart;
|
|
37
|
+
private update;
|
|
35
38
|
private showHide;
|
|
36
39
|
protected show(editor: IEditor): void;
|
|
37
40
|
private applyWatermarkStyle;
|
|
@@ -19,10 +19,17 @@ var WatermarkPlugin = /** @class */ (function () {
|
|
|
19
19
|
* @param watermark The watermark string
|
|
20
20
|
*/
|
|
21
21
|
function WatermarkPlugin(watermark, format) {
|
|
22
|
+
var _this = this;
|
|
22
23
|
this.watermark = watermark;
|
|
23
24
|
this.editor = null;
|
|
24
25
|
this.isShowing = false;
|
|
25
26
|
this.darkTextColor = null;
|
|
27
|
+
this.disposer = null;
|
|
28
|
+
this.onCompositionStart = function () {
|
|
29
|
+
if (_this.editor) {
|
|
30
|
+
_this.showHide(_this.editor, false /*isEmpty*/);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
26
33
|
this.format = format || {
|
|
27
34
|
fontSize: '14px',
|
|
28
35
|
textColor: '#AAAAAA',
|
|
@@ -40,11 +47,19 @@ var WatermarkPlugin = /** @class */ (function () {
|
|
|
40
47
|
*/
|
|
41
48
|
WatermarkPlugin.prototype.initialize = function (editor) {
|
|
42
49
|
this.editor = editor;
|
|
50
|
+
this.disposer = this.editor.attachDomEvent({
|
|
51
|
+
compositionstart: {
|
|
52
|
+
beforeDispatch: this.onCompositionStart,
|
|
53
|
+
},
|
|
54
|
+
});
|
|
43
55
|
};
|
|
44
56
|
/**
|
|
45
57
|
* Dispose this plugin
|
|
46
58
|
*/
|
|
47
59
|
WatermarkPlugin.prototype.dispose = function () {
|
|
60
|
+
var _a;
|
|
61
|
+
(_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
62
|
+
this.disposer = null;
|
|
48
63
|
this.editor = null;
|
|
49
64
|
};
|
|
50
65
|
/**
|
|
@@ -52,13 +67,11 @@ var WatermarkPlugin = /** @class */ (function () {
|
|
|
52
67
|
* @param event PluginEvent object
|
|
53
68
|
*/
|
|
54
69
|
WatermarkPlugin.prototype.onPluginEvent = function (event) {
|
|
55
|
-
var _this = this;
|
|
56
70
|
var editor = this.editor;
|
|
57
71
|
if (!editor) {
|
|
58
72
|
return;
|
|
59
73
|
}
|
|
60
|
-
if (
|
|
61
|
-
event.eventType == 'compositionEnd') {
|
|
74
|
+
if (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') {
|
|
62
75
|
// When input text, editor must not be empty, so we can do hide watermark now without checking content model
|
|
63
76
|
this.showHide(editor, false /*isEmpty*/);
|
|
64
77
|
}
|
|
@@ -80,14 +93,19 @@ var WatermarkPlugin = /** @class */ (function () {
|
|
|
80
93
|
else if (event.eventType == 'editorReady' ||
|
|
81
94
|
event.eventType == 'contentChanged' ||
|
|
82
95
|
event.eventType == 'input' ||
|
|
83
|
-
event.eventType == 'beforeDispose'
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
_this.showHide(editor, isEmpty);
|
|
87
|
-
return false;
|
|
88
|
-
});
|
|
96
|
+
event.eventType == 'beforeDispose' ||
|
|
97
|
+
event.eventType == 'compositionEnd') {
|
|
98
|
+
this.update(editor);
|
|
89
99
|
}
|
|
90
100
|
};
|
|
101
|
+
WatermarkPlugin.prototype.update = function (editor) {
|
|
102
|
+
var _this = this;
|
|
103
|
+
editor.formatContentModel(function (model) {
|
|
104
|
+
var isEmpty = (0, isModelEmptyFast_1.isModelEmptyFast)(model);
|
|
105
|
+
_this.showHide(editor, isEmpty);
|
|
106
|
+
return false;
|
|
107
|
+
});
|
|
108
|
+
};
|
|
91
109
|
WatermarkPlugin.prototype.showHide = function (editor, isEmpty) {
|
|
92
110
|
if (this.isShowing && !isEmpty) {
|
|
93
111
|
this.hide(editor);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WatermarkPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts"],"names":[],"mappings":";;;;AAAA,2EAA0E;AAC1E,uDAAsD;AAItD,IAAM,qBAAqB,GAAG,mBAAmB,CAAC;AAClD,IAAM,QAAQ,GAA0C;IACpD,UAAU,EAAE,aAAa;IACzB,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,OAAO;CACrB,CAAC;AAEF;;GAEG;AACH;
|
|
1
|
+
{"version":3,"file":"WatermarkPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts"],"names":[],"mappings":";;;;AAAA,2EAA0E;AAC1E,uDAAsD;AAItD,IAAM,qBAAqB,GAAG,mBAAmB,CAAC;AAClD,IAAM,QAAQ,GAA0C;IACpD,UAAU,EAAE,aAAa;IACzB,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,OAAO;CACrB,CAAC;AAEF;;GAEG;AACH;IAOI;;;OAGG;IACH,yBAAsB,SAAiB,EAAE,MAAwB;QAAjE,iBAKC;QALqB,cAAS,GAAT,SAAS,CAAQ;QAV/B,WAAM,GAAmB,IAAI,CAAC;QAE9B,cAAS,GAAG,KAAK,CAAC;QAClB,kBAAa,GAAkB,IAAI,CAAC;QACpC,aAAQ,GAAwB,IAAI,CAAC;QAuFrC,uBAAkB,GAAG;YACzB,IAAI,KAAI,CAAC,MAAM,EAAE;gBACb,KAAI,CAAC,QAAQ,CAAC,KAAI,CAAC,MAAM,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;aACjD;QACL,CAAC,CAAC;QApFE,IAAI,CAAC,MAAM,GAAG,MAAM,IAAI;YACpB,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,SAAS;SACvB,CAAC;IACN,CAAC;IAED;;OAEG;IACH,iCAAO,GAAP;QACI,OAAO,WAAW,CAAC;IACvB,CAAC;IAED;;;OAGG;IACH,oCAAU,GAAV,UAAW,MAAe;QACtB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;YACvC,gBAAgB,EAAE;gBACd,cAAc,EAAE,IAAI,CAAC,kBAAkB;aAC1C;SACJ,CAAC,CAAC;IACP,CAAC;IAED;;OAEG;IACH,iCAAO,GAAP;;QACI,MAAA,IAAI,CAAC,QAAQ,+CAAb,IAAI,CAAa,CAAC;QAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAErB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC;IAED;;;OAGG;IACH,uCAAa,GAAb,UAAc,KAAkB;QAC5B,IAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAE3B,IAAI,CAAC,MAAM,EAAE;YACT,OAAO;SACV;QAED,IAAI,KAAK,CAAC,SAAS,IAAI,OAAO,IAAI,KAAK,CAAC,QAAQ,CAAC,SAAS,IAAI,YAAY,EAAE;YACxE,4GAA4G;YAC5G,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;SAC5C;aAAM,IACH,KAAK,CAAC,SAAS,IAAI,gBAAgB;YACnC,CAAC,KAAK,CAAC,MAAM,IAAI,0CAAY,CAAC,gBAAgB;gBAC1C,KAAK,CAAC,MAAM,IAAI,0CAAY,CAAC,iBAAiB,CAAC;YACnD,IAAI,CAAC,SAAS,EAChB;YACE,8FAA8F;YAC9F,IACI,KAAK,CAAC,MAAM,IAAI,0CAAY,CAAC,gBAAgB;gBAC7C,CAAC,IAAI,CAAC,aAAa;gBACnB,IAAI,CAAC,MAAM,CAAC,SAAS,EACvB;gBACE,4EAA4E;gBAC5E,IAAI,CAAC,aAAa,GAAG,MAAM;qBACtB,eAAe,EAAE;qBACjB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;aAC/D;YAED,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;SACpC;aAAM,IACH,KAAK,CAAC,SAAS,IAAI,aAAa;YAChC,KAAK,CAAC,SAAS,IAAI,gBAAgB;YACnC,KAAK,CAAC,SAAS,IAAI,OAAO;YAC1B,KAAK,CAAC,SAAS,IAAI,eAAe;YAClC,KAAK,CAAC,SAAS,IAAI,gBAAgB,EACrC;YACE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SACvB;IACL,CAAC;IAQO,gCAAM,GAAd,UAAe,MAAe;QAA9B,iBAQC;QAPG,MAAM,CAAC,kBAAkB,CAAC,UAAA,KAAK;YAC3B,IAAM,OAAO,GAAG,IAAA,mCAAgB,EAAC,KAAK,CAAC,CAAC;YAExC,KAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAE/B,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,kCAAQ,GAAhB,UAAiB,MAAe,EAAE,OAAgB;QAC9C,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE;YAC5B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACrB;aAAM,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,OAAO,EAAE;YACnC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACrB;IACL,CAAC;IAES,8BAAI,GAAd,UAAe,MAAe;QAC1B,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,6CAAmB,GAA3B,UAA4B,MAAe;QACvC,IAAI,IAAI,GAAG,0DAAuD,IAAI,CAAC,SAAS,QAAI,CAAC;QACrF,IAAM,MAAM,mDACL,IAAI,CAAC,MAAM,KACd,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,GAC9E,CAAC;QAEF,IAAA,2CAAa,EAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,UAAA,CAAC;YAC7B,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE;gBACX,IAAI,IAAO,QAAQ,CAAC,CAAC,CAAC,UAAK,MAAM,CAAC,CAAC,CAAC,gBAAa,CAAC;aACrD;QACL,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,cAAc,CAAC,qBAAqB,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IACjE,CAAC;IAES,8BAAI,GAAd,UAAe,MAAe;QAC1B,MAAM,CAAC,cAAc,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;QACnD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IAC3B,CAAC;IACL,sBAAC;AAAD,CAAC,AA7ID,IA6IC;AA7IY,0CAAe","sourcesContent":["import { ChangeSource, getObjectKeys } from 'roosterjs-content-model-dom';\nimport { isModelEmptyFast } from './isModelEmptyFast';\nimport type { WatermarkFormat } from './WatermarkFormat';\nimport type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\n\nconst WATERMARK_CONTENT_KEY = '_WatermarkContent';\nconst styleMap: Record<keyof WatermarkFormat, string> = {\n fontFamily: 'font-family',\n fontSize: 'font-size',\n textColor: 'color',\n};\n\n/**\n * A watermark plugin to manage watermark string for roosterjs\n */\nexport class WatermarkPlugin implements EditorPlugin {\n private editor: IEditor | null = null;\n private format: WatermarkFormat;\n private isShowing = false;\n private darkTextColor: string | null = null;\n private disposer: (() => void) | null = null;\n\n /**\n * Create an instance of Watermark plugin\n * @param watermark The watermark string\n */\n constructor(protected watermark: string, format?: WatermarkFormat) {\n this.format = format || {\n fontSize: '14px',\n textColor: '#AAAAAA',\n };\n }\n\n /**\n * Get a friendly name of this plugin\n */\n getName() {\n return 'Watermark';\n }\n\n /**\n * Initialize this plugin. This should only be called from Editor\n * @param editor Editor instance\n */\n initialize(editor: IEditor) {\n this.editor = editor;\n this.disposer = this.editor.attachDomEvent({\n compositionstart: {\n beforeDispatch: this.onCompositionStart,\n },\n });\n }\n\n /**\n * Dispose this plugin\n */\n dispose() {\n this.disposer?.();\n this.disposer = null;\n\n this.editor = null;\n }\n\n /**\n * Handle events triggered from editor\n * @param event PluginEvent object\n */\n onPluginEvent(event: PluginEvent) {\n const editor = this.editor;\n\n if (!editor) {\n return;\n }\n\n if (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') {\n // When input text, editor must not be empty, so we can do hide watermark now without checking content model\n this.showHide(editor, false /*isEmpty*/);\n } else if (\n event.eventType == 'contentChanged' &&\n (event.source == ChangeSource.SwitchToDarkMode ||\n event.source == ChangeSource.SwitchToLightMode) &&\n this.isShowing\n ) {\n // When the placeholder is shown and user switches the mode, we need to update watermark style\n if (\n event.source == ChangeSource.SwitchToDarkMode &&\n !this.darkTextColor &&\n this.format.textColor\n ) {\n // Get the dark color only once when dark mode is enabled for the first time\n this.darkTextColor = editor\n .getColorManager()\n .getDarkColor(this.format.textColor, undefined, 'text');\n }\n\n this.applyWatermarkStyle(editor);\n } else if (\n event.eventType == 'editorReady' ||\n event.eventType == 'contentChanged' ||\n event.eventType == 'input' ||\n event.eventType == 'beforeDispose' ||\n event.eventType == 'compositionEnd'\n ) {\n this.update(editor);\n }\n }\n\n private onCompositionStart = () => {\n if (this.editor) {\n this.showHide(this.editor, false /*isEmpty*/);\n }\n };\n\n private update(editor: IEditor) {\n editor.formatContentModel(model => {\n const isEmpty = isModelEmptyFast(model);\n\n this.showHide(editor, isEmpty);\n\n return false;\n });\n }\n\n private showHide(editor: IEditor, isEmpty: boolean) {\n if (this.isShowing && !isEmpty) {\n this.hide(editor);\n } else if (!this.isShowing && isEmpty) {\n this.show(editor);\n }\n }\n\n protected show(editor: IEditor) {\n this.applyWatermarkStyle(editor);\n this.isShowing = true;\n }\n\n private applyWatermarkStyle(editor: IEditor) {\n let rule = `position: absolute; pointer-events: none; content: \"${this.watermark}\";`;\n const format = {\n ...this.format,\n textColor: editor.isDarkMode() ? this.darkTextColor : this.format.textColor,\n };\n\n getObjectKeys(styleMap).forEach(x => {\n if (format[x]) {\n rule += `${styleMap[x]}: ${format[x]}!important;`;\n }\n });\n\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');\n }\n\n protected hide(editor: IEditor) {\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);\n this.isShowing = false;\n }\n}\n"]}
|
|
@@ -9,6 +9,7 @@ export declare class WatermarkPlugin implements EditorPlugin {
|
|
|
9
9
|
private format;
|
|
10
10
|
private isShowing;
|
|
11
11
|
private darkTextColor;
|
|
12
|
+
private disposer;
|
|
12
13
|
/**
|
|
13
14
|
* Create an instance of Watermark plugin
|
|
14
15
|
* @param watermark The watermark string
|
|
@@ -32,6 +33,8 @@ export declare class WatermarkPlugin implements EditorPlugin {
|
|
|
32
33
|
* @param event PluginEvent object
|
|
33
34
|
*/
|
|
34
35
|
onPluginEvent(event: PluginEvent): void;
|
|
36
|
+
private onCompositionStart;
|
|
37
|
+
private update;
|
|
35
38
|
private showHide;
|
|
36
39
|
protected show(editor: IEditor): void;
|
|
37
40
|
private applyWatermarkStyle;
|
|
@@ -17,10 +17,17 @@ define(["require", "exports", "tslib", "roosterjs-content-model-dom", "./isModel
|
|
|
17
17
|
* @param watermark The watermark string
|
|
18
18
|
*/
|
|
19
19
|
function WatermarkPlugin(watermark, format) {
|
|
20
|
+
var _this = this;
|
|
20
21
|
this.watermark = watermark;
|
|
21
22
|
this.editor = null;
|
|
22
23
|
this.isShowing = false;
|
|
23
24
|
this.darkTextColor = null;
|
|
25
|
+
this.disposer = null;
|
|
26
|
+
this.onCompositionStart = function () {
|
|
27
|
+
if (_this.editor) {
|
|
28
|
+
_this.showHide(_this.editor, false /*isEmpty*/);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
24
31
|
this.format = format || {
|
|
25
32
|
fontSize: '14px',
|
|
26
33
|
textColor: '#AAAAAA',
|
|
@@ -38,11 +45,19 @@ define(["require", "exports", "tslib", "roosterjs-content-model-dom", "./isModel
|
|
|
38
45
|
*/
|
|
39
46
|
WatermarkPlugin.prototype.initialize = function (editor) {
|
|
40
47
|
this.editor = editor;
|
|
48
|
+
this.disposer = this.editor.attachDomEvent({
|
|
49
|
+
compositionstart: {
|
|
50
|
+
beforeDispatch: this.onCompositionStart,
|
|
51
|
+
},
|
|
52
|
+
});
|
|
41
53
|
};
|
|
42
54
|
/**
|
|
43
55
|
* Dispose this plugin
|
|
44
56
|
*/
|
|
45
57
|
WatermarkPlugin.prototype.dispose = function () {
|
|
58
|
+
var _a;
|
|
59
|
+
(_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
60
|
+
this.disposer = null;
|
|
46
61
|
this.editor = null;
|
|
47
62
|
};
|
|
48
63
|
/**
|
|
@@ -50,13 +65,11 @@ define(["require", "exports", "tslib", "roosterjs-content-model-dom", "./isModel
|
|
|
50
65
|
* @param event PluginEvent object
|
|
51
66
|
*/
|
|
52
67
|
WatermarkPlugin.prototype.onPluginEvent = function (event) {
|
|
53
|
-
var _this = this;
|
|
54
68
|
var editor = this.editor;
|
|
55
69
|
if (!editor) {
|
|
56
70
|
return;
|
|
57
71
|
}
|
|
58
|
-
if (
|
|
59
|
-
event.eventType == 'compositionEnd') {
|
|
72
|
+
if (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') {
|
|
60
73
|
// When input text, editor must not be empty, so we can do hide watermark now without checking content model
|
|
61
74
|
this.showHide(editor, false /*isEmpty*/);
|
|
62
75
|
}
|
|
@@ -78,14 +91,19 @@ define(["require", "exports", "tslib", "roosterjs-content-model-dom", "./isModel
|
|
|
78
91
|
else if (event.eventType == 'editorReady' ||
|
|
79
92
|
event.eventType == 'contentChanged' ||
|
|
80
93
|
event.eventType == 'input' ||
|
|
81
|
-
event.eventType == 'beforeDispose'
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
_this.showHide(editor, isEmpty);
|
|
85
|
-
return false;
|
|
86
|
-
});
|
|
94
|
+
event.eventType == 'beforeDispose' ||
|
|
95
|
+
event.eventType == 'compositionEnd') {
|
|
96
|
+
this.update(editor);
|
|
87
97
|
}
|
|
88
98
|
};
|
|
99
|
+
WatermarkPlugin.prototype.update = function (editor) {
|
|
100
|
+
var _this = this;
|
|
101
|
+
editor.formatContentModel(function (model) {
|
|
102
|
+
var isEmpty = (0, isModelEmptyFast_1.isModelEmptyFast)(model);
|
|
103
|
+
_this.showHide(editor, isEmpty);
|
|
104
|
+
return false;
|
|
105
|
+
});
|
|
106
|
+
};
|
|
89
107
|
WatermarkPlugin.prototype.showHide = function (editor, isEmpty) {
|
|
90
108
|
if (this.isShowing && !isEmpty) {
|
|
91
109
|
this.hide(editor);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WatermarkPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts"],"names":[],"mappings":";;;;IAKA,IAAM,qBAAqB,GAAG,mBAAmB,CAAC;IAClD,IAAM,QAAQ,GAA0C;QACpD,UAAU,EAAE,aAAa;QACzB,QAAQ,EAAE,WAAW;QACrB,SAAS,EAAE,OAAO;KACrB,CAAC;IAEF;;OAEG;IACH;
|
|
1
|
+
{"version":3,"file":"WatermarkPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { ChangeSource, getObjectKeys } from 'roosterjs-content-model-dom';\nimport { isModelEmptyFast } from './isModelEmptyFast';\nimport type { WatermarkFormat } from './WatermarkFormat';\nimport type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\n\nconst WATERMARK_CONTENT_KEY = '_WatermarkContent';\nconst styleMap: Record<keyof WatermarkFormat, string> = {\n fontFamily: 'font-family',\n fontSize: 'font-size',\n textColor: 'color',\n};\n\n/**\n * A watermark plugin to manage watermark string for roosterjs\n */\nexport class WatermarkPlugin implements EditorPlugin {\n private editor: IEditor | null = null;\n private format: WatermarkFormat;\n private isShowing = false;\n private darkTextColor: string | null = null;\n private disposer: (() => void) | null = null;\n\n /**\n * Create an instance of Watermark plugin\n * @param watermark The watermark string\n */\n constructor(protected watermark: string, format?: WatermarkFormat) {\n this.format = format || {\n fontSize: '14px',\n textColor: '#AAAAAA',\n };\n }\n\n /**\n * Get a friendly name of this plugin\n */\n getName() {\n return 'Watermark';\n }\n\n /**\n * Initialize this plugin. This should only be called from Editor\n * @param editor Editor instance\n */\n initialize(editor: IEditor) {\n this.editor = editor;\n this.disposer = this.editor.attachDomEvent({\n compositionstart: {\n beforeDispatch: this.onCompositionStart,\n },\n });\n }\n\n /**\n * Dispose this plugin\n */\n dispose() {\n this.disposer?.();\n this.disposer = null;\n\n this.editor = null;\n }\n\n /**\n * Handle events triggered from editor\n * @param event PluginEvent object\n */\n onPluginEvent(event: PluginEvent) {\n const editor = this.editor;\n\n if (!editor) {\n return;\n }\n\n if (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') {\n // When input text, editor must not be empty, so we can do hide watermark now without checking content model\n this.showHide(editor, false /*isEmpty*/);\n } else if (\n event.eventType == 'contentChanged' &&\n (event.source == ChangeSource.SwitchToDarkMode ||\n event.source == ChangeSource.SwitchToLightMode) &&\n this.isShowing\n ) {\n // When the placeholder is shown and user switches the mode, we need to update watermark style\n if (\n event.source == ChangeSource.SwitchToDarkMode &&\n !this.darkTextColor &&\n this.format.textColor\n ) {\n // Get the dark color only once when dark mode is enabled for the first time\n this.darkTextColor = editor\n .getColorManager()\n .getDarkColor(this.format.textColor, undefined, 'text');\n }\n\n this.applyWatermarkStyle(editor);\n } else if (\n event.eventType == 'editorReady' ||\n event.eventType == 'contentChanged' ||\n event.eventType == 'input' ||\n event.eventType == 'beforeDispose' ||\n event.eventType == 'compositionEnd'\n ) {\n this.update(editor);\n }\n }\n\n private onCompositionStart = () => {\n if (this.editor) {\n this.showHide(this.editor, false /*isEmpty*/);\n }\n };\n\n private update(editor: IEditor) {\n editor.formatContentModel(model => {\n const isEmpty = isModelEmptyFast(model);\n\n this.showHide(editor, isEmpty);\n\n return false;\n });\n }\n\n private showHide(editor: IEditor, isEmpty: boolean) {\n if (this.isShowing && !isEmpty) {\n this.hide(editor);\n } else if (!this.isShowing && isEmpty) {\n this.show(editor);\n }\n }\n\n protected show(editor: IEditor) {\n this.applyWatermarkStyle(editor);\n this.isShowing = true;\n }\n\n private applyWatermarkStyle(editor: IEditor) {\n let rule = `position: absolute; pointer-events: none; content: \"${this.watermark}\";`;\n const format = {\n ...this.format,\n textColor: editor.isDarkMode() ? this.darkTextColor : this.format.textColor,\n };\n\n getObjectKeys(styleMap).forEach(x => {\n if (format[x]) {\n rule += `${styleMap[x]}: ${format[x]}!important;`;\n }\n });\n\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');\n }\n\n protected hide(editor: IEditor) {\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);\n this.isShowing = false;\n }\n}\n"]}
|
|
@@ -9,6 +9,7 @@ export declare class WatermarkPlugin implements EditorPlugin {
|
|
|
9
9
|
private format;
|
|
10
10
|
private isShowing;
|
|
11
11
|
private darkTextColor;
|
|
12
|
+
private disposer;
|
|
12
13
|
/**
|
|
13
14
|
* Create an instance of Watermark plugin
|
|
14
15
|
* @param watermark The watermark string
|
|
@@ -32,6 +33,8 @@ export declare class WatermarkPlugin implements EditorPlugin {
|
|
|
32
33
|
* @param event PluginEvent object
|
|
33
34
|
*/
|
|
34
35
|
onPluginEvent(event: PluginEvent): void;
|
|
36
|
+
private onCompositionStart;
|
|
37
|
+
private update;
|
|
35
38
|
private showHide;
|
|
36
39
|
protected show(editor: IEditor): void;
|
|
37
40
|
private applyWatermarkStyle;
|
|
@@ -16,10 +16,17 @@ var WatermarkPlugin = /** @class */ (function () {
|
|
|
16
16
|
* @param watermark The watermark string
|
|
17
17
|
*/
|
|
18
18
|
function WatermarkPlugin(watermark, format) {
|
|
19
|
+
var _this = this;
|
|
19
20
|
this.watermark = watermark;
|
|
20
21
|
this.editor = null;
|
|
21
22
|
this.isShowing = false;
|
|
22
23
|
this.darkTextColor = null;
|
|
24
|
+
this.disposer = null;
|
|
25
|
+
this.onCompositionStart = function () {
|
|
26
|
+
if (_this.editor) {
|
|
27
|
+
_this.showHide(_this.editor, false /*isEmpty*/);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
23
30
|
this.format = format || {
|
|
24
31
|
fontSize: '14px',
|
|
25
32
|
textColor: '#AAAAAA',
|
|
@@ -37,11 +44,19 @@ var WatermarkPlugin = /** @class */ (function () {
|
|
|
37
44
|
*/
|
|
38
45
|
WatermarkPlugin.prototype.initialize = function (editor) {
|
|
39
46
|
this.editor = editor;
|
|
47
|
+
this.disposer = this.editor.attachDomEvent({
|
|
48
|
+
compositionstart: {
|
|
49
|
+
beforeDispatch: this.onCompositionStart,
|
|
50
|
+
},
|
|
51
|
+
});
|
|
40
52
|
};
|
|
41
53
|
/**
|
|
42
54
|
* Dispose this plugin
|
|
43
55
|
*/
|
|
44
56
|
WatermarkPlugin.prototype.dispose = function () {
|
|
57
|
+
var _a;
|
|
58
|
+
(_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
59
|
+
this.disposer = null;
|
|
45
60
|
this.editor = null;
|
|
46
61
|
};
|
|
47
62
|
/**
|
|
@@ -49,13 +64,11 @@ var WatermarkPlugin = /** @class */ (function () {
|
|
|
49
64
|
* @param event PluginEvent object
|
|
50
65
|
*/
|
|
51
66
|
WatermarkPlugin.prototype.onPluginEvent = function (event) {
|
|
52
|
-
var _this = this;
|
|
53
67
|
var editor = this.editor;
|
|
54
68
|
if (!editor) {
|
|
55
69
|
return;
|
|
56
70
|
}
|
|
57
|
-
if (
|
|
58
|
-
event.eventType == 'compositionEnd') {
|
|
71
|
+
if (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') {
|
|
59
72
|
// When input text, editor must not be empty, so we can do hide watermark now without checking content model
|
|
60
73
|
this.showHide(editor, false /*isEmpty*/);
|
|
61
74
|
}
|
|
@@ -77,14 +90,19 @@ var WatermarkPlugin = /** @class */ (function () {
|
|
|
77
90
|
else if (event.eventType == 'editorReady' ||
|
|
78
91
|
event.eventType == 'contentChanged' ||
|
|
79
92
|
event.eventType == 'input' ||
|
|
80
|
-
event.eventType == 'beforeDispose'
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
_this.showHide(editor, isEmpty);
|
|
84
|
-
return false;
|
|
85
|
-
});
|
|
93
|
+
event.eventType == 'beforeDispose' ||
|
|
94
|
+
event.eventType == 'compositionEnd') {
|
|
95
|
+
this.update(editor);
|
|
86
96
|
}
|
|
87
97
|
};
|
|
98
|
+
WatermarkPlugin.prototype.update = function (editor) {
|
|
99
|
+
var _this = this;
|
|
100
|
+
editor.formatContentModel(function (model) {
|
|
101
|
+
var isEmpty = isModelEmptyFast(model);
|
|
102
|
+
_this.showHide(editor, isEmpty);
|
|
103
|
+
return false;
|
|
104
|
+
});
|
|
105
|
+
};
|
|
88
106
|
WatermarkPlugin.prototype.showHide = function (editor, isEmpty) {
|
|
89
107
|
if (this.isShowing && !isEmpty) {
|
|
90
108
|
this.hide(editor);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WatermarkPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAItD,IAAM,qBAAqB,GAAG,mBAAmB,CAAC;AAClD,IAAM,QAAQ,GAA0C;IACpD,UAAU,EAAE,aAAa;IACzB,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,OAAO;CACrB,CAAC;AAEF;;GAEG;AACH;
|
|
1
|
+
{"version":3,"file":"WatermarkPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { ChangeSource, getObjectKeys } from 'roosterjs-content-model-dom';\nimport { isModelEmptyFast } from './isModelEmptyFast';\nimport type { WatermarkFormat } from './WatermarkFormat';\nimport type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\n\nconst WATERMARK_CONTENT_KEY = '_WatermarkContent';\nconst styleMap: Record<keyof WatermarkFormat, string> = {\n fontFamily: 'font-family',\n fontSize: 'font-size',\n textColor: 'color',\n};\n\n/**\n * A watermark plugin to manage watermark string for roosterjs\n */\nexport class WatermarkPlugin implements EditorPlugin {\n private editor: IEditor | null = null;\n private format: WatermarkFormat;\n private isShowing = false;\n private darkTextColor: string | null = null;\n private disposer: (() => void) | null = null;\n\n /**\n * Create an instance of Watermark plugin\n * @param watermark The watermark string\n */\n constructor(protected watermark: string, format?: WatermarkFormat) {\n this.format = format || {\n fontSize: '14px',\n textColor: '#AAAAAA',\n };\n }\n\n /**\n * Get a friendly name of this plugin\n */\n getName() {\n return 'Watermark';\n }\n\n /**\n * Initialize this plugin. This should only be called from Editor\n * @param editor Editor instance\n */\n initialize(editor: IEditor) {\n this.editor = editor;\n this.disposer = this.editor.attachDomEvent({\n compositionstart: {\n beforeDispatch: this.onCompositionStart,\n },\n });\n }\n\n /**\n * Dispose this plugin\n */\n dispose() {\n this.disposer?.();\n this.disposer = null;\n\n this.editor = null;\n }\n\n /**\n * Handle events triggered from editor\n * @param event PluginEvent object\n */\n onPluginEvent(event: PluginEvent) {\n const editor = this.editor;\n\n if (!editor) {\n return;\n }\n\n if (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') {\n // When input text, editor must not be empty, so we can do hide watermark now without checking content model\n this.showHide(editor, false /*isEmpty*/);\n } else if (\n event.eventType == 'contentChanged' &&\n (event.source == ChangeSource.SwitchToDarkMode ||\n event.source == ChangeSource.SwitchToLightMode) &&\n this.isShowing\n ) {\n // When the placeholder is shown and user switches the mode, we need to update watermark style\n if (\n event.source == ChangeSource.SwitchToDarkMode &&\n !this.darkTextColor &&\n this.format.textColor\n ) {\n // Get the dark color only once when dark mode is enabled for the first time\n this.darkTextColor = editor\n .getColorManager()\n .getDarkColor(this.format.textColor, undefined, 'text');\n }\n\n this.applyWatermarkStyle(editor);\n } else if (\n event.eventType == 'editorReady' ||\n event.eventType == 'contentChanged' ||\n event.eventType == 'input' ||\n event.eventType == 'beforeDispose' ||\n event.eventType == 'compositionEnd'\n ) {\n this.update(editor);\n }\n }\n\n private onCompositionStart = () => {\n if (this.editor) {\n this.showHide(this.editor, false /*isEmpty*/);\n }\n };\n\n private update(editor: IEditor) {\n editor.formatContentModel(model => {\n const isEmpty = isModelEmptyFast(model);\n\n this.showHide(editor, isEmpty);\n\n return false;\n });\n }\n\n private showHide(editor: IEditor, isEmpty: boolean) {\n if (this.isShowing && !isEmpty) {\n this.hide(editor);\n } else if (!this.isShowing && isEmpty) {\n this.show(editor);\n }\n }\n\n protected show(editor: IEditor) {\n this.applyWatermarkStyle(editor);\n this.isShowing = true;\n }\n\n private applyWatermarkStyle(editor: IEditor) {\n let rule = `position: absolute; pointer-events: none; content: \"${this.watermark}\";`;\n const format = {\n ...this.format,\n textColor: editor.isDarkMode() ? this.darkTextColor : this.format.textColor,\n };\n\n getObjectKeys(styleMap).forEach(x => {\n if (format[x]) {\n rule += `${styleMap[x]}: ${format[x]}!important;`;\n }\n });\n\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');\n }\n\n protected hide(editor: IEditor) {\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);\n this.isShowing = false;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
"description": "Plugins for roosterjs",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"tslib": "^2.3.1",
|
|
6
|
-
"roosterjs-content-model-core": "^9.
|
|
7
|
-
"roosterjs-content-model-dom": "^9.
|
|
8
|
-
"roosterjs-content-model-types": "^9.
|
|
9
|
-
"roosterjs-content-model-api": "^9.
|
|
6
|
+
"roosterjs-content-model-core": "^9.17.0",
|
|
7
|
+
"roosterjs-content-model-dom": "^9.17.0",
|
|
8
|
+
"roosterjs-content-model-types": "^9.17.0",
|
|
9
|
+
"roosterjs-content-model-api": "^9.17.0"
|
|
10
10
|
},
|
|
11
|
-
"version": "9.
|
|
11
|
+
"version": "9.17.0",
|
|
12
12
|
"main": "./lib/index.js",
|
|
13
13
|
"typings": "./lib/index.d.ts",
|
|
14
14
|
"module": "./lib-mjs/index.js",
|