sample-ui-component-library 0.0.27-dev → 0.0.29-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.27-dev",
+  "version": "0.0.29-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Editor/EditorReducer.js

@@ -1,7 +1,8 @@
 export const initialState = {
-  tabs: [],
-  activeTab: null,
-  parentTabGroupId: null
+    uid: crypto.randomUUID(),
+    tabs: [],
+    activeTab: null,
+    parentTabGroupId: null
 };
 
 export const editorReducer = (state, action) => {

package/src/components/Editor/MonacoInstance/MonacoInstance.jsx

@@ -14,6 +14,8 @@ export const MonacoInstance = ({ }) => {
 
     const editorRef = useRef(null);
     const content = useRef();
+    const containerRef = useRef(null);
+    const frameRef = useRef(0);
 
     useEffect(() => {
         if (state.activeTab) {
@@ -41,6 +43,7 @@ export const MonacoInstance = ({ }) => {
         if (content?.current) {
             editorRef.current.setValue(content.current);
         }
+        editorRef.current.layout();
     }
 
     // Editor options for Monaco Editor.
@@ -56,9 +59,29 @@ export const MonacoInstance = ({ }) => {
         renderWhitespace: "none",
         wordWrap: "on",
         scrollBeyondLastLine: false,
-        readOnly: true
+        readOnly: true,
+        automaticLayout: false
     }
 
+    // Disable automatic layout and Manually layout the editor to avoid resize observer loops
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const ro = new ResizeObserver(() => {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = requestAnimationFrame(() => {
+                editorRef.current?.layout();
+            });
+        });
+
+        ro.observe(containerRef.current);
+
+        return () => {
+            cancelAnimationFrame(frameRef.current);
+            ro.disconnect();
+        };
+    }, []);
+
     /**
      * Render the editor if there is an active tab, otherwise render a placeholder message.
      * @returns JSX
@@ -80,7 +103,7 @@ export const MonacoInstance = ({ }) => {
     }
 
     return (
-        <div className="editor-container">
+        <div className="editor-container" ref={containerRef}>
             {renderEditor()}
         </div>
     )

package/src/components/Editor/Tabs/Tabs.jsx

@@ -19,10 +19,10 @@ export const Tabs = () => {
     const [tabsList, setTabsList] = useState();
 
     useEffect(() => {
-        if (state.tabs?.length >= 0 && state.parentTabGroupId != null) {
-            drawTabs(state.tabs, state.parentTabGroupId);
+        if (state.tabs?.length >= 0) {
+            drawTabs(state.tabs, state.uid);
         }
-    }, [state.tabs, state.parentTabGroupId]);
+    }, [state.tabs, state.uid]);
 
     /**
      * Draw the tabs provided in the tabs info. This includes the gutters

package/src/components/FileBrowser/FileBrowserReducer.js

@@ -1,9 +1,7 @@
 import { setDefaultCollapsed, collapseTree, flattenTree } from "./helper";
 
-//TODO: I should set a unique id for each reducer state and use it
-// for all the ids of the components to make them unique. I could
-// also manually set the ID like I do in the editor reducer.
 export const initialState = {
+    uid: crypto.randomUUID(),
     tree: {},
     flattenedTree: {},
     selectedNode: null,

package/src/components/FileBrowser/Tree/Tree.jsx

@@ -18,19 +18,20 @@ export const Tree = ({}) => {
 
     useEffect(() => {
         if(state.collapsedTree && state.collapsedTree.length > 0) {
-            drawTree(state.collapsedTree);
+            drawTree(state.collapsedTree, state.uid);
         }
     }, [state.collapsedTree]);
 
     /**
      * Draws the tree given the nodes and the collapsed state of each node.
      */
-    const drawTree = (collapsedTree) => {
+    const drawTree = (collapsedTree, parentId) => {
         const rows = [];
         collapsedTree.forEach((node) => {
             rows.push(
                 <TreeNode
-                    key={node.uid}
+                    key={parentId + "-" + node.uid}
+                    parentId={parentId}
                     node={node}
                     id={"tree-node-" + node.uid}
                 />,

package/src/components/FileBrowser/TreeNode/TreeNode.jsx

@@ -15,12 +15,13 @@ import { useCallback } from "react";
 /**
  * Renders a single node in the file tree.
  */
-export const TreeNode = ({ id, node }) => {
+export const TreeNode = ({ id, parentId, node }) => {
     const { attributes, listeners, setNodeRef, transform } = useDraggable(
         { 
             id,
             data: {
                 type: "FileTreeNode",
+                parentId: parentId,
                 node: node,
                 preview: <TreeNodePreview node={node} />
             }