MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4309 from Budibase/feature/real-rich-text 

Rich text field + markdown viewer component
This commit is contained in:
Andrew Kingston 2022-02-07 15:39:42 +00:00 committed by GitHub
parent f3dcecbfec 6245d605e8
commit 171905fd13
19 changed files with 627 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/bbui/package.json
View File

@ -79,6 +79,7 @@
"@spectrum-css/underlay": "^2.0.9",
"@spectrum-css/vars": "^3.0.1",
"dayjs": "^1.10.4",
"easymde": "^2.16.1",
"svelte-flatpickr": "^3.2.3",
"svelte-portal": "^1.0.0"
},

42
packages/bbui/src/Form/Core/RichTextField.svelte Normal file
View File

@ -0,0 +1,42 @@
<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
export let id = null
export let fullScreenOffset = null
export let easyMDEOptions = null
</script>
<div class:error>
<MarkdownEditor
{value}
{placeholder}
{height}
{id}
{fullScreenOffset}
{disabled}
{easyMDEOptions}
on:change
/>
</div>
<style>
.error :global(.EasyMDEContainer .editor-toolbar) {
border-top-color: var(--spectrum-semantic-negative-color-default);
border-left-color: var(--spectrum-semantic-negative-color-default);
border-right-color: var(--spectrum-semantic-negative-color-default);
}
.error :global(.EasyMDEContainer .CodeMirror) {
border-bottom-color: var(--spectrum-semantic-negative-color-default);
border-left-color: var(--spectrum-semantic-negative-color-default);
border-right-color: var(--spectrum-semantic-negative-color-default);
}
.error :global(.EasyMDEContainer .editor-preview-side) {
border-bottom-color: var(--spectrum-semantic-negative-color-default);
border-right-color: var(--spectrum-semantic-negative-color-default);
}
</style>

16
packages/bbui/src/Form/Core/TextArea.svelte
View File

@ -22,11 +22,23 @@
dispatch("change", event.target.value)
focus = false
}
const getStyleString = (attribute, value) => {
if (!attribute || value == null) {
return ""
}
if (isNaN(value)) {
return `${attribute}:${value};`
}
return `${attribute}:${value}px;`
}
$: heightString = getStyleString("height", height)
$: minHeightString = getStyleString("min-height", minHeight)
</script>
<div
style={(height ? `height: ${height}px;` : "") +
(minHeight ? `min-height: ${minHeight}px` : "")}
style={`${heightString}${minHeightString}`}
class="spectrum-Textfield spectrum-Textfield--multiline"
class:is-invalid={!!error}
class:is-disabled={disabled}

1
packages/bbui/src/Form/Core/index.js
View File

@ -10,3 +10,4 @@ export { default as CoreSearch } from "./Search.svelte"
export { default as CoreDatePicker } from "./DatePicker.svelte"
export { default as CoreDropzone } from "./Dropzone.svelte"
export { default as CoreStepper } from "./Stepper.svelte"
export { default as CoreRichTextField } from "./RichTextField.svelte"

36
packages/bbui/src/Form/RichTextField.svelte Normal file
View File

@ -0,0 +1,36 @@
<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
export let id = null
export let fullScreenOffset = null
export let easyMDEOptions = 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}
{id}
{fullScreenOffset}
{easyMDEOptions}
on:change={onChange}
/>
</Field>

60
packages/bbui/src/Markdown/MarkdownEditor.svelte Normal file
View File

