diff --git a/resources/css/common.css b/resources/css/common.css
index c45e5b5fc..9ed23ab29 100644
--- a/resources/css/common.css
+++ b/resources/css/common.css
@@ -1,9 +1,9 @@
 :root {
-    --ls-tag-text-opacity: 0.6;
-    --ls-tag-text-hover-opacity: 0.8;
-    --ls-page-text-size: 1em;
-    --ls-page-title-size: 36px;
-    --ls-font-family: 'Inter';
+  --ls-tag-text-opacity: 0.6;
+  --ls-tag-text-hover-opacity: 0.8;
+  --ls-page-text-size: 1em;
+  --ls-page-title-size: 36px;
+  --ls-font-family: 'Inter';
 }
 
 .dark-theme {
@@ -88,47 +88,47 @@
 }
 
 html {
-    font-family: var(--ls-font-family), Inter, sans-serif, system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial ,"Noto Sans", serif, Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol!important;
+  font-family: var(--ls-font-family), Inter, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
 }
 
 @supports (font-variation-settings: normal) {
-    html {
-        font-family: 'Inter var', sans-serif;
-    }
+  html {
+    font-family: 'Inter var', sans-serif;
+  }
 }
 
 a svg {
-    color: var(--ls-icon-color);
+  color: var(--ls-icon-color);
 }
 
 html, body, #root, #draw {
-    height: 100%;
+  height: 100%;
 }
 
 html, body {
-    background-color: #002b36;
+  background-color: #002b36;
 }
 
 body {
-    color: #24292e;
-    line-height: 1.5;
+  color: #24292e;
+  line-height: 1.5;
 }
 
-.form-checkbox{
-    -webkit-appearance:none;
-    -moz-appearance:none;
-    appearance:none
+.form-checkbox {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none
 }
 
 .ls-center {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .-mr-14 {
-    margin-right: -3.5rem;
+  margin-right: -3.5rem;
 }
 
 textarea {
@@ -144,148 +144,148 @@ textarea {
 }
 
 ul {
-    list-style: circle;
-    margin-left: 1.2em;
+  list-style: circle;
+  margin-left: 1.2em;
 }
 
 ol {
-    list-style: decimal;
-    margin-left: 1.2em;
+  list-style: decimal;
+  margin-left: 1.2em;
 }
 
 .content p, .content div {
-    word-break: break-word;
+  word-break: break-word;
 }
 
 #journals .journal {
-    border-top: 1px solid ;
-    border-top-color: #738694;
-    border-top-color: var(--ls-border-color);
-    padding: 48px 0;
-    margin: 24px 0 128px 0;
+  border-top: 1px solid;
+  border-top-color: #738694;
+  border-top-color: var(--ls-border-color);
+  padding: 48px 0;
+  margin: 24px 0 128px 0;
 }
 
 #journals .journal:first-child {
-    border-top: none;
-    padding: 0;
-    min-height: 500px;
+  border-top: none;
+  padding: 0;
+  min-height: 500px;
 }
 
 #sidebar-nav-wrapper {
-    margin-top: 0px;
-    border-right: 24px;
-    position: sticky;
-    top: 0;
-    transition: all 200ms ease-in 0s;
-    -webkit-transition: all 200ms ease-in 0s;
+  margin-top: 0px;
+  border-right: 24px;
+  position: sticky;
+  top: 0;
+  transition: all 200ms ease-in 0s;
+  -webkit-transition: all 200ms ease-in 0s;
 }
 
-#sidebar-nav-wrapper.enter{
-    opacity: 1;
-    left: 0;
+#sidebar-nav-wrapper.enter {
+  opacity: 1;
+  left: 0;
 }
 
 #journals {
-    margin-bottom: 70vh;
+  margin-bottom: 70vh;
 }
 
 .page {
-    margin-top: 24px;
+  margin-top: 24px;
 }
 
 p {
-    line-height: 1.5;
-    margin: 0.5rem 0;
+  line-height: 1.5;
+  margin: 0.5rem 0;
 }
 
 li p:first-child, .block-body p:first-child {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 li p:last-child, .block-body p:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 li {
-    margin: 0.25rem 0;
+  margin: 0.25rem 0;
 }
 
 #search p {
-    margin: 0;
+  margin: 0;
 }
 
 .pre-white-space {
-    white-space: pre;
+  white-space: pre;
 }
 
 .pre-wrap-white-space {
-    white-space: pre-wrap;
+  white-space: pre-wrap;
 }
 
 .pre-line-white-space {
-    white-space: pre-line;
+  white-space: pre-line;
 }
 
 .editor textarea {
-    border: none;
-    border-radius: 0;
-    background: transparent;
-    padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
 }
 
 .non-block-editor textarea, pre {
-    display: block;
-    padding: 0.5rem;
-    box-shadow: 0 0 0 1px rgba(0,0,0,.02);
-    border-radius: 4px;
+  display: block;
+  padding: 0.5rem;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .02);
+  border-radius: 4px;
 }
 
 .non-block-editor textarea {
-    background: #F6F8FA;
-    background: var(--ls-secondary-background-color);
+  background: #F6F8FA;
+  background: var(--ls-secondary-background-color);
 }
 
 pre {
-    background: #F6F8FA;
-    background: var(--ls-secondary-background-color);
+  background: #F6F8FA;
+  background: var(--ls-secondary-background-color);
 }
 
 
 #journals textarea {
