keep some types (e.g. mermaid diagrams) of notes full width

2025-10-31 10:26:08 +01:00 · 2021-11-24 21:27:55 +01:00
parent f4242b4096
commit 1ee2abcc42
7 changed files with 97 additions and 102 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "trilium",
-  "version": "0.48.6",
+  "version": "0.48.7",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -950,9 +950,9 @@
      }
    },
    "acorn": {
-      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz",
-      "integrity": "sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q=="
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz",
+      "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw=="
    },
    "acorn-globals": {
      "version": "6.0.0",
@@ -3702,9 +3702,9 @@
      }
    },
    "electron-to-chromium": {
-      "version": "1.3.904",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.904.tgz",
-      "integrity": "sha512-x5uZWXcVNYkTh4JubD7KSC1VMKz0vZwJUqVwY3ihsW0bst1BXDe494Uqbg3Y0fDGVjJqA8vEeGuvO5foyH2+qw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.0.tgz",
+      "integrity": "sha512-+oXCt6SaIu8EmFTPx8wNGSB0tHQ5biDscnlf6Uxuz17e9CjzMRtGk9B8705aMPnj0iWr3iC74WuIkngCsLElmA==",
      "dev": true
    },
    "electron-window-state": {
@@ -3892,9 +3892,9 @@
      }
    },
    "estraverse": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ=="
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
    },
    "esutils": {
      "version": "2.0.3",
@@ -4129,9 +4129,12 @@
      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
    },
    "fast-xml-parser": {
-      "version": "3.19.0",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-3.19.0.tgz",
-      "integrity": "sha512-4pXwmBplsCPv8FOY1WRakF970TjNGnGnfbOnLqjlYvMiF1SR3yOHyxMR/YCXpPTOspNF5gwudqktIP4VsWkvBg=="
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-3.21.1.tgz",
+      "integrity": "sha512-FTFVjYoBOZTJekiUsawGsSYV9QL0A+zDYCRj7y34IO6Jg+2IMYEtQa+bbictpdpV8dHxXywqU7C0gRDEOFtBFg==",
+      "requires": {
+        "strnum": "^1.0.4"
+      }
    },
    "fastest-levenshtein": {
      "version": "1.0.12",
@@ -5003,9 +5006,9 @@
      "dev": true
    },
    "is-svg": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-4.3.1.tgz",
-      "integrity": "sha512-h2CGs+yPUyvkgTJQS9cJzo9lYK06WgRiXUqBBHtglSzVKAuH4/oWsqk7LGfbSa1hGk9QcZ0SyQtVggvBA8LZXA==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-4.3.2.tgz",
+      "integrity": "sha512-mM90duy00JGMyjqIVHu9gNTjywdZV+8qNasX8cm/EEYZ53PHDgajvbBwNVvty5dwSAxLUD3p3bdo+7sR/UMrpw==",
      "requires": {
        "fast-xml-parser": "^3.19.0"
      }
@@ -5220,9 +5223,9 @@
      }
    },
    "jsdom": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-18.1.0.tgz",
-      "integrity": "sha512-q6QFAfSGLEUqRJ+GCV6vn6ItZCMARWh1d33wiJZPxc+wMNw7HK71JPmQ4C2lIZAsBH8TiJu4uplach/UcrC6bQ==",
+      "version": "18.1.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-18.1.1.tgz",
+      "integrity": "sha512-NmJQbjQ/gpS/1at/ce3nCx89HbXL/f5OcenBe8wU1Eik0ROhyUc3LtmG3567dEHAGXkN8rmILW/qtCOPxPHQJw==",
      "requires": {
        "abab": "^2.0.5",
        "acorn": "^8.5.0",
@@ -5262,11 +5265,6 @@
            "combined-stream": "^1.0.8",
            "mime-types": "^2.1.12"
          }
-        },
-        "parse5": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-          "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
        }
      }
    },
@@ -6515,13 +6513,13 @@
      }
    },
    "postcss": {
-      "version": "8.3.11",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz",
-      "integrity": "sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.0.tgz",
+      "integrity": "sha512-BRMNx3Wy7UI89jN8H4ZVS5lQMPM2OSMkOkvDCSjwXa7PWTs24k7Lm55NXLbMbs070LvraXaxN5l1npSOS6wMVw==",
      "requires": {
        "nanoid": "^3.1.30",
        "picocolors": "^1.0.0",
-        "source-map-js": "^0.6.2"
+        "source-map-js": "^1.0.1"
      }
    },
    "prebuild-install": {
@@ -6988,9 +6986,9 @@
      }
    },
    "sanitize-html": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.5.3.tgz",
