mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
292c894b93
Summary: Text columns can now display their values as Markdown-formatted text by changing their cell format to "Markdown". A minimal subset of the Markdown specification is currently supported. Test Plan: Browser tests. Reviewers: Spoffy, dsagal Reviewed By: Spoffy, dsagal Subscribers: dsagal, Spoffy Differential Revision: https://phab.getgrist.com/D4326
56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import { DataRowModel } from 'app/client/models/DataRowModel';
|
|
import { ViewFieldRec } from 'app/client/models/entities/ViewFieldRec';
|
|
import { constructUrl } from 'app/client/models/gristUrlState';
|
|
import { testId, theme } from 'app/client/ui2018/cssVars';
|
|
import { cssIconSpanBackground, iconSpan } from 'app/client/ui2018/icons';
|
|
import { cssHoverIn, gristLink } from 'app/client/ui2018/links';
|
|
import { NTextBox } from 'app/client/widgets/NTextBox';
|
|
import { CellValue } from 'app/common/DocActions';
|
|
import { Computed, dom, styled } from 'grainjs';
|
|
|
|
/**
|
|
* Creates a widget for displaying links. Links can entered directly or following a title.
|
|
* The last entry following a space is used as the url.
|
|
* ie 'google https://www.google.com' would apears as 'google' to the user but link to the url.
|
|
*/
|
|
export class HyperLinkTextBox extends NTextBox {
|
|
constructor(field: ViewFieldRec) {
|
|
super(field, {defaultTextColor: theme.link.toString()});
|
|
}
|
|
|
|
public buildDom(row: DataRowModel) {
|
|
const value = row.cells[this.field.colId()];
|
|
const url = Computed.create(null, (use) => constructUrl(use(value)));
|
|
return cssFieldClip(
|
|
dom.autoDispose(url),
|
|
dom.style('text-align', this.alignment),
|
|
dom.cls('text_wrapping', this.wrapping),
|
|
dom.maybe((use) => Boolean(use(value)), () =>
|
|
gristLink(url,
|
|
cssIconSpanBackground(
|
|
iconSpan("FieldLink", testId('tb-link-icon')),
|
|
dom.cls(cssHoverOnField.className),
|
|
),
|
|
testId('tb-link'),
|
|
),
|
|
),
|
|
dom.text((use) => _formatValue(use(value))),
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Formats value like `foo bar baz` by discarding `baz` and returning `foo bar`.
|
|
*/
|
|
function _formatValue(value: CellValue): string {
|
|
if (typeof value !== 'string') { return ''; }
|
|
const index = value.lastIndexOf(' ');
|
|
return index >= 0 ? value.slice(0, index) : value;
|
|
}
|
|
|
|
const cssFieldClip = styled('div.field_clip', `
|
|
color: var(--grist-actual-cell-color, ${theme.link});
|
|
`);
|
|
|
|
const cssHoverOnField = cssHoverIn(cssFieldClip.className);
|