SONAR-22495 Fix tokens not being replaced by underlines in some cases & SONAR-22492 Fix underlining being shifted when the line contains double quotes (#11425)
SONAR-22495 Support underlining multiple issues in the same code snippet
SONAR-22643 Allow to simultaneously use the HLJS Underline and Issue Indicator plugin
import abap from 'highlightjs-sap-abap';
import tw from 'twin.macro';
import { themeColor, themeContrast } from '../helpers/theme';
+import { hljsUnderlinePlugin } from '../sonar-aligned/hljs/HljsUnderlinePlugin';
hljs.registerLanguage('abap', abap);
hljs.registerLanguage('apex', apex);
hljs.registerAliases('web', { languageName: 'xml' });
hljs.registerAliases(['cloudformation', 'kubernetes'], { languageName: 'yaml' });
+hljs.addPlugin(hljsUnderlinePlugin);
+
interface Props {
className?: string;
htmlAsString: string;
color: ${themeColor('codeSnippetPreprocessingDirective')};
}
+ .sonar-underline {
+ text-decoration: underline ${themeColor('codeLineIssueSquiggle')};
+ text-decoration: underline ${themeColor('codeLineIssueSquiggle')} wavy;
+ text-decoration-thickness: 2px;
+ text-decoration-skip-ink: none;
+ }
+
&.code-wrap {
${tw`sw-whitespace-pre-wrap`}
${tw`sw-break-all`}
color: rgb(47,103,48);
}
+.emotion-6 .sonar-underline {
+ -webkit-text-decoration: underline rgb(253,162,155);
+ text-decoration: underline rgb(253,162,155);
+ -webkit-text-decoration: underline rgb(253,162,155) wavy;
+ text-decoration: underline rgb(253,162,155) wavy;
+ text-decoration-thickness: 2px;
+ text-decoration-skip-ink: none;
+}
+
.emotion-6.code-wrap {
white-space: pre-wrap;
word-break: break-all;
color: rgb(47,103,48);
}
+.emotion-6 .sonar-underline {
+ -webkit-text-decoration: underline rgb(253,162,155);
+ text-decoration: underline rgb(253,162,155);
+ -webkit-text-decoration: underline rgb(253,162,155) wavy;
+ text-decoration: underline rgb(253,162,155) wavy;
+ text-decoration-thickness: 2px;
+ text-decoration-skip-ink: none;
+}
+
.emotion-6.code-wrap {
white-space: pre-wrap;
word-break: break-all;
color: rgb(47,103,48);
}
+.emotion-6 .sonar-underline {
+ -webkit-text-decoration: underline rgb(253,162,155);
+ text-decoration: underline rgb(253,162,155);
+ -webkit-text-decoration: underline rgb(253,162,155) wavy;
+ text-decoration: underline rgb(253,162,155) wavy;
+ text-decoration-thickness: 2px;
+ text-decoration-skip-ink: none;
+}
+
.emotion-6.code-wrap {
white-space: pre-wrap;
word-break: break-all;
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import { HighlightResult } from 'highlight.js';
+
+interface UnderlineRangePosition {
+ cursorOffset: number;
+ line: number;
+}
+
+interface UnderlineRange {
+ end: UnderlineRangePosition;
+ start: UnderlineRangePosition;
+}
+
+export class HljsUnderlinePlugin {
+ static readonly SPAN_REGEX = '<\\/?span[^>]*>';
+
+ static readonly TOKEN_PREFIX = 'SNR_TGXRJVF'; // Random string to avoid conflicts with real code
+
+ static readonly TOKEN_SUFFIX_START = '_START';
+
+ static readonly TOKEN_SUFFIX_END = '_END';
+
+ static readonly TOKEN_START =
+ HljsUnderlinePlugin.TOKEN_PREFIX + HljsUnderlinePlugin.TOKEN_SUFFIX_START;
+
+ static readonly TOKEN_END =
+ HljsUnderlinePlugin.TOKEN_PREFIX + HljsUnderlinePlugin.TOKEN_SUFFIX_END;
+
+ static readonly OPEN_TAG = '<span data-testid="hljs-sonar-underline" class="sonar-underline">';
+
+ static readonly CLOSE_TAG = '</span>';
+
+ /**
+ * Add a pair of tokens to the source code to mark the start and end of the content to be underlined.
+ */
+ tokenize(source: string[], ranges: UnderlineRange[]): string[] {
+ // Order ranges by start position, ascending
+ ranges.sort((a, b) => {
+ if (a.start.line === b.start.line) {
+ return a.start.cursorOffset - b.start.cursorOffset;
+ }
+ return a.start.line - b.start.line;
+ });
+
+ // We want to merge overlapping ranges to ensure the underline markup doesn't intesect with itself in the after hook
+ const simplifiedRanges: UnderlineRange[] = [];
+ let currentRange = ranges[0];
+ for (let i = 1; i < ranges.length; i++) {
+ const nextRange = ranges[i];
+
+ if (
+ currentRange.start.line <= nextRange.start.line &&
+ currentRange.start.cursorOffset <= nextRange.start.cursorOffset &&
+ currentRange.end.line >= nextRange.end.line &&
+ currentRange.end.cursorOffset >= nextRange.end.cursorOffset
+ ) {
+ // Range is contained in the current range. Do nothing
+ } else if (
+ currentRange.end.line >= nextRange.start.line &&
+ currentRange.end.cursorOffset >= nextRange.start.cursorOffset
+ ) {
+ // Ranges overlap
+ currentRange.end = nextRange.end;
+ } else {
+ simplifiedRanges.push(currentRange);
+ currentRange = nextRange;
+ }
+ }
+ simplifiedRanges.push(currentRange);
+
+ // Add tokens to the source code, from the end to the start to avoid messing up the indices
+ for (let i = simplifiedRanges.length - 1; i >= 0; i--) {
+ const range = simplifiedRanges[i];
+
+ source[range.end.line] = [
+ source[range.end.line].slice(0, range.end.cursorOffset),
+ HljsUnderlinePlugin.TOKEN_END,
+ source[range.end.line].slice(range.end.cursorOffset),
+ ].join('');
+
+ // If there are lines between the start and end, we re-tokenize each line
+ if (range.end.line !== range.start.line) {
+ source[range.end.line] = HljsUnderlinePlugin.TOKEN_START + source[range.end.line];
+ for (let j = range.end.line - 1; j > range.start.line; j--) {
+ source[j] = [
+ HljsUnderlinePlugin.TOKEN_START,
+ source[j],
+ HljsUnderlinePlugin.TOKEN_END,
+ ].join('');
+ }
+ source[range.start.line] += HljsUnderlinePlugin.TOKEN_END;
+ }
+
+ source[range.start.line] = [
+ source[range.start.line].slice(0, range.start.cursorOffset),
+ HljsUnderlinePlugin.TOKEN_START,
+ source[range.start.line].slice(range.start.cursorOffset),
+ ].join('');
+ }
+
+ return source;
+ }
+
+ 'after:highlight'(result: HighlightResult) {
+ const re = new RegExp(HljsUnderlinePlugin.TOKEN_START, 'g');
+ re.lastIndex = 0;
+ let match = re.exec(result.value);
+ while (match) {
+ result.value = this.replaceTokens(result.value, match.index);
+ match = re.exec(result.value);
+ }
+ }
+
+ /**
+ * Whether the content is intersecting with HTML <span> tags added by HLJS or this plugin.
+ */
+ isIntersectingHtmlMarkup(content: string) {
+ const re = new RegExp(HljsUnderlinePlugin.SPAN_REGEX, 'g');
+ let depth = 0;
+ let intersecting = false;
+ let tag = re.exec(content);
+ while (tag) {
+ if (tag[0].startsWith('</')) {
+ depth--;
+ } else {
+ depth++;
+ }
+
+ // If at any point we're closing one-too-many tag, we're intersecting
+ if (depth < 0) {
+ intersecting = true;
+ break;
+ }
+
+ tag = re.exec(content);
+ }
+
+ // If at the end we're not at 0, we're intersecting
+ intersecting = intersecting || depth !== 0;
+
+ return intersecting;
+ }
+
+ /**
+ * Replace a pair of tokens and everything between with the appropriate HTML markup to underline the content.
+ */
+ private replaceTokens(htmlMarkup: string, startTokenIndex: number) {
+ const endTagIndex = htmlMarkup.indexOf(HljsUnderlinePlugin.TOKEN_END);
+
+ // Just in case the end tag is before the start tag (or the end tag isn't found)
+ if (endTagIndex <= startTokenIndex) {
+ return htmlMarkup;
+ }
+
+ let content = htmlMarkup.slice(
+ startTokenIndex + HljsUnderlinePlugin.TOKEN_START.length,
+ endTagIndex,
+ );
+
+ // If intersecting, we highlight in a safe way
+ // We could always use this method, but this creates visual artifacts in the underline wave
+ if (this.isIntersectingHtmlMarkup(content)) {
+ content = content.replace(
+ new RegExp(HljsUnderlinePlugin.SPAN_REGEX, 'g'),
+ (tag) => `${HljsUnderlinePlugin.CLOSE_TAG}${tag}${HljsUnderlinePlugin.OPEN_TAG}`,
+ );
+ }
+
+ // If no intersection, it's safe to add the tags
+ const stringRegex = [
+ HljsUnderlinePlugin.TOKEN_START,
+ '(.+?)',
+ HljsUnderlinePlugin.TOKEN_END,
+ ].join('');
+ htmlMarkup = htmlMarkup.replace(
+ new RegExp(stringRegex, 's'),
+ `${HljsUnderlinePlugin.OPEN_TAG}${content}${HljsUnderlinePlugin.CLOSE_TAG}`,
+ );
+
+ return htmlMarkup;
+ }
+}
+
+const hljsUnderlinePlugin = new HljsUnderlinePlugin();
+export { hljsUnderlinePlugin };
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import { HighlightResult } from 'highlight.js';
+import { HljsUnderlinePlugin, hljsUnderlinePlugin } from '../HljsUnderlinePlugin';
+
+const START_TOKEN = HljsUnderlinePlugin.TOKEN_START;
+const END_TOKEN = HljsUnderlinePlugin.TOKEN_END;
+
+describe('should add tokens', () => {
+ it('with multiple overlapping ranges', () => {
+ expect(
+ hljsUnderlinePlugin.tokenize(
+ ['line1', 'line2', 'line3', 'line4', 'line5'],
+ [
+ {
+ start: { line: 1, cursorOffset: 2 },
+ end: { line: 2, cursorOffset: 2 },
+ },
+ {
+ start: { line: 3, cursorOffset: 2 },
+ end: { line: 3, cursorOffset: 4 },
+ },
+ {
+ start: { line: 1, cursorOffset: 1 },
+ end: { line: 1, cursorOffset: 3 },
+ },
+ ],
+ ),
+ ).toEqual([
+ 'line1',
+ `l${START_TOKEN}ine2${END_TOKEN}`,
+ `${START_TOKEN}li${END_TOKEN}ne3`,
+ `li${START_TOKEN}ne${END_TOKEN}4`,
+ 'line5',
+ ]);
+ });
+
+ it('highlight multiple issues on the same line', () => {
+ expect(
+ hljsUnderlinePlugin.tokenize(
+ ['line1', 'line2', 'line3', 'line4', 'line5'],
+ [
+ {
+ start: { line: 1, cursorOffset: 1 },
+ end: { line: 1, cursorOffset: 2 },
+ },
+ {
+ start: { line: 1, cursorOffset: 3 },
+ end: { line: 1, cursorOffset: 4 },
+ },
+ ],
+ ),
+ ).toEqual([
+ 'line1',
+ `l${START_TOKEN}i${END_TOKEN}n${START_TOKEN}e${END_TOKEN}2`,
+ 'line3',
+ 'line4',
+ 'line5',
+ ]);
+ });
+
+ it('highlight multiple successive lines', () => {
+ expect(
+ hljsUnderlinePlugin.tokenize(
+ ['line1', 'line2', 'line3', 'line4', 'line5'],
+ [
+ {
+ start: { line: 1, cursorOffset: 2 },
+ end: { line: 4, cursorOffset: 4 },
+ },
+ ],
+ ),
+ ).toEqual([
+ 'line1',
+ `li${START_TOKEN}ne2${END_TOKEN}`,
+ `${START_TOKEN}line3${END_TOKEN}`,
+ `${START_TOKEN}line4${END_TOKEN}`,
+ `${START_TOKEN}line${END_TOKEN}5`,
+ ]);
+ });
+});
+
+describe('should detect html markup intersection', () => {
+ it.each([
+ '... <span a="b"> ....',
+ '... </span> ...',
+ '<span> ...',
+ '... </span>',
+ '... </span> ... <span a="b"> ...',
+ '... <span><span a="b"> ... </span> ...',
+ '... <span> ... <span a="b"> ... </span> ... </span> ... </span> ...',
+ ])('should detect intersection (%s)', (code) => {
+ expect(hljsUnderlinePlugin.isIntersectingHtmlMarkup(code)).toBe(true);
+ });
+
+ it.each([
+ '... <span a="b"> ... </span> ...',
+ '<span> ... </span> ... <span> ... <span class="abc"><span> ... </span></span> ... </span>',
+ ])('should not detect intersection (%s)', (code) => {
+ expect(hljsUnderlinePlugin.isIntersectingHtmlMarkup(code)).toBe(false);
+ });
+});
+
+describe('underline plugin should work', () => {
+ it('should underline on different lines', () => {
+ const result = {
+ value: ['line1', `l${START_TOKEN}ine2`, 'line3', `lin${END_TOKEN}e4`, 'line5'].join('\n'),
+ } as HighlightResult;
+
+ hljsUnderlinePlugin['after:highlight'](result);
+
+ expect(result.value).toEqual(
+ [
+ 'line1',
+ `l${HljsUnderlinePlugin.OPEN_TAG}ine2`,
+ 'line3',
+ `lin${HljsUnderlinePlugin.CLOSE_TAG}e4`,
+ 'line5',
+ ].join('\n'),
+ );
+ });
+
+ it('should underline on same lines', () => {
+ const result = {
+ value: ['line1', `l${START_TOKEN}ine${END_TOKEN}2`, 'line3'].join('\n'),
+ } as HighlightResult;
+
+ hljsUnderlinePlugin['after:highlight'](result);
+
+ expect(result.value).toEqual(
+ [
+ 'line1',
+ `l${HljsUnderlinePlugin.OPEN_TAG}ine${HljsUnderlinePlugin.CLOSE_TAG}2`,
+ 'line3',
+ ].join('\n'),
+ );
+ });
+
+ it('should not underline if end tag is before start tag', () => {
+ const result = {
+ value: ['line1', `l${END_TOKEN}ine${START_TOKEN}2`, 'line3'].join('\n'),
+ } as HighlightResult;
+
+ hljsUnderlinePlugin['after:highlight'](result);
+
+ expect(result.value).toEqual(['line1', `l${END_TOKEN}ine${START_TOKEN}2`, 'line3'].join('\n'));
+ });
+
+ it('should not underline if there is no end tag', () => {
+ const result = {
+ value: ['line1', `l${START_TOKEN}ine2`, 'line3'].join('\n'),
+ } as HighlightResult;
+
+ hljsUnderlinePlugin['after:highlight'](result);
+
+ expect(result.value).toEqual(['line1', `l${START_TOKEN}ine2`, 'line3'].join('\n'));
+ });
+
+ it('should underline even when intersecting html markup', () => {
+ const result = {
+ value: `.. <span class="hljs-keyword"> .${START_TOKEN}. <span class="hljs-keyword"> .. </span> .. </span> .. ${END_TOKEN} ..`,
+ } as HighlightResult;
+
+ hljsUnderlinePlugin['after:highlight'](result);
+
+ expect(result.value).toEqual(
+ `.. <span class="hljs-keyword"> .${HljsUnderlinePlugin.OPEN_TAG}. ${HljsUnderlinePlugin.CLOSE_TAG}<span class="hljs-keyword">${HljsUnderlinePlugin.OPEN_TAG} .. ${HljsUnderlinePlugin.CLOSE_TAG}</span>${HljsUnderlinePlugin.OPEN_TAG} .. ${HljsUnderlinePlugin.CLOSE_TAG}</span>${HljsUnderlinePlugin.OPEN_TAG} .. ${HljsUnderlinePlugin.CLOSE_TAG} ..`,
+ );
+ });
+});
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+export { hljsUnderlinePlugin } from './HljsUnderlinePlugin';
export * from './components';
export * from './helpers';
+export * from './hljs';
export * from './types';
textRange: {
startLine: 1,
endLine: 1,
- startOffset: 1142,
- endOffset: 1144,
+ startOffset: 1148,
+ endOffset: 1159,
},
ruleDescriptionContextKey: 'spring',
ruleStatus: 'DEPRECATED',
expect(screen.getByText('issue.preview.jupyter_notebook.error')).toBeInTheDocument();
});
+ it('should render error when jupyter issue can not be found', async () => {
+ issuesHandler.setIssueList([
+ {
+ ...JUPYTER_ISSUE,
+ issue: {
+ ...JUPYTER_ISSUE.issue,
+ textRange: {
+ startLine: 2,
+ endLine: 2,
+ startOffset: 1,
+ endOffset: 1,
+ },
+ },
+ },
+ ]);
+ renderProjectIssuesApp('project/issues?issues=some-issue&open=some-issue&id=myproject');
+ await waitOnDataLoaded();
+
+ // Preview tab should be shown
+ expect(ui.preview.get()).toBeChecked();
+ expect(ui.code.get()).toBeInTheDocument();
+
+ expect(
+ await screen.findByRole('button', { name: 'Issue on Jupyter Notebook' }),
+ ).toBeInTheDocument();
+
+ expect(screen.getByText('issue.preview.jupyter_notebook.error')).toBeInTheDocument();
+ });
+
it('should show preview tab when jupyter notebook issue', async () => {
issuesHandler.setIssueList([JUPYTER_ISSUE]);
renderProjectIssuesApp('project/issues?issues=some-issue&open=some-issue&id=myproject');
).toBeInTheDocument();
expect(screen.queryByText('issue.preview.jupyter_notebook.error')).not.toBeInTheDocument();
+ expect(screen.getByTestId('hljs-sonar-underline')).toHaveTextContent('matplotlib');
+ expect(screen.getByText(/pylab/, { exact: false })).toBeInTheDocument();
+ });
+
+ it('should render issue in jupyter notebook spanning over multiple cells', async () => {
+ issuesHandler.setIssueList([
+ {
+ ...JUPYTER_ISSUE,
+ issue: {
+ ...JUPYTER_ISSUE.issue,
+ textRange: {
+ startLine: 1,
+ endLine: 1,
+ startOffset: 571,
+ endOffset: JUPYTER_ISSUE.issue.textRange!.endOffset,
+ },
+ },
+ },
+ ]);
+ renderProjectIssuesApp('project/issues?issues=some-issue&open=some-issue&id=myproject');
+ await waitOnDataLoaded();
+
+ // Preview tab should be shown
+ expect(ui.preview.get()).toBeChecked();
+ expect(ui.code.get()).toBeInTheDocument();
+
+ expect(
+ await screen.findByRole('button', { name: 'Issue on Jupyter Notebook' }),
+ ).toBeInTheDocument();
+
+ expect(screen.queryByText('issue.preview.jupyter_notebook.error')).not.toBeInTheDocument();
+
+ const underlined = screen.getAllByTestId('hljs-sonar-underline');
+ expect(underlined).toHaveLength(4);
+ expect(underlined[0]).toHaveTextContent('print train.shape');
+ expect(underlined[1]).toHaveTextContent('print test.shap');
+ expect(underlined[2]).toHaveTextContent('import pylab as pl');
+ expect(underlined[3]).toHaveTextContent('%matplotlib');
});
});
});
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { INotebookContent } from '@jupyterlab/nbformat';
+import { ICell, INotebookContent } from '@jupyterlab/nbformat';
import { Spinner } from '@sonarsource/echoes-react';
-import { FlagMessage, IssueMessageHighlighting, LineFinding } from 'design-system';
-import React, { useMemo } from 'react';
+import {
+ FlagMessage,
+ hljsUnderlinePlugin,
+ IssueMessageHighlighting,
+ LineFinding,
+} from 'design-system';
+import React from 'react';
import { JupyterCell } from '~sonar-aligned/components/SourceViewer/JupyterNotebookViewer';
import { getBranchLikeQuery } from '~sonar-aligned/helpers/branch-like';
import { JsonIssueMapper } from '~sonar-aligned/helpers/json-issue-mapper';
import { useRawSourceQuery } from '../../../queries/sources';
import { BranchLike } from '../../../types/branch-like';
import { Issue } from '../../../types/types';
-import { JupyterNotebookCursorPath } from './types';
import { pathToCursorInCell } from './utils';
export interface JupyterNotebookIssueViewerProps {
key: issue.component,
...getBranchLikeQuery(branchLike),
});
- const [startOffset, setStartOffset] = React.useState<JupyterNotebookCursorPath | null>(null);
- const [endPath, setEndPath] = React.useState<JupyterNotebookCursorPath | null>(null);
-
- const jupyterNotebook = useMemo(() => {
- if (typeof data !== 'string') {
- return null;
- }
- try {
- return JSON.parse(data) as INotebookContent;
- } catch (error) {
- return null;
- }
- }, [data]);
+ const [renderedCells, setRenderedCells] = React.useState<ICell[] | null>(null);
React.useEffect(() => {
- if (typeof data !== 'string') {
+ if (!issue.textRange || typeof data !== 'string') {
return;
}
- if (!issue.textRange) {
+ let jupyterNotebook: INotebookContent;
+ try {
+ jupyterNotebook = JSON.parse(data);
+ } catch (error) {
+ setRenderedCells(null);
return;
}
);
const startOffset = pathToCursorInCell(mapper.get(start));
const endOffset = pathToCursorInCell(mapper.get(end));
- if (
- startOffset &&
- endOffset &&
- startOffset.cell === endOffset.cell &&
- startOffset.line === endOffset.line
- ) {
- setStartOffset(startOffset);
- setEndPath(endOffset);
+ if (!startOffset || !endOffset) {
+ setRenderedCells(null);
+ return;
}
+
+ if (startOffset.cell === endOffset.cell) {
+ const startCell = jupyterNotebook.cells[startOffset.cell];
+ startCell.source = Array.isArray(startCell.source) ? startCell.source : [startCell.source];
+ startCell.source = hljsUnderlinePlugin.tokenize(startCell.source, [
+ {
+ start: startOffset,
+ end: endOffset,
+ },
+ ]);
+ } else {
+ // Each cell is a separate code block, so we have to underline them separately
+ // We underilne the first cell from the start offset to the end of the cell, and the last cell from the start of the cell to the end offset
+ const startCell = jupyterNotebook.cells[startOffset.cell];
+ startCell.source = Array.isArray(startCell.source) ? startCell.source : [startCell.source];
+ startCell.source = hljsUnderlinePlugin.tokenize(startCell.source, [
+ {
+ start: startOffset,
+ end: {
+ line: startCell.source.length - 1,
+ cursorOffset: startCell.source[startCell.source.length - 1].length,
+ },
+ },
+ ]);
+ const endCell = jupyterNotebook.cells[endOffset.cell];
+ endCell.source = Array.isArray(endCell.source) ? endCell.source : [endCell.source];
+ endCell.source = hljsUnderlinePlugin.tokenize(endCell.source, [
+ {
+ start: { line: 0, cursorOffset: 0 },
+ end: endOffset,
+ },
+ ]);
+ }
+
+ const cells = Array.from(new Set([startOffset.cell, endOffset.cell])).map(
+ (cellIndex) => jupyterNotebook.cells[cellIndex],
+ );
+
+ setRenderedCells(cells);
}, [issue, data]);
if (isLoading) {
return <Spinner />;
}
- if (!jupyterNotebook || !startOffset || !endPath) {
+ if (!renderedCells) {
return (
<FlagMessage className="sw-mt-2" variant="warning">
{translate('issue.preview.jupyter_notebook.error')}
);
}
- // Cells to display
- const cells = Array.from(new Set([startOffset.cell, endPath.cell])).map(
- (cellIndex) => jupyterNotebook.cells[cellIndex],
- );
-
return (
<>
<LineFinding
}
selected
/>
- {cells.map((cell, index) => (
+ {renderedCells.map((cell, index) => (
<JupyterCell key={'cell-' + index} cell={cell} />
))}
</>
{ type: 'array', index: 1 },
{ type: 'object', key: 'data' },
{ type: 'object', key: 'image/png' },
- { type: 'string', index: 23 },
+ { type: 'string', index: 24 },
]);
});
{ type: 'array', index: 1 },
{ type: 'object', key: 'source' },
{ type: 'array', index: 8 },
- { type: 'string', index: 14 },
+ { type: 'string', index: 15 },
]);
});
});
};
}
+ private getStringCursorIndex(firstQuoteIndex: number, endQuoteIndex: number): number {
+ const index = this.cursorPosition - firstQuoteIndex;
+
+ // We make it such that if the cursor is on a quote, it is considered to be within the string
+ if (index <= 0) {
+ return 0;
+ }
+
+ let count = 0;
+ let i = 0;
+ while (i < index) {
+ // Ignore escaped quotes
+ if (this.code[firstQuoteIndex + i] === '\\' && this.code[firstQuoteIndex + i + 1] === '"') {
+ i += 2;
+ } else {
+ i += 1;
+ }
+ count++;
+ }
+
+ return Math.min(count, endQuoteIndex - firstQuoteIndex - 2);
+ }
+
/**
* Parse a string value. Place the cursor at the end quote.
*/
// Cursor within string value
if (this.cursorWithin(firstQuoteIndex, endQuoteIndex)) {
if (endQuoteIndex - firstQuoteIndex > 1) {
- // We make it such that if the cursor is on a quote, it is considered to be within the string
- let index = this.cursorPosition - firstQuoteIndex - 1;
- index = Math.min(index, endQuoteIndex - firstQuoteIndex - 2);
- index = Math.max(0, index);
-
this.path.push({
type: 'string',
- index,
+ index: this.getStringCursorIndex(firstQuoteIndex, endQuoteIndex),
});
}
projects / sonarqube.git / commitdiff