@colixsystems/widget-sdk 0.275.1 → 0.276.0

package/dist/markdown-editor-field.js

@@ -0,0 +1,111 @@
+// sc-15080 — `<MarkdownInput>`'s editing surface (web).
+//
+// Mounts the shared editor (./markdown-editor-core.js) straight into the page.
+// The editor is loaded on first use, so a widget without a `<MarkdownInput>`
+// never downloads it. The native mirror is ./markdown-editor-field.native.js.
+
+import React from "react";
+import { markdownEditorCss } from "./markdown-editor-css.js";
+import { withTouchInputFontFloor } from "./touch-input-font-floor.js";
+
+function hasCoarsePointer() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function"
+    ? window.matchMedia("(pointer: coarse)").matches
+    : false;
+}
+
+function touchFontSize(size) {
+  const floored = withTouchInputFontFloor({ fontSize: size }, hasCoarsePointer());
+  return Array.isArray(floored) ? floored[1].fontSize : size;
+}
+
+export const MarkdownEditorField = React.forwardRef(function MarkdownEditorField(
+  { value, onChangeText, onStateChange, placeholder, accessibilityLabel, tokens, minHeight, maxHeight, testID },
+  ref,
+) {
+  const host = React.useRef(null);
+  const editor = React.useRef(null);
+  const latest = React.useRef({ value, onChangeText, onStateChange });
+  latest.current = { value, onChangeText, onStateChange };
+  const [failed, setFailed] = React.useState(false);
+  const scope = `md-editor-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+
+  React.useEffect(() => {
+    let cancelled = false;
+    import("./markdown-editor-core.js")
+      .then(({ createMarkdownEditor }) => {
+        if (cancelled || !host.current) return;
+        editor.current = createMarkdownEditor({
+          element: host.current,
+          markdown: latest.current.value,
+          placeholder,
+          label: accessibilityLabel,
+          onChange: (markdown) => {
+            const onChange = latest.current.onChangeText;
+            if (typeof onChange === "function") onChange(markdown);
+          },
+          onState: (state) => {
+            const onState = latest.current.onStateChange;
+            if (typeof onState === "function") onState(state);
+          },
+        });
+        // The parent may have replaced the value while the editor loaded.
+        editor.current.setMarkdown(latest.current.value);
+      })
+      .catch(() => {
+        if (!cancelled) setFailed(true);
+      });
+    return () => {
+      cancelled = true;
+      if (editor.current) editor.current.destroy();
+      editor.current = null;
+    };
+    // The editor keeps its undo history for the life of the field.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    if (editor.current) editor.current.setMarkdown(value);
+  }, [value]);
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      command: (name, args) => (editor.current ? editor.current.command(name, args) : false),
+      selectedText: () => (editor.current ? editor.current.selectedText() : ""),
+    }),
+    [],
+  );
+
+  const css = React.useMemo(
+    () =>
+      markdownEditorCss(tokens, `.${scope}`, {
+        fontSize: touchFontSize(tokens.bodySize),
+        minHeight,
+        framed: true,
+      }),
+    [tokens, scope, minHeight],
+  );
+
+  return React.createElement(
+    "div",
+    {
+      className: scope,
+      "data-testid": testID,
+      style: {
+        minHeight,
+        maxHeight,
+        overflowY: "auto",
+        boxSizing: "border-box",
+      },
+    },
+    React.createElement("style", null, css),
+    failed
+      ? React.createElement(
+          "div",
+          { role: "alert", style: { padding: tokens.padding, color: tokens.mutedColor } },
+          "The editor could not load. Check your connection and reload the page.",
+        )
+      : React.createElement("div", { ref: host }),
+  );
+});

package/dist/markdown-editor-field.native.js

@@ -0,0 +1,9 @@
+// sc-15080 — `<MarkdownInput>`'s editing surface (iOS and Android): the shared
+// editor in a WebView, through ./markdown-editor-bridge.js. The web mirror is
+// ./markdown-editor-field.js.
+
+import { View } from "react-native";
+import { WebView } from "react-native-webview";
+import { makeMarkdownEditorField } from "./markdown-editor-bridge.js";
+
+export const MarkdownEditorField = makeMarkdownEditorField({ View, WebView });