@budibase/bbui 1.0.49-alpha.11 → 1.0.49-alpha.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bbui.es.js +1 -1
- package/dist/bbui.es.js.map +1 -1
- package/package.json +3 -2
- package/src/Form/Core/RichTextField.svelte +42 -0
- package/src/Form/Core/TextArea.svelte +14 -2
- package/src/Form/Core/index.js +1 -0
- package/src/Form/RichTextField.svelte +36 -0
- package/src/Markdown/MarkdownEditor.svelte +60 -0
- package/src/Markdown/MarkdownViewer.svelte +70 -0
- package/src/Markdown/SpectrumMDE.svelte +184 -0
- package/src/index.js +3 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@budibase/bbui",
|
|
3
3
|
"description": "A UI solution used in the different Budibase projects.",
|
|
4
|
-
"version": "1.0.49-alpha.
|
|
4
|
+
"version": "1.0.49-alpha.15",
|
|
5
5
|
"license": "MPL-2.0",
|
|
6
6
|
"svelte": "src/index.js",
|
|
7
7
|
"module": "dist/bbui.es.js",
|
|
@@ -79,8 +79,9 @@
|
|
|
79
79
|
"@spectrum-css/underlay": "^2.0.9",
|
|
80
80
|
"@spectrum-css/vars": "^3.0.1",
|
|
81
81
|
"dayjs": "^1.10.4",
|
|
82
|
+
"easymde": "^2.16.1",
|
|
82
83
|
"svelte-flatpickr": "^3.2.3",
|
|
83
84
|
"svelte-portal": "^1.0.0"
|
|
84
85
|
},
|
|
85
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "7cbbf56a93cc8aae550acdbd046e6967476447e5"
|
|
86
87
|
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import MarkdownEditor from "../../Markdown/MarkdownEditor.svelte"
|
|
3
|
+
|
|
4
|
+
export let value = ""
|
|
5
|
+
export let placeholder = null
|
|
6
|
+
export let disabled = false
|
|
7
|
+
export let error = null
|
|
8
|
+
export let height = null
|
|
9
|
+
export let id = null
|
|
10
|
+
export let fullScreenOffset = null
|
|
11
|
+
export let easyMDEOptions = null
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<div class:error>
|
|
15
|
+
<MarkdownEditor
|
|
16
|
+
{value}
|
|
17
|
+
{placeholder}
|
|
18
|
+
{height}
|
|
19
|
+
{id}
|
|
20
|
+
{fullScreenOffset}
|
|
21
|
+
{disabled}
|
|
22
|
+
{easyMDEOptions}
|
|
23
|
+
on:change
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<style>
|
|
28
|
+
.error :global(.EasyMDEContainer .editor-toolbar) {
|
|
29
|
+
border-top-color: var(--spectrum-semantic-negative-color-default);
|
|
30
|
+
border-left-color: var(--spectrum-semantic-negative-color-default);
|
|
31
|
+
border-right-color: var(--spectrum-semantic-negative-color-default);
|
|
32
|
+
}
|
|
33
|
+
.error :global(.EasyMDEContainer .CodeMirror) {
|
|
34
|
+
border-bottom-color: var(--spectrum-semantic-negative-color-default);
|
|
35
|
+
border-left-color: var(--spectrum-semantic-negative-color-default);
|
|
36
|
+
border-right-color: var(--spectrum-semantic-negative-color-default);
|
|
37
|
+
}
|
|
38
|
+
.error :global(.EasyMDEContainer .editor-preview-side) {
|
|
39
|
+
border-bottom-color: var(--spectrum-semantic-negative-color-default);
|
|
40
|
+
border-right-color: var(--spectrum-semantic-negative-color-default);
|
|
41
|
+
}
|
|
42
|
+
</style>
|
|
@@ -22,11 +22,23 @@
|
|
|
22
22
|
dispatch("change", event.target.value)
|
|
23
23
|
focus = false
|
|
24
24
|
}
|
|
25
|
+
|
|
26
|
+
const getStyleString = (attribute, value) => {
|
|
27
|
+
if (!attribute || value == null) {
|
|
28
|
+
return ""
|
|
29
|
+
}
|
|
30
|
+
if (isNaN(value)) {
|
|
31
|
+
return `${attribute}:${value};`
|
|
32
|
+
}
|
|
33
|
+
return `${attribute}:${value}px;`
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
$: heightString = getStyleString("height", height)
|
|
37
|
+
$: minHeightString = getStyleString("min-height", minHeight)
|
|
25
38
|
</script>
|
|
26
39
|
|
|
27
40
|
<div
|
|
28
|
-
style={
|
|
29
|
-
(minHeight ? `min-height: ${minHeight}px` : "")}
|
|
41
|
+
style={`${heightString}${minHeightString}`}
|
|
30
42
|
class="spectrum-Textfield spectrum-Textfield--multiline"
|
|
31
43
|
class:is-invalid={!!error}
|
|
32
44
|
class:is-disabled={disabled}
|
package/src/Form/Core/index.js
CHANGED
|
@@ -10,3 +10,4 @@ export { default as CoreSearch } from "./Search.svelte"
|
|
|
10
10
|
export { default as CoreDatePicker } from "./DatePicker.svelte"
|
|
11
11
|
export { default as CoreDropzone } from "./Dropzone.svelte"
|
|
12
12
|
export { default as CoreStepper } from "./Stepper.svelte"
|
|
13
|
+
export { default as CoreRichTextField } from "./RichTextField.svelte"
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import Field from "./Field.svelte"
|
|
3
|
+
import RichTextField from "./Core/RichTextField.svelte"
|
|
4
|
+
import { createEventDispatcher } from "svelte"
|
|
5
|
+
|
|
6
|
+
export let value = null
|
|
7
|
+
export let label = null
|
|
8
|
+
export let labelPosition = "above"
|
|
9
|
+
export let placeholder = null
|
|
10
|
+
export let disabled = false
|
|
11
|
+
export let error = null
|
|
12
|
+
export let height = null
|
|
13
|
+
export let id = null
|
|
14
|
+
export let fullScreenOffset = null
|
|
15
|
+
export let easyMDEOptions = null
|
|
16
|
+
|
|
17
|
+
const dispatch = createEventDispatcher()
|
|
18
|
+
const onChange = e => {
|
|
19
|
+
value = e.detail
|
|
20
|
+
dispatch("change", e.detail)
|
|
21
|
+
}
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<Field {label} {labelPosition} {error}>
|
|
25
|
+
<RichTextField
|
|
26
|
+
{error}
|
|
27
|
+
{disabled}
|
|
28
|
+
{value}
|
|
29
|
+
{placeholder}
|
|
30
|
+
{height}
|
|
31
|
+
{id}
|
|
32
|
+
{fullScreenOffset}
|
|
33
|
+
{easyMDEOptions}
|
|
34
|
+
on:change={onChange}
|
|
35
|
+
/>
|
|
36
|
+
</Field>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import SpectrumMDE from "./SpectrumMDE.svelte"
|
|
3
|
+
import { createEventDispatcher } from "svelte"
|
|
4
|
+
|
|
5
|
+
export let value = null
|
|
6
|
+
export let height = null
|
|
7
|
+
export let placeholder = null
|
|
8
|
+
export let id = null
|
|
9
|
+
export let fullScreenOffset = 0
|
|
10
|
+
export let disabled = false
|
|
11
|
+
export let easyMDEOptions
|
|
12
|
+
|
|
13
|
+
const dispatch = createEventDispatcher()
|
|
14
|
+
|
|
15
|
+
let latestValue
|
|
16
|
+
let mde
|
|
17
|
+
|
|
18
|
+
// Ensure the value is updated if the value prop changes outside the editor's
|
|
19
|
+
// control
|
|
20
|
+
$: checkValue(value)
|
|
21
|
+
$: mde?.codemirror.on("change", debouncedUpdate)
|
|
22
|
+
|
|
23
|
+
const checkValue = val => {
|
|
24
|
+
if (mde && val !== latestValue) {
|
|
25
|
+
mde.value(val)
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const debounce = (fn, interval) => {
|
|
30
|
+
let timeout
|
|
31
|
+
return () => {
|
|
32
|
+
clearTimeout(timeout)
|
|
33
|
+
timeout = setTimeout(fn, interval)
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
const update = () => {
|
|
38
|
+
latestValue = mde.value()
|
|
39
|
+
dispatch("change", latestValue)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Debounce the update function to avoid spamming it constantly
|
|
43
|
+
const debouncedUpdate = debounce(update, 250)
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
{#key height}
|
|
47
|
+
<SpectrumMDE
|
|
48
|
+
bind:mde
|
|
49
|
+
scroll={true}
|
|
50
|
+
{height}
|
|
51
|
+
{id}
|
|
52
|
+
{fullScreenOffset}
|
|
53
|
+
{disabled}
|
|
54
|
+
easyMDEOptions={{
|
|
55
|
+
initialValue: value,
|
|
56
|
+
placeholder,
|
|
57
|
+
...easyMDEOptions,
|
|
58
|
+
}}
|
|
59
|
+
/>
|
|
60
|
+
{/key}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import SpectrumMDE from "./SpectrumMDE.svelte"
|
|
3
|
+
|
|
4
|
+
export let value
|
|
5
|
+
export let height
|
|
6
|
+
|
|
7
|
+
let mde
|
|
8
|
+
|
|
9
|
+
// Keep the value up to date
|
|
10
|
+
$: mde && mde.value(value || "")
|
|
11
|
+
$: {
|
|
12
|
+
if (mde && !mde.isPreviewActive()) {
|
|
13
|
+
mde.togglePreview()
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<div class="markdown-viewer" style="height:{height};">
|
|
19
|
+
<SpectrumMDE
|
|
20
|
+
bind:mde
|
|
21
|
+
scroll={false}
|
|
22
|
+
easyMDEOptions={{
|
|
23
|
+
initialValue: value,
|
|
24
|
+
toolbar: false,
|
|
25
|
+
}}
|
|
26
|
+
/>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<style>
|
|
30
|
+
.markdown-viewer {
|
|
31
|
+
overflow: auto;
|
|
32
|
+
}
|
|
33
|
+
/* Remove padding, borders and background colors */
|
|
34
|
+
.markdown-viewer :global(.editor-preview) {
|
|
35
|
+
padding: 0;
|
|
36
|
+
border: none;
|
|
37
|
+
background: transparent;
|
|
38
|
+
}
|
|
39
|
+
.markdown-viewer :global(.CodeMirror) {
|
|
40
|
+
border: none;
|
|
41
|
+
background: transparent;
|
|
42
|
+
padding: 0;
|
|
43
|
+
}
|
|
44
|
+
.markdown-viewer :global(.EasyMDEContainer) {
|
|
45
|
+
background: transparent;
|
|
46
|
+
}
|
|
47
|
+
/* Hide the actual code editor */
|
|
48
|
+
.markdown-viewer :global(.CodeMirror-scroll) {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
/*Hide the scrollbar*/
|
|
52
|
+
.markdown-viewer :global(.CodeMirror-vscrollbar) {
|
|
53
|
+
display: none !important;
|
|
54
|
+
}
|
|
55
|
+
/*Position relatively so we only consume whatever space we need */
|
|
56
|
+
.markdown-viewer :global(.editor-preview-full) {
|
|
57
|
+
position: relative;
|
|
58
|
+
}
|
|
59
|
+
/* Remove margin on the first and last components to fully trim the preview */
|
|
60
|
+
.markdown-viewer :global(.editor-preview-full > :first-child) {
|
|
61
|
+
margin-top: 0;
|
|
62
|
+
}
|
|
63
|
+
.markdown-viewer :global(.editor-preview-full > :last-child) {
|
|
64
|
+
margin-bottom: 0;
|
|
65
|
+
}
|
|
66
|
+
/* Code blocks in preview */
|
|
67
|
+
.markdown-viewer :global(.editor-preview-full pre) {
|
|
68
|
+
background: var(--spectrum-global-color-gray-200);
|
|
69
|
+
}
|
|
70
|
+
</style>
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import EasyMDE from "easymde"
|
|
3
|
+
import "easymde/dist/easymde.min.css"
|
|
4
|
+
import { onMount } from "svelte"
|
|
5
|
+
|
|
6
|
+
export let height = null
|
|
7
|
+
export let scroll = true
|
|
8
|
+
export let easyMDEOptions = null
|
|
9
|
+
export let mde = null
|
|
10
|
+
export let id = null
|
|
11
|
+
export let fullScreenOffset = null
|
|
12
|
+
export let disabled = false
|
|
13
|
+
|
|
14
|
+
let element
|
|
15
|
+
|
|
16
|
+
onMount(() => {
|
|
17
|
+
height = height || "200px"
|
|
18
|
+
mde = new EasyMDE({
|
|
19
|
+
element,
|
|
20
|
+
spellChecker: false,
|
|
21
|
+
status: false,
|
|
22
|
+
unorderedListStyle: "-",
|
|
23
|
+
maxHeight: scroll ? height : undefined,
|
|
24
|
+
minHeight: scroll ? undefined : height,
|
|
25
|
+
...easyMDEOptions,
|
|
26
|
+
})
|
|
27
|
+
|
|
28
|
+
// Revert the editor when we unmount
|
|
29
|
+
return () => {
|
|
30
|
+
mde.toTextArea()
|
|
31
|
+
}
|
|
32
|
+
})
|
|
33
|
+
|
|
34
|
+
$: styleString = getStyleString(fullScreenOffset)
|
|
35
|
+
|
|
36
|
+
const getStyleString = offset => {
|
|
37
|
+
let string = ""
|
|
38
|
+
string += `--fullscreen-offset-x:${offset?.x || "0px"};`
|
|
39
|
+
string += `--fullscreen-offset-y:${offset?.y || "0px"};`
|
|
40
|
+
return string
|
|
41
|
+
}
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<div class:disabled style={styleString}>
|
|
45
|
+
<textarea disabled {id} bind:this={element} />
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<style>
|
|
49
|
+
/* Disabled styles */
|
|
50
|
+
.disabled :global(textarea) {
|
|
51
|
+
display: none;
|
|
52
|
+
}
|
|
53
|
+
.disabled :global(.CodeMirror-cursor) {
|
|
54
|
+
display: none;
|
|
55
|
+
}
|
|
56
|
+
.disabled :global(.EasyMDEContainer) {
|
|
57
|
+
pointer-events: none;
|
|
58
|
+
}
|
|
59
|
+
.disabled :global(.editor-toolbar button i) {
|
|
60
|
+
color: var(--spectrum-global-color-gray-400);
|
|
61
|
+
}
|
|
62
|
+
.disabled :global(.CodeMirror) {
|
|
63
|
+
color: var(--spectrum-global-color-gray-600);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Toolbar container */
|
|
67
|
+
:global(.EasyMDEContainer .editor-toolbar) {
|
|
68
|
+
background: var(--spectrum-global-color-gray-50);
|
|
69
|
+
border-top: 1px solid var(--spectrum-alias-border-color);
|
|
70
|
+
border-left: 1px solid var(--spectrum-alias-border-color);
|
|
71
|
+
border-right: 1px solid var(--spectrum-alias-border-color);
|
|
72
|
+
}
|
|
73
|
+
/* Main code mirror instance and default color */
|
|
74
|
+
:global(.EasyMDEContainer .CodeMirror) {
|
|
75
|
+
border: 1px solid var(--spectrum-alias-border-color);
|
|
76
|
+
background: var(--spectrum-global-color-gray-50);
|
|
77
|
+
color: var(--spectrum-alias-text-color);
|
|
78
|
+
}
|
|
79
|
+
/* Toolbar button active state */
|
|
80
|
+
:global(.EasyMDEContainer .editor-toolbar button.active) {
|
|
81
|
+
background: var(--spectrum-global-color-gray-200);
|
|
82
|
+
border-color: var(--spectrum-global-color-gray-400);
|
|
83
|
+
}
|
|
84
|
+
/* Toolbar button hover state */
|
|
85
|
+
:global(.EasyMDEContainer .editor-toolbar button:hover) {
|
|
86
|
+
background: var(--spectrum-global-color-gray-200);
|
|
87
|
+
border-color: var(--spectrum-global-color-gray-400);
|
|
88
|
+
}
|
|
89
|
+
/* Toolbar button color */
|
|
90
|
+
:global(.EasyMDEContainer .editor-toolbar button i) {
|
|
91
|
+
color: var(--spectrum-global-color-gray-800);
|
|
92
|
+
}
|
|
93
|
+
/* Separator between toolbar buttons*/
|
|
94
|
+
:global(.EasyMDEContainer .editor-toolbar i.separator) {
|
|
95
|
+
border-color: var(--spectrum-global-color-gray-300);
|
|
96
|
+
}
|
|
97
|
+
/* Cursor */
|
|
98
|
+
:global(.EasyMDEContainer .CodeMirror-cursor) {
|
|
99
|
+
border-color: var(--spectrum-alias-text-color);
|
|
100
|
+
}
|
|
101
|
+
/* Text selections */
|
|
102
|
+
:global(.EasyMDEContainer .CodeMirror-selectedtext) {
|
|
103
|
+
background: var(--spectrum-global-color-gray-400) !important;
|
|
104
|
+
}
|
|
105
|
+
/* Background of lines containing selected text */
|
|
106
|
+
:global(.EasyMDEContainer .CodeMirror-selected) {
|
|
107
|
+
background: var(--spectrum-global-color-gray-400) !important;
|
|
108
|
+
}
|
|
109
|
+
/* Color of text for images and links */
|
|
110
|
+
:global(.EasyMDEContainer .cm-s-easymde .cm-link) {
|
|
111
|
+
color: var(--spectrum-global-color-gray-600);
|
|
112
|
+
}
|
|
113
|
+
/* Color of URL for images and links */
|
|
114
|
+
:global(.EasyMDEContainer .cm-s-easymde .cm-url) {
|
|
115
|
+
color: var(--spectrum-global-color-gray-500);
|
|
116
|
+
}
|
|
117
|
+
/* Full preview window */
|
|
118
|
+
:global(.EasyMDEContainer .editor-preview) {
|
|
119
|
+
background: var(--spectrum-global-color-gray-50);
|
|
120
|
+
}
|
|
121
|
+
/* Side by side preview window */
|
|
122
|
+
:global(.EasyMDEContainer .editor-preview) {
|
|
123
|
+
border: 1px solid var(--spectrum-alias-border-color);
|
|
124
|
+
}
|
|
125
|
+
/* Code blocks in editor */
|
|
126
|
+
:global(.EasyMDEContainer .cm-s-easymde .cm-comment) {
|
|
127
|
+
background: var(--spectrum-global-color-gray-100);
|
|
128
|
+
}
|
|
129
|
+
/* Code blocks in preview */
|
|
130
|
+
:global(.EasyMDEContainer pre) {
|
|
131
|
+
background: var(--spectrum-global-color-gray-100);
|
|
132
|
+
padding: 4px;
|
|
133
|
+
border-radius: 4px;
|
|
134
|
+
}
|
|
135
|
+
:global(.EasyMDEContainer code) {
|
|
136
|
+
color: #e83e8c;
|
|
137
|
+
}
|
|
138
|
+
:global(.EasyMDEContainer pre code) {
|
|
139
|
+
color: var(--spectrum-alias-text-color);
|
|
140
|
+
}
|
|
141
|
+
/* Block quotes */
|
|
142
|
+
:global(.EasyMDEContainer blockquote) {
|
|
143
|
+
border-left: 4px solid var(--spectrum-global-color-gray-400);
|
|
144
|
+
color: var(--spectrum-global-color-gray-700);
|
|
145
|
+
margin-left: 0;
|
|
146
|
+
padding-left: 20px;
|
|
147
|
+
}
|
|
148
|
+
/* HR's */
|
|
149
|
+
:global(.EasyMDEContainer hr) {
|
|
150
|
+
background-color: var(--spectrum-global-color-gray-300);
|
|
151
|
+
border: none;
|
|
152
|
+
height: 2px;
|
|
153
|
+
}
|
|
154
|
+
/* Tables */
|
|
155
|
+
:global(.EasyMDEContainer td, .EasyMDEContainer th) {
|
|
156
|
+
border-color: var(--spectrum-alias-border-color) !important;
|
|
157
|
+
}
|
|
158
|
+
/* Links */
|
|
159
|
+
:global(.EasyMDEContainer a) {
|
|
160
|
+
color: var(--primaryColor);
|
|
161
|
+
}
|
|
162
|
+
:global(.EasyMDEContainer a:hover) {
|
|
163
|
+
color: var(--primaryColorHover);
|
|
164
|
+
}
|
|
165
|
+
/* Allow full screen offset */
|
|
166
|
+
:global(.EasyMDEContainer .editor-toolbar.fullscreen) {
|
|
167
|
+
left: var(--fullscreen-offset-x);
|
|
168
|
+
top: var(--fullscreen-offset-y);
|
|
169
|
+
}
|
|
170
|
+
:global(.EasyMDEContainer .CodeMirror-fullscreen) {
|
|
171
|
+
left: var(--fullscreen-offset-x);
|
|
172
|
+
top: calc(50px + var(--fullscreen-offset-y));
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
:global(.EasyMDEContainer .CodeMirror-fullscreen.CodeMirror-sided) {
|
|
176
|
+
width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
:global(.EasyMDEContainer .editor-preview-side) {
|
|
180
|
+
left: calc(50% + (var(--fullscreen-offset-x) / 2));
|
|
181
|
+
top: calc(50px + var(--fullscreen-offset-y));
|
|
182
|
+
width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
|
|
183
|
+
}
|
|
184
|
+
</style>
|
package/src/index.js
CHANGED
|
@@ -60,6 +60,9 @@ export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
|
|
|
60
60
|
export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
|
|
61
61
|
export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
|
|
62
62
|
export { default as Banner } from "./Banner/Banner.svelte"
|
|
63
|
+
export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
|
|
64
|
+
export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
|
|
65
|
+
export { default as RichTextField } from "./Form/RichTextField.svelte"
|
|
63
66
|
|
|
64
67
|
// Renderers
|
|
65
68
|
export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
|