@blue-patterns/richtext 0.0.0-stage → 0.7.18

package/dist/internal/CodeBlockHeaderPlugin.js

@@ -0,0 +1,204 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file CodeBlockHeaderPlugin.tsx
+ * @input Uses @lexical/react (composer context), @lexical/code (CodeNode),
+ *   lexical, and core IconButton, Icon, useClipboard, and useTranslator.
+ * @output Exports CodeBlockHeaderPlugin, which draws core CodeBlock's header
+ *   over every fenced code block: the language label and a copy button, or
+ *   just the copy button in the corner when the block names no language.
+ * @position Rendered by RichTextEditor and RichTextView inside the positioned
+ *   element that holds the content editable. The headers are siblings of the
+ *   editable text, never inside it, so they are not part of the document and
+ *   cannot be edited (spec:AST-061 FR8, DEC-4). The code block's theme class
+ *   reserves the header's height, so the code sits where core Markdown's does.
+ */
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isCodeNode } from '@lexical/code';
+import { $getNodeByKey, $getRoot } from 'lexical';
+import { Icon } from '@blue-patterns/core/Icon';
+import { IconButton } from '@blue-patterns/core/IconButton';
+import { useClipboard } from '@blue-patterns/core/hooks';
+import { useTranslator } from '@blue-patterns/core/i18n';
+import { listedLanguage } from "../codeLanguages.js";
+import '@blue-patterns/core/theme/tokens.stylex';
+import { fontWeightVars, spacingVars, typeScaleVars, typographyVars } from '@blue-patterns/core/theme/tokens.stylex';
+
+/** Where one code block's header goes, in the container's coordinates. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const styles = {
+  header: {
+    kVAEAm: "x10l6tqk",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "x1qughib",
+    k8WAf4: "xce4md1",
+    kg3NbH: "x1pzlopt",
+    kB7OPa: "x9f619",
+    $$css: true
+  },
+  corner: {
+    kVAEAm: "x10l6tqk",
+    k1xSpc: "x78zum5",
+    kjj79g: "x13a6bvl",
+    kmVPX3: "xlsj2fj",
+    kB7OPa: "x9f619",
+    kfzvcC: "x47corl",
+    $$css: true
+  },
+  cornerButton: {
+    kfzvcC: "x67bb7w",
+    $$css: true
+  },
+  copyButton: {
+    kMwMTN: "x1mjzq1q",
+    $$css: true
+  },
+  placement: (top, left, width) => [{
+    k87sOh: top != null ? "xjbys53" : top,
+    kbCHJM: left != null ? "xgq9j65" : left,
+    kzqmXN: width != null ? "x5lhr3w" : width,
+    $$css: true
+  }, {
+    "--x-top": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(top),
+    "--x-left": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(left),
+    "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width)
+  }]
+};
+
+/**
+ * The language a header names, as core CodeBlock decides it: none for a fence
+ * without one, and none for exactly `plaintext`, which core Markdown gives a
+ * fence with no info string.
+ */
+function displayLanguageOf(language) {
+  return language == null || language === '' || language === PLAIN_TEXT ? null : language;
+}
+const PLAIN_TEXT = 'plaintext';
+function samePlacements(a, b) {
+  return a.length === b.length && a.every((placement, index) => placement.key === b[index].key && placement.language === b[index].language && placement.top === b[index].top && placement.left === b[index].left && placement.width === b[index].width);
+}
+function CodeBlockHeader({
+  placement,
+  label
+}) {
+  const [editor] = useLexicalComposerContext();
+  const t = useTranslator();
+  const {
+    copy,
+    isCopied
+  } = useClipboard({
+    announce: t('@astryx.codeBlock.copied')
+  });
+  const copyButton = /*#__PURE__*/_jsx(IconButton, {
+    variant: "ghost",
+    size: "sm",
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: isCopied ? 'check' : 'copy',
+      size: "sm",
+      color: "inherit"
+    }),
+    tooltip: t('@astryx.codeBlock.copyCode'),
+    label: isCopied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode'),
+    onClick: () => {
+      const code = editor.getEditorState().read(() => $getNodeByKey(placement.key)?.getTextContent() ?? '');
+      void copy(code);
+    },
+    xstyle: [styles.copyButton, placement.language == null && styles.cornerButton]
+  });
+  const position = styles.placement(placement.top, placement.left, placement.width);
+  if (placement.language == null) {
+    return /*#__PURE__*/_jsx("div", {
+      "data-richtext-code-header": "",
+      ...stylex.props(styles.corner, position),
+      children: copyButton
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    "data-richtext-code-header": "",
+    ...stylex.props(styles.header, position),
+    children: [/*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x141an7d x9m5x89 x1e4wzip x1ltkj2j x1mjzq1q xeuugli xb3r6kr xlyipyv xuxw1ft"
+      },
+      children: label ?? placement.language
+    }), copyButton]
+  });
+}
+
+/**
+ * Draws a header over each top-level code block and keeps it there as the
+ * document, the editor's size, or the window changes.
+ */
+export function CodeBlockHeaderPlugin({
+  codeLanguages
+} = {}) {
+  const [editor] = useLexicalComposerContext();
+  const [placements, setPlacements] = useState([]);
+  useEffect(() => {
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const root = editor.getRootElement();
+      const container = root?.parentElement;
+      if (root == null || container == null) {
+        setPlacements(current => current.length === 0 ? current : []);
+        return;
+      }
+      const origin = container.getBoundingClientRect();
+      const next = editor.getEditorState().read(() => $getRoot().getChildren().filter($isCodeNode).flatMap(node => {
+        const element = editor.getElementByKey(node.getKey());
+        if (element == null) {
+          return [];
+        }
+        const box = element.getBoundingClientRect();
+        // Inside the block's border, so the header lines up with the
+        // padding the theme reserves for it.
+        return [{
+          key: node.getKey(),
+          language: displayLanguageOf(node.getLanguage()),
+          top: box.top - origin.top + element.clientTop,
+          left: box.left - origin.left + element.clientLeft,
+          width: element.clientWidth
+        }];
+      }));
+      setPlacements(current => samePlacements(current, next) ? current : next);
+    };
+    const schedule = () => {
+      if (frame === 0) {
+        frame = requestAnimationFrame(measure);
+      }
+    };
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+    const unregisterRoot = editor.registerRootListener(root => {
+      observer?.disconnect();
+      if (root != null) {
+        observer?.observe(root);
+      }
+      schedule();
+    });
+    const unregisterUpdate = editor.registerUpdateListener(schedule);
+    window.addEventListener('resize', schedule);
+    schedule();
+    return () => {
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      unregisterRoot();
+      unregisterUpdate();
+      window.removeEventListener('resize', schedule);
+    };
+  }, [editor]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: placements.map(placement => /*#__PURE__*/_jsx(CodeBlockHeader, {
+      placement: placement
+      // A fence matched in `codeLanguages` shows the value's name, as
+      // Markdown does (spec:AST-061).
+      ,
+      label: placement.language == null ? undefined : listedLanguage(codeLanguages, placement.language)?.name
+    }, placement.key))
+  });
+}

package/dist/internal/CodePastePlugin.d.ts

@@ -0,0 +1,5 @@
+import { type BaseSelection, type RangeSelection } from 'lexical';
+/** Whether content inserted at the selection lands in a code block. */
+export declare function $startsInCodeBlock(selection: BaseSelection | null): selection is RangeSelection;
+export declare function CodePastePlugin(): null;
+//# sourceMappingURL=CodePastePlugin.d.ts.map

package/dist/internal/CodePastePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodePastePlugin.d.ts","sourceRoot":"","sources":["../../src/internal/CodePastePlugin.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAaL,KAAK,aAAa,EAElB,KAAK,cAAc,EACpB,MAAM,SAAS,CAAC;AAKjB,uEAAuE;AACvE,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,aAAa,GAAG,IAAI,GAC9B,SAAS,IAAI,cAAc,CAQ7B;AAqCD,wBAAgB,eAAe,IAAI,IAAI,CAuDtC"}

package/dist/internal/CodePastePlugin.js

@@ -0,0 +1,104 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file CodePastePlugin.tsx
+ * @input Uses @lexical/react (composer context), @lexical/code (CodeNode), and
+ *   lexical.
+ * @output Exports CodePastePlugin, which makes rich content pasted or dropped
+ *   into a code block go in as plain lines of code, and $startsInCodeBlock,
+ *   which TablePastePlugin uses to leave such a paste to it.
+ * @position Rendered by RichTextEditor; always on; not exported. A paste
+ *   whose selection starts in a code block goes in as plain text: the
+ *   clipboard's plain text, or else one line per pasted block.
+ */
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isCodeNode } from '@lexical/code';
+import { $addUpdateTag, $findMatchingParent, $getSelection, $isElementNode, $isRangeSelection, $isSelectionCapturedInDecoratorInput, COMMAND_PRIORITY_LOW, isDOMNode, mergeRegister, PASTE_COMMAND, PASTE_TAG, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND } from 'lexical';
+
+/** Clipboard types that carry more than plain text. */
+const RICH_TYPES = ['text/html', 'application/x-lexical-editor'];
+
+/** Whether content inserted at the selection lands in a code block. */
+export function $startsInCodeBlock(selection) {
+  if (!$isRangeSelection(selection)) {
+    return false;
+  }
+  const start = selection.isBackward() ? selection.focus : selection.anchor;
+  const node = start.getNode();
+  // A link (an autolinked URL) can sit between the text and its code block.
+  return $findMatchingParent(node, $isCodeNode) !== null;
+}
+
+/**
+ * Clipboard nodes as plain lines: each block's text on a line of its own (a
+ * paragraph, a heading, a list item, a table cell), and inline content
+ * between blocks on one line.
+ */
+function $plainLinesOf(nodes) {
+  const lines = [];
+  let inline = null;
+  const endInline = () => {
+    if (inline != null) {
+      lines.push(inline);
+      inline = null;
+    }
+  };
+  const visit = node => {
+    if (node.isInline()) {
+      inline = (inline ?? '') + node.getTextContent();
+      return;
+    }
+    endInline();
+    if ($isElementNode(node) && node.getChildren().some(child => !child.isInline())) {
+      node.getChildren().forEach(visit);
+      endInline();
+    } else {
+      lines.push(node.getTextContent());
+    }
+  };
+  nodes.forEach(visit);
+  endInline();
+  return lines.join('\n');
+}
+export function CodePastePlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => mergeRegister(
+  // Ahead of the rich-text paste, which inserts the clipboard's rich
+  // content when there is any.
+  editor.registerCommand(PASTE_COMMAND, event => {
+    // A paste into an input a decorator node renders is that input's.
+    if (isDOMNode(event.target) && $isSelectionCapturedInDecoratorInput(event.target)) {
+      return false;
+    }
+    const data = 'clipboardData' in event ? event.clipboardData : null;
+    if (!editor.isEditable() || data == null || !RICH_TYPES.some(type => data.types.includes(type))) {
+      return false;
+    }
+    const text = data.getData('text/plain');
+    const selection = $getSelection();
+    if (text === '' || !$startsInCodeBlock(selection)) {
+      return false;
+    }
+    event.preventDefault();
+    // Its own undo step, as every paste is.
+    $addUpdateTag(PASTE_TAG);
+    selection.insertRawText(text);
+    return true;
+  }, COMMAND_PRIORITY_LOW),
+  // Every insertion of clipboard nodes, a paste with no plain text or a
+  // drop, comes through here; ahead of the table's own handler.
+  editor.registerCommand(SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, ({
+    nodes,
+    selection
+  }) => {
+    if (!$startsInCodeBlock(selection)) {
+      return false;
+    }
+    selection.insertRawText($plainLinesOf(nodes));
+    return true;
+  }, COMMAND_PRIORITY_LOW)), [editor]);
+  return null;
+}

package/dist/internal/CodeSyntaxPlugin.d.ts

@@ -0,0 +1,8 @@
+import { type CodeLanguage } from '@blue-patterns/core/CodeBlock';
+/** The class the theme adds to every code block (editorTheme.ts). */
+export declare const CODE_SYNTAX_CLASS = "astryx-richtext-code";
+export declare function CodeSyntaxPlugin({ codeLanguages, }?: {
+    /** Language values a fence may name (component:Markdown FR30). */
+    codeLanguages?: ReadonlyArray<CodeLanguage>;
+}): null;
+//# sourceMappingURL=CodeSyntaxPlugin.d.ts.map

package/dist/internal/CodeSyntaxPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeSyntaxPlugin.d.ts","sourceRoot":"","sources":["../../src/internal/CodeSyntaxPlugin.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,+BAA+B,CAAC;AAIvC,qEAAqE;AACrE,eAAO,MAAM,iBAAiB,yBAAyB,CAAC;AAgMxD,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,GACd,GAAE;IACD,kEAAkE;IAClE,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACxC,GAAG,IAAI,CAyPZ"}