@colixsystems/widget-sdk 0.275.2 → 0.277.0

package/dist/markdown-live-field.js

@@ -1,312 +0,0 @@
-// sc-14974 — the live-styled field behind `<MarkdownInput>` (web).
-//
-// A `<textarea>` holds one string in one style, so the browser half is a
-// plain-text `contentEditable` instead: the author types into the styled text
-// itself. React cannot own the children of a node the browser is editing, so
-// this element is painted by hand from `markdownLiveSegments` and read back
-// as text. The native mirror is ./markdown-live-field.native.js.
-
-import React from "react";
-import { markdownLiveSegments } from "./markdown.js";
-import { markdownLiveRunStyle } from "./richtext-tokens.js";
-import { flattenStyle } from "./flatten-style.js";
-import { withTouchInputFontFloor } from "./touch-input-font-floor.js";
-
-const SENTINEL = "data-live-sentinel";
-const HISTORY_LIMIT = 100;
-// Keystrokes closer together than this undo as one step, like a textarea.
-const HISTORY_COALESCE_MS = 500;
-
-function hasCoarsePointer() {
-  return (
-    typeof window !== "undefined" &&
-    typeof window.matchMedia === "function" &&
-    window.matchMedia("(pointer: coarse)").matches
-  );
-}
-
-function isBlock(node) {
-  return node.nodeName === "DIV" || node.nodeName === "P";
-}
-
-// The browser may split text, add a `<br>` for Enter, or wrap a pasted line
-// in a block; each of those reads back as the newline it stands for.
-function readText(node, dropTrailingBreak = false) {
-  const children = [...node.childNodes];
-  // A final <br> only holds the last line open, so it is never content.
-  const last = children[children.length - 1];
-  if (dropTrailingBreak && last && last.nodeName === "BR") children.pop();
-  let out = "";
-  children.forEach((child, i) => {
-    if (child.nodeType === 3) out += child.data;
-    else if (child.nodeName === "BR") {
-      if (!child.hasAttribute(SENTINEL)) out += "\n";
-    } else {
-      if (isBlock(child) && i > 0) out += "\n";
-      out += readText(child);
-    }
-  });
-  return out;
-}
-
-const fieldText = (root) => readText(root, true);
-
-function firstDifference(a, b) {
-  let i = 0;
-  while (i < a.length && a.charAt(i) === b.charAt(i)) i += 1;
-  return i;
-}
-
-function offsetOf(root, node, offset) {
-  const range = root.ownerDocument.createRange();
-  range.setStart(root, 0);
-  range.setEnd(node, offset);
-  return readText(range.cloneContents());
-}
-
-function readSelection(root) {
-  const selection = root.ownerDocument.getSelection();
-  if (!selection || selection.rangeCount === 0) return null;
-  const { anchorNode, focusNode } = selection;
-  if (!root.contains(anchorNode) || !root.contains(focusNode)) return null;
-  const anchor = offsetOf(root, anchorNode, selection.anchorOffset).length;
-  const focus = offsetOf(root, focusNode, selection.focusOffset).length;
-  return { start: Math.min(anchor, focus), end: Math.max(anchor, focus) };
-}
-
-// Only ever called on a tree `paint` built: text nodes inside spans.
-function locate(root, target) {
-  let remaining = target;
-  for (const child of root.childNodes) {
-    const textNode = child.nodeType === 3 ? child : child.firstChild;
-    if (!textNode || textNode.nodeType !== 3) continue;
-    if (remaining <= textNode.data.length) return [textNode, remaining];
-    remaining -= textNode.data.length;
-  }
-  return [root, Math.max(root.childNodes.length - 1, 0)];
-}
-
-function writeSelection(root, { start, end }) {
-  const selection = root.ownerDocument.getSelection();
-  if (!selection) return;
-  const range = root.ownerDocument.createRange();
-  range.setStart(...locate(root, start));
-  range.setEnd(...locate(root, end));
-  selection.removeAllRanges();
-  selection.addRange(range);
-}
-
-function cssOf(style) {
-  const css = {};
-  for (const [key, value] of Object.entries(style)) {
-    css[key] = typeof value === "number" && key !== "fontWeight" ? `${value}px` : value;
-  }
-  return css;
-}
-
-function paint(root, value, tokens) {
-  const doc = root.ownerDocument;
-  root.textContent = "";
-  for (const run of markdownLiveSegments(value)) {
-    const span = doc.createElement("span");
-    span.textContent = run.text;
-    Object.assign(span.style, cssOf(markdownLiveRunStyle(run, tokens)));
-    root.appendChild(span);
-  }
-  // Without it a trailing newline has no line to draw, nor a caret to hold.
-  const sentinel = doc.createElement("br");
-  sentinel.setAttribute(SENTINEL, "");
-  root.appendChild(sentinel);
-}
-
-// The field arrives as a React Native style; this element is plain DOM.
-function fieldCss(style) {
-  const { lineHeight, ...rest } = flattenStyle(withTouchInputFontFloor(style, hasCoarsePointer()));
-  delete rest.textAlignVertical;
-  return {
-    ...rest,
-    ...(typeof lineHeight === "number" ? { lineHeight: `${lineHeight}px` } : null),
-    ...(rest.borderWidth ? { borderStyle: "solid" } : null),
-    overflowY: "auto",
-    whiteSpace: "pre-wrap",
-    overflowWrap: "anywhere",
-    outlineOffset: 2,
-  };
-}
-
-function isUndoKey(event) {
-  return (event.metaKey || event.ctrlKey) && !event.altKey;
-}
-
-
-export const MarkdownLiveField = React.forwardRef(function MarkdownLiveField(
-  { value, onChangeText, onSelectionChange, selection, placeholder, accessibilityLabel, tokens, style, testID },
-  handle,
-) {
-  const ref = React.useRef(null);
-  const painted = React.useRef(null);
-  const emitted = React.useRef(null);
-  const announced = React.useRef(false);
-  const composing = React.useRef(false);
-  const [isComposing, setComposing] = React.useState(false);
-  const [, rerender] = React.useReducer((n) => n + 1, 0);
-  const history = React.useRef({ past: [], future: [], at: 0 });
-  const latest = React.useRef(null);
-
-  // `coalesce` joins the open step; a typed edit leaves its step open for more.
-  const record = React.useCallback((coalesce, typing) => {
-    const stack = history.current;
-    const now = Date.now();
-    if (!coalesce || now - stack.at > HISTORY_COALESCE_MS || stack.past.length === 0) {
-      stack.past.push({ value: latest.current.value, selection: latest.current.selection });
-      if (stack.past.length > HISTORY_LIMIT) stack.past.shift();
-    }
-    stack.at = typing ? now : 0;
-    stack.future = [];
-  }, []);
-
-  // The toolbar edits the value from outside; this makes that edit undoable.
-  React.useImperativeHandle(
-    handle,
-    () => ({
-      recordEdit() {
-        record(false);
-        announced.current = true;
-      },
-    }),
-    [record],
-  );
-
-  const step = (redo) => {
-    const stack = history.current;
-    const entry = (redo ? stack.future : stack.past).pop();
-    if (!entry) return;
-    (redo ? stack.past : stack.future).push({ value, selection });
-    stack.at = 0;
-    if (typeof onChangeText !== "function") return;
-    emitted.current = entry.value;
-    onChangeText(entry.value);
-    const root = ref.current;
-    if (root) {
-      paint(root, entry.value, tokens);
-      painted.current = { value: entry.value, tokens };
-      if (entry.selection) writeSelection(root, entry.selection);
-    }
-  };
-  latest.current = { value, selection, onSelectionChange, step };
-
-  // Runs after every render, so an edit the parent did not take reverts.
-  React.useLayoutEffect(() => {
-    const root = ref.current;
-    if (!root) return;
-    const unchanged =
-      painted.current && painted.current.value === value && painted.current.tokens === tokens;
-    if (unchanged && fieldText(root) === value) return;
-    const typed = emitted.current === value;
-    if (painted.current && !unchanged && !typed && !announced.current) {
-      // The parent replaced the text (a reset, another record): old steps no longer apply.
-      history.current = { past: [], future: [], at: 0 };
-    }
-    announced.current = false;
-    const caret = readSelection(root);
-    paint(root, value, tokens);
-    painted.current = { value, tokens };
-    if (caret && (typed || unchanged)) writeSelection(root, caret);
-  });
-
-  React.useEffect(() => {
-    const root = ref.current;
-    if (!root) return undefined;
-    const doc = root.ownerDocument;
-    const report = () => {
-      const next = readSelection(root);
-      const handler = latest.current.onSelectionChange;
-      if (next && typeof handler === "function") handler({ nativeEvent: { selection: next } });
-    };
-    // The Edit menu, a context menu and shake-to-undo arrive here, not as keys.
-    const onBeforeInput = (event) => {
-      if (event.inputType !== "historyUndo" && event.inputType !== "historyRedo") return;
-      event.preventDefault();
-      latest.current.step(event.inputType === "historyRedo");
-    };
-    doc.addEventListener("selectionchange", report);
-    root.addEventListener("beforeinput", onBeforeInput);
-    return () => {
-      doc.removeEventListener("selectionchange", report);
-      root.removeEventListener("beforeinput", onBeforeInput);
-    };
-  }, []);
-
-  const onInput = () => {
-    const root = ref.current;
-    if (composing.current || !root) return;
-    const next = fieldText(root);
-    if (next !== value && typeof onChangeText === "function") {
-      // A typed space or newline starts a new undo step, as in a textarea.
-      const inserted = next.length > value.length ? next.charAt(firstDifference(value, next)) : "";
-      record(!/\s/.test(inserted), true);
-      emitted.current = next;
-      onChangeText(next);
-    }
-    rerender();
-  };
-
-  // Every repaint replaces the nodes the browser's own undo stack points at.
-  const onKeyDown = (event) => {
-    if (!isUndoKey(event)) return;
-    const key = event.key.toLowerCase();
-    if (key !== "z" && key !== "y") return;
-    event.preventDefault();
-    step(key === "y" || event.shiftKey);
-  };
-
-  const css = fieldCss(style);
-  return React.createElement(
-    "div",
-    { style: { position: "relative" } },
-    React.createElement("div", {
-      ref,
-      contentEditable: "plaintext-only",
-      suppressContentEditableWarning: true,
-      role: "textbox",
-      "aria-multiline": "true",
-      "aria-label": accessibilityLabel,
-      "aria-placeholder": placeholder,
-      "data-testid": testID,
-      spellCheck: true,
-      style: css,
-      onInput,
-      onKeyDown,
-      onCompositionStart: () => {
-        composing.current = true;
-        setComposing(true);
-      },
-      onCompositionEnd: () => {
-        composing.current = false;
-        setComposing(false);
-        onInput();
-      },
-    }),
-    !value && !isComposing && placeholder
-      ? React.createElement(
-          "div",
-          {
-            "aria-hidden": "true",
-            // The field's own box, transparent, so the hint sits where text will.
-            style: {
-              ...css,
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              pointerEvents: "none",
-              color: tokens.mutedColor,
-              backgroundColor: "transparent",
-              borderColor: "transparent",
-            },
-          },
-          placeholder,
-        )
-      : null,
-  );
-});

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

