From 7adda3e71f8d7e39cbd2ac30cb30799c431a34cb Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Wed, 10 Nov 2021 04:04:09 +0530
Subject: [PATCH] Feature update

-- Added text basic text formatting toolbar as floating widget for selected text

-- Implement unique content sanitization and upload
---
 components.js     | 243 ++++++++++++++++++-
 css/main.css      |  88 ++++---
 css/main.min.css  |   2 +-
 css/main.scss     |  80 ++++---
 index.html        | 599 ++++++++++++++++++++++++++--------------------
 package-lock.json |  13 +
 package.json      |  22 ++
 7 files changed, 707 insertions(+), 340 deletions(-)
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/components.js b/components.js
index 369eb45..4c81c44 100644
--- a/components.js
+++ b/components.js
@@ -2257,6 +2257,7 @@ smSelect.innerHTML = `
     -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
     white-space: nowrap;
+    font-weight: 700;
 }
 .selection{
     border-radius: 0.3rem;
@@ -2356,6 +2357,7 @@ customElements.define('sm-select', class extends HTMLElement {
         this.availableOptions
         this.previousOption
         this.isOpen = false;
+        this.label = ''
         this.slideDown = [{
             transform: `translateY(-0.5rem)`,
             opacity: 0
@@ -2386,7 +2388,7 @@ customElements.define('sm-select', class extends HTMLElement {
         this.selectedOptionText = this.shadowRoot.querySelector('.selected-option-text')
     }
     static get observedAttributes() {
-        return ['value', 'disabled']
+        return ['disabled', 'label']
     }
     get value() {
         return this.getAttribute('value')
@@ -2403,7 +2405,7 @@ customElements.define('sm-select', class extends HTMLElement {
             }
             firstElement.classList.add('check-selected')
             this.value = firstElement.getAttribute('value')
-            this.selectedOptionText.textContent = firstElement.textContent
+            this.selectedOptionText.textContent = `${this.label}${firstElement.textContent}`
             this.previousOption = firstElement;
             if (fire) {
                 this.fireEvent()
@@ -2464,7 +2466,7 @@ customElements.define('sm-select', class extends HTMLElement {
     handleOptionSelection(e) {
         if (this.previousOption !== document.activeElement) {
             this.value = document.activeElement.getAttribute('value')
-            this.selectedOptionText.textContent = document.activeElement.textContent;
+            this.selectedOptionText.textContent = `${this.label}${document.activeElement.textContent}`;
             this.fireEvent()
             if (this.previousOption) {
                 this.previousOption.classList.remove('check-selected')
@@ -2534,6 +2536,8 @@ customElements.define('sm-select', class extends HTMLElement {
             } else {
                 this.selection.setAttribute('tabindex', '0')
             }
+        } else if (name === 'label') {
+            this.label = this.hasAttribute('label') ? `${this.getAttribute('label')} ` : ''
         }
     }
 })
@@ -3190,4 +3194,237 @@ customElements.define('sm-tab-panels', class extends HTMLElement {
         intersectionObserver.disconnect()
         document.removeEventListener(`switchedtab${this.id}`, this.handleTabChange)
     }
+})
+
+const smSwitch = document.createElement('template')
+smSwitch.innerHTML = `	
+<style>
+    *{
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+    }
+    
+    :host{
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        --accent-color: #4d2588;
+        --text-color: 17, 17, 17;
+        --background-color: 255, 255, 255;
+    }
+    label{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        width: 100%;
+        outline: none;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+    }
+    :host(:not([disabled])) label:focus-visible{
+        -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
+            box-shadow: 0 0 0 0.1rem var(--accent-color);
+    }
+    :host([disabled]) {
+        cursor: not-allowed;
+        opacity: 0.6;
+        pointer-events: none;
+    }
+    .switch {
+        position: relative;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        width: 2.4rem;
+        flex-shrink: 0;
+        margin-left: auto;
+        padding: 0.2rem;
+        cursor: pointer;
+        border-radius: 2rem;
+    }
+    
+    input {
+        display: none;
+    }
+    
+    .track {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1.4rem;
+        -webkit-transition: background 0.3s;
+        -o-transition: background 0.3s;
+        transition: background 0.3s;
+        background: rgba(var(--text-color), 0.4);
+        -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;
+                box-shadow: 0 0.1rem 0.3rem #00000040 inset;
+        border-radius: 1rem;
+    }
+    
+    .switch:active .button::after,
+    .switch:focus .button::after{
+        opacity: 1
+    }
+    .switch:focus-visible .button::after{
+        opacity: 1
+    }
+    
+    .button::after{
+        content: '';
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        position: absolute;
+        height: 2.6rem;
+        width: 2.6rem;
+        background: rgba(var(--text-color), 0.2);
+        border-radius: 2rem;
+        opacity: 0;
+        -webkit-transition: opacity 0.3s;
+        -o-transition: opacity 0.3s;
+        transition: opacity 0.3s;
+    }
+    
+    .button {
+        position: relative;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        height: 1rem;
+        width: 1rem;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        border-radius: 1rem;
+        -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;
+                box-shadow: 0 0.1rem 0.4rem #00000060;
+        -webkit-transition: -webkit-transform 0.3s;
+        transition: -webkit-transform 0.3s;
+        -o-transition: transform 0.3s;
+        transition: transform 0.3s;
+        transition: transform 0.3s, -webkit-transform 0.3s;
+        border: solid 0.3rem white;
+    }
+    
+    input:checked ~ .button {
+        -webkit-transform: translateX(100%);
+            -ms-transform: translateX(100%);
+                transform: translateX(100%);
+    }
+    
+    input:checked ~ .track {
+        background: var(--accent-color);
+    }
+</style>
+<label tabindex="0">
+    <slot name="left"></slot>
+    <div part="switch" class="switch">
+        <input type="checkbox">
+        <div class="track"></div>
+        <div class="button"></div>
+    </div>
+    <slot name="right"></slot>
+</label>`
+
+customElements.define('sm-switch', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smSwitch.content.cloneNode(true))
+        this.switch = this.shadowRoot.querySelector('.switch');
+        this.input = this.shadowRoot.querySelector('input')
+        this.isChecked = false
+        this.isDisabled = false
+
+        this.dispatch = this.dispatch.bind(this)
+    }
+
+    static get observedAttributes() {
+        return ['disabled', 'checked']
+    }
+
+    get disabled() {
+        return this.isDisabled
+    }
+
+    set disabled(val) {
+        if (val) {
+            this.setAttribute('disabled', '')
+        } else {
+            this.removeAttribute('disabled')
+        }
+    }
+
+    get checked() {
+        return this.isChecked
+    }
+
+    set checked(value) {
+        if (value) {
+            this.setAttribute('checked', '')
+        } else {
+            this.removeAttribute('checked')
+        }
+    }
+
+    dispatch() {
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.isChecked
+            }
+        }))
+    }
+
+    connectedCallback() {
+        this.addEventListener('keydown', e => {
+            if (e.code === "Space" && !this.isDisabled) {
+                e.preventDefault()
+                this.input.click()
+            }
+        })
+        this.input.addEventListener('click', e => {
+            if (this.input.checked)
+                this.checked = true
+            else
+                this.checked = false
+            this.dispatch()
+        })
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === 'disabled') {
+                if (this.hasAttribute('disabled')) {
+                    this.disabled = true
+                }
+                else {
+                    this.disabled = false
+                }
+            }
+            else if (name === 'checked') {
+                if (this.hasAttribute('checked')) {
+                    this.isChecked = true
+                    this.input.checked = true
+                }
+                else {
+                    this.isChecked = false
+                    this.input.checked = false
+                }
+            }
+        }
+    }
+
 })
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 729c463..7918eb6 100644
--- a/css/main.css
+++ b/css/main.css
@@ -137,7 +137,6 @@ a:any-link:focus-visible {
 sm-input {
   font-size: 0.9rem;
   --border-radius: 0.3rem;
-  --background: var(--accent-color--light);
 }
 
 sm-button {
@@ -385,7 +384,7 @@ ul {
 .icon-button {
   padding: 0.6rem;
   border-radius: 0.8rem;
-  background-color: var(--accent-color--light);
+  background-color: rgba(var(--text-color), 0.1);
   height: -webkit-max-content;
   height: -moz-max-content;
   height: max-content;
@@ -463,7 +462,7 @@ button:active,
           align-items: center;
   width: 100%;
   grid-template-columns: auto 1fr;
-  gap: 0 0.3rem;
+  gap: 0 0.5rem;
   margin-right: 1rem;
 }
 .logo h4 {
@@ -499,26 +498,6 @@ details[open] > summary .icon {
           transform: rotate(180deg);
 }
 
-strip-select {
-  --gap: 0;
-  background-color: var(--accent-color--light);
-  border-radius: 0.3rem;
-}
-
-strip-option {
-  font-weight: 500;
-  font-size: 0.8rem;
-  --border-radius: 0;
-  --active-option-color: rgba(var(--background-color), 1);
-  --active-option-background-color: var(--accent-color);
-}
-strip-option:first-of-type {
-  --border-radius: 0.3rem 0 0 0.3rem;
-}
-strip-option:last-of-type {
-  --border-radius: 0 0.3rem 0.3rem 0;
-}
-
 sm-select,
 sm-option {
   font-size: 0.9rem;
@@ -553,15 +532,13 @@ sm-checkbox {
 #main_header {
   display: grid;
   gap: 1rem;
-  padding: 1rem;
+  padding: 1rem 1.5rem;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   grid-template-columns: auto 1fr auto auto;
   grid-column: 1/-1;
   background-color: var(--foreground-color);
-  border-radius: 0 0 1rem 1rem;
-  border: solid thin rgba(var(--text-color), 0.16);
 }
 
 .label {
@@ -607,18 +584,17 @@ sm-checkbox {
 }
 
 .content-card {
-  width: min(70ch, 100%);
+  width: min(60ch, 100%);
   border-radius: 0.5rem;
   background-color: var(--foreground-color);
   border: solid thin rgba(var(--text-color), 0.16);
 }
-
 .content__area {
   border-radius: inherit;
   padding: 1rem;
-  line-height: 1.7;
   white-space: pre-line;
-  font-size: 0.9rem !important;
+  font-size: 0.9rem;
+  line-height: 1.7;
   color: rgba(var(--text-color), 0.8);
   background-color: rgba(var(--text-color), 0.02);
   border-radius: 0.5rem;
@@ -626,6 +602,12 @@ sm-checkbox {
   transition: -webkit-box-shadow 0.1s;
   transition: box-shadow 0.1s;
   transition: box-shadow 0.1s, -webkit-box-shadow 0.1s;
+  min-height: 70vh;
+}
+.content__area:empty::before {
+  content: attr(placeholder);
+  opacity: 0.6;
+  pointer-events: none;
 }
 .content__area:focus-within {
   outline: none;
@@ -653,6 +635,11 @@ sm-checkbox {
 .formatting-button {
   padding: 0.2rem;
   border-radius: 0.3rem;
+  -webkit-transition: background-color 0.1s;
+  transition: background-color 0.1s;
+}
+.formatting-button.active:hover {
+  background-color: var(--accent-color);
 }
 
 .active {
@@ -670,22 +657,45 @@ sm-checkbox {
   -webkit-box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
           box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
   border-radius: 0.5rem;
+  overflow: hidden;
   justify-self: center;
+  padding-left: 1.3rem;
 }
-.quote-template .icon {
-  fill: var(--accent-color);
-  height: 4rem;
-  width: 4rem;
-  -webkit-transform: scaleX(-1);
-          transform: scaleX(-1);
+.quote-template::before {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 0.3rem;
+  background-color: var(--accent-color);
+}
+.quote-template blockquote {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 .quote-template figcaption {
   margin-top: 0.5rem;
   color: rgba(var(--text-color), 0.8);
   font-size: 0.8rem;
 }
-.quote-template figcaption::before {
-  content: "- ";
+
+#text_toolbar {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.3s;
+  background-color: var(--foreground-color);
+  padding: 0.3rem;
+  border-radius: 0.3rem;
+  -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
+          box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
 }
 
 @media screen and (max-width: 40rem) and (any-hover: none) {
@@ -772,7 +782,7 @@ button {
   }
   .interact:hover,
 button:hover {
-    background-color: var(--accent-color--light);
+    background-color: rgba(var(--text-color), 0.1);
   }
 
   .transaction-card button {
diff --git a/css/main.min.css b/css/main.min.css
index c8165fc..b066a08 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Inter",sans-serif}:root{font-size:clamp(1rem, 1.2vmax, 1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #504dff;--accent-color--light: #eeeeff;--text-color: 36, 36, 36;--background-color: 248, 248, 248;--foreground-color: rgb(255, 255, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;--loan-color: rgb(255, 171, 93);scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #a3a1ff;--accent-color--light: rgba(142, 140, 255, 0.06);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(24, 24, 24);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a;--loan-color: rgb(255, 232, 170)}body[data-theme=dark] sm-popup::part(popup){background-color:var(--foreground-color)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{-webkit-box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:.9rem;font-weight:500}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem;--background: var(--accent-color--light)}sm-button{--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.uppercase{letter-spacing:.05em}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.interact{position:relative;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;width:100%;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}button:active,.button:active,.interact:active{-webkit-transform:scale(0.96);transform:scale(0.96)}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){-ms-flex-line-pack:start;align-content:flex-start}.logo{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1rem minmax(0, 1fr) 1rem}.page-layout>*{grid-column:2/3}.page{height:100%}#main_header{display:grid;gap:1rem;padding:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr auto auto;grid-column:1/-1;background-color:var(--foreground-color);border-radius:0 0 1rem 1rem;border:solid thin rgba(var(--text-color), 0.16)}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}#article_wrapper{justify-self:center;padding:1rem 0;gap:.5rem 0}.heading{display:-webkit-box;display:-ms-flexbox;display:flex}.heading::before{content:"";width:.3rem;height:100%;margin-right:.7rem;border-radius:.5rem;background-color:var(--accent-color)}.section-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem}.content-card{width:min(70ch, 100%);border-radius:.5rem;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.16)}.content__area{border-radius:inherit;padding:1rem;line-height:1.7;white-space:pre-line;font-size:.9rem !important;color:rgba(var(--text-color), 0.8);background-color:rgba(var(--text-color), 0.02);border-radius:.5rem;-webkit-transition:-webkit-box-shadow .1s;transition:-webkit-box-shadow .1s;transition:box-shadow .1s;transition:box-shadow .1s, -webkit-box-shadow .1s}.content__area:focus-within{outline:none;-webkit-box-shadow:0 0 0 .1rem var(--accent-color) inset;box-shadow:0 0 0 .1rem var(--accent-color) inset}.content__options{gap:1rem;padding:.5rem 1rem;grid-template-columns:auto auto 1fr auto}.actionable-button{padding:.5rem .8rem;background-color:rgba(var(--text-color), 0.1);border-radius:2rem;border:solid thin rgba(var(--text-color), 0.3)}.actionable-button__title{font-size:.8rem;margin-left:.3rem}.formatting-button{padding:.2rem;border-radius:.3rem}.active{background-color:var(--accent-color)}.active .icon{fill:#fff}.quote-template{position:relative;padding:1rem;margin:1rem;background-color:var(--foreground-color);-webkit-box-shadow:0 .5rem 1rem -0.5rem rgba(0,0,0,.1);box-shadow:0 .5rem 1rem -0.5rem rgba(0,0,0,.1);border-radius:.5rem;justify-self:center}.quote-template .icon{fill:var(--accent-color);height:4rem;width:4rem;-webkit-transform:scaleX(-1);transform:scaleX(-1)}.quote-template figcaption{margin-top:.5rem;color:rgba(var(--text-color), 0.8);font-size:.8rem}.quote-template figcaption::before{content:"- "}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 90vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 90vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact,button{-webkit-transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,transform .3s;transition:background-color .3s,transform .3s,-webkit-transform .3s}.interact:hover,button:hover{background-color:var(--accent-color--light)}.transaction-card button{opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
+*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Inter",sans-serif}:root{font-size:clamp(1rem, 1.2vmax, 1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #504dff;--accent-color--light: #eeeeff;--text-color: 36, 36, 36;--background-color: 248, 248, 248;--foreground-color: rgb(255, 255, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;--loan-color: rgb(255, 171, 93);scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #a3a1ff;--accent-color--light: rgba(142, 140, 255, 0.06);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(24, 24, 24);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a;--loan-color: rgb(255, 232, 170)}body[data-theme=dark] sm-popup::part(popup){background-color:var(--foreground-color)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{-webkit-box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:.9rem;font-weight:500}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.uppercase{letter-spacing:.05em}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.interact{position:relative;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;width:100%;padding:1.5rem}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}button:active,.button:active,.interact:active{-webkit-transform:scale(0.96);transform:scale(0.96)}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){-ms-flex-line-pack:start;align-content:flex-start}.logo{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .5rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}sm-select,sm-option{font-size:.9rem}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1rem minmax(0, 1fr) 1rem}.page-layout>*{grid-column:2/3}.page{height:100%}#main_header{display:grid;gap:1rem;padding:1rem 1.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr auto auto;grid-column:1/-1;background-color:var(--foreground-color)}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.icon--success{fill:var(--green)}.icon--failure,.icon--error{fill:var(--danger-color)}#article_wrapper{justify-self:center;padding:1rem 0;gap:.5rem 0}.heading{display:-webkit-box;display:-ms-flexbox;display:flex}.heading::before{content:"";width:.3rem;height:100%;margin-right:.7rem;border-radius:.5rem;background-color:var(--accent-color)}.section-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem}.content-card{width:min(60ch, 100%);border-radius:.5rem;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.16)}.content__area{border-radius:inherit;padding:1rem;white-space:pre-line;font-size:.9rem;line-height:1.7;color:rgba(var(--text-color), 0.8);background-color:rgba(var(--text-color), 0.02);border-radius:.5rem;-webkit-transition:-webkit-box-shadow .1s;transition:-webkit-box-shadow .1s;transition:box-shadow .1s;transition:box-shadow .1s, -webkit-box-shadow .1s;min-height:70vh}.content__area:empty::before{content:attr(placeholder);opacity:.6;pointer-events:none}.content__area:focus-within{outline:none;-webkit-box-shadow:0 0 0 .1rem var(--accent-color) inset;box-shadow:0 0 0 .1rem var(--accent-color) inset}.content__options{gap:1rem;padding:.5rem 1rem;grid-template-columns:auto auto 1fr auto}.actionable-button{padding:.5rem .8rem;background-color:rgba(var(--text-color), 0.1);border-radius:2rem;border:solid thin rgba(var(--text-color), 0.3)}.actionable-button__title{font-size:.8rem;margin-left:.3rem}.formatting-button{padding:.2rem;border-radius:.3rem;-webkit-transition:background-color .1s;transition:background-color .1s}.formatting-button.active:hover{background-color:var(--accent-color)}.active{background-color:var(--accent-color)}.active .icon{fill:#fff}.quote-template{position:relative;padding:1rem;margin:1rem;background-color:var(--foreground-color);-webkit-box-shadow:0 .5rem 1rem -0.5rem rgba(0,0,0,.1);box-shadow:0 .5rem 1rem -0.5rem rgba(0,0,0,.1);border-radius:.5rem;overflow:hidden;justify-self:center;padding-left:1.3rem}.quote-template::before{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;content:"";height:100%;width:.3rem;background-color:var(--accent-color)}.quote-template blockquote{display:-webkit-box;display:-ms-flexbox;display:flex}.quote-template figcaption{margin-top:.5rem;color:rgba(var(--text-color), 0.8);font-size:.8rem}#text_toolbar{position:absolute;z-index:1;left:0;top:0;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;background-color:var(--foreground-color);padding:.3rem;border-radius:.3rem;-webkit-box-shadow:0 .1rem .2rem rgba(0,0,0,.06),0 .5rem 1rem -0.5rem rgba(0,0,0,.1);box-shadow:0 .1rem .2rem rgba(0,0,0,.06),0 .5rem 1rem -0.5rem rgba(0,0,0,.1)}@media screen and (max-width: 40rem)and (any-hover: none){.cancel-order span{display:none}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}.hide-on-mobile{display:none}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 90vw 1fr}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 90vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact,button{-webkit-transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,transform .3s;transition:background-color .3s,transform .3s,-webkit-transform .3s}.interact:hover,button:hover{background-color:rgba(var(--text-color), 0.1)}.transaction-card button{opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 356a8ab..98d214d 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -118,7 +118,6 @@ a:any-link:focus-visible {
 sm-input {
   font-size: 0.9rem;
   --border-radius: 0.3rem;
-  --background: var(--accent-color--light);
 }
 sm-button {
   --padding: 0.7rem 1rem;
@@ -348,7 +347,7 @@ ul {
 .icon-button {
   padding: 0.6rem;
   border-radius: 0.8rem;
-  background-color: var(--accent-color--light);
+  background-color: rgba(var(--text-color), 0.1);
   height: max-content;
   .icon {
     fill: var(--accent-color);
@@ -409,7 +408,7 @@ button:active,
   align-items: center;
   width: 100%;
   grid-template-columns: auto 1fr;
-  gap: 0 0.3rem;
+  gap: 0 0.5rem;
   margin-right: 1rem;
 
   h4 {
@@ -440,24 +439,6 @@ details {
     }
   }
 }
-strip-select {
-  --gap: 0;
-  background-color: var(--accent-color--light);
-  border-radius: 0.3rem;
-}
-strip-option {
-  font-weight: 500;
-  font-size: 0.8rem;
-  --border-radius: 0;
-  --active-option-color: rgba(var(--background-color), 1);
-  --active-option-background-color: var(--accent-color);
-  &:first-of-type {
-    --border-radius: 0.3rem 0 0 0.3rem;
-  }
-  &:last-of-type {
-    --border-radius: 0 0.3rem 0.3rem 0;
-  }
-}
 sm-select,
 sm-option {
   font-size: 0.9rem;
@@ -488,13 +469,11 @@ sm-checkbox {
 #main_header {
   display: grid;
   gap: 1rem;
-  padding: 1rem;
+  padding: 1rem 1.5rem;
   align-items: center;
   grid-template-columns: auto 1fr auto auto;
   grid-column: 1/-1;
   background-color: var(--foreground-color);
-  border-radius: 0 0 1rem 1rem;
-  border: solid thin rgba(var(--text-color), 0.16);
 }
 
 .label {
@@ -534,21 +513,29 @@ sm-checkbox {
 }
 
 .content-card {
-  width: min(70ch, 100%);
+  width: min(60ch, 100%);
   border-radius: 0.5rem;
   background-color: var(--foreground-color);
   border: solid thin rgba(var(--text-color), 0.16);
+  &--empty {
+  }
 }
 .content__area {
   border-radius: inherit;
   padding: 1rem;
-  line-height: 1.7;
   white-space: pre-line;
-  font-size: 0.9rem !important;
+  font-size: 0.9rem;
+  line-height: 1.7;
   color: rgba(var(--text-color), 0.8);
   background-color: rgba(var(--text-color), 0.02);
   border-radius: 0.5rem;
   transition: box-shadow 0.1s;
+  min-height: 70vh;
+  &:empty::before {
+    content: attr(placeholder);
+    opacity: 0.6;
+    pointer-events: none;
+  }
   &:focus-within {
     outline: none;
     box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
@@ -573,6 +560,10 @@ sm-checkbox {
 .formatting-button {
   padding: 0.2rem;
   border-radius: 0.3rem;
+  transition: background-color 0.1s;
+  &.active:hover {
+    background-color: var(--accent-color);
+  }
 }
 .active {
   background-color: var(--accent-color);
@@ -588,12 +579,19 @@ sm-checkbox {
   background-color: var(--foreground-color);
   box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
   border-radius: 0.5rem;
+  overflow: hidden;
   justify-self: center;
-  .icon {
-    fill: var(--accent-color);
-    height: 4rem;
-    width: 4rem;
-    transform: scaleX(-1);
+  padding-left: 1.3rem;
+  &::before {
+    display: flex;
+    position: absolute;
+    content: "";
+    height: 100%;
+    width: 0.3rem;
+    background-color: var(--accent-color);
+  }
+  blockquote {
+    display: flex;
   }
   .quote {
   }
@@ -601,12 +599,22 @@ sm-checkbox {
     margin-top: 0.5rem;
     color: rgba(var(--text-color), 0.8);
     font-size: 0.8rem;
-    &::before {
-      content: "- ";
-    }
   }
 }
 
+#text_toolbar {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  transition: transform 0.3s;
+  background-color: var(--foreground-color);
+  padding: 0.3rem;
+  border-radius: 0.3rem;
+  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06),
+    0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
+}
+
 @media screen and (max-width: 40rem) and (any-hover: none) {
   .cancel-order {
     span {
@@ -686,7 +694,7 @@ sm-checkbox {
   button {
     transition: background-color 0.3s, transform 0.3s;
     &:hover {
-      background-color: var(--accent-color--light);
+      background-color: rgba(var(--text-color), 0.1);
     }
   }
   .transaction-card {
diff --git a/index.html b/index.html
index 2cd29f8..b9ee982 100644
--- a/index.html
+++ b/index.html
@@ -35,9 +35,7 @@
             //for cloud apps
             subAdmins: [],
             application: "TEST_MODE",
-            appObjects: {
-                cc: {}
-            },
+            appObjects: {},
             generalData: {},
             lastVC: {}
         }
@@ -60,10 +58,12 @@
     </sm-popup>
     <header id="main_header">
         <div class="logo">
-            <svg class="main-logo" viewBox="0 0 27.25 32">
-                <title>RanchiMall</title>
-                <path
-                    d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
+            <svg class="main-logo" width="23" height="22" viewBox="0 0 23 22" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M15 0.749881C10.9026 2.35002 8 6.33604 8 11C8 15.664 10.9026 19.65 15 21.2501C13.7603 21.7343 12.4112 22 11 22C4.92487 22 0 17.0751 0 11C0 4.92487 4.92487 0 11 0C12.4112 0 13.7603 0.26573 15 0.749881Z" />
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M14 16.591C16.2349 15.7182 17.8182 13.544 17.8182 11C17.8182 8.45602 16.2349 6.28183 14 5.40903C14.6762 5.14494 15.4121 5 16.1818 5C19.4955 5 22.1818 7.68629 22.1818 11C22.1818 14.3137 19.4955 17 16.1818 17C15.4121 17 14.6762 16.8551 14 16.591Z" />
             </svg>
             <div class="grid">
                 <span class="label">RanchiMall</span>
@@ -71,8 +71,15 @@
             </div>
         </div>
         <div id="article_name_wrapper" class="flex align-center justify-center">
+            <button title="Create new article" class="button__icon--left" onclick="showPopup('create_article_popup')">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                </svg>
+            </button>
             <h4 id="current_article_name"></h4>
-            <button class="button__icon--right">
+            <button class="button__icon--right" onclick="showPopup('article_list_popup')">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                     fill="#000000">
                     <path d="M24 24H0V0h24v24z" fill="none" opacity=".87" />
@@ -90,8 +97,8 @@
             </svg>
         </button>
     </header>
-    <section>
-        <button id="strong_button" class="formatting-button" onclick="make.bold()">
+    <div id="text_toolbar" class="hide-completely">
+        <button id="strong_button" class="formatting-button" onclick="formatDoc('bold')">
             <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                 fill="#000000">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -99,14 +106,14 @@
                     d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" />
             </svg>
         </button>
-        <button id="em_button" class="formatting-button" onclick="make.italic()">
+        <button id="em_button" class="formatting-button" onclick="formatDoc('italic');">
             <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                 fill="#000000">
                 <path d="M0 0h24v24H0V0z" fill="none" />
                 <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4h-8z" />
             </svg>
         </button>
-        <button id="u_button" class="formatting-button" onclick="make.underlined()">
+        <button id="u_button" class="formatting-button" onclick="formatDoc('underline');">
             <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                 fill="#000000">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -114,21 +121,8 @@
                     d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" />
             </svg>
         </button>
-        <button id="a_button" class="formatting-button" onclick="make.link()">
-            <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
-                viewBox="0 0 24 24" width="24px" fill="#000000">
-                <g>
-                    <rect fill="none" height="24" width="24" />
-                </g>
-                <g>
-                    <path
-                        d="M8,11h8v2H8V11z M20.1,12H22c0-2.76-2.24-5-5-5h-4v1.9h4C18.71,8.9,20.1,10.29,20.1,12z M3.9,12c0-1.71,1.39-3.1,3.1-3.1h4 V7H7c-2.76,0-5,2.24-5,5s2.24,5,5,5h4v-1.9H7C5.29,15.1,3.9,13.71,3.9,12z M19,12h-2v3h-3v2h3v3h2v-3h3v-2h-3V12z" />
-                </g>
-            </svg>
-        </button>
-    </section>
+    </div>
     <div id="article_wrapper" class="grid page-layout"></div>
-    <div contenteditable="true"></div>
     <section class="grid page-layout">
         <div id="action_button_group" class="flex align-center gap-0-5">
             <span>
@@ -159,9 +153,64 @@
             </button>
         </div>
     </section>
+    <sm-popup id="article_list_popup">
+        <header slot="header" class="popup__header">
+            <div class="grid">
+                <div class="flex align-center space-between">
+                    <h3>All articles</h3>
+                    <sm-select label="Sort by:">
+                        <sm-option value="time">Date created</sm-option>
+                        <sm-option value="az">A-Z</sm-option>
+                    </sm-select>
+                </div>
+                <sm-input placeholder="Search articles" type="search"></sm-input>
+            </div>
+        </header>
+    </sm-popup>
+    <sm-popup id="create_article_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close" onclick="hidePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h3>Create article</h3>
+        </header>
+        <sm-form>
+            <sm-input placeholder="Article title" required></sm-input>
+            <sm-checkbox checked>
+                <div class="grid button__icon--right gap-0-5">
+                    Set as default
+                    <p style="font-size: 0.8rem;">
+                        This article will be opened by default for everyone when CC is first loaded.
+                    </p>
+                </div>
+            </sm-checkbox>
+            <!-- <sm-switch>
+                <div slot="left">
+                    Make private
+                </div>
+            </sm-switch> -->
+            <sm-button variant="primary">Create</sm-button>
+        </sm-form>
+    </sm-popup>
+    <template id="section_template">
+        <h4 class="heading"></h4>
+        <section class="article-section flex gap-1">
+            <div class="content-card content-card--empty">
+                <div class="content__area" data-type="origin" placeholder="Write something new or edit existing content"
+                    contenteditable="true"></div>
+                <button class="submit-entry">Submit</button>
+            </div>
+            <div class="content-card-container"></div>
+        </section>
+    </template>
     <template id="content_card_template">
         <div class="content-card">
-            <div class="paragraph-wrapper"></div>
+            <div class="content__area"></div>
             <div class="content__options grid align-center">
                 <button class="version-history-button" title="See version history">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
@@ -184,17 +233,12 @@
         </div>
     </template>
     <template id="quote_template">
-        <figure class="quote-template grid gap-0-5">
-            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
-                fill="#000000">
-                <path d="M0 0h24v24H0V0z" fill="none" />
-                <path
-                    d="M7.17 17c.51 0 .98-.29 1.2-.74l1.42-2.84c.14-.28.21-.58.21-.89V8c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h2l-1.03 2.06c-.45.89.2 1.94 1.2 1.94zm10 0c.51 0 .98-.29 1.2-.74l1.42-2.84c.14-.28.21-.58.21-.89V8c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h2l-1.03 2.06c-.45.89.2 1.94 1.2 1.94z" />
-            </svg>
-            <blockquote>
-                <p class="quote"></p>
+        <figure class="quote-template grid gap-0-5" contenteditable="false">
+            <blockquote class="flex">
+                <p class="quote" contenteditable="true"></p>
             </blockquote>
-            <figcaption><span class="by"></span>, <cite class="citation"></cite></figcaption>
+            <figcaption class="flex"><span class="by" contenteditable="true"></span><cite class="citation"
+                    contenteditable="true"></cite></figcaption>
         </figure>
     </template>
     <script id="ui_utils">
@@ -593,216 +637,263 @@
             }
         }
     </script>
+    <script>
+        /* PatienceDiff
+* https://github.com/jonTrent/PatienceDiff/blob/5411f78d0cf2a0d2277548ef3cc9626ccdeb4277/PatienceDiff.js
+*/
+        window.patienceDiff = function (e, n, t) { function i(e, n, t) { var i = new Map; for (let l = n; l <= t; l++) { let n = e[l]; i.has(n) ? (i.get(n).count++, i.get(n).index = l) : i.set(n, { count: 1, index: l }) } return i.forEach((e, n, t) => { 1 !== e.count ? t.delete(n) : t.set(n, e.index) }), i } function l(e, n, t, l, o, d) { let r = i(e, n, t), u = i(l, o, d); return r.forEach((e, n, t) => { u.has(n) ? t.set(n, { indexA: e, indexB: u.get(n) }) : t.delete(n) }), r } let o = [], d = 0, r = 0, u = [], h = [], f = [], x = []; function s(t, i) { i < 0 ? (u.push(e[t]), h.push(o.length), d++) : t < 0 && (f.push(n[i]), x.push(o.length), r++), o.push({ line: 0 <= t ? e[t] : n[i], aIndex: t, bIndex: i }) } function g(t, i, o, d) { for (; t <= i && o <= d && e[t] === n[o];)s(t++, o++); let r = i; for (; t <= i && o <= d && e[i] === n[d];)i--, d--; let u = l(e, t, i, n, o, d); if (0 === u.size) { for (; t <= i;)s(t++, -1); for (; o <= d;)s(-1, o++) } else a(t, i, o, d, u); for (; i < r;)s(++i, ++d) } function a(t, i, o, d, r) { var u = function (e) { var n = []; e.forEach((e, t, i) => { let l = 0; for (; n[l] && n[l][n[l].length - 1].indexB < e.indexB;)l++; n[l] || (n[l] = []), 0 < l && (e.prev = n[l - 1][n[l - 1].length - 1]), n[l].push(e) }); var t = []; if (0 < n.length) { let e = n.length - 1; for (t = [n[e][n[e].length - 1]]; t[t.length - 1].prev;)t.push(t[t.length - 1].prev) } return t.reverse() }(r || l(e, t, i, n, o, d)); if (0 === u.length) g(t, i, o, d); else { let e; for ((t < u[0].indexA || o < u[0].indexB) && g(t, u[0].indexA - 1, o, u[0].indexB - 1), e = 0; e < u.length - 1; e++)g(u[e].indexA, u[e + 1].indexA - 1, u[e].indexB, u[e + 1].indexB - 1); (u[e].indexA <= i || u[e].indexB <= d) && g(u[e].indexA, i, u[e].indexB, d) } } return a(0, e.length - 1, 0, n.length - 1), t ? { lines: o, lineCountDeleted: d, lineCountInserted: r, lineCountMoved: 0, aMove: u, aMoveIndex: h, bMove: f, bMoveIndex: x } : { lines: o, lineCountDeleted: d, lineCountInserted: r, lineCountMoved: 0 } };
+
+        /* Usage
+        getDiff(oldStr, newStr)
+        oldStr  - Old String
+        newStr  - New String
+        returns diff 
+        updateString(oldStr, diff)
+        oldStr  - Same old String
+        diff    - returned data from getDiff function
+        returns newStr
+        */
+
+        function getDiff(oldStr, newStr) {
+            let d = patienceDiff(oldStr.split(" "), newStr.split(" "), true);
+            return [d.aMoveIndex, d.bMove, d.bMoveIndex]
+        }
+
+        function updateString(oldStr, diff) {
+            let str = oldStr.split(" ");
+            let diffObj = {};
+            diff[0].forEach(e => diffObj[e] = null);
+            diff[2].forEach((e, i) => diffObj[e] = diff[1][i]);
+            for (let i in diffObj)
+                diffObj[i] === null ? str[i] = null : str.splice(i, 0, diffObj[i])
+            str = str.filter(e => e != null);
+            return str.join(" ");
+        }
+    </script>
+    <script id="cc">
+        const cc = {
+            createNewArticle(title) {
+                const uid = floCrypto.randString(16, true)
+                floGlobals.appObjects.cc['defaultArticle'] = uid
+                floGlobals.appObjects.cc['articleList'][uid] = {
+                    title,
+                    timestamp: Date.now()
+                }
+                floCloudAPI.updateObjectData('cc')
+                    .then((res) => {
+                        console.log('created article entry', res)
+                    })
+                    .catch(err => console.error(err))
+                floGlobals.appObjects[uid] = {
+                    public: true,
+                    editors: [],
+                    sections: [{
+                        id: floCrypto.randString(16, true),
+                        title: 'Introduction',
+                    }, {
+                        id: floCrypto.randString(16, true),
+                        title: 'core',
+                    }
+                    ]
+                }
+                floCloudAPI.resetObjectData(uid)
+                    .then((res) => {
+                        console.log('created article', res)
+                    })
+                    .catch(err => console.error(err))
+            }
+        }
+
+        getRef('article_wrapper').addEventListener('click', e => {
+            if (e.target.closest('.submit-entry')) {
+                const parent = e.target.parentNode.querySelector('.content__area')
+                parent.querySelectorAll('[style=""]').forEach((el) => {
+                    el.removeAttribute('style')
+                })
+                const clean = DOMPurify.sanitize(parent.innerHTML);
+                floCloudAPI.sendGeneralData({
+                    section: parent.closest('.article-section').dataset.id,
+                    origin: parent.dataset.type === 'origin' ? floCrypto.randString(16, true) : parent.parentNode.dataset.uid,
+                    data: parent.dataset.type === 'origin' ? clean : getDiff('', clean),
+                }, `${currentArticle.id}_gd`)
+                    .then((res) => {
+                        console.log(res)
+                        notify('sent data', 'success')
+                        parent.innerHTML = ''
+                    })
+            }
+        })
+        getRef('article_wrapper').addEventListener("paste", e => {
+            const paste = (event.clipboardData || window.clipboardData).getData('text');
+
+            const selection = window.getSelection();
+            if (!selection.rangeCount) return false;
+            selection.deleteFromDocument();
+            selection.getRangeAt(0).insertNode(document.createTextNode(paste));
+
+            event.preventDefault();
+        })
+        getRef('article_wrapper').addEventListener("focusin", e => {
+            if (e.target.closest('.content__area')) {
+                const target = e.target.closest('.content__area')
+                if (target.childNodes[0] === undefined) {
+                    target.innerHTML = `<p><br/></p>`
+                }
+                childObserver.observe(target, {
+                    childList: true
+                })
+            }
+        })
+        getRef('article_wrapper').addEventListener("focusout", e => {
+            if (e.target.closest('.content__area')) {
+                childObserver.disconnect()
+            }
+        })
+        const childObserver = new MutationObserver((mutations, observer) => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'childList' && mutation.target.childNodes[0] === undefined) {
+                    observer.disconnect()
+                    mutation.target.innerHTML = `<p><br/></p>`
+                    childObserver.observe(mutation.target, {
+                        childList: true
+                    })
+                }
+            })
+        })
+        document.execCommand("defaultParagraphSeparator", false, "p");
+        function formatDoc(sCmd, sValue) {
+            document.execCommand(sCmd, false, sValue);
+        }
+    </script>
     <script>
         const CC = {
             defaultArticle: '',
             he78r1he74187er1h8e: 'Big Techs And Their Dominance'
         }
-        const articles = {
-            he78r1he74187er1h8e: {
-                public: false,
-                editors: [],
-                sections: {
-                    edg4ewr8g4e98r: {
-                        type: 'heading',
-                        content: 'Introduction'
-                    },
-                    erg981erg81eer: {
-                        type: 'section'
-                    },
-                    rg8e4r98g1erg1: {
-                        type: 'heading',
-                        content: 'Core'
-                    },
-                    e9r81g8er1gerg8: {
-                        type: 'section',
-                        pieces: ['erg1e98r1ge9r1']
-                    },
-                },
-                pieces: {
-                    erg1e98r1ge9r1: {
-                        score: 47,
-                        content: ['ihejbn', 'ewfgjibweg']
-                    },
-                    rgrer1g98er1g81: {
-                        score: 47,
-                        paragraphs: {
-                            gd7wed4949e8rg: ['94191981981', '89419819881', '51948191951'],
-                            rte4h189ert1r41: ['94191981981', '89419819881', '51948191951'],
-                        }
-                    },
-                },
-                versionHistory: {
-                    94191981981: {
-                        content: `Profit margins peaked for the big techs despite the uncertainties created by the pandemic. Many companies experienced a precarious position but the tech industries shone throughout as they evolved opportunities for people. And since people were quarantined, digital platforms became a necessity for them. Hence, the digital curve accelerated with time without bouncing back, and it seems unstoppable.`,
-                        writer: ''
-                    },
-                    89419819881: {
-                        content: `FAMAG, a well-known acronym for the big techs- Facebook, Apple, Microsoft, Amazon, and Google, showed a substantial increase in its revenues and profits during the second wave. People relied more on social media platforms during the pandemic because it helped them stay in touch with each other.`,
-                        writer: ''
-                    },
-                    51948191951: {
-                        content: `Facebook, one of the many social networking sites, benefitted the most in the global turbulence. During the mid of the second Covid wave, its revenue increased by more than half, causing its profit to double. The tough times forced people to depend on online shopping, deliveries that helped giants like Amazon to perform even stronger. Its extending services, subscriptions, prime memberships, and third-party seller services have helped it to rise to new heights. Owing to the fact that people had to work from home, Microsoft Azure, a cloud computing platform, saw a surge in its services. Thus, it saw an increase in its revenues by one-fifth, which was much higher than any year.`,
-                        writer: ''
-                    },
-                    98198189198: {
-                        content: `Facebook, one of the many social networking sites, benefitted the most in the global turbulence. During the mid of the second Covid wave, its revenue increased by more than half, causing its profit to double. The tough times forced people to depend on online shopping, deliveries that helped giants like Amazon to perform even stronger. Its extending services, subscriptions, prime memberships, and third-party seller services have helped it to rise to new heights. Owing to the fact that people had to work from home, Microsoft Azure, a cloud computing platform, saw a surge in its services. Thus, it saw an increase in its revenues by one-fifth, which was much higher than any year.`,
-                        writer: ''
-                    }
-                }
-            }
-        }
-        let currentArticle
-        const render = {
-            heading(id) {
-                const { content } = articles[currentArticle].sections[id]
-                return createElement('h3', {
-                    textContent: content,
-                    className: 'heading'
-                })
+        const genData = [
+            {
+                section: 'edg4ewr8g4e98r',
+                origin: 'erg1e98r1ge9r1',
+                data: '',
+                score: 45,
+                editor: '',
+                timestamp: 1636485447518
             },
-            section(id, version = 0) {
-                const section = document.createElement('section')
-                section.classList.add('section-wrapper')
-                const { pieces = [] } = articles[currentArticle].sections[id];
+            {
+                section: 'edg4ewr8g4e98r',
+                origin: 'erg1e98r1ge9r1',
+                data: 'u2',
+                score: 45,
+                editor: '',
+                timestamp: 1636485393538
+            },
+            {
+                section: 'edg4ewr8g4e98r',
+                origin: 'erg1e98r1ge9r1',
+                data: '',
+                score: 45,
+                editor: '',
+                timestamp: 1636485459328
+            },
+            {
+                section: 'edg4ewr8g4e98r',
+                origin: 'er98g4er8g1erg',
+                data: 'u1',
+                score: 45,
+                editor: '',
+                timestamp: 1636485440013
+            },
+            {
+                section: 'edg4ewr8g4e98r',
+                origin: 'erg1e98r1ge9r1',
+                data: '',
+                score: 45,
+                editor: '',
+                timestamp: 1636485477636
+            },
+            {
+                section: 'edg4ewr8g4e98r',
+                origin: 'er98g4er8g1erg',
+                data: '',
+                score: 45,
+                editor: '',
+                timestamp: 1636485484595
+            },
+        ]
+        let currentArticle = {}
+        const render = {
+            section(sectionID, { title, uniqueEntries }) {
+                const section = getRef('section_template').content.cloneNode(true)
                 const frag = document.createDocumentFragment()
-                pieces.forEach(piece => {
-                    const clone = getRef('content_card_template').content.cloneNode(true).firstElementChild;
-                    const { paragraphs, score } = articles[currentArticle].pieces[piece]
-                    for (const paraKey in paragraphs) {
-                        const versions = paragraphs[paraKey]
-                        const { content, writer } = articles[currentArticle].versionHistory[versions[version]]
-                        const paragraph = createElement('div', {
-                            className: 'content__area',
-                            textContent: content,
-                            attributes: { contentEditable: true }
-                        })
-                        frag.append(paragraph)
-                    }
-                    clone.querySelector('.paragraph-wrapper').append(frag)
-                    clone.querySelector('.content__score').textContent = score;
-                    section.append(clone)
-                })
-
+                section.children[1].dataset.id = sectionID
+                section.querySelector('.heading').textContent = title
+                currentArticle.sect
+                section.querySelector('.content-card-container').append(frag)
                 return section
             },
+            contentCard(id, version = 0) {
+                const clone = getRef('content_card_template').content.cloneNode(true).firstElementChild;
+                const { paragraphs, score } = articles[currentArticle.id].pieces[piece]
+                for (const paraKey in paragraphs) {
+                    const versions = paragraphs[paraKey]
+                    const { content, writer } = articles[currentArticle.id].versionHistory[versions[version]]
+                    const paragraph = createElement('div', {
+                        className: 'content__area',
+                        textContent: content,
+                        attributes: { contentEditable: true }
+                    })
+                    frag.append(paragraph)
+                }
+                clone.querySelector('.paragraph-wrapper').append(frag)
+                clone.querySelector('.content__score').textContent = score;
+
+                return clone
+            },
             article(id) {
-                currentArticle = id
-                const title = CC[id]
-                const { writer, sections } = articles[id]
+                currentArticle.id = id
+                parseArticleData()
+                const { title } = floGlobals.appObjects.cc.articleList[id]
+                const { writer, sections } = currentArticle
                 const frag = document.createDocumentFragment()
-                let paraGroup
-                let isMultiParagraphed = false
-                for (const nodeKey in sections) {
-                    const { type } = sections[nodeKey]
-                    switch (type) {
-                        case 'heading':
-                            frag.append(render.heading(nodeKey))
-                            break;
-                        case 'section':
-                            frag.append(render.section(nodeKey))
-                            break;
-                    }
+                for (const sectionID in sections) {
+                    frag.append(render.section(sectionID, sections[sectionID]))
                 }
                 getRef('current_article_name').textContent = title
                 getRef('article_wrapper').innerHTML = ''
                 getRef('article_wrapper').append(frag)
             }
         }
-        render.article('he78r1he74187er1h8e')
 
-        // getRef('article_wrapper').addEventListener('paste', e => {
-        //     let paste = (e.clipboardData || window.clipboardData).getData('text');
-        //     document.execCommand('insertText', false, paste)
-        //     e.preventDefault()
-        // })
+        function parseArticleData() {
+            const { sections, editors, public } = floGlobals.appObjects[currentArticle.id]
+            const generalData = floGlobals.generalData[`${currentArticle.id}_gd|${floGlobals.adminID}|${floGlobals.application}`]
+            currentArticle['sections'] = {}
+            sections.forEach(({ id, title }) => {
+                currentArticle['sections'][id] = {
+                    title,
+                    uniqueEntries: []
+                }
+            })
+            currentArticle['uniqueEntries'] = {}
+            for (const key in generalData) {
+                const { section, data, origin } = generalData[key].message
+                if (!currentArticle.uniqueEntries.hasOwnProperty(origin)) {
+                    currentArticle.uniqueEntries[origin] = {
+                        iterations: []
+                    }
+                }
+                currentArticle.sections[section].uniqueEntries.push(origin)
+                currentArticle.uniqueEntries[origin]['iterations'].push({
+                    timestamp: generalData[key].time,
+                    data
+                })
+            }
+            for (const entry in currentArticle.uniqueEntries) {
+                currentArticle.uniqueEntries[entry]['iterations'].sort((a, b) => a.timestamp - b.timestamp)
+            }
+        }
 
         const splitAt = (string, index) => [string.slice(0, index), string.slice(index)]
-        getRef('article_wrapper').addEventListener('keydown', e => {
-            if (e.key === 'Enter' && e.target.closest('.content__area')) {
-                e.preventDefault()
-                const selection = window.getSelection()
-                const startIndex = selection.anchorOffset
-                const newParas = splitAt(e.target.innerText, startIndex)
-                if (newParas.length === 1) {
-                    if (newParas[0].trim() !== '') {
-                        e.target.textContent = e.target.innerText.trim()
-                        const paragraph = createElement('div', {
-                            className: 'content__area',
-                            textContent: '',
-                            attributes: { contentEditable: true }
-                        })
-                        e.target.after(paragraph)
-                        e.target.nextElementSibling.focus()
-                    }
-                } else {
-                    newParas.forEach((para, index) => {
-                        if (index === 0) {
-                            e.target.textContent = para
-                        } else {
-                            const paragraph = createElement('div', {
-                                className: 'content__area',
-                                textContent: para.trim(),
-                                attributes: { contentEditable: true }
-                            })
-                            e.target.after(paragraph)
-                            e.target.nextElementSibling.focus()
-                        }
-                    })
-                }
-            }
-        })
-        getRef('article_wrapper').addEventListener('keyup', e => {
-            if ((e.key === 'Backspace' || e.key === 'Delete') && e.target.closest('.content__area')) {
-                if (e.target.innerText === '' && e.target.parentNode.children.length > 1) {
-                    if (e.target.previousElementSibling) {
-                        e.target.previousElementSibling.focus()
-                        const range = document.createRange();
-                        range.selectNodeContents(e.target.previousElementSibling);
-                        range.collapse(false);
-                        const sel = window.getSelection();
-                        sel.removeAllRanges();
-                        sel.addRange(range);
-                    }
-                    const target = e.target
-                    target.animate([
-                        {
-                            opacity: 1
-                        },
-                        {
-                            opacity: 0
-                        },
-                    ], {
-                        duration: 100,
-                        fill: 'forwards'
-                    })
-                        .onfinish = () => {
-                            const height = target.getBoundingClientRect().height
-                            const siblings = Array.from(target.parentNode.children)
-                            const nextSiblings = siblings.slice(siblings.indexOf(target) + 1)
-                            nextSiblings.forEach(elem => {
-                                elem.animate([
-                                    {
-                                        transform: 'translateY(0)'
-                                    },
-                                    {
-                                        transform: `translateY(-${height}px)`
-                                    },
-                                ], {
-                                    duration: 100,
-                                    fill: 'forwards'
-                                })
-                                    .onfinish = (e) => {
-                                        e.target.cancel()
-                                    }
-                            })
-                            setTimeout(() => {
-                                target.remove()
-                            }, 100);
-                        }
-                }
-            }
-        })
         getRef('article_wrapper').addEventListener('focusout', e => {
             if (e.target.closest('.content__area')) {
                 normalizeText(e.target.closest('.content__area'))
@@ -826,9 +917,15 @@
         const detectFormatting = debounce(() => {
             const selection = window.getSelection();
             if (selection.isCollapsed) {
+                getRef('text_toolbar').classList.add('hide-completely')
                 document.querySelectorAll('.formatting-button').forEach(elem => elem.classList.remove('active'))
             } else {
-                const { isBold, isItalic, isUnderlined } = getSelectionFormatting()
+                getRef('text_toolbar').classList.remove('hide-completely')
+                const pos = selection.getRangeAt(0).getBoundingClientRect()
+                getRef('text_toolbar').style.transform = `translate(${pos.left}px, calc(${pos.bottom + window.pageYOffset}px + 0.3rem))`
+                const isBold = document.queryCommandState('bold')
+                const isItalic = document.queryCommandState('italic')
+                const isUnderlined = document.queryCommandState('underline')
                 if (isBold) {
                     getRef(`strong_button`).classList.add('active')
                 } else {
@@ -846,7 +943,7 @@
                 }
             }
         },
-            300)
+            200)
         document.addEventListener('selectionchange', detectFormatting)
 
 
@@ -854,10 +951,10 @@
             `${origin.substring(0, startIndex)}${insertion}${origin.substring(endIndex)}`;
         const make = {
             bold() {
-                replaceSelectedText(createElement('strong'))
+                document.execCommand('bold')
             },
             italic() {
-                replaceSelectedText(createElement('em'))
+                document.execCommand('italic')
             },
             underlined() {
                 replaceSelectedText(createElement('u'))
@@ -895,12 +992,6 @@
                 selection.anchorNode.parentNode.closest('.content__area')?.focus()
             }
         }
-        document.addEventListener('keydown', e => {
-            if (e.ctrlKey && e.key === 'b') {
-                make.bold()
-                e.preventDefault()
-            }
-        })
 
         function getSelectionFormatting() {
             const sel = window.getSelection();
@@ -960,12 +1051,6 @@
             return !array2.some(elem => !array1.includes(elem))
         }
 
-        const html = `Profit margins peaked for the big techs despite the uncertainties created by the pandemic. Many companies experienced a precarious position but the tech industries shone throughout as they evolved opportunities for people. And since people were quarantined, digital platforms became a necessity for them. Hence, the digital curve accelerated with time without bouncing back, and it seems unstoppable.
-            Profit margins peaked for the big techs despite the uncertainties created by the pandemic. Many companies experienced a precarious position but the tech industries shone throughout as they evolved opportunities for people. And since people were quarantined, digital platforms became a necessity for them. Hence, the digital curve accelerated with time without bouncing back, and it seems unstoppable.    
-            <figure><blockquote cite="https://www.huxley.net/bnw/four.html"><p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p></blockquote> <figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption> </figure>
-            Profit margins peaked for the big techs despite the uncertainties created by the pandemic. Many companies experienced a precarious position but the tech industries shone throughout as they evolved opportunities for people. And since people were quarantined, digital platforms became a necessity for them. Hence, the digital curve accelerated with time without bouncing back, and it seems unstoppable.`
-        console.log(html.split('\n'))
-
         function insertNode(node) {
             const selection = window.getSelection();
             if (selection.rangeCount) {
@@ -976,27 +1061,13 @@
         function createQuote() {
             const quote = getRef('quote_template').content.cloneNode(true)
             quote.querySelector('.quote').textContent = '"Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced."'
-            quote.querySelector('.by').textContent = 'Aldous Huxley'
+            quote.querySelector('.by').textContent = `- Author`
             quote.querySelector('.citation').textContent = 'Brave New World'
             return quote
         }
         function insertBlockquote() {
             insertNode(createQuote())
         }
-
-        function createNewArticle() {
-            const uid = floCrypto.randString(16, true)
-            floGlobals.appObjects['articlesIndex'][uid] = {
-                title: 'test article 1',
-                timestamp: Date.now()
-            }
-            console.log(floGlobals.appObjects.articlesIndex)
-            floCloudAPI.updateObjectData('articlesIndex')
-                .then((res) => {
-                    console.log('created article', res)
-                })
-                .catch(err => console.error(err))
-        }
     </script>
     <script id="onLoadStartUp">
         function onLoadStartUp() {
@@ -1008,11 +1079,17 @@
             floDapps.launchStartUp().then(async result => {
                 await Promise.all([
                     floCloudAPI.requestObjectData('cc'),
-                    floCloudAPI.requestObjectData('defaultArticle'),
-                    floCloudAPI.requestObjectData('articlesIndex'),
                 ])
+                Promise.all([
+                    floCloudAPI.requestObjectData(floGlobals.appObjects.cc.defaultArticle),
+                    floCloudAPI.requestGeneralData(`${floGlobals.appObjects.cc.defaultArticle}_gd`)
+                ])
+                    .then(() => {
+                        render.article(floGlobals.appObjects.cc.defaultArticle)
+                    })
+
                 console.log(result)
-                // alert(`Welcome FLO_ID: ${myFloID}`)  
+                // alert(`Welcome FLO_ID: ${ myFloID }`)
                 //App functions....
             }).catch(error => console.error(error))
         }
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..3cc1d38
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,13 @@
+{
+  "name": "p2p-content-collaboration",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "tiny-editor": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tiny-editor/-/tiny-editor-0.2.5.tgz",
+      "integrity": "sha512-K4luWQbam/TrgjLst+Ztb7uPltXHwtFm+Oi1hs3xM6biI7N1X8HfyDtmROOEbyJM8+mMP5/FjsMnc96zJZoZCg=="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8233fc5
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "p2p-content-collaboration",
+  "version": "1.0.0",
+  "description": "",
+  "main": "components.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ranchimall/p2p-content-collaboration.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ranchimall/p2p-content-collaboration/issues"
+  },
+  "homepage": "https://github.com/ranchimall/p2p-content-collaboration#readme",
+  "dependencies": {
+    "tiny-editor": "^0.2.5"
+  }
+}