@ -0,0 +1,60 @@
<script>
import SpectrumMDE from "./SpectrumMDE.svelte"
import { createEventDispatcher } from "svelte"
export let value = null
export let height = null
export let placeholder = null
export let id = null
export let fullScreenOffset = 0
export let disabled = false
export let easyMDEOptions
const dispatch = createEventDispatcher()
let latestValue
let mde
// Ensure the value is updated if the value prop changes outside the editor's
// control
$: checkValue(value)
$: mde?.codemirror.on("change", debouncedUpdate)
const checkValue = val => {
if (mde && val !== latestValue) {
mde.value(val)
}
}
const debounce = (fn, interval) => {
let timeout
return () => {
clearTimeout(timeout)
timeout = setTimeout(fn, interval)
}
}
const update = () => {
latestValue = mde.value()
dispatch("change", latestValue)
}
// Debounce the update function to avoid spamming it constantly
const debouncedUpdate = debounce(update, 250)
</script>
{#key height}
<SpectrumMDE
bind:mde
scroll={true}
{height}
{id}
{fullScreenOffset}
{disabled}
easyMDEOptions={{
initialValue: value,
placeholder,
...easyMDEOptions,
}}
/>
{/key}

70
packages/bbui/src/Markdown/MarkdownViewer.svelte Normal file
View File

@ -0,0 +1,70 @@
<script>
import SpectrumMDE from "./SpectrumMDE.svelte"
export let value
export let height
let mde
// Keep the value up to date
$: mde && mde.value(value || "")
$: {
if (mde && !mde.isPreviewActive()) {
mde.togglePreview()
}
}
</script>
<div class="markdown-viewer" style="height:{height};">
<SpectrumMDE
bind:mde
scroll={false}
easyMDEOptions={{
initialValue: value,
toolbar: false,
}}
/>
</div>
<style>
.markdown-viewer {
overflow: auto;
}
/* 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 first and last components to fully trim the preview */
.markdown-viewer :global(.editor-preview-full > :first-child) {
margin-top: 0;
}
.markdown-viewer :global(.editor-preview-full > :last-child) {
margin-bottom: 0;
}
/* Code blocks in preview */
.markdown-viewer :global(.editor-preview-full pre) {
background: var(--spectrum-global-color-gray-200);
}
</style>

184
packages/bbui/src/Markdown/SpectrumMDE.svelte Normal file
View File

@ -0,0 +1,184 @@
<script>
import EasyMDE from "easymde"
import "easymde/dist/easymde.min.css"
import { onMount } from "svelte"
export let height = null
export let scroll = true
export let easyMDEOptions = null
export let mde = null
export let id = null
export let fullScreenOffset = null
export let disabled = false
let element
onMount(() => {
height = height || "200px"
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()
}
})
$: styleString = getStyleString(fullScreenOffset)
const getStyleString = offset => {
let string = ""
string += `--fullscreen-offset-x:${offset?.x || "0px"};`
string += `--fullscreen-offset-y:${offset?.y || "0px"};`
return string
}
</script>
<div class:disabled style={styleString}>
<textarea disabled {id} bind:this={element} />
</div>
<style>
/* Disabled styles */
.disabled :global(textarea) {
display: none;
}
.disabled :global(.CodeMirror-cursor) {
display: none;
}
.disabled :global(.EasyMDEContainer) {
pointer-events: none;
}
.disabled :global(.editor-toolbar button i) {
color: var(--spectrum-global-color-gray-400);
}
.disabled :global(.CodeMirror) {
color: var(--spectrum-global-color-gray-600);
}
/* Toolbar container */
:global(.EasyMDEContainer .editor-toolbar) {
background: var(--spectrum-global-color-gray-50);
border-top: 1px solid var(--spectrum-alias-border-color);
border-left: 1px solid var(--spectrum-alias-border-color);
border-right: 1px solid var(--spectrum-alias-border-color);
}
/* Main code mirror instance and default color */
:global(.EasyMDEContainer .CodeMirror) {
border: 1px solid var(--spectrum-alias-border-color);
background: var(--spectrum-global-color-gray-50);
color: var(--spectrum-alias-text-color);
}
/* 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(--spectrum-alias-text-color);
}
/* Text selections */
:global(.EasyMDEContainer .CodeMirror-selectedtext) {
background: var(--spectrum-global-color-gray-400) !important;
}
/* 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(--spectrum-global-color-gray-50);
}
/* Side by side preview window */
:global(.EasyMDEContainer .editor-preview) {
border: 1px solid var(--spectrum-alias-border-color);
}
/* Code blocks in editor */
:global(.EasyMDEContainer .cm-s-easymde .cm-comment) {
background: var(--spectrum-global-color-gray-100);
}
/* Code blocks in preview */
:global(.EasyMDEContainer pre) {
background: var(--spectrum-global-color-gray-100);
padding: 4px;
border-radius: 4px;
}
:global(.EasyMDEContainer code) {
color: #e83e8c;
}
:global(.EasyMDEContainer pre code) {
color: var(--spectrum-alias-text-color);
}
/* Block quotes */
:global(.EasyMDEContainer blockquote) {
border-left: 4px solid var(--spectrum-global-color-gray-400);
color: var(--spectrum-global-color-gray-700);
margin-left: 0;
padding-left: 20px;
}
/* HR's */
:global(.EasyMDEContainer hr) {
background-color: var(--spectrum-global-color-gray-300);
border: none;
height: 2px;
}
/* Tables */
:global(.EasyMDEContainer td, .EasyMDEContainer th) {
border-color: var(--spectrum-alias-border-color) !important;
}
/* Links */
:global(.EasyMDEContainer a) {
color: var(--primaryColor);
}
:global(.EasyMDEContainer a:hover) {
color: var(--primaryColorHover);
}
/* Allow full screen offset */
:global(.EasyMDEContainer .editor-toolbar.fullscreen) {
left: var(--fullscreen-offset-x);
top: var(--fullscreen-offset-y);
}
:global(.EasyMDEContainer .CodeMirror-fullscreen) {
left: var(--fullscreen-offset-x);
top: calc(50px + var(--fullscreen-offset-y));
}
:global(.EasyMDEContainer .CodeMirror-fullscreen.CodeMirror-sided) {
width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
}
:global(.EasyMDEContainer .editor-preview-side) {
left: calc(50% + (var(--fullscreen-offset-x) / 2));
top: calc(50px + var(--fullscreen-offset-y));
width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
}
</style>

