Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added support for dnn-richtext plugins #1242

Merged
merged 1 commit into from
Dec 23, 2024
Merged

Added support for dnn-richtext plugins #1242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion packages/stencil-library/custom-elements.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
],
Expand Down
22 changes: 20 additions & 2 deletions packages/stencil-library/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 {
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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.
*/
Expand All @@ -1874,9 +1888,13 @@ declare namespace LocalJSX {
*/
"onValueInput"?: (event: DnnRichtextCustomEvent<string>) => 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.
*/
Expand Down
43 changes: 33 additions & 10 deletions packages/stencil-library/src/components/dnn-richtext/dnn-richtext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand All @@ -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();
Expand Down
12 changes: 7 additions & 5 deletions packages/stencil-library/src/components/dnn-richtext/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
17 changes: 16 additions & 1 deletion packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,7 +394,22 @@ export class DnnExampleForm {
</label>
<label class="vertical">
Biography
<dnn-richtext name="biography" value="<p>Some html</p>" />
<dnn-richtext
name="biography"
value="<p>Some html</p>"
plugins={[{name: "myPlugin", callback: editor => editor.events.on("myPlugin", () => alert("My plugin was clicked!"))}]}
customizeOptions={options => {
options.buttons = [
...options.buttons,
{
name: "myPlugin",
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-80 120-280v-400l360-200 360 200v400L480-80ZM364-590q23-24 53-37t63-13q33 0 63 13t53 37l120-67-236-131-236 131 120 67Zm76 396v-131q-54-14-87-57t-33-98q0-11 1-20.5t4-19.5l-125-70v263l240 133Zm40-206q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400Zm40 206 240-133v-263l-125 70q3 10 4 19.5t1 20.5q0 55-33 98t-87 57v131Z"/></svg>`,
exec: editor => editor.events.fire("myPlugin"),
tooltip: "My Plugin",
}];
return options;
}}
/>
</label>
</div>
</dnn-fieldset>
Expand Down
Loading