@budibase/bbui 3.35.3 → 3.35.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.35.3",
+  "version": "3.35.10",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -103,5 +103,5 @@
       }
     }
   },
-  "gitHead": "d5b05b266b9b7726bdcd7a9e7affb3330129805c"
+  "gitHead": "e2fa586beb21f730b22350e561d21ec1e2c5c2f0"
 }

package/src/ActionButton/ActionButton.svelte

@@ -4,6 +4,7 @@
   import Icon from "../Icon/Icon.svelte"
   import { fade } from "svelte/transition"
   import { hexToRGBA } from "../helpers"
+  import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
 
   export let quiet: boolean = false
   export let selected: boolean = false
@@ -15,10 +16,17 @@
   export let noPadding: boolean = false
   export let tooltip: string = ""
   export let accentColor: string | null = null
+  export let loading: boolean = false
 
   let showTooltip = false
 
   $: accentStyle = getAccentStyle(accentColor)
+  $: isCustomIconSource =
+    !!icon &&
+    (icon.includes("/") ||
+      icon.startsWith("http://") ||
+      icon.startsWith("https://") ||
+      icon.startsWith("data:"))
 
   const getAccentStyle = (color: string | null) => {
     if (!color) {
@@ -52,14 +60,25 @@
   {disabled}
   style={accentStyle}
 >
-  {#if icon}
-    <Icon
-      name={icon}
-      {size}
-      color={`var(--spectrum-global-color-gray-${$$slots.default ? 600 : 700})`}
-    />
+  {#if icon && !loading}
+    {#if isCustomIconSource}
+      <img
+        class="custom-icon custom-icon-{size}"
+        src={icon}
+        alt=""
+        aria-hidden="true"
+      />
+    {:else}
+      <Icon
+        name={icon}
+        {size}
+        color={`var(--spectrum-global-color-gray-${$$slots.default ? 600 : 700})`}
+      />
+    {/if}
   {/if}
-  {#if $$slots}
+  {#if loading}
+    <ProgressCircle size="S" />
+  {:else if $$slots}
     <span class="spectrum-ActionButton-label"><slot /></span>
   {/if}
   {#if tooltip && showTooltip}
@@ -143,6 +162,22 @@
   .spectrum-ActionButton-label {
     font-weight: 600;
   }
+  .custom-icon {
+    object-fit: contain;
+    display: block;
+  }
+  .custom-icon-S {
+    width: 14px;
+    height: 14px;
+  }
+  .custom-icon-M {
+    width: 16px;
+    height: 16px;
+  }
+  .custom-icon-L {
+    width: 18px;
+    height: 18px;
+  }
   .tooltip {
     position: absolute;
     pointer-events: none;

package/src/ButtonGroup/CollapsedButtonGroup.svelte

@@ -49,7 +49,11 @@
 >
   <Menu>
     {#each buttons as button}
-      <MenuItem on:click={() => handleClick(button)} disabled={button.disabled}>
+      <MenuItem
+        icon={button.icon}
+        on:click={() => handleClick(button)}
+        disabled={button.disabled}
+      >
         {button.text || "Button"}
       </MenuItem>
     {/each}

package/src/Form/Core/Signature.svelte

@@ -91,8 +91,8 @@
     signature.weight = 4
     signature.smoothing = 2
 
-    canvasWrap.style.width = `${width}px`
-    canvasWrap.style.height = `${height}px`
+    canvasWrap.style.width = "100%"
+    canvasWrap.style.maxWidth = `${width}px`
 
     const { width: wrapWidth, height: wrapHeight } =
       canvasWrap.getBoundingClientRect()
@@ -208,6 +208,7 @@
   }
   #signature-canvas {
     max-width: var(--max-sig-width);
+    width: 100%;
     max-height: var(--max-sig-height);
   }
   .signature.light img,

package/src/Form/Core/TextField.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
+<script lang="ts" generics="V extends string | number">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher, onMount, tick } from "svelte"
   import type { FullAutoFill } from "svelte/elements"
   import type { UIEvent } from "@budibase/types"
 
-  export let value: string | null = null
+  export let value: V | null = null
   export let placeholder: string | undefined = undefined
   export let type = "text"
   export let disabled = false
@@ -16,7 +16,7 @@
   export let autofocus: boolean | null = false
   export let autocomplete: FullAutoFill | boolean | null | undefined = undefined
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{ change: V | null }>()
 
   let field: any
   let focus = false

package/src/Form/Input.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
+<script lang="ts" generics="V extends string | number">
   import Field from "./Field.svelte"
   import TextField from "./Core/TextField.svelte"
   import { createEventDispatcher } from "svelte"
   import type { FullAutoFill } from "svelte/elements"
 
-  export let value: any = undefined
+  export let value: V | null | undefined = undefined
   export let label: string | undefined = undefined
   export let labelPosition: "above" | "left" = "above"
   export let placeholder: string | undefined = undefined
@@ -21,7 +21,7 @@
   export let description: string | undefined = undefined
 
   const dispatch = createEventDispatcher<{
-    change: any
+    change: V
     enterkey: KeyboardEvent
     blur: any
   }>()

package/src/Form/Select.svelte

@@ -1,4 +1,7 @@
-<script lang="ts" generics="O extends any,V">
+<script
+  lang="ts"
+  generics="O extends any, V, P extends string | boolean = string | boolean"
+>
   import Field from "./Field.svelte"
   import Select from "./Core/Select.svelte"
   import { createEventDispatcher } from "svelte"
@@ -11,7 +14,7 @@
   export let readonly: boolean = false
   export let labelPosition: LabelPosition = "above"
   export let error: string | undefined = undefined
-  export let placeholder: string | boolean = "Choose an option"
+  export let placeholder: P = "Choose an option" as P
   export let options: O[] = []
   export let getOptionLabel = (option: O, _index?: number) =>
     extractProperty(option, "label")
@@ -53,8 +56,10 @@
   export let wrapText: boolean = false
   export let description: string | undefined = undefined
 
-  const dispatch = createEventDispatcher()
-  const onChange = (e: CustomEvent<any>) => {
+  type ChangeValue = P extends false | "" ? V : V | undefined
+
+  const dispatch = createEventDispatcher<{ change: ChangeValue }>()
+  const onChange = (e: CustomEvent<ChangeValue>) => {
     value = e.detail
     dispatch("change", e.detail)
   }

package/src/Markdown/MarkdownEditor.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type EasyMDE from "easymde"
+  import { onDestroy } from "svelte"
   import SpectrumMDE from "./SpectrumMDE.svelte"
   import { createEventDispatcher } from "svelte"
 
@@ -14,26 +16,53 @@
   const dispatch = createEventDispatcher()
 
   let latestValue: string | null
-  let mde: any
+  interface EditorInstance extends EasyMDE {
+    togglePreview: () => void
+    value: (_value?: string) => string
+  }
+  let mde: EditorInstance | null = null
+  let blurBoundTo: EditorInstance | null = null
+
+  const bindBlurHandler = (editor: EditorInstance) => {
+    if (blurBoundTo === editor) {
+      return
+    }
+    if (blurBoundTo) {
+      blurBoundTo.codemirror.off("blur", update)
+    }
+    editor.codemirror.on("blur", update)
+    blurBoundTo = editor
+  }
 
   // Ensure the value is updated if the value prop changes outside the editor's
   // control
-  $: checkValue(value)
-  $: mde?.codemirror.on("blur", update)
-  $: if (readonly || disabled) {
-    mde?.togglePreview()
+  $: checkValue(mde, value)
+  $: if (mde) {
+    bindBlurHandler(mde)
+  }
+  $: if ((readonly || disabled) && mde) {
+    mde.togglePreview?.()
   }
 
-  const checkValue = (val: string | null) => {
-    if (mde && val !== latestValue) {
-      mde.value(val)
+  const checkValue = (editor: EditorInstance | null, val: string | null) => {
+    if (editor && val !== latestValue) {
+      editor.value(val ?? "")
     }
   }
 
   const update = () => {
+    if (!mde) {
+      return
+    }
     latestValue = mde.value()
     dispatch("change", latestValue)
   }
+
+  onDestroy(() => {
+    if (blurBoundTo) {
+      blurBoundTo.codemirror.off("blur", update)
+    }
+  })
 </script>
 
 {#key height}
@@ -47,8 +76,8 @@
     easyMDEOptions={{
       initialValue: value,
       placeholder,
-      toolbar: disabled || readonly ? false : undefined,
       ...easyMDEOptions,
+      toolbar: disabled || readonly ? false : easyMDEOptions?.toolbar,
     }}
   />
 {/key}

package/src/Markdown/SpectrumMDE.svelte

@@ -1,17 +1,322 @@
 <script lang="ts">
   import type EasyMDE from "easymde"
   import "easymde/dist/easymde.min.css"
-  import { onDestroy, onMount } from "svelte"
+  import { onDestroy, onMount, tick } from "svelte"
+  import ColorPicker from "../ColorPicker/ColorPicker.svelte"
 
   export let height: string | null = null
   export let scroll: boolean = true
   export let easyMDEOptions: Record<string, any> | null = null
-  export let mde: EasyMDE | null = null
+  interface EditorInstance extends EasyMDE {
+    toolbarElements?: Record<string, HTMLElement>
+  }
+  interface EditorSelectionRange {
+    anchor: { line: number; ch: number }
+    head: { line: number; ch: number }
+  }
+  type ColorMode = "text" | "highlight"
+  type ActiveColors = Record<ColorMode, string | null>
+
+  export let mde: EditorInstance | null = null
   export let id: string | null = null
   export let fullScreenOffset: { x: string; y: string } | null = null
   export let disabled: boolean = false
 
   let element: HTMLTextAreaElement | undefined = undefined
+  let colorPickerAnchor: HTMLDivElement | undefined = undefined
+  let colorPickerX = 0
+  let colorPickerY = 0
+  let colorPickerKey = 0
+  let activeMode: ColorMode = "text"
+  let selectedColors: Record<ColorMode, string> = {
+    text: "#d73f09",
+    highlight: "#fff59d",
+  }
+  let pendingSelections: EditorSelectionRange[] | null = null
+  let lastNonEmptySelections: EditorSelectionRange[] | null = null
+  let cursorBoundTo: EditorInstance | null = null
+
+  const modeConfig = {
+    text: {
+      toolbarButtonName: "text-color",
+      wrapperTag: "span",
+      stylePrefix: "color",
+      className: "fa fa-font",
+      title: "Text Color",
+    },
+    highlight: {
+      toolbarButtonName: "text-highlight",
+      wrapperTag: "mark",
+      stylePrefix: "background-color",
+      className: "fa fa-paint-brush",
+      title: "Highlight Color",
+    },
+  } as const
+
+  const cloneSelections = (selections: EditorSelectionRange[]) =>
+    selections.map(selection => ({
+      anchor: { ...selection.anchor },
+      head: { ...selection.head },
+    }))
+
+  const hasSelectedText = (editor: EditorInstance) =>
+    editor.codemirror.getSelections().some((text: string) => text.length > 0)
+
+  const getSelections = (editor: EditorInstance) =>
+    cloneSelections(
+      editor.codemirror.listSelections() as EditorSelectionRange[]
+    )
+
+  const getValidatedColor = (color: string, mode: ColorMode) => {
+    const trimmedColor = color.trim()
+    if (!trimmedColor) {
+      return null
+    }
+
+    const cssProperty = modeConfig[mode].stylePrefix
+    if (typeof CSS === "undefined" || typeof CSS.supports !== "function") {
+      return null
+    }
+    if (!CSS.supports(cssProperty, trimmedColor)) {
+      return null
+    }
+    return trimmedColor
+  }
+
+  const getColorFromTag = (tagText: string, mode: ColorMode) => {
+    const styleRegex = new RegExp(
+      `${modeConfig[mode].stylePrefix}\\s*:\\s*([^;"']+)`,
+      "i"
+    )
+    const styleMatch = tagText.match(styleRegex)
+    if (!styleMatch?.[1]) {
+      return null
+    }
+    return getValidatedColor(styleMatch[1], mode)
+  }
+
+  const getActiveColorsBeforeCursor = (
+    textBeforeCursor: string
+  ): ActiveColors => {
+    const stacks: Record<ColorMode, string[]> = {
+      text: [],
+      highlight: [],
+    }
+    const tokenRegex = /<(\/?)(span|mark)\b[^>]*>/gi
+    for (const token of textBeforeCursor.matchAll(tokenRegex)) {
+      const tokenValue = token[0]
+      const isClosing = token[1] === "/"
+      const mode: ColorMode =
+        token[2].toLowerCase() === "mark" ? "highlight" : "text"
+      if (isClosing) {
+        stacks[mode].pop()
+        continue
+      }
+      const color = getColorFromTag(tokenValue, mode)
+      if (color) {
+        stacks[mode].push(color)
+      }
+    }
+    return {
+      text: stacks.text.length ? stacks.text[stacks.text.length - 1] : null,
+      highlight: stacks.highlight.length
+        ? stacks.highlight[stacks.highlight.length - 1]
+        : null,
+    }
+  }
+
+  const getColorsAtCursor = (
+    content: string,
+    cursorIndex: number
+  ): ActiveColors => {
+    const result: ActiveColors = {
+      text: null,
+      highlight: null,
+    }
+    const openIndex = content.lastIndexOf("<", cursorIndex)
+    if (openIndex < 0) {
+      return result
+    }
+    const closeBeforeIndex = content.lastIndexOf(">", cursorIndex - 1)
+    if (closeBeforeIndex > openIndex) {
+      return result
+    }
+    const closeAfterIndex = content.indexOf(">", openIndex)
+    if (closeAfterIndex < 0) {
+      return result
+    }
+    const tagText = content.slice(openIndex, closeAfterIndex + 1)
+    if (/^<span\b/i.test(tagText)) {
+      result.text = getColorFromTag(tagText, "text")
+    }
+    if (/^<mark\b/i.test(tagText)) {
+      result.highlight = getColorFromTag(tagText, "highlight")
+    }
+    return result
+  }
+
+  const setToolbarIconColor = (
+    editor: EditorInstance,
+    mode: ColorMode,
+    color: string | null
+  ) => {
+    const button = editor.toolbarElements?.[modeConfig[mode].toolbarButtonName]
+    const icon = button?.querySelector("i") as HTMLElement | null
+    if (!icon) {
+      return
+    }
+    if (!color) {
+      icon.style.removeProperty("color")
+      return
+    }
+    icon.style.color = color
+  }
+
+  const syncToolbarIconColors = (editor: EditorInstance) => {
+    const cursor = editor.codemirror.getCursor("head")
+    const cursorIndex = editor.codemirror.indexFromPos(cursor)
+    const content = editor.codemirror.getValue()
+    const contentBeforeCursor = content.slice(0, cursorIndex)
+    const activeColors = getActiveColorsBeforeCursor(contentBeforeCursor)
+    const cursorColors = getColorsAtCursor(content, cursorIndex)
+    const textColor = cursorColors.text || activeColors.text
+    const highlightColor = cursorColors.highlight || activeColors.highlight
+    setToolbarIconColor(editor, "text", textColor)
+    setToolbarIconColor(editor, "highlight", highlightColor)
+  }
+
+  const cacheSelection = () => {
+    if (!mde || !hasSelectedText(mde)) {
+      return
+    }
+    lastNonEmptySelections = getSelections(mde)
+  }
+
+  const onCursorActivity = () => {
+    if (!mde) {
+      return
+    }
+    cacheSelection()
+    syncToolbarIconColors(mde)
+  }
+
+  const bindCursorListener = (editor: EditorInstance) => {
+    if (cursorBoundTo === editor) {
+      return
+    }
+    if (cursorBoundTo) {
+      cursorBoundTo.codemirror.off("cursorActivity", onCursorActivity)
+    }
+    editor.codemirror.on("cursorActivity", onCursorActivity)
+    cursorBoundTo = editor
+  }
+
+  const openColorPicker = async (editor: EasyMDE, mode: ColorMode) => {
+    const typedEditor = editor as EditorInstance
+    const currentSelections = getSelections(typedEditor)
+    const activeSelections = hasSelectedText(typedEditor)
+      ? currentSelections
+      : lastNonEmptySelections || currentSelections
+    pendingSelections = cloneSelections(activeSelections)
+    activeMode = mode
+    const toolbarButtonName = modeConfig[mode].toolbarButtonName
+    const toolbarButton = typedEditor.toolbarElements?.[toolbarButtonName]
+    if (toolbarButton) {
+      const rect = toolbarButton.getBoundingClientRect()
+      colorPickerX = Math.round(rect.left + rect.width / 2)
+      colorPickerY = Math.round(rect.bottom)
+    }
+    colorPickerKey += 1
+    await tick()
+    const trigger = colorPickerAnchor?.querySelector(".preview") as
+      | HTMLElement
+      | undefined
+    trigger?.click()
+  }
+
+  const applyStyledSelections = (color: string, mode: ColorMode) => {
+    if (!pendingSelections || !mde) {
+      return
+    }
+    const safeColor = getValidatedColor(color, mode)
+    if (!safeColor) {
+      return
+    }
+    mde.codemirror.focus()
+    mde.codemirror.setSelections(pendingSelections)
+    const selectedTexts = mde.codemirror.getSelections()
+    const hasText = selectedTexts?.some((text: string) => text.length > 0)
+    if (!selectedTexts?.length || !hasText) {
+      pendingSelections = null
+      return
+    }
+    const { wrapperTag, stylePrefix } = modeConfig[mode]
+    const styleAttr = `${stylePrefix}: ${safeColor};`
+    const replacements = selectedTexts.map(
+      (text: string) =>
+        `<${wrapperTag} style="${styleAttr}">${text}</${wrapperTag}>`
+    )
+    mde.codemirror.replaceSelections(replacements)
+    pendingSelections = null
+  }
+
+  const onColorChange = (event: CustomEvent<string | undefined>) => {
+    const color = event.detail?.trim()
+    if (!color) {
+      return
+    }
+    selectedColors = {
+      ...selectedColors,
+      [activeMode]: color,
+    }
+    applyStyledSelections(color, activeMode)
+    if (mde) {
+      syncToolbarIconColors(mde)
+    }
+  }
+
+  const textColorToolbarButton = {
+    name: modeConfig.text.toolbarButtonName,
+    action: (editor: EasyMDE) => openColorPicker(editor, "text"),
+    className: modeConfig.text.className,
+    title: modeConfig.text.title,
+  }
+
+  const highlightToolbarButton = {
+    name: modeConfig.highlight.toolbarButtonName,
+    action: (editor: EasyMDE) => openColorPicker(editor, "highlight"),
+    className: modeConfig.highlight.className,
+    title: modeConfig.highlight.title,
+  }
+
+  const defaultToolbar = [
+    "bold",
+    "italic",
+    "heading",
+    "|",
+    "quote",
+    "unordered-list",
+    "ordered-list",
+    "|",
+    "link",
+    "image",
+    "|",
+    textColorToolbarButton,
+    highlightToolbarButton,
+    "|",
+    "preview",
+    "side-by-side",
+    "fullscreen",
+    "|",
+    "guide",
+  ]
+
+  const getToolbar = (options: Record<string, any> | null) => {
+    if (options?.toolbar !== undefined) {
+      return options.toolbar
+    }
+    return defaultToolbar
+  }
 
   onMount(async () => {
     height = height || "200px"
@@ -24,10 +329,16 @@
       maxHeight: scroll ? height : undefined,
       minHeight: scroll ? undefined : height,
       ...easyMDEOptions,
+      toolbar: getToolbar(easyMDEOptions),
     })
+    bindCursorListener(mde)
+    syncToolbarIconColors(mde)
   })
 
   onDestroy(() => {
+    if (cursorBoundTo) {
+      cursorBoundTo.codemirror.off("cursorActivity", onCursorActivity)
+    }
     mde?.toTextArea()
   })
 
@@ -45,7 +356,30 @@
   <textarea disabled {id} bind:this={element}></textarea>
 </div>
 
+<div
+  bind:this={colorPickerAnchor}
+  class="budibase-color-picker-anchor"
+  style={`left:${colorPickerX}px;top:${colorPickerY}px;`}
+>
+  {#key colorPickerKey}
+    <ColorPicker
+      value={selectedColors[activeMode]}
+      size="S"
+      on:change={onColorChange}
+    />
+  {/key}
+</div>
+
 <style>
+  .budibase-color-picker-anchor {
+    position: fixed;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
+
   /* Disabled styles */
   .disabled :global(textarea) {
     display: none;
@@ -114,6 +448,17 @@
   :global(.EasyMDEContainer .cm-s-easymde .cm-url) {
     color: var(--spectrum-global-color-gray-500);
   }
+  /* Keep inline HTML markup readable across themes */
+  :global(.EasyMDEContainer .cm-s-easymde .cm-tag) {
+    color: var(--spectrum-alias-text-color);
+    opacity: 0.9;
+  }
+  :global(.EasyMDEContainer .cm-s-easymde .cm-attribute) {
+    color: var(--spectrum-global-color-gray-700);
+  }
+  :global(.EasyMDEContainer .cm-s-easymde .cm-string) {
+    color: var(--spectrum-global-color-gray-600);
+  }
   /* Markdown italics in the editor */
   :global(.EasyMDEContainer .cm-s-easymde .cm-em) {
     font-style: italic !important;