forked from tsai/budibase
Andrew Kingston
5 years ago
9 changed files with 290 additions and 0 deletions
@ -0,0 +1,11 @@ |
|||
<script> |
|||
import MarkdownEditor from "../../Markdown/MarkdownEditor.svelte" |
|||
|
|||
export let value = "" |
|||
export let placeholder = null |
|||
export let disabled = false |
|||
export let error = null |
|||
export let height = null |
|||
</script> |
|||
|
|||
<MarkdownEditor {value} {placeholder} {height} on:change /> |
|||
@ -0,0 +1,30 @@ |
|||
<script> |
|||
import Field from "./Field.svelte" |
|||
import RichTextField from "./Core/RichTextField.svelte" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
export let value = null |
|||
export let label = null |
|||
export let labelPosition = "above" |
|||
export let placeholder = null |
|||
export let disabled = false |
|||
export let error = null |
|||
export let height = null |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
const onChange = e => { |
|||
value = e.detail |
|||
dispatch("change", e.detail) |
|||
} |
|||
</script> |
|||
|
|||
<Field {label} {labelPosition} {error}> |
|||
<RichTextField |
|||
{error} |
|||
{disabled} |
|||
{value} |
|||
{placeholder} |
|||
{height} |
|||
on:change={onChange} |
|||
/> |
|||
</Field> |
|||
@ -0,0 +1,38 @@ |
|||
<script> |
|||
import SpectrumMDE from "./SpectrumMDE.svelte" |
|||
import { createEventDispatcher, onMount } from "svelte" |
|||
|
|||
export let value |
|||
export let height = "300px" |
|||
export let placeholder |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
let latestValue |
|||
let mde |
|||
|
|||
$: checkValue(value) |
|||
|
|||
const checkValue = val => { |
|||
if (mde && val !== latestValue) { |
|||
mde.value(val) |
|||
} |
|||
} |
|||
|
|||
onMount(() => { |
|||
mde.codemirror.on("change", () => { |
|||
latestValue = mde.value() |
|||
dispatch("change", latestValue) |
|||
}) |
|||
}) |
|||
</script> |
|||
|
|||
<SpectrumMDE |
|||
bind:mde |
|||
scroll={true} |
|||
{height} |
|||
easyMDEOptions={{ |
|||
initialValue: value, |
|||
placeholder, |
|||
}} |
|||
/> |
|||
@ -0,0 +1,60 @@ |
|||
<script> |
|||
import SpectrumMDE from "./SpectrumMDE.svelte" |
|||
import { onMount } from "svelte" |
|||
|
|||
export let value |
|||
|
|||
let mde |
|||
|
|||
// Keep the value up to date |
|||
$: mde && mde.value(value || "") |
|||
|
|||
onMount(() => { |
|||
// Turn on preview mode |
|||
mde.togglePreview() |
|||
}) |
|||
</script> |
|||
|
|||
<div class="markdown-viewer"> |
|||
<SpectrumMDE |
|||
bind:mde |
|||
scroll={false} |
|||
easyMDEOptions={{ |
|||
initialValue: value, |
|||
toolbar: false, |
|||
}} |
|||
/> |
|||
</div> |
|||
|
|||
<style> |
|||
/* Remove padding, borders and background colors */ |
|||
.markdown-viewer :global(.editor-preview) { |
|||
padding: 0; |
|||
border: none; |
|||
background: transparent; |
|||
} |
|||
.markdown-viewer :global(.CodeMirror) { |
|||
border: none; |
|||
background: transparent; |
|||
padding: 0; |
|||
} |
|||
.markdown-viewer :global(.EasyMDEContainer) { |
|||
background: transparent; |
|||
} |
|||
/* Hide the actual code editor */ |
|||
.markdown-viewer :global(.CodeMirror-scroll) { |
|||
display: none; |
|||
} |
|||
/*Hide the scrollbar*/ |
|||
.markdown-viewer :global(.CodeMirror-vscrollbar) { |
|||
display: none !important; |
|||
} |
|||
/*Position relatively so we only consume whatever space we need */ |
|||
.markdown-viewer :global(.editor-preview-full) { |
|||
position: relative; |
|||
} |
|||
/* Remove margin on the final component to fully trim the preview */ |
|||
.markdown-viewer :global(.editor-preview-full > :last-child) { |
|||
margin-bottom: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,94 @@ |
|||
<script> |
|||
import EasyMDE from "easymde" |
|||
import "easymde/dist/easymde.min.css" |
|||
import { onMount } from "svelte" |
|||
|
|||
export let height = "300px" |
|||
export let scroll = false |
|||
export let easyMDEOptions = null |
|||
export let mde |
|||
|
|||
let element |
|||
|
|||
onMount(() => { |
|||
height = height || "300px" |
|||
mde = new EasyMDE({ |
|||
element, |
|||
spellChecker: false, |
|||
status: false, |
|||
unorderedListStyle: "-", |
|||
maxHeight: scroll ? height : undefined, |
|||
minHeight: scroll ? undefined : height, |
|||
...easyMDEOptions, |
|||
}) |
|||
|
|||
// Revert the editor when we unmount |
|||
return () => { |
|||
mde.toTextArea() |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<textarea bind:this={element} /> |
|||
|
|||
<style> |
|||
/* Toolbar container */ |
|||
:global(.EasyMDEContainer .editor-toolbar) { |
|||
background: var(--background); |
|||
border-top: var(--border-light); |
|||
border-left: var(--border-light); |
|||
border-right: var(--border-light); |
|||
} |
|||
/* Main code mirror instance and default color */ |
|||
:global(.EasyMDEContainer .CodeMirror) { |
|||
border: var(--border-light); |
|||
background: var(--background); |
|||
color: var(--ink); |
|||
} |
|||
/* Toolbar button active state */ |
|||
:global(.EasyMDEContainer .editor-toolbar button.active) { |
|||
background: var(--spectrum-global-color-gray-200); |
|||
border-color: var(--spectrum-global-color-gray-400); |
|||
} |
|||
/* Toolbar button hover state */ |
|||
:global(.EasyMDEContainer .editor-toolbar button:hover) { |
|||
background: var(--spectrum-global-color-gray-200); |
|||
border-color: var(--spectrum-global-color-gray-400); |
|||
} |
|||
/* Toolbar button color */ |
|||
:global(.EasyMDEContainer .editor-toolbar button i) { |
|||
color: var(--spectrum-global-color-gray-800); |
|||
} |
|||
/* Separator between toolbar buttons*/ |
|||
:global(.EasyMDEContainer .editor-toolbar i.separator) { |
|||
border-color: var(--spectrum-global-color-gray-300); |
|||
} |
|||
/* Cursor */ |
|||
:global(.EasyMDEContainer .CodeMirror-cursor) { |
|||
border-color: var(--ink); |
|||
} |
|||
/* Text selections */ |
|||
:global(.EasyMDEContainer .CodeMirror-selectedtext) { |
|||
background: var(--spectrum-global-color-gray-400); |
|||
} |
|||
/* Background of lines containing selected text */ |
|||
:global(.EasyMDEContainer .CodeMirror-selected) { |
|||
background: var(--spectrum-global-color-gray-400) !important; |
|||
} |
|||
/* Color of text for images and links */ |
|||
:global(.EasyMDEContainer .cm-s-easymde .cm-link) { |
|||
color: var(--spectrum-global-color-gray-600); |
|||
} |
|||
/* Color of URL for images and links */ |
|||
:global(.EasyMDEContainer .cm-s-easymde .cm-url) { |
|||
color: var(--spectrum-global-color-gray-500); |
|||
} |
|||
/* Full preview window */ |
|||
:global(.EasyMDEContainer .editor-preview) { |
|||
background: var(--background); |
|||
} |
|||
/* Side by side preview window */ |
|||
:global(.EasyMDEContainer .editor-preview) { |
|||
border: var(--border-light); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue