This repository has been archived by the owner on Apr 27, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ca3a20b
commit f3ad8ed
Showing
30 changed files
with
353 additions
and
185 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 0 additions & 3 deletions
3
Kentico.InlineEditor.RichText/Assets/InlineEditors/Kentico.RichText/constants.ts
This file was deleted.
Oops, something went wrong.
104 changes: 104 additions & 0 deletions
104
Kentico.InlineEditor.RichText/Assets/InlineEditors/Kentico.RichText/froala-events.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import FroalaEditor, { FroalaOptions, FroalaEvents } from "froala-editor/js/froala_editor.pkgd.min"; | ||
|
|
||
| import { UPDATE_WIDGET_PROPERTY_EVENT_NAME } from "@/shared/constants"; | ||
| import { replaceMacrosWithElements, replaceMacroElements, bindMacroClickListener } from "./plugins/macros/macro-services"; | ||
| import { unwrapElement } from "./helpers"; | ||
|
|
||
| type FroalaEventsOption = { [event: string]: Function }; | ||
|
|
||
| interface CodeMirrorElement extends HTMLElement { | ||
| readonly CodeMirror: CodeMirror.Editor; | ||
| } | ||
|
|
||
| export const getEvents = (inlineEditor: HTMLElement, propertyName: string, propertyValue: string, customOptions: Partial<FroalaOptions>): Partial<FroalaEvents> => { | ||
| const events: Partial<FroalaEvents> = { | ||
| initialized() { | ||
| if (propertyValue) { | ||
| const editModePropertyValue = replaceMacrosWithElements(propertyValue, this.opts.contextMacros); | ||
| this.html.set(editModePropertyValue); | ||
| } | ||
| }, | ||
| ["html.set"]() { | ||
| bindMacroClickListener(this); | ||
| }, | ||
| contentChanged() { | ||
| bindMacroClickListener(this); | ||
| updatePropertyValue(inlineEditor, propertyName, this.html.get()); | ||
| }, | ||
| ["commands.after"](cmd: string) { | ||
| if (cmd === "html" && this.codeView.isActive()) { | ||
| // Update the underlying Froala HTML when code is changed in CodeMirror | ||
| const froalaWrapper = unwrapElement(this.$wp); | ||
| const codeMirrorInstance = froalaWrapper!.querySelector<CodeMirrorElement>(".CodeMirror"); | ||
| if (codeMirrorInstance) { | ||
| codeMirrorInstance.CodeMirror.on("change", function (instance: CodeMirror.Editor) { | ||
| updatePropertyValue(inlineEditor, propertyName, instance.getValue()); | ||
| }); | ||
| } | ||
|
|
||
| // Temporary, until https://github.com/froala/wysiwyg-editor/issues/3639 is fixed | ||
| const editor = unwrapElement(this.$oel); | ||
| const codeViewExitButton = editor!.querySelector(".fr-btn.html-switch"); | ||
| codeViewExitButton!.innerHTML = this.button.build("html"); | ||
| } | ||
| }, | ||
| }; | ||
|
|
||
| return mergeWithCustomEvents(events, customOptions); | ||
| } | ||
|
|
||
| /** | ||
| * Marges the default Froala event implementations for RTE with custom ones. | ||
| * @param defaultEvents Default Froala event implementations of the RTE. | ||
| * @param customOptions Custom Froala options. | ||
| */ | ||
| const mergeWithCustomEvents = (defaultEvents: Partial<FroalaEvents>, customOptions: Partial<FroalaOptions>) => { | ||
|
|
||
| // Check if custom event implementations are defined | ||
| if (typeof customOptions.events !== "object") { | ||
| return defaultEvents; | ||
| } | ||
|
|
||
| // Make a copy of the events to keep the function pure... | ||
| const events = { ...defaultEvents } as FroalaEventsOption; | ||
| const customEvents = { ...customOptions.events } as FroalaEventsOption | ||
|
|
||
| // Iterate over default events | ||
| for (const eventName in events) { | ||
| const customEvent = customEvents[eventName]; | ||
|
|
||
| // Check if same custom event implementation exists | ||
| if (typeof customEvent === "function") { | ||
| const defaultEvent = events[eventName]; | ||
|
|
||
| // Wrap the custom implementation call with the default first | ||
| // Use regular function expression instead of arrow function, so that Froala can bind 'this' to the editor instance | ||
| events[eventName] = function (this: FroalaEditor, ...args: any[]) { | ||
| defaultEvent.call(this, ...args); | ||
| customEvent.call(this, ...args); | ||
| }; | ||
|
|
||
| // Delete the custom event once it's wrapped with the default implementation, | ||
| // so that it doesn't overwrite itself during the merge... | ||
| delete customEvents[eventName]; | ||
| } | ||
| } | ||
|
|
||
| // Merge the rest of the events which don't collide with the default's implementation | ||
| return { | ||
| ...events, | ||
| ...customEvents | ||
| }; | ||
| } | ||
|
|
||
| const updatePropertyValue = (inlineEditor: HTMLElement, propertyName: string, newValue: string) => { | ||
| const event = new CustomEvent(UPDATE_WIDGET_PROPERTY_EVENT_NAME, { | ||
| detail: { | ||
| name: propertyName, | ||
| value: replaceMacroElements(newValue), | ||
| refreshMarkup: false | ||
| } | ||
| }); | ||
|
|
||
| inlineEditor.dispatchEvent(event); | ||
| } |
42 changes: 42 additions & 0 deletions
42
Kentico.InlineEditor.RichText/Assets/InlineEditors/Kentico.RichText/froala-options.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import CodeMirror from "codemirror"; | ||
| import "codemirror/mode/xml/xml"; | ||
| import "codemirror/lib/codemirror.css"; | ||
|
|
||
| import { FroalaOptions, FroalaEvents } from "froala-editor/js/froala_editor.pkgd.min"; | ||
| import { OPEN_LINK_CONFIGURATION_POPUP_COMMAND_NAME, OPEN_INSERT_LINK_POPUP_COMMAND_NAME } from "./plugins/links/link-constants"; | ||
| import { OPEN_INSERT_MACRO_POPUP_COMMAND_NAME } from "./plugins/macros/macro-constants"; | ||
|
|
||
| const defaultOptions: Partial<FroalaOptions> = { | ||
| toolbarInline: true, | ||
| codeMirror: CodeMirror, | ||
| pasteDeniedAttrs: ["id", "style"], | ||
| imageAllowedTypes: ["gif", "png", "jpg", "jpeg"], | ||
| quickInsertButtons: ["image", "video", "table", "ul", "ol", "hr"], | ||
| linkEditButtons: ["linkOpen", OPEN_LINK_CONFIGURATION_POPUP_COMMAND_NAME, "linkRemove"], | ||
| toolbarButtons: { | ||
| moreText: { | ||
| buttons: ["bold", "italic", "underline", "strikeThrough", "subscript", "superscript", "fontFamily", "fontSize", "textColor", | ||
| "backgroundColor", "inlineClass", "inlineStyle", "clearFormatting"] | ||
| }, | ||
| moreParagraph: { | ||
| buttons: ["formatOL", "formatUL", "paragraphFormat", "alignLeft", "alignCenter", "formatOLSimple", "alignRight", "alignJustify", | ||
| "paragraphStyle", "lineHeight", "outdent", "indent", "quote"], | ||
| buttonsVisible: 2, | ||
| }, | ||
| moreRich: { | ||
| buttons: [OPEN_INSERT_LINK_POPUP_COMMAND_NAME, "insertImage", OPEN_INSERT_MACRO_POPUP_COMMAND_NAME, "insertVideo", "insertTable", "emoticons", "specialCharacters", "insertHR"] | ||
| }, | ||
| moreMisc: { | ||
| buttons: ["undo", "redo", "selectAll", "html", "help"], | ||
| align: "right", | ||
| buttonsVisible: 2, | ||
| } | ||
| }, | ||
| }; | ||
|
|
||
| export const getFroalaOptions = (key: string, events: Partial<FroalaEvents>, customOptions: Partial<FroalaOptions>): Partial<FroalaOptions> => ({ | ||
| ...defaultOptions, | ||
| ...customOptions, | ||
| key, | ||
| events, | ||
| }) |
Oops, something went wrong.