@oneuptime/common 14.0.10 → 14.0.12

package/UI/Components/CodeEditor/CodeEditorHighlight.ts

@@ -0,0 +1,106 @@
+/*
+ * Syntax highlighting for CodeEditor.
+ *
+ * highlight.js core plus only the grammars the editor's languages use. Every
+ * frontend renders forms, and every form can hold a code field, so this sits
+ * in every bundle: registering all of CodeBlock's languages here would put
+ * C#, Rust and Swift grammars in the status page for nothing. Both modules
+ * register onto the same core, and a grammar already registered is left
+ * alone.
+ */
+/*
+ * highlight.js ships its deep-path typings as ambient `declare module`
+ * blocks inside its root types, which only enter the program when something
+ * resolves the bare specifier. `import type` is erased at emit.
+ */
+import type {} from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import sql from "highlight.js/lib/languages/sql";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+
+const GRAMMARS: Array<[string, typeof json]> = [
+  ["bash", bash],
+  ["css", css],
+  ["javascript", javascript],
+  ["json", json],
+  ["markdown", markdown],
+  ["sql", sql],
+  ["xml", xml],
+  ["yaml", yaml],
+];
+
+for (const [name, grammar] of GRAMMARS) {
+  if (!hljs.getLanguage(name)) {
+    hljs.registerLanguage(name, grammar);
+  }
+}
+
+/*
+ * Above this many characters the document is shown as plain text.
+ * Highlighting runs on every keystroke and costs about half a millisecond
+ * per KB, so this keeps a keystroke inside a frame; documents that large are
+ * pasted exports, not code anyone types.
+ */
+export const MAX_HIGHLIGHT_LENGTH: number = 30000;
+
+export type EscapeHtmlFunction = (text: string) => string;
+
+export const escapeHtml: EscapeHtmlFunction = (text: string): string => {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+};
+
+export type HighlightCodeFunction = (
+  text: string,
+  grammar: string | null,
+  options?: { showTabs?: boolean | undefined } | undefined,
+) => string;
+
+/**
+ * HTML for `text`: highlight.js token spans when the grammar is known and the
+ * text is not too long, escaped plain text otherwise. Either way the result
+ * holds exactly the characters of `text`, in order - the editor lays it
+ * under a transparent textarea, so one character more or less would put
+ * every glyph after it in the wrong place.
+ */
+export const highlightCode: HighlightCodeFunction = (
+  text: string,
+  grammar: string | null,
+  options?: { showTabs?: boolean | undefined } | undefined,
+): string => {
+  let html: string | null = null;
+
+  if (
+    grammar &&
+    text.length <= MAX_HIGHLIGHT_LENGTH &&
+    hljs.getLanguage(grammar)
+  ) {
+    try {
+      // hljs escapes the source itself before wrapping tokens in spans.
+      html = hljs.highlight(text, {
+        language: grammar,
+        ignoreIllegals: true,
+      }).value;
+    } catch {
+      html = null;
+    }
+  }
+
+  if (html === null) {
+    html = escapeHtml(text);
+  }
+
+  if (options?.showTabs && html.includes("\t")) {
+    html = html.replace(/\t/g, '<span class="ou-code-editor__tab">\t</span>');
+  }
+
+  return html;
+};

package/UI/Components/CodeEditor/CodeEditorLanguages.ts

