@colixsystems/widget-sdk 0.275.1 → 0.276.0

package/dist/markdown-edit.js

@@ -1,164 +0,0 @@
-// sc-6970 — the selection edits `<MarkdownInput>`'s toolbar performs.
-//
-// Pure string maths, kept out of the component the way `richtext-tokens.js`
-// keeps the theme maths out: a toolbar button is only correct if it wraps the
-// author's SELECTION rather than appending at the end, and that is a thing
-// tests can pin without a renderer.
-
-import { escapeMarkdownLabel, formatMarkdownTable } from "./markdown.js";
-
-const LINE_RE = /^(\s*)((?:#{1,3}\s)|(?:[-*]\s)|(?:\d+[.)]\s))?([\s\S]*)$/;
-
-// The literal the inserted table skeleton opens with; the caret lands on it.
-const FIRST_HEADING = "Column 1";
-
-const LINE_KINDS = Object.freeze({
-  heading2: { marker: "## ", test: /^##\s/ },
-  heading3: { marker: "### ", test: /^###\s/ },
-  bullet: { marker: "- ", test: /^[-*]\s/ },
-  ordered: { marker: null, test: /^\d+[.)]\s/ },
-});
-
-function clamp(index, max) {
-  const n = Number.isFinite(index) ? Math.trunc(index) : 0;
-  return Math.min(Math.max(n, 0), max);
-}
-
-function readRange(text, selection) {
-  const src = typeof text === "string" ? text : "";
-  const raw = selection && typeof selection === "object" ? selection : {};
-  const a = clamp(raw.start, src.length);
-  const b = clamp(raw.end, src.length);
-  return { src, start: Math.min(a, b), end: Math.max(a, b) };
-}
-
-function wrap(marker) {
-  return (text, selection) => {
-    const { src, start, end } = readRange(text, selection);
-    const selected = src.slice(start, end);
-    const pair = marker.length * 2;
-
-    // Already wrapped — the button toggles the emphasis back off.
-    if (selected.length >= pair && selected.startsWith(marker) && selected.endsWith(marker)) {
-      const inner = selected.slice(marker.length, selected.length - marker.length);
-      return {
-        value: src.slice(0, start) + inner + src.slice(end),
-        selection: { start, end: start + inner.length },
-      };
-    }
-
-    return {
-      value: src.slice(0, start) + marker + selected + marker + src.slice(end),
-      // Leaves the author's own text selected (or the caret between an empty
-      // pair), so typing continues inside the emphasis they just asked for.
-      selection: { start: start + marker.length, end: end + marker.length },
-    };
-  };
-}
-
-function linePrefix(kind) {
-  const spec = LINE_KINDS[kind];
-  return (text, selection) => {
-    const { src, start, end } = readRange(text, selection);
-    const blockStart = src.lastIndexOf("\n", Math.max(start - 1, 0)) + 1;
-    const newlineAfter = src.indexOf("\n", end);
-    const blockEnd = newlineAfter === -1 ? src.length : newlineAfter;
-
-    const lines = src.slice(blockStart, blockEnd).split("\n");
-    const filled = lines.filter((line) => line.trim());
-    // Toggled off only when EVERY line already carries this kind, so a mixed
-    // selection becomes uniformly marked rather than half-stripped.
-    const removing =
-      filled.length > 0 &&
-      filled.every((line) => spec.test.test(line.replace(/^\s*/, "")));
-
-    let ordinal = 0;
-    const rebuilt = lines.map((line) => {
-      const match = LINE_RE.exec(line);
-      const indent = match[1];
-      const body = match[3];
-      if (!line.trim()) return line;
-      if (removing) return indent + body;
-      ordinal += 1;
-      return indent + (spec.marker || `${ordinal}. `) + body;
-    });
-
-    const block = rebuilt.join("\n");
-    return {
-      value: src.slice(0, blockStart) + block + src.slice(blockEnd),
-      selection: { start: blockStart, end: blockStart + block.length },
-    };
-  };
-}
-
-// sc-7349 — a link needs a TARGET, which no selection can supply, so this is
-// the one op that takes a third argument. The target is stored verbatim: the
-// host's `navigation.openLink` is what decides page / external / refuse, so
-// this must not pre-judge it (see markdown.js).
-function linkOp() {
-  return (text, selection, options) => {
-    const { src, start, end } = readRange(text, selection);
-    // A bare string is accepted as the target, so the common case stays terse.
-    const opts =
-      options && typeof options === "object" ? options : { target: options };
-    const href = typeof opts.target === "string" ? opts.target.trim() : "";
-    // Nothing to point at — leave the text exactly as the author left it.
-    if (!href) return { value: src, selection: { start, end } };
-
-    // An explicit label wins, so a dialog can name the link when the author
-    // had nothing selected; otherwise the selection IS the label.
-    const chosen =
-      typeof opts.label === "string" && opts.label.trim()
-        ? opts.label
-        : src.slice(start, end);
-    const label = escapeMarkdownLabel(chosen) || href;
-    const markup = `[${label}](${href})`;
-    return {
-      value: src.slice(0, start) + markup + src.slice(end),
-      // Leaves the LABEL selected, so typing replaces the link text rather
-      // than the markup around it.
-      selection: { start: start + 1, end: start + 1 + label.length },
-    };
-  };
-}
-
-// A table is a block, so it needs its own lines: a blank line before keeps it
-// from fusing with the paragraph the caret was in.
-function tableOp() {
-  return (text, selection) => {
-    const { src, start, end } = readRange(text, selection);
-    const before = src.slice(0, start);
-    const after = src.slice(end);
-    const lead =
-      before.length === 0 || before.endsWith("\n\n")
-        ? ""
-        : before.endsWith("\n")
-          ? "\n"
-          : "\n\n";
-    const trail = after.startsWith("\n") ? "" : "\n";
-
-    const skeleton = formatMarkdownTable();
-    const offset = before.length + lead.length;
-    return {
-      value: before + lead + skeleton + trail + after,
-      // Selects the first header cell, so the author types over "Column 1"
-      // instead of hunting for the caret inside the pipes.
-      selection: {
-        start: offset + 2,
-        end: offset + 2 + FIRST_HEADING.length,
-      },
-    };
-  };
-}
-
-export const markdownEditOps = Object.freeze({
-  bold: wrap("**"),
-  italic: wrap("*"),
-  code: wrap("`"),
-  heading2: linePrefix("heading2"),
-  heading3: linePrefix("heading3"),
-  bullet: linePrefix("bullet"),
-  ordered: linePrefix("ordered"),
-  link: linkOp(),
-  table: tableOp(),
-});

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),
-    ),
-  );
-});