Mel Massadian
63be3f26fd
- reworked the internal logic to be simpler and more robust - removed the dedicated HTML editing mode markdown is a superset of HTML in this context - fixed layout of the css editor - introduces a quick edit mode: double-clicking the note's preview area now opens an inline Ace editor
251 lines
4.7 KiB
JavaScript
251 lines
4.7 KiB
JavaScript
// web/note_plus.constants.js
|
|
|
|
export const DEFAULT_CSS = `/** here you can write css**/
|
|
h1 {
|
|
color: whitesmoke;
|
|
}`
|
|
export const DEFAULT_HTML = `<p style='color:red;font-family:monospace'>
|
|
Note+
|
|
</p>`
|
|
export const DEFAULT_MD = '# 📝 Note+'
|
|
export const DEFAULT_MODE = 'markdown'
|
|
export const DEFAULT_THEME = 'one_dark'
|
|
|
|
export const DEMO_CONTENT = `
|
|
# @mtb/svelte-markdown.
|
|
## This is a subheader
|
|
|
|
[](https://github.com/melMass/comfy_mtb/actions/workflows/test_embedded.yml)
|
|
|
|
|
|
<details>
|
|
<summary>More details about the inception of the project</summary>
|
|
|
|
\`\`\`js
|
|
class YesMan{
|
|
constructor(){
|
|
this.started = false
|
|
}
|
|
}
|
|
\`\`\`
|
|
</details>
|
|
|
|
This is a paragraph. If it goes over the maximum width it will not automatically wrap unless it reaches the max-w of \`prose\` check [styles](/styles) for more info.
|
|
|
|
This component is useful for building some tools on top. Or even just a static system using svelte at its core. My personal blog is fully powered by **@mtb/svelte-markdown**
|
|
|
|
| And this is | A table |
|
|
|-------------|---------|
|
|
| With two | columns |
|
|
|
|
We also support github callout:
|
|
|
|
|
|
> [!NOTE]
|
|
> Highlights information that users should take into account, even when skimming.
|
|
> [!TIP]
|
|
> Optional information to help a user be more successful.
|
|
|
|
|
|
> [!IMPORTANT]
|
|
> Crucial information necessary for users to succeed.
|
|
|
|
> [!WARNING]
|
|
> Critical content demanding immediate user attention due to potential risks.
|
|
|
|
> [!CAUTION]
|
|
> Negative potential consequences of an action.
|
|
`
|
|
|
|
export const THEMES = [
|
|
'ambiance',
|
|
'chaos',
|
|
'chrome',
|
|
'cloud9_day',
|
|
'cloud9_night',
|
|
'cloud9_night_low_color',
|
|
'cloud_editor',
|
|
'cloud_editor_dark',
|
|
'clouds',
|
|
'clouds_midnight',
|
|
'cobalt',
|
|
'crimson_editor',
|
|
'dawn',
|
|
'dracula',
|
|
'dreamweaver',
|
|
'eclipse',
|
|
'github',
|
|
'github_dark',
|
|
'gob',
|
|
'gruvbox',
|
|
'gruvbox_dark_hard',
|
|
'gruvbox_light_hard',
|
|
'idle_fingers',
|
|
'iplastic',
|
|
'katzenmilch',
|
|
'kr_theme',
|
|
'kuroir',
|
|
'merbivore',
|
|
'merbivore_soft',
|
|
'mono_industrial',
|
|
'monokai',
|
|
'nord_dark',
|
|
'one_dark',
|
|
'pastel_on_dark',
|
|
'solarized_dark',
|
|
'solarized_light',
|
|
'sqlserver',
|
|
'terminal',
|
|
'textmate',
|
|
'tomorrow',
|
|
'tomorrow_night',
|
|
'tomorrow_night_blue',
|
|
'tomorrow_night_bright',
|
|
'tomorrow_night_eighties',
|
|
'twilight',
|
|
'vibrant_ink',
|
|
'vscode',
|
|
]
|
|
|
|
export const CSS_RESET = `
|
|
* {
|
|
font-family: monospace;
|
|
line-height: 1.25em;
|
|
}
|
|
.shiki{
|
|
padding: 1em;
|
|
width: 100%;
|
|
}
|
|
.markdown-callout-title {
|
|
.octicon{
|
|
fill:white;
|
|
}
|
|
/* background: var(--current-color); */
|
|
color: var(--current-color);
|
|
font-weight: bold;
|
|
/* border-start-end-radius: var(--radius); */
|
|
/* border-start-start-radius: var(--radius); */
|
|
padding: 0.5em;
|
|
padding-inline-start: 1em;
|
|
}
|
|
.markdown-callout-content {
|
|
padding: 1em;
|
|
}
|
|
.markdown-callout {
|
|
--radius: 8px;
|
|
--current-color: purple;
|
|
/* border-start-end-radius: var(--radius); */
|
|
/* border-start-start-radius: var(--radius); */
|
|
border-left: 3px solid var(--current-color);
|
|
margin-bottom: 1em;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.markdown-callout-tip {
|
|
--text-color: whitesmoke;
|
|
--current-color: #50e3c2;
|
|
}
|
|
|
|
.markdown-callout-note {
|
|
--text-color: whitesmoke;
|
|
--current-color: #0070f3;
|
|
}
|
|
.markdown-callout-important {
|
|
--text-color: whitesmoke;
|
|
--current-color: #7928ca;
|
|
}
|
|
.markdown-callout-warning {
|
|
--current-color: #f5a623;
|
|
}
|
|
.markdown-callout-caution {
|
|
--current-color: #e60000;
|
|
}
|
|
|
|
|
|
.note-plus-preview {
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items: flex-start;
|
|
width:95%;
|
|
/*margin-left: 20px;*/
|
|
/*margin-top:20px;*/
|
|
|
|
/*background-color: rgba(255,0,0,0.5)!important;*/
|
|
}
|
|
|
|
/* allowed to be selected*/
|
|
h1, h2, h3, h4, h5, h6,a, p, ul, ol, dl, blockquote,details,summary {
|
|
pointer-events:auto;
|
|
user-select:text;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
display:inline-block;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
p, ul, ol, dl, blockquote {
|
|
margin: 0.3em;
|
|
padding: 0;
|
|
}
|
|
|
|
ul, ol {
|
|
padding-left: 1em;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
pointer-events: all;
|
|
color: cyan;
|
|
}
|
|
|
|
img {
|
|
padding: 1em 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
iframe {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border:none;
|
|
pointer-events:all;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 4px solid #ccc;
|
|
padding-left: 1em;
|
|
margin-left: 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
pre, code {
|
|
font-family: monospace;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
border-bottom: 1px solid #000;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
th, td {
|
|
border-left: 1px solid #000;
|
|
border-right: 1px solid #000;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
border: 1px solid #000;
|
|
background-color: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
margin-right: 10px;
|
|
}
|
|
`
|