@@ -0,0 +1,164 @@
+import CodeType from "../../../Types/Code/CodeType";
+import { EditingRules } from "./CodeEditorCommands";
+
+/*
+ * Everything CodeEditor does differently per language, in one table. A
+ * CodeType with no row here does not compile, so a new language cannot
+ * silently fall back to some other language's behaviour.
+ */
+
+export type CodeValidator = "json" | "yaml";
+
+export interface CodeLanguage {
+  /** Named in the toolbar, and in the editor's accessible name. */
+  label: string;
+  /** The highlight.js grammar, or null to show plain text. */
+  grammar: string | null;
+  rules: EditingRules;
+  /** Soft-wrap long lines. Only prose wraps; code scrolls sideways. */
+  wrap: boolean;
+  /**
+   * Prose follows the caller's spell check preference. Code never gets it:
+   * red squiggles under every key name are noise.
+   */
+  spellCheckFollowsCaller: boolean;
+  /** Whether Tab may insert a tab character when the document uses them. */
+  allowTabs: boolean;
+  /** Checked as you type, with the result in the status bar. */
+  validator: CodeValidator | null;
+  /** Offers Format (JSON only: it never changes what the document says). */
+  canFormat: boolean;
+  /**
+   * Draws tab characters. In YAML a tab is illegal as indentation and
+   * otherwise indistinguishable from spaces.
+   */
+  showTabs: boolean;
+}
+
+const BRACKETS: Record<string, string> = { "(": ")", "[": "]", "{": "}" };
+
+const NO_PAIRS: EditingRules = {
+  brackets: {},
+  quotes: [],
+  lineComment: null,
+  indentAfterColon: false,
+};
+
+type CodeLanguageInput = Partial<CodeLanguage> &
+  Pick<CodeLanguage, "label" | "grammar" | "rules">;
+
+type DefineFunction = (input: CodeLanguageInput) => CodeLanguage;
+
+const define: DefineFunction = (input: CodeLanguageInput): CodeLanguage => {
+  return {
+    wrap: false,
+    spellCheckFollowsCaller: false,
+    allowTabs: true,
+    validator: null,
+    canFormat: false,
+    showTabs: false,
+    ...input,
+  };
+};
+
+export const CODE_LANGUAGES: Record<CodeType, CodeLanguage> = {
+  [CodeType.JSON]: define({
+    label: "JSON",
+    grammar: "json",
+    rules: {
+      brackets: { "[": "]", "{": "}" },
+      quotes: ['"'],
+      lineComment: null,
+      indentAfterColon: false,
+    },
+    validator: "json",
+    canFormat: true,
+  }),
+  [CodeType.YAML]: define({
+    label: "YAML",
+    grammar: "yaml",
+    rules: {
+      brackets: { "[": "]", "{": "}" },
+      quotes: ['"', "'"],
+      lineComment: "#",
+      indentAfterColon: true,
+    },
+    allowTabs: false,
+    validator: "yaml",
+    showTabs: true,
+  }),
+  [CodeType.JavaScript]: define({
+    label: "JavaScript",
+    grammar: "javascript",
+    rules: {
+      brackets: BRACKETS,
+      quotes: ['"', "'", "`"],
+      lineComment: "//",
+      indentAfterColon: false,
+    },
+  }),
+  [CodeType.CSS]: define({
+    label: "CSS",
+    grammar: "css",
+    rules: {
+      brackets: BRACKETS,
+      quotes: ['"', "'"],
+      lineComment: null,
+      indentAfterColon: false,
+    },
+  }),
+  [CodeType.HTML]: define({
+    label: "HTML",
+    grammar: "xml",
+    rules: {
+      brackets: BRACKETS,
+      quotes: ['"', "'"],
+      lineComment: null,
+      indentAfterColon: false,
+    },
+  }),
+  [CodeType.SQL]: define({
+    label: "SQL",
+    grammar: "sql",
+    rules: {
+      brackets: { "(": ")" },
+      quotes: ["'", '"'],
+      lineComment: "--",
+      indentAfterColon: false,
+    },
+  }),
+  [CodeType.Bash]: define({
+    label: "Bash",
+    grammar: "bash",
+    rules: {
+      brackets: BRACKETS,
+      quotes: ['"', "'"],
+      lineComment: "#",
+      indentAfterColon: false,
+    },
+  }),
+  [CodeType.Markdown]: define({
+    label: "Markdown",
+    grammar: "markdown",
+    rules: NO_PAIRS,
+    wrap: true,
+    spellCheckFollowsCaller: true,
+  }),
+  [CodeType.Text]: define({
+    label: "Text",
+    grammar: null,
+    rules: NO_PAIRS,
+  }),
+};
+
+export type GetCodeLanguageFunction = (type: CodeType) => CodeLanguage;
+
+/*
+ * Callers pass `type` from data as often as from a literal, so an unknown
+ * value gets plain text rather than a crash.
+ */
+export const getCodeLanguage: GetCodeLanguageFunction = (
+  type: CodeType,
+): CodeLanguage => {
+  return CODE_LANGUAGES[type] || CODE_LANGUAGES[CodeType.Text];
+};

