From 92ee5454371805cb14dd7aecfbeefcd87939a91f Mon Sep 17 00:00:00 2001 From: Jhon Vente Date: Tue, 26 Sep 2023 09:45:06 -0500 Subject: [PATCH] feat: tinymce plugin for inserting an iframe to texteditor --- package-lock.json | 2 +- package.json | 2 +- src/editors/data/constants/tinyMCE.js | 5 ++ .../TinyMceWidget/embedIframePlugin.js | 65 +++++++++++++++++++ .../sharedComponents/TinyMceWidget/index.jsx | 2 + .../TinyMceWidget/pluginConfig.js | 3 + 6 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 src/editors/sharedComponents/TinyMceWidget/embedIframePlugin.js diff --git a/package-lock.json b/package-lock.json index e01479ee1..0a3cef023 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,7 @@ "redux-mock-store": "^1.5.4", "redux-thunk": "^2.4.1", "reselect": "^4.1.5", - "tinymce": "^5.10.4", + "tinymce": "^5.10.7", "video-react": "^0.15.0", "video.js": "^7.18.1", "xmlchecker": "^0.1.0" diff --git a/package.json b/package.json index 74c4779ab..8a7cc996c 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,7 @@ "redux-mock-store": "^1.5.4", "redux-thunk": "^2.4.1", "reselect": "^4.1.5", - "tinymce": "^5.10.4", + "tinymce": "^5.10.7", "video-react": "^0.15.0", "video.js": "^7.18.1", "xmlchecker": "^0.1.0" diff --git a/src/editors/data/constants/tinyMCE.js b/src/editors/data/constants/tinyMCE.js index f640d4c5e..93eb492bc 100644 --- a/src/editors/data/constants/tinyMCE.js +++ b/src/editors/data/constants/tinyMCE.js @@ -51,6 +51,9 @@ export const buttons = StrictDict({ table: 'table', undo: 'undo', underline: 'underline', + codeRow: 'code', + preview: 'preview', + embediframe: 'embediframe', }); export const plugins = listKeyStore([ @@ -66,6 +69,8 @@ export const plugins = listKeyStore([ 'image', 'imagetools', 'quickbars', + 'preview', + 'embediframe' ]); export const textToSpeechIcon = ''; diff --git a/src/editors/sharedComponents/TinyMceWidget/embedIframePlugin.js b/src/editors/sharedComponents/TinyMceWidget/embedIframePlugin.js new file mode 100644 index 000000000..bc4daa580 --- /dev/null +++ b/src/editors/sharedComponents/TinyMceWidget/embedIframePlugin.js @@ -0,0 +1,65 @@ +tinymce.PluginManager.add("embediframe", function (editor) { + const openInsertIframeModal = () => { + editor.windowManager.open({ + title: "Insert iframe", + body: { + type: "panel", + items: [ + { + type: "input", + name: "source", + label: "Source URL", + required: true, + }, + { + type: "input", + name: "width", + label: "Width", + required: true, + }, + { + type: "input", + name: "height", + label: "Height", + pattern: "^[0-9]+$", + required: true, + }, + ], + }, + buttons: [ + { + type: "cancel", + name: "cancel", + text: "Cancel", + }, + { + type: "submit", + name: "save", + text: "Save", + primary: true, + }, + ], + onSubmit: function (api) { + // Handle the form submission (Save button) + const data = api.getData(); // Get the input values + if (data.source) { + const width = /^\d+$/.test(data.width) ? data.width : "300"; + const height = /^\d+$/.test(data.height) ? data.height : "300"; + + const iframeCode = + `
` + + `` + + "
"; + editor.insertContent(iframeCode); + } + + api.close(); + }, + }); + }; + + editor.ui.registry.addButton("embediframe", { + text: "Embed iframe", + onAction: openInsertIframeModal, + }); +}); diff --git a/src/editors/sharedComponents/TinyMceWidget/index.jsx b/src/editors/sharedComponents/TinyMceWidget/index.jsx index b2cbecfc7..3bc14c34d 100644 --- a/src/editors/sharedComponents/TinyMceWidget/index.jsx +++ b/src/editors/sharedComponents/TinyMceWidget/index.jsx @@ -20,6 +20,8 @@ import 'tinymce/plugins/autoresize'; import 'tinymce/plugins/image'; import 'tinymce/plugins/imagetools'; import 'tinymce/plugins/quickbars'; +import 'tinymce/plugins/preview'; +import './embedIframePlugin'; import store from '../../data/store'; import { selectors } from '../../data/redux'; diff --git a/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js b/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js index 967224662..f2c6391c7 100644 --- a/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js +++ b/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js @@ -31,6 +31,8 @@ const pluginConfig = ({ isLibrary, placeholder, editorType }) => { image, imageTools, quickToolbar, + plugins.preview, + plugins.embediframe ].join(' '), menubar: false, toolbar: toolbar ? mapToolbars([ @@ -53,6 +55,7 @@ const pluginConfig = ({ isLibrary, placeholder, editorType }) => { [imageUploadButton, buttons.link, buttons.unlink, buttons.blockQuote, buttons.codeBlock], [buttons.table, buttons.emoticons, buttons.charmap, buttons.hr], [buttons.removeFormat, codeButton], + [buttons.codeRow , buttons.preview, buttons.embediframe] ]) : false, imageToolbar: mapToolbars([ // [buttons.rotate.left, buttons.rotate.right],