-    word-break: break-word;
-    overflow: hidden;
+  word-break: break-word;
+  overflow: hidden;
 }
 
 textarea {
-    text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 .cursor-pointer, .cursor {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 #left-bar a {
-    color: var(--ls-icon-color);
+  color: var(--ls-icon-color);
 }
 
 a {
-    cursor: pointer;
-    color:#045591;
-    color: var(--ls-link-text-color);
-    text-decoration:none;
+  cursor: pointer;
+  color: #045591;
+  color: var(--ls-link-text-color);
+  text-decoration: none;
 }
 
 a:hover {
-    color: #000;
-    color: var(--ls-link-text-hover-color);
+  color: #000;
+  color: var(--ls-link-text-hover-color);
 }
 
 /* Is this required? */
-.content p a:hover{
-    text-decoration:none;
-    border-bottom: 1px solid;
-    border-bottom-color: black;
-    border-bottom-color: var(--ls-link-text-hover-color);
+.content p a:hover {
+  text-decoration: none;
+  border-bottom: 1px solid;
+  border-bottom-color: black;
+  border-bottom-color: var(--ls-link-text-hover-color);
 }
 
 /* .content a[href^="http"]:after { */
@@ -298,787 +298,832 @@ a:hover {
 /* } */
 
 .content a.initial-color, .content a.initial-color:hover {
-    color:initial;
-    text-decoration:none;
+  color: initial;
+  text-decoration: none;
 }
 
 a.block-control, a.block-control:hover {
-    text-decoration: none;
-    cursor: pointer;
-    font-size: 14px;
-    min-width: 10px;
-    color: initial;
+  text-decoration: none;
+  cursor: pointer;
+  font-size: 14px;
+  min-width: 10px;
+  color: initial;
 }
 
 .dropdown-caret {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    vertical-align: middle;
-    content: "";
-    border-top-style: solid;
-    border-top-width: 4px;
-    border-right: 4px solid transparent;
-    border-bottom: 0 solid transparent;
-    border-left: 4px solid transparent;
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  content: "";
+  border-top-style: solid;
+  border-top-width: 4px;
+  border-right: 4px solid transparent;
+  border-bottom: 0 solid transparent;
+  border-left: 4px solid transparent;
 }
 
 h1.title {
-    margin-bottom: 1.5rem;
-    color: #222;
-    color: var(--ls-title-text-color);
-    font-size: 36px;
-    font-size: var(--ls-page-title-size);
+  margin-bottom: 1.5rem;
+  color: #222;
+  color: var(--ls-title-text-color);
+  font-size: 36px;
+  font-size: var(--ls-page-title-size);
 }
 
 .page-references h2 {
-    color: var(--ls-title-text-color);
+  color: var(--ls-title-text-color);
 }
 
 a.page-ref {
-    color: var(--ls-link-ref-text-color)
+  color: var(--ls-link-ref-text-color)
 }
 
 a.page-ref:hover {
-    color: var(--ls-link-ref-text-hover-color)
+  color: var(--ls-link-ref-text-hover-color)
 }
 
 .ls-block {
-    min-height: 24px;
+  min-height: 24px;
 }
 
 .block-highlight, .content .selected {
-    background-color: #7cccff;
-    background-color: var(--ls-block-highlight-color);
+  background-color: #7cccff;
+  background-color: var(--ls-block-highlight-color);
 }
 
 span.timestamp {
-    margin: 0 0.25rem;
+  margin: 0 0.25rem;
 }
 
 span.priority {
-    color: #6b7280;
+  color: #6b7280;
 }
 
 /* page transition */
 .fade-enter {
-    opacity: 0;
+  opacity: 0;
 }
 
 .fade-enter.fade-enter-active {
-    opacity: 1;
-    transition: opacity 500ms ease-in;
+  opacity: 1;
+  transition: opacity 500ms ease-in;
 }
 
 .fade-exit {
-    opacity: 1;
+  opacity: 1;
 }
 
 .fade-exit.fade-exit-active {
-    opacity: 0;
-    transition: opacity 300ms ease-in;
+  opacity: 0;
+  transition: opacity 300ms ease-in;
 }
 
 svg {
-    pointer-events: none;
+  pointer-events: none;
 }
 
-.noscroll { position: fixed; overflow-y:scroll }
+.noscroll {
+  position: fixed;
+  overflow-y: scroll
+}
 
 #left-sidebar {
-    width: 240px;
-    height: 100%;
-    top: 0;
-    left: -240px;
-    position: absolute;
-    z-index: 11;
-    opacity: 0;
-    transition: all 0.25s;
-    -webkit-transition: all 0.25s;
-    background-color: #002b36;
+  width: 240px;
+  height: 100%;
+  top: 0;
+  left: -240px;
+  position: absolute;
+  z-index: 11;
+  opacity: 0;
+  transition: all 0.25s;
+  -webkit-transition: all 0.25s;
+  background-color: #002b36;
 }
 
-#left-sidebar.enter{
-    opacity: 1;
-    left: 0;
+#left-sidebar.enter {
+  opacity: 1;
+  left: 0;
 }
 
 #right-sidebar {
-    position: sticky;
-    top: 0;
-    transition: all 200ms ease-in 0s;
-    -webkit-transition: all 200ms ease-in 0s;
-    background-color: #D8E1E8;
-    background-color: var(--ls-secondary-background-color);
-    padding-bottom: 48px;
+  position: sticky;
+  top: 0;
+  transition: all 200ms ease-in 0s;
+  -webkit-transition: all 200ms ease-in 0s;
+  background-color: #D8E1E8;
+  background-color: var(--ls-secondary-background-color);
+  padding-bottom: 48px;
 }
 
 
-#right-sidebar.enter{
-    opacity: 1;
-    right: 0;
+#right-sidebar.enter {
+  opacity: 1;
+  right: 0;
 }
 
 #right-sidebar .page {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .lds-dual-ring {
-    display: inline-block;
+  display: inline-block;
 }
+
 .lds-dual-ring:after {
-    content: " ";
-    display: block;
-    width: 20px;
-    height: 20px;
-    margin: 3px;
-    border-radius: 50%;
-    border: 2px solid;
-    border: 2px solid;
-    border-color: #24292E transparent;
-    border-color: var(--ls-primary-text-color) transparent;
-    animation: lds-dual-ring 1.2s linear infinite;
+  content: " ";
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 3px;
+  border-radius: 50%;
+  border: 2px solid;
+  border: 2px solid;
+  border-color: #24292E transparent;
+  border-color: var(--ls-primary-text-color) transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
 }
 
 @keyframes lds-dual-ring {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .canceled {
-    text-decoration: line-through;
+  text-decoration: line-through;
 }
 
 /* Drawing */
 #draw {
-    -webkit-app-region: no-drag;
-    overflow: hidden;
+  -webkit-app-region: no-drag;
+  overflow: hidden;
 }
 
 #draw iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
+  width: 100%;
+  height: 100%;
+  border: none;
 }
 
 .form-checkbox:not(:checked):focus {
-    box-shadow: none;
+  box-shadow: none;
 }
 
 .form-checkbox:checked:focus {
-    box-shadow: none;
+  box-shadow: none;
 }
 
 a.nav-item:hover, a.star-page:hover {
-    background-color: #00242d;
+  background-color: #00242d;
 }
 
 .blocks__properties {
-    background-color: #f0f8ff;
-    background-color: var(--ls-block-properties-background-color);
+  background-color: #f0f8ff;
+  background-color: var(--ls-block-properties-background-color);
 }
 
 /* block dropdown top, auto-complete, sync dropdown */
 .bg-base-3 {
-    background-color: #FFF;
-    background-color: var(--ls-primary-background-color);
+  background-color: #FFF;
+  background-color: var(--ls-primary-background-color);
 }
 
 /* primary bg */
 .h-screen {
-    background-color: #FFF;
-    background-color: var(--ls-primary-background-color);
+  background-color: #FFF;
+  background-color: var(--ls-primary-background-color);
 }
 
 #head {
-    background-color: #FFF;
-    background-color: var(--ls-primary-background-color);
+  background-color: #FFF;
+  background-color: var(--ls-primary-background-color);
 }
 
