From cdd34a478bfbe234667ae7f71f63d0fa3ffc073b Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 23 Dec 2024 03:36:24 -0500 Subject: [PATCH] Added support for dnn-richtext plugins This allows adding plugins to dnn-richtext and make a very simple usage example in the html. Closes Implement a basic custom plugin for Jodit #1150 --- packages/stencil-library/custom-elements.json | 21 ++++++++- packages/stencil-library/src/components.d.ts | 22 +++++++++- .../components/dnn-richtext/dnn-richtext.tsx | 43 ++++++++++++++----- .../src/components/dnn-richtext/readme.md | 12 +++--- .../dnn-example-form/dnn-example-form.tsx | 17 +++++++- 5 files changed, 96 insertions(+), 19 deletions(-) diff --git a/packages/stencil-library/custom-elements.json b/packages/stencil-library/custom-elements.json index 0b87dc949..427e6e8dd 100644 --- a/packages/stencil-library/custom-elements.json +++ b/packages/stencil-library/custom-elements.json @@ -1671,13 +1671,32 @@ } ], "members": [ + { + "kind": "field", + "name": "customizeOptions", + "type": { + "text": "(options: Config) => Config" + }, + "description": "Customize the options before initializing the editor, will have all the default options merged with 'options' if passed.\nThis is called last after merging default options with your custom 'options' and just before initializing the editor.", + "required": false + }, { "kind": "field", "name": "options", "type": { "text": "Config" }, - "description": "Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html", + "description": "Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html\nThis will be merged with the default options and passed to the editor.\nIf you prefer to not have to pass a full config object,\nyou can use 'customizeOptions' to modify the options before initializing the editor\ninstead of providing all options here.", + "required": false + }, + { + "kind": "field", + "name": "plugins", + "type": { + "text": "{ name: string; callback: (editor: Jodit) => void; }[]" + }, + "description": "Allows registering your own plugins.\nThe callback will be called with the editor instance as the only argument durig initialization.\nAll other behavior needs to be implemented in the plugin itself using editor.on(\"eventname\").\nSee https://xdsoft.net/jodit/examples/plugin/custom_plugin.html for an example.\nCreating a plugin does NOT automatically add it to the toolbar, you need to do that yourself in 'options' or 'customizeOptions',\nSee https://xdsoft.net/jodit/examples/toolbar/custom_button.html for an example.", + "default": "[]", "required": false } ], diff --git a/packages/stencil-library/src/components.d.ts b/packages/stencil-library/src/components.d.ts index f9ef44531..e6d38ec6b 100644 --- a/packages/stencil-library/src/components.d.ts +++ b/packages/stencil-library/src/components.d.ts @@ -17,6 +17,7 @@ import { IRole } from "./components/dnn-permissions-grid/role-interface"; import { ILocalization } from "./components/dnn-permissions-grid/localization-interface"; import { ISearchedUser } from "./components/dnn-permissions-grid/searched-user-interface"; import { Config } from "jodit/types/config"; +import { Jodit } from "jodit"; import { DnnToggleChangeEventDetail } from "./components/dnn-toggle/toggle-interface"; export { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from "./components/dnn-autocomplete/types"; export { CheckedState } from "./components/dnn-checkbox/types"; @@ -30,6 +31,7 @@ export { IRole } from "./components/dnn-permissions-grid/role-interface"; export { ILocalization } from "./components/dnn-permissions-grid/localization-interface"; export { ISearchedUser } from "./components/dnn-permissions-grid/searched-user-interface"; export { Config } from "jodit/types/config"; +export { Jodit } from "jodit"; export { DnnToggleChangeEventDetail } from "./components/dnn-toggle/toggle-interface"; export namespace Components { interface DnnAutocomplete { @@ -554,14 +556,22 @@ export namespace Components { "value": number; } interface DnnRichtext { + /** + * Customize the options before initializing the editor, will have all the default options merged with 'options' if passed. This is called last after merging default options with your custom 'options' and just before initializing the editor. + */ + "customizeOptions": (options: Config) => Config; /** * Name of the field when used in a form. */ "name": string; /** - * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html + * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html This will be merged with the default options and passed to the editor. If you prefer to not have to pass a full config object, you can use 'customizeOptions' to modify the options before initializing the editor instead of providing all options here. */ "options": Config; + /** + * Allows registering your own plugins. The callback will be called with the editor instance as the only argument durig initialization. All other behavior needs to be implemented in the plugin itself using editor.on("eventname"). See https://xdsoft.net/jodit/examples/plugin/custom_plugin.html for an example. Creating a plugin does NOT automatically add it to the toolbar, you need to do that yourself in 'options' or 'customizeOptions', See https://xdsoft.net/jodit/examples/toolbar/custom_button.html for an example. + */ + "plugins": {name: string, callback: (editor: Jodit) => void}[]; /** * Sets the value of the content of the editor. */ @@ -1861,6 +1871,10 @@ declare namespace LocalJSX { "value"?: number; } interface DnnRichtext { + /** + * Customize the options before initializing the editor, will have all the default options merged with 'options' if passed. This is called last after merging default options with your custom 'options' and just before initializing the editor. + */ + "customizeOptions"?: (options: Config) => Config; /** * Name of the field when used in a form. */ @@ -1874,9 +1888,13 @@ declare namespace LocalJSX { */ "onValueInput"?: (event: DnnRichtextCustomEvent) => void; /** - * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html + * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html This will be merged with the default options and passed to the editor. If you prefer to not have to pass a full config object, you can use 'customizeOptions' to modify the options before initializing the editor instead of providing all options here. */ "options"?: Config; + /** + * Allows registering your own plugins. The callback will be called with the editor instance as the only argument durig initialization. All other behavior needs to be implemented in the plugin itself using editor.on("eventname"). See https://xdsoft.net/jodit/examples/plugin/custom_plugin.html for an example. Creating a plugin does NOT automatically add it to the toolbar, you need to do that yourself in 'options' or 'customizeOptions', See https://xdsoft.net/jodit/examples/toolbar/custom_button.html for an example. + */ + "plugins"?: {name: string, callback: (editor: Jodit) => void}[]; /** * Sets the value of the content of the editor. */ diff --git a/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.tsx b/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.tsx index 103f48aba..a983f03dc 100644 --- a/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.tsx +++ b/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.tsx @@ -10,21 +10,34 @@ import { decodeHtml } from '../../utilities/stringUtilities'; formAssociated: true, }) export class DnnRichtext { - /** Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html */ + /** Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html + * This will be merged with the default options and passed to the editor. + * If you prefer to not have to pass a full config object, + * you can use 'customizeOptions' to modify the options before initializing the editor + * instead of providing all options here. + */ @Prop() options: Config; - private textArea: HTMLTextAreaElement; - private editor: Jodit; - private dnnDefaultOptions: Config = { - ...Jodit.defaultOptions, - useSplitMode: true, - } - + /** Sets the value of the content of the editor. */ @Prop() value: string; /** Name of the field when used in a form. */ @Prop() name: string; + /** Allows registering your own plugins. + * The callback will be called with the editor instance as the only argument durig initialization. + * All other behavior needs to be implemented in the plugin itself using editor.on("eventname"). + * See https://xdsoft.net/jodit/examples/plugin/custom_plugin.html for an example. + * Creating a plugin does NOT automatically add it to the toolbar, you need to do that yourself in 'options' or 'customizeOptions', + * See https://xdsoft.net/jodit/examples/toolbar/custom_button.html for an example. + */ + @Prop() plugins: {name: string, callback: (editor: Jodit) => void}[] = []; + + /** Customize the options before initializing the editor, will have all the default options merged with 'options' if passed. + * This is called last after merging default options with your custom 'options' and just before initializing the editor. + */ + @Prop() customizeOptions: (options: Config) => Config; + @Element() host: HTMLDnnRichtextElement; @Watch("value") @@ -44,14 +57,24 @@ export class DnnRichtext { @AttachInternals() internals: ElementInternals; @State() focused = false; + + private textArea: HTMLTextAreaElement; + private editor: Jodit; + private dnnDefaultOptions: Config = { + ...Jodit.defaultOptions, + useSplitMode: true, + } componentDidLoad(){ - var mergedOptions = { + var mergedOptions : Config = { ...this.dnnDefaultOptions, ...this.options, - globalFullSize: false, shadowRoot: this.host.shadowRoot, }; + if (this.customizeOptions != undefined){ + mergedOptions = this.customizeOptions(mergedOptions); + } + this.plugins.forEach(plugin => Jodit.plugins.add(plugin.name, plugin.callback)); this.editor = Jodit.make(this.textArea, mergedOptions); this.editor.value = decodeHtml(this.value); this.setFormValue(); diff --git a/packages/stencil-library/src/components/dnn-richtext/readme.md b/packages/stencil-library/src/components/dnn-richtext/readme.md index b5c607f98..f8dffc10d 100644 --- a/packages/stencil-library/src/components/dnn-richtext/readme.md +++ b/packages/stencil-library/src/components/dnn-richtext/readme.md @@ -7,11 +7,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------- | --------- | ---------------------------------------------------------------------------------------------- | -------- | ----------- | -| `name` | `name` | Name of the field when used in a form. | `string` | `undefined` | -| `options` | -- | Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html | `Config` | `undefined` | -| `value` | `value` | Sets the value of the content of the editor. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | ----------- | +| `customizeOptions` | -- | Customize the options before initializing the editor, will have all the default options merged with 'options' if passed. This is called last after merging default options with your custom 'options' and just before initializing the editor. | `(options: Config) => Config` | `undefined` | +| `name` | `name` | Name of the field when used in a form. | `string` | `undefined` | +| `options` | -- | Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html This will be merged with the default options and passed to the editor. If you prefer to not have to pass a full config object, you can use 'customizeOptions' to modify the options before initializing the editor instead of providing all options here. | `Config` | `undefined` | +| `plugins` | -- | Allows registering your own plugins. The callback will be called with the editor instance as the only argument durig initialization. All other behavior needs to be implemented in the plugin itself using editor.on("eventname"). See https://xdsoft.net/jodit/examples/plugin/custom_plugin.html for an example. Creating a plugin does NOT automatically add it to the toolbar, you need to do that yourself in 'options' or 'customizeOptions', See https://xdsoft.net/jodit/examples/toolbar/custom_button.html for an example. | `{ name: string; callback: (editor: Jodit) => void; }[]` | `[]` | +| `value` | `value` | Sets the value of the content of the editor. | `string` | `undefined` | ## Events diff --git a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx index 37e708605..a24b84eaa 100644 --- a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx +++ b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx @@ -394,7 +394,22 @@ export class DnnExampleForm {