roosterjs-content-model-plugins 9.6.0 → 9.6.1

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.
@@ -8,6 +8,7 @@ export declare class WatermarkPlugin implements EditorPlugin {
8
8
  private editor;
9
9
  private format;
10
10
  private isShowing;
11
+ private darkTextColor;
11
12
  /**
12
13
  * Create an instance of Watermark plugin
13
14
  * @param watermark The watermark string
@@ -33,5 +34,6 @@ export declare class WatermarkPlugin implements EditorPlugin {
33
34
  onPluginEvent(event: PluginEvent): void;
34
35
  private showHide;
35
36
  protected show(editor: IEditor): void;
37
+ private applyWatermarkStyle;
36
38
  protected hide(editor: IEditor): void;
37
39
  }
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.WatermarkPlugin = void 0;
4
+ var tslib_1 = require("tslib");
4
5
  var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
5
6
  var isModelEmptyFast_1 = require("./isModelEmptyFast");
6
7
  var WATERMARK_CONTENT_KEY = '_WatermarkContent';
@@ -21,6 +22,7 @@ var WatermarkPlugin = /** @class */ (function () {
21
22
  this.watermark = watermark;
22
23
  this.editor = null;
23
24
  this.isShowing = false;
25
+ this.darkTextColor = null;
24
26
  this.format = format || {
25
27
  fontSize: '14px',
26
28
  textColor: '#AAAAAA',
@@ -60,6 +62,21 @@ var WatermarkPlugin = /** @class */ (function () {
60
62
  // When input text, editor must not be empty, so we can do hide watermark now without checking content model
61
63
  this.showHide(editor, false /*isEmpty*/);
62
64
  }
65
+ else if (event.eventType == 'contentChanged' &&
66
+ (event.source == roosterjs_content_model_dom_1.ChangeSource.SwitchToDarkMode ||
67
+ event.source == roosterjs_content_model_dom_1.ChangeSource.SwitchToLightMode) &&
68
+ this.isShowing) {
69
+ // When the placeholder is shown and user switches the mode, we need to update watermark style
70
+ if (event.source == roosterjs_content_model_dom_1.ChangeSource.SwitchToDarkMode &&
71
+ !this.darkTextColor &&
72
+ this.format.textColor) {
73
+ // Get the dark color only once when dark mode is enabled for the first time
74
+ this.darkTextColor = editor
75
+ .getColorManager()
76
+ .getDarkColor(this.format.textColor, undefined, 'text');
77
+ }
78
+ this.applyWatermarkStyle(editor);
79
+ }
63
80
  else if (event.eventType == 'editorReady' ||
64
81
  event.eventType == 'contentChanged' ||
65
82
  event.eventType == 'input' ||
@@ -80,15 +97,18 @@ var WatermarkPlugin = /** @class */ (function () {
80
97
  }
81
98
  };
82
99
  WatermarkPlugin.prototype.show = function (editor) {
83
- var _this = this;
100
+ this.applyWatermarkStyle(editor);
101
+ this.isShowing = true;
102
+ };
103
+ WatermarkPlugin.prototype.applyWatermarkStyle = function (editor) {
84
104
  var rule = "position: absolute; pointer-events: none; content: \"" + this.watermark + "\";";
105
+ var format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.format), { textColor: editor.isDarkMode() ? this.darkTextColor : this.format.textColor });
85
106
  (0, roosterjs_content_model_dom_1.getObjectKeys)(styleMap).forEach(function (x) {
86
- if (_this.format[x]) {
87
- rule += styleMap[x] + ": " + _this.format[x] + "!important;";
107
+ if (format[x]) {
108
+ rule += styleMap[x] + ": " + format[x] + "!important;";
88
109
  }
89
110
  });
90
111
  editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');
91
- this.isShowing = true;
92
112
  };
93
113
  WatermarkPlugin.prototype.hide = function (editor) {
94
114
  editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);
@@ -1 +1 @@
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 { 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\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 }\n\n /**\n * Dispose this plugin\n */\n dispose() {\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 (\n (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') ||\n event.eventType == 'compositionEnd'\n ) {\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 == 'editorReady' ||\n event.eventType == 'contentChanged' ||\n event.eventType == 'input' ||\n event.eventType == 'beforeDispose'\n ) {\n editor.formatContentModel(model => {\n const isEmpty = isModelEmptyFast(model);\n\n this.showHide(editor, isEmpty);\n\n return false;\n });\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 let rule = `position: absolute; pointer-events: none; content: \"${this.watermark}\";`;\n\n getObjectKeys(styleMap).forEach(x => {\n if (this.format[x]) {\n rule += `${styleMap[x]}: ${this.format[x]}!important;`;\n }\n });\n\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');\n\n this.isShowing = true;\n }\n\n protected hide(editor: IEditor) {\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);\n this.isShowing = false;\n }\n}\n"]}
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;IAMI;;;OAGG;IACH,yBAAsB,SAAiB,EAAE,MAAwB;QAA3C,cAAS,GAAT,SAAS,CAAQ;QAT/B,WAAM,GAAmB,IAAI,CAAC;QAE9B,cAAS,GAAG,KAAK,CAAC;QAClB,kBAAa,GAAkB,IAAI,CAAC;QAOxC,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;IACzB,CAAC;IAED;;OAEG;IACH,iCAAO,GAAP;QACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC;IAED;;;OAGG;IACH,uCAAa,GAAb,UAAc,KAAkB;QAAhC,iBA8CC;QA7CG,IAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAE3B,IAAI,CAAC,MAAM,EAAE;YACT,OAAO;SACV;QAED,IACI,CAAC,KAAK,CAAC,SAAS,IAAI,OAAO,IAAI,KAAK,CAAC,QAAQ,CAAC,SAAS,IAAI,YAAY,CAAC;YACxE,KAAK,CAAC,SAAS,IAAI,gBAAgB,EACrC;YACE,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,EACpC;YACE,MAAM,CAAC,kBAAkB,CAAC,UAAA,KAAK;gBAC3B,IAAM,OAAO,GAAG,IAAA,mCAAgB,EAAC,KAAK,CAAC,CAAC;gBAExC,KAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;gBAE/B,OAAO,KAAK,CAAC;YACjB,CAAC,CAAC,CAAC;SACN;IACL,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,AA5HD,IA4HC;AA5HY,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\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 }\n\n /**\n * Dispose this plugin\n */\n dispose() {\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 (\n (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') ||\n event.eventType == 'compositionEnd'\n ) {\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 ) {\n editor.formatContentModel(model => {\n const isEmpty = isModelEmptyFast(model);\n\n this.showHide(editor, isEmpty);\n\n return false;\n });\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"]}
@@ -8,6 +8,7 @@ export declare class WatermarkPlugin implements EditorPlugin {
8
8
  private editor;
9
9
  private format;
10
10
  private isShowing;
11
+ private darkTextColor;
11
12
  /**
12
13
  * Create an instance of Watermark plugin
13
14
  * @param watermark The watermark string
@@ -33,5 +34,6 @@ export declare class WatermarkPlugin implements EditorPlugin {
33
34
  onPluginEvent(event: PluginEvent): void;
34
35
  private showHide;
35
36
  protected show(editor: IEditor): void;
37
+ private applyWatermarkStyle;
36
38
  protected hide(editor: IEditor): void;
37
39
  }
@@ -1,4 +1,4 @@
1
- define(["require", "exports", "roosterjs-content-model-dom", "./isModelEmptyFast"], function (require, exports, roosterjs_content_model_dom_1, isModelEmptyFast_1) {
1
+ define(["require", "exports", "tslib", "roosterjs-content-model-dom", "./isModelEmptyFast"], function (require, exports, tslib_1, roosterjs_content_model_dom_1, isModelEmptyFast_1) {
2
2
  "use strict";
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  exports.WatermarkPlugin = void 0;
@@ -20,6 +20,7 @@ define(["require", "exports", "roosterjs-content-model-dom", "./isModelEmptyFast
20
20
  this.watermark = watermark;
21
21
  this.editor = null;
22
22
  this.isShowing = false;
23
+ this.darkTextColor = null;
23
24
  this.format = format || {
24
25
  fontSize: '14px',
25
26
  textColor: '#AAAAAA',
@@ -59,6 +60,21 @@ define(["require", "exports", "roosterjs-content-model-dom", "./isModelEmptyFast
59
60
  // When input text, editor must not be empty, so we can do hide watermark now without checking content model
60
61
  this.showHide(editor, false /*isEmpty*/);
61
62
  }
63
+ else if (event.eventType == 'contentChanged' &&
64
+ (event.source == roosterjs_content_model_dom_1.ChangeSource.SwitchToDarkMode ||
65
+ event.source == roosterjs_content_model_dom_1.ChangeSource.SwitchToLightMode) &&
66
+ this.isShowing) {
67
+ // When the placeholder is shown and user switches the mode, we need to update watermark style
68
+ if (event.source == roosterjs_content_model_dom_1.ChangeSource.SwitchToDarkMode &&
69
+ !this.darkTextColor &&
70
+ this.format.textColor) {
71
+ // Get the dark color only once when dark mode is enabled for the first time
72
+ this.darkTextColor = editor
73
+ .getColorManager()
74
+ .getDarkColor(this.format.textColor, undefined, 'text');
75
+ }
76
+ this.applyWatermarkStyle(editor);
77
+ }
62
78
  else if (event.eventType == 'editorReady' ||
63
79
  event.eventType == 'contentChanged' ||
64
80
  event.eventType == 'input' ||
@@ -79,15 +95,18 @@ define(["require", "exports", "roosterjs-content-model-dom", "./isModelEmptyFast
79
95
  }
80
96
  };
81
97
  WatermarkPlugin.prototype.show = function (editor) {
82
- var _this = this;
98
+ this.applyWatermarkStyle(editor);
99
+ this.isShowing = true;
100
+ };
101
+ WatermarkPlugin.prototype.applyWatermarkStyle = function (editor) {
83
102
  var rule = "position: absolute; pointer-events: none; content: \"" + this.watermark + "\";";
103
+ var format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.format), { textColor: editor.isDarkMode() ? this.darkTextColor : this.format.textColor });
84
104
  (0, roosterjs_content_model_dom_1.getObjectKeys)(styleMap).forEach(function (x) {
85
- if (_this.format[x]) {
86
- rule += styleMap[x] + ": " + _this.format[x] + "!important;";
105
+ if (format[x]) {
106
+ rule += styleMap[x] + ": " + format[x] + "!important;";
87
107
  }
88
108
  });
89
109
  editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');
90
- this.isShowing = true;
91
110
  };
92
111
  WatermarkPlugin.prototype.hide = function (editor) {
93
112
  editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);
@@ -1 +1 @@
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 { 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\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 }\n\n /**\n * Dispose this plugin\n */\n dispose() {\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 (\n (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') ||\n event.eventType == 'compositionEnd'\n ) {\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 == 'editorReady' ||\n event.eventType == 'contentChanged' ||\n event.eventType == 'input' ||\n event.eventType == 'beforeDispose'\n ) {\n editor.formatContentModel(model => {\n const isEmpty = isModelEmptyFast(model);\n\n this.showHide(editor, isEmpty);\n\n return false;\n });\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 let rule = `position: absolute; pointer-events: none; content: \"${this.watermark}\";`;\n\n getObjectKeys(styleMap).forEach(x => {\n if (this.format[x]) {\n rule += `${styleMap[x]}: ${this.format[x]}!important;`;\n }\n });\n\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');\n\n this.isShowing = true;\n }\n\n protected hide(editor: IEditor) {\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);\n this.isShowing = false;\n }\n}\n"]}
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\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 }\n\n /**\n * Dispose this plugin\n */\n dispose() {\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 (\n (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') ||\n event.eventType == 'compositionEnd'\n ) {\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 ) {\n editor.formatContentModel(model => {\n const isEmpty = isModelEmptyFast(model);\n\n this.showHide(editor, isEmpty);\n\n return false;\n });\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"]}
@@ -8,6 +8,7 @@ export declare class WatermarkPlugin implements EditorPlugin {
8
8
  private editor;
9
9
  private format;
10
10
  private isShowing;
11
+ private darkTextColor;
11
12
  /**
12
13
  * Create an instance of Watermark plugin
13
14
  * @param watermark The watermark string
@@ -33,5 +34,6 @@ export declare class WatermarkPlugin implements EditorPlugin {
33
34
  onPluginEvent(event: PluginEvent): void;
34
35
  private showHide;
35
36
  protected show(editor: IEditor): void;
37
+ private applyWatermarkStyle;
36
38
  protected hide(editor: IEditor): void;
37
39
  }
@@ -1,4 +1,5 @@
1
- import { getObjectKeys } from 'roosterjs-content-model-dom';
1
+ import { __assign } from "tslib";
2
+ import { ChangeSource, getObjectKeys } from 'roosterjs-content-model-dom';
2
3
  import { isModelEmptyFast } from './isModelEmptyFast';
3
4
  var WATERMARK_CONTENT_KEY = '_WatermarkContent';
4
5
  var styleMap = {
@@ -18,6 +19,7 @@ var WatermarkPlugin = /** @class */ (function () {
18
19
  this.watermark = watermark;
19
20
  this.editor = null;
20
21
  this.isShowing = false;
22
+ this.darkTextColor = null;
21
23
  this.format = format || {
22
24
  fontSize: '14px',
23
25
  textColor: '#AAAAAA',
@@ -57,6 +59,21 @@ var WatermarkPlugin = /** @class */ (function () {
57
59
  // When input text, editor must not be empty, so we can do hide watermark now without checking content model
58
60
  this.showHide(editor, false /*isEmpty*/);
59
61
  }
62
+ else if (event.eventType == 'contentChanged' &&
63
+ (event.source == ChangeSource.SwitchToDarkMode ||
64
+ event.source == ChangeSource.SwitchToLightMode) &&
65
+ this.isShowing) {
66
+ // When the placeholder is shown and user switches the mode, we need to update watermark style
67
+ if (event.source == ChangeSource.SwitchToDarkMode &&
68
+ !this.darkTextColor &&
69
+ this.format.textColor) {
70
+ // Get the dark color only once when dark mode is enabled for the first time
71
+ this.darkTextColor = editor
72
+ .getColorManager()
73
+ .getDarkColor(this.format.textColor, undefined, 'text');
74
+ }
75
+ this.applyWatermarkStyle(editor);
76
+ }
60
77
  else if (event.eventType == 'editorReady' ||
61
78
  event.eventType == 'contentChanged' ||
62
79
  event.eventType == 'input' ||
@@ -77,15 +94,18 @@ var WatermarkPlugin = /** @class */ (function () {
77
94
  }
78
95
  };
79
96
  WatermarkPlugin.prototype.show = function (editor) {
80
- var _this = this;
97
+ this.applyWatermarkStyle(editor);
98
+ this.isShowing = true;
99
+ };
100
+ WatermarkPlugin.prototype.applyWatermarkStyle = function (editor) {
81
101
  var rule = "position: absolute; pointer-events: none; content: \"" + this.watermark + "\";";
102
+ var format = __assign(__assign({}, this.format), { textColor: editor.isDarkMode() ? this.darkTextColor : this.format.textColor });
82
103
  getObjectKeys(styleMap).forEach(function (x) {
83
- if (_this.format[x]) {
84
- rule += styleMap[x] + ": " + _this.format[x] + "!important;";
104
+ if (format[x]) {
105
+ rule += styleMap[x] + ": " + format[x] + "!important;";
85
106
  }
86
107
  });
87
108
  editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');
88
- this.isShowing = true;
89
109
  };
90
110
  WatermarkPlugin.prototype.hide = function (editor) {
91
111
  editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);
@@ -1 +1 @@
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 { 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\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 }\n\n /**\n * Dispose this plugin\n */\n dispose() {\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 (\n (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') ||\n event.eventType == 'compositionEnd'\n ) {\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 == 'editorReady' ||\n event.eventType == 'contentChanged' ||\n event.eventType == 'input' ||\n event.eventType == 'beforeDispose'\n ) {\n editor.formatContentModel(model => {\n const isEmpty = isModelEmptyFast(model);\n\n this.showHide(editor, isEmpty);\n\n return false;\n });\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 let rule = `position: absolute; pointer-events: none; content: \"${this.watermark}\";`;\n\n getObjectKeys(styleMap).forEach(x => {\n if (this.format[x]) {\n rule += `${styleMap[x]}: ${this.format[x]}!important;`;\n }\n });\n\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');\n\n this.isShowing = true;\n }\n\n protected hide(editor: IEditor) {\n editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);\n this.isShowing = false;\n }\n}\n"]}
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;IAMI;;;OAGG;IACH,yBAAsB,SAAiB,EAAE,MAAwB;QAA3C,cAAS,GAAT,SAAS,CAAQ;QAT/B,WAAM,GAAmB,IAAI,CAAC;QAE9B,cAAS,GAAG,KAAK,CAAC;QAClB,kBAAa,GAAkB,IAAI,CAAC;QAOxC,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;IACzB,CAAC;IAED;;OAEG;IACH,iCAAO,GAAP;QACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC;IAED;;;OAGG;IACH,uCAAa,GAAb,UAAc,KAAkB;QAAhC,iBA8CC;QA7CG,IAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAE3B,IAAI,CAAC,MAAM,EAAE;YACT,OAAO;SACV;QAED,IACI,CAAC,KAAK,CAAC,SAAS,IAAI,OAAO,IAAI,KAAK,CAAC,QAAQ,CAAC,SAAS,IAAI,YAAY,CAAC;YACxE,KAAK,CAAC,SAAS,IAAI,gBAAgB,EACrC;YACE,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,YAAY,CAAC,gBAAgB;gBAC1C,KAAK,CAAC,MAAM,IAAI,YAAY,CAAC,iBAAiB,CAAC;YACnD,IAAI,CAAC,SAAS,EAChB;YACE,8FAA8F;YAC9F,IACI,KAAK,CAAC,MAAM,IAAI,YAAY,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,EACpC;YACE,MAAM,CAAC,kBAAkB,CAAC,UAAA,KAAK;gBAC3B,IAAM,OAAO,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBAExC,KAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;gBAE/B,OAAO,KAAK,CAAC;YACjB,CAAC,CAAC,CAAC;SACN;IACL,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,yBACL,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,aAAa,CAAC,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,AA5HD,IA4HC","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\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 }\n\n /**\n * Dispose this plugin\n */\n dispose() {\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 (\n (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') ||\n event.eventType == 'compositionEnd'\n ) {\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 ) {\n editor.formatContentModel(model => {\n const isEmpty = isModelEmptyFast(model);\n\n this.showHide(editor, isEmpty);\n\n return false;\n });\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
@@ -8,7 +8,7 @@
8
8
  "roosterjs-content-model-types": "^9.6.0",
9
9
  "roosterjs-content-model-api": "^9.6.0"
10
10
  },
11
- "version": "9.6.0",
11
+ "version": "9.6.1",
12
12
  "main": "./lib/index.js",
13
13
  "typings": "./lib/index.d.ts",
14
14
  "module": "./lib-mjs/index.js",