-#search_field{
-    background-color: #FFF;
-    background-color: var(--ls-search-background-color);
-    color: #161e2e;
-    color: var(--ls-secondary-text-color);
+#search_field {
+  background-color: #FFF;
+  background-color: var(--ls-search-background-color);
+  color: #161e2e;
+  color: var(--ls-secondary-text-color);
 }
 
 .bg-base-2 {
-    background-color: #f0f8ff;
-    background-color: var(--ls-secondary-background-color);
+  background-color: #f0f8ff;
+  background-color: var(--ls-secondary-background-color);
 }
 
 a.menu-link:hover, button.pull:hover, button.menu:focus {
-    background-color: #f4f5f7;
-    background-color: var(--ls-menu-hover-color);
+  background-color: #f4f5f7;
+  background-color: var(--ls-menu-hover-color);
 }
 
 a.menu-link {
-    background-color: #ffffff;
-    background-color: var(--ls-primary-background-color);
+  background-color: #ffffff;
+  background-color: var(--ls-primary-background-color);
 }
 
 .white-theme #head a {
-    color: var(--ls-link-text-hover-color);
+  color: var(--ls-link-text-hover-color);
 }
 
 button.menu {
-    border-right: 1px solid;
-    border-right-color: #f0f8ff;
-    border-right-color: var(--ls-secondary-background-color);
-    color: #24292e;
-    color: var(--ls-link-text-color);
+  border-right: 1px solid;
+  border-right-color: #f0f8ff;
+  border-right-color: var(--ls-secondary-background-color);
+  color: #24292e;
+  color: var(--ls-link-text-color);
 }
 
 #root > div {
-    color: #24292e;
-    color: var(--ls-primary-text-color);
+  color: #24292e;
+  color: var(--ls-primary-text-color);
 }
 
 #main-content-container {
-    font-size: 1em;
-    font-size: var(--ls-page-text-size);
+  font-size: 1em;
+  font-size: var(--ls-page-text-size);
 }
 
 .form-checkbox {
-    color: #137cbd;
-    color: var(--ls-page-checkbox-color);
-    background-color: none;
-    background-color: var(--ls-page-checkbox-color);
-    border: 1px solid;
-    border-color: #808080;
-    border-color: var(--ls-page-checkbox-border-color)
+  color: #137cbd;
+  color: var(--ls-page-checkbox-color);
+  background-color: transparent;
+  background-color: var(--ls-page-checkbox-color);
+  border: 1px solid;
+  border-color: #808080;
+  border-color: var(--ls-page-checkbox-border-color)
 }
 
 input {
-    color: var(--ls-primary-text-color);
-    background: transparent;
+  color: var(--ls-primary-text-color);
+  background: transparent;
 }
 
 /* ever used? */
 .focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px #839496;
+  box-shadow: 0 0 0 3px #839496;
 }
+
 /* .form-input { */
 /*     background-color: #FDF6E3; */
 /* } */
 
 .form-select {
-    background-color: none;
-    background-color: var(--ls-primary-background-color);
-    background-repeat: no-repeat;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
+  background-color: transparent;
+  background-color: var(--ls-primary-background-color);
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
 }
 
 .before-block p {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 #right-sidebar .sidebar-item {
-    border-top: 1px solid;
-    border-top-color: #ccc;
-    border-top-color: var(--ls-border-color);
-    margin-bottom: 24px;
-    padding-top: 24px;
+  border-top: 1px solid;
+  border-top-color: #ccc;
+  border-top-color: var(--ls-border-color);
+  margin-bottom: 24px;
+  padding-top: 24px;
 }
 
 #right-sidebar .sidebar-item:first-child {
-    border-top: none;
+  border-top: none;
 }
 
 #global-graph, #page-graph {
-    min-height: 100% !important;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    position: relative;
-    z-index: 4;
+  min-height: 100% !important;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 4;
 }
 
 .opacity-70 {
-    opacity: .7;
+  opacity: .7;
 }
 
 .opacity-80 {
-    opacity: .8;
+  opacity: .8;
 }
 
-*:not(pre)>code{
-    font-style:normal!important;
-    letter-spacing:0;
-    padding:.1em .4em;
-    word-spacing:-.15em;
-    background-color:#eee;
-    -webkit-border-radius:4px;
-    border-radius:4px;
-    line-height:1.45;
-    text-rendering:optimizeSpeed
+*:not(pre) > code {
+  font-style: normal !important;
+  letter-spacing: 0;
+  padding: .1em .4em;
+  word-spacing: -.15em;
+  background-color: #eee;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  line-height: 1.45;
+  text-rendering: optimizeSpeed
 }
 
 hr {
-    margin: 2rem 0;
-    border-color: #ccc;
-    border-color: var(--ls-border-color);
+  margin: 2rem 0;
+  border-color: #ccc;
+  border-color: var(--ls-border-color);
 }
 
 #search-wrapper svg {
-    color: #9fa6b2;
-    color: var(--ls-search-icon-color);
-    /* margin-left: 6px; */
+  color: #9fa6b2;
+  color: var(--ls-search-icon-color);
+  /* margin-left: 6px; */
 }
 
 #search-wrapper:focus-within svg {
-    color: #4b5563;
-    color: var(--ls-link-text-hover-color);
+  color: #4b5563;
+  color: var(--ls-link-text-hover-color);
 }
 
 .file textarea, .file pre {
-    margin: 0;
+  margin: 0;
 }
 
 a.button {
-    -webkit-appearance: button;
-    -moz-appearance: button;
-    appearance: button;
-
-    text-decoration: none;
-    color: #FFF;
-    display: inline;
+  text-decoration: none;
+  color: #FFF;
+  display: inline;
 }
 
 /* ever used? */
 a.button:hover, .content a.button {
-    color: #FFF;
+  color: #FFF;
 }
 
 a.menu-link {
-    color: var(--ls-link-text-color);
+  color: var(--ls-link-text-color);
 }
 
 .white-theme a.menu-link {
-    color: var(--ls-primary-text-color);
+  color: var(--ls-primary-text-color);
 }
 
 
 a.menu-link:hover {
-    color: var(--ls-link-text-hover-color);
+  color: var(--ls-link-text-hover-color);
 }
 
 a.chosen {
-    background: var(--ls-a-chosen-bg);
+  background: var(--ls-a-chosen-bg);
 }
 
 .done, .canceled {
-    opacity: 0.7;
+  opacity: 0.7;
 }
 
 .sync-content p {
-    margin: 0.25rem 0;
+  margin: 0.25rem 0;
 }
 
 code {
-    font-size: 85%;
+  font-size: 85%;
 }
 
 pre.code {
-    background: #282A36;
-    background: var(--ls-secondary-background-color);
-    color: #f8f8f2;
-    color: var(--ls-primary-text-color);
+  background: #282A36;
+  background: var(--ls-secondary-background-color);
+  color: #f8f8f2;
+  color: var(--ls-primary-text-color);
 }
 
 /* Are these reachable? */
 #right-sidebar .non-block-editor textarea, #right-sidebar pre, #right-sidebar pre.code {
