From 9f69c031ce6d0b55e1c361bcf9e98f9f6fa57e1b Mon Sep 17 00:00:00 2001 From: abose Date: Fri, 10 Apr 2026 23:56:37 +0530 Subject: [PATCH 1/5] refactor(panel): use SVG icons instead of FontAwesome classes for bottom panel tabs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace iconClass (FontAwesome class strings) with iconSvg (SVG file paths) for all createBottomPanel callers. FA class approach caused inconsistent sizing between fa-solid and fa-brands due to font-weight/font-size quirks that required CSS overrides. SVG icons are rendered via mask-image with background-color: currentColor so they inherit the theme text color automatically — works correctly in both light and dark themes, and for active/inactive tab states. - New SVG files in src/styles/images/: panel-icon-{terminal,problems, search,git,snippets,shortcuts,default}.svg - Updated callers: Terminal, CodeInspection, SearchResultsView, Git, CustomSnippets, DisplayShortcuts, DefaultPanelView - PanelView.js and DefaultPanelView.js set mask-image inline via JS - Removed iconClass support and related CSS overrides --- src/extensions/default/Git/src/Panel.js | 2 +- .../CustomSnippets/main.js | 2 +- .../DisplayShortcuts/main.js | 2 +- src/extensionsIntegrated/Terminal/main.js | 2 +- src/language/CodeInspection.js | 2 +- src/search/SearchResultsView.js | 2 +- src/styles/Extn-BottomPanelTabs.less | 34 +++++++++---------- src/styles/images/panel-icon-default.svg | 1 + src/styles/images/panel-icon-git.svg | 1 + src/styles/images/panel-icon-problems.svg | 1 + src/styles/images/panel-icon-search.svg | 1 + src/styles/images/panel-icon-shortcuts.svg | 1 + src/styles/images/panel-icon-snippets.svg | 1 + src/styles/images/panel-icon-terminal.svg | 1 + src/view/DefaultPanelView.js | 15 ++++---- src/view/PanelView.js | 33 ++++++------------ src/view/WorkspaceManager.js | 4 +-- 17 files changed, 51 insertions(+), 54 deletions(-) create mode 100644 src/styles/images/panel-icon-default.svg create mode 100644 src/styles/images/panel-icon-git.svg create mode 100644 src/styles/images/panel-icon-problems.svg create mode 100644 src/styles/images/panel-icon-search.svg create mode 100644 src/styles/images/panel-icon-shortcuts.svg create mode 100644 src/styles/images/panel-icon-snippets.svg create mode 100644 src/styles/images/panel-icon-terminal.svg diff --git a/src/extensions/default/Git/src/Panel.js b/src/extensions/default/Git/src/Panel.js index a8c4d7c9bb..41a509cbb5 100644 --- a/src/extensions/default/Git/src/Panel.js +++ b/src/extensions/default/Git/src/Panel.js @@ -1240,7 +1240,7 @@ define(function (require, exports) { var $panelHtml = $(panelHtml); $panelHtml.find(".git-available, .git-not-available").hide(); - gitPanel = WorkspaceManager.createBottomPanel("main-git.panel", $panelHtml, 100, Strings.GIT_PANEL_TITLE, {iconClass: "fa-brands fa-git-alt"}); + gitPanel = WorkspaceManager.createBottomPanel("main-git.panel", $panelHtml, 100, Strings.GIT_PANEL_TITLE, {iconSvg: "styles/images/panel-icon-git.svg"}); $gitPanel = gitPanel.$panel; const resizeObserver = new ResizeObserver(_panelResized); resizeObserver.observe($gitPanel[0]); diff --git a/src/extensionsIntegrated/CustomSnippets/main.js b/src/extensionsIntegrated/CustomSnippets/main.js index d533e37701..3235942cba 100644 --- a/src/extensionsIntegrated/CustomSnippets/main.js +++ b/src/extensionsIntegrated/CustomSnippets/main.js @@ -59,7 +59,7 @@ define(function (require, exports, module) { */ function _createPanel() { customSnippetsPanel = WorkspaceManager.createBottomPanel(PANEL_ID, $snippetsPanel, PANEL_MIN_SIZE, - Strings.CUSTOM_SNIPPETS_PANEL_TITLE, {iconClass: "fa-solid fa-code"}); + Strings.CUSTOM_SNIPPETS_PANEL_TITLE, {iconSvg: "styles/images/panel-icon-snippets.svg"}); UIHelper.init(customSnippetsPanel); customSnippetsPanel.show(); diff --git a/src/extensionsIntegrated/DisplayShortcuts/main.js b/src/extensionsIntegrated/DisplayShortcuts/main.js index ceb6e1ca50..3c71d6b0c2 100644 --- a/src/extensionsIntegrated/DisplayShortcuts/main.js +++ b/src/extensionsIntegrated/DisplayShortcuts/main.js @@ -479,7 +479,7 @@ define(function (require, exports, module) { // AppInit.htmlReady() has already executed before extensions are loaded // so, for now, we need to call this ourself panel = WorkspaceManager.createBottomPanel(TOGGLE_SHORTCUTS_ID, $(s), 300, - Strings.KEYBOARD_SHORTCUT_PANEL_TITLE, {iconClass: "fa-solid fa-keyboard"}); + Strings.KEYBOARD_SHORTCUT_PANEL_TITLE, {iconSvg: "styles/images/panel-icon-shortcuts.svg"}); panel.hide(); $shortcutsPanel = $("#shortcuts-panel"); diff --git a/src/extensionsIntegrated/Terminal/main.js b/src/extensionsIntegrated/Terminal/main.js index b55323403c..4647304a6c 100644 --- a/src/extensionsIntegrated/Terminal/main.js +++ b/src/extensionsIntegrated/Terminal/main.js @@ -115,7 +115,7 @@ define(function (require, exports, module) { }; $panel = $(Mustache.render(panelHTML, templateVars)); - panel = WorkspaceManager.createBottomPanel(PANEL_ID, $panel, PANEL_MIN_SIZE, undefined, {iconClass: "fa-solid fa-terminal"}); + panel = WorkspaceManager.createBottomPanel(PANEL_ID, $panel, PANEL_MIN_SIZE, undefined, {iconSvg: "styles/images/panel-icon-terminal.svg"}); // Override focus() so Shift+Escape can transfer focus to the terminal panel.focus = function () { diff --git a/src/language/CodeInspection.js b/src/language/CodeInspection.js index afad847b08..151440ece9 100644 --- a/src/language/CodeInspection.js +++ b/src/language/CodeInspection.js @@ -1240,7 +1240,7 @@ define(function (require, exports, module) { Editor.registerGutter(CODE_INSPECTION_GUTTER, CODE_INSPECTION_GUTTER_PRIORITY); // Create bottom panel to list error details var panelHtml = Mustache.render(PanelTemplate, Strings); - problemsPanel = WorkspaceManager.createBottomPanel("errors", $(panelHtml), 100, Strings.CMD_VIEW_TOGGLE_PROBLEMS, {iconClass: "fa-solid fa-triangle-exclamation"}); + problemsPanel = WorkspaceManager.createBottomPanel("errors", $(panelHtml), 100, Strings.CMD_VIEW_TOGGLE_PROBLEMS, {iconSvg: "styles/images/panel-icon-problems.svg"}); $problemsPanel = $("#problems-panel"); $fixAllBtn = $problemsPanel.find(".problems-fix-all-btn"); $fixAllBtn.click(()=>{ diff --git a/src/search/SearchResultsView.js b/src/search/SearchResultsView.js index 0c8a8c0d16..a90cc63e2e 100644 --- a/src/search/SearchResultsView.js +++ b/src/search/SearchResultsView.js @@ -82,7 +82,7 @@ define(function (require, exports, module) { const self = this; let panelHtml = Mustache.render(searchPanelTemplate, {panelID: panelID}); - this._panel = WorkspaceManager.createBottomPanel(panelName, $(panelHtml), 100, title, {iconClass: "fa-solid fa-magnifying-glass"}); + this._panel = WorkspaceManager.createBottomPanel(panelName, $(panelHtml), 100, title, {iconSvg: "styles/images/panel-icon-search.svg"}); this._$summary = this._panel.$panel.find(".title"); this._$table = this._panel.$panel.find(".table-container"); this._$previewEditor = this._panel.$panel.find(".search-editor-preview"); diff --git a/src/styles/Extn-BottomPanelTabs.less b/src/styles/Extn-BottomPanelTabs.less index c9dc051604..c2cf5bebea 100644 --- a/src/styles/Extn-BottomPanelTabs.less +++ b/src/styles/Extn-BottomPanelTabs.less @@ -144,31 +144,29 @@ } } -/* Tab icon: hidden by default, shown when tabs are collapsed */ -.bottom-panel-tab-icon { - display: none; - font-size: 1rem; - width: 1rem; - text-align: center; - pointer-events: none; -} - -/* Override any FA class specificity (e.g. fa-brands sets font-size: 1.2em) */ -i.panel-titlebar-icon.panel-titlebar-icon { - font-size: 1rem; -} - -img.panel-titlebar-icon { +/* SVG icons rendered as masks so they inherit currentColor (works with light/dark themes). + The mask-image URL is set inline via JS (PanelView.js, DefaultPanelView.js). */ +.panel-titlebar-icon { + display: inline-block; width: 1rem; height: 1rem; vertical-align: middle; + background-color: currentColor; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: contain; + mask-size: contain; + pointer-events: none; } -.default-panel-btn i.panel-titlebar-icon { - font-size: 20px; +/* Tab icon: hidden by default, shown when tabs are collapsed */ +.bottom-panel-tab-icon { + display: none; } -.default-panel-btn img.panel-titlebar-icon { +.default-panel-btn .panel-titlebar-icon { width: 20px; height: 20px; } diff --git a/src/styles/images/panel-icon-default.svg b/src/styles/images/panel-icon-default.svg new file mode 100644 index 0000000000..d1771f5f35 --- /dev/null +++ b/src/styles/images/panel-icon-default.svg @@ -0,0 +1 @@ + diff --git a/src/styles/images/panel-icon-git.svg b/src/styles/images/panel-icon-git.svg new file mode 100644 index 0000000000..999a7a8f68 --- /dev/null +++ b/src/styles/images/panel-icon-git.svg @@ -0,0 +1 @@ + diff --git a/src/styles/images/panel-icon-problems.svg b/src/styles/images/panel-icon-problems.svg new file mode 100644 index 0000000000..a493590a09 --- /dev/null +++ b/src/styles/images/panel-icon-problems.svg @@ -0,0 +1 @@ + diff --git a/src/styles/images/panel-icon-search.svg b/src/styles/images/panel-icon-search.svg new file mode 100644 index 0000000000..9aef29292d --- /dev/null +++ b/src/styles/images/panel-icon-search.svg @@ -0,0 +1 @@ + diff --git a/src/styles/images/panel-icon-shortcuts.svg b/src/styles/images/panel-icon-shortcuts.svg new file mode 100644 index 0000000000..3ce2af0ccd --- /dev/null +++ b/src/styles/images/panel-icon-shortcuts.svg @@ -0,0 +1 @@ + diff --git a/src/styles/images/panel-icon-snippets.svg b/src/styles/images/panel-icon-snippets.svg new file mode 100644 index 0000000000..09e7fd87ca --- /dev/null +++ b/src/styles/images/panel-icon-snippets.svg @@ -0,0 +1 @@ + diff --git a/src/styles/images/panel-icon-terminal.svg b/src/styles/images/panel-icon-terminal.svg new file mode 100644 index 0000000000..06ed2625ba --- /dev/null +++ b/src/styles/images/panel-icon-terminal.svg @@ -0,0 +1 @@ + diff --git a/src/view/DefaultPanelView.js b/src/view/DefaultPanelView.js index 8bbdfd52ba..03e3f9d3ed 100644 --- a/src/view/DefaultPanelView.js +++ b/src/view/DefaultPanelView.js @@ -39,32 +39,32 @@ define(function (require, exports, module) { const _panelButtons = [ { id: "problems", - icon: "fa-solid fa-triangle-exclamation", + iconSvg: "styles/images/panel-icon-problems.svg", label: Strings.CMD_VIEW_TOGGLE_PROBLEMS || "Problems", commandID: Commands.VIEW_TOGGLE_PROBLEMS }, { id: "git", - icon: "fa-brands fa-git-alt", + iconSvg: "styles/images/panel-icon-git.svg", label: Strings.GIT_PANEL_TITLE || "Git", commandID: Commands.CMD_GIT_TOGGLE_PANEL, nativeOnly: true }, { id: "snippets", - icon: "fa-solid fa-code", + iconSvg: "styles/images/panel-icon-snippets.svg", label: Strings.CUSTOM_SNIPPETS_PANEL_TITLE || "Custom Snippets", commandID: Commands.CMD_CUSTOM_SNIPPETS_PANEL }, { id: "shortcuts", - icon: "fa-solid fa-keyboard", + iconSvg: "styles/images/panel-icon-shortcuts.svg", label: Strings.KEYBOARD_SHORTCUT_PANEL_TITLE || "Keyboard Shortcuts", commandID: Commands.HELP_TOGGLE_SHORTCUTS_PANEL }, { id: "terminal", - icon: "fa-solid fa-terminal", + iconSvg: "styles/images/panel-icon-terminal.svg", label: "Terminal", commandID: Commands.VIEW_TERMINAL, nativeOnly: true @@ -99,7 +99,10 @@ define(function (require, exports, module) { .attr("data-command", btn.commandID) .attr("data-btn-id", btn.id) .attr("title", btn.label); - let $icon = $('').addClass(btn.icon); + let $icon = $(''); + const maskUrl = "url('" + btn.iconSvg + "')"; + $icon[0].style.maskImage = maskUrl; + $icon[0].style.webkitMaskImage = maskUrl; let $label = $('').text(btn.label); $button.append($icon).append($label); $buttonsRow.append($button); diff --git a/src/view/PanelView.js b/src/view/PanelView.js index f862e1a57e..bb5ff47446 100644 --- a/src/view/PanelView.js +++ b/src/view/PanelView.js @@ -152,17 +152,12 @@ define(function (require, exports, module) { let $tab = $('
') .toggleClass('active', isActive) .attr('data-panel-id', panel.panelID); - const opts = panel._options; - if (opts.iconClass) { - $tab.append($('') - .addClass(opts.iconClass)); - } else if (opts.iconSvg) { - $tab.append($('') - .attr("src", opts.iconSvg)); - } else { - // Fallback generic icon for panels without a custom icon - $tab.append($('')); - } + const iconSrc = panel._options.iconSvg || "styles/images/panel-icon-default.svg"; + const $icon = $(''); + const maskUrl = "url('" + iconSrc + "')"; + $icon[0].style.maskImage = maskUrl; + $icon[0].style.webkitMaskImage = maskUrl; + $tab.append($icon); $tab.append($('').text(title)); $tab.append($('×').attr('title', Strings.CLOSE)); return $tab; @@ -432,16 +427,11 @@ define(function (require, exports, module) { _overflowDropdown = new DropdownButton.DropdownButton("", hidden, function (item) { const panel = _panelMap[item.panelId]; - let iconHtml = ""; - if (panel && panel._options) { - if (panel._options.iconClass) { - iconHtml = ''; - } else if (panel._options.iconSvg) { - iconHtml = ''; - } - } + const iconSrc = (panel && panel._options && panel._options.iconSvg) + || "styles/images/panel-icon-default.svg"; + const iconStyle = "width:14px;height:14px;margin-right:6px;vertical-align:middle;" + + "mask-image:url('" + iconSrc + "');-webkit-mask-image:url('" + iconSrc + "')"; + const iconHtml = ''; const activeClass = item.panelId === _activeId ? ' style="font-weight:600"' : ''; return { html: '
' @@ -541,7 +531,6 @@ define(function (require, exports, module) { * @param {string} id * @param {string=} title * @param {Object=} options - * @param {string=} options.iconClass FontAwesome class string (e.g. "fa-solid fa-terminal"). * @param {string=} options.iconSvg Path to an SVG icon (e.g. "styles/images/icon.svg"). */ function Panel($panel, id, title, options) { diff --git a/src/view/WorkspaceManager.js b/src/view/WorkspaceManager.js index 02394d80ef..7ab66585f8 100644 --- a/src/view/WorkspaceManager.js +++ b/src/view/WorkspaceManager.js @@ -266,8 +266,8 @@ define(function (require, exports, module) { * @param {number=} minSize @deprecated No longer used. Pass `undefined`. * @param {string=} title Display title shown in the bottom panel tab bar. * @param {Object=} options Optional settings: - * - {string} iconClass FontAwesome class string (e.g. "fa-solid fa-terminal"). - * - {string} iconSvg Path to an SVG icon (e.g. "styles/images/icon.svg"). + * - {string} iconSvg Path to an SVG icon for the panel tab (e.g. "styles/images/icon.svg"). + * If omitted, a generic default icon is used. * @return {!Panel} */ function createBottomPanel(id, $panel, minSize, title, options) { From fe9a6ad6ff2fc679aa0f33a4bc5854a5178dce04 Mon Sep 17 00:00:00 2001 From: abose Date: Sat, 11 Apr 2026 00:09:18 +0530 Subject: [PATCH 2/5] fix(panel): consistent tab widths in collapsed mode, Tools button sizing - Collapsed mode: set min-width: 63px on all bottom-panel-tab elements so active/inactive tabs have the same width (no jitter when switching) - Hide inactive tab close buttons with display:none and center-align their icons via justify-content: center - Tools button (.bottom-panel-add-btn): add min-width: 70px, remove overflow: hidden so the "Tools" text isn't clipped alongside the icon --- src/styles/Extn-BottomPanelTabs.less | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/styles/Extn-BottomPanelTabs.less b/src/styles/Extn-BottomPanelTabs.less index c2cf5bebea..06e9380156 100644 --- a/src/styles/Extn-BottomPanelTabs.less +++ b/src/styles/Extn-BottomPanelTabs.less @@ -227,9 +227,18 @@ .bottom-panel-tab-close-btn { margin-left: 0.8rem; } - /* Only show close button on the active tab to prevent accidental clicks */ + /* Fix all collapsed tabs to the same width so the UI doesn't shake + when switching active tab. The width matches the active tab's + natural content (icon + close button) using fixed px since the + icon has a fixed size. The Tools button (.bottom-panel-add-btn) + is a separate element and keeps its natural "Tools" text width. */ + .bottom-panel-tab { + min-width: 63px; + box-sizing: border-box; + justify-content: center; + } .bottom-panel-tab:not(.active) .bottom-panel-tab-close-btn { - visibility: hidden; + display: none; } } @@ -283,10 +292,10 @@ display: flex; align-items: center; justify-content: center; - padding: 0 8px; + padding: 0 10px; height: 2rem; + min-width: 70px; line-height: 2rem; - overflow: hidden; cursor: pointer; color: #888; font-size: 0.82rem; From ff253d78ca9b7a6d052d892b81c2fce572d23e7e Mon Sep 17 00:00:00 2001 From: abose Date: Sat, 11 Apr 2026 00:35:26 +0530 Subject: [PATCH 3/5] fix(panel): tools tab non-draggable and always shows icon+text - Make the default panel (Tools) tab non-draggable: set draggable="false" on the tab, reject dragstart on it, and reject it as a drop target - Add bottom-panel-tab-default class to identify the Tools tab in CSS - Always show the icon alongside the title for the Tools tab in both expanded and collapsed modes (other tabs show icons only when collapsed) - In collapsed mode, the Tools tab keeps its natural width with title visible instead of collapsing to a fixed icon-only width --- src/styles/Extn-BottomPanelTabs.less | 23 +++++++++++++++++++++++ src/view/PanelView.js | 19 ++++++++++++++++--- 2 files changed, 39 insertions(+), 3 deletions(-) diff --git a/src/styles/Extn-BottomPanelTabs.less b/src/styles/Extn-BottomPanelTabs.less index 06e9380156..f81bd6988b 100644 --- a/src/styles/Extn-BottomPanelTabs.less +++ b/src/styles/Extn-BottomPanelTabs.less @@ -166,6 +166,13 @@ display: none; } +/* Default panel (Tools) tab: always show the icon alongside the title, + in both expanded and collapsed modes, active or inactive. */ +.bottom-panel-tab.bottom-panel-tab-default .bottom-panel-tab-icon { + display: inline-flex; + margin-right: 0.4rem; +} + .default-panel-btn .panel-titlebar-icon { width: 20px; height: 20px; @@ -240,6 +247,15 @@ .bottom-panel-tab:not(.active) .bottom-panel-tab-close-btn { display: none; } + /* Default panel (Tools) tab: keep natural width and show its title + even in collapsed mode (other tabs collapse to icon-only). */ + .bottom-panel-tab.bottom-panel-tab-default { + min-width: auto; + justify-content: flex-start; + } + .bottom-panel-tab.bottom-panel-tab-default .bottom-panel-tab-title { + display: inline; + } } .bottom-panel-tab-close-btn { @@ -301,8 +317,15 @@ font-size: 0.82rem; flex: 0 0 auto; white-space: nowrap; + user-select: none; + -webkit-user-drag: none; transition: color 0.12s ease, background-color 0.12s ease; + img { + -webkit-user-drag: none; + pointer-events: none; + } + .dark & { color: #777; } diff --git a/src/view/PanelView.js b/src/view/PanelView.js index bb5ff47446..6918b61b02 100644 --- a/src/view/PanelView.js +++ b/src/view/PanelView.js @@ -149,7 +149,11 @@ define(function (require, exports, module) { */ function _buildTab(panel, isActive) { let title = panel._tabTitle || _getPanelTitle(panel.panelID, panel.$panel); - let $tab = $('
') + // Default panel (Tools) tab is not draggable — it's a fixed slot, not a user tab + const isDefault = panel.panelID === _defaultPanelId; + let $tab = $('
') + .toggleClass('bottom-panel-tab-default', isDefault) + .attr('draggable', isDefault ? 'false' : 'true') .toggleClass('active', isActive) .attr('data-panel-id', panel.panelID); const iconSrc = panel._options.iconSvg || "styles/images/panel-icon-default.svg"; @@ -288,6 +292,11 @@ define(function (require, exports, module) { } _$tabBar.on("dragstart", ".bottom-panel-tab", function (e) { + // Default panel (Tools) tab is never draggable + if ($(this).data("panel-id") === _defaultPanelId) { + e.preventDefault(); + return; + } draggedTab = this; e.originalEvent.dataTransfer.effectAllowed = "move"; e.originalEvent.dataTransfer.setData("application/x-phoenix-panel-tab", "1"); @@ -302,6 +311,10 @@ define(function (require, exports, module) { if (!draggedTab || this === draggedTab) { return; } + // Don't allow dropping onto the default panel (Tools) tab + if ($(this).data("panel-id") === _defaultPanelId) { + return; + } e.preventDefault(); e.originalEvent.dataTransfer.dropEffect = "move"; _$tabBar.find(".bottom-panel-tab").removeClass("drag-target"); @@ -766,8 +779,8 @@ define(function (require, exports, module) { _defaultPanelId = defaultPanelId; // Create the "Tools" button inside the scrollable tabs area. - _$addBtn = $('' - + '' + + '' + Strings.BOTTOM_PANEL_DEFAULT_TITLE + ''); _$tabsOverflow.append(_$addBtn); From 5a86d3c423d551c096206d243707abfdea948a9b Mon Sep 17 00:00:00 2001 From: abose Date: Sat, 11 Apr 2026 22:35:42 +0530 Subject: [PATCH 4/5] feat(mdviewer): copy/cut/paste row and column in table context menus Add Copy row, Cut row, Paste row, Copy column, Cut column, Paste column items to both the right-click context menu and the row/column handle menus. The clipboard is module-level (lasts the session) and stores cell HTML so styling is preserved on paste. Paste items only appear when their respective clipboard has content. Cut row is disabled for header rows. --- src-mdviewer/src/components/editor.js | 77 +++++++++++++++++++++++++++ src-mdviewer/src/locales/en.json | 6 +++ 2 files changed, 83 insertions(+) diff --git a/src-mdviewer/src/components/editor.js b/src-mdviewer/src/components/editor.js index e07f73b85e..aadd1d08b8 100644 --- a/src-mdviewer/src/components/editor.js +++ b/src-mdviewer/src/components/editor.js @@ -735,6 +735,67 @@ function deleteTableColumn(table, colIdx) { }); } +// Module-level clipboard for table row/column copy-paste. +// Stores the inner HTML of each cell so they can be re-inserted into other rows/cols. +let _tableRowClipboard = null; // { cells: [html, ...] } +let _tableColClipboard = null; // { cells: [html, ...] } one per row in source table + +function copyTableRow(tr) { + _tableRowClipboard = { + cells: Array.from(tr.children).map(td => td.innerHTML) + }; +} + +function copyTableColumn(table, colIdx) { + const rows = table.querySelectorAll("tr"); + _tableColClipboard = { + cells: Array.from(rows).map(row => { + const cell = row.children[colIdx]; + return cell ? cell.innerHTML : ""; + }) + }; +} + +function pasteTableRow(table, afterRow) { + if (!_tableRowClipboard) return; + const tbody = table.querySelector("tbody") || table; + const refRow = afterRow || tbody.lastElementChild; + const colCount = refRow ? refRow.children.length : _tableRowClipboard.cells.length; + const newRow = document.createElement("tr"); + for (let i = 0; i < colCount; i++) { + const td = document.createElement("td"); + td.innerHTML = _tableRowClipboard.cells[i] != null ? _tableRowClipboard.cells[i] : " "; + newRow.appendChild(td); + } + if (afterRow && afterRow.nextSibling) { + afterRow.parentNode.insertBefore(newRow, afterRow.nextSibling); + } else if (afterRow) { + afterRow.parentNode.appendChild(newRow); + } else { + tbody.appendChild(newRow); + } + focusCell(newRow.firstElementChild); + return newRow; +} + +function pasteTableColumn(table, afterColIdx) { + if (!_tableColClipboard) return; + const rows = table.querySelectorAll("tr"); + const insertIdx = afterColIdx != null ? afterColIdx + 1 : (rows[0]?.children.length || 0); + rows.forEach((row, rowIdx) => { + const isHeader = row.parentElement.tagName === "THEAD"; + const cell = document.createElement(isHeader ? "th" : "td"); + const html = _tableColClipboard.cells[rowIdx]; + cell.innerHTML = (html != null && html !== "") ? html : (isHeader ? t("table.header") : " "); + const refCell = row.children[insertIdx]; + if (refCell) { + row.insertBefore(cell, refCell); + } else { + row.appendChild(cell); + } + }); +} + function deleteTable(table) { const wrapper = table.closest(".table-wrapper"); const target = wrapper || table; @@ -858,6 +919,10 @@ function showHandleMenu(anchor, type, ctx, contentEl, wrapper, clickX) { { label: t("table.insert_row_above"), action: () => { flushSnapshot(contentEl); addTableRow(ctx.table, null, ctx.tr); dispatchInputEvent(contentEl); } }, { label: t("table.insert_row_below"), action: () => { flushSnapshot(contentEl); addTableRow(ctx.table, ctx.tr); dispatchInputEvent(contentEl); } }, { divider: true }, + { label: t("table.copy_row"), action: () => { copyTableRow(ctx.tr); } }, + { label: t("table.cut_row"), disabled: ctx.isHeader, action: () => { flushSnapshot(contentEl); copyTableRow(ctx.tr); deleteTableRow(ctx.table, ctx.tr); dispatchInputEvent(contentEl); } }, + ...(_tableRowClipboard ? [{ label: t("table.paste_row"), action: () => { flushSnapshot(contentEl); pasteTableRow(ctx.table, ctx.tr); dispatchInputEvent(contentEl); } }] : []), + { divider: true }, { label: t("table.delete_row"), destructive: true, disabled: ctx.isHeader, action: () => { flushSnapshot(contentEl); deleteTableRow(ctx.table, ctx.tr); dispatchInputEvent(contentEl); } }, { divider: true }, { label: t("table.delete_table"), destructive: true, action: () => { flushSnapshot(contentEl); deleteTable(ctx.table); dispatchInputEvent(contentEl); } } @@ -867,6 +932,10 @@ function showHandleMenu(anchor, type, ctx, contentEl, wrapper, clickX) { { label: t("table.insert_col_left"), action: () => { flushSnapshot(contentEl); addTableColumn(ctx.table, ctx.colIdx - 1); dispatchInputEvent(contentEl); } }, { label: t("table.insert_col_right"), action: () => { flushSnapshot(contentEl); addTableColumn(ctx.table, ctx.colIdx); dispatchInputEvent(contentEl); } }, { divider: true }, + { label: t("table.copy_col"), action: () => { copyTableColumn(ctx.table, ctx.colIdx); } }, + { label: t("table.cut_col"), action: () => { flushSnapshot(contentEl); copyTableColumn(ctx.table, ctx.colIdx); deleteTableColumn(ctx.table, ctx.colIdx); dispatchInputEvent(contentEl); } }, + ...(_tableColClipboard ? [{ label: t("table.paste_col"), action: () => { flushSnapshot(contentEl); pasteTableColumn(ctx.table, ctx.colIdx); dispatchInputEvent(contentEl); } }] : []), + { divider: true }, { label: t("table.delete_col"), destructive: true, action: () => { flushSnapshot(contentEl); deleteTableColumn(ctx.table, ctx.colIdx); dispatchInputEvent(contentEl); } }, { divider: true }, { label: t("table.delete_table"), destructive: true, action: () => { flushSnapshot(contentEl); deleteTable(ctx.table); dispatchInputEvent(contentEl); } } @@ -1091,6 +1160,14 @@ function showTableContextMenu(x, y, ctx, contentEl) { { label: t("table.add_col_left"), action: () => { flushSnapshot(contentEl); addTableColumn(ctx.table, ctx.colIdx - 1); dispatchInputEvent(contentEl); } }, { label: t("table.add_col_right"), action: () => { flushSnapshot(contentEl); addTableColumn(ctx.table, ctx.colIdx); dispatchInputEvent(contentEl); } }, { divider: true }, + { label: t("table.copy_row"), action: () => { copyTableRow(ctx.tr); } }, + { label: t("table.cut_row"), action: () => { flushSnapshot(contentEl); copyTableRow(ctx.tr); deleteTableRow(ctx.table, ctx.tr); dispatchInputEvent(contentEl); } }, + ...(_tableRowClipboard ? [{ label: t("table.paste_row"), action: () => { flushSnapshot(contentEl); pasteTableRow(ctx.table, ctx.tr); dispatchInputEvent(contentEl); } }] : []), + { divider: true }, + { label: t("table.copy_col"), action: () => { copyTableColumn(ctx.table, ctx.colIdx); } }, + { label: t("table.cut_col"), action: () => { flushSnapshot(contentEl); copyTableColumn(ctx.table, ctx.colIdx); deleteTableColumn(ctx.table, ctx.colIdx); dispatchInputEvent(contentEl); } }, + ...(_tableColClipboard ? [{ label: t("table.paste_col"), action: () => { flushSnapshot(contentEl); pasteTableColumn(ctx.table, ctx.colIdx); dispatchInputEvent(contentEl); } }] : []), + { divider: true }, { label: t("table.delete_row"), destructive: true, action: () => { flushSnapshot(contentEl); deleteTableRow(ctx.table, ctx.tr); dispatchInputEvent(contentEl); } }, { label: t("table.delete_col"), destructive: true, action: () => { flushSnapshot(contentEl); deleteTableColumn(ctx.table, ctx.colIdx); dispatchInputEvent(contentEl); } }, { divider: true }, diff --git a/src-mdviewer/src/locales/en.json b/src-mdviewer/src/locales/en.json index d73a325393..17367ebb1e 100644 --- a/src-mdviewer/src/locales/en.json +++ b/src-mdviewer/src/locales/en.json @@ -161,6 +161,12 @@ "add_row_below": "Add row below", "add_col_left": "Add column left", "add_col_right": "Add column right", + "copy_row": "Copy row", + "cut_row": "Cut row", + "paste_row": "Paste row below", + "copy_col": "Copy column", + "cut_col": "Cut column", + "paste_col": "Paste column right", "delete_table": "Delete table" }, "dialog": { From e90a8f85b80b619f6db0210399e9b828802497d7 Mon Sep 17 00:00:00 2001 From: abose Date: Sat, 11 Apr 2026 23:48:15 +0530 Subject: [PATCH 5/5] build: run buildMDViewer before release:dev/staging/prod --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index c57b9a88c8..25f0000d93 100644 --- a/package.json +++ b/package.json @@ -68,9 +68,9 @@ "build": "npm run buildMDViewer && npm run _create-src-node-pkg-lock && npm run _buildonly && npm run createJSDocs && npm run zipTestFiles && npm run lint && npm run _vulnerabilityCheck", "build:debug": "npm run buildMDViewer && npm run _create-src-node-pkg-lock && npm run _buildonlyDebug && npm run createJSDocs && npm run zipTestFiles && npm run lint && npm run _vulnerabilityCheck", "clean": "gulp clean && gulp reset", - "release:dev": "gulp releaseDev", - "release:staging": "gulp releaseStaging", - "release:prod": "gulp releaseProd", + "release:dev": "npm run buildMDViewer && gulp releaseDev", + "release:staging": "npm run buildMDViewer && gulp releaseStaging", + "release:prod": "npm run buildMDViewer && gulp releaseProd", "validate:dist-size": "gulp validateDistSizeRestrictions", "_releaseWebCache": "gulp releaseWebCache", "_patchVersionBump": "gulp patchVersionBump",