improve rich text edition

#913 (reply in thread)

Author: lovasoa

examples/rich-text-editor/edit.sql

@@ -0,0 +1,35 @@
+insert or replace into blog_posts (id, title, content) 
+select $id, :title, :content
+where $id is not null and :title is not null and :content is not null
+returning 'redirect' as component, 'post?id=' || $id as link;
+
+select 'shell' as component,
+    'Edit blog post' as title,
+    '/rich_text_editor.js' as javascript_module;
+
+
+select 'form' as component, 'Update' as validate;
+
+with post as (
+    select title, content
+    from blog_posts
+    where id = $id
+),
+fields as (
+    select json_object(
+        'name', 'title', 
+        'label', 'Blog post title',
+        'value', title
+    ) as props
+    from post
+    union all
+    select json_object(
+        'name', 'content', 
+        'type', 'textarea', 
+        'label', 'Your blog post here', 
+        'value', content, 
+        'required', true
+    )
+    from post
+)
+select 'dynamic' as component, json_group_array(props) as properties from fields;

examples/rich-text-editor/post.sql

@@ -8,3 +8,9 @@ select 'text' as component,
     content as contents_md
 from blog_posts
 where id = $id;
+
+select 'list' as component;
+select
+    'Edit' as title,
+    'pencil' as icon,
+    'edit?id=' || $id as link;

examples/rich-text-editor/rich_text_editor.js

@@ -214,7 +214,12 @@ function traverseMdastNode(node, delta, attributes = {}) {
 
     case "listItem":
       for (const child of node.children || []) {
-        traverseMdastNode(child, delta, attributes);
+        traverseMdastNode(child, delta, {});
+      }
+      {
+        const lastOp = delta.ops[delta.ops.length - 1];
+        if (lastOp && lastOp.insert === "\n") lastOp.attributes = attributes;
+        else delta.ops.push({ insert: "\n", attributes });
       }
       break;
 
@@ -269,6 +274,7 @@ function updateTextareaOnSubmit(form, textarea, quill) {
     const delta = quill.getContents();
     const markdownContent = deltaToMarkdown(delta);
     textarea.value = markdownContent;
+    console.log(`${textarea.name}:\n${markdownContent}\ntransformed from delta:\n${JSON.stringify(delta, null, 2)}`);
     if (textarea.required && !markdownContent) {
       textarea.setCustomValidity(`${textarea.name} cannot be empty`);
       quill.once("text-change", (delta) => {
@@ -421,8 +427,9 @@ function deltaToMdast(delta) {
           textBuffer = line;
         }
 
-        // Process line break with empty attributes (regular paragraph break)
-        processLineBreak(mdast, currentParagraph, {}, textBuffer, currentList);
+        // Process line break
+        currentList = processLineBreak(mdast, currentParagraph, attributes, textBuffer, currentList);
+
         currentParagraph = null;
         textBuffer = "";
       }