Attach/Link Folders, Buggfixes & More 🎉

+ You can now attach / link folders inline 🎉
+ Fixes a few bugs caused by #99
+ Adds a few more tools to mobile doc editor
+ Fixes #77
+ Fixes #130
+ This fixes #130, as well as a bunch of other side bugs caused by indent/outdent in clodeblocks. (i.e. things like +1 extra line indenting etc on some devices.

+ Something to help remedy #129
+ helps remedy some more stuff for #105
+ renaming “account” to “settings” in home screen

+ fixes / prevents moving folders onto themselves
A strangely awesome catch by a dedicated user! If you try to move a folder onto itself, it was breaking the UI. It’s now blocked on server side, and adding cosmetic show stoppers on UI to make sure things are safe!

+ DOMPurify update to 2.3.0
+ Firebase version 8.7.1 Update

source/css/docs.css

@@ -2924,9 +2924,34 @@ body.bubble.no-doc.loading-doc #rightSlide.activeSlide {
     transition-duration: 0.5s;
 }
 
+body.bubble.locked-doc #desktopToolbar::before {
+    content: "\f097";
 
+    font-family: 'remixicon' !important;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 350;
+    position: absolute;
+    left: 6.5rem;
+    top: 0.5625rem;
+    height: 3rem;
+    line-height: 3rem;
+    width: 3rem;
+
+    color: #000;
 
+    transform: scale(1.5);
+}
 
+.dm body.bubble.locked-doc #desktopToolbar::before {
+    color: #FFF;
+}
+
+body.bubble.locked-doc #panel-button-doctools {
+    opacity: 0;
+    pointer-events: none !important;
+}
 
 /* -----------------------------
 -------------------------------- 

source/css/global.css

@@ -199,6 +199,7 @@ TYPOGRAPHY
 html, body, input, textarea, button, select {
     font-family: 'Josefin Sans', sans-serif;
     font-size: 16px;
+    -webkit-text-size-adjust: 100%;
 }
 
 p,li,table, select {

source/css/quill-overrides.css

@@ -740,21 +740,18 @@ crypteetablecell * {
     opacity: 0.2 !important;
 }
 
-#mobileToolbar.in-table .ql-header,
+#mobileToolbar.in-table .cryptee-new-table,
 #mobileToolbar.in-table .ql-blockquote,
 #mobileToolbar.in-table .ql-code-block,
+#mobileToolbar.in-table .ql-indent,
+#mobileToolbar.in-table .ql-header,
+#mobileToolbar.in-table .ql-image,
 #mobileToolbar.in-table .ql-clean,
 #mobileToolbar.in-table .ql-list,
-#mobileToolbar.in-table .ql-indent {
+#mobileToolbar.in-table .ql-hr {
     display: none !important;
 }
 
-#mobileToolbar.in-table {
-    text-align: center;
-    width: 14rem !important;
-}
-
-
 
 
 
@@ -771,7 +768,7 @@ FILES
 ----------------------------- */
 
 