-    background: var(--ls-right-sidebar-code-bg-color);
+  background: var(--ls-right-sidebar-code-bg-color);
 }
 
 #right-sidebar pre.CodeMirror-line {
-    background: #FFFFFF;
+  background: #FFFFFF;
 }
 
-:not(pre)>code {
-    color: var(--ls-page-inline-code-color);
-    background: #eeeeee;
-    background: var(--ls-page-inline-code-bg-color);
+:not(pre) > code {
+  color: var(--ls-page-inline-code-color);
+  background: #eeeeee;
+  background: var(--ls-page-inline-code-bg-color);
 }
 
 mark {
-    background: #FEF3AC;
-    color: #262626;
-    padding: 0 1px;
+  background: #FEF3AC;
+  color: #262626;
+  padding: 0 1px;
 }
 
 dl {
-    margin: 1rem 0;
+  margin: 1rem 0;
 }
 
 dt {
-    margin-bottom: 0.25rem;
-    font-weight: bold;
+  margin-bottom: 0.25rem;
+  font-weight: bold;
 }
 
-:root{
-    scrollbar-color: #0079D3 #2E3645 !important;
-    scrollbar-width: thin !important;
+:root {
+  scrollbar-color: #0079D3 #2E3645 !important;
+  scrollbar-width: thin !important;
 }
 
 * {
-    scrollbar-width: thin !important;
+  scrollbar-width: thin !important;
 }
 
 blockquote {
-    display: block;
-    text-indent: 0em;
-    padding: 10px 20px;
-    border-left: 3px solid;
-    border-left-color:  #d3d3d3;
-    border-left-color:  var(--ls-page-blockquote-border-color);
-    background-color: #f7f7f7;
-    background-color: var(--ls-page-blockquote-bg-color);
-    margin: 1rem 0;
-    color: #24292e;
-	color: var(--ls-page-blockquote-color);
+  display: block;
+  text-indent: 0em;
+  padding: 10px 20px;
+  border-left: 3px solid;
+  border-left-color: #d3d3d3;
+  border-left-color: var(--ls-page-blockquote-border-color);
+  background-color: #f7f7f7;
+  background-color: var(--ls-page-blockquote-bg-color);
+  margin: 1rem 0;
+  color: #24292e;
+  color: var(--ls-page-blockquote-color);
 }
 
 .dark-theme ::-webkit-scrollbar, .dark-theme ::-webkit-scrollbar-track-piece {
-    background-color: var(--ls-scrollbar-color);
-    border: 4px solid;
-    border-color: var(--ls-scrollbar-color);
+  background-color: var(--ls-scrollbar-color);
+  border: 4px solid;
+  border-color: var(--ls-scrollbar-color);
 }
 
 .dark-theme ::-webkit-scrollbar-thumb {
-    background-color: var(--ls-secondary-background-color);
-    background-clip: padding-box;
-    min-height: 28px;
+  background-color: var(--ls-secondary-background-color);
+  background-clip: padding-box;
+  min-height: 28px;
 }
 
 .dark-theme ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--ls-scrollbar-thumb-hover-color);
+  background-color: var(--ls-scrollbar-thumb-hover-color);
 }
 
 .svg-shadow {
-    -webkit-filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, .7));
-    filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, .5));
+  -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .7));
+  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
 }
 
 .tip-shadow {
-    -webkit-filter: drop-shadow( 1px 1px 2px rgba(155,155,0,.8));
-    filter: drop-shadow( 1px 1px 2px rgba(155,155,0,.8));
+  -webkit-filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, .8));
+  filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, .8));
 }
 
 svg.note {
-    color: #19407c;
-    color: var(--ls-primary-text-color);
+  color: #19407c;
+  color: var(--ls-primary-text-color);
 }
 
 .white-theme svg.tip {
-    color: #111;
+  color: #111;
 }
 
 .dark-theme svg.tip {
-    color: #b0c8af;
+  color: #b0c8af;
 }
 
 .admonition-icon {
-    border-right: 1px solid;
-    border-right-color: #ccc;
-    border-right-color: var(--ls-border-color);
+  border-right: 1px solid;
+  border-right-color: #ccc;
+  border-right-color: var(--ls-border-color);
 }
 
 /* make keyframes that tell the start state and the end state of our object */
-@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
-@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
-@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 
 .fade-in {
-    opacity:0;  /* make things invisible upon start */
-    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-    -moz-animation:fadeIn ease-in 1;
-    animation:fadeIn ease-in 1;
+  opacity: 0; /* make things invisible upon start */
+  -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
+  -moz-animation: fadeIn ease-in 1;
+  animation: fadeIn ease-in 1;
 
-    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-    -moz-animation-fill-mode:forwards;
-    animation-fill-mode:forwards;
+  -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
 
-    -webkit-animation-duration:2s;
-    -moz-animation-duration:2s;
-    animation-duration:2s;
+  -webkit-animation-duration: 2s;
+  -moz-animation-duration: 2s;
+  animation-duration: 2s;
 }
 
 .fade-in.one {
-    -webkit-animation-delay: 0.5s;
-    -moz-animation-delay: 0.5s;
-    animation-delay: 0.5s;
+  -webkit-animation-delay: 0.5s;
+  -moz-animation-delay: 0.5s;
+  animation-delay: 0.5s;
 }
 
 .fade-in.two {
-    -webkit-animation-delay: 1s;
-    -moz-animation-delay: 1s;
-    animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+  -moz-animation-delay: 1s;
+  animation-delay: 1s;
 }
 
 .fade-in.three {
-    -webkit-animation-delay: 1.5s;
-    -moz-animation-delay: 1.5s;
-    animation-delay: 1.5s;
+  -webkit-animation-delay: 1.5s;
+  -moz-animation-delay: 1.5s;
+  animation-delay: 1.5s;
 }
 
 .fade-in.four {
-    -webkit-animation-delay: 2s;
-    -moz-animation-delay: 2s;
-    animation-delay: 2s;
+  -webkit-animation-delay: 2s;
+  -moz-animation-delay: 2s;
+  animation-delay: 2s;
 }
 
 .block-children {
-    border-left: 1px solid;
-    border-left-color: #ddd;
-    border-left-color: var(--ls-border-color);
+  border-left: 1px solid;
+  border-left-color: #ddd;
+  border-left-color: var(--ls-border-color);
 }
 
 .dnd-separator {
-    border-bottom: 3px solid transparent;
+  border-bottom: 3px solid transparent;
 }
 
 .dnd-separator-cur {
-    border-bottom: 3px solid #999;
+  border-bottom: 3px solid #999;
 }
 
 iframe {
-    /* width: 100%; */
-    margin: 1rem 0;
+  /* width: 100%; */
+  margin: 1rem 0;
 }
 
 /* copied from https://github.com/drdogbot7/tailwindcss-responsive-embed */
 .embed-responsive {
-    position: relative;
-    display: block;
-    height: 0;
-    padding: 0;
-    overflow: hidden;
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+
+  .embed-responsive-item,
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
 
-    .embed-responsive-item,
-    iframe,
-    embed,
-    object,
-    video {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        height: 100%;
-        width: 100%;
-        border: 0;
-    }
 }
 
 .aspect-ratio-square {
-    padding-top: 100%;
+  padding-top: 100%;
 }
