Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

Add a markdown type for Text cells. (WIP with loading external libraries etc.)

Browse Source
This commit is contained in:
Dmitry S 2022-03-15 10:53:39 -04:00 committed by Paul Fitzpatrick
parent 3a8e7032bc
commit 5501695f29
4 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/client/widgets/MarkdownTextBox.ts Normal file
View File

@ -0,0 +1,41 @@
import {DataRowModel} from 'app/client/models/DataRowModel';
import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
import {colors} from 'app/client/ui2018/cssVars';
import {NTextBox} from 'app/client/widgets/NTextBox';
import {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 MarkdownTextBox extends NTextBox {
constructor(field: ViewFieldRec) {
super(field, {defaultTextColor: colors.lightGreen.value});
}
public buildDom(row: DataRowModel) {
const value = row.cells[this.field.colId()];
return cssMarkdownField(
dom.style('text-align', this.alignment),
dom.cls('text_wrapping', this.wrapping),
dom.prop('innerHTML', (use) =>
(window as any).DOMPurify.sanitize((window as any).marked(use(value)))
),
);
}
}
const cssMarkdownField = styled('div.field_clip', `
white-space: normal;
word-break: break-word;
line-height: 1.4;
& p:last-child {
margin-bottom: 0px;
}
& ul, & ol {
padding-left: 16px;
}
& li {
}
`);

8
app/client/widgets/UserType.js
View File

@ -73,6 +73,14 @@ var typeDefs = {
options: { options: {
alignment: 'left', alignment: 'left',
} }
},
Markdown: {
cons: 'MarkdownTextBox',
editCons: 'TextEditor',
icon: 'FieldTextbox',
options: {
alignment: 'left',
}
} }
}, },
default: 'TextBox' default: 'TextBox'

2
app/client/widgets/UserTypeImpl.js
View File

@ -10,6 +10,7 @@ const {ReferenceEditor} = require('./ReferenceEditor');
const {ReferenceList} = require('./ReferenceList'); const {ReferenceList} = require('./ReferenceList');
const {ReferenceListEditor} = require('./ReferenceListEditor'); const {ReferenceListEditor} = require('./ReferenceListEditor');
const {HyperLinkTextBox} = require('./HyperLinkTextBox'); const {HyperLinkTextBox} = require('./HyperLinkTextBox');
const {MarkdownTextBox} = require('./MarkdownTextBox');
const {ChoiceTextBox } = require('./ChoiceTextBox'); const {ChoiceTextBox } = require('./ChoiceTextBox');
const {Reference} = require('./Reference'); const {Reference} = require('./Reference');
@ -21,6 +22,7 @@ const nameToWidget = {
'TextEditor': NTextEditor, 'TextEditor': NTextEditor,
'NumericTextBox': NumericTextBox, 'NumericTextBox': NumericTextBox,
'HyperLinkTextBox': HyperLinkTextBox, 'HyperLinkTextBox': HyperLinkTextBox,
'MarkdownTextBox': MarkdownTextBox,
'HyperLinkEditor': HyperLinkEditor, 'HyperLinkEditor': HyperLinkEditor,
'Spinner': Spinner, 'Spinner': Spinner,
'CheckBox': require('./CheckBox'), 'CheckBox': require('./CheckBox'),

3
static/app.html
View File

@ -14,6 +14,9 @@
<link rel="stylesheet" href="bundle.css"> <link rel="stylesheet" href="bundle.css">
<link rel="stylesheet" href="icons/icons.css"> <link rel="stylesheet" href="icons/icons.css">
<script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/0.7.1/purify.min.js" integrity="sha512-LRjhQUIzpVuAdxLQ4+fwpFCOcJPDYshX3konwIg54iO13S9LD0b0snNajrebHw2CQnGQi5y5RJvHLnmNlOaafw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Grist</title> <title>Grist</title>
</head> </head>
<body> <body>