-      "integrity": "sha512-DGATXd1fs/Rm287/i5FBKVYSBBUL0iAaztOA1/RFhEs4yqo39/X52i/q/CwsfCUG5cilmXSBmnQmyWfnKhBlOg==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.6.0.tgz",
+      "integrity": "sha512-qc+NqTeaOi/QVAVs5gOY9tqIVk4r1pcUbx1Q2N1a609Os3TNlm85zll2d8g8m/RM6RWg9llir0SpAcePQVIC1w==",
      "requires": {
        "deepmerge": "^4.2.2",
        "escape-string-regexp": "^4.0.0",
@@ -7000,59 +6998,10 @@
        "postcss": "^8.3.11"
      },
      "dependencies": {
-        "dom-serializer": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^4.2.0",
-            "entities": "^2.0.0"
-          }
-        },
-        "domelementtype": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
-        },
-        "domhandler": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.2.tgz",
-          "integrity": "sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==",
-          "requires": {
-            "domelementtype": "^2.2.0"
-          }
-        },
-        "domutils": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-          "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-          "requires": {
-            "dom-serializer": "^1.0.1",
-            "domelementtype": "^2.2.0",
-            "domhandler": "^4.2.0"
-          }
-        },
-        "entities": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-          "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
-        },
        "escape-string-regexp": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
-        },
-        "htmlparser2": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-          "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^4.0.0",
-            "domutils": "^2.5.2",
-            "entities": "^2.0.0"
-          }
        }
      }
    },
@@ -7419,9 +7368,9 @@
      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
    },
    "source-map-js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
+      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA=="
    },
    "source-map-support": {
      "version": "0.5.21",
@@ -7595,6 +7544,11 @@
      "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",
      "integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw=="
    },
+    "strnum": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.4.tgz",
+      "integrity": "sha512-lMzNMfDpaQOLt4B2mEbfzYS0+T7dvCXeojnlGf6f1AygvWDMcWyXYaLbyICfjVu29sErR8fnRagQfBW/N/hGgw=="
+    },
    "sumchecker": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
@@ -8140,9 +8094,9 @@
      }
    },
    "watchpack": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
-      "integrity": "sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.0.tgz",
+      "integrity": "sha512-MnN0Q1OsvB/GGHETrFeZPQaOelWh/7O+EiFlj8sM9GPjtQkis7k01aAxrg/18kTfoIVcLL+haEVFlXDaSRwKRw==",
      "dev": true,
      "requires": {
        "glob-to-regexp": "^0.4.1",
@@ -8164,9 +8118,9 @@
      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="
    },
    "webpack": {
-      "version": "5.64.2",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.64.2.tgz",
-      "integrity": "sha512-4KGc0+Ozi0aS3EaLNRvEppfZUer+CaORKqL6OBjDLZOPf9YfN8leagFzwe6/PoBdHFxc/utKArl8LMC0Ivtmdg==",
+      "version": "5.64.3",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.64.3.tgz",
+      "integrity": "sha512-XF6/IL9Bw2PPQioiR1UYA8Bs4tX3QXJtSelezKECdLFeSFzWoe44zqTzPW5N+xI3fACaRl2/G3sNA4WYHD7Iww==",
      "dev": true,
      "requires": {
        "@types/eslint-scope": "^3.7.0",
@@ -8439,9 +8393,9 @@
      }
    },
    "ws": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