+
 .aspect-ratio-16\/9 {
-    padding-top: 56.25%;
+  padding-top: 56.25%;
 }
+
 .aspect-ratio-4\/3 {
-    padding-top: 75%;
+  padding-top: 75%;
 }
+
 .aspect-ratio-21\/9 {
-    padding-top: 42.86%;
+  padding-top: 42.86%;
 }
 
 .footdef {
-    margin: 1rem 0;
+  margin: 1rem 0;
 }
 
 .slide .reveal section img {
-    margin: 1rem auto;
+  margin: 1rem auto;
 }
 
 .reveal .progress span {
-    display: block;
-    height: 100%;
-    width: 100%;
-    background-color: currentColor;
-    transition: transform .8s cubic-bezier(.26,.86,.44,.985);
-    transform-origin: 0 0;
-    transform: scaleX(0);
+  display: block;
+  height: 100%;
+  width: 100%;
+  background-color: currentColor;
+  transition: transform .8s cubic-bezier(.26, .86, .44, .985);
+  transform-origin: 0 0;
+  transform: scaleX(0);
 }
 
 pre {
-    margin: 1rem 0;
+  margin: 1rem 0;
 }
 
 span.bullet-container {
-    display: flex;
-    height: 13px;
-    width: 13px;
-    border-radius: 50%;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  height: 13px;
+  width: 13px;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
 }
 
 .bullet-container .bullet {
-    border-radius: 50%;
-    width: 5px;
-    height: 5px;
-    background-color: #394b59;
-    background-color: var(--ls-block-bullet-color);
+  border-radius: 50%;
+  width: 5px;
+  height: 5px;
+  background-color: #394b59;
+  background-color: var(--ls-block-bullet-color);
 }
 
 .bullet-closed {
-    background-color: #ced9e0;
-    background-color: var(--ls-block-bullet-border-color);
+  background-color: #ced9e0;
+  background-color: var(--ls-block-bullet-border-color);
 }
 
 /* use case? */
 .doc-mode .block-children {
-    border-left: none;
+  border-left: none;
 }
 
 .doc-mode .hide-inner-bullet .bullet {
-    display: none;
+  display: none;
 }
 
 .doc-mode {
-    margin-left: -16px;
+  margin-left: -16px;
 }
 
 .admonitionblock {
-    margin: 2rem 0;
+  margin: 2rem 0;
 }
 
 li:first-child {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .abstract {
-    margin: 2rem 0;
-    width: 80%;
-    font-style: italic;
+  margin: 2rem 0;
+  width: 80%;
+  font-style: italic;
 }
 
 .abstract p:last-of-type:before {
-    content: "    ";
-    white-space: pre;
+  content: "    ";
+  white-space: pre;
 }
 
 a.warning, span.warning {
-    background: #F56565;
-    padding: .1em .4em;
-    border-radius: 4px;
-    color: #fff;
+  background: #F56565;
+  padding: .1em .4em;
+  border-radius: 4px;
+  color: #fff;
 }
 
 /* use case? */
 .content a.warning {
-    color: #fff;
+  color: #fff;
 }
 
 .draw {
-    display: flex;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+  display: flex;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .excalidraw-embed .draw {
-    position: relative;
+  position: relative;
 }
 
 button.context-menu-option {
-    font-size: 14px;
+  font-size: 14px;
 }
 
 .popover .context-menu li {
-    margin: 0;
+  margin: 0;
 }
 
 ::selection {
-    background: #338FFF;
+  background: #338FFF;
 }
 
 ::-moz-selection {
-    background: #338FFF;
+  background: #338FFF;
 }
 
 .dropdown-overflow-auto {
-    max-height: 400px;
-    overflow-y: auto;
+  max-height: 400px;
+  overflow-y: auto;
 }
 
 .notification-area {
-    background-color: #FFF;
+  background-color: #FFF;
 }
 
 .content img {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 a.login {
-    color: #444;
-    color: var(--ls-link-text-color);
+  color: #444;
+  color: var(--ls-link-text-color);
 }
 
 a.login:hover {
-    color: #000;
-    color: var(--ls-link-text-hover-color);
+  color: #000;
+  color: var(--ls-link-text-hover-color);
 }
 
 .marker-switch {
-    display: inline;
-    font-size: 85%;
-    margin-right: 6px;
-    margin-left: 2px;
-    border-radius: 3px;
-    font-weight: 500;
-    display: inline-block;
-    width: 16px;
-    height: 18px;
-    opacity: 0.5;
-    padding: 0 2px 0 2px;
-    border: 1px solid;
+  display: inline;
+  font-size: 85%;
+  margin-right: 6px;
+  margin-left: 2px;
+  border-radius: 3px;
+  font-weight: 500;
+  display: inline-block;
+  width: 16px;
+  height: 18px;
+  opacity: 0.5;
+  padding: 0 2px 0 2px;
+  border: 1px solid;
 }
 
 a.marker-switch:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 a.tooltip-priority {
-    display: contents;
-    position: absolute;
-    left: 0;
+  display: contents;
+  position: absolute;
+  left: 0;
 }
 
 a.tooltip-priority::after {
-    content: attr(priority);
-    margin-right: 10px;
+  content: attr(priority);
+  margin-right: 10px;
 }
 
 .page-drop-options {
-    width: 18em;
+  width: 18em;
 }
 
 .help table thead tr th {
-    width: 80%;
+  width: 80%;
 }
 
 pre {
-    line-height: 1.45em;
-    overflow: auto;
+  line-height: 1.45em;
+  overflow: auto;
 }
 
-#intro p { margin: 15px 0; }
-#intro h1, #intro h2 { margin: 2.5em 0 0.5em; }
-#intro h2 { font-size: 1.4em; }
-#intro img { margin: 5em 0; }
-#intro h3 { font-size: 1.275em;
-            margin: 1.5em 0 0.5em;}
-#intro h4 { font-size: 1.175em;
-            margin: 1em 0 0.5em;}
+#intro p {
+  margin: 15px 0;
+}
+
+#intro h1, #intro h2 {
+  margin: 2.5em 0 0.5em;
+}
+
+#intro h2 {
+  font-size: 1.4em;
+}
+
+#intro img {
+  margin: 5em 0;
+}
+
+#intro h3 {
+  font-size: 1.275em;
+  margin: 1.5em 0 0.5em;
+}
+
+#intro h4 {
+  font-size: 1.175em;
+  margin: 1em 0 0.5em;
+}
 
 
 /* .page .content *, #intro .content *, .page .title { */
