@mwater/visualization 5.0.0

package/lib/quickfilter/TextLiteralComponent.d.ts

@@ -0,0 +1,216 @@
+import React from "react";
+import { Schema } from "@mwater/expressions";
+import { JsonQLFilter } from "../JsonQLFilter";
+import { QuickfiltersDataSource } from "./QuickfiltersDataSource";
+export interface TextLiteralComponentProps {
+    value?: any;
+    onChange?: any;
+    schema: Schema;
+    /** See QuickfiltersDataSource */
+    quickfiltersDataSource: QuickfiltersDataSource;
+    expr: any;
+    index: number;
+    /** true to display multiple values */
+    multi?: boolean;
+    /** Filters to add to restrict quick filter data to */
+    filters?: JsonQLFilter[];
+}
+/** Displays a combo box that allows selecting single or multiple text values from an expression
+ * The expression can be type `text` or `text[]`
+ */
+export default class TextLiteralComponent extends React.Component<TextLiteralComponentProps> {
+    handleSingleChange: (val: any) => any;
+    handleMultipleChange: (val: any) => any;
+    getOptions: (input: any, cb: any) => void;
+    renderSingle(): React.FunctionComponentElement<Omit<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
+        tabIndex?: number | undefined;
+        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
+        placeholder?: React.ReactNode;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        isLoading?: boolean | undefined;
+        isDisabled?: boolean | undefined;
+        isRtl?: boolean | undefined;
+        isMulti?: boolean | undefined;
+        controlShouldRenderValue?: boolean | undefined;
+        loadingMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        noOptionsMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        backspaceRemovesValue?: boolean | undefined;
+        blurInputOnSelect?: boolean | undefined;
+        captureMenuScroll?: boolean | undefined;
+        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        closeMenuOnSelect?: boolean | undefined;
+        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
+        escapeClearsValue?: boolean | undefined;
+        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
+        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
+        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
+        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
+        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
+        isSearchable?: boolean | undefined;
+        minMenuHeight?: number | undefined;
+        maxMenuHeight?: number | undefined;
+        menuIsOpen?: boolean | undefined;
+        menuPlacement?: import("react-select").MenuPlacement | undefined;
+        menuPosition?: import("react-select").MenuPosition | undefined;
+        menuShouldBlockScroll?: boolean | undefined;
+        menuShouldScrollIntoView?: boolean | undefined;
+        openMenuOnFocus?: boolean | undefined;
+        openMenuOnClick?: boolean | undefined;
+        pageSize?: number | undefined;
+        screenReaderStatus?: ((obj: {
+            count: number;
+        }) => string) | undefined;
+        tabSelectsValue?: boolean | undefined;
+        unstyled?: boolean | undefined;
+    } & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
+        tabIndex?: number | undefined;
+        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
+        placeholder?: React.ReactNode;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        isLoading?: boolean | undefined;
+        isDisabled?: boolean | undefined;
+        isRtl?: boolean | undefined;
+        isMulti?: boolean | undefined;
+        controlShouldRenderValue?: boolean | undefined;
+        loadingMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        noOptionsMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        backspaceRemovesValue?: boolean | undefined;
+        blurInputOnSelect?: boolean | undefined;
+        captureMenuScroll?: boolean | undefined;
+        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        closeMenuOnSelect?: boolean | undefined;
+        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
+        escapeClearsValue?: boolean | undefined;
+        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
+        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
+        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
+        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
+        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
+        isSearchable?: boolean | undefined;
+        minMenuHeight?: number | undefined;
+        maxMenuHeight?: number | undefined;
+        menuIsOpen?: boolean | undefined;
+        menuPlacement?: import("react-select").MenuPlacement | undefined;
+        menuPosition?: import("react-select").MenuPosition | undefined;
+        menuShouldBlockScroll?: boolean | undefined;
+        menuShouldScrollIntoView?: boolean | undefined;
+        openMenuOnFocus?: boolean | undefined;
+        openMenuOnClick?: boolean | undefined;
+        pageSize?: number | undefined;
+        screenReaderStatus?: ((obj: {
+            count: number;
+        }) => string) | undefined;
+        tabSelectsValue?: boolean | undefined;
+        unstyled?: boolean | undefined;
+    } & {}> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & import("react-select/dist/declarations/src/useAsync").AsyncAdditionalProps<unknown, import("react-select").GroupBase<unknown>> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
+    renderMultiple(): React.FunctionComponentElement<Omit<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
+        tabIndex?: number | undefined;
+        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
+        placeholder?: React.ReactNode;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        isLoading?: boolean | undefined;
+        isDisabled?: boolean | undefined;
+        isRtl?: boolean | undefined;
+        isMulti?: boolean | undefined;
+        controlShouldRenderValue?: boolean | undefined;
+        loadingMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        noOptionsMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        backspaceRemovesValue?: boolean | undefined;
+        blurInputOnSelect?: boolean | undefined;
+        captureMenuScroll?: boolean | undefined;
+        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        closeMenuOnSelect?: boolean | undefined;
+        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
+        escapeClearsValue?: boolean | undefined;
+        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
+        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
+        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
+        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
+        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
+        isSearchable?: boolean | undefined;
+        minMenuHeight?: number | undefined;
+        maxMenuHeight?: number | undefined;
+        menuIsOpen?: boolean | undefined;
+        menuPlacement?: import("react-select").MenuPlacement | undefined;
+        menuPosition?: import("react-select").MenuPosition | undefined;
+        menuShouldBlockScroll?: boolean | undefined;
+        menuShouldScrollIntoView?: boolean | undefined;
+        openMenuOnFocus?: boolean | undefined;
+        openMenuOnClick?: boolean | undefined;
+        pageSize?: number | undefined;
+        screenReaderStatus?: ((obj: {
+            count: number;
+        }) => string) | undefined;
+        tabSelectsValue?: boolean | undefined;
+        unstyled?: boolean | undefined;
+    } & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
+        tabIndex?: number | undefined;
+        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
+        placeholder?: React.ReactNode;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        isLoading?: boolean | undefined;
+        isDisabled?: boolean | undefined;
+        isRtl?: boolean | undefined;
+        isMulti?: boolean | undefined;
+        controlShouldRenderValue?: boolean | undefined;
+        loadingMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        noOptionsMessage?: ((obj: {
+            inputValue: string;
+        }) => React.ReactNode) | undefined;
+        backspaceRemovesValue?: boolean | undefined;
+        blurInputOnSelect?: boolean | undefined;
+        captureMenuScroll?: boolean | undefined;
+        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
+        closeMenuOnSelect?: boolean | undefined;
+        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
+        escapeClearsValue?: boolean | undefined;
+        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
+        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
+        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
+        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
+        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
+        isSearchable?: boolean | undefined;
+        minMenuHeight?: number | undefined;
+        maxMenuHeight?: number | undefined;
+        menuIsOpen?: boolean | undefined;
+        menuPlacement?: import("react-select").MenuPlacement | undefined;
+        menuPosition?: import("react-select").MenuPosition | undefined;
+        menuShouldBlockScroll?: boolean | undefined;
+        menuShouldScrollIntoView?: boolean | undefined;
+        openMenuOnFocus?: boolean | undefined;
+        openMenuOnClick?: boolean | undefined;
+        pageSize?: number | undefined;
+        screenReaderStatus?: ((obj: {
+            count: number;
+        }) => string) | undefined;
+        tabSelectsValue?: boolean | undefined;
+        unstyled?: boolean | undefined;
+    } & {}> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & import("react-select/dist/declarations/src/useAsync").AsyncAdditionalProps<unknown, import("react-select").GroupBase<unknown>> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            width: string;
+        };
+    }, HTMLElement>;
+}

