From 8c1c1bf8db54dd71f80228420e40722dd7ec7446 Mon Sep 17 00:00:00 2001 From: trean Date: Wed, 20 May 2026 18:16:47 +0200 Subject: [PATCH 1/4] fix filter field bug: wrong url matching, styled and textarea texts misaligment --- src/components/Points/PointsFilter/PayloadFilterField.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Points/PointsFilter/PayloadFilterField.jsx b/src/components/Points/PointsFilter/PayloadFilterField.jsx index e1c31da38..440d9a5f3 100644 --- a/src/components/Points/PointsFilter/PayloadFilterField.jsx +++ b/src/components/Points/PointsFilter/PayloadFilterField.jsx @@ -139,7 +139,8 @@ const PayloadFilterField = memo(function PayloadFilterField({ (code) => { if (!code) return ''; - const regex = /([a-zA-Z_][\w.]*):(\S*)/g; + // Negative lookahead (?!//) prevents matching URL schemes like https:// + const regex = /([a-zA-Z_][\w.]*):(?!\/\/)(\S*)/g; const keyColor = theme.palette.text.primary; const valueColor = theme.palette.primary.main; const valueBgColor = alpha(theme.palette.primary.light, 0.15); @@ -156,9 +157,9 @@ const PayloadFilterField = memo(function PayloadFilterField({ const currentValueBgColor = isIdFilter ? idValueBgColor : valueBgColor; const valueSpan = value - ? `${value}` + ? `${value}` : ''; - return `${key}:${valueSpan}`; + return `${key}:${valueSpan}`; }); }, [theme] From 794e41a27a9e478dad21cdad6173dc46dc4d6971 Mon Sep 17 00:00:00 2001 From: trean Date: Thu, 21 May 2026 15:25:54 +0200 Subject: [PATCH 2/4] fix cursor mismatch --- .../Points/PointsFilter/PayloadFilterField.jsx | 2 +- .../Points/PointsFilter/StyledPointsFilter.js | 15 +++++++++++---- src/components/Points/PointsFilter/helpers.js | 2 +- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/Points/PointsFilter/PayloadFilterField.jsx b/src/components/Points/PointsFilter/PayloadFilterField.jsx index 440d9a5f3..1477f2360 100644 --- a/src/components/Points/PointsFilter/PayloadFilterField.jsx +++ b/src/components/Points/PointsFilter/PayloadFilterField.jsx @@ -157,7 +157,7 @@ const PayloadFilterField = memo(function PayloadFilterField({ const currentValueBgColor = isIdFilter ? idValueBgColor : valueBgColor; const valueSpan = value - ? `${value}` + ? `${value}` : ''; return `${key}:${valueSpan}`; }); diff --git a/src/components/Points/PointsFilter/StyledPointsFilter.js b/src/components/Points/PointsFilter/StyledPointsFilter.js index 836fe4e84..efd3e527b 100644 --- a/src/components/Points/PointsFilter/StyledPointsFilter.js +++ b/src/components/Points/PointsFilter/StyledPointsFilter.js @@ -55,24 +55,31 @@ export const ClearButton = styled(IconButton)(({ theme }) => ({ export const StyledFilterEditor = styled(Editor)(({ theme }) => ({ flex: 1, - fontFamily: theme.typography.fontFamily, - fontSize: '1rem', + // Monospace avoids cumulative cursor drift from variable/proportional fonts in textarea vs pre + fontFamily: 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", monospace', + fontSize: theme.typography.body1.fontSize, fontWeight: 400, lineHeight: '23px', - letterSpacing: '0.5px', + letterSpacing: 'normal', + fontFeatureSettings: 'normal', + fontVariantLigatures: 'none', '& textarea, & pre': { fontFamily: 'inherit !important', fontSize: 'inherit !important', fontWeight: 'inherit !important', lineHeight: 'inherit !important', letterSpacing: 'inherit !important', + fontFeatureSettings: 'inherit !important', + fontVariantLigatures: 'inherit !important', margin: '0 !important', padding: '0 !important', border: 'none !important', outline: 'none !important', background: 'transparent !important', whiteSpace: 'pre-wrap !important', - wordBreak: 'break-word !important', + // Match react-simple-code-editor defaults for consistent wrapping + wordBreak: 'keep-all !important', + overflowWrap: 'break-word !important', wordSpacing: 'normal !important', '&::placeholder': { color: theme.palette.text.disabled, diff --git a/src/components/Points/PointsFilter/helpers.js b/src/components/Points/PointsFilter/helpers.js index 365639153..f5359012e 100644 --- a/src/components/Points/PointsFilter/helpers.js +++ b/src/components/Points/PointsFilter/helpers.js @@ -198,7 +198,7 @@ export const calculatePopperOffset = (filterInputValue, currentWordStart) => { measureCanvas = document.createElement('canvas'); measureCtx = measureCanvas.getContext('2d'); // Match the editor's font - measureCtx.font = '1rem system-ui, -apple-system, sans-serif'; + measureCtx.font = '400 16px ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", monospace'; } const textWidth = measureCtx.measureText(textBeforeWord).width; From cd07ba9f3edc8e790a0c1f8c9a2a99c0c535f315 Mon Sep 17 00:00:00 2001 From: trean Date: Thu, 21 May 2026 22:18:27 +0200 Subject: [PATCH 3/4] set the similarity field font to match the font in the filters field --- .../Points/PointsFilter/StyledPointsFilter.js | 68 ++++++++++++------- src/components/Points/PointsFilter/helpers.js | 8 ++- 2 files changed, 50 insertions(+), 26 deletions(-) diff --git a/src/components/Points/PointsFilter/StyledPointsFilter.js b/src/components/Points/PointsFilter/StyledPointsFilter.js index efd3e527b..ab3b5ba5f 100644 --- a/src/components/Points/PointsFilter/StyledPointsFilter.js +++ b/src/components/Points/PointsFilter/StyledPointsFilter.js @@ -1,6 +1,7 @@ import { styled } from '@mui/material/styles'; import { Box, IconButton, Paper, Popper } from '@mui/material'; import Editor from 'react-simple-code-editor'; +import { filterInputFontFamily } from './helpers'; export const StyledAutocompletePopper = styled(Popper)(() => ({ width: 'fit-content !important', @@ -53,16 +54,20 @@ export const ClearButton = styled(IconButton)(({ theme }) => ({ }, })); -export const StyledFilterEditor = styled(Editor)(({ theme }) => ({ - flex: 1, - // Monospace avoids cumulative cursor drift from variable/proportional fonts in textarea vs pre - fontFamily: 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", monospace', +export const getFilterInputFontSx = (theme) => ({ + fontFamily: filterInputFontFamily, fontSize: theme.typography.body1.fontSize, fontWeight: 400, lineHeight: '23px', letterSpacing: 'normal', fontFeatureSettings: 'normal', fontVariantLigatures: 'none', +}); + +export const StyledFilterEditor = styled(Editor)(({ theme }) => ({ + flex: 1, + // Monospace avoids cumulative cursor drift from variable/proportional fonts in textarea vs pre + ...getFilterInputFontSx(theme), '& textarea, & pre': { fontFamily: 'inherit !important', fontSize: 'inherit !important', @@ -112,24 +117,37 @@ export const AutocompleteList = styled(Paper)(({ theme }) => ({ }, })); -export const getSharedTextFieldSx = (theme) => ({ - '& .MuiOutlinedInput-root': { - borderRadius: '8px', - padding: '6px 8px', - minHeight: 40, - }, - '& .MuiOutlinedInput-notchedOutline': { - borderColor: theme.palette.divider, - }, - '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: theme.palette.primary.main, - }, - '& .MuiChip-root': { - height: 28, - borderRadius: '8px', - }, - '& .MuiOutlinedInput-input::placeholder': { - color: theme.palette.text.disabled, - opacity: 1, - }, -}); +export const getSharedTextFieldSx = (theme) => { + const fontSx = getFilterInputFontSx(theme); + + return { + '& .MuiOutlinedInput-root': { + ...fontSx, + borderRadius: '8px', + padding: '6px 8px', + minHeight: 40, + }, + '& .MuiOutlinedInput-notchedOutline': { + borderColor: theme.palette.divider, + }, + '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': { + borderColor: theme.palette.primary.main, + }, + '& .MuiOutlinedInput-input, & .MuiInputBase-input': { + ...fontSx, + }, + '& .MuiChip-root': { + ...fontSx, + height: 28, + borderRadius: '8px', + }, + '& .MuiChip-label': { + ...fontSx, + }, + '& .MuiOutlinedInput-input::placeholder': { + color: theme.palette.text.disabled, + opacity: 1, + ...fontSx, + }, + }; +}; diff --git a/src/components/Points/PointsFilter/helpers.js b/src/components/Points/PointsFilter/helpers.js index f5359012e..0d71a5d86 100644 --- a/src/components/Points/PointsFilter/helpers.js +++ b/src/components/Points/PointsFilter/helpers.js @@ -1,3 +1,9 @@ +/** + * Shared monospace font stack for filter and similar-search inputs + */ +export const filterInputFontFamily = + 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", monospace'; + /** * Check if two filters are equal * @param {Object} a - First filter @@ -198,7 +204,7 @@ export const calculatePopperOffset = (filterInputValue, currentWordStart) => { measureCanvas = document.createElement('canvas'); measureCtx = measureCanvas.getContext('2d'); // Match the editor's font - measureCtx.font = '400 16px ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", monospace'; + measureCtx.font = `400 16px ${filterInputFontFamily}`; } const textWidth = measureCtx.measureText(textBeforeWord).width; From 9161b5957aeda926c0f0a91ca9b2a1f33e4fb28c Mon Sep 17 00:00:00 2001 From: trean Date: Thu, 21 May 2026 22:56:40 +0200 Subject: [PATCH 4/4] format --- src/components/Points/PointsFilter/helpers.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Points/PointsFilter/helpers.js b/src/components/Points/PointsFilter/helpers.js index 0d71a5d86..00a72d4ae 100644 --- a/src/components/Points/PointsFilter/helpers.js +++ b/src/components/Points/PointsFilter/helpers.js @@ -1,8 +1,7 @@ /** * Shared monospace font stack for filter and similar-search inputs */ -export const filterInputFontFamily = - 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", monospace'; +export const filterInputFontFamily = 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", monospace'; /** * Check if two filters are equal