Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Fix browser history bug with tutorials

Browse Source 
Summary:
History wasn't being replaced in some cases, which was
causing a bug where trying to leave a tutorial fork via the
browser's back button would navigate back to the trunk, and
trigger forking again. This effectively made it impossible to
leave a tutorial.

Also adds support for specifying custom CSS classes for
tutorial Markdown images.

Test Plan: Browser test.

Reviewers: JakubSerafin

Reviewed By: JakubSerafin

Differential Revision: https://phab.getgrist.com/D3866
This commit is contained in:
George Gevoian
2023-04-17 22:23:12 -04:00
parent 69fea132de
commit b15ae98349
4 changed files with 40 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/models/DocPageModel.ts
View File

@@ -240,9 +240,9 @@ export class DocPageModelImpl extends Disposable implements DocPageModel {
public updateUrlNoReload(
urlId: string,
urlOpenMode: OpenDocMode,
options: {removeSlug?: boolean, replaceUrl?: boolean} = {removeSlug: false, replaceUrl: true}
options: {removeSlug?: boolean, replaceUrl?: boolean} = {}
) {
const {removeSlug, replaceUrl} = options;
const {removeSlug = false, replaceUrl = true} = options;
const state = urlState().state.get();
const nextState = {
...state,

6
app/client/ui/DocTutorial.css
View File

@@ -69,6 +69,12 @@
cursor: pointer;
}
.doc-tutorial-popup-thumbnail-half-screenshot {
margin-left: auto;
margin-right: auto;
width: 50%;
}
.doc-tutorial-popup-thumbnail img {
width: 100%;
border: 1px solid var(--grist-theme-tutorials-popup-border, #D9D9D9);

14
app/client/ui/DocTutorialRenderer.ts
View File

@@ -2,15 +2,21 @@ import {marked} from 'marked';
export const renderer = new marked.Renderer();
renderer.image = (href: string, text: string) => {
return `<div class="doc-tutorial-popup-thumbnail">
<img src="${href}" title="${text ?? ''}" />
renderer.image = (href: string | null, title: string | null, _text: string) => {
let classes = 'doc-tutorial-popup-thumbnail';
const hash = href?.split('#')?.[1];
if (hash) {
const extraClass = `doc-tutorial-popup-thumbnail-${hash}`;
classes += ` ${extraClass}`;
}
return `<div class="${classes}">
<img src="${href}" title="${title ?? ''}" />
<div class="doc-tutorial-popup-thumbnail-icon-wrapper">
<div class="doc-tutorial-popup-thumbnail-icon"></div>
</div>
</div>`;
};
renderer.link = (href: string, _title: string, text: string) => {
renderer.link = (href: string | null, _title: string | null, text: string) => {
return `<a href="${href}" target="_blank">${text}</a>`;
};