@colixsystems/widget-sdk 0.275.1 → 0.276.0

package/dist/markdown-doc.js

@@ -0,0 +1,209 @@
+// sc-15080 — the bridge between the markdown subset and the editor's document.
+//
+// `<MarkdownInput>` edits a rich document but stores markdown, so `<RichText>`,
+// saved rows and every widget's `value`/`onChange` stay as they were. Reading
+// goes through `parseMarkdown`, the SAME grammar `<RichText>` renders, so the
+// editor can never show a construct differently from the reader (CLAUDE.md §3).
+// Writing emits the canonical spelling of each construct; a value the author
+// never edits is never re-written.
+//
+// Pure and DOM-free: both hosts' editors and the unit tests import it.
+
+import {
+  parseMarkdown,
+  formatMarkdownImage,
+  escapeMarkdownLabel,
+} from "./markdown.js";
+
+const textNode = (text, marks) =>
+  marks.length > 0 ? { type: "text", text, marks } : { type: "text", text };
+
+function inlineContent(spans) {
+  const nodes = [];
+  for (const span of spans || []) {
+    if (!span.text) continue;
+    const marks = [];
+    if (span.bold) marks.push({ type: "bold" });
+    if (span.italic) marks.push({ type: "italic" });
+    if (span.code) marks.push({ type: "code" });
+    if (span.href) marks.push({ type: "link", attrs: { href: span.href } });
+    nodes.push(textNode(span.text, marks));
+  }
+  return nodes;
+}
+
+const paragraph = (spans) => {
+  const content = inlineContent(spans);
+  return content.length > 0 ? { type: "paragraph", content } : { type: "paragraph" };
+};
+
+function tableNode(block) {
+  const width = Math.max(1, ...block.rows.map((row) => row.cells.length));
+  const rows = block.rows.map((row) => {
+    const cells = [];
+    for (let i = 0; i < width; i += 1) {
+      cells.push({
+        type: row.header ? "tableHeader" : "tableCell",
+        content: [paragraph(row.cells[i])],
+      });
+    }
+    return { type: "tableRow", content: cells };
+  });
+  const align = [];
+  for (let i = 0; i < width; i += 1) align.push(block.align[i] || null);
+  return { type: "table", attrs: { align }, content: rows };
+}
+
+const ordinal = (marker) => Number.parseInt(marker, 10) || 1;
+
+/**
+ * Markdown text → the editor's ProseMirror JSON document. `options` go to
+ * `parseMarkdown`; the editor passes `stripLegacyHtml: false`, because the
+ * strip would delete text like `Promise<void>` the author typed.
+ */
+export function markdownToDoc(text, options) {
+  const content = [];
+  let list = null;
+  for (const block of parseMarkdown(text, options)) {
+    const listType = block.type === "bullet" ? "bulletList" : block.type === "ordered" ? "orderedList" : null;
+    if (listType) {
+      if (!list || list.type !== listType) {
+        list = { type: listType, content: [] };
+        if (listType === "orderedList") list.attrs = { start: ordinal(block.marker) };
+        content.push(list);
+      }
+      list.content.push({ type: "listItem", content: [paragraph(block.spans)] });
+      continue;
+    }
+    list = null;
+    if (block.type === "heading") {
+      content.push({ type: "heading", attrs: { level: block.level }, content: inlineContent(block.spans) });
+    } else if (block.type === "paragraph") {
+      content.push(paragraph(block.spans));
+    } else if (block.type === "table") {
+      content.push(tableNode(block));
+    } else if (block.type === "image") {
+      content.push({ type: "image", attrs: { src: block.src, alt: block.alt, title: block.size } });
+    } else if (block.type === "code") {
+      content.push({
+        type: "codeBlock",
+        attrs: { language: block.lang || null },
+        ...(block.text ? { content: [{ type: "text", text: block.text }] } : null),
+      });
+    }
+  }
+  return { type: "doc", content: content.length > 0 ? content : [{ type: "paragraph" }] };
+}
+
+const markOf = (node, type) => (node.marks || []).find((mark) => mark.type === type);
+
+// The grammar's emphasis cannot open or close next to whitespace, so edge
+// spaces move outside the markers instead of breaking the construct.
+function wrap(text, marker) {
+  const lead = /^\s*/.exec(text)[0];
+  const trail = /\s*$/.exec(text.slice(lead.length))[0];
+  const core = text.slice(lead.length, text.length - trail.length);
+  return core ? `${lead}${marker}${core}${marker}${trail}` : text;
+}
+
+function styledText(node, inTable) {
+  let text = node.text || "";
+  if (inTable) text = text.replace(/\|/g, "\\|");
+  if (markOf(node, "code")) return wrap(text.replace(/`/g, "'"), "`");
+  if (markOf(node, "bold")) return wrap(text, "**");
+  if (markOf(node, "italic")) return wrap(text, "*");
+  return text;
+}
+
+// The grammar ends a target at whitespace or `)`, and a table cell at `|`.
+const linkTarget = (href) =>
+  String(href || "").replace(/[\s|()<>]/g, (char) => `%${char.charCodeAt(0).toString(16).toUpperCase().padStart(2, "0")}`);
+
+function inlineMarkdown(nodes, inTable) {
+  let out = "";
+  let link = null;
+  let label = "";
+  const closeLink = () => {
+    if (link) out += `[${escapeMarkdownLabel(label)}](${linkTarget(link)})`;
+    link = null;
+    label = "";
+  };
+  for (const node of nodes || []) {
+    if (node.type !== "text") continue;
+    const href = markOf(node, "link")?.attrs?.href || null;
+    if (href !== link) closeLink();
+    if (href) {
+      link = href;
+      label += styledText(node, inTable);
+    } else {
+      out += styledText(node, inTable);
+    }
+  }
+  closeLink();
+  return out.replace(/\n/g, " ");
+}
+
+const cellMarkdown = (cell) =>
+  (cell.content || []).map((child) => inlineMarkdown(child.content, true)).join(" ").trim();
+
+function alignDivider(align) {
+  if (align === "center") return ":---:";
+  if (align === "right") return "---:";
+  if (align === "left") return ":---";
+  return "---";
+}
+
+function tableMarkdown(node) {
+  const rows = (node.content || []).map((row) => (row.content || []).map(cellMarkdown));
+  if (rows.length === 0) return "";
+  const width = rows[0].length;
+  const align = node.attrs?.align || [];
+  const line = (cells) => `| ${cells.join(" | ")} |`;
+  const divider = [];
+  for (let i = 0; i < width; i += 1) divider.push(alignDivider(align[i]));
+  return [line(rows[0]), line(divider), ...rows.slice(1).map(line)].join("\n");
+}
+
+const listItemText = (item) =>
+  (item.content || []).map((child) => inlineMarkdown(child.content, false)).join(" ").trim();
+
+// An empty item or heading would read back as a stray `3.` or `##` paragraph.
+const filledItems = (list) => (list.content || []).map(listItemText).filter((text) => text !== "");
+
+function blockMarkdown(node) {
+  switch (node.type) {
+    case "heading": {
+      const text = inlineMarkdown(node.content, false).trim();
+      return text ? `${"#".repeat(node.attrs?.level || 1)} ${text}` : "";
+    }
+    case "paragraph":
+      return inlineMarkdown(node.content, false);
+    case "bulletList":
+      return filledItems(node).map((text) => `- ${text}`).join("\n");
+    case "orderedList": {
+      const start = node.attrs?.start || 1;
+      return filledItems(node).map((text, i) => `${start + i}. ${text}`).join("\n");
+    }
+    case "table":
+      return tableMarkdown(node);
+    case "image":
+      // An unsafe source was emptied on read; written back it would be prose.
+      return node.attrs?.src
+        ? formatMarkdownImage({ src: node.attrs.src, alt: node.attrs.alt, size: node.attrs.title })
+        : "";
+    case "codeBlock": {
+      const body = (node.content || []).map((child) => child.text || "").join("");
+      return `\`\`\`${node.attrs?.language || ""}\n${body}\n\`\`\``;
+    }
+    default:
+      return "";
+  }
+}
+
+/** The editor's ProseMirror JSON document → markdown text. */
+export function docToMarkdown(doc) {
+  return (doc?.content || [])
+    .map(blockMarkdown)
+    .filter((block) => block.trim() !== "")
+    .join("\n\n");
+}

package/dist/markdown-editor-bridge.js

@@ -0,0 +1,162 @@
+// sc-15080 — the bridge between `<MarkdownInput>`'s native field and the editor
+// page it hosts in a WebView (./markdown-editor-webview.js).
+//
+// React Native has no editable rich-text view, so the shared editor runs in a
+// WebView from a page bundled into the SDK: no network, no remote code. The
+// field grows with its content between `minHeight` and `maxHeight`, then the
+// page scrolls. The primitives are passed in, so the bridge is testable
+// without a device; ./markdown-editor-field.native.js binds the real ones.
+
+import React from "react";
+import { MARKDOWN_EDITOR_HTML } from "./markdown-editor-html.js";
+
+const SOURCE = { html: MARKDOWN_EDITOR_HTML };
+
+/** The script that hands `message` to the page; JSON twice makes it a literal. */
+export function editorMessageScript(message) {
+  return `window.mdEditor&&window.mdEditor.receive(${JSON.stringify(JSON.stringify(message))});true;`;
+}
+
+function readMessage(event) {
+  try {
+    const message = JSON.parse(event.nativeEvent.data);
+    return message && typeof message.type === "string" ? message : null;
+  } catch {
+    return null;
+  }
+}
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+/** Builds the field from React Native's `View` and the WebView component. */
+export function makeMarkdownEditorField({ View, WebView }) {
+  return React.forwardRef(function MarkdownEditorField(
+    {
+      value,
+      onChangeText,
+      onStateChange,
+      placeholder,
+      accessibilityLabel,
+      tokens,
+      minHeight,
+      maxHeight,
+      testID,
+    },
+    ref,
+  ) {
+    const web = React.useRef(null);
+    const loaded = React.useRef(false);
+    const ready = React.useRef(false);
+    const shown = React.useRef(value);
+    const selection = React.useRef("");
+    const [height, setHeight] = React.useState(minHeight);
+    const [focused, setFocused] = React.useState(false);
+
+    const send = React.useCallback((message) => {
+      if (ready.current && web.current)
+        web.current.injectJavaScript(editorMessageScript(message));
+    }, []);
+
+    React.useEffect(() => {
+      if (value === shown.current) return;
+      shown.current = value;
+      send({ type: "set", markdown: value });
+    }, [value, send]);
+
+    // A theme switch repaints the page, as it does the web field.
+    React.useEffect(() => {
+      send({ type: "style", tokens, minHeight });
+    }, [tokens, minHeight, send]);
+
+    // The OS may kill the page's process; reload it and re-send the value.
+    const restart = React.useCallback(() => {
+      ready.current = false;
+      loaded.current = false;
+      if (web.current) web.current.reload();
+    }, []);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        command: (name, args) => {
+          send({ type: "command", name, args });
+          return ready.current;
+        },
+        selectedText: () => selection.current,
+      }),
+      [send],
+    );
+
+    const onMessage = (event) => {
+      const message = readMessage(event);
+      if (!message) return;
+      if (message.type === "ready") {
+        ready.current = true;
+        send({
+          type: "init",
+          markdown: shown.current,
+          placeholder,
+          label: accessibilityLabel,
+          tokens,
+          minHeight,
+        });
+      } else if (
+        message.type === "change" &&
+        typeof message.markdown === "string"
+      ) {
+        shown.current = message.markdown;
+        if (typeof onChangeText === "function") onChangeText(message.markdown);
+      } else if (message.type === "height" && Number.isFinite(message.height)) {
+        setHeight(clamp(message.height, minHeight, maxHeight));
+      } else if (message.type === "focus") {
+        setFocused(message.focused === true);
+      } else if (
+        message.type === "selection" &&
+        typeof message.text === "string"
+      ) {
+        selection.current = message.text;
+      } else if (message.type === "state" && typeof onStateChange === "function") {
+        onStateChange({ inTable: message.inTable === true });
+      }
+    };
+
+    return React.createElement(
+      View,
+      {
+        testID,
+        style: {
+          height,
+          borderWidth: 1,
+          borderColor: focused ? tokens.accent : tokens.border,
+          borderRadius: tokens.radius,
+          backgroundColor: tokens.surface,
+          overflow: "hidden",
+        },
+      },
+      React.createElement(WebView, {
+        ref: web,
+        source: SOURCE,
+        originWhitelist: ["*"],
+        // The page is the editor; nothing in it may navigate the field away.
+        onShouldStartLoadWithRequest: () => !loaded.current,
+        onLoadEnd: () => {
+          loaded.current = true;
+        },
+        onMessage,
+        onContentProcessDidTerminate: restart,
+        onRenderProcessGone: restart,
+        javaScriptEnabled: true,
+        setSupportMultipleWindows: false,
+        keyboardDisplayRequiresUserAction: false,
+        hideKeyboardAccessoryView: true,
+        automaticallyAdjustContentInsets: false,
+        textZoom: 100,
+        scrollEnabled: height >= maxHeight,
+        // Android hands a parent ScrollView's gesture to the page only with this.
+        nestedScrollEnabled: true,
+        style: { backgroundColor: "transparent" },
+        testID: testID ? `${testID}-webview` : undefined,
+      }),
+    );
+  });
+}

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}}
+`;
+}