package/UI/Components/CodeEditor/YamlEditor.tsx

@@ -1,21 +1,6 @@
-import CodeEditor from "./CodeEditor";
-import Icon from "../Icon/Icon";
+import CodeEditor, { CODE_EDITOR_VALIDATION_DEBOUNCE_MS } from "./CodeEditor";
 import CodeType from "../../../Types/Code/CodeType";
-import IconProp from "../../../Types/Icon/IconProp";
-import {
-  YamlSyntaxCheckResult,
-  checkYamlSyntax,
-  describeYamlSyntaxError,
-} from "../../../Types/Code/YamlSyntax";
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
   initialValue?: string | undefined;
@@ -23,7 +8,7 @@ export interface ComponentProps {
   onChange?: ((value: string) => void) | undefined;
   onBlur?: (() => void) | undefined;
   onFocus?: (() => void) | undefined;
-  /** Shown in the header bar as a hint. Never written into the document. */
+  /** Shown in the toolbar as a hint. Never written into the document. */
   placeholder?: string | undefined;
   error?: string | undefined;
   readOnly?: boolean | undefined;
@@ -35,61 +20,16 @@ export interface ComponentProps {
 }
 
 /** How long the document sits still before it is parsed again. */
-export const YAML_VALIDATION_DEBOUNCE_MS: number = 250;
+export const YAML_VALIDATION_DEBOUNCE_MS: number =
+  CODE_EDITOR_VALIDATION_DEBOUNCE_MS;
 
-const DEFAULT_HINT: string =
+export const YAML_DEFAULT_HINT: string =
   "Indentation is significant — use 2 spaces per level. Tabs are not valid YAML.";
 
-const MAC_PLATFORM_PATTERN: RegExp = /Mac|iPhone|iPad|iPod/i;
-
-type IsMacFunction = () => boolean;
-
-/*
- * Monaco binds toggleTabFocusMode to Ctrl+M everywhere except macOS, where the
- * `mac` override in its keybinding makes it Ctrl+Shift+M. Naming the wrong key
- * turns the keyboard-trap advisory (WCAG 2.1.2) into a false one.
- */
-const isMac: IsMacFunction = (): boolean => {
-  if (typeof navigator === "undefined") {
-    return false;
-  }
-
-  const platform: string =
-    (navigator as { platform?: string }).platform || navigator.userAgent || "";
-
-  return MAC_PLATFORM_PATTERN.test(platform);
-};
-
-/*
- * Callers reach us through Form's currentValues, which is `any`, so a
- * non-string can arrive on a prop typed as string. CodeEditor stringifies for
- * display; we mirror that so the status bar judges the same text the user
- * sees.
- */
-type ToTextFunction = (value: string | undefined) => string;
-
-const toText: ToTextFunction = (value: string | undefined): string => {
-  if (value === undefined || value === null) {
-    return "";
-  }
-
-  if (typeof value !== "string") {
-    return JSON.stringify(value, null, 4);
-  }
-
-  return value;
-};
-
-type CountLinesFunction = (text: string) => number;
-
-const countLines: CountLinesFunction = (text: string): number => {
-  return text.split("\n").length;
-};
-
 /**
- * A YAML document editor: Monaco with the YAML grammar and YAML-safe
- * indentation, wrapped in chrome that names the language, copies the document
- * and reports - as you type - whether what is in the box actually parses.
+ * A YAML document editor: CodeEditor with the YAML grammar, YAML-safe
+ * indentation (two spaces, never a tab) and a status bar that reports as you
+ * type whether the document parses, and where it does not.
  *
  * Exists because YAML fields used to render the rich-text Markdown editor.
  * That was not only the wrong affordance (a Bold button over a Sigma rule);
@@ -99,269 +39,31 @@ const countLines: CountLinesFunction = (text: string): number => {
 const YamlEditor: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [text, setText] = useState<string>(() => {
-    return toText(props.value ?? props.initialValue);
-  });
-
-  /*
-   * The parse runs on a timer so it does not re-run on every keystroke, and
-   * so a half-typed line is not judged the instant it is typed.
-   */
-  const [checkedText, setCheckedText] = useState<string>(() => {
-    return toText(props.value ?? props.initialValue);
-  });
-
-  const instanceId: string = useId();
-  const hintId: string = `${instanceId}-yaml-hint`;
-  const statusId: string = `${instanceId}-yaml-status`;
-  const escapeHintId: string = `${instanceId}-yaml-escape`;
-
-  const [copied, setCopied] = useState<boolean>(false);
-  const copyResetTimer: React.MutableRefObject<ReturnType<
-    typeof setTimeout
-  > | null> = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // `value` is the controlled prop; `initialValue` only seeds it.
-  useEffect(() => {
-    setText(
-      toText(props.value === undefined ? props.initialValue : props.value),
-    );
-  }, [props.value, props.initialValue]);
-
-  useEffect(() => {
-    const timer: ReturnType<typeof setTimeout> = setTimeout(() => {
-      setCheckedText(text);
-    }, YAML_VALIDATION_DEBOUNCE_MS);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [text]);
-
-  useEffect(() => {
-    return () => {
-      if (copyResetTimer.current) {
-        clearTimeout(copyResetTimer.current);
-      }
-    };
-  }, []);
-
-  const syntax: YamlSyntaxCheckResult = useMemo(() => {
-    return checkYamlSyntax(checkedText);
-  }, [checkedText]);
-
-  const isEmpty: boolean = text.trim() === "";
-
-  type HandleCopyFunction = () => void;
-
-  const handleCopy: HandleCopyFunction = (): void => {
-    if (
-      typeof navigator === "undefined" ||
-      !navigator.clipboard ||
-      typeof navigator.clipboard.writeText !== "function"
-    ) {
-      return;
-    }
-
-    void Promise.resolve(navigator.clipboard.writeText(text)).catch(() => {
-      /* A denied clipboard permission is not worth an error state. */
-    });
-
-    setCopied(true);
-
-    if (copyResetTimer.current) {
-      clearTimeout(copyResetTimer.current);
-    }
-
-    copyResetTimer.current = setTimeout(() => {
-      setCopied(false);
-    }, 2000);
-  };
-
-  /*
-   * One line, one message, five states. Whichever arm wins, the status bar is
-   * the only place the field says anything - the editor below is not given
-   * the error, so nothing is printed twice.
-   */
-  type StatusShape = {
-    tone: "error" | "valid" | "invalid" | "empty";
-    icon: IconProp;
-    message: string;
-  };
-
-  const status: StatusShape = useMemo(() => {
-    /*
-     * The form re-validates synchronously on every keystroke and the field is
-     * marked touched from the first one, so props.error arrives undebounced.
-     * Deferring to it only once the parse has caught up with the text keeps a
-     * red message off a half-typed line - and the moment they agree, the
-     * form's sentence wins, because it is the one blocking Save.
-     */
-    if (props.error && checkedText === text) {
-      return {
-        tone: "error",
-        icon: IconProp.Error,
-        message: props.error,
-      };
-    }
-
-    if (isEmpty) {
-      return {
-        tone: "empty",
-        icon: IconProp.Info,
-        message: "Nothing entered yet.",
-      };
-    }
-
-    /*
-     * checkYamlSyntax declines to judge a document whose shape is only known
-     * at run time. Saying "Valid YAML" about text nobody parsed would be a
-     * claim this component cannot make.
-     */
-    if (syntax.wasSkipped) {
-      return {
-        tone: "empty",
-        icon: IconProp.Info,
-        message: "Contains template expressions — syntax not checked.",
-      };
-    }
-
-    if (syntax.isValid) {
-      const lines: number = countLines(text);
-
-      return {
-        tone: "valid",
-        icon: IconProp.CheckCircle,
-        message: `Valid YAML · ${lines} ${lines === 1 ? "line" : "lines"}`,
-      };
-    }
-
-    return {
-      tone: "invalid",
-      icon: IconProp.Alert,
-      message: describeYamlSyntaxError(syntax),
-    };
-  }, [props.error, isEmpty, syntax, text, checkedText]);
-
-  /*
-   * Light-theme values only, one step darker than the obvious choice so the
-   * 12px status text clears 4.5:1 on bg-gray-50 (WCAG 1.4.3). Dark mode is
-   * not written here: Styles/Theme.css remaps these very classes globally
-   * under html.dark, at a specificity that beats any dark: variant a
-   * component could add - which is why no sibling component uses them.
-   */
-  const statusToneClassName: string = {
-    error: "text-red-700",
-    invalid: "text-amber-700",
-    valid: "text-green-700",
-    empty: "text-gray-500",
-  }[status.tone];
-
-  const borderClassName: string = props.error
-    ? "border-red-300 focus-within:border-red-500 focus-within:ring-red-500"
-    : "border-gray-300 focus-within:border-indigo-500 focus-within:ring-indigo-500";
-
-  const escapeHint: string = isMac()
-    ? "Press Control plus Shift plus M to toggle whether the Tab key indents or moves focus out of this editor."
-    : "Press Control plus M to toggle whether the Tab key indents or moves focus out of this editor.";
-
   return (
-    <div
-      data-testid="yaml-editor"
-      className={
-        props.className ||
-        `overflow-hidden rounded-md border bg-white shadow-sm transition-shadow focus-within:ring-1 ${borderClassName}`
-      }
-    >
-      <div className="flex items-center justify-between gap-3 border-b border-gray-200 bg-gray-50 px-3 py-1">
-        <div className="flex min-w-0 items-center gap-2">
-          <span className="inline-flex shrink-0 items-center rounded border border-indigo-100 bg-indigo-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-indigo-700">
-            YAML
-          </span>
-          <span
-            id={hintId}
-            data-testid="yaml-editor-hint"
-            className="truncate text-xs text-gray-500"
-          >
-            {props.placeholder || DEFAULT_HINT}
-          </span>
-        </div>
-
-        <button
-          type="button"
-          data-testid="yaml-editor-copy-button"
-          aria-label={
-            copied ? "YAML copied to clipboard" : "Copy YAML to clipboard"
-          }
-          disabled={isEmpty}
-          onClick={handleCopy}
-          className="inline-flex shrink-0 items-center gap-1 rounded px-2 py-1 text-xs text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-gray-500"
-        >
-          <Icon
-            icon={copied ? IconProp.Check : IconProp.Copy}
-            className="h-3.5 w-3.5"
-          />
-          {copied ? "Copied" : "Copy"}
-        </button>
-      </div>
-
-      {/*
-       * Ahead of the editor in reading order, and referenced from Monaco's own
-       * input through aria-describedby - Monaco takes Tab to indent, so this
-       * is the only way out, and it has to be heard on the way in rather than
-       * discovered on the way past.
-       */}
-      <span id={escapeHintId} className="sr-only">
-        {escapeHint}
-      </span>
-
+    <div data-testid="yaml-editor" className={props.className}>
       <CodeEditor
         type={CodeType.YAML}
-        ariaLabelledby={props.ariaLabelledby}
-        ariaDescribedby={`${escapeHintId} ${hintId} ${statusId}`}
-        ariaInvalid={Boolean(props.error)}
-        dataTestId={props.dataTestId}
-        tabIndex={props.tabIndex}
-        readOnly={props.readOnly}
-        height={props.height || "22rem"}
-        /*
-         * The chrome above owns the border, the background and the focus ring,
-         * so the editor contributes none of its own. `error` is deliberately
-         * not forwarded either - it would paint a second red border and print
-         * the message a second time under the box; the status bar below says
-         * it once.
-         */
-        className="block w-full text-sm"
-        value={text}
-        onChange={(value: string) => {
-          setText(value);
-
-          if (props.onChange) {
-            props.onChange(value);
-          }
-        }}
+        value={props.value}
+        initialValue={props.initialValue}
+        onChange={props.onChange}
         onBlur={props.onBlur}
         onFocus={props.onFocus}
+        /*
+         * A hint, not a placeholder: a YAML field's guidance is about how to
+         * write it, and has to stay readable once there is text in the box.
+         */
+        hint={props.placeholder || YAML_DEFAULT_HINT}
+        error={props.error}
+        ariaInvalid={Boolean(props.error)}
+        readOnly={props.readOnly}
+        tabIndex={props.tabIndex}
+        dataTestId={props.dataTestId}
+        ariaLabelledby={props.ariaLabelledby}
+        height={props.height}
+        // A rule is the whole point of the form it sits in: give it room.
+        minLines={12}
+        maxHeight="min(70vh, 36rem)"
       />
-
-      <div
-        id={statusId}
-        data-testid="yaml-editor-status"
-        role="status"
-        aria-live="polite"
-        className={`flex items-center gap-1.5 border-t border-gray-200 bg-gray-50 px-3 py-1.5 text-xs ${statusToneClassName}`}
-      >
-        <Icon icon={status.icon} className="h-3.5 w-3.5 shrink-0" />
-        <span className="min-w-0 break-words">{status.message}</span>
-      </div>
-
-      {/*
-       * The copy button's own name changes, but a button name is not a live
-       * region - nothing would speak the confirmation. This does.
-       */}
-      <span role="status" aria-live="polite" className="sr-only">
-        {copied ? "YAML copied to clipboard" : ""}
-      </span>
     </div>
   );
 };

package/UI/Components/CollapsibleSection/CollapsibleSection.tsx

@@ -47,7 +47,9 @@ const CollapsibleSection: FunctionComponent<ComponentProps> = (
   const variant: CollapsibleSectionVariant = props.variant || "default";
 
   // Associate the role="button" header with its visible title text (WCAG 4.1.2).
-  const collapsibleTitleId: string = `collapsible-title-${React.useId()}`;
+  const sectionId: string = React.useId();
+  const collapsibleTitleId: string = `collapsible-title-${sectionId}`;
+  const collapsibleBodyId: string = `collapsible-body-${sectionId}`;
 
   const getContainerClassName: () => string = (): string => {
     const baseClassName: string = props.className || "";
@@ -100,6 +102,7 @@ const CollapsibleSection: FunctionComponent<ComponentProps> = (
           }
         }}
         aria-expanded={!isCollapsed}
+        aria-controls={collapsibleBodyId}
         aria-labelledby={collapsibleTitleId}
       >
         <div className="flex items-center flex-1 min-w-0">
@@ -146,9 +149,22 @@ const CollapsibleSection: FunctionComponent<ComponentProps> = (
         )}
       </div>
 
+      {/*
+       * The body stays mounted while collapsed, so the fields in it keep
+       * their state. Folded, it is also `invisible` (visibility: hidden):
+       * max-h-0 and opacity-0 alone stop the fields being SEEN, but they were
+       * still tab stops and still read out, so a keyboard user filled in an
+       * "Advanced Options" field they could not see. A transition follows
+       * the property list of the state it goes to: folding transitions
+       * visibility with the rest, so it turns invisible once the fold has
+       * finished; opening leaves it out, so the fields are reachable at once.
+       */}
       <div
-        className={`transition-all duration-200 ease-in-out overflow-hidden ${
-          isCollapsed ? "max-h-0 opacity-0" : "max-h-[5000px] opacity-100"
+        id={collapsibleBodyId}
+        className={`duration-200 ease-in-out overflow-hidden ${
+          isCollapsed
+            ? "max-h-0 opacity-0 invisible transition-all"
+            : "max-h-[5000px] opacity-100 transition-[max-height,opacity]"
         }`}
       >
         <div className={getContentClassName()}>{props.children}</div>