feat(menu): add Maximise button next to Full screen

VictorVow · VictorVow · commit 2cd422ba6887 · 2026-05-20T07:11:38.000+01:00
Adds a Maximise toggle in both the right-click menu and the pinned
toolbar, alongside Full screen. Maximise expands the renderer to fill
Logseq's window (covering sidebars and other blocks) without entering
OS-level fullscreen.

Implementation reparents the renderer to &lt;body&gt; with `position: fixed;
inset: 0` so ancestor transforms / overflow / stacking contexts can't
constrain the overlay. A comment-node placeholder marks the original
slot for restoration. The DOM node itself isn't recreated, so inline
editing, drag handlers and the pinned toolbar keep working.

Esc exits maximise (one delegated listener per document). On re-mount
after a structural edit, any orphaned maximised renderer for the same
blockId is cleaned up. fitInlineTableWidth treats maximise like
fullscreen so the table renders edge-to-edge.
diff --git a/src/index.js b/src/index.js
@@ -260,6 +260,24 @@ if (isInBrowser) {
             padding: 8px 12px !important; font-size: 14px;
           }
           .lsp-mdtable-renderer:fullscreen .lsp-mdtable-text { font-size: 14px; }
+          /* Maximise: same look as fullscreen, but bounded by Logseq's window
+             rather than the OS desktop. The renderer is reparented to <body>
+             so ancestor transforms/overflow can't constrain this overlay. */
+          .lsp-mdtable-renderer.lsp-mdt-max {
+            position: fixed; inset: 0; z-index: 2147483645;
+            margin: 0; padding: 24px 32px;
+            background: var(--ls-primary-background-color, #fff);
+            overflow: auto; box-sizing: border-box;
+          }
+          .lsp-mdtable-renderer.lsp-mdt-max .lsp-mdtable-scroll { overflow: auto; }
+          .lsp-mdtable-renderer.lsp-mdt-max table.lsp-mdt {
+            width: 100% !important; min-width: max-content;
+          }
+          .lsp-mdtable-renderer.lsp-mdt-max table.lsp-mdt th,
+          .lsp-mdtable-renderer.lsp-mdt-max table.lsp-mdt td {
+            padding: 8px 12px !important; font-size: 14px;
+          }
+          .lsp-mdtable-renderer.lsp-mdt-max .lsp-mdtable-text { font-size: 14px; }
           .lsp-mdt-menu {
             position: fixed; z-index: 2147483647; min-width: 168px;
             padding: 4px; border-radius: 6px;
@@ -410,7 +428,9 @@ if (isInBrowser) {
                       pinToolbar: i18n.t('Pin toolbar'),
                       unpinToolbar: i18n.t('Unpin toolbar'),
                       fullScreen: i18n.t('Full screen'),
-                      exitFullScreen: i18n.t('Exit full screen')
+                      exitFullScreen: i18n.t('Exit full screen'),
+                      maximise: i18n.t('Maximise'),
+                      exitMaximise: i18n.t('Exit maximise')
                     }
                   }
                   attachInlineEditing(el, inlineOpts)
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -11,6 +11,8 @@
   "readable data": "readable data (align table source)",
   "Full screen": "Full screen",
   "Exit full screen": "Exit full screen",
+  "Maximise": "Maximise",
+  "Exit maximise": "Exit maximise",
   "Move row up": "Move row up",
   "Move row down": "Move row down",
   "Move column left": "Move column left",
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
@@ -11,6 +11,8 @@
   "readable data": "可读化（对齐表格源码）",
   "Full screen": "全屏",
   "Exit full screen": "退出全屏",
+  "Maximise": "最大化",
+  "Exit maximise": "退出最大化",
   "Move row up": "上移行",
   "Move row down": "下移行",
   "Move column left": "左移列",
diff --git a/src/utils/inlineEditable.js b/src/utils/inlineEditable.js
@@ -69,7 +69,8 @@ export const fitInlineTableWidth = (root) => {
   // the fullscreen viewport so the table can render edge-to-edge.
   const doc = root.ownerDocument
   const fsEl = doc.fullscreenElement || doc.webkitFullscreenElement
-  if (fsEl && fsEl.contains(root)) {
+  const maximised = root.classList.contains('lsp-mdt-max')
+  if ((fsEl && fsEl.contains(root)) || maximised) {
     scrolls.forEach(s => {
       s.style.maxWidth = '100%'
       if (s.scrollWidth > s.clientWidth + 1) {
@@ -118,6 +119,20 @@ const bindResizeRefit = (root) => {
 // in-place editing is enabled — the overflow exists in read-only mode too.
 export const prepareInlineRenderer = (root) => {
   if (!root) return
+  // Re-renders (e.g. after a structural op) create a fresh renderer DOM.
+  // If a previous renderer for this block was maximised, its reparented
+  // node is now orphaned under <body>. Remove it so orphans don't pile up.
+  const blockId = root.getAttribute('data-blockid')
+  const doc = root.ownerDocument
+  if (blockId) {
+    doc.querySelectorAll('.lsp-mdtable-renderer.lsp-mdt-max').forEach(stale => {
+      if (stale === root) return
+      if (stale.getAttribute('data-blockid') !== blockId) return
+      const ph = stale.__mdtMaxPlaceholder
+      if (ph && ph.parentNode) ph.remove()
+      stale.remove()
+    })
+  }
   fitInlineTableWidth(root)
   // The ref can fire before Logseq has placed the element / laid out its
   // ancestors; remeasure after the next frame once layout has settled.
@@ -421,7 +436,12 @@ const ICONS = {
   sortColDesc: SVG('<path d="M11 5h9M11 10h6M11 15h3"/><polyline points="4 16 7 19 10 16"/><line x1="7" y1="5" x2="7" y2="19"/>'),
   pin: SVG('<line x1="12" y1="17" x2="12" y2="22"/><path d="M9 3h6l-1 6 3 3v2H7v-2l3-3-1-6z"/>'),
   fullscreen:     SVG('<polyline points="4 9 4 4 9 4"/><polyline points="20 9 20 4 15 4"/><polyline points="4 15 4 20 9 20"/><polyline points="20 15 20 20 15 20"/>'),
-  exitFullscreen: SVG('<polyline points="9 4 9 9 4 9"/><polyline points="15 4 15 9 20 9"/><polyline points="4 15 9 15 9 20"/><polyline points="20 15 15 15 15 20"/>')
+  exitFullscreen: SVG('<polyline points="9 4 9 9 4 9"/><polyline points="15 4 15 9 20 9"/><polyline points="4 15 9 15 9 20"/><polyline points="20 15 15 15 15 20"/>'),
+  // Maximise = expand to Logseq's window bounds (covers sidebars/blocks).
+  // Distinct glyph from fullscreen so the two are distinguishable in the bar:
+  // a framed box with inward arrows.
+  maximise:     SVG('<rect x="3" y="3" width="18" height="18" rx="1"/><polyline points="8 13 8 16 11 16"/><polyline points="16 11 16 8 13 8"/>'),
+  exitMaximise: SVG('<rect x="3" y="3" width="18" height="18" rx="1"/><polyline points="13 8 16 8 16 11"/><polyline points="11 16 8 16 8 13"/>')
 }
 
 // Overlay host for popovers/toolbars: when the renderer is in native
@@ -505,6 +525,77 @@ const fullScreenItem = (root, opts, after) => {
   }
 }
 
+// Maximise = expand the renderer to fill Logseq's window (covering sidebars
+// and other blocks), without entering OS-level fullscreen. Implementation:
+// reparent the renderer to <body> so ancestor transforms / overflow / stacking
+// contexts can't constrain a `position: fixed; inset: 0` overlay. A comment
+// placeholder marks the original slot so we can restore it on exit. The DOM
+// node itself isn't recreated, so editing hooks, drag handlers and the
+// pinned toolbar all keep working.
+const isMaximised = (root) => root.classList.contains('lsp-mdt-max')
+
+const maximiseRenderer = (root) => {
+  if (isMaximised(root)) return
+  const doc = root.ownerDocument
+  const parent = root.parentNode
+  if (!parent || parent === doc.body) return
+  const placeholder = doc.createComment('lsp-mdt-max-placeholder')
+  parent.insertBefore(placeholder, root)
+  root.__mdtMaxPlaceholder = placeholder
+  doc.body.appendChild(root)
+  root.classList.add('lsp-mdt-max')
+  bindMaximiseEsc(doc)
+  // Refit so the table can use the full window width.
+  try { fitInlineTableWidth(root) } catch (e) { /* noop */ }
+}
+
+const unmaximiseRenderer = (root) => {
+  if (!isMaximised(root)) return
+  root.classList.remove('lsp-mdt-max')
+  const ph = root.__mdtMaxPlaceholder
+  if (ph && ph.parentNode) {
+    ph.parentNode.insertBefore(root, ph)
+    ph.remove()
+  }
+  root.__mdtMaxPlaceholder = null
+  try { fitInlineTableWidth(root) } catch (e) { /* noop */ }
+}
+
+// One Esc listener per document exits whichever renderer is currently
+// maximised. Cheap to leave installed for the life of the document.
+const maximiseEscDocs = new WeakSet()
+const bindMaximiseEsc = (doc) => {
+  if (maximiseEscDocs.has(doc)) return
+  maximiseEscDocs.add(doc)
+  doc.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return
+    const max = doc.querySelector('.lsp-mdtable-renderer.lsp-mdt-max')
+    if (!max) return
+    // Don't fight an open menu / popover — let its own Esc handler run first.
+    if (doc.querySelector('.lsp-mdt-menu')) return
+    e.preventDefault()
+    e.stopPropagation()
+    unmaximiseRenderer(max)
+    removeToolbar(doc)
+  }, true)
+}
+
+// Maximise toggle item; mirrors fullScreenItem's shape.
+const maximiseItem = (root, opts, after) => {
+  const max = isMaximised(root)
+  const L = opts.menuLabels || {}
+  return {
+    icon: max ? ICONS.exitMaximise : ICONS.maximise,
+    label: max ? (L.exitMaximise || 'Exit maximise') : (L.maximise || 'Maximise'),
+    enabled: true,
+    action: () => {
+      if (max) unmaximiseRenderer(root)
+      else maximiseRenderer(root)
+      if (after) after(!max)
+    }
+  }
+}
+
 // Pin/Unpin toggle item; `after(nowPinned)` lets the surface refresh.
 const pinItem = (opts, after) => {
   const L = opts.menuLabels || {}
@@ -601,6 +692,7 @@ const buildToolbar = (root, opts, cell) => {
   const aCol = Array.from(aTr.querySelectorAll('th,td')).indexOf(cell)
   const all = items.concat([{ sep: true },
     fullScreenItem(root, opts, () => buildToolbar(root, opts, cell)),
+    maximiseItem(root, opts, () => buildToolbar(root, opts, cell)),
     pinItem(opts, () => removeToolbar(doc))]) // pinned bar's toggle = unpin
 
   const bar = doc.createElement('div')
@@ -637,6 +729,7 @@ const openContextMenu = (root, opts, cell, ev) => {
   const { items, ord } = buildItems(root, opts, cell)
   const all = items.concat([{ sep: true },
     fullScreenItem(root, opts),
+    maximiseItem(root, opts),
     pinItem(opts, (now) => { if (now) buildToolbar(root, opts, cell); else removeToolbar(doc) })])
 
   const menu = doc.createElement('div')
