From 610355f7999560e1ed067747e0a647751f850930 Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Thu, 1 Feb 2024 06:46:53 +0800 Subject: [PATCH 1/3] using esc for exiting fullscreen --- src/shell/components/FieldTypeTinyMCE/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/shell/components/FieldTypeTinyMCE/index.tsx b/src/shell/components/FieldTypeTinyMCE/index.tsx index a577209f8a..8a5db27f8e 100644 --- a/src/shell/components/FieldTypeTinyMCE/index.tsx +++ b/src/shell/components/FieldTypeTinyMCE/index.tsx @@ -74,6 +74,7 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ // NOTE: controlled component const [initialValue, setInitialValue] = useState(value); const [isSkinLoaded, setIsSkinLoaded] = useState(false); + const [isFullScreen, setIsFullScreen] = useState(false); // NOTE: update if version changes useEffect(() => { @@ -147,6 +148,9 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ }); }, 100); } + } else if (evt.code === "Escape") { + if (isFullScreen) + tinymce.activeEditor.execCommand("mceFullScreen"); } }} onObjectResized={(evt) => { @@ -202,7 +206,6 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ "socialmediaembed", "imageresizer", ], - // NOTE: premium plugins are being loaded from a self hosted location // specific to our application. Making this component not usable outside of our context. external_plugins: externalPlugins ?? {}, @@ -316,9 +319,11 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ // Limits the content width to 640px when in fullscreen editor.on("FullscreenStateChanged", (evt: any) => { if (evt.state) { + setIsFullScreen(true); editor.contentDocument.documentElement.style.display = "flex"; editor.contentDocument.body.style.width = "640px"; } else { + setIsFullScreen(false); editor.contentDocument.documentElement.style.display = "block"; editor.contentDocument.body.style.width = "auto"; From 2fcf7c628a47be83db109ae7110b4e12294dd269 Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Thu, 1 Feb 2024 11:45:16 +0800 Subject: [PATCH 2/3] revise code --- src/shell/components/FieldTypeTinyMCE/index.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/shell/components/FieldTypeTinyMCE/index.tsx b/src/shell/components/FieldTypeTinyMCE/index.tsx index 8a5db27f8e..798231d68d 100644 --- a/src/shell/components/FieldTypeTinyMCE/index.tsx +++ b/src/shell/components/FieldTypeTinyMCE/index.tsx @@ -74,7 +74,6 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ // NOTE: controlled component const [initialValue, setInitialValue] = useState(value); const [isSkinLoaded, setIsSkinLoaded] = useState(false); - const [isFullScreen, setIsFullScreen] = useState(false); // NOTE: update if version changes useEffect(() => { @@ -148,9 +147,6 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ }); }, 100); } - } else if (evt.code === "Escape") { - if (isFullScreen) - tinymce.activeEditor.execCommand("mceFullScreen"); } }} onObjectResized={(evt) => { @@ -316,14 +312,21 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ setIsSkinLoaded(true); }); + editor.on("keydown", function (evt: any) { + if (evt.key === "Escape") { + if (editor.plugins.fullscreen.isFullscreen()) { + editor.execCommand("mceFullScreen"); + evt.preventDefault(); + } + } + }); + // Limits the content width to 640px when in fullscreen editor.on("FullscreenStateChanged", (evt: any) => { if (evt.state) { - setIsFullScreen(true); editor.contentDocument.documentElement.style.display = "flex"; editor.contentDocument.body.style.width = "640px"; } else { - setIsFullScreen(false); editor.contentDocument.documentElement.style.display = "block"; editor.contentDocument.body.style.width = "auto"; From ab213da7a27c7daa1c836207fec4b9d1c562d74c Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Thu, 1 Feb 2024 11:45:53 +0800 Subject: [PATCH 3/3] revise --- src/shell/components/FieldTypeTinyMCE/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shell/components/FieldTypeTinyMCE/index.tsx b/src/shell/components/FieldTypeTinyMCE/index.tsx index 798231d68d..7585851ed8 100644 --- a/src/shell/components/FieldTypeTinyMCE/index.tsx +++ b/src/shell/components/FieldTypeTinyMCE/index.tsx @@ -312,7 +312,7 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ setIsSkinLoaded(true); }); - editor.on("keydown", function (evt: any) { + editor.on("keydown", (evt: any) => { if (evt.key === "Escape") { if (editor.plugins.fullscreen.isFullscreen()) { editor.execCommand("mceFullScreen");