@colixsystems/widget-sdk 0.275.2 → 0.276.0

package/dist/markdown-editor-core.js

@@ -0,0 +1,184 @@
+// sc-15080 — the ONE rich-text editor behind `<MarkdownInput>`.
+//
+// The web host mounts it directly; the native host runs the same module inside
+// a WebView (./markdown-editor-webview.js), because React Native has no
+// editable rich-text surface. Both therefore edit with identical rules.
+//
+// The schema is limited to the markdown subset `<RichText>` renders, so the
+// editor cannot hold anything the stored markdown would lose. Bold, italic and
+// code exclude each other because the grammar has no nested emphasis.
+
+import { Editor } from "@tiptap/core";
+import { Document } from "@tiptap/extension-document";
+import { Paragraph } from "@tiptap/extension-paragraph";
+import { Text } from "@tiptap/extension-text";
+import { Bold } from "@tiptap/extension-bold";
+import { Italic } from "@tiptap/extension-italic";
+import { Code } from "@tiptap/extension-code";
+import { Heading } from "@tiptap/extension-heading";
+import { BulletList, OrderedList, ListItem, ListKeymap } from "@tiptap/extension-list";
+import { Link } from "@tiptap/extension-link";
+import { CodeBlock } from "@tiptap/extension-code-block";
+import { Image } from "@tiptap/extension-image";
+import { Table, TableRow, TableHeader, TableCell } from "@tiptap/extension-table";
+import { Placeholder, UndoRedo, Gapcursor, TrailingNode } from "@tiptap/extensions";
+import { markdownToDoc, docToMarkdown } from "./markdown-doc.js";
+import { isHttpImageSrc } from "./markdown.js";
+
+const UNSAFE_HREF_RE = /^\s*(javascript|data|vbscript):/i;
+
+// A filestore id is not a URL, so only http(s) sources load in the editor.
+const EditorImage = Image.extend({
+  renderHTML({ node, HTMLAttributes }) {
+    if (isHttpImageSrc(node.attrs.src)) return ["img", HTMLAttributes];
+    return ["div", { class: "md-image-placeholder" }, node.attrs.alt || "Image"];
+  },
+});
+
+const EditorTable = Table.extend({
+  addAttributes() {
+    return { ...this.parent?.(), align: { default: [], rendered: false } };
+  },
+});
+
+const singleParagraph = { content: "paragraph" };
+
+function extensions(placeholder) {
+  return [
+    Document,
+    Paragraph,
+    Text,
+    Bold.extend({ excludes: "italic code" }),
+    Italic.extend({ excludes: "bold code" }),
+    Code,
+    Heading.configure({ levels: [1, 2, 3] }),
+    BulletList,
+    OrderedList,
+    ListItem.extend(singleParagraph),
+    ListKeymap,
+    Link.configure({
+      openOnClick: false,
+      autolink: false,
+      isAllowedUri: (url) => !UNSAFE_HREF_RE.test(String(url)),
+      HTMLAttributes: { target: null, rel: "noopener noreferrer nofollow" },
+    }),
+    CodeBlock,
+    EditorImage.configure({ inline: false, allowBase64: false }),
+    EditorTable.configure({ resizable: false }),
+    TableRow,
+    TableHeader.extend(singleParagraph),
+    TableCell.extend(singleParagraph),
+    Gapcursor,
+    TrailingNode,
+    UndoRedo,
+    Placeholder.configure({ placeholder: placeholder || "" }),
+  ];
+}
+
+const COMMANDS = {
+  bold: (chain) => chain.toggleBold(),
+  italic: (chain) => chain.toggleItalic(),
+  code: (chain) => chain.toggleCode(),
+  heading2: (chain) => chain.toggleHeading({ level: 2 }),
+  heading3: (chain) => chain.toggleHeading({ level: 3 }),
+  bullet: (chain) => chain.toggleBulletList(),
+  ordered: (chain) => chain.toggleOrderedList(),
+  table: (chain) => chain.insertTable({ rows: 3, cols: 3, withHeaderRow: true }),
+  addRow: (chain) => chain.addRowAfter(),
+  addColumn: (chain) => chain.addColumnAfter(),
+  removeRow: (chain) => chain.deleteRow(),
+  removeColumn: (chain) => chain.deleteColumn(),
+  removeTable: (chain) => chain.deleteTable(),
+  undo: (chain) => chain.undo(),
+  redo: (chain) => chain.redo(),
+  link: (chain, { label, target } = {}, editor) => {
+    const href = String(target || "").trim();
+    if (!href || UNSAFE_HREF_RE.test(href)) return chain;
+    const text = String(label || "").trim();
+    const { from, to, empty } = editor.state.selection;
+    // An unchanged label links the selection in place, keeping its emphasis.
+    if (!empty && (!text || text === editor.state.doc.textBetween(from, to, " ").trim())) {
+      return chain.setLink({ href });
+    }
+    return chain.insertContent({ type: "text", text: text || href, marks: [{ type: "link", attrs: { href } }] });
+  },
+};
+
+/** The tool keys `<MarkdownInput>`'s toolbar may send. */
+export const MARKDOWN_EDITOR_COMMANDS = Object.freeze(Object.keys(COMMANDS));
+
+/**
+ * Mounts the editor in `element`. `onChange(markdown)` fires only for the
+ * author's edits, never for `setMarkdown` or a plugin's own normalising, so
+ * an untouched value is never rewritten. `onState({ inTable })` follows the
+ * selection, for the toolbar's table controls.
+ */
+export function createMarkdownEditor({
+  element,
+  markdown,
+  placeholder,
+  label,
+  onChange,
+  onFocusChange,
+  onState,
+}) {
+  let current = typeof markdown === "string" ? markdown : "";
+  const editor = new Editor({
+    element,
+    extensions: extensions(placeholder),
+    content: markdownToDoc(current, { stripLegacyHtml: false }),
+    editorProps: {
+      attributes: {
+        role: "textbox",
+        "aria-multiline": "true",
+        ...(label ? { "aria-label": label } : null),
+      },
+    },
+  });
+  // Focusing appends a trailing paragraph after a final table or list; only a
+  // transaction the author made counts as an edit.
+  editor.on("update", ({ transaction }) => {
+    if (!transaction.docChanged) return;
+    const next = docToMarkdown(editor.getJSON());
+    if (next === current) return;
+    current = next;
+    if (typeof onChange === "function") onChange(current);
+  });
+  if (typeof onState === "function") {
+    let inTable = false;
+    editor.on("transaction", () => {
+      const next = editor.isActive("table");
+      if (next !== inTable) onState({ inTable: (inTable = next) });
+    });
+  }
+  if (typeof onFocusChange === "function") {
+    editor.on("focus", () => onFocusChange(true));
+    editor.on("blur", () => onFocusChange(false));
+  }
+
+  return {
+    /** Replaces the content unless it already reads as `markdown`. */
+    setMarkdown(next) {
+      const text = typeof next === "string" ? next : "";
+      if (text === current) return;
+      current = text;
+      editor.commands.setContent(markdownToDoc(text, { stripLegacyHtml: false }), { emitUpdate: false });
+    },
+    command(name, args) {
+      const build = COMMANDS[name];
+      if (!build) return false;
+      return build(editor.chain().focus(), args, editor).run();
+    },
+    selectedText() {
+      const { from, to } = editor.state.selection;
+      return editor.state.doc.textBetween(from, to, " ");
+    },
+    focus() {
+      editor.commands.focus();
+    },
+    destroy() {
+      editor.destroy();
+    },
+    editor,
+  };
+}

