handle inserting multiple nodes correctly

idyll-lang · Feb 9, 2021 · adb1c2b · adb1c2b
1 parent 27d492e
commit adb1c2b
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 26 deletions.
diff --git a/src/render/idyll-display/components/component-editor/code-cell.js b/src/render/idyll-display/components/component-editor/code-cell.js
@@ -39,13 +39,13 @@ export default class EditableCodeCell extends React.Component {
 
   // Executes code change
   execute = () => {
-    this.props.onExecute(this._cellCodeRef.current.textContent);
+    this.props.onExecute(this._cellCodeRef.current.innerText);
   };
 
   // Updates markup on blur
   onBlur = e => {
     this.toggleEdit(e);
-    this.props.onBlur(this._cellCodeRef.current.textContent);
+    this.props.onBlur(this._cellCodeRef.current.innerText);
   };
 
   handleKeyDown = e => {

diff --git a/src/render/idyll-display/components/component-editor/code.js b/src/render/idyll-display/components/component-editor/code.js
@@ -1,7 +1,7 @@
 
 
 import * as React from 'react';
-import { getNodeById } from '../../utils/';
+import { getNodeById, getParentNodeById, getRandomId  } from '../../utils/';
 import { withContext } from '../../../context/with-context';
 import EditableCodeCell from './code-cell';
 
@@ -38,19 +38,44 @@ export default withContext(
     updateAst(newMarkup) {
       const output = compile(newMarkup || this.getMarkup(this.props), { async: false });
       let node = output.children[0];
-      if (node.children && node.children.length) {
-        node = node.children[0];
+
+      while (node.type === 'component' && node.name === 'TextContainer') {
+        node = node.children;
       }
-      const targetNode = getNodeById(
-        this.props.context.ast,
-        this.props.context.activeComponent.id
-      );
-      Object.keys(node).forEach(key => {
-        if (key === 'id') {
+
+      if (node.length === 1) {
+        node = node[0];
+
+        const targetNode = getNodeById(
+          this.props.context.ast,
+          this.props.context.activeComponent.id
+        );
+
+        Object.keys(node).forEach(key => {
+          if (key === 'id') {
+            return;
+          }
+          targetNode[key] = node[key];
+        });
+      } else {
+        const parentNode = getParentNodeById(
+          this.props.context.ast,
+          this.props.context.activeComponent.id
+        );
+        if (!parentNode) {
+          console.warn('Could not identify parent node');
           return;
         }
-        targetNode[key] = node[key];
-      });
+
+        const childIdx = (parentNode.children || []).findIndex(c => c.id === this.props.context.activeComponent.id);
+
+        node.forEach((n) => {
+          n.id = getRandomId();
+        })
+
+        // parentNode.children.splice(childIdx, 0, ...node);
+        parentNode.children = parentNode.children.slice(0, childIdx).concat(node).concat(parentNode.children.slice(childIdx + 1));
+      }
 
       this.props.context.setAst(this.props.context.ast);
     }

diff --git a/src/render/idyll-display/components/text-edit.js b/src/render/idyll-display/components/text-edit.js
@@ -4,7 +4,7 @@ import copy from 'fast-copy';
 const AST = require('idyll-ast');
 const compile = require('idyll-compiler');
 
-const { getNodeById, deleteNodeById } = require('../utils');
+const { getNodeById, getRandomId, deleteNodeById, getParentNodeById } = require('../utils');
 
 class TextEdit extends React.PureComponent {
   static contextType = Context;
@@ -45,31 +45,53 @@ class TextEdit extends React.PureComponent {
       return;
     }
 
-    const markup = this._markupRef.textContent;
+    const markup = this._markupRef.innerText;
 
     if (markup.trim() === '') {
       // If it is empty, delete the existing node
       deleteNodeById(this.context.ast, this.props.idyllASTNode.id);
     } else {
-      // console.log(markup);
       const output = compile(markup, { async: false });
       let node = output.children[0];
 
-      // TODO - handle merging multiple nodes / paragraphs
       while (node.type === 'component' && node.name === 'TextContainer') {
-        node = node.children[0];
+        node = node.children;
       }
 
-      const targetNode = getNodeById(
-        this.context.ast,
-        this.props.idyllASTNode.id
-      );
-      Object.keys(node).forEach(key => {
-        if (key === 'id') {
+
+      if (node.length === 1) {
+        node = node[0];
+
+        const targetNode = getNodeById(
+          this.context.ast,
+          this.props.idyllASTNode.id
+        );
+
+        Object.keys(node).forEach(key => {
+          if (key === 'id') {
+            return;
+          }
+          targetNode[key] = node[key];
+        });
+      } else {
+        const parentNode = getParentNodeById(
+          this.context.ast,
+          this.props.idyllASTNode.id
+        );
+        if (!parentNode) {
+          console.warn('Could not identify parent node');
           return;
         }
-        targetNode[key] = node[key];
-      });
+
+        const childIdx = (parentNode.children || []).findIndex(c => c.id === this.props.idyllASTNode.id);
+
+        node.forEach((n) => {
+          n.id = getRandomId();
+        })
+
+        // parentNode.children.splice(childIdx, 0, ...node);
+        parentNode.children = parentNode.children.slice(0, childIdx).concat(node).concat(parentNode.children.slice(childIdx + 1));
+      }
     }
 
     this.context.setAst(this.context.ast);

diff --git a/src/render/idyll-display/utils/index.js b/src/render/idyll-display/utils/index.js
@@ -24,6 +24,25 @@ const getNodeById = (node, id) => {
   return false;
 };
 
+
+const getParentNodeById = (node, id) => {
+  if (!node.children || !node.children.length) {
+    return false;
+  }
+  for (var i = 0; i < node.children.length; i++) {
+    if (node.children[i].id === id) {
+      return node;
+    }
+  }
+  for (var i = 0; i < node.children.length; i++) {
+    const _parent = getParentNodeById(node.children[i], id);
+    if (_parent) {
+      return _parent;
+    }
+  }
+  return false;
+};
+
 const updateNodeById = (ast, id, newProps) => {
   const targetNode = getNodeById(ast, id);
 
@@ -390,6 +409,7 @@ const readFile = source => {
 
 module.exports = {
   getNodeById,
+  getParentNodeById,
   deleteNodeById,
   updateNodeById,
   getRandomId,