Deprecate heading and paragraph components and add new markdown-compatible text component

packages/bbui/src/Markdown/MarkdownViewer.svelte

@@ -1,8 +1,8 @@
 <script>
   import SpectrumMDE from "./SpectrumMDE.svelte"
 
-  export let value
-  export let height
+  export let value = undefined
+  export let height = undefined
 
   let mde
 
@@ -40,6 +40,7 @@
     border: none;
     background: transparent;
     padding: 0;
+    color: inherit;
   }
   .markdown-viewer :global(.EasyMDEContainer) {
     background: transparent;

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json

@@ -32,8 +32,7 @@
     "name": "Basic",
     "icon": "TextParagraph",
     "children": [
-      "heading",
-      "text",
+      "textv2",
       "button",
       "buttongroup",
       "tag",

packages/client/manifest.json

@@ -1048,6 +1048,7 @@
   },
   "text": {
     "name": "Paragraph",
+    "deprecated": true,
     "description": "A component for displaying paragraph text.",
     "icon": "TextParagraph",
     "illegalChildren": ["section"],
@@ -1171,6 +1172,7 @@
   },
   "heading": {
     "name": "Headline",
+    "deprecated": true,
     "icon": "TextBold",
     "description": "A component for displaying heading text",
     "illegalChildren": ["section"],
@@ -7984,5 +7986,27 @@
         }
       ]
     }
+  },
+  "textv2": {
+    "name": "Text",
+    "description": "A component for displaying text",
+    "icon": "TextParagraph",
+    "size": {
+      "width": 400,
+      "height": 24
+    },
+    "settings": [
+      {
+        "type": "text",
+        "label": "Text",
+        "key": "text"
+      },
+      {
+        "type": "color",
+        "label": "Color",
+        "key": "color",
+        "showInBar": true
+      }
+    ]
   }
 }

packages/client/src/components/app/Text.svelte

@@ -1,38 +1,17 @@
-<script>
+<script lang="ts">
   import { getContext } from "svelte"
+  import { MarkdownViewer } from "@budibase/bbui"
+
+  export let text: string = ""
+  export let color: string | undefined = undefined
 
-  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
+  const { styleable } = getContext("sdk")
 
-  export let text
-  export let color
-  export let align
-  export let bold
-  export let italic
-  export let underline
-  export let size
-
-  let node
-  let touched = false
-
-  $: $component.editing && node?.focus()
-  $: placeholder = $builderStore.inBuilder && !text && !$component.editing
-  $: componentText = getComponentText(text, $builderStore, $component)
-  $: sizeClass = `spectrum-Body--size${size || "M"}`
-  $: alignClass = `align--${align || "left"}`
-
-  // Add color styles to main styles object, otherwise the styleable helper
-  // overrides the color when it's passed as inline style.
+  // Add in certain settings to styles
   $: styles = enrichStyles($component.styles, color)
 
-  const getComponentText = (text, builderState, componentState) => {
-    if (!builderState.inBuilder || componentState.editing) {
-      return text || ""
-    }
-    return text || componentState.name || "Placeholder text"
-  }
-
-  const enrichStyles = (styles, color) => {
+  const enrichStyles = (styles: any, color: string | undefined) => {
     if (!color) {
       return styles
     }
@@ -44,62 +23,11 @@
       },
     }
   }
-
-  // Convert contenteditable HTML to text and save
-  const updateText = e => {
-    if (touched) {
-      builderStore.actions.updateProp("text", e.target.textContent)
-    }
-    touched = false
-  }
 </script>
 