package/lib/quickfilter/TextLiteralComponent.js

@@ -0,0 +1,128 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const async_1 = __importDefault(require("react-select/async"));
+const expressions_1 = require("@mwater/expressions");
+const expressions_2 = require("@mwater/expressions");
+/** Displays a combo box that allows selecting single or multiple text values from an expression
+ * The expression can be type `text` or `text[]`
+ */
+class TextLiteralComponent extends react_1.default.Component {
+    handleSingleChange = (val) => {
+        const value = val ? val.value || null : null; // Blank is null
+        return this.props.onChange(value);
+    };
+    handleMultipleChange = (val) => {
+        const value = val ? lodash_1.default.pluck(val, "value") : [];
+        if (value.length > 0) {
+            return this.props.onChange(value);
+        }
+        else {
+            return this.props.onChange(null);
+        }
+    };
+    getOptions = (input, cb) => {
+        // Determine type of expression
+        const filters = (this.props.filters || []).slice();
+        const exprUtils = new expressions_2.ExprUtils(this.props.schema);
+        const exprType = exprUtils.getExprType(this.props.expr);
+        // Create query to get matches
+        const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+        // Add filter for input (simple if just text)
+        if (exprType === "text") {
+            if (input) {
+                filters.push({
+                    table: this.props.expr.table,
+                    jsonql: {
+                        type: "op",
+                        op: "~*",
+                        exprs: [
+                            exprCompiler.compileExpr({ expr: this.props.expr, tableAlias: "{alias}" }),
+                            escapeRegex(input) // Don't use _.escapeRegExp as adds weird backslashes that postgres doesn't like
+                        ]
+                    }
+                });
+            }
+        }
+        else if (exprType === "text[]") {
+            // Special filter for text[]
+            if (input) {
+                filters.push({
+                    table: "values",
+                    jsonql: {
+                        type: "op",
+                        op: "~*",
+                        exprs: [
+                            { type: "field", tableAlias: "{alias}", column: "value" },
+                            "^" + escapeRegex(input) // Don't use _.escapeRegExp as adds weird backslashes that postgres doesn't like
+                        ]
+                    }
+                });
+            }
+        }
+        else {
+            return;
+        }
+        // Execute query
+        this.props.quickfiltersDataSource.getValues(this.props.index, this.props.expr, filters, null, 250, (err, values) => {
+            if (err) {
+                return;
+            }
+            // Filter null and blank
+            values = lodash_1.default.filter(values, (value) => value);
+            return cb(lodash_1.default.map(values, (value) => ({
+                value,
+                label: value
+            })));
+        });
+    };
+    renderSingle() {
+        const currentValue = this.props.value ? { value: this.props.value, label: this.props.value } : null;
+        return R(async_1.default, {
+            key: JSON.stringify(this.props.filters),
+            placeholder: "All",
+            value: currentValue,
+            loadOptions: this.getOptions,
+            onChange: this.props.onChange ? this.handleSingleChange : undefined,
+            isClearable: true,
+            defaultOptions: true,
+            isDisabled: this.props.onChange == null,
+            noOptionsMessage: () => "Type to search",
+            styles: {
+                // Keep menu above fixed data table headers
+                menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
+            }
+        });
+    }
+    renderMultiple() {
+        const currentValue = this.props.value ? lodash_1.default.map(this.props.value, (v) => ({ value: v, label: v })) : null;
+        return R(async_1.default, {
+            placeholder: "All",
+            value: currentValue,
+            key: JSON.stringify(this.props.filters),
+            isMulti: true,
+            loadOptions: this.getOptions,
+            defaultOptions: true,
+            onChange: this.props.onChange ? this.handleMultipleChange : undefined,
+            isClearable: true,
+            isDisabled: this.props.onChange == null,
+            noOptionsMessage: () => "Type to search",
+            styles: {
+                // Keep menu above fixed data table headers
+                menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
+            }
+        });
+    }
+    render() {
+        return R("div", { style: { width: "100%" } }, this.props.multi ? this.renderMultiple() : this.renderSingle());
+    }
+}
+exports.default = TextLiteralComponent;
+function escapeRegex(s) {
+    return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+}

