@mwater/visualization 5.0.0

package/src/richtext/ItemsHtmlConverter.ts

@@ -0,0 +1,246 @@
+import _ from "lodash"
+
+export type HtmlItem = string | HtmlItemBase
+
+export interface HtmlItemBase {
+  type: string
+  items?: HtmlItem[]
+}
+
+export interface HtmlItemElement extends HtmlItemBase {
+  type: "element"
+  tag: string
+  items?: HtmlItem[]
+  style?: any
+  href?: string
+  target?: string
+}
+
+/** Converts items (JSON contents of rich text) to HTML and back to allow editing
+ * Items are array of:
+ *  string (html text)
+ *  { type: "element", tag: "h1", items: [nested items] }
+ *  elements can contain style (object), href, target
+ */
+export default class ItemsHtmlConverter {
+  static isBlank = (items: HtmlItem[] | undefined): boolean => {
+    if (!items) {
+      return true
+    }
+
+    return _.all(items, (item) => {
+      if (_.isString(item)) {
+        return item.length === 0
+      }
+      if (_.isObject(item) && item.type === "element") {
+        return ItemsHtmlConverter.isBlank(item.items)
+      }
+      return false
+    })
+  }
+
+  namedStrings: { [key: string]: string } | undefined
+
+  // namedStrings: Optional lookup of string name to value. Used for {{branding}} and other replacement strings
+  constructor(namedStrings?: { [key: string]: string }) {
+    this.namedStrings = namedStrings
+  }
+
+  // Converts list of items to html
+  convertItemsToHtml(items: any) {
+    let html = ""
+
+    for (let item of items || []) {
+      if (_.isString(item)) {
+        // Replace named strings
+        let itemStr = item
+        itemStr = itemStr.replace(/\{\{.+?\}\}/g, (match) => {
+          const name = match.substr(2, match.length - 4)
+          if (this.namedStrings && this.namedStrings[name] != null) {
+            return this.namedStrings[name]
+          } else {
+            return match
+          }
+        })
+
+        // Escape HTML
+        html += _.escape(itemStr)
+      } else if (item.type === "element") {
+        if (!allowedTags[item.tag]) {
+          // Ignore and do contents
+          html += this.convertItemsToHtml(item.items)
+          continue
+        }
+
+        let attrs = ""
+        // Add style
+        if (item.style) {
+          attrs += ' style="'
+          let first = true
+          for (let key in item.style) {
+            const value = item.style[key]
+            if (!allowedStyles[key]) {
+              continue
+            }
+
+            if (!first) {
+              attrs += " "
+            }
+            attrs += _.escape(key) + ": " + _.escape(value) + ";"
+            first = false
+          }
+
+          attrs += '"'
+        }
+
+        // Add href
+        if (item.href) {
+          attrs += ' href="' + item.href + '"'
+        }
+
+        // Add target
+        if (item.target) {
+          attrs += ' target="' + _.escape(item.target) + '"'
+        }
+
+        // Special case for self-closing tags
+        if (["br"].includes(item.tag)) {
+          html += `<${item.tag}${attrs}>`
+        } else {
+          html += `<${item.tag}${attrs}>` + this.convertItemsToHtml(item.items) + `</${item.tag}>`
+        }
+      } else {
+        html += this.convertSpecialItemToHtml(item)
+      }
+    }
+
+    // If empty, put placeholder
+    if (html.length === 0) {
+      html = "\u2060"
+    }
+
+    // console.log "createHtml: #{html}"
+    return html
+  }
+
+  // Converts an item that is not an element to html. Override in subclass.
+  // To be reversible, should contain data-embed which contains JSON of item
+  convertSpecialItemToHtml(item: HtmlItemBase) {
+    // To be implemented by subclasses
+    return ""
+  }
+
+  // Converts an HTML DOM element to items
+  convertElemToItems(elem: HTMLElement): HtmlItem[] {
+    // console.log elem.outerHTML
+
+    // Walk DOM tree, adding strings and expressions
+    let items = []
+
+    for (let node of elem.childNodes) {
+      if (node.nodeType === 1) {
+        // Element
+        // Handle embeds
+        var style
+        if ((node as HTMLElement).dataset?.embed) {
+          items.push(JSON.parse((node as HTMLElement).dataset!.embed!))
+          continue
+        }
+
+        let tag = (node as HTMLElement).tagName.toLowerCase()
+        // Strip namespace
+        if (tag.match(/:/)) {
+          tag = tag.split(":")[1]
+        }
+
+        // Whitelist tags
+        if (!allowedTags[tag]) {
+          // Just add contents
+          items = items.concat(this.convertElemToItems((node as HTMLElement)))
+          continue
+        }
+
+        const item: HtmlItemElement = { type: "element", tag, items: this.convertElemToItems((node as HTMLElement)) }
+
+        // Add style
+        if ((node as HTMLElement).style != null) {
+          for (style of (node as HTMLElement).style) {
+            if (!allowedStyles[style]) {
+              continue
+            }
+
+            item.style = item.style || {}
+            item.style[style] = (node as HTMLElement).style[style]
+          }
+        }
+
+        // Convert align (Firefox)
+        if ((node as HTMLDivElement).align) {
+          item.style = item.style || {}
+          item.style["text-align"] = (node as HTMLDivElement).align
+        }
+
+        // Add href and target
+        if ((node as HTMLLinkElement).href) {
+          // There is a quirk of the href property that it includes the complete url, even if
+          // it is just an anchor. Use outerHTML to bypass the problem
+          const hrefMatches = (node as HTMLElement).outerHTML.match('href="(.*?)"')
+          const href = hrefMatches?.[1]
+          if (href) {
+            item.href = href
+          }
+        }
+        if ((node as HTMLLinkElement).target) {
+          item.target = (node as HTMLLinkElement).target
+        }
+
+        items.push(item)
+
+        // Handle text
+      } else if (node.nodeType === 3) {
+        let text = node.nodeValue!
+
+        // Strip word joiner used to allow editing at end of string
+        text = text.replace(/\u2060/g, "")
+        if (text.length > 0) {
+          items.push(text)
+        }
+      }
+    }
+
+    // console.log JSON.stringify(items, null, 2)
+
+    return items
+  }
+}
+
+// Whitelist allowed tags and styles
+var allowedTags = {
+  div: 1,
+  p: 1,
+  ul: 1,
+  ol: 1,
+  li: 1,
+  span: 1,
+  b: 1,
+  u: 1,
+  em: 1,
+  i: 1,
+  br: 1,
+  h1: 1,
+  h2: 1,
+  h3: 1,
+  h4: 1,
+  h5: 1,
+  a: 1,
+  strong: 1,
+  font: 1
+}
+var allowedStyles = {
+  "text-align": 1,
+  "font-weight": 1,
+  "font-style": 1,
+  "text-decoration": 1,
+  color: 1,
+  "font-size": 1
+}