-      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA=="
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.3.0.tgz",
+      "integrity": "sha512-Gs5EZtpqZzLvmIM59w4igITU57lrtYVFneaa434VROv4thzJyV6UjIL3D42lslWlI+D4KzLYnxSwtfuiO79sNw=="
    },
    "xdg-basedir": {
      "version": "4.0.0",
--- a/package.json
+++ b/package.json
@@ -53,10 +53,10 @@
    "image-type": "4.1.0",
    "ini": "2.0.0",
    "is-animated": "^2.0.1",
-    "is-svg": "4.3.1",
+    "is-svg": "4.3.2",
    "jimp": "0.16.1",
    "joplin-turndown-plugin-gfm": "1.0.12",
-    "jsdom": "18.1.0",
+    "jsdom": "18.1.1",
    "mime-types": "2.1.34",
    "multer": "1.4.3",
    "node-abi": "3.5.0",
@@ -67,7 +67,7 @@
    "request": "^2.88.2",
    "rimraf": "3.0.2",
    "sanitize-filename": "1.6.3",
-    "sanitize-html": "2.5.3",
+    "sanitize-html": "2.6.0",
    "sax": "1.2.4",
    "semver": "7.3.5",
    "serve-favicon": "2.5.0",
@@ -77,7 +77,7 @@
    "tmp": "^0.2.1",
    "turndown": "7.1.1",
    "unescape": "1.0.1",
-    "ws": "8.2.3",
+    "ws": "8.3.0",
    "yauzl": "2.10.0"
  },
  "devDependencies": {
@@ -92,7 +92,7 @@
    "jsdoc": "3.6.7",
    "lorem-ipsum": "2.0.4",
    "rcedit": "3.0.1",
-    "webpack": "5.64.2",
+    "webpack": "5.64.3",
    "webpack-cli": "4.9.1"
  },
  "optionalDependencies": {
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -45,6 +45,7 @@ import EditedNotesWidget from "../widgets/ribbon_widgets/edited_notes.js";
 import OpenNoteButtonWidget from "../widgets/buttons/open_note_button_widget.js";
 import MermaidWidget from "../widgets/mermaid.js";
 import BookmarkButtons from "../widgets/bookmark_buttons.js";
+import NoteWrapperWidget from "../widgets/note_wrapper.js";

 export default class DesktopLayout {
    constructor(customWidgets) {
@@ -110,9 +111,7 @@ export default class DesktopLayout {
                        .collapsible()
                        .id('center-pane')
                        .child(new SplitNoteContainer(() =>
-                            new FlexContainer('column')
-                                .css("flex-grow", "1")
-                                .collapsible()
+                            new NoteWrapperWidget()
                                .child(new FlexContainer('row').class('title-row')
                                    .css("height", "50px")
                                    .css('align-items', "center")
--- a/src/public/app/widgets/containers/split_note_container.js
+++ b/src/public/app/widgets/containers/split_note_container.js
@@ -19,8 +19,6 @@ export default class SplitNoteContainer extends FlexContainer {
        const $renderedWidget = widget.render();

        $renderedWidget.attr("data-ntx-id", noteContext.ntxId);
-        $renderedWidget.addClass("note-split");
-
        $renderedWidget.on('click', () => appContext.tabManager.activateNoteContext(noteContext.ntxId));

        this.$widget.append($renderedWidget);
--- a/src/public/app/widgets/note_wrapper.js
+++ b/src/public/app/widgets/note_wrapper.js
@@ -0,0 +1,39 @@
+import FlexContainer from "./containers/flex_container.js";
+
+export default class NoteWrapperWidget extends FlexContainer {
+    constructor() {
+        super('column');
+
+        this.css("flex-grow", "1")
+            .collapsible();
+    }
+
+    doRender() {
+        super.doRender();
+
+        this.$widget.addClass("note-split");
+    }
+
+    setNoteContextEvent({noteContext}) {
+        this.refresh(noteContext);
+    }
+
+    noteSwitchedAndActivatedEvent({noteContext}) {
+        this.refresh(noteContext);
+    }
+
+    noteSwitchedEvent({noteContext}) {
+        this.refresh(noteContext);
+    }
+
+    activeContextChangedEvent({noteContext}) {
+        this.refresh(noteContext);
+    }
+
+    refresh(noteContext) {
+        this.$widget.toggleClass("full-content-width",
+            ['image', 'mermaid', 'book', 'render'].includes(noteContext?.note?.type)
+            || !!noteContext?.note?.hasLabel('fullContentWidth')
+        );
+    }
+}
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -954,3 +954,7 @@ input {
    margin-left: auto;
    margin-right: auto;
 }
+
+.note-split.full-content-width {
+    max-width: 999999px;
+}
--- a/src/services/attributes.js
+++ b/src/services/attributes.js
@@ -51,6 +51,7 @@ const BUILTIN_ATTRIBUTES = [
    { type: 'label', name: 'bookmarkFolder' },
    { type: 'label', name: 'sorted' },
    { type: 'label', name: 'top' },
+    { type: 'label', name: 'fullContentWidth' },

    // relation names
    { type: 'relation', name: 'runOnNoteCreation', isDangerous: true },