-{#key $component.editing}
-  <p
-    bind:this={node}
-    contenteditable={$component.editing}
-    use:styleable={styles}
-    class:placeholder
-    class:bold
-    class:italic
-    class:underline
-    class="spectrum-Body {sizeClass} {alignClass}"
-    on:blur={$component.editing ? updateText : null}
-    on:input={() => (touched = true)}
-  >
-    {componentText}
-  </p>
-{/key}
+<div use:styleable={styles}>
+  <MarkdownViewer value={text} />
+</div>
 
 <style>
-  p {
-    display: inline-block;
-    white-space: pre-wrap;
-    margin: 0;
-  }
-  .placeholder {
-    font-style: italic;
-    color: var(--spectrum-global-color-gray-600);
-  }
-  .bold {
-    font-weight: 600;
-  }
-  .italic {
-    font-style: italic;
-  }
-  .underline {
-    text-decoration: underline;
-  }
-  .align--left {
-    text-align: left;
-  }
-  .align--center {
-    text-align: center;
-  }
-  .align--right {
-    text-align: right;
-  }
-  .align--justify {
-    text-align: justify;
-  }
 </style>

packages/client/src/components/app/deprecated/Text.svelte

@@ -0,0 +1,105 @@
+<script>
+  import { getContext } from "svelte"
+
+  const { styleable, builderStore } = getContext("sdk")
+  const component = getContext("component")
+
+  export let text
+  export let color
+  export let align
+  export let bold
+  export let italic
+  export let underline
+  export let size
+
+  let node
+  let touched = false
+
+  $: $component.editing && node?.focus()
+  $: placeholder = $builderStore.inBuilder && !text && !$component.editing
+  $: componentText = getComponentText(text, $builderStore, $component)
+  $: sizeClass = `spectrum-Body--size${size || "M"}`
+  $: alignClass = `align--${align || "left"}`
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = enrichStyles($component.styles, color)
+
+  const getComponentText = (text, builderState, componentState) => {
+    if (!builderState.inBuilder || componentState.editing) {
+      return text || ""
+    }
+    return text || componentState.name || "Placeholder text"
+  }
+
+  const enrichStyles = (styles, color) => {
+    if (!color) {
+      return styles
+    }
+    return {
+      ...styles,
+      normal: {
+        ...styles?.normal,
+        color,
+      },
+    }
+  }
+
+  // Convert contenteditable HTML to text and save
+  const updateText = e => {
+    if (touched) {
+      builderStore.actions.updateProp("text", e.target.textContent)
+    }
+    touched = false
+  }
+</script>
+
+{#key $component.editing}
+  <p
+    bind:this={node}
+    contenteditable={$component.editing}
+    use:styleable={styles}
+    class:placeholder
+    class:bold
+    class:italic
+    class:underline
+    class="spectrum-Body {sizeClass} {alignClass}"
+    on:blur={$component.editing ? updateText : null}
+    on:input={() => (touched = true)}
+  >
+    {componentText}
+  </p>
+{/key}
+
+<style>
+  p {
+    display: inline-block;
+    white-space: pre-wrap;
+    margin: 0;
+  }
+  .placeholder {
+    font-style: italic;
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .bold {
+    font-weight: 600;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration: underline;
+  }
+  .align--left {
+    text-align: left;
+  }
+  .align--center {
+    text-align: center;
+  }
+  .align--right {
+    text-align: right;
+  }
+  .align--justify {
+    text-align: justify;
+  }
+</style>

packages/client/src/components/app/index.js

@@ -20,10 +20,8 @@ export { default as screenslot } from "./ScreenSlot.svelte"
 export { default as button } from "./Button.svelte"
 export { default as buttongroup } from "./ButtonGroup.svelte"
 export { default as repeater } from "./Repeater.svelte"
-export { default as text } from "./Text.svelte"
 export { default as layout } from "./Layout.svelte"
 export { default as link } from "./Link.svelte"
-export { default as heading } from "./Heading.svelte"
 export { default as image } from "./Image.svelte"
 export { default as embed } from "./Embed.svelte"
 export { default as icon } from "./Icon.svelte"
@@ -37,6 +35,7 @@ export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte"
 export { default as sidepanel } from "./SidePanel.svelte"
 export { default as modal } from "./Modal.svelte"
 export { default as gridblock } from "./GridBlock.svelte"
+export { default as textv2 } from "./Text.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./blocks"
@@ -50,3 +49,5 @@ export { default as cardhorizontal } from "./deprecated/CardHorizontal.svelte"
 export { default as stackedlist } from "./deprecated/StackedList.svelte"
 export { default as card } from "./deprecated/Card.svelte"
 export { default as section } from "./deprecated/Section.svelte"
+export { default as text } from "./deprecated/Text.svelte"
+export { default as heading } from "./deprecated/Heading.svelte"