add a rich text editor example

Author: lovasoa

examples/rich-text-editor/README.md

@@ -0,0 +1,4 @@
+# SQLPage rich text editor
+
+This demo shows how to build an application where users can 
+input and safely store rich text (with titles, bold, italics, and images).

examples/rich-text-editor/create_blog_post.sql

@@ -0,0 +1,5 @@
+insert into blog_posts (title, content)
+values (:title, :content)
+returning 
+  'redirect' as component,
+  '/' as link;

examples/rich-text-editor/index.sql

@@ -0,0 +1,19 @@
+select 'shell' as component,
+    'Rich text editor' as title,
+    '/rich_text_editor.js' as javascript_module;
+
+
+select 'form' as component,
+    'Create a new blog post' as title,
+    'create_blog_post' as action,
+    'Create' as validate;
+
+select 'title' as name, 'Blog post title' as label;
+select 'content' as name, 'textarea' as type, 'Your blog post here' as label;
+
+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/post.sql

@@ -0,0 +1,9 @@
+select 'shell' as component,
+    title
+from blog_posts
+where id = $id;
+
+select 'text' as component,
+    content as contents_md
+from blog_posts
+where id = $id;

examples/rich-text-editor/rich_text_editor.js

@@ -0,0 +1,297 @@
+import Quill from "https://esm.sh/[email protected]";
+import { toMarkdown as mdastUtilToMarkdown } from "https://esm.sh/[email protected]";
+
+/**
+ * Converts Quill Delta object to a Markdown string using mdast.
+ * @param {object} delta - Quill Delta object (https://quilljs.com/docs/delta/).
+ * @returns {string} - Markdown representation.
+ */
+function deltaToMarkdown(delta) {
+  try {
+    console.log("delta", delta);
+    const mdastTree = deltaToMdast(delta); // Convert Delta to MDAST
+    console.log("mdastTree", mdastTree);
+    const options = {
+      bullet: "*",
+      listItemIndent: "one",
+    };
+    const markdown = mdastUtilToMarkdown(mdastTree, options); // Convert MDAST to Markdown
+    console.log("markdown", markdown);
+    return markdown;
+  } catch (error) {
+    console.error("Error during Delta to Markdown conversion:", error);
+    try {
+      return delta.ops
+        .map((op) => (typeof op.insert === "string" ? op.insert : ""))
+        .join("")
+        .trim();
+    } catch (e) {
+      return "";
+    }
+  }
+}
+
+/**
+ * Creates a div to replace the textarea and prepares it for Quill.
+ * @param {HTMLTextAreaElement} textarea - The original textarea.
+ * @returns {HTMLDivElement} - The div element created for the Quill editor.
+ */
+function createAndReplaceTextarea(textarea) {
+  const editorDiv = document.createElement("div");
+  editorDiv.className = "mb-3";
+  editorDiv.style.height = "250px";
+
+  const label = textarea.closest("label");
+  if (!label) {
+    textarea.parentNode.insertBefore(editorDiv, textarea);
+  } else {
+    label.parentNode.insertBefore(editorDiv, label.nextSibling);
+  }
+  textarea.style.display = "none";
+  return editorDiv;
+}
+
+/**
+ * Returns the toolbar options array configured for Markdown compatibility.
+ * @returns {Array} - Quill toolbar options.
+ */
+function getMarkdownToolbarOptions() {
+  return [
+    [{ header: [1, 2, 3, false] }],
+    ["bold", "italic"],
+    ["link", "image", "blockquote"],
+    [{ list: "ordered" }, { list: "bullet" }],
+    ["clean"],
+  ];
+}
+
+/**
+ * Initializes a Quill editor instance on a given div.
+ * @param {HTMLDivElement} editorDiv - The div element for the editor.
+ * @param {Array} toolbarOptions - The toolbar configuration.
+ * @param {string} initialValue - The initial content for the editor.
+ * @returns {Quill} - The initialized Quill instance.
+ */
+function initializeQuillEditor(editorDiv, toolbarOptions, initialValue) {
+  const quill = new Quill(editorDiv, {
+    theme: "snow",
+    modules: {
+      toolbar: toolbarOptions,
+    },
+  });
+  if (initialValue) {
+    quill.setText(initialValue);
+  }
+  return quill;
+}
+
+/**
+ * Attaches a submit event listener to the form to update the hidden textarea.
+ * @param {HTMLFormElement} form - The form containing the editor.
+ * @param {HTMLTextAreaElement} textarea - The original (hidden) textarea.
+ * @param {Quill} quill - The Quill editor instance.
+ */
+function updateTextareaOnSubmit(form, textarea, quill) {
+  if (!form) {
+    console.warn(
+      "Textarea not inside a form, submission handling skipped for:",
+      textarea.name || textarea.id,
+    );
+    return;
+  }
+  form.addEventListener("submit", (evt) => {
+    const delta = quill.getContents();
+    const markdownContent = deltaToMarkdown(delta);
+    textarea.value = markdownContent;
+    console.log(
+      `Converted content for ${textarea.name || "textarea"} to Markdown and updated value.`,
+    );
+  });
+}
+
+const initializeEditors = () => {
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = "https://esm.sh/[email protected]/dist/quill.snow.css";
+  document.head.appendChild(link);
+
+  const textareas = document.getElementsByTagName("textarea");
+  if (textareas.length === 0) {
+    console.log("No textareas found to initialize Quill on.");
+    return;
+  }
+
+  const markdownToolbarOptions = getMarkdownToolbarOptions();
+  let initializedCount = 0;
+
+  for (const textarea of textareas) {
+    if (textarea.dataset.quillInitialized === "true") {
+      continue;
+    }
+
+    try {
+      const initialValue = textarea.value;
+      const form = textarea.closest("form");
+      const editorDiv = createAndReplaceTextarea(textarea);
+      const quill = initializeQuillEditor(
+        editorDiv,
+        markdownToolbarOptions,
+        initialValue,
+      );
+      updateTextareaOnSubmit(form, textarea, quill);
+      textarea.dataset.quillInitialized = "true";
+      initializedCount++;
+    } catch (error) {
+      console.error(
+        "Failed to initialize Quill for textarea:",
+        textarea,
+        error,
+      );
+      textarea.style.display = "";
+      const errorMsg = document.createElement("p");
+      errorMsg.textContent = "Failed to load rich text editor.";
+      errorMsg.style.color = "red";
+      textarea.parentNode.insertBefore(errorMsg, textarea.nextSibling);
+    }
+  }
+
+  if (initializedCount > 0) {
+    console.log(
+      `Successfully initialized Quill for ${initializedCount} textareas.`,
+    );
+  } else if (textareas.length > 0) {
+    console.log(
+      "Found 'rich-text-editor' textareas, but none were newly initialized (already initialized or failed).",
+    );
+  }
+};
+
+function deltaToMdast(delta) {
+  const mdast = {
+    type: "root",
+    children: [],
+  };
+
+  let currentParagraph = null;
+  let textBuffer = "";
+
+  for (const op of delta.ops) {
+    if (op.delete) {
+      continue;
+    }
+
+    if (op.retain) {
+      continue;
+    }
+
+    if (typeof op.insert === "string") {
+      const text = op.insert;
+      const attributes = op.attributes || {};
+
+      if (text === "\n") {
+        if (currentParagraph) {
+          if (attributes.header) {
+            const lines = textBuffer.split("\n");
+            if (lines.length > 1) {
+              const lastLine = lines.pop();
+              const previousLines = lines.join("\n");
+
+              if (previousLines) {
+                const paragraph = {
+                  type: "paragraph",
+                  children: [{ type: "text", value: previousLines }],
+                };
+                mdast.children.push(paragraph);
+              }
+
+              const heading = {
+                type: "heading",
+                depth: attributes.header,
+                children: [{ type: "text", value: lastLine }],
+              };
+              mdast.children.push(heading);
+            } else {
+              const heading = {
+                type: "heading",
+                depth: attributes.header,
+                children: [{ type: "text", value: textBuffer }],
+              };
+              mdast.children.push(heading);
+            }
+            currentParagraph = null;
+            textBuffer = "";
+          } else {
+            mdast.children.push(currentParagraph);
+            currentParagraph = null;
+          }
+        }
+        continue;
+      }
+
+      textBuffer += text;
+      let node = {
+        type: "text",
+        value: text,
+      };
+
+      if (attributes.bold) {
+        node = {
+          type: "strong",
+          children: [node],
+        };
+      }
+
+      if (attributes.italic) {
+        node = {
+          type: "emphasis",
+          children: [node],
+        };
+      }
+
+      if (attributes.link) {
+        node = {
+          type: "link",
+          url: attributes.link,
+          children: [node],
+        };
+      }
+
+      if (!currentParagraph) {
+        currentParagraph = {
+          type: "paragraph",
+          children: [],
+        };
+      }
+
+      currentParagraph.children.push(node);
+    } else if (typeof op.insert === "object") {
+      if (op.insert.image) {
+        const imageNode = {
+          type: "image",
+          url: op.insert.image,
+          title: op.attributes?.alt || "",
+          alt: op.attributes?.alt || "",
+        };
+
+        if (!currentParagraph) {
+          currentParagraph = {
+            type: "paragraph",
+            children: [],
+          };
+        }
+
+        currentParagraph.children.push(imageNode);
+        textBuffer = "";
+      }
+    }
+  }
+
+  if (currentParagraph) {
+    mdast.children.push(currentParagraph);
+  }
+
+  return mdast;
+}
+
+// --- Main Script Execution ---
+document.addEventListener("DOMContentLoaded", initializeEditors);

examples/rich-text-editor/sqlpage/migrations/01_blog_posts.sql

@@ -0,0 +1,5 @@
+create table blog_posts (
+    id integer primary key autoincrement,
+    title text not null,
+    content text not null
+);