Created more keyboard event actions. Show the current block type in t…

…urn into box. Hide the Text formatting bar when the text is unselected. Show the text formatting bar event if the mouse up is outer of key-trigger element
johannes-editor · Jul 1, 2024 · 0639222 · 0639222
1 parent 9a216b4
commit 0639222
Show file tree

Hide file tree

Showing 24 changed files with 1,903 additions and 1,255 deletions.
diff --git a/demo/assets/bundle.js b/demo/assets/bundle.js
diff --git a/demo/assets/style.css b/demo/assets/style.css
@@ -20,6 +20,102 @@
 
 
 
+/** add block */
+.add-block {
+    margin: 0;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #000;
+    background-color: white;
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+    margin-left: 1.3rem;
+}
+
+.add-block-wrapper {
+    width: 100%;
+    height: 3.125rem;
+}
+
+.add-block-wrapper:hover .add-block {
+    display: flex;
+}
+
+/** and add block */
+
+
+
+/** List  **/
+ol.johannes-content-element,
+ul.johannes-content-element {
+    padding-left: 1rem !important;
+}
+
+
+
+.johannes-content-element li>button {
+    /* display: none; */
+    display: none;
+    position: absolute;
+    margin-left: 10px;
+    top: 0;
+
+    flex-direction: row;
+    align-items: start;
+    justify-content: start;
+
+}
+
+.johannes-content-element li {
+    position: relative;
+}
+
+.johannes-content-element li::before {
+    margin-left: 4px;
+}
+
+.johannes-content-element li:hover>button {
+    /* display: inline-block; */
+    display: inline-flex;
+
+}
+
+p.johannes-content-element {
+    display: inline-block;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+}
+
+.johannes-content-element .checkbox-list {
+    list-style-type: none;
+    padding-left: 0 !important;
+}
+
+
+.johannes-content-element .checkbox-list li {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+}
+
+
+.johannes-content-element ul.checkbox-list input[type="checkbox"]:checked+span {
+    text-decoration: line-through;
+}
+
+ul.johannes-content-element:not(.checkbox-list),
+ol.johannes-content-element:not(.checkbox-list) {
+    padding-left: 1.5rem !important;
+}
+
+/** and list **/
+
+
 
 .draggable-block>.drag-handler {
     color: #84888d;
@@ -274,30 +370,21 @@ p {
 
 
 #textFormattingBar {
-    /* display: flex; */
     justify-content: space-between;
     padding: 8px 16px;
     background-color: #f9f9f9;
-
-    background: #f9f9f9 !important;
-
     width: fit-content;
     z-index: 999999;
     position: absolute;
-
+    user-select: none;
 }
 
-
+/* TODO: remove this*/
 span {
     font-family: Arial, sans-serif;
 }
 
 
-
-/* #textFormattingBar .xpy {
-    display: inline-block;
-}*/
-
 #textFormattingBar .item {
     color: rgb(120, 119, 116);
     display: flex;
@@ -312,37 +399,11 @@ span {
 }
 
 
-/*
-#textFormattingBar .item .xpy {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    border-radius: 5px;
-} */
-
-
-#textFormattingBar .item .xpy :hover {
-    background-color: rgba(55, 53, 47, 0.08);
-    border-radius: 3px;
-}
-
 #textFormattingBar select {
     color: rgb(120, 119, 116);
     border: none;
     font-size: 0.85rem;
-    /* background-position: calc(100% - 4px) center; */
     background-color: inherit;
-
-    /* background-color: red; */
-
-    /* display: flex;
-    justify-content: start;
-    text-align: center; */
-}
-
-
-#textFormattingBar select option {
-    /* padding: 10px 15px ; */
 }
 
 .select-wrapper {
@@ -438,30 +499,13 @@ a:not([href]) {
 }
 
 .text-formatting-button-active {
-    color: blue;
+    color: #2382e2;
 }
 
-
-
-
-/* #Seeessdas svg{
-    display: inline-flex !important;
-    justify-content: center !important;
-    align-items: center !important;
-    background-color: red;
-    vertical-align: center !important;
-    flex-direction: row !important;
+.text-formatting-circle-active {
+    border-color: #2382e2 !important;
 }
 
-#Seeessdas svg use{
-    display: inline-flex !important;
-    justify-content: center !important;
-    align-items: center !important;
-    background-color: red;
-    vertical-align: center !important;
-    flex-direction: row !important;
-} */
-
 
 
 #moreTextOptionSelect {
@@ -512,7 +556,7 @@ mark {
 }
 
 #turnIntoSelect .option-image {
-    display: none !important;
+    /* display: none !important; */
 }
 
 .border-less-image {
@@ -586,7 +630,7 @@ mark {
 .block-options-focused {
     outline: none;
     background-color: #e9e9e9;
-    border: inherit;
+    border: none;
 }
 
 
@@ -598,8 +642,34 @@ mark {
     border: inherit;
 }
 
-.option-hover:hover {
+/* .option-hover:hover {
+    background-color: #e9e9e9;
+    box-shadow: 0px 0px 0px 2px #e9e9e9;
+    border-radius: 1px;
+    transition: 0.1s ease;
+} */
+
+/* .select-wrapper>button, */
+
+#turnIntoButton,
+#colorTextButton{
+    padding-left: 4px;
+}
+
+#turnIntoButton:not([disabled]):hover,
+#colorTextButton:not([disabled]):hover,
+#moreTextOptionButton:not([disabled]):hover,
+#textFormattingBar .item>button:not([disabled]):hover {
     background-color: #e9e9e9;
+    box-shadow: 0px 0px 0px 2px #e9e9e9;
+    border-radius: 1px;
+    transition: 0.1s ease;
+}
+
+ul .option-hover:not([disabled]):hover {
+    background-color: #e9e9e9;
+    border-radius: 1px;
+    transition: 0.1s ease;
 }
 
 
@@ -658,29 +728,33 @@ mark {
 }
 
 /** End Block Options **/
-/*!*********************************************************************!*\
-  !*** css ./node_modules/css-loader/dist/cjs.js!./src/add-block.css ***!
-  \*********************************************************************/
-.add-block {
-    margin: 0;
-    padding: 0;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid #000;
-    background-color: white;
-    transition: all 0.3s ease;
-    box-sizing: border-box;
-    margin-left: 1.3rem;
+
+
+
+#deleteBlockButton:hover svg,
+#deleteBlockButton:hover {
+    color: rgb(235, 87, 87) !important;
 }
 
-.add-block-wrapper {
-    width: 100%;
-    height: 3.125rem;
+
+
+
+
+
+
+.johannes-editor *::selection {
+    background-color: #d3e3fd !important;
 }
 
-.add-block-wrapper:hover .add-block {
+.johannes-editor * {
+    line-height: 1.5;
+}
+
+
+.text-option {
+    width: 100%;
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
 }