diff --git a/CHANGELOG.md b/CHANGELOG.md index ad99677c..eef978f9 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/examples/rich-text-editor/index.sql b/examples/rich-text-editor/index.sql index 31181c2c..1ca5dafa 100644 --- a/examples/rich-text-editor/index.sql +++ b/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; - diff --git a/examples/rich-text-editor/rich_text_editor.js b/examples/rich-text-editor/rich_text_editor.js index d2536c65..cb9184f0 100644 --- a/examples/rich-text-editor/rich_text_editor.js +++ b/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";