Addded more block options. keep the focus on content and allow choose…

… a block with key up and down.

demo/assets/style.css

@@ -1,8 +1,42 @@
+/*!*****************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./src/style.css ***!
+  \*****************************************************************/
+/** CSS reset */
+
+.button-reset {
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: auto;
+    overflow: visible;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    -webkit-font-smoothing: inherit;
+    -moz-osx-font-smoothing: inherit;
+    -webkit-appearance: none;
+}
+
+
+
+
 .drag-handler {
     color: #84888d;
     visibility: hidden;
     cursor: grab;
     align-self: start;
+
+    /* background-color: pink; */
+    padding-top: 0.33rem;
+}
+
+.drag-handler svg {
+    /* background-color: red; */
+}
+
+.drag-handler svg use {
+    /* background-color: blue; */
 }
 
 .drag-handler:active {
@@ -13,6 +47,9 @@
     display: flex;
     flex-direction: row;
     margin-bottom: 1rem;
+
+
+    /* background-color: purple; */
 }
 
 .draggable-block:hover .drag-handler {
@@ -28,31 +65,8 @@
 }
 
 
-
-
-.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;
-}
-
-.add-block-wrapper {
-    width: 100%;
-    height: 3.125rem;
-
-}
-
-.add-block-wrapper:hover .add-block {
-    display: flex;
-
+.title h1{
+    margin-left: 1.3rem;
 }
 
 h1[data-placeholder]:empty:before {
@@ -85,10 +99,6 @@ h1 {
     font-weight: bolder !important;
 }
 
-.block-options {
-    width: 480px;
-}
-
 .johannes-editor {
     width: 100%;
 
@@ -109,7 +119,7 @@ pre {
     outline: none;
 }
 
-.content-area {
+body {
     height: 2000px;
     background-color: #f0f0f1 !important;
 
@@ -118,73 +128,200 @@ pre {
 
 
 .editor {
+    display: flex;
+    margin-top: 80px;
+}
+
+p {
+    font-size: 20px !important;
+    color: #242424;
+}
+
+
+.draggable-block,
+.draggable-block * {
+    user-select: text;
+}
+
+
+.johannes-content-element {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    /* background-color: green; */
+}
+
+
+.editor-wrapper {
+    width: 60%;
+    margin-left: auto;
+    margin-right: auto;
+}
+/*!*********************************************************************!*\
+  !*** 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;
+}
+
+.add-block-wrapper {
+    width: 100%;
+    height: 3.125rem;
+}
 
+.add-block-wrapper:hover .add-block {
     display: flex;
+}
+/*!************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./src/switch-block.css ***!
+  \************************************************************************/
+.block-options-wrapper {
+    z-index: 999999;
+    /* box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px; */
+    position: absolute;
+    display: none;
+    /* border: 2px solid #ccc; */
 
-    margin-top: 80px;
+}
+
+/* ::-webkit-scrollbar {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    width: 6px;
+} */
+
+.block-options {
+    /* width: 324px; 20.25rem */
+    width: 20.25rem;
+    /* height: 384px; */
+    height: 340px;
+
+    overflow-y: scroll;
+    /* border-radius: 10px; */
 }
 
 .block-options {
     padding: 10px;
     background: #f9f9f9;
-    border: 1px solid #ccc;
+    border: 2px solid #ccc;
     margin-top: 10px;
-    position: absolute;
-    display: none;
+    /* position: absolute; */
+}
+
+.block-options section h2 {
+    font-size: small ;
+    padding-left: 0.625rem;
+    color: #37352fa6;
 }
 
 .block-options .option {
-    padding: 5px 10px;
-    border: 1px solid #ddd;
-    margin: 5px;
+    padding: 0.3125rem 0.625rem;
+    margin: 0.3125rem 0;
     cursor: pointer;
-    display: inline-block;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    gap: 0.6rem;
+    border-radius: 3px;
 }
 
-.block-options .option:hover {
+.block-options .option:focus {
+    outline: none;
+    background-color: #e9e9e9;
+    border: inherit;
+}
+
+.block-options-focused {
+    outline: none;
     background-color: #e9e9e9;
+    border: inherit;
 }
 
 
-p {
-    font-size: 20px !important;
-    color: #242424;
+
+
+.block-options .option:focus-visible{
+    outline: none;
+    background-color: #e9e9e9;
+    border: inherit;
 }
 
+.block-options .option:hover {
+    background-color: #e9e9e9;
+}
 
-.draggable-block,
-.draggable-block * {
-    user-select: text;
+
+.option[focused="true"] {
+    background-color: #bde4ff; /* estilo de foco personalizado */
 }
 
 
-.johannes-content-element {
-    width: 100%;
-    padding: 0;
-    margin: 0;
+
+
+
+.option-image {
+    width: 2.875rem;
+    height: 2.875rem;
+    border-radius: 3px;
+    /* background-color: red; */
+    border: 1px solid #ccc;
+    color: #4f4f4f;
+
+    /* color: #84888d; */
+    /* color: #242424; */
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    vertical-align: middle;
+    align-items: center;
+    background-color: #ffff;
+    box-sizing: border-box;
 }
 
+.option-image img {
+    /* max-width: 46px; 2,875rem */
+    max-width: 2.875rem;
+    max-height: 2.875rem;
+}
 
-.editor-wrapper {
-    width: 80%;
-    margin-left: auto;
-    margin-right: auto;
+.option-image svg {
+    /* padding: 10px;  0.625rem */
+    margin: 0;
+    padding: 0;
+    padding: 0.625rem;
+    box-sizing: border-box;
+
 }
 
+.option-text {
+    /* background-color: yellow; */
+    /* font-size: 0.5rem; */
 
+}
 
-.button-reset {
-    border: none;
+.option-text * {
     margin: 0;
     padding: 0;
-    width: auto;
-    overflow: visible;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    line-height: normal;
-    -webkit-font-smoothing: inherit;
-    -moz-osx-font-smoothing: inherit;
-    -webkit-appearance: none;
+
 }
 
+.option-text .block-title {
+    font-size: small !important;
+    font-weight: 500;
+}
+
+.option-text .block-description {
+    font-size: small !important;
+}