${crumbs}
${children.length > 0 ? html`
${children}
` : html``}
-
this.retrieveTree()} style="color: #000">
-
Start
- ${treeHTML}
-
${node.ID > 0 ? html`
${node.Name}
<${NodeContent} key=${node.ID} content=${node.Content} ref=${this.nodeContent} />
` : html``}
`
+ /*
+
this.retrieveTree()} style="color: #000">
+
Start
+ ${treeHTML}
+
+ */
}//}}}
componentDidMount() {//{{{
let urlParams = new URLSearchParams(window.location.search)
@@ -118,7 +120,11 @@ export class NodeUI extends Component {
.catch(this.props.app.responseError)
}//}}}
saveNode() {//{{{
- let content = this.nodeContent.current.contentDiv.current.innerText
+ let content = this.nodeContent.current.contentDiv.current.value
+ content = content
+ .replaceAll("\r", "")
+ .replaceAll("
", "")
+
this.props.app.request('/node/update', {
NodeID: this.node.value.ID,
Content: content,
@@ -178,7 +184,24 @@ class NodeContent extends Component {
}
}//}}}
render({ content }) {//{{{
- return html`
window._app.current.nodeModified.value = true}>${content}
`
+ return html`
+
+ `
+ }//}}}
+ componentDidMount() {//{{{
+ this.resize()
+ }//}}}
+ componentDidUpdate() {//{{{
+ this.resize()
+ }//}}}
+ contentChanged() {//{{{
+ window._app.current.nodeModified.value = true
+ this.resize()
+ }//}}}
+ resize() {//{{{
+ let textarea = this.contentDiv.current;
+ textarea.style.height = "auto";
+ textarea.style.height = textarea.scrollHeight + 16 + "px";
}//}}}
}
@@ -193,7 +216,6 @@ class Node {
this.Children = []
this.Crumbs = []
}//}}}
-
retrieve(callback) {//{{{
this.app.request('/node/retrieve', { ID: this.ID })
.then(res=>{
diff --git a/static/less/main.less b/static/less/main.less
index 4e25746..9896725 100644
--- a/static/less/main.less
+++ b/static/less/main.less
@@ -172,19 +172,23 @@ header {
.node-content {
justify-self: center;
padding: 16px 32px;
- white-space: pre-wrap;
+ word-wrap: break-word;
+ font-family: monospace;
font-size: 0.85em;
color: #333;
width: 100ex;
+ resize: none;
+ border: none;
+ outline: none;
&[contenteditable] {
outline: 0px solid transparent;
}
- &:empty {
- background: #ddd;
+ &:invalid {
+ //background: #eee;
+ border-bottom: 1px solid #eee;
border-radius: 8px;
- height: 48px;
}
}