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

Replace RichText editor with spectrum text area

This commit is contained in:
Andrew Kingston 2021-04-16 16:00:10 +01:00
parent 7ba5ff7b34
commit 691c9a9bd1
11 changed files with 91 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/bbui/package.json
View File

@ -62,10 +62,7 @@
"@spectrum-css/underlay": "^2.0.9",
"@spectrum-css/vars": "^3.0.1",
"dayjs": "^1.10.4",
"markdown-it": "^12.0.4",
"quill": "^1.3.7",
"svelte-flatpickr": "^2.4.0",
"svelte-portal": "^1.0.0",
"turndown": "^7.0.0"
"svelte-portal": "^1.0.0"
}
}

48
packages/bbui/src/Form/Core/TextArea.svelte Normal file
View File

@ -0,0 +1,48 @@
<script>
import "@spectrum-css/textfield/dist/index-vars.css"
import { createEventDispatcher } from "svelte"
export let value = ""
export let placeholder = null
export let disabled = false
export let error = null
export let id = null
export let updateOnChange = true
const dispatch = createEventDispatcher()
const onChange = event => {
dispatch("change", event.target.value)
}
</script>
<div
class="spectrum-Textfield spectrum-Textfield--multiline"
class:is-invalid={!!error}
class:is-disabled={disabled}>
{#if error}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
focusable="false"
aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
<textarea
placeholder={placeholder || ''}
class="spectrum-Textfield-input"
{disabled}
{id}
on:blur={onChange}
on:change={updateOnChange ? onChange : null}>{value || ''}</textarea>
</div>
<style>
.spectrum-Textfield {
width: 100%;
}
textarea {
resize: vertical;
min-height: 80px !important;
}
</style>

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

@ -3,3 +3,4 @@ export { default as CoreSelect } from "./Select.svelte"
export { default as CoreMultiselect } from "./Multiselect.svelte"
export { default as CoreCheckbox } from "./Checkbox.svelte"
export { default as CoreRadioGroup } from "./RadioGroup.svelte"
export { default as CoreTextArea } from "./TextArea.svelte"

2
packages/bbui/src/Form/RadioGroup.svelte
View File

@ -4,7 +4,7 @@
import { createEventDispatcher } from "svelte"
export let value = null
export let label = undefined
export let label = null
export let disabled = false
export let labelPosition = "above"
export let error = null

59
packages/bbui/src/Form/RichText.svelte
View File

@ -1,59 +0,0 @@
<script>
import * as Quill from "quill"
import * as MarkdownIt from "markdown-it"
import TurndownService from "turndown"
import { onMount } from "svelte"
import "quill/dist/quill.snow.css"
const convertMarkdown = new MarkdownIt()
convertMarkdown.set({
html: true,
})
const turndownService = new TurndownService()
export let value = ""
export let options = null
export let width = 400
let quill
let container
let defaultOptions = {
modules: {
toolbar: [
[{ header: [1, 2, 3, false] }],
["bold", "italic", "underline", "strike"],
],
},
placeholder: "Type something...",
theme: "snow", // or 'bubble'
}
let mergedOptions = { ...defaultOptions, ...options }
const updateContent = () => {
value = turndownService.turndown(quill.container.firstChild.innerHTML)
}
onMount(() => {
quill = new Quill(container, mergedOptions)
if (value)
quill.clipboard.dangerouslyPasteHTML(convertMarkdown.render(value + "\n"))
quill.on("text-change", updateContent)
return () => {
quill.off("text-change", updateContent)
}
})
</script>
<svelte:head>
{#if mergedOptions.theme !== 'snow'}
<link
rel="stylesheet"
href="//cdn.quilljs.com/1.3.6/quill.{mergedOptions.theme}.css" />
{/if}
</svelte:head>
<div style="width: {width}px">
<div bind:this={container} />
</div>

145
packages/bbui/src/Form/TextArea.svelte
View File

@ -1,132 +1,29 @@
<script>
import Field from "./Field.svelte"
import TextArea from "./Core/TextArea.svelte"
import { createEventDispatcher } from "svelte"
import Button from "../Button/Button.svelte"
import Label from "../Styleguide/Label.svelte"
import text_area_resize from "../Actions/autoresize_textarea.js"
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 updateOnChange = true
const dispatch = createEventDispatcher()
export let name = false
export let label = false
export let thin = false
export let extraThin = false
export let edit = false
export let disabled = false
export let placeholder
export let validator = () => {}
export let value = ""
export const getCaretPosition = () => {
return { start: textarea.selectionStart, end: textarea.selectionEnd }
}
let textarea
// This section handles the edit mode and dispatching of things to the parent when saved
let editMode = false
const save = () => {
editMode = false
dispatch("save", value)
}
const enableEdit = () => {
editMode = true
const onChange = e => {
dispatch("change", e.detail)
value = e.detail
}
</script>
<div class="container">
{#if label || edit}
<div class="label-container">
{#if label}
<Label extraSmall grey forAttr={name}>{label}</Label>
{/if}
{#if edit}
<div class="controls">
<Button small secondary disabled={editMode} on:click={enableEdit}>
Edit
</Button>
<Button small blue disabled={!editMode} on:click={save}>Save</Button>
</div>
{/if}
</div>
{/if}
<textarea
class:thin
class:extraThin
bind:value
bind:this={textarea}
on:change
disabled={disabled || (edit && !editMode)}
<Field {label} {labelPosition} {disabled} {error}>
<TextArea
{error}
{disabled}
{value}
{placeholder}
{name}
use:text_area_resize />
</div>
<style>
.container {
min-width: 0;
display: flex;
flex-direction: column;
}
.label-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--spacing-s);
}
.label-container :global(label) {
margin-bottom: 0;
}
.controls {
align-items: center;
display: grid;
grid-template-columns: auto auto;
grid-gap: 12px;
margin-left: auto;
padding-left: 12px;
}
.controls :global(button) {
min-width: 100px;
font-size: var(--font-size-s);
border-radius: var(--rounded-small);
}
textarea {
min-width: 0;
color: var(--ink);
font-size: var(--font-size-s);
font-family: var(--font-sans);
border: none;
border-radius: var(--border-radius-s);
background-color: var(--grey-2);
padding: var(--spacing-m);
margin: 0;
border: var(--border-transparent);
outline: none;
}
textarea::placeholder {
color: var(--grey-6);
}
textarea.thin {
font-size: var(--font-size-xs);
}
textarea.extraThin {
font-size: var(--font-size-xs);
padding: var(--spacing-s) var(--spacing-m);
}
textarea:focus {
border: var(--border-blue);
}
textarea:disabled {
background: var(--grey-4);
}
textarea:disabled {
background: var(--grey-4);
}
textarea:disabled::placeholder {
color: var(--grey-6);
}
</style>
{updateOnChange}
on:change={onChange} />
</Field>

2
packages/bbui/src/Modal/Modal.svelte
View File

@ -32,7 +32,7 @@
async function focusFirstInput(node) {
const inputs = node.querySelectorAll("input")
if (inputs) {
if (inputs?.length) {
await tick()
inputs[0].focus()
}

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

@ -3,7 +3,6 @@ import "./bbui.css"
// Components
export { default as Input } from "./Form/Input.svelte"
export { default as TextArea } from "./Form/TextArea.svelte"
export { default as RichText } from "./Form/RichText.svelte"
export { default as Select } from "./Form/Select.svelte"
export { default as DataList } from "./Form/DataList.svelte"
export { default as Dropzone } from "./Dropzone/Dropzone.svelte"

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

@ -5,7 +5,7 @@
Label,
DatePicker,
Toggle,
RichText,
TextArea,
} from "@budibase/bbui"
import Dropzone from "components/common/Dropzone.svelte"
import { capitalise } from "../../../helpers"
@ -40,10 +40,7 @@
<LinkedRowSelector bind:linkedRows={value} schema={meta} />
</div>
{:else if type === 'longform'}
<div>
<Label extraSmall grey>{label}</Label>
<RichText bind:value />
</div>
<TextArea {label} bind:value />
{:else}
<Input
{label}

69
packages/standard-components/src/forms/LongFormField.svelte
View File

@ -1,6 +1,5 @@
<script>
import { onMount } from "svelte"
import { RichText } from "@budibase/bbui"
import { CoreTextArea } from "@budibase/bbui"
import Field from "./Field.svelte"
export let field
@ -10,33 +9,6 @@
let fieldState
let fieldApi
// Update form value from bound value after we've mounted
let value
let mounted = false
$: mounted && fieldApi?.setValue(value)
// Get the fields initial value after initialising
onMount(() => {
value = $fieldState?.value
mounted = true
})
// Options for rich text component
const options = {
modules: {
toolbar: [
[
{
header: [1, 2, 3, false],
},
],
["bold", "italic", "underline", "strike"],
],
},
placeholder: placeholder || "Type something...",
theme: "snow",
}
</script>
<Field
@ -47,35 +19,14 @@
bind:fieldState
bind:fieldApi
defaultValue="">
{#if mounted}
<div class:disabled={$fieldState.disabled}>
<RichText bind:value {options} />
</div>
{#if fieldState}
<CoreTextArea
value={$fieldState.value}
on:change={e => fieldApi.setValue(e.detail)}
updateOnChange={false}
disabled={$fieldState.disabled}
error={$fieldState.error}
id={$fieldState.fieldId}
{placeholder} />
{/if}
</Field>
<style>
div {
background-color: white;
}
div :global(> div) {
width: auto !important;
}
div :global(.ql-snow.ql-toolbar:after, .ql-snow .ql-toolbar:after) {
display: none;
}
div :global(.ql-snow .ql-formats:after) {
display: none;
}
div :global(.ql-editor p) {
word-break: break-all;
}
div.disabled {
pointer-events: none !important;
background-color: rgb(244, 244, 244);
}
div.disabled :global(.ql-container *) {
color: var(--spectrum-alias-text-color-disabled) !important;
}
</style>

7
packages/standard-components/vite.config.js
View File

@ -12,7 +12,12 @@ export default ({ mode }) => {
},
minify: isProduction,
},
plugins: [svelte()],
plugins: [
svelte({
hot: !isProduction,
emitCss: true,
}),
],
resolve: {
dedupe: ["svelte", "svelte/internal"],
},