@blue-patterns/richtext 0.0.0-stage → 0.7.18

package/src/markdownThematicBreak.ts

@@ -0,0 +1,66 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file markdownThematicBreak.ts
+ * @input Uses @lexical/extension (HorizontalRuleNode), @lexical/markdown
+ *   (ElementTransformer), and lexical.
+ * @output Exports THEMATIC_BREAK, the Markdown transformer that turns a
+ *   thematic break line into a horizontal rule and writes a rule back as `---`.
+ * @position Part of DEFAULT_TRANSFORMERS (markdownTable.ts), ahead of
+ *   Lexical's list transformers so `* * *` and `- - -` are rules, as in
+ *   CommonMark. Matches core Markdown's thematic breaks (spec:AST-061 FR5).
+ */
+
+import {
+  $createHorizontalRuleNode,
+  $isHorizontalRuleNode,
+  HorizontalRuleNode,
+} from '@lexical/extension';
+import type {ElementTransformer} from '@lexical/markdown';
+import {$isParagraphNode, $isTextNode} from 'lexical';
+
+/**
+ * Three or more `-`, `*`, or `_` of one kind, optionally spaced, indented at
+ * most three spaces (CommonMark 0.31, thematic breaks).
+ */
+const THEMATIC_BREAK_LINE = /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/;
+
+/**
+ * A setext heading underline made of dashes: no spaces between them, so
+ * `- - -` under a paragraph is still a thematic break (CommonMark 0.31).
+ */
+const SETEXT_UNDERLINE = /^ {0,3}-+[ \t]*$/;
+
+export const THEMATIC_BREAK: ElementTransformer = {
+  dependencies: [HorizontalRuleNode],
+  export: node => ($isHorizontalRuleNode(node) ? '---' : null),
+  regExp: THEMATIC_BREAK_LINE,
+  replace: (parentNode, children, match, isImport) => {
+    // A dash line right under a paragraph line underlines it as a heading
+    // (setext) rather than breaking. Lexical has already cut the matched text
+    // out of the line; put it back and leave the line to the paragraph, which
+    // keeps it as literal text.
+    const previous = parentNode.getPreviousSibling();
+    if (
+      isImport &&
+      SETEXT_UNDERLINE.test(match[0]) &&
+      $isParagraphNode(previous) &&
+      previous.getTextContentSize() > 0
+    ) {
+      const [line] = children;
+      if ($isTextNode(line)) {
+        // The pattern is anchored to the whole line, so its match is the line.
+        line.setTextContent(match[0]);
+      }
+      return false;
+    }
+    const rule = $createHorizontalRuleNode();
+    if (isImport || parentNode.getNextSibling() != null) {
+      parentNode.replace(rule);
+    } else {
+      parentNode.insertBefore(rule);
+    }
+    rule.selectNext();
+  },
+  type: 'element',
+};

package/src/privateAttributes/layerPortalBoundary.stylex.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file privateAttributes/layerPortalBoundary.stylex.ts
+ * @input The editable root Lexical reconciles
+ * @output rendererManagedRootProps, which marks that root
+ * @position Owner module of the private layer-portal-boundary attribute in
+ *   RichText: the only RichText file that writes its name. Core's Layer reads
+ *   the mark through its own owner module of the same name. No package entry
+ *   exports it.
+ */
+
+/** Spread on the editable root, whose DOM Lexical reconciles. */
+export const rendererManagedRootProps: Readonly<
+  Record<`data-${string}`, string>
+> = {
+  'data-astryx-layer-portal-boundary': 'external',
+};

package/src/textSemantics.ts

@@ -0,0 +1,104 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file textSemantics.ts
+ * @input Uses lexical (TextNode, configExtension) and @lexical/html
+ *   (DOMRenderExtension, domOverride).
+ * @output Exports TextSemanticsExtension, which renders struck-through text
+ *   inside a `<del>` and bold italic text inside an `<em>`, the elements core
+ *   Markdown renders for them.
+ * @position A dependency of the RichTextEditor and RichTextView extensions.
+ *   Lexical draws struck text as a styled `<span>`, or as the `<strong>`,
+ *   `<em>`, or `<code>` its other marks call for, and draws bold italic text
+ *   as a `<strong>` alone, so assistive technology hears no deletion, and no
+ *   emphasis on bold italic text, where core Markdown exposes them
+ *   (spec:AST-061 FR7). Giving Lexical's element another role would replace
+ *   the one it already has; instead each text node's element, exactly as
+ *   Lexical builds it, sits inside the elements it is missing — a `<del>`,
+ *   then an `<em>` — so every mark is exposed together. Struck text inside a
+ *   link is a deletion inside the link. The document, its Markdown, and the
+ *   selection model are unchanged: the text node's element is still the one
+ *   Lexical created and updates, and Lexical finds its text by walking down
+ *   from the outermost element.
+ */
+
+import {DOMRenderExtension, domOverride} from '@lexical/html';
+import {
+  configExtension,
+  TEXT_TYPE_TO_FORMAT,
+  TextNode,
+  type AnyLexicalExtensionArgument,
+} from 'lexical';
+
+const STRIKETHROUGH = TEXT_TYPE_TO_FORMAT.strikethrough;
+const BOLD_ITALIC = TEXT_TYPE_TO_FORMAT.bold | TEXT_TYPE_TO_FORMAT.italic;
+
+/**
+ * The elements this version of `node` sits inside, outermost first. Reads the
+ * version's own field: Lexical's getters read the latest version, so
+ * `prevNode.hasFormat()` would answer for the next one.
+ */
+function wrappersOf(node: TextNode): ReadonlyArray<'del' | 'em'> {
+  const format = node.__format;
+  const wrappers: Array<'del' | 'em'> = [];
+  if ((format & STRIKETHROUGH) !== 0) {
+    wrappers.push('del');
+  }
+  // Lexical draws bold italic text as a `<strong>` with an italic class.
+  if ((format & BOLD_ITALIC) === BOLD_ITALIC) {
+    wrappers.push('em');
+  }
+  return wrappers;
+}
+
+function sameWrappers(
+  a: ReadonlyArray<string>,
+  b: ReadonlyArray<string>,
+): boolean {
+  return a.length === b.length && a.every((tag, index) => tag === b[index]);
+}
+
+// Typed as an extension argument: its inferred type names Lexical types the
+// package's declarations cannot (TS4023).
+export const TextSemanticsExtension: AnyLexicalExtensionArgument =
+  configExtension(DOMRenderExtension, {
+    overrides: [
+      domOverride([TextNode], {
+        $createDOM(node, $next) {
+          let element = $next();
+          for (const tag of [...wrappersOf(node)].reverse()) {
+            const wrapper = document.createElement(tag);
+            wrapper.append(element);
+            element = wrapper;
+          }
+          return element;
+        },
+        $updateDOM(nextNode, prevNode, dom, $next, editor) {
+          const wrappers = wrappersOf(nextNode);
+          if (!sameWrappers(wrappers, wrappersOf(prevNode))) {
+            // Adding or removing a wrapper recreates the element.
+            return true;
+          }
+          if (wrappers.length === 0) {
+            return $next();
+          }
+          // Lexical updates its own element, inside the wrappers.
+          let element: Element | null = dom;
+          for (const tag of wrappers) {
+            if (element?.tagName.toLowerCase() !== tag) {
+              return true;
+            }
+            element = element.firstElementChild;
+          }
+          if (element == null) {
+            return true;
+          }
+          return nextNode.updateDOM(
+            prevNode,
+            element as HTMLElement,
+            editor._config,
+          );
+        },
+      }),
+    ],
+  });