@@ -1,36 +0,0 @@
-// sc-14974 — the live-styled field behind `<MarkdownInput>` (native).
-//
-// iOS and Android both accept nested `<Text>` as a `TextInput`'s children and
-// draw them as attributed text, so the formatting appears in the field the
-// author types into. The runs join back to `value` exactly, which is what keeps
-// the input controlled. The web mirror is ./markdown-live-field.js.
-
-import React from "react";
-import { Text, TextInput } from "./bounded-text.native.js";
-import { markdownLiveSegments } from "./markdown.js";
-import { markdownLiveRunStyle } from "./richtext-tokens.js";
-
-// The OS keeps this field's undo history, so the toolbar has nothing to record.
-export const MarkdownLiveField = React.forwardRef(function MarkdownLiveField(
-  { value, onChangeText, onSelectionChange, placeholder, accessibilityLabel, tokens, style, testID },
-  ref,
-) {
-  const runs = React.useMemo(() => markdownLiveSegments(value), [value]);
-  return React.createElement(
-    TextInput,
-    {
-      ref,
-      onChangeText,
-      onSelectionChange,
-      placeholder,
-      placeholderTextColor: tokens.mutedColor,
-      accessibilityLabel,
-      multiline: true,
-      style,
-      testID,
-    },
-    runs.map((run, i) =>
-      React.createElement(Text, { key: i, style: markdownLiveRunStyle(run, tokens) }, run.text),
-    ),
-  );
-});