package/src/richtext/README.md

@@ -0,0 +1,3 @@
+# Rich text editor
+
+Rich text stored as pseudo-html with embeddable expressions as an option

package/src/richtext/RichTextComponent.tsx

@@ -0,0 +1,390 @@
+import React, { ReactNode } from "react"
+const R = React.createElement
+import _ from "lodash"
+import { ContentEditableComponent } from "@mwater/expressions-ui"
+import ItemsHtmlConverter, { HtmlItem } from "./ItemsHtmlConverter"
+import FloatAffixed from "react-float-affixed"
+import FontColorPaletteItem from "./FontColorPaletteItem"
+import FontSizePaletteItem from "./FontSizePaletteItem"
+
+export interface RichTextComponentProps {
+  // Items (content) to display. See ItemsHtmlConverter
+  items?: HtmlItem[]
+  onItemsChange: (items: HtmlItem[]) => void
+
+  onItemClick?: (item: HtmlItem) => void
+
+  /** Optional className of editor wrapper */
+  className?: string
+
+  /** Optional style of editor wrapper */
+  style?: any
+
+  /** Converter to use for editing */
+  itemsHtmlConverter?: ItemsHtmlConverter
+
+  /** True (default) to include heading h1, h2 in palette */
+  includeHeadings?: boolean
+
+  /** Extra buttons to put in palette */
+  extraPaletteButtons?: ReactNode
+}
+
+export default class RichTextComponent extends React.Component<RichTextComponentProps, { focused: boolean }> {
+  static defaultProps = {
+    includeHeadings: true,
+    items: [],
+    itemsHtmlConverter: new ItemsHtmlConverter(),
+  }
+  entireComponent: HTMLElement | null
+  contentEditable: ContentEditableComponent | null
+  paletteComponent: HTMLElement | null
+
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      focused: false,
+    }
+  }
+
+  handleClick = (ev: any) => {
+    // If click is in component or in palette component, ignore, otherwise remove focus
+    if (
+      !this.entireComponent!.contains(ev.target) &&
+      (!this.paletteComponent || !this.paletteComponent.contains(ev.target))
+    ) {
+      return this.setState({ focused: false })
+    }
+  }
+
+  // Paste HTML in
+  pasteHTML(html: any) {
+    this.contentEditable!.pasteHTML(html)
+  }
+
+  focus() {
+    this.contentEditable!.focus()
+  }
+
+  handleInsertExpr = (item: any) => {
+    const html = '<div data-embed="' + _.escape(JSON.stringify(item)) + '"></div>'
+
+    this.contentEditable!.pasteHTML(html)
+  }
+
+  handleSetFontSize = (size: any) => {
+    // Requires a selection
+    let html = this.contentEditable!.getSelectedHTML()
+    if (!html) {
+      return alert("Please select text first to set size")
+    }
+
+    // Clear existing font-size styles. This is clearly a hack, but font sizes are absolute in execCommand which
+    // doesn't mix with our various dashboard stylings, so we need to use percentages
+    html = html.replace(/font-size:\s*\d+%;?/g, "")
+
+    return this.contentEditable!.pasteHTML(`<span style=\"font-size:${size}\">` + html + "</span>")
+  }
+
+  handleSetFontColor = (color: any) => {
+    // Requires a selection
+    const html = this.contentEditable!.getSelectedHTML()
+    if (!html) {
+      return alert("Please select text first to set color")
+    }
+
+    this.handleCommand("foreColor", color)
+  }
+
+  handleChange = (elem: any) => {
+    const items = this.props.itemsHtmlConverter!.convertElemToItems(elem)
+
+    // Check if changed
+    if (!_.isEqual(items, this.props.items)) {
+      this.props.onItemsChange!(items)
+    } else {
+      // Re-render as HTML may have been mangled and needs a round-trip
+      this.forceUpdate()
+    }
+  }
+
+  handleFocus = () => {
+    return this.setState({ focused: true })
+  }
+  handleBlur = () => {
+    return this.setState({ focused: false })
+  }
+
+  // Perform a command such as bold, underline, etc.
+  handleCommand = (command: any, param: any, ev?: any) => {
+    // Don't lose focus
+    ev?.preventDefault()
+
+    // Use CSS for some commands
+    if (["foreColor"].includes(command)) {
+      document.execCommand("styleWithCSS", null as any, true as any)
+      document.execCommand(command, false, param)
+      return document.execCommand("styleWithCSS", null as any, false as any)
+    } else {
+      return document.execCommand(command, false, param)
+    }
+  }
+
+  handleCreateLink = (ev: any) => {
+    // Don't lose focus
+    ev.preventDefault()
+
+    // Ask for url
+    const url = window.prompt("Enter URL to link to")
+    if (url) {
+      document.execCommand("createLink", false, url)
+    }
+  }
+
+  handleEditorClick = (ev: any) => {
+    // Be sure focused
+    if (!this.state.focused) {
+      this.setState({ focused: true })
+    }
+
+    if (ev.target.dataset?.embed || ev.target.parentElement?.dataset?.embed) {
+      const item = JSON.parse(ev.target.dataset?.embed || ev.target.parentElement?.dataset?.embed)
+      if (item != null) {
+        return this.props.onItemClick?.(item)
+      }
+    }
+  }
+
+  createHtml() {
+    return this.props.itemsHtmlConverter!.convertItemsToHtml(this.props.items)
+  }
+
+  renderPalette() {
+    // Determine current z-index to be able to float above it
+    let zIndex: number | null = null
+    let elem: Element | null = this.entireComponent
+    while (elem != null) {
+      const elemZIndex = window.getComputedStyle(elem).zIndex
+      if (!isNaN(parseInt(elemZIndex))) {
+        zIndex = parseInt(elemZIndex)
+        break
+      }
+      elem = elem.parentElement
+    }
+
+    return R(FloatAffixed, {
+      style: { zIndex },
+      edges: "over,under,left,right",
+      align: "center",
+      render: this.renderPaletteContent,
+    })
+  }
+
+  renderPaletteContent = (schemeName: any, { edges }: any) => {
+    return R(
+      "div",
+      {
+        key: "palette",
+        className: "mwater-visualization-text-palette",
+        ref: (c: HTMLElement | null) => {
+          this.paletteComponent = c
+        },
+      },
+      R(
+        "div",
+        {
+          key: "bold",
+          className: "mwater-visualization-text-palette-item",
+          onMouseDown: this.handleCommand.bind(null, "bold", null),
+        },
+        R("b", null, "B")
+      ),
+      R(
+        "div",
+        {
+          key: "italic",
+          className: "mwater-visualization-text-palette-item",
+          onMouseDown: this.handleCommand.bind(null, "italic", null),
+        },
+        R("i", null, "I")
+      ),
+      R(
+        "div",
+        {
+          key: "underline",
+          className: "mwater-visualization-text-palette-item",
+          onMouseDown: this.handleCommand.bind(null, "underline", null),
+        },
+        R("span", { style: { textDecoration: "underline" } }, "U")
+      ),
+      R(FontColorPaletteItem, {
+        key: "foreColor",
+        onSetColor: this.handleSetFontColor,
+        position: schemeName === "over" ? "under" : "over",
+      }),
+      R(FontSizePaletteItem, {
+        key: "fontSize",
+        onSetSize: this.handleSetFontSize,
+        position: schemeName === "over" ? "under" : "over",
+      }),
+      R(
+        "div",
+        { key: "link", className: "mwater-visualization-text-palette-item", onMouseDown: this.handleCreateLink },
+        R("i", { className: "fa fa-link" })
+      ),
+      R(
+        "div",
+        {
+          key: "justifyLeft",
+          className: "mwater-visualization-text-palette-item",
+          onMouseDown: this.handleCommand.bind(null, "justifyLeft", null),
+        },
+        R("i", { className: "fa fa-align-left" })
+      ),
+      R(
+        "div",
+        {
+          key: "justifyCenter",
+          className: "mwater-visualization-text-palette-item",
+          onMouseDown: this.handleCommand.bind(null, "justifyCenter", null),
+        },
+        R("i", { className: "fa fa-align-center" })
+      ),
+      R(
+        "div",
+        {
+          key: "justifyRight",
+          className: "mwater-visualization-text-palette-item",
+          onMouseDown: this.handleCommand.bind(null, "justifyRight", null),
+        },
+        R("i", { className: "fa fa-align-right" })
+      ),
+      R(
+        "div",
+        {
+          key: "justifyFull",
+          className: "mwater-visualization-text-palette-item",
+          onMouseDown: this.handleCommand.bind(null, "justifyFull", null),
+        },
+        R("i", { className: "fa fa-align-justify" })
+      ),
+      R(
+        "div",
+        {
+          key: "insertUnorderedList",
+          className: "mwater-visualization-text-palette-item",
+          onMouseDown: this.handleCommand.bind(null, "insertUnorderedList", null),
+        },
+        R("i", { className: "fa fa-list-ul" })
+      ),
+      R(
+        "div",
+        {
+          key: "insertOrderedList",
+          className: "mwater-visualization-text-palette-item",
+          onMouseDown: this.handleCommand.bind(null, "insertOrderedList", null),
+        },
+        R("i", { className: "fa fa-list-ol" })
+      ),
+      this.props.includeHeadings
+        ? [
+            R(
+              "div",
+              {
+                key: "h1",
+                className: "mwater-visualization-text-palette-item",
+                onMouseDown: this.handleCommand.bind(null, "formatBlock", "<H1>"),
+              },
+              R("i", { className: "fa fa-header" })
+            ),
+            R(
+              "div",
+              {
+                key: "h2",
+                className: "mwater-visualization-text-palette-item",
+                onMouseDown: this.handleCommand.bind(null, "formatBlock", "<H2>"),
+              },
+              R("i", { className: "fa fa-header", style: { fontSize: "80%" } })
+            ),
+            R(
+              "div",
+              {
+                key: "p",
+                className: "mwater-visualization-text-palette-item",
+                onMouseDown: this.handleCommand.bind(null, "formatBlock", "<div>"),
+              },
+              "\u00b6"
+            ),
+          ]
+        : undefined,
+      R(
+        "div",
+        {
+          key: "removeFormat",
+          className: "mwater-visualization-text-palette-item",
+          onMouseDown: this.handleCommand.bind(null, "removeFormat", null),
+          style: { paddingLeft: 5, paddingRight: 5 },
+        },
+        R("img", { src: removeFormatIcon, style: { height: 20 } })
+      ),
+      this.props.extraPaletteButtons
+    )
+  }
+
+  refContentEditable = (c: ContentEditableComponent | null) => {
+    this.contentEditable = c
+  }
+
+  renderHtml() {
+    if (this.props.onItemsChange != null) {
+      return R(
+        "div",
+        { key: "contents", style: this.props.style, className: this.props.className },
+        R(ContentEditableComponent, {
+          ref: this.refContentEditable,
+          style: { outline: "none" },
+          html: this.createHtml(),
+          onChange: this.handleChange,
+          onClick: this.handleEditorClick,
+          onFocus: this.handleFocus,
+          onBlur: this.handleBlur,
+        }),
+        this.props.items?.[0] == null
+          ? R(
+              "div",
+              {
+                key: "placeholder",
+                style: { color: "#DDD", position: "absolute", top: 0, left: 0, right: 0, pointerEvents: "none" },
+              },
+              "Click to Edit"
+            )
+          : undefined
+      )
+    } else {
+      return R("div", {
+        key: "contents",
+        style: this.props.style,
+        className: this.props.className,
+        dangerouslySetInnerHTML: { __html: this.createHtml() },
+      })
+    }
+  }
+
+  render() {
+    return R(
+      "div",
+      {
+        style: { position: "relative" },
+        ref: (c: HTMLElement | null) => {
+          this.entireComponent = c
+        },
+      },
+      this.renderHtml(),
+      this.state.focused ? this.renderPalette() : undefined
+    )
+  }
+}
+
+var removeFormatIcon =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAr0lEQVQ4y91U2w3CMAy8VB0kbFA2YYVuABOZbsAmGaFscnzgSlGSBgfCB1g6OXbkkx+yHUn0lgFfkN8hHSt/lma71kxdhIv6Dom/HGicflB97NVTD2ACsPQc1En1zUpqKb+pdEumzaVbSNPSRRFL7iNZQ1BstvApsmODZJXUa8A58W9Ea4nwFWkNa0Sc/Q+F1dyDRD30AO6qJV/wtgxNPR3fOEJXALO+5092/0+P9APt7i9xOIlepwAAAABJRU5ErkJggg=="

package/src/richtext/react-float-affixed.d.ts

@@ -0,0 +1 @@
+declare module "react-float-affixed";

package/src/update-object.d.ts

@@ -0,0 +1 @@
+declare module "update-object"