diff --git a/Assets/easymde/render.js b/Assets/easymde/render.js index 33b19be..827c1ef 100644 --- a/Assets/easymde/render.js +++ b/Assets/easymde/render.js @@ -16,8 +16,8 @@ function injectRenderEasyMDE() { valueMarkdown = valueMarkdown.replaceAll('>', '>'); const valueRenderTheme = markdownElement.attr("renderTheme"); - const valueRenderCodeHighlight = markdownElement.attr("renderCodeHighlight"); const valueRenderTransparentBackground = (markdownElement.attr("renderTransparentBackground") == "1"); + const valueRenderCodeHighlight = markdownElement.attr("renderCodeHighlight"); containerElement.html(''); @@ -112,8 +112,8 @@ function injectRenderEasyMDE() { $(".easymde-iframe-embedded", containerElement).attr('src', location.origin + '/plugins/WysiwygMDEditor/Template/render/easymde.php' + '?renderTheme=' + valueRenderTheme - + '&renderCodeHighlight=' + valueRenderCodeHighlight + '&renderTransparentBackground=' + valueRenderTransparentBackground + + '&renderCodeHighlight=' + valueRenderCodeHighlight ); }); diff --git a/Controller/WysiwygMDEditorConfigController.php b/Controller/WysiwygMDEditorConfigController.php index 370733d..d21e289 100644 --- a/Controller/WysiwygMDEditorConfigController.php +++ b/Controller/WysiwygMDEditorConfigController.php @@ -82,13 +82,13 @@ public function getEasyMDERenderTheme() print $this->configModel->get('WysiwygMDEditor_easymde_render_theme', 'dimmed'); } - public function getEasyMDERenderCodeHighlight() + public function getEasyMDERenderTransparentBackground() { - print $this->configModel->get('WysiwygMDEditor_easymde_render_code_highlight', 1); + print $this->configModel->get('WysiwygMDEditor_easymde_render_transparent_background', 0); } - public function getEasyMDERenderTransparentBackground() + public function getEasyMDERenderCodeHighlight() { - print $this->configModel->get('WysiwygMDEditor_easymde_render_transparent_background', 0); + print $this->configModel->get('WysiwygMDEditor_easymde_render_code_highlight', 1); } } diff --git a/Helper/WysiwygMDEditorHelper.php b/Helper/WysiwygMDEditorHelper.php index 2236032..836a3f4 100644 --- a/Helper/WysiwygMDEditorHelper.php +++ b/Helper/WysiwygMDEditorHelper.php @@ -47,8 +47,8 @@ public function markdown($text, $isPublicLink = false) $returnText = ''; $returnText .= ''; diff --git a/Locale/en_GB/translations.php b/Locale/en_GB/translations.php index a3a0f78..54a6237 100644 --- a/Locale/en_GB/translations.php +++ b/Locale/en_GB/translations.php @@ -4,9 +4,10 @@ // // GENERAL // - 'WysiwygMDEditor_PLUGIN_DESCRIPTION' => 'Integrates external MD editors into Kanboard in order to conveniently edit/preview - (and eventually render) the markdown textareas in the Kanboard interface. - Each editor may allow for different customizations of functionality, MD features, and UI themes.', + 'WysiwygMDEditor_PLUGIN_DESCRIPTION' => 'Integrates external MD editors into Kanboard in order to conveniently edit and preview + the markdown textareas, as well as render the markdown fields in the Kanboard interface. + Each editor may allow for different customizations of functionality, MD features, and UI themes. + Rendering can parametrize theme, code highlight, and background transparency.', // // Template/config/settings // @@ -15,33 +16,53 @@ 'WysiwygMDEditor_LINK_SETTINGS_PREVIEW' => 'Preview with Saved Settings', 'WysiwygMDEditor_LINK_SETTINGS_CHANGE' => 'Change Settings', 'WysiwygMDEditor_CONTAINER_PREVIEW' => 'Preview Container', + // + // Template/config/settings/editing + // 'WysiwygMDEditor_SETTINGS_EDITING_OPTIONS' => 'Setup Editing Options', 'WysiwygMDEditor_SETTINGS_EDITING_DESCR' => 'Choose which MD editors to use. - Enabling an editor will inject a corresponding button in the editing toolbar of each markdown textarea. - All editors open independently of each other in a fullscreen overlay mode so that they don\'t mess with Kanboard UI. - The actual UI of the editors is in English, no translations are available for them.', +* Enabling an editor will inject a corresponding button in the editing toolbar of each markdown textarea. +* All editors open independently of each other in a fullscreen overlay mode so that they don\'t mess with Kanboard UI. +* The actual UI of the editors is in **English**, **`no translations`** are available for them.', 'WysiwygMDEditor_SETTINGS_EDITING_ENABLE_BUTTON' => 'Enable a button for', 'WysiwygMDEditor_SETTINGS_EASYMDE_DESCR' => 'A fully offline drop-in JavaScript markdown editor. - Configured to cover all MD syntax and preview features GFM compatible. - Supports side preview and has customized editing bar with multiple tools. - Supplied with three themes : light, dimmed and dark. - Implements code syntax highlight through HighlightJS for about 40 most common languages. - No support for images upload, drag or paste, only trough URLs. - No support for emoji syntax, only through OS emoji shortcuts (e.g. «WIN + .»).', +* Configured to cover all **MD** syntax and preview features **GFM** compatible. +* Supports side preview and has customized editing bar with multiple tools. +* Supplied with three themes : `light`, `dimmed` and `dark`. +* Implements code syntax highlight through **Highlight.js** for about 40 most common languages. +* **`No support`** for images upload, drag or paste; images are **only** available through URLs. +* **`No support`** for emoji syntax; emojis input **only** through OS shortcuts (e.g. « **Windows + .** » on Windows or « **Control + Command + Space** » on Mac).', 'WysiwygMDEditor_SETTINGS_EASYMDE_THEME_SELECT' => 'Select the default theme for EasyMDE :', 'WysiwygMDEditor_SETTINGS_EASYMDE_THEME_LIGHT' => 'Light Theme', 'WysiwygMDEditor_SETTINGS_EASYMDE_THEME_DIMMED' => 'Dimmed Theme', 'WysiwygMDEditor_SETTINGS_EASYMDE_THEME_DARK' => 'Dark Theme', 'WysiwygMDEditor_SETTINGS_STACKEDIT_DESCR' => 'An online service based markdown editor and note taking tool. - Covers wide range of MD syntax variations but configured to comply with GFM. - Supports side preview, multiple tools, rich options and customizations. - Basic switch for light/dark theme, there are multiple colorful themes via options for each pane - editing or preview. - Selected preferences are remembered locally by the browser, on reopening the editor last view will be restored. - Supports code syntax highlight for a myriad of languages. - Support for images upload, drag and paste BUT BE AWARE those are using the local browser storage, not the Kanboard DB! - Fully supports emoji syntax and input through OS emoji shortcuts (e.g. «WIN + .»). - There are extra features like KaTeX math expressions, Mermaid UML diagrams and other extensions that are - supported by default BUT ARE NOT COMPATIBLE with the standard MD feature set that is supported by Kanboard!', +* Covers wide range of **MD** syntax variations but configured to comply with **GFM**. +* Supports side preview, multiple tools, rich options and customizations. +* Basic switch for `light` / `dark` theme, there are multiple colorful themes via options for each pane - editing and preview. +* Selected preferences are remembered locally by the browser, on reopening the editor last view will be restored. +* Supports code syntax highlight for a myriad of languages. +* Support for images upload, drag and paste **`BUT BE AWARE`** those are using the local browser storage, not the Kanboard DB! +* Fully supports emoji syntax and also input through OS emoji shortcuts (e.g. « **Windows + .** » on Windows or « **Control + Command + Space** » on Mac). +* There are extra features like **KaTeX** math expressions, **Mermaid** UML diagrams and other extensions that are +supported by default **`BUT ARE NOT COMPATIBLE`** with the standard **MD** feature set that is supported by Kanboard!', + // + // Template/config/settings/rendering + // 'WysiwygMDEditor_SETTINGS_RENDERING_OPTIONS' => 'Setup Rendering Options', - 'WysiwygMDEditor_SETTINGS_RENDERING_DESCR' => '(TODO)', + 'WysiwygMDEditor_SETTINGS_RENDERING_DESCR' => 'Choose whether to use custom rendering for markdown fields. +* Rendering feature is implemented entirely client side, it uses JavaScript and utilizes a specific editor visualization. +* All markdown fields on the page will be processed, including those that are dynamically created or changed. Loading the page might be a bit slow if there are many of them. +* If you have the **`MarkdownPlus`** plugin installed, then enabling this rendering feature will **`CONFLICT or OVERRIDE`** it\'s functionality, depending on the order in which the plugins are loaded !', + 'WysiwygMDEditor_SETTINGS_RENDERING_ENABLE_EASYMDE' => 'Enable markdown rendering with EasyMDE', + 'WysiwygMDEditor_SETTINGS_RENDERING_EASYMDE_DESCR' => 'Rendered markdown fields will look like the preview pane of the EasyMDE editor. +* The render theme can is configured independently of the selected theme for the EasyMDE editor. +* Additionally, the theme background can be forced to be transparent. +* And finally, the highlight code syntax can be changed or disabled (in the actual EasyMDE editor it is fixed to `Highlight.js`).', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_THEME_SELECT' => 'Select theme for markdown rendering :', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_TRANSPARENT_BACKGROUND_ENABLE' => 'Force transparent background', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_CODE_HIGHLIGHT_SELECT' => 'Select the highlight code syntax for markdown rendering :', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_CODE_HIGHLIGHT_NONE' => 'Do NOT use highlight code syntax', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_CODE_HIGHLIGHT_HLJS' => 'Use Highlight.js (included alongside EasyMDE)', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_CODE_HIGHLIGHT_HLCS_PLUGIN' => 'Use HighlightCodeSyntax plugin (only if installed !!!)', ); diff --git a/Locale/en_US/translations.php b/Locale/en_US/translations.php index a3a0f78..54a6237 100644 --- a/Locale/en_US/translations.php +++ b/Locale/en_US/translations.php @@ -4,9 +4,10 @@ // // GENERAL // - 'WysiwygMDEditor_PLUGIN_DESCRIPTION' => 'Integrates external MD editors into Kanboard in order to conveniently edit/preview - (and eventually render) the markdown textareas in the Kanboard interface. - Each editor may allow for different customizations of functionality, MD features, and UI themes.', + 'WysiwygMDEditor_PLUGIN_DESCRIPTION' => 'Integrates external MD editors into Kanboard in order to conveniently edit and preview + the markdown textareas, as well as render the markdown fields in the Kanboard interface. + Each editor may allow for different customizations of functionality, MD features, and UI themes. + Rendering can parametrize theme, code highlight, and background transparency.', // // Template/config/settings // @@ -15,33 +16,53 @@ 'WysiwygMDEditor_LINK_SETTINGS_PREVIEW' => 'Preview with Saved Settings', 'WysiwygMDEditor_LINK_SETTINGS_CHANGE' => 'Change Settings', 'WysiwygMDEditor_CONTAINER_PREVIEW' => 'Preview Container', + // + // Template/config/settings/editing + // 'WysiwygMDEditor_SETTINGS_EDITING_OPTIONS' => 'Setup Editing Options', 'WysiwygMDEditor_SETTINGS_EDITING_DESCR' => 'Choose which MD editors to use. - Enabling an editor will inject a corresponding button in the editing toolbar of each markdown textarea. - All editors open independently of each other in a fullscreen overlay mode so that they don\'t mess with Kanboard UI. - The actual UI of the editors is in English, no translations are available for them.', +* Enabling an editor will inject a corresponding button in the editing toolbar of each markdown textarea. +* All editors open independently of each other in a fullscreen overlay mode so that they don\'t mess with Kanboard UI. +* The actual UI of the editors is in **English**, **`no translations`** are available for them.', 'WysiwygMDEditor_SETTINGS_EDITING_ENABLE_BUTTON' => 'Enable a button for', 'WysiwygMDEditor_SETTINGS_EASYMDE_DESCR' => 'A fully offline drop-in JavaScript markdown editor. - Configured to cover all MD syntax and preview features GFM compatible. - Supports side preview and has customized editing bar with multiple tools. - Supplied with three themes : light, dimmed and dark. - Implements code syntax highlight through HighlightJS for about 40 most common languages. - No support for images upload, drag or paste, only trough URLs. - No support for emoji syntax, only through OS emoji shortcuts (e.g. «WIN + .»).', +* Configured to cover all **MD** syntax and preview features **GFM** compatible. +* Supports side preview and has customized editing bar with multiple tools. +* Supplied with three themes : `light`, `dimmed` and `dark`. +* Implements code syntax highlight through **Highlight.js** for about 40 most common languages. +* **`No support`** for images upload, drag or paste; images are **only** available through URLs. +* **`No support`** for emoji syntax; emojis input **only** through OS shortcuts (e.g. « **Windows + .** » on Windows or « **Control + Command + Space** » on Mac).', 'WysiwygMDEditor_SETTINGS_EASYMDE_THEME_SELECT' => 'Select the default theme for EasyMDE :', 'WysiwygMDEditor_SETTINGS_EASYMDE_THEME_LIGHT' => 'Light Theme', 'WysiwygMDEditor_SETTINGS_EASYMDE_THEME_DIMMED' => 'Dimmed Theme', 'WysiwygMDEditor_SETTINGS_EASYMDE_THEME_DARK' => 'Dark Theme', 'WysiwygMDEditor_SETTINGS_STACKEDIT_DESCR' => 'An online service based markdown editor and note taking tool. - Covers wide range of MD syntax variations but configured to comply with GFM. - Supports side preview, multiple tools, rich options and customizations. - Basic switch for light/dark theme, there are multiple colorful themes via options for each pane - editing or preview. - Selected preferences are remembered locally by the browser, on reopening the editor last view will be restored. - Supports code syntax highlight for a myriad of languages. - Support for images upload, drag and paste BUT BE AWARE those are using the local browser storage, not the Kanboard DB! - Fully supports emoji syntax and input through OS emoji shortcuts (e.g. «WIN + .»). - There are extra features like KaTeX math expressions, Mermaid UML diagrams and other extensions that are - supported by default BUT ARE NOT COMPATIBLE with the standard MD feature set that is supported by Kanboard!', +* Covers wide range of **MD** syntax variations but configured to comply with **GFM**. +* Supports side preview, multiple tools, rich options and customizations. +* Basic switch for `light` / `dark` theme, there are multiple colorful themes via options for each pane - editing and preview. +* Selected preferences are remembered locally by the browser, on reopening the editor last view will be restored. +* Supports code syntax highlight for a myriad of languages. +* Support for images upload, drag and paste **`BUT BE AWARE`** those are using the local browser storage, not the Kanboard DB! +* Fully supports emoji syntax and also input through OS emoji shortcuts (e.g. « **Windows + .** » on Windows or « **Control + Command + Space** » on Mac). +* There are extra features like **KaTeX** math expressions, **Mermaid** UML diagrams and other extensions that are +supported by default **`BUT ARE NOT COMPATIBLE`** with the standard **MD** feature set that is supported by Kanboard!', + // + // Template/config/settings/rendering + // 'WysiwygMDEditor_SETTINGS_RENDERING_OPTIONS' => 'Setup Rendering Options', - 'WysiwygMDEditor_SETTINGS_RENDERING_DESCR' => '(TODO)', + 'WysiwygMDEditor_SETTINGS_RENDERING_DESCR' => 'Choose whether to use custom rendering for markdown fields. +* Rendering feature is implemented entirely client side, it uses JavaScript and utilizes a specific editor visualization. +* All markdown fields on the page will be processed, including those that are dynamically created or changed. Loading the page might be a bit slow if there are many of them. +* If you have the **`MarkdownPlus`** plugin installed, then enabling this rendering feature will **`CONFLICT or OVERRIDE`** it\'s functionality, depending on the order in which the plugins are loaded !', + 'WysiwygMDEditor_SETTINGS_RENDERING_ENABLE_EASYMDE' => 'Enable markdown rendering with EasyMDE', + 'WysiwygMDEditor_SETTINGS_RENDERING_EASYMDE_DESCR' => 'Rendered markdown fields will look like the preview pane of the EasyMDE editor. +* The render theme can is configured independently of the selected theme for the EasyMDE editor. +* Additionally, the theme background can be forced to be transparent. +* And finally, the highlight code syntax can be changed or disabled (in the actual EasyMDE editor it is fixed to `Highlight.js`).', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_THEME_SELECT' => 'Select theme for markdown rendering :', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_TRANSPARENT_BACKGROUND_ENABLE' => 'Force transparent background', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_CODE_HIGHLIGHT_SELECT' => 'Select the highlight code syntax for markdown rendering :', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_CODE_HIGHLIGHT_NONE' => 'Do NOT use highlight code syntax', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_CODE_HIGHLIGHT_HLJS' => 'Use Highlight.js (included alongside EasyMDE)', + 'WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_CODE_HIGHLIGHT_HLCS_PLUGIN' => 'Use HighlightCodeSyntax plugin (only if installed !!!)', ); diff --git a/Template/config/settings.php b/Template/config/settings.php index 4c234fe..1a91385 100644 --- a/Template/config/settings.php +++ b/Template/config/settings.php @@ -92,6 +92,9 @@ 'dark' => t('WysiwygMDEditor_SETTINGS_EASYMDE_THEME_DARK'), ), $values) ?> +
form->checkbox('WysiwygMDEditor_easymde_render_transparent_background', t('WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_TRANSPARENT_BACKGROUND_ENABLE'), + 1, isset($values['WysiwygMDEditor_easymde_render_transparent_background']) ? $values['WysiwygMDEditor_easymde_render_transparent_background'] == 1 : 0) ?> + t('WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_CODE_HIGHLIGHT_HLJS'), 2 => t('WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_CODE_HIGHLIGHT_HLCS_PLUGIN'), ), $values) ?> - -
form->checkbox('WysiwygMDEditor_easymde_render_transparent_background', t('WysiwygMDEditor_SETTINGS_EASYMDE_RENDER_TRANSPARENT_BACKGROUND_ENABLE'), - 1, isset($values['WysiwygMDEditor_easymde_render_transparent_background']) ? $values['WysiwygMDEditor_easymde_render_transparent_background'] == 1 : 0) ?> diff --git a/Template/render/easymde.php b/Template/render/easymde.php index bec0d3d..c82a513 100644 --- a/Template/render/easymde.php +++ b/Template/render/easymde.php @@ -18,7 +18,7 @@ print ''; if ($_GET['renderCodeHighlight'] == 1) { - // Highlight JS + // Highlight.js print ''; } if ($_GET['renderCodeHighlight'] == 2) {