package/dist/markdown-editor-css.js

@@ -0,0 +1,50 @@
+// sc-15080 — the stylesheet `<MarkdownInput>`'s editor is painted with.
+//
+// Kept apart from the editor module so the web host can style the field
+// before the lazily loaded editor arrives, and the native WebView page can
+// paint the same rules from the tokens it is sent.
+
+// Theme values are written into a stylesheet, so nothing may close the rule.
+const clean = (value) => String(value == null ? "" : value).replace(/[{}<>;\\]/g, "");
+const px = (value) => (typeof value === "number" ? `${value}px` : clean(value));
+// A theme font is already a CSS stack, such as `Inter, system-ui, sans-serif`.
+const font = (family) => clean(family) || "system-ui, sans-serif";
+
+/** The editor's stylesheet, scoped under `scope`, painted from richtext tokens. */
+export function markdownEditorCss(tokens, scope, { fontSize, minHeight, framed = false } = {}) {
+  const t = Object.fromEntries(
+    Object.entries(tokens).map(([key, value]) => [key, typeof value === "string" ? clean(value) : value]),
+  );
+  const size = fontSize || t.bodySize;
+  const s = scope;
+  const frame = framed
+    ? `${s}{border:1px solid ${t.border};border-radius:${px(t.radius)};background-color:${t.surface}}\n${s}:focus-within{border-color:${t.accent}}\n`
+    : "";
+  return `${frame}
+${s} .ProseMirror{outline:none;min-height:${px(minHeight || 0)};padding:${px(t.padding)};box-sizing:border-box;font-family:${font(t.bodyFont)};font-size:${px(size)};line-height:${px(Math.round(size * 1.6))};color:${t.color};white-space:pre-wrap;overflow-wrap:anywhere}
+${s} .ProseMirror>*:first-child{margin-top:0}
+${s} .ProseMirror>*:last-child{margin-bottom:0}
+${s} .ProseMirror p{margin:0 0 ${px(t.blockGap)}}
+${s} .ProseMirror h1,${s} .ProseMirror h2,${s} .ProseMirror h3{font-family:${font(t.headingFont)};font-weight:700;margin:0 0 ${px(t.blockGap)}}
+${s} .ProseMirror h1{font-size:${px(t.headingSizes[1])};line-height:1.3}
+${s} .ProseMirror h2{font-size:${px(t.headingSizes[2])};line-height:1.3}
+${s} .ProseMirror h3{font-size:${px(t.headingSizes[3])};line-height:1.3}
+${s} .ProseMirror ul,${s} .ProseMirror ol{margin:0 0 ${px(t.blockGap)};padding-left:1.4em}
+${s} .ProseMirror li p{margin:0}
+${s} .ProseMirror code{font-family:ui-monospace,Menlo,monospace;font-size:${px(t.codeSize)};color:${t.mutedColor}}
+${s} .ProseMirror pre{margin:0 0 ${px(t.blockGap)};padding:${px(t.blockGap)};border:1px solid ${t.border};border-radius:${px(t.radius)};white-space:pre-wrap}
+${s} .ProseMirror a{color:${t.accent};text-decoration:underline}
+${s} .ProseMirror table{border-collapse:collapse;width:100%;margin:0 0 ${px(t.blockGap)};table-layout:fixed}
+${s} .ProseMirror th,${s} .ProseMirror td{border:1px solid ${t.border};padding:4px 8px;vertical-align:top;text-align:left}
+${s} .ProseMirror th{font-weight:700}
+${s} .ProseMirror .selectedCell{background:${t.border}}
+${s} .ProseMirror img{display:block;max-width:100%;height:auto;margin:0 0 ${px(t.blockGap)};border-radius:${px(t.radius)}}
+${s} .ProseMirror img.ProseMirror-selectednode{outline:2px solid ${t.accent}}
+${s} .ProseMirror .md-image-placeholder{margin:0 0 ${px(t.blockGap)};padding:${px(t.padding)};border:1px dashed ${t.border};border-radius:${px(t.radius)};color:${t.mutedColor}}
+${s} .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);color:${t.mutedColor};float:left;height:0;pointer-events:none}
+${s} .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}
+${s} .ProseMirror-gapcursor:after{content:"";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid ${t.color};animation:md-cursor-blink 1.1s steps(2,start) infinite}
+${s} .ProseMirror-focused .ProseMirror-gapcursor{display:block}
+@keyframes md-cursor-blink{to{visibility:hidden}}
+`;
+}

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