<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://patch-diff.githubusercontent.com";
	_AN_base_path = "https://patch-diff.githubusercontent.com/raw/components-ai/css.gui/pull/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 1;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

From f5460f615a81c88f13457b9439d76bdb68858325 Mon Sep 17 00:00:00 2001
From: John Otander <johnotander@gmail.com>
Date: Tue, 24 May 2022 11:55:36 -0600
Subject: [PATCH] Select root when HTML editor mounts

Closes #251
---
 .changeset/purple-kiwis-allow.md            |   5 +
 packages/gui/src/components/html/editor.tsx | 102 +++++++++++---------
 2 files changed, 61 insertions(+), 46 deletions(-)
 create mode 100644 .changeset/purple-kiwis-allow.md

diff --git a/.changeset/purple-kiwis-allow.md b/.changeset/purple-kiwis-allow.md
new file mode 100644
index 00000000..53e6d60b
--- /dev/null
+++ b/.changeset/purple-kiwis-allow.md
@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Select outer root when html editor mounts
diff --git a/packages/gui/src/components/html/editor.tsx b/packages/gui/src/components/html/editor.tsx
index c39177dc..bc784814 100644
--- a/packages/gui/src/components/html/editor.tsx
+++ b/packages/gui/src/components/html/editor.tsx
@@ -37,30 +37,36 @@ type ElementPath = number[]
  * An HTML tree-based editor that lets you add HTML nodes and mess around with their styles
  */
 export function HtmlEditor({ value, onChange }: EditorProps) {
-  const [selected, setSelected] = useState<ElementPath | null>(null)
+  const [selected, setSelected] = useState<ElementPath | null>(
+    value ? [0] : null
+  )
   return (
-    <div sx="{{" - display flex , - width auto , - }>
-    <div sx="{{" - pt 3 - pb 3 - borderColor border , - borderRightWidth 1px , - borderRightStyle solid , - borderBottomWidth 1px , - borderBottomStyle solid , - overflowX auto , - resize horizontal , - }>
-      <TreeNode - value="{value}" - onSelect="{setSelected}" - path="{[]}" - onChange="{onChange}" - />
-     </div>
+    <div + sx="{{" + display flex , + width auto , + } +>
+      <div + sx="{{" + pt 3 + pb 3 + borderColor border , + borderRightWidth 1px , + borderRightStyle solid , + borderBottomWidth 1px , + borderBottomStyle solid , + overflowX auto , + resize horizontal , + } +>
+        <TreeNode + value="{value}" + onSelect="{setSelected}" + path="{[]}" + onChange="{onChange}" + />
+      </div>
       {selected && (
         <NodeEditor value="{getChildAtPath(value," selected @ -84,17 +90,19 @ interface TagEditorProps extends EditorProps { function NodeEditor value onChange onRemove } TagEditorProps { const nodeType="typeof" value="==" string ? text : tag return ( -><div sx="{{" - resize horizontal , - overflowX auto , - p 3 - borderRightWidth 1px , - borderRightStyle solid , - borderBottomWidth 1px , - borderBottomStyle solid , - borderColor border , - }>
-      <div sx="{{" mb 2 display flex , alignItems flex-end }>
+    <div + sx="{{" + resize horizontal , + overflowX auto , + p 3 + borderRightWidth 1px , + borderRightStyle solid , + borderBottomWidth 1px , + borderBottomStyle solid , + borderColor border , + } +>
+      <div sx="{{" mb 2 display flex , alignItems flex-end }>
         <SelectInput label="Type" value="{nodeType}" @ -134,12 +142,14 @ function NodeSwitch value onChange } EditorProps { return (><div>
-      <article sx="{{" - borderBottomWidth 1px , - borderBottomStyle solid , - borderBottomColor border , - mb 3 - }>
+      <article + sx="{{" + borderBottomWidth 1px , + borderBottomStyle solid , + borderBottomColor border , + mb 3 + } +>
         <div sx="{{" mb 2 }>
           <Label>Tag name</Label>{' '}
           <Combobox @ -152,7 +162,7 @ function NodeSwitch value onChange } EditorProps { onChange ...value tagName selectedItem - style mergedStyles + style mergedStyles } } items="{HTML_TAGS}" @ -172,11 +182,11 @ function NodeSwitch value onChange } EditorProps {><div>
         <Label> 🎨 Styles</Label>
         <div sx="{{" mt 2 }>
-        <Editor - styles="{value.style" ? { - onChange="{(newStyles)"> onChange({ ...value, style: newStyles })}
-          showAddProperties
-        />
+          <Editor + styles="{value.style" ? { + onChange="{(newStyles)"> onChange({ ...value, style: newStyles })}
+            showAddProperties
+          />
         </div>
       </div>
     </div>