package/lib/richtext/ExprItemsHtmlConverter.d.ts

@@ -0,0 +1,39 @@
+import ItemsHtmlConverter, { HtmlItemBase } from "./ItemsHtmlConverter";
+import { Expr, Schema } from "@mwater/expressions";
+export interface HtmlItemExpr extends HtmlItemBase {
+    type: "expr";
+    /** unique id */
+    id: string;
+    /** Expression to display */
+    expr: Expr;
+    /** true to include label */
+    includeLabel?: boolean;
+    /** override label text */
+    labelText?: string;
+    /** d3 format if number */
+    format?: string;
+}
+/**
+ * ItemsHtmlConverter that supports embedded mwater expressions
+ * 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] }
+ *  { type: "expr", id: unique id, expr: expression, includeLabel: true to include label, labelText: override label text, format: d3 format if number }
+ */
+export default class ExprItemsHtmlConverter extends ItemsHtmlConverter {
+    schema: Schema;
+    designMode: boolean;
+    exprValues: {
+        [id: string]: Expr;
+    };
+    summarizeExprs: boolean;
+    locale: string | undefined;
+    constructor(schema: Schema, designMode: boolean, exprValues: {
+        [id: string]: Expr;
+    }, summarizeExprs: boolean, namedStrings?: {
+        [key: string]: string;
+    }, locale?: string);
+    convertSpecialItemToHtml(item: HtmlItemBase): string;
+    convertElemToItems(elem: HTMLElement): import("./ItemsHtmlConverter").HtmlItem[];
+}