3
packages/bbui/src/index.js
View File

@ -60,6 +60,9 @@ export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
export { default as Banner } from "./Banner/Banner.svelte"
export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
export { default as RichTextField } from "./Form/RichTextField.svelte"
// Renderers
export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"

52
packages/bbui/yarn.lock
View File

@ -271,6 +271,13 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.2.tgz#ea9062c3c98dfc6ba59e5df14a03025ad8969999"
integrity sha512-vzS9KqYXot4J3AEER/u618MXWAS+IoMvYMNrOoscKiLLKYQWenaueakUWulFonToPd/9vIpqtdbwxznqrK5qDw==
"@types/codemirror@^5.60.4":
version "5.60.5"
resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.5.tgz#5b989a3b4bbe657458cf372c92b6bfda6061a2b7"
integrity sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==
dependencies:
"@types/tern" "*"
"@types/estree@*":
version "0.0.47"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.47.tgz#d7a51db20f0650efec24cd04994f523d93172ed4"
@ -281,6 +288,11 @@
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
"@types/marked@^4.0.1":
version "4.0.2"
resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.2.tgz#cb2dbf10da2f41cf20bd91fb5f89b67540c282f7"
integrity sha512-auNrZ/c0w6wsM9DccwVxWHssrMDezHUAXNesdp2RQrCVCyrQbOiSq7yqdJKrUQQpw9VTm7CGYJH2A/YG7jjrjQ==
"@types/node@*":
version "14.14.41"
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.41.tgz#d0b939d94c1d7bd53d04824af45f1139b8c45615"
@ -303,6 +315,13 @@
dependencies:
"@types/node" "*"
"@types/tern@*":
version "0.23.4"
resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.4.tgz#03926eb13dbeaf3ae0d390caf706b2643a0127fb"
integrity sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==
dependencies:
"@types/estree" "*"
accepts@~1.3.7:
version "1.3.7"
resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@ -525,6 +544,18 @@ coa@^2.0.2:
chalk "^2.4.1"
q "^1.1.2"
codemirror-spell-checker@1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz#1c660f9089483ccb5113b9ba9ca19c3f4993371e"
integrity sha1-HGYPkIlIPMtRE7m6nKGcP0mTNx4=
dependencies:
typo-js "*"
codemirror@^5.63.1:
version "5.65.1"
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.1.tgz#5988a812c974c467f964bcc1a00c944e373de502"
integrity sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA==
color-convert@^1.9.0, color-convert@^1.9.1:
version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@ -861,6 +892,17 @@ dot-prop@^5.2.0:
dependencies:
is-obj "^2.0.0"
easymde@^2.16.1:
version "2.16.1"
resolved "https://registry.yarnpkg.com/easymde/-/easymde-2.16.1.tgz#f4c2380312615cb33826f1a1fecfaa4022ff551a"
integrity sha512-FihYgjRsKfhGNk89SHSqxKLC4aJ1kfybPWW6iAmtb5GnXu+tnFPSzSaGBmk1RRlCuhFSjhF0SnIMGVPjEzkr6g==
dependencies:
"@types/codemirror" "^5.60.4"
"@types/marked" "^4.0.1"
codemirror "^5.63.1"
codemirror-spell-checker "1.1.2"
marked "^4.0.10"
ee-first@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@ -1472,6 +1514,11 @@ magic-string@^0.25.7:
dependencies:
sourcemap-codec "^1.4.4"
marked@^4.0.10:
version "4.0.12"
resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.12.tgz#2262a4e6fd1afd2f13557726238b69a48b982f7d"
integrity sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ==
mdn-data@2.0.14:
version "2.0.14"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@ -2490,6 +2537,11 @@ type-is@~1.6.17, type-is@~1.6.18:
media-typer "0.3.0"
mime-types "~2.1.24"
typo-js@*:
version "1.2.1"
resolved "https://registry.yarnpkg.com/typo-js/-/typo-js-1.2.1.tgz#334a0d8c3f6c56f2f1e15fdf6c31677793cbbe9b"
integrity sha512-bTGLjbD3WqZDR3CgEFkyi9Q/SS2oM29ipXrWfDb4M74ea69QwKAECVceYpaBu0GfdnASMg9Qfl67ttB23nePHg==
unbox-primitive@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"