-crypteefile {
+crypteefile, crypteefolder {
     display: block;
     font-size: 0;
     font-weight: 350;
@@ -785,22 +782,20 @@ crypteefile {
     opacity: 1;
 }
 
-crypteefile::after {
-    content: attr(filetitle);
+crypteefile::after, crypteefolder::after {
+    content: attr(filetitle) attr(foldertitle);
     font-size: 1rem;
     pointer-events: all;
     cursor: pointer;
 }
 
-crypteefile::before {
+crypteefile::before, crypteefolder::before {
 
     font-family: 'remixicon' !important;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-
-    content: "\EA86";
-
+
     display: inline-block;
     margin-top: -0.75rem;
     margin-right: 1rem;
@@ -813,18 +808,20 @@ crypteefile::before {
     cursor: pointer;
 }
 
+crypteefile::before { content: "\EA86"; }
+crypteefolder::before { content: "\ED61"; }
 
-crypteefile.selected {
+crypteefile.selected, crypteefolder.selected {
     background-color: var(--cryptee-1) !important;
     color: #FFF !important;
 }
 
-.dm crypteefile.selected {
+.dm crypteefile.selected, .dm crypteefolder.selected {
     background-color: var(--cryptee-4) !important;
     color: #000 !important;
 }
 
-.dm crypteefile {
+.dm crypteefile, .dm crypteefolder {
     background-color: var(--cryptee-1) !important;
     color: #FFF !important;
     border-left: 1px solid #FFF;
@@ -915,26 +912,31 @@ crypteefile[filetitle$=".mdtext"]::before {
 
 
 
-crypteefile.loading {
+crypteefile.loading, crypteefolder.loading {
     pointer-events: none !important;
     opacity: 0.5 !important;
 }
 
-crypteefile.loading::before { 
+crypteefile.loading::before, crypteefolder.loading::before { 
     content: "\EEC6" !important; 
     animation: spin 0.4s linear infinite !important; 
 }
 
-crypteefile.error {
+crypteefile.error, crypteefolder.error {
     background-color: var(--cryptee-red);
     border-color: var(--cryptee-red);
     color: white;
 }
 
 
 
-crypteefile.error::before { content: "\ED19"; }
-crypteefile.error::after { content: "Failed to open " attr(filetitle); }
+crypteefile.error::before, crypteefolder.error::before { 
+    content: "\ED19"; 
+}
+
+crypteefile.error::after, crypteefolder.error::after { 
+    content: "Failed to open " attr(filetitle) attr(foldertitle); 
+}
 
 
 
@@ -1201,6 +1203,10 @@ MOBILE TOOLBAR
     display: none !important;
 }
 
+.ql-bubble .ql-tooltip.ql-flip {
+    transform: translateY(16px);
+}
+
 .ql-bubble .ql-tooltip .fader {
     display: block;
     margin:0;
@@ -1227,6 +1233,7 @@ MOBILE TOOLBAR
 }
 
 .ql-tooltip #mobileToolbar button,
+.ql-tooltip #mobileToolbar span,
 .ql-tooltip #mobileToolbar .ql-picker,
 .ql-tooltip #mobileToolbar select {
     height: 2rem;
@@ -1239,6 +1246,7 @@ MOBILE TOOLBAR
 }
 
 .ql-tooltip #mobileToolbar button i,
+.ql-tooltip #mobileToolbar span i,
 .ql-tooltip #mobileToolbar .ql-picker i,
 .ql-tooltip #mobileToolbar select i { 
     color: #aaa; 

source/docs.kit

@@ -177,6 +177,7 @@
     <script src="../js/quill-modules/image-resize.js"></script>
     <script src="../js/quill-modules/image-format.js"></script>
     <script src="../js/quill-modules/crypteefile.js"></script>
+    <script src="../js/quill-modules/crypteefolder.js"></script>
     <script src="../js/quill-modules/history.js"></script>
     <script src="../js/quill-modules/crypteetag.js"></script>
     <script src="../js/quill-modules/tables.js"></script>

source/home.kit

@@ -46,15 +46,15 @@
 
     <nav>
         <p class="menuButton" id="topNewsButton">
-            <a class="plain external" href="https://blog.crypt.ee#to-cryptee"  target="_blank" rel="noopener">news</a>
+            <a class="plain external" href="https://blog.crypt.ee#to-cryptee"  target="_blank" rel="noopener" title="news and product updates">news</a>
         </p>
 
         <p class="menuButton" id="accountButton">
-            <a class="plain" href="/account">account</a>
+            <a class="plain" href="/account" title="account / settings">settings</a>
         </p>
 
         <p class="menuButton" id="helpButton">
-            <a class="plain" href="/help">help</a>
+            <a class="plain" href="/help" title="get help">help</a>
         </p>
 
         <button class="menuButton" id="logoutButton" onclick="logOut();">log out</button>

source/imports/app/docs-dropdowns.kit

@@ -77,6 +77,11 @@
         <span class="show-for-archived-items">archive folder</span>
     </button>
 
+    <button class="white disabled-in-offline-mode disabled-for-reserved hide-for-activefolder disabled-for-empty-editor disabled-while-saving" onclick="attachSelectedFolderInline();">
+        <i class="ri-attachment-2"></i>
+        <span>attach / link inline</span>
+    </button>
+
     <button class="white disabled-in-offline-mode disabled-for-reserved disabled-for-archived hide-for-activefolder" onclick="prepareMakeGhostModal();">
         <i class="ri-eye-off-fill"></i>
         <span>make ghost folder</span>

source/imports/app/docs-mobile-toolbar.kit

@@ -23,7 +23,12 @@
 <!-- <select class="ql-color" ></select> -->
 <!-- <select class="ql-background" ></select> -->
 
+<span   class="ql-hr"     value="divider"><i class="ri-separator"></i></span>
 <button class="ql-blockquote"            ></button>
+
+<button class="ql-script"    value="sub"            title="Sub"></button>
+<button class="ql-script"    value="super"          title="Super"></button>
+
 <button class="ql-indent" value="-1"     ></button>
 <button class="ql-indent" value="+1"     ></button>
 

source/imports/app/footer.kit

@@ -13,8 +13,8 @@
 
 <script src="../js/lib/axios-0.20.0/axios.min.js"></script>
 
-<script src="../js/lib/firebase-7.19.0/firebase-app.js"></script>
-<script src="../js/lib/firebase-7.19.0/firebase-auth.js"></script>
+<script src="../js/lib/firebase-8.7.1/firebase-app.js"></script>
+<script src="../js/lib/firebase-8.7.1/firebase-auth.js"></script>
 
 <script src="../js/lib/keymaster-1.6.3/keymaster.min.js"></script>
 <script src="../js/lib/filesaver-2.0.4/FileSaver.min.js"></script>
@@ -28,6 +28,6 @@
 <script src="../js/ui.js"></script>
 <script src="../js/io.js"></script>
 
-<script src="../js/lib/dompurify-2.2.9/purify.min.js"></script>
+<script src="../js/lib/dompurify-2.3.0/purify.min.js"></script>
 
 <script src="../js/updater.js"></script>

source/js/docs.js

@@ -1127,7 +1127,7 @@ $("#viewingModeButton").on('click', function(event) {
 ////////////////////////////////////////////////
 
 function showInlineAttachmentPopup() {
-    createPopup("to attach a file or a document, first find the file you'd like to attach to this document using the menu on the left, either from its folder, or via search. then, right click on it <br>(or press <i class='ri-more-2-fill'></i>)<br> and press '<b>attach inline</b>'", "info");
+    createPopup("to attach a file, document or folder, first find the file or folder you'd like to attach to this document using the menu on the left, either from its parent folder, or via search. then, right click on it <br>(or press <i class='ri-more-2-fill'></i>)<br> and press '<b>attach inline</b>'", "info");
 }
 
 

source/js/docs/abstractions.js

@@ -1213,13 +1213,20 @@ async function confirmMove() {
     }
 
     if (isMovingAFolder) {
-        // CHECK IF USER'S TRYING TO MOVE FOLDER TO SAME FOLDER. 
+        // CHECK IF USER'S TRYING TO MOVE FOLDER TO SAME PARENT FOLDER. (SO NOT REALLY MOVING ANYTHING) 
         var originalParent = await parentOfFolder(arrayOfItemsToMove[0]);
         if (originalParent === targetFID) {
             createPopup("The folder you'd like to move is already in the folder you've selected.<br><br> To move files or folders, first right click on them (or press <i class='ri-more-2-fill'></i>) and press <b>'move to'</b>. Then, open the target folder you'd like to move things into. Finally, once you're in the target folder press the green <b>move here</b> button in the bottom.","info");
             hideFloater("moveFloat");
             return false;
         }
+
+        // CHECK IF USER'S TRYING TO MOVE FOLDER ONTO ITSELF.
+        if (arrayOfItemsToMove[0] === targetFID) {
+            createPopup("The folder you'd like to move is the same as the destination folder you've selected. You can't move a folder into itself. <br><br> To move files or folders, first right click on them (or press <i class='ri-more-2-fill'></i>) and press <b>'move to'</b>. Then, open the target folder you'd like to move things into. Finally, once you're in the target folder press the green <b>move here</b> button in the bottom.","info");
+            hideFloater("moveFloat");
+            return false;
+        }
     } else {
         // CHECK IF USER'S TRYING TO MOVE DOCS TO THE SAME FOLDER.
         var tryingToMoveDocstoSameFolder = false;
@@ -2010,7 +2017,33 @@ async function attachSelectedFileInline(did) {
     hidePanels();
 }
 
+/**
+ * Attaches a selected folder (or folder with given ID) inline to the current document in the editor
+ * @param {string} [fid] folder id (optionally use a fid instead of the selection)
+ */
+async function attachSelectedFolderInline(fid) {
+    fid = fid || $("#dropdown-folder").attr("fid");
+
+    if (!fid) { 
+        hideRightClickDropdowns();
+        hidePanels();
+        return false; 
+    }
+
+    if (isCursorInTable()) {
+        createPopup("Unfortunately you can't add attachments inside tables yet. Please place your cursor outside of the table, and press attach / link again.", "info");
+        return false;
+    }
+
+    var name = await getFolderNameFromCatalog(fid);
 
+    var attachmentTag = `<p><br></p><crypteefolder fid='${fid}'></crypteefolder><p><br></p>`;
+    quill.clipboard.dangerouslyPasteHTML(getLastSelectionRange().index, attachmentTag, "api");
+    quill.setSelection(getLastSelectionRange().index + 2, "silent");
+    $(`crypteefolder[fid="${fid}"]`).attr("foldertitle", name);
+    hideRightClickDropdowns();
+    hidePanels();
+}
 
 
 

source/js/docs/apis.js

@@ -510,6 +510,11 @@ async function moveFolder(fidToMove, targetFID) {
         return false;
     }
 
+    if (fidToMove === targetFID) {
+        handleError("[MOVE FOLDER] Can't move folder onto itself.");
+        return false;
+    }
+
     breadcrumb("[MOVE FOLDER] Moving " + fidToMove + " to " + targetFID);
 
     var moved = await setFolderMeta(fidToMove, { parent : targetFID });

source/js/docs/importers.js

@@ -996,7 +996,7 @@ function convertHTMLToDeltas(purifiedCrypteeHTML) {
 function purifyHTML(rawHTML) {
     breadcrumb('[PURIFY HTML] Purifying HTML');
     var allowedHTMLTags = ["A", "B", "BLOCKQUOTE", "BR", "CODE", "DEL", "DIV", "EM", "H1", "H2", "H3", "H4", "H5", "H6", "HR", "I", "IMG", "LI", "META", "OL", "P", "PRE", "Q", "S", "SPAN", "STRIKE", "STRONG", "SUB", "SUP", "TABLE", "TBODY", "TFOOT", "THEAD", "TD", "TH", "TR", "U", "UL"];
-    var allowedCustomTags = ["CRYPTEETABLEDATA", "CRYPTEETABLE", "CRYPTEETABLECELL", "CRYPTEEFILE", "CRYPTEETAG"];
+    var allowedCustomTags = ["CRYPTEETABLEDATA", "CRYPTEETABLE", "CRYPTEETABLECELL", "CRYPTEEFILE", "CRYPTEEFOLDER", "CRYPTEETAG"];
     var allowedCrypteeAttributes = ["tableid", "rows", "columns", "fid", "did", "filetitle", "filename", "extsrc", "extalt", "type", "hash", "checked", "data-checked"];
     var cleanHTML = DOMPurify.sanitize(rawHTML, { 
         ALLOWED_TAGS: allowedHTMLTags,