diff --git a/css/main.css b/css/main.css
index f64e1a8..bcad8f4 100644
--- a/css/main.css
+++ b/css/main.css
@@ -84,6 +84,7 @@ button,
   align-items: center;
   font-size: 0.9rem;
   font-weight: 500;
+  overflow: hidden;
 }
 
 .button {
@@ -290,10 +291,20 @@ ul {
   width: 100%;
 }
 
+.ripple {
+  height: 8rem;
+  width: 8rem;
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
+  pointer-events: none;
+}
+
 .interact {
   position: relative;
+  overflow: hidden;
   cursor: pointer;
-  transition: transform 0.3s;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -369,13 +380,6 @@ ul {
   margin-bottom: 1.5rem;
 }
 
-button:active,
-.button:active,
-sm-button:not([disabled]):active,
-.interact:active {
-  transform: scale(0.96);
-}
-
 .popup__header {
   display: grid;
   gap: 0.5rem;
@@ -631,9 +635,6 @@ sm-copy {
   --width: min(64rem, 100%);
   --min-height: 70vh;
 }
-#article_list_popup::part(popup-header), #article_list_popup::part(popup-body) {
-  padding: 0.5rem;
-}
 #article_list_popup .popup__header {
   padding: 1rem;
   gap: 1rem;
@@ -656,14 +657,16 @@ sm-copy {
   text-transform: uppercase;
 }
 
-.default-article::after {
+.default-article::before {
   content: "";
   font-size: 0.7rem;
   background-color: var(--accent-color);
-  padding: 0.3rem;
+  height: 2em;
+  width: 0.3em;
   border-radius: 0.5rem;
   font-weight: 500;
-  margin: auto 0 auto auto;
+  margin-right: 0.5rem;
+  align-self: center;
   color: var(--foreground-color);
 }
 
@@ -936,6 +939,7 @@ sm-copy {
   line-height: 1.7;
   color: rgba(var(--text-color), 0.8);
   overflow-wrap: break-word;
+  white-space: pre-line;
 }
 .entry__changes .added > *,
 .entry__changes .removed > * {
@@ -1194,12 +1198,19 @@ sm-copy {
   }
 
   .interact,
-button {
-    transition: background-color 0.3s, transform 0.3s;
+button:not(.button--primary) {
+    transition: background-color 0.3s;
   }
   .interact:hover,
-button:hover {
-    background-color: rgba(var(--text-color), 0.1);
+button:not(.button--primary):hover {
+    background-color: rgba(var(--text-color), 0.06);
+  }
+
+  .button--primary {
+    transition: filter 0.3s;
+  }
+  .button--primary:hover {
+    filter: brightness(120%);
   }
 
   .content-card:not(.selected) sm-checkbox {
diff --git a/css/main.min.css b/css/main.min.css
index 9357366..4af83c2 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;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: rgb(0, 156, 78);--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;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: rgb(14, 230, 122);--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}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{color:var(--accent-color);text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500}.button{white-space:nowrap;padding:.5rem .8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}.icon-only{padding:.5rem;border-radius:.3rem}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,sm-textarea,tags-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{--padding: 0.5rem 0.8rem;transition:transform .3s}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}.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/-1}.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:flex}.grid{display:grid}.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{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.interact{position:relative;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 1rem}.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);flex-shrink:0}.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{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,sm-button:not([disabled]):active,.interact:active{transform:scale(0.96)}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}.logo{display:grid;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:flex;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{transform:rotate(180deg)}sm-select,sm-option,strip-option{font-size:.9rem}strip-select{--gap: 0}strip-option{font-weight:500;--border-radius: 0.3rem;--active-option-color: var(--accent-color)}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}sm-menu{--background: var(--foreground-color)}menu-option{font-size:.9rem}sm-copy{font-size:.9rem;--button-border-radius: 0.2rem}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page{height:100%}.page-layout,#preview_page{display:grid;grid-template-columns:1rem minmax(0, 1fr) 1rem}.page-layout>*,#preview_page>*{grid-column:2/3}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>section{align-items:center;text-align:center}#landing h1{margin-top:-2ch;font-size:clamp(2rem,5vw,5rem)}#landing p{max-width:100%}#sign_in,#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_in section,#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_in header,#sign_up header{padding:1.5rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#loading{place-content:center;text-align:center}#loading sm-spinner{margin-bottom:1.5rem}#main_header{position:-webkit-sticky;position:sticky;top:0;display:grid;gap:1rem;padding:1rem;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1;background-color:var(--foreground-color);z-index:2}#options_panel{position:-webkit-sticky;position:sticky;top:6.5rem;z-index:1;padding:.5rem 1.5rem;grid-column:1/-1;background-color:var(--foreground-color);overflow-x:auto;min-height:3.2rem}.outline-button{position:relative;white-space:nowrap;justify-content:center;padding:.5rem 0}.outline-button::after{position:absolute;content:"";width:1rem;border-radius:.5rem;height:.2rem;transition:transform .3s,opacity .1s;bottom:0;background-color:rgba(var(--text-color), 0.5);opacity:0}.outline-button:hover:not(.outline-button--active)::after{opacity:1;background-color:rgba(var(--text-color), 0.5)}.outline-button:active::after{opacity:1;transform:scaleX(2)}.outline-button--active::after{opacity:1;background-color:var(--accent-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)}#main_page{-ms-scroll-chaining:none;overscroll-behavior:contain;height:100%;overflow-y:hidden;grid-template-columns:minmax(0, 1fr);align-content:flex-start}#current_article_title{font-weight:700}#article_list_popup{--width: min(64rem, 100%);--min-height: 70vh}#article_list_popup::part(popup-header),#article_list_popup::part(popup-body){padding:.5rem}#article_list_popup .popup__header{padding:1rem;gap:1rem;padding-bottom:0;grid-template-columns:minmax(0, 1fr)}#article_list{grid-template-columns:repeat(auto-fill, minmax(30ch, 1fr))}.article-link{position:relative;padding:1rem;color:rgba(var(--text-color), 0.8);font-weight:500;border-radius:.3rem}.article-link::first-letter{text-transform:uppercase}.default-article::after{content:"";font-size:.7rem;background-color:var(--accent-color);padding:.3rem;border-radius:.5rem;font-weight:500;margin:auto 0 auto auto;color:var(--foreground-color)}#edit_sections_popup{--body-padding: 1.2rem}#section_list_container{gap:.5rem}.section-card{font-weight:500;font-size:.9rem}.section-card input{background-color:rgba(var(--text-color), 0.06);padding:.8rem;border-radius:.3rem;border:none;font-size:inherit;color:inherit;font-weight:inherit;width:100%}.section-card input:focus{outline:var(--accent-color) solid}.section-card .remove{padding:.3rem}#insert_section_button{align-self:flex-start}#article_wrapper{display:flex;flex-direction:column;padding:1rem;gap:1rem 0;height:100%;overflow-y:auto;scroll-padding-top:1.5rem}.heading{font-weight:700}.heading::before{content:"";width:.3rem;height:100%;margin-right:.7rem;border-radius:.5rem;background-color:var(--accent-color)}.heading button{margin-left:auto}.article-section{gap:1rem}.article-section:not(:last-of-type){margin-bottom:1.5rem}.article-section::-webkit-scrollbar{display:none}.content-card{border-radius:.5rem;background-color:var(--foreground-color);box-shadow:0 0 0 1px rgba(var(--text-color), 0.16) inset}.content-card.selected{box-shadow:0 0 0 .1rem var(--accent-color) inset}.content-card--empty{display:flex;flex-direction:column}.content-card--empty .content__area{min-height:calc(60vh + 3rem);height:100%;max-height:calc(60vh + 3rem)}.content-card .submit-entry{border-radius:.2rem;padding:.4rem .8rem;color:var(--accent-color)}.content-card .submit-entry sm-spinner{--height: 0.8rem;--width: 0.8rem}.content__header{padding:.5rem}.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;transition:box-shadow .1s;height:60vh;overflow-y:auto}.content__area:empty::before{content:attr(placeholder);opacity:.6;pointer-events:none}.content__area:focus-within{outline:none;box-shadow:0 0 0 .1rem var(--accent-color) inset}.content__options{gap:.5rem;padding:.5rem 1rem;grid-template-columns:auto auto 1fr auto}.content__contributors{font-size:.7rem;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.2rem .3rem;color:rgba(var(--text-color), 0.8);margin-right:.5rem}.content__author{display:grid;gap:.3rem;grid-template-columns:auto -webkit-max-content;grid-template-columns:auto max-content}.content__author div:first-of-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content__author div:last-of-type{flex:1}.content__score{font-size:.8rem;margin-left:.2rem;line-height:100%}.filled-star{fill:var(--yellow)}.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}#text_toolbar{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed;z-index:10;left:0;right:0;bottom:0;transition:transform .1s;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.2);padding:.2rem;border-radius:.3rem;box-shadow:0 .1rem .2rem rgba(0,0,0,.06),0 1rem 1.5rem -0.5rem rgba(0,0,0,.2)}.formatting-button{padding:.3rem;border-radius:.3rem;transition:background-color .1s}.formatting-button.active:hover{background-color:var(--accent-color)}.active{background-color:var(--accent-color)}.active .icon{fill:var(--foreground-color)}.quote-template{position:relative;padding:1rem;margin:1rem 0;border-radius:.2rem;border:solid thin rgba(var(--text-color), 0.3);box-shadow:.1rem .2rem 0 .1rem rgba(var(--text-color), 0.8);overflow:hidden;justify-self:center;padding-left:1.3rem figcaption;padding-left-margin-top:.5rem;padding-left-color:rgba(var(--text-color), 0.8);padding-left-font-size:.8rem;padding-left-margin-left:auto}#version_history_panel{border-radius:.5rem;width:min(24rem,100%);background-color:var(--foreground-color);overflow-y:auto}#version_history_panel>:first-child{padding:1rem}#version_timeline{padding:1rem;height:100%;overflow-y:auto}.history-entry{grid-template-columns:minmax(0, 1fr)}.history-entry:not(:last-of-type){padding-bottom:1rem;border-bottom:thin solid rgba(var(--text-color), 0.3)}.history-entry:last-of-type::before{content:"CREATED";letter-spacing:.03em;display:inline-flex;justify-self:flex-start;font-weight:500;padding:.2rem .3rem;font-size:.7rem;border-radius:.2rem;border:solid thin rgba(var(--text-color), 0.5)}.entry__time,.entry__author{font-size:.8rem;font-weight:500}.entry__changes{font-size:.9rem;line-height:1.7;color:rgba(var(--text-color), 0.8);overflow-wrap:break-word}.entry__changes .added>*,.entry__changes .removed>*{background-color:transparent}.entry__changes .added,.entry__changes .added>*{overflow-wrap:break-word;background-color:#00e67650}.entry__changes .removed,.entry__changes .removed>*{overflow-wrap:break-word;color:var(--danger-color);-webkit-text-decoration-color:var(--danger-color);text-decoration-color:var(--danger-color)}.contributor{gap:.5rem;grid-template-columns:auto 1fr}.contributor .icon{grid-row:span 2}.contributor__id{font-size:.8rem;font-weight:700}.contributor__time{font-size:.8rem}#preview_page{padding-bottom:3rem;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;overflow-y:auto;height:100%;align-content:flex-start}#preview_page header{position:-webkit-sticky;position:sticky;top:0;z-index:1;padding:1.5rem 0 1rem 0;background-color:rgba(var(--background-color), 1)}#preview_page h3{margin-bottom:1rem}#preview_page h3:not(:first-of-type){margin-top:3rem}#preview_page p{font-family:"noto serif",serif;font-size:1rem}#preview_page p>*{font-family:inherit}#preview__body{padding-bottom:1.5rem}.preview-group:not(:last-of-type){margin-bottom:1.5rem}.preview-group__buttons{display:inline-flex;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.2);padding:.2rem;border-radius:.3rem;box-shadow:0 .1rem .2rem rgba(0,0,0,.06),0 1rem 1.5rem -0.5rem rgba(0,0,0,.2)}.preview-group__buttons button{padding:.5rem}.preview-group__buttons button .icon{height:1rem;width:1rem}#publish_article_popup{--min-height: 50vh}@media screen and (max-width: 40rem){#article_name_wrapper,#selected_content_options{grid-row:2/3;grid-column:1/-1}#article_name_wrapper #article_outline_button,#selected_content_options #article_outline_button{margin-left:auto}#article_name_wrapper{justify-content:flex-start}.article-section{display:flex;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:auto;flex-shrink:0}.content-card{scroll-snap-align:start;flex-shrink:0;width:min(45ch,100% - 2rem)}.formatting-button{padding:.5rem}.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{grid-column:1/-1;padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#main_header{padding:1rem 1.5rem;grid-template-columns:auto 1fr auto auto}#options_panel{top:4.2rem}#main_page.active-sidebar{grid-template-rows:auto 1fr;grid-template-columns:minmax(0, 1fr) 24rem}#main_page.active-outline{grid-template-rows:auto 1fr;grid-template-columns:20rem minmax(0, 1fr)}#main_page.active-sidebar.active-outline{grid-template-rows:auto 1fr;grid-template-columns:20rem minmax(0, 1fr) 24rem}#version_history_panel,#article_outline_panel,#article_wrapper{-ms-scroll-chaining:none;overscroll-behavior:contain}#article_wrapper{padding:1.5rem}.article-section{display:grid;grid-template-columns:repeat(auto-fill, minmax(40ch, 1fr))}#article_list_popup .popup__header{grid-template-columns:auto 1fr auto;padding-bottom:1rem}#article_list_search{width:16rem}#preview_page{grid-template-columns:1fr 60ch 1fr}.preview-group{position:relative}.preview-group__buttons{position:absolute;right:0;bottom:100%}#text_toolbar{position:absolute;z-index:1;left:0;top:0;right:auto;bottom:auto}#create_article_popup{--width: 28rem}#user_popup{--width: 25rem}}@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{transition:background-color .3s,transform .3s}.interact:hover,button:hover{background-color:rgba(var(--text-color), 0.1)}.content-card:not(.selected) sm-checkbox{opacity:0;transition:opacity .2s}.content-card:hover sm-checkbox,.content-card:focus-within sm-checkbox{opacity:1}.preview-group__buttons{transition:opacity .1s;opacity:0}.preview-group{border-radius:.3rem}.preview-group:hover{background-color:rgba(var(--text-color), 0.06)}.preview-group:hover .preview-group__buttons{opacity:1}.preview-group .preview-group__buttons:focus-within{opacity:1}}
\ No newline at end of file
+*{padding:0;margin:0;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: rgb(0, 156, 78);--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;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: rgb(14, 230, 122);--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}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{color:var(--accent-color);text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;overflow:hidden}.button{white-space:nowrap;padding:.5rem .8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}.icon-only{padding:.5rem;border-radius:.3rem}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,sm-textarea,tags-input{font-size:.9rem;--border-radius: 0.3rem}sm-button{--padding: 0.5rem 0.8rem;transition:transform .3s}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}.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/-1}.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:flex}.grid{display:grid}.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{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 1rem}.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);flex-shrink:0}.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{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}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}.logo{display:grid;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:flex;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{transform:rotate(180deg)}sm-select,sm-option,strip-option{font-size:.9rem}strip-select{--gap: 0}strip-option{font-weight:500;--border-radius: 0.3rem;--active-option-color: var(--accent-color)}sm-checkbox{--height: 1rem;--width: 1rem;-webkit-tap-highlight-color:transparent}sm-menu{--background: var(--foreground-color)}menu-option{font-size:.9rem}sm-copy{font-size:.9rem;--button-border-radius: 0.2rem}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page{height:100%}.page-layout,#preview_page{display:grid;grid-template-columns:1rem minmax(0, 1fr) 1rem}.page-layout>*,#preview_page>*{grid-column:2/3}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>section{align-items:center;text-align:center}#landing h1{margin-top:-2ch;font-size:clamp(2rem,5vw,5rem)}#landing p{max-width:100%}#sign_in,#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_in section,#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_in header,#sign_up header{padding:1.5rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#loading{place-content:center;text-align:center}#loading sm-spinner{margin-bottom:1.5rem}#main_header{position:-webkit-sticky;position:sticky;top:0;display:grid;gap:1rem;padding:1rem;align-items:center;grid-template-columns:1fr auto auto;grid-column:1/-1;background-color:var(--foreground-color);z-index:2}#options_panel{position:-webkit-sticky;position:sticky;top:6.5rem;z-index:1;padding:.5rem 1.5rem;grid-column:1/-1;background-color:var(--foreground-color);overflow-x:auto;min-height:3.2rem}.outline-button{position:relative;white-space:nowrap;justify-content:center;padding:.5rem 0}.outline-button::after{position:absolute;content:"";width:1rem;border-radius:.5rem;height:.2rem;transition:transform .3s,opacity .1s;bottom:0;background-color:rgba(var(--text-color), 0.5);opacity:0}.outline-button:hover:not(.outline-button--active)::after{opacity:1;background-color:rgba(var(--text-color), 0.5)}.outline-button:active::after{opacity:1;transform:scaleX(2)}.outline-button--active::after{opacity:1;background-color:var(--accent-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)}#main_page{-ms-scroll-chaining:none;overscroll-behavior:contain;height:100%;overflow-y:hidden;grid-template-columns:minmax(0, 1fr);align-content:flex-start}#current_article_title{font-weight:700}#article_list_popup{--width: min(64rem, 100%);--min-height: 70vh}#article_list_popup .popup__header{padding:1rem;gap:1rem;padding-bottom:0;grid-template-columns:minmax(0, 1fr)}#article_list{grid-template-columns:repeat(auto-fill, minmax(30ch, 1fr))}.article-link{position:relative;padding:1rem;color:rgba(var(--text-color), 0.8);font-weight:500;border-radius:.3rem}.article-link::first-letter{text-transform:uppercase}.default-article::before{content:"";font-size:.7rem;background-color:var(--accent-color);height:2em;width:.3em;border-radius:.5rem;font-weight:500;margin-right:.5rem;align-self:center;color:var(--foreground-color)}#edit_sections_popup{--body-padding: 1.2rem}#section_list_container{gap:.5rem}.section-card{font-weight:500;font-size:.9rem}.section-card input{background-color:rgba(var(--text-color), 0.06);padding:.8rem;border-radius:.3rem;border:none;font-size:inherit;color:inherit;font-weight:inherit;width:100%}.section-card input:focus{outline:var(--accent-color) solid}.section-card .remove{padding:.3rem}#insert_section_button{align-self:flex-start}#article_wrapper{display:flex;flex-direction:column;padding:1rem;gap:1rem 0;height:100%;overflow-y:auto;scroll-padding-top:1.5rem}.heading{font-weight:700}.heading::before{content:"";width:.3rem;height:100%;margin-right:.7rem;border-radius:.5rem;background-color:var(--accent-color)}.heading button{margin-left:auto}.article-section{gap:1rem}.article-section:not(:last-of-type){margin-bottom:1.5rem}.article-section::-webkit-scrollbar{display:none}.content-card{border-radius:.5rem;background-color:var(--foreground-color);box-shadow:0 0 0 1px rgba(var(--text-color), 0.16) inset}.content-card.selected{box-shadow:0 0 0 .1rem var(--accent-color) inset}.content-card--empty{display:flex;flex-direction:column}.content-card--empty .content__area{min-height:calc(60vh + 3rem);height:100%;max-height:calc(60vh + 3rem)}.content-card .submit-entry{border-radius:.2rem;padding:.4rem .8rem;color:var(--accent-color)}.content-card .submit-entry sm-spinner{--height: 0.8rem;--width: 0.8rem}.content__header{padding:.5rem}.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;transition:box-shadow .1s;height:60vh;overflow-y:auto}.content__area:empty::before{content:attr(placeholder);opacity:.6;pointer-events:none}.content__area:focus-within{outline:none;box-shadow:0 0 0 .1rem var(--accent-color) inset}.content__options{gap:.5rem;padding:.5rem 1rem;grid-template-columns:auto auto 1fr auto}.content__contributors{font-size:.7rem;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.2rem .3rem;color:rgba(var(--text-color), 0.8);margin-right:.5rem}.content__author{display:grid;gap:.3rem;grid-template-columns:auto -webkit-max-content;grid-template-columns:auto max-content}.content__author div:first-of-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content__author div:last-of-type{flex:1}.content__score{font-size:.8rem;margin-left:.2rem;line-height:100%}.filled-star{fill:var(--yellow)}.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}#text_toolbar{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed;z-index:10;left:0;right:0;bottom:0;transition:transform .1s;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.2);padding:.2rem;border-radius:.3rem;box-shadow:0 .1rem .2rem rgba(0,0,0,.06),0 1rem 1.5rem -0.5rem rgba(0,0,0,.2)}.formatting-button{padding:.3rem;border-radius:.3rem;transition:background-color .1s}.formatting-button.active:hover{background-color:var(--accent-color)}.active{background-color:var(--accent-color)}.active .icon{fill:var(--foreground-color)}.quote-template{position:relative;padding:1rem;margin:1rem 0;border-radius:.2rem;border:solid thin rgba(var(--text-color), 0.3);box-shadow:.1rem .2rem 0 .1rem rgba(var(--text-color), 0.8);overflow:hidden;justify-self:center;padding-left:1.3rem figcaption;padding-left-margin-top:.5rem;padding-left-color:rgba(var(--text-color), 0.8);padding-left-font-size:.8rem;padding-left-margin-left:auto}#version_history_panel{border-radius:.5rem;width:min(24rem,100%);background-color:var(--foreground-color);overflow-y:auto}#version_history_panel>:first-child{padding:1rem}#version_timeline{padding:1rem;height:100%;overflow-y:auto}.history-entry{grid-template-columns:minmax(0, 1fr)}.history-entry:not(:last-of-type){padding-bottom:1rem;border-bottom:thin solid rgba(var(--text-color), 0.3)}.history-entry:last-of-type::before{content:"CREATED";letter-spacing:.03em;display:inline-flex;justify-self:flex-start;font-weight:500;padding:.2rem .3rem;font-size:.7rem;border-radius:.2rem;border:solid thin rgba(var(--text-color), 0.5)}.entry__time,.entry__author{font-size:.8rem;font-weight:500}.entry__changes{font-size:.9rem;line-height:1.7;color:rgba(var(--text-color), 0.8);overflow-wrap:break-word;white-space:pre-line}.entry__changes .added>*,.entry__changes .removed>*{background-color:transparent}.entry__changes .added,.entry__changes .added>*{overflow-wrap:break-word;background-color:#00e67650}.entry__changes .removed,.entry__changes .removed>*{overflow-wrap:break-word;color:var(--danger-color);-webkit-text-decoration-color:var(--danger-color);text-decoration-color:var(--danger-color)}.contributor{gap:.5rem;grid-template-columns:auto 1fr}.contributor .icon{grid-row:span 2}.contributor__id{font-size:.8rem;font-weight:700}.contributor__time{font-size:.8rem}#preview_page{padding-bottom:3rem;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;overflow-y:auto;height:100%;align-content:flex-start}#preview_page header{position:-webkit-sticky;position:sticky;top:0;z-index:1;padding:1.5rem 0 1rem 0;background-color:rgba(var(--background-color), 1)}#preview_page h3{margin-bottom:1rem}#preview_page h3:not(:first-of-type){margin-top:3rem}#preview_page p{font-family:"noto serif",serif;font-size:1rem}#preview_page p>*{font-family:inherit}#preview__body{padding-bottom:1.5rem}.preview-group:not(:last-of-type){margin-bottom:1.5rem}.preview-group__buttons{display:inline-flex;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.2);padding:.2rem;border-radius:.3rem;box-shadow:0 .1rem .2rem rgba(0,0,0,.06),0 1rem 1.5rem -0.5rem rgba(0,0,0,.2)}.preview-group__buttons button{padding:.5rem}.preview-group__buttons button .icon{height:1rem;width:1rem}#publish_article_popup{--min-height: 50vh}@media screen and (max-width: 40rem){#article_name_wrapper,#selected_content_options{grid-row:2/3;grid-column:1/-1}#article_name_wrapper #article_outline_button,#selected_content_options #article_outline_button{margin-left:auto}#article_name_wrapper{justify-content:flex-start}.article-section{display:flex;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:auto;flex-shrink:0}.content-card{scroll-snap-align:start;flex-shrink:0;width:min(45ch,100% - 2rem)}.formatting-button{padding:.5rem}.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{grid-column:1/-1;padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.hide-on-desktop{display:none}#main_header{padding:1rem 1.5rem;grid-template-columns:auto 1fr auto auto}#options_panel{top:4.2rem}#main_page.active-sidebar{grid-template-rows:auto 1fr;grid-template-columns:minmax(0, 1fr) 24rem}#main_page.active-outline{grid-template-rows:auto 1fr;grid-template-columns:20rem minmax(0, 1fr)}#main_page.active-sidebar.active-outline{grid-template-rows:auto 1fr;grid-template-columns:20rem minmax(0, 1fr) 24rem}#version_history_panel,#article_outline_panel,#article_wrapper{-ms-scroll-chaining:none;overscroll-behavior:contain}#article_wrapper{padding:1.5rem}.article-section{display:grid;grid-template-columns:repeat(auto-fill, minmax(40ch, 1fr))}#article_list_popup .popup__header{grid-template-columns:auto 1fr auto;padding-bottom:1rem}#article_list_search{width:16rem}#preview_page{grid-template-columns:1fr 60ch 1fr}.preview-group{position:relative}.preview-group__buttons{position:absolute;right:0;bottom:100%}#text_toolbar{position:absolute;z-index:1;left:0;top:0;right:auto;bottom:auto}#create_article_popup{--width: 28rem}#user_popup{--width: 25rem}}@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:not(.button--primary){transition:background-color .3s}.interact:hover,button:not(.button--primary):hover{background-color:rgba(var(--text-color), 0.06)}.button--primary{transition:filter .3s}.button--primary:hover{filter:brightness(120%)}.content-card:not(.selected) sm-checkbox{opacity:0;transition:opacity .2s}.content-card:hover sm-checkbox,.content-card:focus-within sm-checkbox{opacity:1}.preview-group__buttons{transition:opacity .1s;opacity:0}.preview-group{border-radius:.3rem}.preview-group:hover{background-color:rgba(var(--text-color), 0.06)}.preview-group:hover .preview-group__buttons{opacity:1}.preview-group .preview-group__buttons:focus-within{opacity:1}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 5915311..ac76aa4 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -85,6 +85,7 @@ button,
   align-items: center;
   font-size: 0.9rem;
   font-weight: 500;
+  overflow: hidden;
 }
 .button {
   white-space: nowrap;
@@ -284,10 +285,23 @@ ul {
   width: 100%;
 }
 
+.ripple {
+  height: 8rem;
+  width: 8rem;
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: radial-gradient(
+    circle,
+    rgba(var(--text-color), 0.3) 0%,
+    rgba(0, 0, 0, 0) 50%
+  );
+  pointer-events: none;
+}
 .interact {
   position: relative;
+  overflow: hidden;
   cursor: pointer;
-  transition: transform 0.3s;
   -webkit-tap-highlight-color: transparent;
 }
 .empty-state {
@@ -356,13 +370,6 @@ ul {
   margin-bottom: 1.5rem;
 }
 
-button:active,
-.button:active,
-sm-button:not([disabled]):active,
-.interact:active {
-  transform: scale(0.96);
-}
-
 .popup__header {
   display: grid;
   gap: 0.5rem;
@@ -597,10 +604,6 @@ sm-copy {
 #article_list_popup {
   --width: min(64rem, 100%);
   --min-height: 70vh;
-  &::part(popup-header),
-  &::part(popup-body) {
-    padding: 0.5rem;
-  }
   .popup__header {
     padding: 1rem;
     gap: 1rem;
@@ -623,14 +626,16 @@ sm-copy {
   }
 }
 .default-article {
-  &::after {
+  &::before {
     content: "";
     font-size: 0.7rem;
     background-color: var(--accent-color);
-    padding: 0.3rem;
+    height: 2em;
+    width: 0.3em;
     border-radius: 0.5rem;
     font-weight: 500;
-    margin: auto 0 auto auto;
+    margin-right: 0.5rem;
+    align-self: center;
     color: var(--foreground-color);
   }
 }
@@ -885,6 +890,7 @@ sm-copy {
   line-height: 1.7;
   color: rgba(var(--text-color), 0.8);
   overflow-wrap: break-word;
+  white-space: pre-line;
   .added > *,
   .removed > * {
     background-color: transparent;
@@ -1119,10 +1125,16 @@ sm-copy {
     }
   }
   .interact,
-  button {
-    transition: background-color 0.3s, transform 0.3s;
+  button:not(.button--primary) {
+    transition: background-color 0.3s;
     &:hover {
-      background-color: rgba(var(--text-color), 0.1);
+      background-color: rgba(var(--text-color), 0.06);
+    }
+  }
+  .button--primary {
+    transition: filter 0.3s;
+    &:hover {
+      filter: brightness(120%);
     }
   }
   .content-card {
diff --git a/index.html b/index.html
index df5d90e..3096abd 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
 
             //Required for blockchain API operators
             apiURL: {
-                FLO: ['https://livenet.flocha.in/', 'https://flosight.duckdns.org/'],
+                FLO: ['https://flosight.duckdns.org/', 'https://livenet.flocha.in/'],
                 FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/']
             },
             adminID: "FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf",
@@ -37,7 +37,7 @@
 
             //for cloud apps
             subAdmins: [],
-            application: "TEST_MODE",
+            application: "TEST_CC",
             appObjects: {},
             generalData: {},
             lastVC: {}
@@ -887,7 +887,39 @@
             document.addEventListener('copy', () => {
                 notify('copied', 'success')
             })
+            document.addEventListener("pointerdown", (e) => {
+                if (e.target.closest("button, sm-button:not([disabled]), .interact")) {
+                    createRipple(e, e.target.closest("button, sm-button, .interact"));
+                }
+            });
         });
+        function createRipple(event, target) {
+            const circle = document.createElement("span");
+            const diameter = Math.max(target.clientWidth, target.clientHeight);
+            const radius = diameter / 2;
+            const targetDimensions = target.getBoundingClientRect();
+            circle.style.width = circle.style.height = `${diameter}px`;
+            circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+            circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
+            circle.classList.add("ripple");
+            const rippleAnimation = circle.animate(
+                [
+                    {
+                        transform: "scale(4)",
+                        opacity: 0,
+                    },
+                ],
+                {
+                    duration: 600,
+                    fill: "forwards",
+                    easing: "ease-out",
+                }
+            );
+            target.append(circle);
+            rippleAnimation.onfinish = () => {
+                circle.remove();
+            };
+        }
 
         const pagesData = {
             openedPages: [],
@@ -1069,45 +1101,8 @@
         }
     </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 splitHTML(string) {
-            const el = createElement('div', {
-                innerHTML: string
-            });
-            return Array.from(el.childNodes).map(e => (e.outerHTML || e.innerHTML || e.nodeValue).split(' ').filter(t => t)).flat();
-        }
-
-        function getDiff(oldStr, newStr) {
-            // console.log(splitHTML(oldStr), splitHTML(newStr))
-            let d = patienceDiff(splitHTML(oldStr), splitHTML(newStr), 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(" ");
-        }
+        // JS Diff
+        !function (e, n) { "object" == typeof exports && "undefined" != typeof module ? n(exports) : "function" == typeof define && define.amd ? define(["exports"], n) : n((e = e || self).Diff = {}) }(this, function (e) { "use strict"; function t() { } t.prototype = { diff: function (s, u, e) { var e = 2 < arguments.length && void 0 !== e ? e : {}, n = e.callback; "function" == typeof e && (n = e, e = {}), this.options = e; var a = this; function f(e) { return n ? (setTimeout(function () { n(void 0, e) }, 0), !0) : e } s = this.castInput(s), u = this.castInput(u), s = this.removeEmpty(this.tokenize(s)); var d = (u = this.removeEmpty(this.tokenize(u))).length, c = s.length, h = 1, t = d + c, p = [{ newPos: -1, components: [] }], e = this.extractCommon(p[0], u, s, 0); if (p[0].newPos + 1 >= d && c <= e + 1) return f([{ value: this.join(u), count: u.length }]); function r() { for (var e = -1 * h; e <= h; e += 2) { var n = void 0, t = p[e - 1], r = p[e + 1], i = (r ? r.newPos : 0) - e; t && (p[e - 1] = void 0); var o = t && t.newPos + 1 < d, l = r && 0 <= i && i < c; if (o || l) { if (!o || l && t.newPos < r.newPos ? (n = { newPos: (r = r).newPos, components: r.components.slice(0) }, a.pushComponent(n.components, void 0, !0)) : ((n = t).newPos++, a.pushComponent(n.components, !0, void 0)), i = a.extractCommon(n, u, s, e), n.newPos + 1 >= d && c <= i + 1) return f(function (e, n, t, r, i) { for (var o = 0, l = n.length, s = 0, u = 0; o < l; o++) { var a, f = n[o]; f.removed ? (f.value = e.join(r.slice(u, u + f.count)), u += f.count, o && n[o - 1].added && (a = n[o - 1], n[o - 1] = n[o], n[o] = a)) : (!f.added && i ? (a = (a = t.slice(s, s + f.count)).map(function (e, n) { n = r[u + n]; return n.length > e.length ? n : e }), f.value = e.join(a)) : f.value = e.join(t.slice(s, s + f.count)), s += f.count, f.added || (u += f.count)) } var d = n[l - 1]; 1 < l && "string" == typeof d.value && (d.added || d.removed) && e.equals("", d.value) && (n[l - 2].value += d.value, n.pop()); return n }(a, n.components, u, s, a.useLongestToken)); p[e] = n } else p[e] = void 0 } h++ } if (n) !function e() { setTimeout(function () { return t < h ? n() : void (r() || e()) }, 0) }(); else for (; h <= t;) { var i = r(); if (i) return i } }, pushComponent: function (e, n, t) { var r = e[e.length - 1]; r && r.added === n && r.removed === t ? e[e.length - 1] = { count: r.count + 1, added: n, removed: t } : e.push({ count: 1, added: n, removed: t }) }, extractCommon: function (e, n, t, r) { for (var i = n.length, o = t.length, l = e.newPos, s = l - r, u = 0; l + 1 < i && s + 1 < o && this.equals(n[l + 1], t[s + 1]);)l++, s++, u++; return u && e.components.push({ count: u }), e.newPos = l, s }, equals: function (e, n) { return this.options.comparator ? this.options.comparator(e, n) : e === n || this.options.ignoreCase && e.toLowerCase() === n.toLowerCase() }, removeEmpty: function (e) { for (var n = [], t = 0; t < e.length; t++)e[t] && n.push(e[t]); return n }, castInput: function (e) { return e }, tokenize: function (e) { return e.split("") }, join: function (e) { return e.join("") } }; var r = new t; function i(e, n) { if ("function" == typeof e) n.callback = e; else if (e) for (var t in e) e.hasOwnProperty(t) && (n[t] = e[t]); return n } var o = /^[A-Za-z\xC0-\u02C6\u02C8-\u02D7\u02DE-\u02FF\u1E00-\u1EFF]+$/, l = /\S/, s = new t; s.equals = function (e, n) { return this.options.ignoreCase && (e = e.toLowerCase(), n = n.toLowerCase()), e === n || this.options.ignoreWhitespace && !l.test(e) && !l.test(n) }, s.tokenize = function (e) { for (var n = e.split(/([^\S\r\n]+|[()[\]{}'"\r\n]|\b)/), t = 0; t < n.length - 1; t++)!n[t + 1] && n[t + 2] && o.test(n[t]) && o.test(n[t + 2]) && (n[t] += n[t + 2], n.splice(t + 1, 2), t--); return n }; var u = new t; function m(e, n, t) { return u.diff(e, n, t) } u.tokenize = function (e) { var n = [], t = e.split(/(\n|\r\n)/); t[t.length - 1] || t.pop(); for (var r = 0; r < t.length; r++) { var i = t[r]; r % 2 && !this.options.newlineIsToken ? n[n.length - 1] += i : (this.options.ignoreWhitespace && (i = i.trim()), n.push(i)) } return n }; var a = new t; a.tokenize = function (e) { return e.split(/(\S.+?[.!?])(?=\s+|$)/) }; var f = new t; function d(e) { return (d = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) { return typeof e } : function (e) { return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e })(e) } function w(e) { return function (e) { if (Array.isArray(e)) return c(e) }(e) || function (e) { if ("undefined" != typeof Symbol && Symbol.iterator in Object(e)) return Array.from(e) }(e) || function (e, n) { if (!e) return; if ("string" == typeof e) return c(e, n); var t = Object.prototype.toString.call(e).slice(8, -1); "Object" === t && e.constructor && (t = e.constructor.name); if ("Map" === t || "Set" === t) return Array.from(e); if ("Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return c(e, n) }(e) || function () { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.") }() } function c(e, n) { (null == n || n > e.length) && (n = e.length); for (var t = 0, r = new Array(n); t < n; t++)r[t] = e[t]; return r } f.tokenize = function (e) { return e.split(/([{}:;,]|\s+)/) }; var h = Object.prototype.toString, p = new t; function v(e, n, t, r, i) { var o, l; for (n = n || [], t = t || [], r && (e = r(i, e)), o = 0; o < n.length; o += 1)if (n[o] === e) return t[o]; if ("[object Array]" === h.call(e)) { for (n.push(e), l = new Array(e.length), t.push(l), o = 0; o < e.length; o += 1)l[o] = v(e[o], n, t, r, i); return n.pop(), t.pop(), l } if (e && e.toJSON && (e = e.toJSON()), "object" === d(e) && null !== e) { n.push(e), l = {}, t.push(l); var s, u = []; for (s in e) e.hasOwnProperty(s) && u.push(s); for (u.sort(), o = 0; o < u.length; o += 1)l[s = u[o]] = v(e[s], n, t, r, s); n.pop(), t.pop() } else l = e; return l } p.useLongestToken = !0, p.tokenize = u.tokenize, p.castInput = function (e) { var n = this.options, t = n.undefinedReplacement, n = n.stringifyReplacer, n = void 0 === n ? function (e, n) { return void 0 === n ? t : n } : n; return "string" == typeof e ? e : JSON.stringify(v(e, null, null, n), n, "  ") }, p.equals = function (e, n) { return t.prototype.equals.call(p, e.replace(/,([\r\n])/g, "$1"), n.replace(/,([\r\n])/g, "$1")) }; var g = new t; function P(e) { var l = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : {}, s = e.split(/\r\n|[\n\v\f\r\x85]/), u = e.match(/\r\n|[\n\v\f\r\x85]/g) || [], r = [], a = 0; function n() { var e = {}; for (r.push(e); a < s.length;) { var n = s[a]; if (/^(\-\-\-|\+\+\+|@@)\s/.test(n)) break; n = /^(?:Index:|diff(?: -r \w+)+)\s+(.+?)\s*$/.exec(n); n && (e.index = n[1]), a++ } for (i(e), i(e), e.hunks = []; a < s.length;) { var t = s[a]; if (/^(Index:|diff|\-\-\-|\+\+\+)\s/.test(t)) break; if (/^@@/.test(t)) e.hunks.push(function () { var e = a, n = s[a++].split(/@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/), t = { oldStart: +n[1], oldLines: void 0 === n[2] ? 1 : +n[2], newStart: +n[3], newLines: void 0 === n[4] ? 1 : +n[4], lines: [], linedelimiters: [] }; 0 === t.oldLines && (t.oldStart += 1); 0 === t.newLines && (t.newStart += 1); for (var r = 0, i = 0; a < s.length && !(0 === s[a].indexOf("--- ") && a + 2 < s.length && 0 === s[a + 1].indexOf("+++ ") && 0 === s[a + 2].indexOf("@@")); a++) { var o = 0 == s[a].length && a != s.length - 1 ? " " : s[a][0]; if ("+" !== o && "-" !== o && " " !== o && "\\" !== o) break; t.lines.push(s[a]), t.linedelimiters.push(u[a] || "\n"), "+" === o ? r++ : "-" === o ? i++ : " " === o && (r++, i++) } r || 1 !== t.newLines || (t.newLines = 0); i || 1 !== t.oldLines || (t.oldLines = 0); if (l.strict) { if (r !== t.newLines) throw new Error("Added line count did not match for hunk at line " + (e + 1)); if (i !== t.oldLines) throw new Error("Removed line count did not match for hunk at line " + (e + 1)) } return t }()); else { if (t && l.strict) throw new Error("Unknown line " + (a + 1) + " " + JSON.stringify(t)); a++ } } } function i(e) { var n, t, r = /^(---|\+\+\+)\s+(.*)$/.exec(s[a]); r && (n = "---" === r[1] ? "old" : "new", r = (t = r[2].split("\t", 2))[0].replace(/\\\\/g, "\\"), /^".*"$/.test(r) && (r = r.substr(1, r.length - 2)), e[n + "FileName"] = r, e[n + "Header"] = (t[1] || "").trim(), a++) } for (; a < s.length;)n(); return r } function y(e, n) { var t = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : {}; if ("string" == typeof n && (n = P(n)), Array.isArray(n)) { if (1 < n.length) throw new Error("applyPatch only works with a single input."); n = n[0] } var r, i, o = e.split(/\r\n|[\n\v\f\r\x85]/), l = e.match(/\r\n|[\n\v\f\r\x85]/g) || [], s = n.hunks, u = t.compareLine || function (e, n, t, r) { return n === r }, a = 0, f = t.fuzzFactor || 0, d = 0, c = 0; for (var h = 0; h < s.length; h++) { for (var p = s[h], v = o.length - p.oldLines, g = 0, m = c + p.oldStart - 1, w = function (n, t, r) { var i = !0, o = !1, l = !1, s = 1; return function e() { if (i && !l) { if (o ? s++ : i = !1, n + s <= r) return s; l = !0 } if (!o) return l || (i = !0), t <= n - s ? -s++ : (o = !0, e()) } }(m, d, v); void 0 !== g; g = w())if (function (e, n) { for (var t = 0; t < e.lines.length; t++) { var r = e.lines[t], i = 0 < r.length ? r[0] : " ", r = 0 < r.length ? r.substr(1) : r; if (" " === i || "-" === i) { if (!u(n + 1, o[n], i, r) && f < ++a) return; n++ } } return 1 }(p, m + g)) { p.offset = c += g; break } if (void 0 === g) return !1; d = p.offset + p.oldStart + p.oldLines } for (var y = 0, L = 0; L < s.length; L++) { var x = s[L], S = x.oldStart + x.offset + y - 1; y += x.newLines - x.oldLines; for (var k = 0; k < x.lines.length; k++) { var b = x.lines[k], F = 0 < b.length ? b[0] : " ", N = 0 < b.length ? b.substr(1) : b, b = x.linedelimiters[k]; " " === F ? S++ : "-" === F ? (o.splice(S, 1), l.splice(S, 1)) : "+" === F ? (o.splice(S, 0, N), l.splice(S, 0, b), S++) : "\\" === F && ("+" === (F = x.lines[k - 1] ? x.lines[k - 1][0] : null) ? r = !0 : "-" === F && (i = !0)) } } if (r) for (; !o[o.length - 1];)o.pop(), l.pop(); else i && (o.push(""), l.push("\n")); for (var H = 0; H < o.length - 1; H++)o[H] = o[H] + l[H]; return o.join("") } function L(e, n, l, s, t, r, u) { void 0 === (u = u || {}).context && (u.context = 4); var a = m(l, s, u); function f(e) { return e.map(function (e) { return " " + e }) } a.push({ value: "", lines: [] }); for (var d = [], c = 0, h = 0, p = [], v = 1, g = 1, i = 0; i < a.length; i++)!function (e) { var n, t, r, i = a[e], o = i.lines || i.value.replace(/\n$/, "").split("\n"); i.lines = o, i.added || i.removed ? (c || (t = a[e - 1], c = v, h = g, t && (p = 0 < u.context ? f(t.lines.slice(-u.context)) : [], c -= p.length, h -= p.length)), p.push.apply(p, w(o.map(function (e) { return (i.added ? "+" : "-") + e }))), i.added ? g += o.length : v += o.length) : (c && (o.length <= 2 * u.context && e < a.length - 2 ? p.push.apply(p, w(f(o))) : (r = Math.min(o.length, u.context), p.push.apply(p, w(f(o.slice(0, r)))), n = { oldStart: c, oldLines: v - c + r, newStart: h, newLines: g - h + r, lines: p }, e >= a.length - 2 && o.length <= u.context && (t = /\n$/.test(l), r = /\n$/.test(s), e = 0 == o.length && p.length > n.oldLines, !t && e && 0 < l.length && p.splice(n.oldLines, 0, "\\ No newline at end of file"), (t || e) && r || p.push("\\ No newline at end of file")), d.push(n), h = c = 0, p = [])), v += o.length, g += o.length) }(i); return { oldFileName: e, newFileName: n, oldHeader: t, newHeader: r, hunks: d } } function x(e, n, t, r, i, o, l) { return function (e) { var n = []; e.oldFileName == e.newFileName && n.push("Index: " + e.oldFileName), n.push("==================================================================="), n.push("--- " + e.oldFileName + (void 0 === e.oldHeader ? "" : "\t" + e.oldHeader)), n.push("+++ " + e.newFileName + (void 0 === e.newHeader ? "" : "\t" + e.newHeader)); for (var t = 0; t < e.hunks.length; t++) { var r = e.hunks[t]; 0 === r.oldLines && --r.oldStart, 0 === r.newLines && --r.newStart, n.push("@@ -" + r.oldStart + "," + r.oldLines + " +" + r.newStart + "," + r.newLines + " @@"), n.push.apply(n, r.lines) } return n.join("\n") + "\n" }(L(e, n, t, r, i, o, l)) } function S(e, n) { if (n.length > e.length) return !1; for (var t = 0; t < n.length; t++)if (n[t] !== e[t]) return !1; return !0 } function k(e) { var n = function r(e) { var i = 0; var o = 0; e.forEach(function (e) { var n, t; "string" != typeof e ? (n = r(e.mine), t = r(e.theirs), void 0 !== i && (n.oldLines === t.oldLines ? i += n.oldLines : i = void 0), void 0 !== o && (n.newLines === t.newLines ? o += n.newLines : o = void 0)) : (void 0 === o || "+" !== e[0] && " " !== e[0] || o++, void 0 === i || "-" !== e[0] && " " !== e[0] || i++) }); return { oldLines: i, newLines: o } }(e.lines), t = n.oldLines, n = n.newLines; void 0 !== t ? e.oldLines = t : delete e.oldLines, void 0 !== n ? e.newLines = n : delete e.newLines } function b(e, n) { if ("string" != typeof e) return e; if (/^@@/m.test(e) || /^Index:/m.test(e)) return P(e)[0]; if (!n) throw new Error("Must provide a base reference or pass in a patch"); return L(void 0, void 0, n, e) } function F(e) { return e.newFileName && e.newFileName !== e.oldFileName } function N(e, n, t) { return n === t ? n : (e.conflict = !0, { mine: n, theirs: t }) } function H(e, n) { return e.oldStart < n.oldStart && e.oldStart + e.oldLines < n.oldStart } function C(e, n) { return { oldStart: e.oldStart, oldLines: e.oldLines, newStart: e.newStart + n, newLines: e.newLines, lines: e.lines } } function j(e, n, t, r) { var i = O(n), n = function (e, n) { var t = [], r = [], i = 0, o = !1, l = !1; for (; i < n.length && e.index < e.lines.length;) { var s = e.lines[e.index], u = n[i]; if ("+" === u[0]) break; if (o = o || " " !== s[0], r.push(u), i++, "+" === s[0]) for (l = !0; "+" === s[0];)t.push(s), s = e.lines[++e.index]; u.substr(1) === s.substr(1) ? (t.push(s), e.index++) : l = !0 } "+" === (n[i] || "")[0] && o && (l = !0); if (l) return t; for (; i < n.length;)r.push(n[i++]); return { merged: r, changes: t } }(t, i); n.merged ? (t = e.lines).push.apply(t, w(n.merged)) : z(e, r ? n : i, r ? i : n) } function z(e, n, t) { e.conflict = !0, e.lines.push({ conflict: !0, mine: n, theirs: t }) } function A(e, n, t) { for (; n.offset < t.offset && n.index < n.lines.length;) { var r = n.lines[n.index++]; e.lines.push(r), n.offset++ } } function E(e, n) { for (; n.index < n.lines.length;) { var t = n.lines[n.index++]; e.lines.push(t) } } function O(e) { for (var n = [], t = e.lines[e.index][0]; e.index < e.lines.length;) { var r = e.lines[e.index]; if ("-" === t && "+" === r[0] && (t = "+"), t !== r[0]) break; n.push(r), e.index++ } return n } function I(e) { return e.reduce(function (e, n) { return e && "-" === n[0] }, !0) } function $(e, n, t) { for (var r = 0; r < t; r++) { var i = n[n.length - t + r].substr(1); if (e.lines[e.index + r] !== " " + i) return } return e.index += t, 1 } g.tokenize = function (e) { return e.slice() }, g.join = g.removeEmpty = function (e) { return e }, e.Diff = t, e.applyPatch = y, e.applyPatches = function (e, i) { "string" == typeof e && (e = P(e)); var n = 0; !function t() { var r = e[n++]; if (!r) return i.complete(); i.loadFile(r, function (e, n) { return e ? i.complete(e) : (n = y(n, r, i), void i.patched(r, n, function (e) { return e ? i.complete(e) : void t() })) }) }() }, e.canonicalize = v, e.convertChangesToDMP = function (e) { for (var n, t, r = [], i = 0; i < e.length; i++)t = (n = e[i]).added ? 1 : n.removed ? -1 : 0, r.push([t, n.value]); return r }, e.convertChangesToXML = function (e) { for (var n = [], t = 0; t < e.length; t++) { var r = e[t]; r.added ? n.push("<ins>") : r.removed && n.push("<del>"), n.push(r.value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;")), r.added ? n.push("</ins>") : r.removed && n.push("</del>") } return n.join("") }, e.createPatch = function (e, n, t, r, i, o) { return x(e, e, n, t, r, i, o) }, e.createTwoFilesPatch = x, e.diffArrays = function (e, n, t) { return g.diff(e, n, t) }, e.diffChars = function (e, n, t) { return r.diff(e, n, t) }, e.diffCss = function (e, n, t) { return f.diff(e, n, t) }, e.diffJson = function (e, n, t) { return p.diff(e, n, t) }, e.diffLines = m, e.diffSentences = function (e, n, t) { return a.diff(e, n, t) }, e.diffTrimmedLines = function (e, n, t) { return t = i(t, { ignoreWhitespace: !0 }), u.diff(e, n, t) }, e.diffWords = function (e, n, t) { return t = i(t, { ignoreWhitespace: !0 }), s.diff(e, n, t) }, e.diffWordsWithSpace = function (e, n, t) { return s.diff(e, n, t) }, e.merge = function (e, n, t) { e = b(e, t), n = b(n, t); var r = {}; (e.index || n.index) && (r.index = e.index || n.index), (e.newFileName || n.newFileName) && (F(e) ? F(n) ? (r.oldFileName = N(r, e.oldFileName, n.oldFileName), r.newFileName = N(r, e.newFileName, n.newFileName), r.oldHeader = N(r, e.oldHeader, n.oldHeader), r.newHeader = N(r, e.newHeader, n.newHeader)) : (r.oldFileName = e.oldFileName, r.newFileName = e.newFileName, r.oldHeader = e.oldHeader, r.newHeader = e.newHeader) : (r.oldFileName = n.oldFileName || e.oldFileName, r.newFileName = n.newFileName || e.newFileName, r.oldHeader = n.oldHeader || e.oldHeader, r.newHeader = n.newHeader || e.newHeader)), r.hunks = []; for (var i = 0, o = 0, l = 0, s = 0; i < e.hunks.length || o < n.hunks.length;) { var u, a = e.hunks[i] || { oldStart: 1 / 0 }, f = n.hunks[o] || { oldStart: 1 / 0 }; H(a, f) ? (r.hunks.push(C(a, l)), i++, s += a.newLines - a.oldLines) : H(f, a) ? (r.hunks.push(C(f, s)), o++, l += f.newLines - f.oldLines) : (function (e, n, t, r, i) { var o, l = { offset: n, lines: t, index: 0 }, s = { offset: r, lines: i, index: 0 }; A(e, l, s), A(e, s, l); for (; l.index < l.lines.length && s.index < s.lines.length;) { var u = l.lines[l.index], a = s.lines[s.index]; "-" !== u[0] && "+" !== u[0] || "-" !== a[0] && "+" !== a[0] ? "+" === u[0] && " " === a[0] ? (o = e.lines).push.apply(o, w(O(l))) : "+" === a[0] && " " === u[0] ? (o = e.lines).push.apply(o, w(O(s))) : "-" === u[0] && " " === a[0] ? j(e, l, s) : "-" === a[0] && " " === u[0] ? j(e, s, l, !0) : u === a ? (e.lines.push(u), l.index++, s.index++) : z(e, O(l), O(s)) : function (e, n, t) { var r, i = O(n), o = O(t); if (I(i) && I(o)) { if (S(i, o) && $(t, i, i.length - o.length)) return (t = e.lines).push.apply(t, w(i)); if (S(o, i) && $(n, o, o.length - i.length)) return (r = e.lines).push.apply(r, w(o)) } else if (function (e, n) { return e.length === n.length && S(e, n) }(i, o)) return (r = e.lines).push.apply(r, w(i)); z(e, i, o) }(e, l, s) } E(e, l), E(e, s), k(e) }(u = { oldStart: Math.min(a.oldStart, f.oldStart), oldLines: 0, newStart: Math.min(a.newStart + l, f.oldStart + s), newLines: 0, lines: [] }, a.oldStart, a.lines, f.oldStart, f.lines), o++, i++, r.hunks.push(u)) } return r }, e.parsePatch = P, e.structuredPatch = L, Object.defineProperty(e, "__esModule", { value: !0 }) });
     </script>
     <script id="cc">
         const slideInLeft = [
@@ -1261,254 +1256,6 @@
             }
         }
 
-        const checkEntry = debounce(e => {
-            const contentCard = e.target.closest('.content-card')
-            const contentArea = contentCard.querySelector('.content__area')
-            const uid = contentCard.dataset.uid
-            const isUniqueEntry = contentArea.dataset.type === 'origin'
-            if (contentArea.textContent.trim() === '') {
-                contentCard.querySelector('.submit-entry').classList.add('hide-completely')
-            } else {
-                const clean = DOMPurify.sanitize(contentArea.innerHTML.split('\n').map(v => v.trim()).filter(v => v).join('\n'), { FORBID_ATTR: ['style'] })
-                const hash = Crypto.SHA256(clean)
-                let previousHash
-                if (!isUniqueEntry) {
-                    ({ hash: previousHash = '' } = getIterationDetails(uid))
-                } else {
-                    previousHash = ''
-                }
-                if (previousHash !== hash)
-                    contentCard.querySelector('.submit-entry').classList.remove('hide-completely')
-                else
-                    contentCard.querySelector('.submit-entry').classList.add('hide-completely')
-            }
-
-        }, 300)
-        getRef('article_wrapper').addEventListener('click', e => {
-            if (e.target.closest('.submit-entry')) {
-                const submitButton = e.target.closest('.submit-entry')
-                const contentCard = e.target.closest('.content-card')
-                const contentArea = contentCard.querySelector('.content__area')
-                const uid = contentCard.dataset.uid
-                const isUniqueEntry = contentArea.dataset.type === 'origin'
-                const parentSection = contentCard.closest('.article-section')
-                const sectionID = parentSection.dataset.sectionId
-                const clean = DOMPurify.sanitize(contentArea.innerHTML.split('\n').map(v => v.trim()).filter(v => v).join('\n'), { FORBID_ATTR: ['style'] })
-                if (clean === '') return
-                const hash = Crypto.SHA256(clean)
-                let previousVersion, previousHash
-                if (!isUniqueEntry) {
-                    ({ data: previousVersion, hash: previousHash = '', contributors } = getIterationDetails(uid))
-                } else {
-                    previousHash = ''
-                }
-                console.log(previousVersion, clean)
-                if (previousHash !== hash) {
-                    const timestamp = Date.now()
-                    const entry = {
-                        section: sectionID,
-                        origin: isUniqueEntry ? floCrypto.randString(16, true) : uid,
-                        data: isUniqueEntry ? clean : getDiff(previousVersion, clean),
-                        hash
-                    }
-                    submitButton.innerHTML = `<sm-spinner></sm-spinner>`
-                    submitButton.disabled = true
-                    floCloudAPI.sendGeneralData(entry, `${floGlobals.currentArticle.id}_gd`)
-                        .then((res) => {
-                            let genDataVC
-                            // Add result to general data
-                            for (genDataVC in res) {
-                                floGlobals.generalData[`${floGlobals.currentArticle.id}_gd|${floGlobals.adminID}|${floGlobals.application}`][genDataVC] = res[genDataVC]
-                            }
-
-                            submitButton.classList.add('hide-completely')
-                            notify('sent data', 'success')
-                            if (isUniqueEntry) {
-                                contentArea.innerHTML = ''
-                                floGlobals.currentArticle.sections[sectionID].uniqueEntries.push(entry.origin)
-                                floGlobals.currentArticle.uniqueEntries[entry.origin] = { iterations: [genDataVC] }
-                                // Insert new content card based on set filter
-                                const newCard = render.contentCard(entry.origin)
-                                if (getRef('sort_content_list').value === 'time') {
-                                    parentSection.firstElementChild.after(newCard)
-                                    newCard.animate(slideInRight, {
-                                        duration: 300,
-                                        fill: 'forwards',
-                                        easing: 'ease'
-                                    })
-                                    const width = newCard.getBoundingClientRect().width
-                                    const siblings = Array.from(newCard.parentNode.children)
-                                    const nextSiblings = siblings.slice(siblings.indexOf(newCard) + 1)
-                                    nextSiblings.forEach(elem => {
-                                        elem.animate([
-                                            {
-                                                transform: `translateX(-${width}px)`
-                                            },
-                                            {
-                                                transform: 'translateX(0)'
-                                            },
-                                        ], {
-                                            duration: 200,
-                                            fill: 'forwards',
-                                            easing: 'ease'
-                                        })
-                                            .onfinish = (e) => {
-                                                e.target.cancel()
-                                            }
-                                    })
-                                } else {
-                                    parentSection.append(newCard)
-                                }
-                            } else {
-                                let noOfContributors = 0
-                                for (const contributor in contributors) {
-                                    noOfContributors++
-                                    if (noOfContributors === 2)
-                                        break
-                                }
-                                if (noOfContributors < 2 && !contributors.hasOwnProperty(myFloID)) {
-                                    contentCard.querySelector('.content__author').textContent = `${myFloID} and 1 more`
-                                }
-                                floGlobals.currentArticle.uniqueEntries[entry.origin].iterations.push(genDataVC)
-                            }
-                        })
-                        .catch(err => console.log(err))
-                        .finally(() => {
-                            submitButton.textContent = 'Submit'
-                            submitButton.disabled = false
-                        })
-                } else {
-                    notify("Duplicate entry!", 'error')
-                }
-            } else if (e.target.closest('.version-history-button')) {
-                const entryUid = e.target.closest('.content-card').dataset.uid
-                if (floGlobals.versionHistory.isOpen && entryUid === floGlobals.versionHistory.entryUid)
-                    hideVersionHistory()
-                else
-                    showVersionHistory(entryUid)
-            } else if (e.target.closest('.content__contributors')) {
-                const entryUid = e.target.closest('.content-card').dataset.uid
-                const { contributors } = getIterationDetails(entryUid)
-                const frag = document.createDocumentFragment()
-                getRef('contributor_list').innerHTML = ''
-                for (const floID in contributors) {
-                    const contributor = getRef('contributor_template').content.cloneNode(true)
-                    contributor.querySelector('.contributor__id').textContent = floID
-                    contributor.querySelector('.contributor__time').textContent = `Last edited: ${getFormattedTime(contributors[floID])}`
-                    frag.prepend(contributor)
-                }
-                getRef('contributor_list').append(frag)
-                showPopup('contributors_popup')
-            } else if (e.target.closest('.see-more')) {
-                const target = e.target.closest('.see-more')
-                const sectionID = target.parentNode.dataset.sectionId
-                if (floGlobals.currentArticle.sections[sectionID].expanded) {
-                    target.textContent = `See ${floGlobals.currentArticle.sections[sectionID].uniqueEntries.length - maxCardsPerSection} more`;
-                    [...target.parentNode.nextElementSibling.children].slice(3).forEach(card => {
-                        card.querySelector('sm-checkbox').checked = false
-                        card.remove()
-                    })
-                    floGlobals.currentArticle.sections[sectionID].expanded = false
-                } else {
-                    target.textContent = 'See less'
-                    floGlobals.currentArticle.sections[sectionID].uniqueEntries.slice(maxCardsPerSection).forEach(entry => {
-                        const contentCard = render.contentCard(entry)
-                        if (contentCard)
-                            target.parentNode.nextElementSibling.append(contentCard)
-                    })
-                    floGlobals.currentArticle.sections[sectionID].expanded = true
-                }
-            } else if (e.target.closest('.score-button') && floGlobals.isSubAdmin) {
-                floGlobals.versionHistory.currentEntry = e.target.closest('.content-card').dataset.vectorClock
-                getRef('update_score_field').value = e.target.closest('.score-button').children[1].textContent
-                showPopup('scoring_popup')
-            }
-        })
-        getRef('version_timeline').addEventListener('click', e => {
-            if (e.target.closest('.score-button') && floGlobals.isSubAdmin) {
-                floGlobals.versionHistory.currentEntry = e.target.closest('.history-entry').dataset.vectorClock
-                getRef('update_score_field').value = e.target.closest('.score-button').children[1].textContent
-                showPopup('scoring_popup')
-            }
-        })
-        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();
-        })
-        const selectedContent = new Map()
-        let isContentSelected = false
-        getRef('article_wrapper').addEventListener("change", e => {
-            if (e.target.closest('sm-checkbox')) {
-                const contentCard = e.target.closest('.content-card')
-                const contentID = contentCard.dataset.uid
-                contentCard.classList.toggle('selected')
-                if (!floGlobals.isSubAdmin)
-                    contentCard.querySelector('.content__area').toggleAttribute('contenteditable')
-                if (selectedContent.has(contentID)) {
-                    selectedContent.delete(contentID)
-                } else {
-                    const sectionID = contentCard.closest('.article-section').dataset.sectionId
-                    const content = DOMPurify.sanitize(contentCard.querySelector('.content__area').innerHTML.split('\n').map(v => v.trim()).filter(v => v).join('\n'), { FORBID_ATTR: ['style'] })
-                        .replace(/b>/gi, 'strong>').replace(/i>/gi, 'em>')
-                    const contributors = Object.keys(getIterationDetails(contentID).contributors)
-                    selectedContent.set(contentID, { content, sectionID, contributors })
-                }
-                const animOptions = {
-                    duration: 150,
-                    easing: 'ease',
-                }
-                const selectedContentSize = selectedContent.size
-                getRef('selected_entries_no').textContent = `${selectedContentSize} selected for download`
-                if (selectedContentSize === 1 && !isContentSelected) {
-                    getRef('article_name_wrapper').classList.remove('hide-completely')
-                    getRef('selected_content_options').classList.add('hide-completely')
-                    animateTo(getRef('article_name_wrapper'), slideOutLeft, animOptions)
-                        .onfinish = () => {
-                            isContentSelected = true
-                            getRef('article_name_wrapper').classList.add('hide-completely')
-                            getRef('selected_content_options').classList.remove('hide-completely')
-                            animateTo(getRef('selected_content_options'), slideInLeft, animOptions)
-                        }
-                } else if (selectedContent.size === 0) {
-                    getRef('article_name_wrapper').classList.add('hide-completely')
-                    getRef('selected_content_options').classList.remove('hide-completely')
-                    animateTo(getRef('selected_content_options'), slideOutRight, animOptions)
-                        .onfinish = () => {
-                            isContentSelected = false
-                            getRef('article_name_wrapper').classList.remove('hide-completely')
-                            getRef('selected_content_options').classList.add('hide-completely')
-                            animateTo(getRef('article_name_wrapper'), slideInRight, animOptions)
-                        }
-                }
-            }
-        })
-
-        function formatSelectedContent() {
-            const composedDocumentStructure = {}
-            floGlobals.appObjects[floGlobals.currentArticle.id].sections.forEach(section => composedDocumentStructure[section.id] = [])
-            selectedContent.forEach(({ content, sectionID }, uid) => {
-                composedDocumentStructure[sectionID].push({ content, uid })
-            })
-            for (const section in composedDocumentStructure) {
-                if (!composedDocumentStructure[section].length)
-                    delete composedDocumentStructure[section]
-            }
-            return composedDocumentStructure
-        }
-
-        function clearSelection() {
-            selectedContent.forEach((v, key) => {
-                getRef('article_wrapper').querySelector(`.content-card[data-uid="${key}"] sm-checkbox`).checked = false
-            })
-            selectedContent.clear()
-        }
-
         function renderPreview() {
             const composedDocumentStructure = formatSelectedContent()
             let frag = document.createDocumentFragment()
@@ -1600,22 +1347,6 @@
             const readingTime = getReadingTime(bodyTemplate.querySelector('#export_body').textContent)
             bodyTemplate.querySelector('#reading_time').textContent = `${readingTime} min read`
             let bodyAttributes = ''
-            let extraScripts = ''
-            // if (floGlobals.isSubAdmin) {
-            //     bodyAttributes = `data-article-id="${floGlobals.currentArticle.id}" onload="onLoadStartUp()"`
-            //     // copy script already present in this file instead of storing a duplicate
-            //     extraScripts = `
-            //         ${getRef('voting_enabled').innerHTML}
-            //         <script>
-            //             ${getRef('init_lib').innerHTML}
-            //             ${getRef('floCrypto').innerHTML}
-            //             ${getRef('floBlockchainAPI').innerHTML}
-            //             ${getRef('compactIDB').innerHTML}
-            //             ${getRef('floCloudAPI').innerHTML}
-            //             ${getRef('floDapps').innerHTML}
-            //          <\/script>
-            //         `
-            // }
             if (!floGlobals.isSubAdmin) {
                 bodyTemplate.querySelector('header button').remove()
             }
@@ -1631,7 +1362,6 @@
                     <head>${headHTML.innerHTML}<\/head>
                     <body data-theme="light" ${bodyAttributes}>
                         ${bodyHTML.innerHTML}
-                        ${extraScripts}
                         <\/body>
                 <\/html>
             `
@@ -1895,18 +1625,19 @@
                 })
                 if (isDefaultArticle) {
                     link.classList.add('default-article')
+                    link.title = 'Actively written article'
                 }
                 return link
             },
             contentCard(id, version = 0) {
-                const { data, contributors, score = 0, vectorClock } = getIterationDetails(id)
+                const { html, contributors, score = 0, vectorClock } = getIterationDetails(id)
                 const clone = getRef('content_card_template').content.cloneNode(true).firstElementChild;
                 clone.dataset.uid = id
                 clone.dataset.vectorClock = vectorClock
                 if (!floGlobals.isSubAdmin) {
                     clone.querySelector('.content__area').setAttribute('contentEditable', true)
                 }
-                clone.querySelector('.content__area').innerHTML = DOMPurify.sanitize(data)
+                clone.querySelector('.content__area').innerHTML = DOMPurify.sanitize(html)
                 let noOfContributors = 0
                 let latestContributor
                 for (const contributor in contributors) {
@@ -1918,44 +1649,27 @@
                 return clone
             },
             historyEntry(details, oldText) {
-                const { editor, timestamp, data, score, vectorClock } = details
+                const { editor, timestamp, plainText, score, vectorClock } = details
                 const clone = getRef('history_entry_template').content.cloneNode(true).firstElementChild;
                 clone.dataset.vectorClock = vectorClock
                 clone.querySelector('.entry__time').textContent = getFormattedTime(timestamp)
                 clone.querySelector('.entry__time').after(getScoreElement(score))
                 clone.querySelector('.entry__author').textContent = editor
-                if (Array.isArray(data)) {
-                    const [removedAt, addedWords, addedAt] = data
-                    const changed = oldText.split(' ')
-                    addedAt.forEach((place, index) => {
-                        changed.splice(place, 0, { added: true, content: addedWords[index] })
-                    })
-                    removedAt.forEach(place => changed[place] = { added: false, content: changed[place] })
-                    const final = changed.map((word, index) => {
-                        if (word.hasOwnProperty('added')) {
-                            let consecutiveWords = [],
-                                i
-                            const type = word.added
-                            for (i = index; (changed[i] && changed[i].hasOwnProperty('added') && changed[i].added === type); i++) {
-                                consecutiveWords.push(changed[i].content)
-                            }
-                            if (i - index > 1)
-                                changed.splice((index + 1), (i - index - 1))
-                            if (type) {
-                                return `<span class="added">${consecutiveWords.join(' ')}</span>`
-                            } else {
-                                return `<s class="removed">${consecutiveWords.join(' ')}</s>`
-                            }
-                        } else return word
-                    })
-                    clone.querySelector('.entry__changes').innerHTML = DOMPurify.sanitize(final.join(' '));
-                    [...clone.querySelector('.entry__changes').children].forEach(element => {
-                        if (element.tagName === 'P' && !element.querySelector('.added, .removed')) {
-                            element.remove()
-                        }
+                if (oldText !== '') {
+                    const frag = document.createDocumentFragment()
+                    Diff.diffChars(oldText, plainText).forEach((part) => {
+                        const type = part.added ? 'added' :
+                            part.removed ? 'removed' : '';
+                        frag.append(
+                            createElement('span', {
+                                textContent: part.value,
+                                className: type
+                            })
+                        );
                     });
+                    clone.querySelector('.entry__changes').append(frag)
                 } else {
-                    clone.querySelector('.entry__changes').innerHTML = DOMPurify.sanitize(data)
+                    clone.querySelector('.entry__changes').textContent = plainText
                 }
                 return clone
             },
@@ -2041,9 +1755,10 @@
         }
 
         function getGenData(vectorClock) {
-            const { message: { section, origin, data, hash }, senderID, time } = floGlobals.generalData[`${floGlobals.currentArticle.id}_gd|${floGlobals.adminID}|${floGlobals.application}`][vectorClock]
+            const { message: { section, origin, plainText, html, hash }, senderID, time } = floGlobals.generalData[`${floGlobals.currentArticle.id}_gd|${floGlobals.adminID}|${floGlobals.application}`][vectorClock]
             return {
-                data,
+                plainText,
+                html,
                 editor: senderID,
                 hash,
                 score: getScore(vectorClock),
@@ -2052,6 +1767,256 @@
             }
         }
 
+        const checkEntry = debounce(e => {
+            const contentCard = e.target.closest('.content-card')
+            const contentArea = contentCard.querySelector('.content__area')
+            const uid = contentCard.dataset.uid
+            const isUniqueEntry = contentArea.dataset.type === 'origin'
+            if (contentArea.textContent.trim() === '') {
+                contentCard.querySelector('.submit-entry').classList.add('hide-completely')
+            } else {
+                const cleanHTML = DOMPurify.sanitize(contentArea.innerHTML.split('\n').map(v => v.trim()).filter(v => v).join('\n'), { FORBID_ATTR: ['style'] })
+                const hash = Crypto.SHA256(cleanHTML)
+                let previousHash
+                if (!isUniqueEntry) {
+                    ({ hash: previousHash = '' } = getIterationDetails(uid))
+                } else {
+                    previousHash = ''
+                }
+                if (previousHash !== hash)
+                    contentCard.querySelector('.submit-entry').classList.remove('hide-completely')
+                else
+                    contentCard.querySelector('.submit-entry').classList.add('hide-completely')
+            }
+
+        }, 300)
+        getRef('article_wrapper').addEventListener('click', e => {
+            if (e.target.closest('.submit-entry')) {
+                const submitButton = e.target.closest('.submit-entry')
+                const contentCard = e.target.closest('.content-card')
+                const contentArea = contentCard.querySelector('.content__area')
+                const uid = contentCard.dataset.uid
+                const isUniqueEntry = contentArea.dataset.type === 'origin'
+                const parentSection = contentCard.closest('.article-section')
+                const sectionID = parentSection.dataset.sectionId
+                const plainText = contentArea.innerText.trim()
+                if (plainText === '') return
+                const cleanHTML = DOMPurify.sanitize(contentArea.innerHTML.split('\n').map(v => v.trim()).filter(v => v).join('\n'), { FORBID_ATTR: ['style'] })
+                const hash = Crypto.SHA256(cleanHTML)
+                let previousVersion, previousHash
+                if (!isUniqueEntry) {
+                    ({ html: previousVersion, hash: previousHash = '', contributors } = getIterationDetails(uid))
+                } else {
+                    previousHash = ''
+                }
+                if (previousHash !== hash) {
+                    const timestamp = Date.now()
+                    const entry = {
+                        section: sectionID,
+                        origin: isUniqueEntry ? floCrypto.randString(16, true) : uid,
+                        plainText,
+                        html: cleanHTML,
+                        hash
+                    }
+                    submitButton.innerHTML = `<sm-spinner></sm-spinner>`
+                    submitButton.disabled = true
+                    floCloudAPI.sendGeneralData(entry, `${floGlobals.currentArticle.id}_gd`)
+                        .then((res) => {
+                            let genDataVC
+                            // Add result to general data
+                            for (genDataVC in res) {
+                                floGlobals.generalData[`${floGlobals.currentArticle.id}_gd|${floGlobals.adminID}|${floGlobals.application}`][genDataVC] = res[genDataVC]
+                            }
+
+                            submitButton.classList.add('hide-completely')
+                            notify('sent data', 'success')
+                            if (isUniqueEntry) {
+                                contentArea.innerHTML = ''
+                                floGlobals.currentArticle.sections[sectionID].uniqueEntries.push(entry.origin)
+                                floGlobals.currentArticle.uniqueEntries[entry.origin] = { iterations: [genDataVC] }
+                                // Insert new content card based on set filter
+                                const newCard = render.contentCard(entry.origin)
+                                if (getRef('sort_content_list').value === 'time') {
+                                    parentSection.firstElementChild.after(newCard)
+                                    newCard.animate(slideInRight, {
+                                        duration: 300,
+                                        fill: 'forwards',
+                                        easing: 'ease'
+                                    })
+                                    const width = newCard.getBoundingClientRect().width
+                                    const siblings = Array.from(newCard.parentNode.children)
+                                    const nextSiblings = siblings.slice(siblings.indexOf(newCard) + 1)
+                                    nextSiblings.forEach(elem => {
+                                        elem.animate([
+                                            {
+                                                transform: `translateX(-${width}px)`
+                                            },
+                                            {
+                                                transform: 'translateX(0)'
+                                            },
+                                        ], {
+                                            duration: 200,
+                                            fill: 'forwards',
+                                            easing: 'ease'
+                                        })
+                                            .onfinish = (e) => {
+                                                e.target.cancel()
+                                            }
+                                    })
+                                } else {
+                                    parentSection.append(newCard)
+                                }
+                            } else {
+                                let noOfContributors = 0
+                                for (const contributor in contributors) {
+                                    noOfContributors++
+                                    if (noOfContributors === 2)
+                                        break
+                                }
+                                if (noOfContributors < 2 && !contributors.hasOwnProperty(myFloID)) {
+                                    contentCard.querySelector('.content__author').textContent = `${myFloID} and 1 more`
+                                }
+                                floGlobals.currentArticle.uniqueEntries[entry.origin].iterations.push(genDataVC)
+                            }
+                        })
+                        .catch(err => console.log(err))
+                        .finally(() => {
+                            submitButton.textContent = 'Submit'
+                            submitButton.disabled = false
+                        })
+                } else {
+                    notify("Duplicate entry!", 'error')
+                }
+            } else if (e.target.closest('.version-history-button')) {
+                const entryUid = e.target.closest('.content-card').dataset.uid
+                if (floGlobals.versionHistory.isOpen && entryUid === floGlobals.versionHistory.entryUid)
+                    hideVersionHistory()
+                else
+                    showVersionHistory(entryUid)
+            } else if (e.target.closest('.content__contributors')) {
+                const entryUid = e.target.closest('.content-card').dataset.uid
+                const { contributors } = getIterationDetails(entryUid)
+                const frag = document.createDocumentFragment()
+                getRef('contributor_list').innerHTML = ''
+                for (const floID in contributors) {
+                    const contributor = getRef('contributor_template').content.cloneNode(true)
+                    contributor.querySelector('.contributor__id').textContent = floID
+                    contributor.querySelector('.contributor__time').textContent = `Last edited: ${getFormattedTime(contributors[floID])}`
+                    frag.prepend(contributor)
+                }
+                getRef('contributor_list').append(frag)
+                showPopup('contributors_popup')
+            } else if (e.target.closest('.see-more')) {
+                const target = e.target.closest('.see-more')
+                const sectionID = target.parentNode.dataset.sectionId
+                if (floGlobals.currentArticle.sections[sectionID].expanded) {
+                    target.textContent = `See ${floGlobals.currentArticle.sections[sectionID].uniqueEntries.length - maxCardsPerSection} more`;
+                    [...target.parentNode.nextElementSibling.children].slice(3).forEach(card => {
+                        card.querySelector('sm-checkbox').checked = false
+                        card.remove()
+                    })
+                    floGlobals.currentArticle.sections[sectionID].expanded = false
+                } else {
+                    target.textContent = 'See less'
+                    floGlobals.currentArticle.sections[sectionID].uniqueEntries.slice(maxCardsPerSection).forEach(entry => {
+                        const contentCard = render.contentCard(entry)
+                        if (contentCard)
+                            target.parentNode.nextElementSibling.append(contentCard)
+                    })
+                    floGlobals.currentArticle.sections[sectionID].expanded = true
+                }
+            } else if (e.target.closest('.score-button') && floGlobals.isSubAdmin) {
+                floGlobals.versionHistory.currentEntry = e.target.closest('.content-card').dataset.vectorClock
+                getRef('update_score_field').value = e.target.closest('.score-button').children[1].textContent
+                showPopup('scoring_popup')
+            }
+        })
+        getRef('version_timeline').addEventListener('click', e => {
+            if (e.target.closest('.score-button') && floGlobals.isSubAdmin) {
+                floGlobals.versionHistory.currentEntry = e.target.closest('.history-entry').dataset.vectorClock
+                getRef('update_score_field').value = e.target.closest('.score-button').children[1].textContent
+                showPopup('scoring_popup')
+            }
+        })
+        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();
+        })
+        const selectedContent = new Map()
+        let isContentSelected = false
+        getRef('article_wrapper').addEventListener("change", e => {
+            if (e.target.closest('sm-checkbox')) {
+                const contentCard = e.target.closest('.content-card')
+                const contentID = contentCard.dataset.uid
+                contentCard.classList.toggle('selected')
+                if (!floGlobals.isSubAdmin)
+                    contentCard.querySelector('.content__area').toggleAttribute('contenteditable')
+                if (selectedContent.has(contentID)) {
+                    selectedContent.delete(contentID)
+                } else {
+                    const sectionID = contentCard.closest('.article-section').dataset.sectionId
+                    const content = DOMPurify.sanitize(contentCard.querySelector('.content__area').innerHTML.split('\n').map(v => v.trim()).filter(v => v).join('\n'), { FORBID_ATTR: ['style'] })
+                        .replace(/b>/gi, 'strong>').replace(/i>/gi, 'em>')
+                    const contributors = Object.keys(getIterationDetails(contentID).contributors)
+                    selectedContent.set(contentID, { content, sectionID, contributors })
+                }
+                const animOptions = {
+                    duration: 150,
+                    easing: 'ease',
+                }
+                const selectedContentSize = selectedContent.size
+                getRef('selected_entries_no').textContent = `${selectedContentSize} selected for download`
+                if (selectedContentSize === 1 && !isContentSelected) {
+                    getRef('article_name_wrapper').classList.remove('hide-completely')
+                    getRef('selected_content_options').classList.add('hide-completely')
+                    animateTo(getRef('article_name_wrapper'), slideOutLeft, animOptions)
+                        .onfinish = () => {
+                            isContentSelected = true
+                            getRef('article_name_wrapper').classList.add('hide-completely')
+                            getRef('selected_content_options').classList.remove('hide-completely')
+                            animateTo(getRef('selected_content_options'), slideInLeft, animOptions)
+                        }
+                } else if (selectedContent.size === 0) {
+                    getRef('article_name_wrapper').classList.add('hide-completely')
+                    getRef('selected_content_options').classList.remove('hide-completely')
+                    animateTo(getRef('selected_content_options'), slideOutRight, animOptions)
+                        .onfinish = () => {
+                            isContentSelected = false
+                            getRef('article_name_wrapper').classList.remove('hide-completely')
+                            getRef('selected_content_options').classList.add('hide-completely')
+                            animateTo(getRef('article_name_wrapper'), slideInRight, animOptions)
+                        }
+                }
+            }
+        })
+
+        function formatSelectedContent() {
+            const composedDocumentStructure = {}
+            floGlobals.appObjects[floGlobals.currentArticle.id].sections.forEach(section => composedDocumentStructure[section.id] = [])
+            selectedContent.forEach(({ content, sectionID }, uid) => {
+                composedDocumentStructure[sectionID].push({ content, uid })
+            })
+            for (const section in composedDocumentStructure) {
+                if (!composedDocumentStructure[section].length)
+                    delete composedDocumentStructure[section]
+            }
+            return composedDocumentStructure
+        }
+
+        function clearSelection() {
+            selectedContent.forEach((v, key) => {
+                getRef('article_wrapper').querySelector(`.content-card[data-uid="${key}"] sm-checkbox`).checked = false
+            })
+            selectedContent.clear()
+        }
+
+
         const scores = {}
         function getScore(vc) {
             if (!scores[vc])
@@ -2324,17 +2289,15 @@
 
 
         function getIterationDetails(uid, targetIndex) {
-            let merged
             const contributors = {}
             const limit = targetIndex || floGlobals.currentArticle.uniqueEntries[uid].iterations.length - 1
             for (let i = 0; i <= limit; i++) {
-                const { data, editor, timestamp } = getGenData(floGlobals.currentArticle.uniqueEntries[uid].iterations[i])
-                merged = i ? updateString(merged, data) : data
+                const { editor, timestamp } = getGenData(floGlobals.currentArticle.uniqueEntries[uid].iterations[i])
                 contributors[editor] = timestamp
             }
-            const { hash, score } = getGenData(floGlobals.currentArticle.uniqueEntries[uid].iterations[limit]);
+            const { html, hash, score } = getGenData(floGlobals.currentArticle.uniqueEntries[uid].iterations[limit]);
             return {
-                data: merged,
+                html,
                 contributors,
                 hash,
                 score,
@@ -2349,11 +2312,9 @@
             floGlobals.versionHistory.entryUid = uid
             const { iterations } = floGlobals.currentArticle.uniqueEntries[uid]
             const frag = document.createDocumentFragment()
-            let mergedChanges
             iterations.forEach((vectorClock, index) => {
-                const iter = getGenData(vectorClock)
-                frag.prepend(render.historyEntry(iter, mergedChanges))
-                mergedChanges = index ? updateString(mergedChanges, iter.data) : iter.data
+                const oldText = index !== 0 ? getGenData(iterations[index - 1]).plainText : ''
+                frag.prepend(render.historyEntry(getGenData(vectorClock), oldText))
             })
             getRef('version_timeline').innerHTML = ''
             getRef('version_timeline').append(frag)
@@ -2457,6 +2418,7 @@
                 } else if (document.selection && savedSel.select) {
                     savedSel.select();
                 }
+                currentSelection = null
             }
         }