package/lib/richtext/ExprItemsHtmlConverter.js

@@ -0,0 +1,118 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const ItemsHtmlConverter_1 = __importDefault(require("./ItemsHtmlConverter"));
+const expressions_1 = require("@mwater/expressions");
+const uuid_1 = __importDefault(require("uuid"));
+const valueFormatter_1 = require("../valueFormatter");
+const valueFormatter_2 = require("../valueFormatter");
+/**
+ * ItemsHtmlConverter that supports embedded mwater expressions
+ * 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] }
+ *  { type: "expr", id: unique id, expr: expression, includeLabel: true to include label, labelText: override label text, format: d3 format if number }
+ */
+class ExprItemsHtmlConverter extends ItemsHtmlConverter_1.default {
+    schema;
+    designMode;
+    exprValues;
+    summarizeExprs;
+    locale;
+    // designMode is true to display in design mode (exprs as blocks)
+    // exprValues is map of expr id to value
+    // summarizeExprs shows summaries of expressions, not values
+    // namedStrings: Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget
+    // locale: locale to use e.g. "en"
+    constructor(schema, designMode, exprValues, summarizeExprs, namedStrings, locale) {
+        super(namedStrings);
+        this.schema = schema;
+        this.designMode = designMode;
+        this.exprValues = exprValues;
+        this.summarizeExprs = summarizeExprs;
+        this.locale = locale;
+    }
+    // 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) {
+        let html = "";
+        if (item.type === "expr") {
+            const exprItem = item;
+            let exprHtml, text;
+            if (this.summarizeExprs) {
+                text = new expressions_1.ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale);
+                if (text.length > 30) {
+                    text = text.substr(0, 30) + "...";
+                }
+                exprHtml = lodash_1.default.escape(text);
+            }
+            else if (lodash_1.default.has(this.exprValues, exprItem.id)) {
+                // If has data
+                const exprUtils = new expressions_1.ExprUtils(this.schema);
+                const value = this.exprValues[exprItem.id];
+                if (value != null) {
+                    // Get expression type
+                    const exprType = exprUtils.getExprType(exprItem.expr);
+                    // Format if can format
+                    if (exprType && (0, valueFormatter_2.canFormatType)(exprType)) {
+                        text = (0, valueFormatter_1.formatValue)(exprType, value, exprItem.format);
+                    }
+                    else {
+                        text = exprUtils.stringifyExprLiteral(exprItem.expr, value, this.locale);
+                    }
+                    exprHtml = lodash_1.default.escape(text);
+                }
+                else {
+                    exprHtml = '<span style="color: #DDD">---</span>';
+                }
+            }
+            else {
+                // Placeholder
+                exprHtml = '<span class="text-muted">\u25a0\u25a0\u25a0</span>';
+            }
+            // Add label
+            if (exprItem.includeLabel) {
+                const label = exprItem.labelText || new expressions_1.ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale) + ":\u00A0";
+                exprHtml = '<span class="text-muted">' + lodash_1.default.escape(label) + "</span>" + exprHtml;
+            }
+            if (this.designMode) {
+                html +=
+                    '\u2060<span data-embed="' +
+                        lodash_1.default.escape(JSON.stringify(item)) +
+                        '" class="mwater-visualization-text-widget-expr">' +
+                        (exprHtml || "\u00A0") +
+                        "</span>\u2060";
+            }
+            else {
+                // View mode
+                html += exprHtml;
+            }
+        }
+        return html;
+    }
+    convertElemToItems(elem) {
+        const items = super.convertElemToItems(elem);
+        // Ensure exprs have unique ids
+        const takenIds = {};
+        var uniqueify = (items) => {
+            for (let item of items) {
+                if (item.type === "expr") {
+                    if (takenIds[item.id]) {
+                        item.id = (0, uuid_1.default)();
+                    }
+                    takenIds[item.id] = true;
+                }
+                if (item.items) {
+                    uniqueify(item.items);
+                }
+            }
+        };
+        uniqueify(items);
+        return items;
+    }
+}
+exports.default = ExprItemsHtmlConverter;