5
packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
View File

@ -169,6 +169,11 @@ export function makeDatasourceFormComponents(datasource) {
optionsSource: "schema",
})
}
if (fieldType === "longform") {
component.customProps({
format: "auto",
})
}
if (fieldType === "array") {
component.customProps({
placeholder: "Choose an option",

9
packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
View File

@ -4,9 +4,10 @@
Select,
DatePicker,
Toggle,
TextArea,
Multiselect,
Label,
RichTextField,
TextArea,
} from "@budibase/bbui"
import Dropzone from "components/common/Dropzone.svelte"
import { capitalise } from "helpers"
@ -43,7 +44,11 @@
{:else if type === "link"}
<LinkedRowSelector bind:linkedRows={value} schema={meta} />
{:else if type === "longform"}
<TextArea {label} bind:value />
{#if meta.useRichText}
<RichTextField {label} height="150px" bind:value />
{:else}
<TextArea {label} height="150px" bind:value />
{/if}
{:else if type === "json"}
<Label>{label}</Label>
<Editor

15
packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
View File

@ -367,7 +367,7 @@
{#if canBeSearched && !external}
<div>
<Label grey small>Search Indexes</Label>
<Label>Search Indexes</Label>
<Toggle
value={indexes[0] === field.name}
disabled={indexes[1] === field.name}
@ -394,6 +394,19 @@
label="Options (one per line)"
bind:values={field.constraints.inclusion}
/>
{:else if field.type === "longform"}
<div>
<Label
size="M"
tooltip="Rich text includes support for images, links, tables, lists and more"
>
Formatting
</Label>
<Toggle
bind:value={field.useRichText}
text="Enable rich text support (markdown)"
/>
</div>
{:else if field.type === "array"}
<ValuesList
label="Options (one per line)"

3
packages/builder/src/components/design/AppPreview/componentStructure.json
View File

@ -81,7 +81,8 @@
"backgroundimage",
"link",
"icon",
"embed"
"embed",
"markdownviewer"
]
}
]

66
packages/client/manifest.json
View File

@ -2365,11 +2365,10 @@
]
},
"longformfield": {
"name": "Rich Text",
"name": "Long Form Field",
"icon": "TextParagraph",
"styles": ["size"],
"editable": true,
"illegalChildren": ["section"],
"settings": [
{
"type": "field/longform",
@ -2392,6 +2391,27 @@
"label": "Default value",
"key": "defaultValue"
},
{
"type": "select",
"label": "Formatting",
"key": "format",
"placeholder": null,
"options": [
{
"label": "Auto",
"value": "auto"
},
{
"label": "Plain text",
"value": "plain"
},
{
"label": "Rich text (markdown)",
"value": "rich"
}
],
"defaultValue": "auto"
},
{
"type": "boolean",
"label": "Disabled",
@ -2402,35 +2422,6 @@
"type": "validation/string",
"label": "Validation",
"key": "validation"
},
{
"type": "select",
"label": "Alignment",
"key": "align",
"defaultValue": "left",
"showInBar": true,
"barStyle": "buttons",
"options": [{
"label": "Left",
"value": "left",
"barIcon": "TextAlignLeft",
"barTitle": "Align left"
}, {
"label": "Center",
"value": "center",
"barIcon": "TextAlignCenter",
"barTitle": "Align center"
}, {
"label": "Right",
"value": "right",
"barIcon": "TextAlignRight",
"barTitle": "Align right"
}, {
"label": "Justify",
"value": "justify",
"barIcon": "TextAlignJustify",
"barTitle": "Justify text"
}]
}
]
},
@ -3448,5 +3439,18 @@
"key": "validation"
}
]
},
"markdownviewer": {
"name": "Markdown Viewer",
"icon": "TaskList",
"styles": ["size"],
"editable": true,
"settings": [
{
"type": "text",
"label": "Markdown",
"key": "value"
}
]
}
}

