Rich text editor: readonly mode

#913 (reply in thread)

Author: lovasoa

CHANGELOG.md

@@ -8,7 +8,8 @@
  - When an user requests a page that does not exist (and the site owner did not provide a custom 404.sql file), we now serve a nice visual 404 web page instead of the ugly textual message and the verbose log messages we used to have.
    - ![screenshot 404](https://github.com/user-attachments/assets/02525f9e-91ec-4657-a70f-1b7990cbe25f)
    - still returns plain text 404 for non-HTML requests
-
+ - Rich text editor: implement a readonly mode, activated when the field is not editable
+ - 
 
 ## v0.35.1
  - improve color palette for charts

examples/rich-text-editor/index.sql

@@ -9,11 +9,10 @@ select 'form' as component,
     'Create' as validate;
 
 select 'title' as name, 'Blog post title' as label, 'My new post' as value;
-select 'content' as name, 'textarea' as type, 'Your blog post here' as label, 'Your blog post here' as value, true as required;
+select 'content' as name, 'textarea' as type, 'Your blog post here' as label, 'Your blog post here' as value, true as required, $disabled is not null as disabled;
 
 select 'list' as component,
     'Blog posts' as title;
 
 select title, sqlpage.link('post', json_object('id', id)) as link
 from blog_posts;
-

examples/rich-text-editor/rich_text_editor.js

@@ -88,12 +88,13 @@ function getMarkdownToolbarOptions() {
  * @param {string} initialValue - The initial content for the editor.
  * @returns {Quill} - The initialized Quill instance.
  */
-function initializeQuillEditor(editorDiv, toolbarOptions, initialValue) {
+function initializeQuillEditor(editorDiv, toolbarOptions, initialValue, readOnly) {
   const quill = new Quill(editorDiv, {
     theme: "snow",
     modules: {
       toolbar: toolbarOptions,
     },
+    readOnly: readOnly,
     formats: [
       "bold",
       "italic",
@@ -361,12 +362,14 @@ function setupSingleEditor(textarea, toolbarOptions) {
 
   try {
     const initialValue = textarea.value;
+    const readOnly = textarea.readOnly || textarea.disabled;
     const form = textarea.closest("form");
     const editorDiv = createAndReplaceTextarea(textarea);
     const quill = initializeQuillEditor(
       editorDiv,
       toolbarOptions,
       initialValue,
+      readOnly,
     );
     updateTextareaOnSubmit(form, textarea, quill);
     textarea.dataset.quillInitialized = "true";