research/dope2-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use <div> with property 'contenteditable' to accept text input (much simpler)

Browse source
This commit is contained in:
Joeri Exelmans 2025-05-10 22:01:24 +02:00
parent cc65498b12
commit 5f3d697866
4 changed files with 195 additions and 278 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/Editor.css
View file

@ -1,46 +1,87 @@
.text-block {
display: inline-block;
/* border: solid 1px lightgrey; */
/* margin-right: 4px; */
/* padding-left: 2px; */
/* padding-right: 2px; */
user-select: none;
cursor: text;
.suggest {
color: #aaa;
}
.suggestions {
position: absolute;
border: solid 1px lightgrey;
cursor: pointer;
max-height: calc(100vh - 48px);
overflow: scroll;
}
.selected {
background-color: darkseagreen;
color: white;
}
.suggest {
color: #aaa;
[contenteditable] {
outline: 0px solid transparent;
}
.cursor {
display: none;
/* TYPES */
.infix {
margin-left: 1px;
margin-right: 1px;
}
div:focus .cursor {
animation: blink 1s linear infinite;
.type {
margin:1px;
display: inline-block;
margin-left: -1px;
margin-right: -3px;
vertical-align: text-bottom;
height: 20px;
width: 2px;
background-color: black;
}
.suggestions {
position: absolute;
border: solid 1px lightgrey;
cursor: pointer;
.functionType {
border: solid 1px darkred;
background-color: bisque;
color:darkred;
}
@keyframes blink {
50% {
opacity: 0;
}
}
.productType {
border: solid 1px darkblue;
background-color: aliceblue;
color:darkblue;
}
.sumType {
border: solid 1px #333;
background-color: lightyellow;
color:#333
}
.dictType {
border-radius: 5px;
border: solid 1px darkblue;
background-color: rgb(206, 232, 255);
color:darkblue
}
.setType {
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
border: solid 1px darkblue;
background-color: rgb(206, 232, 255);
color:darkblue
}
.listType {
padding-left: 2px;
padding-right: 2px;
border: solid 1px darkblue;
background-color: rgb(206, 232, 255);
color:darkblue
}
.iteratorType {
border-style: dashed;
animation: flickerAnimation 500ms steps(1) normal infinite;
}
/* Animations */
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}