package/lib/richtext/FontColorPaletteItem.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export interface FontColorPaletteItemProps {
+    /** Called with "#FF8800", etc. */
+    onSetColor: any;
+    /** should the popup be under or over? */
+    position?: string;
+}
+interface FontColorPaletteItemState {
+    open: any;
+}
+export default class FontColorPaletteItem extends React.Component<FontColorPaletteItemProps, FontColorPaletteItemState> {
+    static defaultProps: {
+        position: string;
+    };
+    constructor(props: any);
+    handleMouseDown: (ev: any) => void;
+    render(): React.CElement<{
+        onClickOut: () => void;
+    }, React.Component<{
+        onClickOut: () => void;
+    }, any, any>>;
+}
+export {};

package/lib/richtext/FontColorPaletteItem.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const lodash_1 = __importDefault(require("lodash"));
+const react_onclickout_1 = __importDefault(require("react-onclickout"));
+const color_1 = __importDefault(require("color"));
+// Palette item that allows picking a color
+class FontColorPaletteItem extends react_1.default.Component {
+    static defaultProps = { position: "under" };
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: false
+        };
+    }
+    handleMouseDown = (ev) => {
+        // Don't lose focus from editor
+        ev.preventDefault();
+        return this.setState({ open: !this.state.open });
+    };
+    render() {
+        const popupPosition = {
+            position: "absolute",
+            left: 0,
+            zIndex: 1000,
+            backgroundColor: "white",
+            border: "solid 1px #AAA",
+            borderRadius: 3
+        };
+        if (this.props.position === "under") {
+            popupPosition["top"] = 26;
+        }
+        else {
+            popupPosition["bottom"] = 26;
+        }
+        return R(react_onclickout_1.default, { onClickOut: () => this.setState({ open: false }) }, R("div", {
+            className: "mwater-visualization-text-palette-item",
+            onMouseDown: this.handleMouseDown,
+            style: { position: "relative" }
+        }, this.state.open
+            ? R("div", { style: popupPosition }, R(ColorPaletteComponent, {
+                onSetColor: (color) => {
+                    this.props.onSetColor(color);
+                    return this.setState({ open: false });
+                }
+            }))
+            : undefined, R("i", { className: "fa fa-tint" })));
+    }
+}
+exports.default = FontColorPaletteItem;
+class ColorPaletteComponent extends react_1.default.Component {
+    renderColor(color) {
+        return R("td", null, R("div", {
+            style: { width: 16, height: 15, backgroundColor: color, margin: 1 },
+            onMouseDown: (ev) => {
+                ev.preventDefault();
+                return this.props.onSetColor(color);
+            }
+        }));
+    }
+    render() {
+        const baseColors = [
+            "#FF0000",
+            "#FFAA00",
+            "#FFFF00",
+            "#00FF00",
+            "#00FFFF",
+            "#0000FF",
+            "#9900FF",
+            "#FF00FF" // magenta
+        ];
+        return R("div", { style: { padding: 5 } }, R("table", null, R("tbody", null, 
+        // Grey shades
+        R("tr", null, lodash_1.default.map(lodash_1.default.range(0, 8), (i) => {
+            return this.renderColor((0, color_1.default)({ r: (i * 255) / 7, g: (i * 255) / 7, b: (i * 255) / 7 }).hex());
+        })), R("tr", { style: { height: 5 } }), 
+        // Base colors
+        R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor(c))), R("tr", { style: { height: 5 } }), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).lighten(0.7).hex()))), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).lighten(0.5).hex()))), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).lighten(0.3).hex()))), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).darken(0.3).hex()))), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).darken(0.5).hex()))), R("tr", null, lodash_1.default.map(baseColors, (c) => this.renderColor((0, color_1.default)(c).darken(0.7).hex()))))));
+    }
+}

package/lib/richtext/FontSizePaletteItem.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export interface FontSizePaletteItemProps {
+    /** Called with "125%", etc. */
+    onSetSize: any;
+    /** should the popup be under or over? */
+    position?: string;
+}
+interface FontSizePaletteItemState {
+    open: any;
+}
+export default class FontSizePaletteItem extends React.Component<FontSizePaletteItemProps, FontSizePaletteItemState> {
+    static defaultProps: {
+        position: string;
+    };
+    constructor(props: any);
+    handleMouseDown: (ev: any) => void;
+    renderSize(label: any, value: any): React.DetailedReactHTMLElement<{
+        className: string;
+        onMouseDown: (ev: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+        key: any;
+    }, HTMLElement>;
+    renderSizes(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    render(): React.CElement<{
+        onClickOut: () => void;
+    }, React.Component<{
+        onClickOut: () => void;
+    }, any, any>>;
+}
+export {};