31
packages/client/src/components/app/Layout.svelte
View File

@ -1,5 +1,6 @@
<script>
import { getContext } from "svelte"
import { getContext, setContext } from "svelte"
import { writable } from "svelte/store"
import { Heading, Icon } from "@budibase/bbui"
import { FieldTypes } from "../../constants"
import active from "svelte-spa-router/active"
@ -29,6 +30,16 @@
Small: "s",
}
// Set some layout context. This isn't used in bindings but can be used
// determine things about the current app layout.
$: mobile = $context.device.mobile
const store = writable({ headerHeight: 0 })
$: store.set({
screenXOffset: getScreenXOffset(navigation, mobile),
screenYOffset: getScreenYOffset(navigation, mobile),
})
setContext("layout", store)
// Permanently go into peek mode if we ever get the peek flag
let isPeeking = false
$: {
@ -58,13 +69,27 @@
if ($builderStore.inBuilder) return
window.location.href = "/builder/apps"
}
const getScreenXOffset = (navigation, mobile) => {
if (navigation !== "Left") {
return 0
}
return mobile ? "0px" : "250px"
}
const getScreenYOffset = (navigation, mobile) => {
if (mobile) {
return !navigation || navigation === "None" ? 0 : "61px"
} else {
return navigation === "Top" ? "137px" : "0px"
}
}
</script>
<div
class="layout layout--{typeClass}"
use:styleable={$component.styles}
class:desktop={!$context.device.mobile}
class:mobile={!!$context.device.mobile}
class:desktop={!mobile}
class:mobile={!!mobile}
>
{#if typeClass !== "none"}
<div

19
packages/client/src/components/app/MarkdownViewer.svelte Normal file
View File

@ -0,0 +1,19 @@
<script>
import { MarkdownViewer } from "@budibase/bbui"
import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte"
export let value
const component = getContext("component")
const { builderStore, styleable } = getContext("sdk")
const height = $component.styles?.normal?.height
</script>
<div use:styleable={$component.styles}>
{#if value}
<MarkdownViewer {value} {height} />
{:else if $builderStore.inBuilder}
<Placeholder />
{/if}
</div>

71
packages/client/src/components/app/forms/LongFormField.svelte
View File

@ -1,7 +1,8 @@
<script>
import { CoreTextArea } from "@budibase/bbui"
import { getContext, setContext } from "svelte"
import { writable } from "svelte/store"
import { CoreRichTextField, CoreTextArea } from "@budibase/bbui"
import Field from "./Field.svelte"
import { getContext } from "svelte"
export let field
export let label
@ -9,13 +10,40 @@
export let disabled = false
export let validation
export let defaultValue = ""
export let align
export let format = "auto"
let fieldState
let fieldApi
let fieldSchema
const context = getContext("context")
const component = getContext("component")
$: height = $component.styles?.normal?.height || "124px"
const layout = getContext("layout")
const newContext = writable($component)
setContext("component", newContext)
// Determine whether we should use a rich or plain text component.
// We treat undefined as "auto".
$: useRichText =
format === "rich" || (format !== "plain" && fieldSchema?.useRichText)
// Extract the settings height so we can pass it on to the rich text field.
// We then wipe the height style so that the field will automatically size
// itself based on the height of the rich text field.
let height
$: {
height = $component.styles?.normal?.height || "150px"
newContext.set({
...$component,
styles: {
...$component.styles,
normal: {
...$component.styles.normal,
height: undefined,
},
},
})
}
</script>
<Field
@ -27,29 +55,36 @@
type="longform"
bind:fieldState
bind:fieldApi
bind:fieldSchema
>
{#if fieldState}
<div style="--height: {height};">
{#if useRichText}
<CoreRichTextField
value={fieldState.value}
on:change={e => fieldApi.setValue(e.detail)}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}
{placeholder}
{height}
fullScreenOffset={{
x: $layout.screenXOffset,
y: $layout.screenYOffset,
}}
easyMDEOptions={{
hideIcons: $context.device.mobile ? ["side-by-side", "guide"] : [],
}}
/>
{:else}
<CoreTextArea
value={fieldState.value}
on:change={e => fieldApi.setValue(e.detail)}
disabled={fieldState.disabled}
error={fieldState.error}
id={fieldState.fieldId}
{align}
{placeholder}
minHeight={height}
/>
</div>
{/if}
{/if}
</Field>
<style>
:global(.spectrum-Form-itemField .spectrum-Textfield--multiline) {
min-height: calc(var(--height) - 24px);
}
:global(.spectrum-Form--labelsAbove
.spectrum-Form-itemField
.spectrum-Textfield--multiline) {
min-height: calc(var(--height) - 24px);
}
</style>

1
packages/client/src/components/app/index.js
View File

@ -30,6 +30,7 @@ export { default as daterangepicker } from "./DateRangePicker.svelte"
export { default as cardstat } from "./CardStat.svelte"
export { default as spectrumcard } from "./SpectrumCard.svelte"
export { default as tag } from "./Tag.svelte"
export { default as markdownviewer } from "./MarkdownViewer.svelte"
export * from "./charts"
export * from "./forms"
export * from "./table"