@@ -1091,16 +1136,16 @@ pre {
 /* } */
 
 #intro .content {
-    flex-direction: column;
-    align-items: center;
+  flex-direction: column;
+  align-items: center;
 }
 
 #intro .content :not(img), .foldable-title {
-    max-width: 665px;
+  max-width: 665px;
 }
 
 .fixed-width {
-    max-width: 665px;
+  max-width: 665px;
 }
 
 /* .editor-wrapper { */
@@ -1108,223 +1153,309 @@ pre {
 /* } */
 
 .ls-block, .editor-wrapper {
-    margin: 0 auto;
+  margin: 0 auto;
 }
 
 .center, .foldable-title {
-    margin: 0 auto;
+  margin: 0 auto;
 }
 
 img, video {
-    margin-left: auto;
-    margin-right: auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 #intro .intro-docs, img, video, .intro .ls-block {
-    max-width: 653px;
+  max-width: 653px;
 }
 
 .ls-block img {
-    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
 }
 
 #intro img {
-    max-width: 100%;
+  max-width: 100%;
 }
 
-.w10 { max-width: 10%; }
-.w20 { max-width: 20%; }
-.w30 { max-width: 30%; }
-.w40 { max-width: 40%; }
-.w50 { max-width: 50%; }
-.w60 { max-width: 60%; }
-.w70 { max-width: 70%; }
-.w80 { max-width: 80%; }
-.w90 { max-width: 90%; }
-.w100 { max-width: 100%; }
+.w10 {
+  max-width: 10%;
+}
 
-summary{
-    outline:none;
+.w20 {
+  max-width: 20%;
+}
+
+.w30 {
+  max-width: 30%;
+}
+
+.w40 {
+  max-width: 40%;
+}
+
+.w50 {
+  max-width: 50%;
+}
+
+.w60 {
+  max-width: 60%;
+}
+
+.w70 {
+  max-width: 70%;
+}
+
+.w80 {
+  max-width: 80%;
+}
+
+.w90 {
+  max-width: 90%;
+}
+
+.w100 {
+  max-width: 100%;
+}
+
+summary {
+  outline: none;
 }
 
 .dropdown-wrapper {
-    background-color: #FFFFFF;
-    background-color: var(--ls-primary-background-color);
-    min-width: 12rem;
+  background-color: #FFFFFF;
+  background-color: var(--ls-primary-background-color);
+  min-width: 12rem;
 }
 
 #right-sidebar .references {
-    margin-left: 12px;
+  margin-left: 12px;
 }
 
 img.small {
-    display: inline;
-    width: 20px;
-    height: 20px;
-    margin-top: 0;
-    margin-bottom: 0;
+  display: inline;
+  width: 20px;
+  height: 20px;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 a.tag {
-    opacity: 0.6;
-    opacity: var(--ls-tag-text-opacity);
-    color: #045591;
-    color: var(--ls-tag-text-color);
+  opacity: 0.6;
+  opacity: var(--ls-tag-text-opacity);
+  color: #045591;
+  color: var(--ls-tag-text-color);
 }
 
 a.tag:hover {
-    opacity: 0.8;
-    opacity: var(--ls-tag-text-hover-opacity);
-    color: #045591;
-    color: var(--ls-tag-text-hover-color);
+  opacity: 0.8;
+  opacity: var(--ls-tag-text-hover-opacity);
+  color: #045591;
+  color: var(--ls-tag-text-hover-color);
 }
 
 #diffs-body textarea {
-    color: #a4b5b6;
-    color: var(--ls-primary-text-color);
+  color: #a4b5b6;
+  color: var(--ls-primary-text-color);
 }
 
 .notifications {
-    position: absolute;
-    z-index: 99;
-    width: 100%;
-    top: 3.2em;
+  position: absolute;
+  z-index: 99;
+  width: 100%;
+  top: 3.2em;
 }
 
-.ls-block h1 { font-size: 2em; margin: .67em 0 }
-.ls-block h2 { font-size: 1.5em; margin: .75em 0 }
-.ls-block h3 { font-size: 1.17em; margin: .83em 0}
-.ls-block h4 { margin: 1.12em 0 }
-.ls-block h5 { font-size: .83em; margin: 1.5em 0 }
-.ls-block h6 { font-size: .75em; margin: 1.67em 0 }
-.ls-block h1, .ls-block h2, .ls-block h3, .ls-block h4, .ls-block h5, .ls-block h6 { font-weight: 600 }
+.ls-block h1 {
+  font-size: 2em;
+  margin: .67em 0
+}
+
+.ls-block h2 {
+  font-size: 1.5em;
+  margin: .75em 0
+}
+
+.ls-block h3 {
+  font-size: 1.17em;
+  margin: .83em 0
+}
+
+.ls-block h4 {
+  margin: 1.12em 0
+}
+
+.ls-block h5 {
+  font-size: .83em;
+  margin: 1.5em 0
+}
+
+.ls-block h6 {
+  font-size: .75em;
+  margin: 1.67em 0
+}
+
+.ls-block h1, .ls-block h2, .ls-block h3, .ls-block h4, .ls-block h5, .ls-block h6 {
+  font-weight: 600
+}
 
 .bullet-container .bullet-heading {
-    background-color: #8fbc8f;
-    background-color: var(--ls-block-bullet-color);
+  background-color: #8fbc8f;
+  background-color: var(--ls-block-bullet-color);
 }
 
 .heading-bg {
-    border-radius: 50%;
-    width: 12px;
-    height: 12px;
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
 }
 
 .videoWrapper {
-    position: relative;
-    padding-bottom: 56.25%; /* 16:9 */
-    height: 0;
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
 }
+
 .videoWrapper iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 /* TODO: add all tailwind supported bg colors */
