magnus/Notes
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 4 Packages Wiki Activity

Changed contenteditable div to textarea

Browse source
This commit is contained in:
Magnus Åhall 2023-06-20 07:35:34 +02:00
parent cb9d95bcb2
commit 0175c4044c
5 changed files with 47 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/js/app.mjs
View file

@ -9,7 +9,7 @@ const html = htm.bind(h)
class App extends Component {
constructor() {//{{{
super()
this.websocket_uri = `wss://notes.ahall.se/ws`
this.websocket_uri = `ws://localhost:1371/ws`
this.websocket = null
this.websocket_int_ping = null
this.websocket_int_reconnect = null

36
static/js/node.mjs
View file

@ -64,16 +64,18 @@ export class NodeUI extends Component {
<div class="crumbs">${crumbs}</crumbs>
${children.length > 0 ? html`<div class="child-nodes">${children}</div>` : html``}
<div class="tree" onclick=${()=>this.retrieveTree()} style="color: #000">
<div class="node">Start</div>
${treeHTML}
</div>
${node.ID > 0 ? html`
<div class="node-name">${node.Name}</div>
<${NodeContent} key=${node.ID} content=${node.Content} ref=${this.nodeContent} />
` : html``}
`
/*
<div class="tree" onclick=${()=>this.retrieveTree()} style="color: #000">
<div class="node">Start</div>
${treeHTML}
</div>
*/
}//}}}
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("<br>", "")
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`<div class="node-content" ref=${this.contentDiv} contenteditable=true oninput=${()=>window._app.current.nodeModified.value = true}>${content}</div>`
return html`
<textarea class="node-content" ref=${this.contentDiv} oninput=${()=>this.contentChanged()} required rows=1>${content}</textarea>
`
}//}}}
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=>{