Add new rich text component to BBUI

packages/bbui/package.json

@@ -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"
   },

packages/bbui/src/Form/Core/RichTextField.svelte

@@ -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 />

packages/bbui/src/Form/Core/index.js

@@ -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"

packages/bbui/src/Form/RichTextField.svelte

@@ -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>

packages/bbui/src/Markdown/MarkdownEditor.svelte

@@ -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,
+  }}
+/>

packages/bbui/src/Markdown/MarkdownViewer.svelte

@@ -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>

packages/bbui/src/Markdown/SpectrumMDE.svelte

@@ -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>

packages/bbui/src/index.js

@@ -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"

packages/bbui/yarn.lock

@@ -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"