-.bg-pink-100    {
-    background-color: #fff5f7;
+.bg-pink-100 {
+  background-color: #fff5f7;
 }
-.bg-pink-200    {
-    background-color: #fed7e2;
+
+.bg-pink-200 {
+  background-color: #fed7e2;
 }
-.bg-pink-300    {
-    background-color: #fbb6ce;
+
+.bg-pink-300 {
+  background-color: #fbb6ce;
 }
-.bg-pink-400    {
-    background-color: #f687b3;
+
+.bg-pink-400 {
+  background-color: #f687b3;
 }
-.bg-pink-500    {
-    background-color: #ed64a6;
+
+.bg-pink-500 {
+  background-color: #ed64a6;
 }
-.bg-pink-600    {
-    background-color: #d53f8c;
+
+.bg-pink-600 {
+  background-color: #d53f8c;
 }
-.bg-pink-700    {
-    background-color: #b83280;
+
+.bg-pink-700 {
+  background-color: #b83280;
 }
-.bg-pink-800    {
-    background-color: #97266d;
+
+.bg-pink-800 {
+  background-color: #97266d;
 }
-.bg-pink-900    {
-    background-color: #702459;
+
+.bg-pink-900 {
+  background-color: #702459;
 }
 
 .block-body blockquote:first-child, .block-body pre:first-child {
-    margin-top: 8px;
-    margin-bottom: 8px;
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 
 .CodeMirror {
-    height: auto;
-    margin: 6px 0;
-    font-family: Fira Code, Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
+  height: auto;
+  margin: 6px 0;
+  font-family: Fira Code, Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
 }
 
 .add-button-link:hover .addButton > .circle {
-    opacity: 1;
+  opacity: 1;
 }
 
 .addButton > .circle {
-    opacity: 0;
+  opacity: 0;
 }
 
 .addButton {
-    display: block;
-    margin-left: 12px;
-    margin-top: 6.5px;
-    width: 20px;
-    height: 20px;
-    opacity: 0.5;
+  display: block;
+  margin-left: 12px;
+  margin-top: 6.5px;
+  width: 20px;
+  height: 20px;
+  opacity: 0.5;
 }
 
 /* FIXME: */
 
 .dark-theme input {
-    color: var(--ls-secondary-text-color);
+  color: var(--ls-secondary-text-color);
 }
 
 .dark-theme input.form-input {
-    background: none;
+  background: none;
 }
 
 .dark-theme .form-checkbox {
-    color: #6093a0;
-    color: var(--ls-page-checkbox-color);
-    background-color: #6093a0;
-    background-color: var(--ls-page-checkbox-color);
-    border-color: #6093a0;
-    border-color: var(--ls-page-checkbox-border-color);
+  color: #6093a0;
+  color: var(--ls-page-checkbox-color);
+  background-color: #6093a0;
+  background-color: var(--ls-page-checkbox-color);
+  border-color: #6093a0;
+  border-color: var(--ls-page-checkbox-border-color);
 }
 
 #right-sidebar .bg-base-2,
 #right-sidebar blockquote {
-    background-color: var(--ls-tertiary-background-color);
+  background-color: var(--ls-tertiary-background-color);
 }
 
 .white-theme a.right-sidebar-button {
-    color: var(--ls-primary-text-color);
+  color: var(--ls-primary-text-color);
 }
+
 .white-theme a.right-sidebar-button:hover {
-    color: var(--ls-link-text-hover-color);
+  color: var(--ls-link-text-hover-color);
 }
 
 .absolute-modal {
-    background: var(--ls-primary-background-color);
+  background: var(--ls-primary-background-color);
 }
 
 /* FIXME: not sure why this is not working for ui/toggle */
 .translate-x-5 {
-    --transform-translate-x: 1.25rem;
+  --transform-translate-x: 1.25rem;
 }
 
+/* region App global modules */
+#mobile-editor-toolbar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  justify-content: center;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  z-index: 9999;
+
+  transition: top .3s;
+}
+
+#mobile-editor-toolbar > button {
+  padding: 5px;
+}
+
+/* endregion */
+
 /* Hide scrollbar for IE, Edge and Firefox */
 .hide-scrollbar {
     -ms-overflow-style: none;  /* IE and Edge */
     scrollbar-width: none !important;  /* Firefox */
 }
+
 /* Hide scrollbar for Chrome, Safari and Opera */
 .hide-scrollbar::-webkit-scrollbar {
     display: none;
diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs
index 587e34200..4a614c6c5 100644
--- a/src/main/frontend/components/editor.cljs
+++ b/src/main/frontend/components/editor.cljs
@@ -209,55 +209,27 @@
 
 (rum/defc mobile-bar < rum/reactive
   [parent-state parent-id]
-  [:div.bg-base-2 {:style {:position "fixed"
-                           :bottom 0
-                           :width "100%"
-                           :left 0
-                           :justify-content "center"
-                           :height "2.5rem"
-                           :display "flex"
-                           :align-items "center"
-                           ;; This element should be the upper-most in most situations
-                           :z-index 99999999}}
+  [:div#mobile-editor-toolbar.bg-base-2.fix-ios-fixed-bottom
    [:button.bottom-action
-    {:style {:padding "5px"}
-     :on-click #(editor-handler/adjust-block-level! parent-state :right)}
+    {:on-click #(editor-handler/adjust-block-level! parent-state :right)}
     svg/indent-block]
    [:button.bottom-action
-    {:style {:padding "5px"}
-     :on-click #(editor-handler/adjust-block-level! parent-state :left)}
+    {:on-click #(editor-handler/adjust-block-level! parent-state :left)}
     svg/outdent-block]
    [:button.bottom-action
-    {:style {:padding "5px"}
-     :on-click #(editor-handler/move-up-down % true)}
+    {:on-click #(editor-handler/move-up-down % true)}
     svg/move-up-block]
    [:button.bottom-action
-    {:style {:padding "5px"}
-     :on-click #(editor-handler/move-up-down % false)}
+    {:on-click #(editor-handler/move-up-down % false)}
     svg/move-down-block]
    [:button.bottom-action
-    {:style {:padding "5px"}
-     :on-click (fn [e]
-                 (let [old-content (state/sub [:editor/content parent-id])
-                       new-content (str old-content "\n")]
-                   (state/set-state! :editor/content {parent-id new-content}))
-                 (.stopPropagation e))}
+    {:on-click #(commands/simple-insert! parent-id "\n" {})}
     svg/multi-line-input]
    [:button.font-extrabold.bottom-action.-mt-1
-    {:style {:padding "5px"}
-     :on-click (fn [e]
-                 (let [old-content (state/sub [:editor/content parent-id])
-                       new-content (str old-content "[[]]")]
-                   (state/set-state! :editor/content {parent-id new-content}))
-                 (.stopPropagation e))}
+    {:on-click #(commands/simple-insert! parent-id "[[]]" {:backward-pos 2})}
     "[[]]"]
    [:button.font-extrabold.bottom-action.-mt-1
-    {:style {:padding "5px"}
-     :on-click (fn [e]
-                 (let [old-content (state/sub [:editor/content parent-id])
-                       new-content (str old-content "(())")]
-                   (state/set-state! :editor/content {parent-id new-content}))
-                 (.stopPropagation e))}
+    {:on-click #(commands/simple-insert! parent-id "(())" {:backward-pos 2})}
     "(())"]])
 
 (rum/defcs input < rum/reactive
@@ -632,7 +604,8 @@
                       :on-hide
                       (fn [state e event]
                         (let [target (.-target e)]
-                          (when-not (d/has-class? target "bottom-action")
+                          (if (d/has-class? target "bottom-action") ;; FIXME: not particular case
+                            (.preventDefault e)
                             (let [{:keys [on-hide format value block id repo dummy?]} (get-state state)]
                               (when on-hide
                                 (on-hide value event))
diff --git a/src/main/frontend/page.cljs b/src/main/frontend/page.cljs
index 3bda21b70..5643be816 100644
--- a/src/main/frontend/page.cljs
+++ b/src/main/frontend/page.cljs
@@ -1,6 +1,7 @@
 (ns frontend.page
   (:require [rum.core :as rum]
             [frontend.state :as state]
+            [frontend.ui :as ui]
             [frontend.components.sidebar :as sidebar]
             [frontend.context.i18n :as i18n]))
 
@@ -9,9 +10,16 @@
   (view route-match))
 
 (rum/defc current-page < rum/reactive
-  {:did-mount (fn [state]
-                (state/set-root-component! (:rum/react-component state))
-                state)}
+  {:did-mount    (fn [state]
+                   (state/set-root-component! (:rum/react-component state))
+                   (ui/inject-document-devices-envs!)
+                   (ui/inject-dynamic-style-node!)
+                   (let [teardown-fn (comp (ui/setup-patch-ios-fixed-bottom-position!))]
+                     (assoc state ::teardown teardown-fn)))
+   :will-unmount (fn [state]
+                   (let [teardown (::teardown state)]
+                     (when-not (nil? teardown)
+                       (teardown))))}
   []
   (when-let [route-match (state/sub :route-match)]
     (i18n/tongue-provider
diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs
index 5df75a373..f521fa8cd 100644
--- a/src/main/frontend/ui.cljs
+++ b/src/main/frontend/ui.cljs
@@ -104,27 +104,27 @@
              [:svg.h-6.w-6.text-green-400
               {:stroke "currentColor", :viewBox "0 0 24 24", :fill "none"}
               [:path
-               {:d "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
-                :stroke-width "2",
-                :stroke-linejoin "round",
+               {:d "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                :stroke-width "2"
+                :stroke-linejoin "round"
                 :stroke-linecap "round"}]]]
             :warning
             ["text-gray-900"
              [:svg.h-6.w-6.text-yellow-500
               {:stroke "currentColor", :viewBox "0 0 24 24", :fill "none"}
               [:path
-               {:d "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
-                :stroke-width "2",
-                :stroke-linejoin "round",
+               {:d "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                :stroke-width "2"
+                :stroke-linejoin "round"
                 :stroke-linecap "round"}]]]
 
             ["text-red-500"
              [:svg.h-6.w-6.text-red-500
               {:view-box "0 0 20 20", :fill "currentColor"}
               [:path
-               {:clip-rule "evenodd",
+               {:clip-rule "evenodd"
                 :d
-                "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+                "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                 :fill-rule "evenodd"}]]])]
       [:div.inset-0.flex.items-end.justify-center.px-4.py-3.pointer-events-none.sm:px-6.sm:py-3.sm:items-start.sm:justify-end
        {:style {:z-index (if (or (= state "exiting")
@@ -154,9 +154,9 @@
              [:svg.h-5.w-5
               {:fill "currentColor", :view-Box "0 0 20 20"}
               [:path
-               {:clip-rule "evenodd",
+               {:clip-rule "evenodd"
                 :d
-                "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                 :fill-rule "evenodd"}]]]]]]]]])))
 
 (rum/defc notification < rum/reactive
@@ -193,6 +193,55 @@
 (defn get-scroll-top []
   (.-scrollTop (main-node)))
 
+(defn get-dynamic-style-node
+  []
+  (js/document.getElementById "dynamic-style-scope"))
+
+(defn inject-document-devices-envs!
+  []
+  (let [cl (.-classList js/document.documentElement)]
+    (if (util/ios?) (.add cl "is-ios"))
+    (if (util/safari?) (.add cl "is-safari"))))
+
+(defn inject-dynamic-style-node!
+  []
+  (let [style (get-dynamic-style-node)]
+    (if (nil? style)
+      (let [node (js/document.createElement "style")]
+        (set! (.-id node) "dynamic-style-scope")
+        (.appendChild js/document.head node))
+      style)))
+
+(defn setup-patch-ios-fixed-bottom-position!
+  "fix a common issue about ios webpage viewport
+   when soft keyboard setup"
+  []
+  (if (and
+       (util/ios?)
+       (not (nil? js/window.visualViewport)))
+    (let [viewport js/visualViewport
+          style (get-dynamic-style-node)
+          sheet (.-sheet style)
+          raf-pending? (atom false)
+          set-raf-pending! #(reset! raf-pending? %)
+          handler
+          (fn []
+            (if-not @raf-pending?
+              (let [f (fn []
+                        (set-raf-pending! false)
+                        (let [vh (+ (.-offsetTop viewport) (.-height viewport))
+                              rule (.. sheet -rules (item 0))
+                              set-top #(set! (.. rule -style -top) (str % "px"))]
+                          (set-top vh)))]
+                (set-raf-pending! true)
+                (js/window.requestAnimationFrame f))))]
+      (.insertRule sheet ".fix-ios-fixed-bottom {bottom:unset !important; transform: translateY(-100%); top: 0px;}")
+      (.addEventListener viewport "resize" handler)
+      (.addEventListener viewport "scroll" handler)
+      (fn []
+        (.removeEventListener viewport "resize" handler)
+        (.removeEventListener viewport "scroll" handler)))))
+
 ;; FIXME: compute the right scroll position when scrolling back to the top
 (defn on-scroll
   [on-load on-top-reached]
@@ -354,9 +403,9 @@
      [:svg.h-6.w-6
       {:stroke "currentColor", :view-box "0 0 24 24", :fill "none"}
       [:path
-       {:d "M6 18L18 6M6 6l12 12",
-        :stroke-width "2",
-        :stroke-linejoin "round",
+       {:d "M6 18L18 6M6 6l12 12"
+        :stroke-width "2"
+        :stroke-linejoin "round"
         :stroke-linecap "round"}]]]]
 
    (panel-content close-fn)])
diff --git a/src/main/frontend/util.cljs b/src/main/frontend/util.cljs
index 63332e2a4..c70888b54 100644
--- a/src/main/frontend/util.cljs
+++ b/src/main/frontend/util.cljs
@@ -18,6 +18,17 @@
             [clojure.pprint :refer [pprint]]
             [goog.userAgent]))
 
+;; envs
+(defn ios?
+  []
+  (not (nil? (re-find #"iPad|iPhone|iPod" js/navigator.userAgent))))
+
+(defn safari?
+  []
+  (let [ua (string/lower-case js/navigator.userAgent)]
+    (and (string/includes? ua "webkit")
+         (not (string/includes? ua "chrome")))))
+
 (defn format
   [fmt & args]
   (apply gstring/format fmt args))