handle newlines, prevent duplication in lists and blockquotes, and improve line break processing in rich text editor

Author: lovasoa

examples/rich-text-editor/rich_text_editor.js

@@ -255,23 +255,52 @@ function deltaToMdast(delta) {
     const text = op.insert;
     const attributes = op.attributes || {};
 
+    // Handle newlines within text content
+    if (text.includes("\n") && text !== "\n") {
+      const lines = text.split("\n");
+      
+      // Process all lines except the last one as complete lines
+      for (let i = 0; i < lines.length - 1; i++) {
+        const line = lines[i];
+        if (line.length > 0) {
+          // Add text to current paragraph
+          if (!currentParagraph) {
+            currentParagraph = createParagraphNode();
+          }
+          const nodes = createTextNodes(line, attributes);
+          currentParagraph.children.push(...nodes);
+          textBuffer = line;
+        }
+        
+        // Process line break with empty attributes (regular paragraph break)
+        processLineBreak(mdast, currentParagraph, {}, textBuffer, currentList);
+        currentParagraph = null;
+        textBuffer = "";
+      }
+      
+      // Add the last line to the buffer without processing the line break yet
+      const lastLine = lines[lines.length - 1];
+      if (lastLine.length > 0) {
+        if (!currentParagraph) {
+          currentParagraph = createParagraphNode();
+        }
+        const nodes = createTextNodes(lastLine, attributes);
+        currentParagraph.children.push(...nodes);
+        textBuffer = lastLine;
+      }
+      
+      continue;
+    }
+
     if (text === "\n") {
-      processLineBreak(
+      currentList = processLineBreak(
         mdast,
         currentParagraph,
         attributes,
         textBuffer,
-        currentList,
+        currentList
       );
-      if (
-        !attributes.list &&
-        !attributes.blockquote &&
-        !attributes["code-block"] &&
-        !attributes.header
-      ) {
-        currentList = null;
-      }
-
+      
       // Reset paragraph and buffer after processing line break
       currentParagraph = null;
       textBuffer = "";
@@ -391,7 +420,7 @@ function wrapNodesWith(children, type) {
  * @param {Object} attributes - The attributes for the line.
  * @param {string} textBuffer - The text buffer for the current line.
  * @param {MdastNode|null} currentList - The current list being built.
- * @returns {void}
+ * @returns {MdastNode|null} - The updated current list.
  */
 function processLineBreak(
   mdast,
@@ -401,39 +430,58 @@ function processLineBreak(
   currentList,
 ) {
   if (!currentParagraph) {
-    handleEmptyLineWithAttributes(mdast, attributes, currentList);
-    return;
+    return handleEmptyLineWithAttributes(mdast, attributes, currentList);
   }
 
   if (attributes.header) {
     processHeaderLineBreak(mdast, textBuffer, attributes);
-  } else if (attributes["code-block"]) {
+    return null;
+  } 
+  
+  if (attributes["code-block"]) {
     processCodeBlockLineBreak(mdast, textBuffer, attributes);
-  } else if (attributes.list) {
-    processListLineBreak(mdast, currentParagraph, attributes, currentList);
-  } else if (attributes.blockquote) {
+    return currentList;
+  } 
+  
+  if (attributes.list) {
+    return processListLineBreak(mdast, currentParagraph, attributes, currentList);
+  } 
+  
+  if (attributes.blockquote) {
     processBlockquoteLineBreak(mdast, currentParagraph);
-  } else {
-    mdast.children.push(currentParagraph);
-  }
+    return currentList;
+  } 
+  
+  // Default case: regular paragraph
+  mdast.children.push(currentParagraph);
+  return null;
 }
 
 /**
  * Handles an empty line with special attributes.
  * @param {MdastNode} mdast - The root MDAST node.
  * @param {Object} attributes - The attributes for the line.
  * @param {MdastNode|null} currentList - The current list being built.
- * @returns {void}
+ * @returns {MdastNode|null} - The updated current list.
  */
 function handleEmptyLineWithAttributes(mdast, attributes, currentList) {
   if (attributes["code-block"]) {
     mdast.children.push(createEmptyCodeBlock(attributes));
-  } else if (attributes.list) {
+    return currentList;
+  } 
+  
+  if (attributes.list) {
     const list = ensureList(mdast, attributes, currentList);
     list.children.push(createEmptyListItem());
-  } else if (attributes.blockquote) {
+    return list;
+  } 
+  
+  if (attributes.blockquote) {
     mdast.children.push(createEmptyBlockquote());
+    return currentList;
   }
+  
+  return null;
 }
 
 /**
@@ -518,11 +566,22 @@ function processHeaderLineBreak(mdast, textBuffer, attributes) {
 function processCodeBlockLineBreak(mdast, textBuffer, attributes) {
   const lang =
     attributes["code-block"] === "plain" ? null : attributes["code-block"];
-  // Two code blocks in a row are merged into one
-  const lastChild = mdast.children[mdast.children.length - 1];
-  if (lastChild && lastChild.type === "code" && lastChild.lang === lang) {
-    lastChild.value += `\n${textBuffer}`;
+  
+  // Find the last code block with the same language
+  let lastCodeBlock = null;
+  for (let i = mdast.children.length - 1; i >= 0; i--) {
+    const child = mdast.children[i];
+    if (child.type === "code" && child.lang === lang) {
+      lastCodeBlock = child;
+      break;
+    }
+  }
+
+  if (lastCodeBlock) {
+    // Append to existing code block with same language
+    lastCodeBlock.value += `\n${textBuffer}`;
   } else {
+    // Create new code block
     mdast.children.push({
       type: "code",
       value: textBuffer,
@@ -539,16 +598,28 @@ function processCodeBlockLineBreak(mdast, textBuffer, attributes) {
  * @returns {MdastNode} - The list node.
  */
 function ensureList(mdast, attributes, currentList) {
-  if (!currentList || currentList.ordered !== (attributes.list === "ordered")) {
+  const isOrderedList = attributes.list === "ordered";
+  
+  // If there's no current list or the list type doesn't match
+  if (!currentList || currentList.ordered !== isOrderedList) {
+    // Check if the last child is a list of the correct type
+    const lastChild = mdast.children[mdast.children.length - 1];
+    if (lastChild && lastChild.type === "list" && lastChild.ordered === isOrderedList) {
+      // Use the last list if it matches the type
+      return lastChild;
+    }
+    
+    // Create a new list
     const newList = {
       type: "list",
-      ordered: attributes.list === "ordered",
+      ordered: isOrderedList,
       spread: false,
       children: [],
     };
     mdast.children.push(newList);
     return newList;
   }
+  
   return currentList;
 }
 
@@ -558,7 +629,7 @@ function ensureList(mdast, attributes, currentList) {
  * @param {MdastNode} currentParagraph - The current paragraph being built.
  * @param {Object} attributes - The attributes for the line.
  * @param {MdastNode|null} currentList - The current list being built.
- * @returns {void}
+ * @returns {MdastNode} - The updated list node.
  */
 function processListLineBreak(
   mdast,
@@ -568,13 +639,24 @@ function processListLineBreak(
 ) {
   const list = ensureList(mdast, attributes, currentList);
 
-  const listItem = {
-    type: "listItem",
-    spread: false,
-    children: [currentParagraph],
-  };
-
-  list.children.push(listItem);
+  // Check if this list item already exists to avoid duplication
+  const paragraphContent = JSON.stringify(currentParagraph.children);
+  const isDuplicate = list.children.some(
+    item => item.children?.length === 1 &&
+    JSON.stringify(item.children[0].children) === paragraphContent
+  );
+  
+  if (!isDuplicate) {
+    const listItem = {
+      type: "listItem",
+      spread: false,
+      children: [currentParagraph],
+    };
+    
+    list.children.push(listItem);
+  }
+  
+  return list;
 }
 
 /**
@@ -584,10 +666,20 @@ function processListLineBreak(
  * @returns {void}
  */
 function processBlockquoteLineBreak(mdast, currentParagraph) {
-  mdast.children.push({
-    type: "blockquote",
-    children: [currentParagraph],
-  });
+  // Look for an existing blockquote with identical content to avoid duplication
+  const paragraphContent = JSON.stringify(currentParagraph.children);
+  const existingBlockquote = mdast.children.find(
+    child => child.type === "blockquote" && 
+    child.children?.length === 1 &&
+    JSON.stringify(child.children[0].children) === paragraphContent
+  );
+  
+  if (!existingBlockquote) {
+    mdast.children.push({
+      type: "blockquote",
+      children: [currentParagraph],
+    });
+  }
 }
 
 // Main execution