improve frontend of emacs, ckeditor, tinymce, nicedit, meta and env functions

Improves in emacs:
- use htmx to send content to the controller
- show txt and formatted_txt content in the second panel
- show two tabs if "tabs" winix parameter is used
- add an option to show either one or two panels
- correctly resize the editor window (F11) when two panels are shown

Improves in ckeditor:
- use htmx to send content to the controller
- do not check automatically for ckeditor update

Improves in tinymce/nicedit/meta/env:
- use htmx to send content to the controller

while here:
- change PascalCase to snake_case in meta/env controllers
- update CodeMirror editor to 5.65.16
- udpate Showdown (markdown to html converter) to 2.1.0
This commit is contained in:
2024-07-20 15:13:27 +02:00
parent 89b37db48e
commit e63838faeb
27 changed files with 1075 additions and 496 deletions

View File

@@ -1,7 +1,18 @@
<div class="winix">
[if request.is_item]<h1>{edit}</h1>[else]<h1>{add}</h1>[end]
[frame "tinymce"]
<h1 id="winix_header_id" [if winix_frame_is "tinymce"]hx-swap-oob="true"[end]>
[if request.is_item]
{edit}
[else]
{add}
[end]
</h1>
[end]
[# tinymce needs javascript to work properly so we assume that the save method]
[# will be made only through ajax (htmx)]
<form class="uk-form-stacked">
[if one [mount_type_is "cms"] [any [mount_type_is "thread"] [thread_mount_arg_is "subject"]]]
@@ -15,7 +26,9 @@
<div class="uk-margin">
<label class="uk-form-label" for="winix_url_id">{suggested_url}</label>
<div class="uk-form-controls">
<input class="uk-input" id="winix_url_id" type="text" name="url" value="[item.url]">
[frame "tinymce"]
<input class="uk-input" id="winix_url_id" type="text" name="url" value="[item.url]" [if winix_frame_is "tinymce"]hx-swap-oob="true"[end]>
[end]
</div>
</div>
[end]
@@ -26,7 +39,8 @@
[if mount_type_is "ticket"]<label class="uk-form-label" for="winix_content_id">{form_emacs_content_ticket}</label>[end]
<div class="uk-form-controls">
<div style="border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; padding: 0.2em 0 0.2em 0; margin: 1em 0 1em 0;" id="winix-editor-content" data-winix-post-name="itemcontent">[item.content.print_content]</div>
<div style="border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; padding: 0.2em 0 0.2em 0; margin: 1em 0 1em 0;" id="winix-editor-content">[item.content.print_content]</div>
<input type="hidden" id="winix_content_id" name="itemcontent" value="[item.content.content_raw]">
</div>
</div>
@@ -34,54 +48,50 @@
<input id="contenttype" type="hidden" name="contenttype" value="2">
</div>
[if not user_logged]
<div class="uk-margin">
<label class="uk-form-label" for="winix_nick_id">{nick}</label>
<div class="uk-form-controls">
<input class="uk-input" id="winix_nick_id" type="text" name="guestname" value="[item.content.guest_name]">
</div>
</div>
<div class="uk-margin winix-tinymce-status">
[frame "tinymce"]
<div class="uk-margin">
<label class="uk-form-label" for="winix_rebus_id">{rebus_how_is_it} [rebus_question]?</label>
<div class="uk-form-controls">
<input class="uk-input" id="winix_rebus_id" type="text" name="rebus">
</div>
</div>
[if not user_logged]
<div class="uk-margin">
<label class="uk-form-label" for="winix_nick_id">{nick}</label>
<div class="uk-form-controls">
<input class="uk-input" id="winix_nick_id" type="text" name="guestname" value="[item.content.guest_name]">
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="winix_rebus_id">{rebus_how_is_it} [rebus_question]?</label>
<div class="uk-form-controls">
<input class="uk-input" id="winix_rebus_id" type="text" name="rebus">
</div>
</div>
[include "antispam.html"]
[end]
[if winix_function_param_is "postredirect"]
<input type="hidden" name="postredirect" value="[winix_function_param_value "postredirect"]">
[end]
[include "antispam.html"]
[end]
[if winix_function_param_is "postredirect"]
<input type="hidden" name="postredirect" value="[winix_function_param_value "postredirect"]">
[end]
<div class="uk-margin">
<div class="uk-form-controls uk-inline">
[# IMPROVEME put some kind of a status msg here]
<button class="uk-button uk-button-primary winix_update_button"
data-winix-function-path="[doc_base_url][dir][if request.is_item][item.url]/[end]tinymce"
data-winix-content-tinymce-instances="winix-editor-content"
data-winix-content-inputs="winix_url_id,winix_title_id,contenttype"
data-winix-progressbar-id="winix-editor-progressbar"
data-winix-messages-status-success-id="winix-editor-messages-status-success"
data-winix-messages-status-error-id="winix-editor-messages-status-error"
<div class="uk-margin-medium-top">
<button
class="uk-button uk-button-primary uk-width-1-1 uk-width-1-2@s uk-width-1-3@m wx-button-spinner"
type="button"
hx-on:click="winix_update_from_tinymce(this, '[doc_base_url][dir][if request.is_item][item.url]/[end]tinymce/frame:tinymce', '.winix-tinymce-status')"
>
{tinymce_update_button}
</button>
<div id="winix-editor-progressbar" class="uk-invisible uk-position-center-right-out uk-margin-small-left">
<img src="[doc_base_url_common]/progressbars/progressbar_fading_lines_16x16.gif" alt="{tinymce_update_progressbar_img_alt}">
<span class="wx-button-spinner-text">
[if request.is_item]{change}[else]{add}[end]
</span>
<div class="wx-button-spinner-spinner">
<div uk-spinner="ratio: 0.5"></div>
</div>
</button>
</div>
</div>
<div id="winix-editor-messages-status-success" class="winix-editor-messages-status-success">
</div>
<div id="winix-editor-messages-status-error" class="winix-editor-messages-status-error">
</div>
[end]
</div>