onchain-lexical-markdown 0.0.1

package/src/fromMarkdownString.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {ElementNode} from 'lexical';
+import {Instance} from 'onchain-lexical-instance';
+
+import {createMarkdownImport} from './MarkdownImport';
+import {normalizeMarkdown, Transformer} from './MarkdownTransformers';
+import {TransFormerGather} from './transformer';
+
+/**
+ * Renders markdown from a string. The selection is moved to the start after the operation.
+ *
+ *  @param {boolean} [shouldPreserveNewLines] By setting this to true, new lines will be preserved between conversions
+ *  @param {boolean} [shouldMergeAdjacentLines] By setting this to true, adjacent non empty lines will be merged according to commonmark spec: https://spec.commonmark.org/0.24/#example-177. Not applicable if shouldPreserveNewLines = true.
+ */
+export function $convertFromMarkdownString(
+  markdown: string,
+  transformers: Array<Transformer> = TransFormerGather.value,
+  node?: ElementNode,
+  shouldPreserveNewLines = false,
+  shouldMergeAdjacentLines = false,
+  instanceMap?: Map<string, Instance>,
+): void {
+  const sanitizedMarkdown = shouldPreserveNewLines
+    ? markdown
+    : normalizeMarkdown(markdown, shouldMergeAdjacentLines);
+  const importMarkdown = createMarkdownImport(
+    transformers,
+    shouldPreserveNewLines,
+    instanceMap,
+  );
+  return importMarkdown(sanitizedMarkdown, node);
+}

package/src/importTextFormatTransformer.ts

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {TextFormatTransformersIndex} from './MarkdownImport';
+import type {TextFormatTransformer} from './MarkdownTransformers';
+import type {TextNode} from 'lexical';
+
+import {PUNCTUATION_OR_SPACE} from './utils';
+
+export function findOutermostTextFormatTransformer(
+  textNode: TextNode,
+  textFormatTransformersIndex: TextFormatTransformersIndex,
+): {
+  startIndex: number;
+  endIndex: number;
+  transformer: TextFormatTransformer;
+  match: RegExpMatchArray;
+} | null {
+  const textContent = textNode.getTextContent();
+  const match = findOutermostMatch(textContent, textFormatTransformersIndex);
+
+  if (!match) {
+    return null;
+  }
+
+  const textFormatMatchStart: number = match.index || 0;
+  const textFormatMatchEnd = textFormatMatchStart + match[0].length;
+
+  const transformer: TextFormatTransformer =
+    textFormatTransformersIndex.transformersByTag[match[1]];
+
+  return {
+    endIndex: textFormatMatchEnd,
+    match,
+    startIndex: textFormatMatchStart,
+    transformer,
+  };
+}
+
+// Finds first "<tag>content<tag>" match that is not nested into another tag
+function findOutermostMatch(
+  textContent: string,
+  textTransformersIndex: TextFormatTransformersIndex,
+): RegExpMatchArray | null {
+  const openTagsMatch = textContent.match(textTransformersIndex.openTagsRegExp);
+
+  if (openTagsMatch == null) {
+    return null;
+  }
+
+  for (const match of openTagsMatch) {
+    // Open tags reg exp might capture leading space so removing it
+    // before using match to find transformer
+    const tag = match.replace(/^\s/, '');
+    const fullMatchRegExp = textTransformersIndex.fullMatchRegExpByTag[tag];
+    if (fullMatchRegExp == null) {
+      continue;
+    }
+
+    const fullMatch = textContent.match(fullMatchRegExp);
+    const transformer = textTransformersIndex.transformersByTag[tag];
+    if (fullMatch != null && transformer != null) {
+      if (transformer.intraword !== false) {
+        return fullMatch;
+      }
+
+      // For non-intraword transformers checking if it's within a word
+      // or surrounded with space/punctuation/newline
+      const {index = 0} = fullMatch;
+      const beforeChar = textContent[index - 1];
+      const afterChar = textContent[index + fullMatch[0].length];
+
+      if (
+        (!beforeChar || PUNCTUATION_OR_SPACE.test(beforeChar)) &&
+        (!afterChar || PUNCTUATION_OR_SPACE.test(afterChar))
+      ) {
+        return fullMatch;
+      }
+    }
+  }
+
+  return null;
+}
+
+export function importTextFormatTransformer(
+  textNode: TextNode,
+  startIndex: number,
+  endIndex: number,
+  transformer: TextFormatTransformer,
+  match: RegExpMatchArray,
+): {
+  transformedNode: TextNode;
+  nodeBefore: TextNode | undefined; // If split
+  nodeAfter: TextNode | undefined; // If split
+} {
+  const textContent = textNode.getTextContent();
+
+  // No text matches - we can safely process the text format match
+  let transformedNode, nodeAfter, nodeBefore;
+
+  // If matching full content there's no need to run splitText and can reuse existing textNode
+  // to update its content and apply format. E.g. for **_Hello_** string after applying bold
+  // format (**) it will reuse the same text node to apply italic (_)
+  if (match[0] === textContent) {
+    transformedNode = textNode;
+  } else {
+    if (startIndex === 0) {
+      [transformedNode, nodeAfter] = textNode.splitText(endIndex);
+    } else {
+      [nodeBefore, transformedNode, nodeAfter] = textNode.splitText(
+        startIndex,
+        endIndex,
+      );
+    }
+  }
+
+  transformedNode.setTextContent(match[2]);
+
+  if (transformer) {
+    for (const format of transformer.format) {
+      if (!transformedNode.hasFormat(format)) {
+        transformedNode.toggleFormat(format);
+      }
+    }
+  }
+
+  return {
+    nodeAfter: nodeAfter,
+    nodeBefore: nodeBefore,
+    transformedNode: transformedNode,
+  };
+}

package/src/importTextMatchTransformer.ts

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type {TextMatchTransformer} from './MarkdownTransformers';
+
+import {type TextNode} from 'lexical';
+
+export function findOutermostTextMatchTransformer(
+  textNode_: TextNode,
+  textMatchTransformers: Array<TextMatchTransformer>,
+): {
+  startIndex: number;
+  endIndex: number;
+  transformer: TextMatchTransformer;
+  match: RegExpMatchArray;
+} | null {
+  const textNode = textNode_;
+
+  let foundMatchStartIndex: number | undefined = undefined;
+  let foundMatchEndIndex: number | undefined = undefined;
+  let foundMatchTransformer: TextMatchTransformer | undefined = undefined;
+  let foundMatch: RegExpMatchArray | undefined = undefined;
+
+  for (const transformer of textMatchTransformers) {
+    if (!transformer.replace || !transformer.importRegExp) {
+      continue;
+    }
+    const match = textNode.getTextContent().match(transformer.importRegExp);
+
+    if (!match) {
+      continue;
+    }
+
+    const startIndex = match.index || 0;
+    const endIndex = transformer.getEndIndex
+      ? transformer.getEndIndex(textNode, match)
+      : startIndex + match[0].length;
+
+    if (endIndex === false) {
+      continue;
+    }
+
+    if (
+      foundMatchStartIndex === undefined ||
+      foundMatchEndIndex === undefined ||
+      (startIndex < foundMatchStartIndex && endIndex > foundMatchEndIndex)
+    ) {
+      foundMatchStartIndex = startIndex;
+      foundMatchEndIndex = endIndex;
+      foundMatchTransformer = transformer;
+      foundMatch = match;
+    }
+  }
+
+  if (
+    foundMatchStartIndex === undefined ||
+    foundMatchEndIndex === undefined ||
+    foundMatchTransformer === undefined ||
+    foundMatch === undefined
+  ) {
+    return null;
+  }
+
+  return {
+    endIndex: foundMatchEndIndex,
+    match: foundMatch,
+    startIndex: foundMatchStartIndex,
+    transformer: foundMatchTransformer,
+  };
+}
+
+export function importFoundTextMatchTransformer(
+  textNode: TextNode,
+  startIndex: number,
+  endIndex: number,
+  transformer: TextMatchTransformer,
+  match: RegExpMatchArray,
+): {
+  transformedNode?: TextNode;
+  nodeBefore: TextNode | undefined; // If split
+  nodeAfter: TextNode | undefined; // If split
+} | null {
+  let transformedNode, nodeAfter, nodeBefore;
+
+  if (startIndex === 0) {
+    [transformedNode, nodeAfter] = textNode.splitText(endIndex);
+  } else {
+    [nodeBefore, transformedNode, nodeAfter] = textNode.splitText(
+      startIndex,
+      endIndex,
+    );
+  }
+
+  if (!transformer.replace) {
+    return null;
+  }
+  const potentialTransformedNode = transformer.replace(transformedNode, match);
+
+  return {
+    nodeAfter,
+    nodeBefore,
+    transformedNode: potentialTransformedNode || undefined,
+  };
+}

package/src/importTextTransformers.ts

@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type {TextFormatTransformersIndex} from './MarkdownImport';
+import type {TextMatchTransformer} from './MarkdownTransformers';
+
+import {$isTextNode, type LexicalNode, type TextNode} from 'lexical';
+
+import {
+  findOutermostTextFormatTransformer,
+  importTextFormatTransformer,
+} from './importTextFormatTransformer';
+import {
+  findOutermostTextMatchTransformer,
+  importFoundTextMatchTransformer,
+} from './importTextMatchTransformer';
+
+/**
+ * Returns true if the node can contain transformable markdown.
+ * Code nodes cannot contain transformable markdown.
+ * For example, `code **bold**` should not be transformed to
+ * <code>code <strong>bold</strong></code>.
+ */
+export function canContainTransformableMarkdown(
+  node: LexicalNode | undefined,
+): node is TextNode {
+  return $isTextNode(node) && !node.hasFormat('code');
+}
+
+/**
+ * Handles applying both text format and text match transformers.
+ * It finds the outermost text format or text match and applies it,
+ * then recursively calls itself to apply the next outermost transformer,
+ * until there are no more transformers to apply.
+ */
+export function importTextTransformers(
+  textNode: TextNode,
+  textFormatTransformersIndex: TextFormatTransformersIndex,
+  textMatchTransformers: Array<TextMatchTransformer>,
+) {
+  let foundTextFormat = findOutermostTextFormatTransformer(
+    textNode,
+    textFormatTransformersIndex,
+  );
+
+  let foundTextMatch = findOutermostTextMatchTransformer(
+    textNode,
+    textMatchTransformers,
+  );
+
+  if (foundTextFormat && foundTextMatch) {
+    // Find the outermost transformer
+    if (
+      foundTextFormat.startIndex <= foundTextMatch.startIndex &&
+      foundTextFormat.endIndex >= foundTextMatch.endIndex
+    ) {
+      // foundTextFormat wraps foundTextMatch - apply foundTextFormat by setting foundTextMatch to null
+      foundTextMatch = null;
+    } else {
+      // foundTextMatch wraps foundTextFormat - apply foundTextMatch by setting foundTextFormat to null
+      foundTextFormat = null;
+    }
+  }
+
+  if (foundTextFormat) {
+    const result = importTextFormatTransformer(
+      textNode,
+      foundTextFormat.startIndex,
+      foundTextFormat.endIndex,
+      foundTextFormat.transformer,
+      foundTextFormat.match,
+    );
+
+    if (canContainTransformableMarkdown(result.nodeAfter)) {
+      importTextTransformers(
+        result.nodeAfter,
+        textFormatTransformersIndex,
+        textMatchTransformers,
+      );
+    }
+    if (canContainTransformableMarkdown(result.nodeBefore)) {
+      importTextTransformers(
+        result.nodeBefore,
+        textFormatTransformersIndex,
+        textMatchTransformers,
+      );
+    }
+    if (canContainTransformableMarkdown(result.transformedNode)) {
+      importTextTransformers(
+        result.transformedNode,
+        textFormatTransformersIndex,
+        textMatchTransformers,
+      );
+    }
+  } else if (foundTextMatch) {
+    const result = importFoundTextMatchTransformer(
+      textNode,
+      foundTextMatch.startIndex,
+      foundTextMatch.endIndex,
+      foundTextMatch.transformer,
+      foundTextMatch.match,
+    );
+    if (!result) {
+      return;
+    }
+
+    if (canContainTransformableMarkdown(result.nodeAfter)) {
+      importTextTransformers(
+        result.nodeAfter,
+        textFormatTransformersIndex,
+        textMatchTransformers,
+      );
+    }
+    if (canContainTransformableMarkdown(result.nodeBefore)) {
+      importTextTransformers(
+        result.nodeBefore,
+        textFormatTransformersIndex,
+        textMatchTransformers,
+      );
+    }
+    if (canContainTransformableMarkdown(result.transformedNode)) {
+      importTextTransformers(
+        result.transformedNode,
+        textFormatTransformersIndex,
+        textMatchTransformers,
+      );
+    }
+  }
+
+  // Handle escape characters
+  const textContent = textNode.getTextContent();
+  const escapedText = textContent
+    .replace(/\\([*_`~\\])/g, '$1')
+    .replace(/&#(\d+);/g, (_, codePoint) => {
+      return String.fromCodePoint(codePoint);
+    });
+  textNode.setTextContent(escapedText);
+}

package/src/index.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {
+  ElementTransformer,
+  MultilineElementTransformer,
+  TextFormatTransformer,
+  TextMatchTransformer,
+  Transformer,
+} from './MarkdownTransformers';
+
+import {$convertFromMarkdownString} from './fromMarkdownString';
+// import {createMarkdownExport} from './MarkdownExport';
+import {registerMarkdownShortcuts} from './MarkdownShortcuts';
+import {
+  BOLD_ITALIC_STAR,
+  BOLD_ITALIC_UNDERSCORE,
+  BOLD_STAR,
+  BOLD_UNDERSCORE,
+  CHECK_LIST,
+  CODE,
+  HEADING,
+  HIGHLIGHT,
+  INLINE_CODE,
+  ITALIC_STAR,
+  ITALIC_UNDERSCORE,
+  LINK,
+  ORDERED_LIST,
+  QUOTE,
+  STRIKETHROUGH,
+  UNORDERED_LIST,
+} from './MarkdownTransformers';
+import {$convertToMarkdownString} from './toMarkdownString';
+import {
+  ELEMENT_TRANSFORMERS,
+  getInstanceTransformers,
+  MULTILINE_ELEMENT_TRANSFORMERS,
+  TEXT_FORMAT_TRANSFORMERS,
+  TEXT_MATCH_TRANSFORMERS,
+  TransFormerGather,
+  TRANSFORMERS,
+} from './transformer';
+
+export {
+  $convertFromMarkdownString,
+  $convertToMarkdownString,
+  BOLD_ITALIC_STAR,
+  BOLD_ITALIC_UNDERSCORE,
+  BOLD_STAR,
+  BOLD_UNDERSCORE,
+  CHECK_LIST,
+  CODE,
+  ELEMENT_TRANSFORMERS,
+  type ElementTransformer,
+  getInstanceTransformers,
+  HEADING,
+  HIGHLIGHT,
+  INLINE_CODE,
+  ITALIC_STAR,
+  ITALIC_UNDERSCORE,
+  LINK,
+  MULTILINE_ELEMENT_TRANSFORMERS,
+  type MultilineElementTransformer,
+  ORDERED_LIST,
+  QUOTE,
+  registerMarkdownShortcuts,
+  STRIKETHROUGH,
+  TEXT_FORMAT_TRANSFORMERS,
+  TEXT_MATCH_TRANSFORMERS,
+  type TextFormatTransformer,
+  type TextMatchTransformer,
+  type Transformer,
+  TransFormerGather,
+  TRANSFORMERS,
+  UNORDERED_LIST,
+};

package/src/toMarkdownString.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {ElementNode} from 'lexical';
+
+import {createMarkdownExport} from './MarkdownExport';
+import {Transformer} from './MarkdownTransformers';
+import {TransFormerGather} from './transformer';
+
+export function $convertToMarkdownString(
+  transformers: Array<Transformer> = TransFormerGather.value,
+  node?: ElementNode,
+  shouldPreserveNewLines: boolean = false,
+): string {
+  const exportMarkdown = createMarkdownExport(
+    transformers,
+    shouldPreserveNewLines,
+  );
+  return exportMarkdown(node);
+}

package/src/transformer/const.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export const INS_SYMBOL = '\u200B';
+export const INSTANCE_START_REGEX = /^(<!--)(\u200B+)(-->)\s*/;
+export const INSTANCE_END_REGEX = /^(<!---->)\s*/;
+export const HEADING_REGEX = /^(#{1,6})\s/;

package/src/transformer/hr.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  $createHorizontalRuleNode,
+  $isHorizontalRuleNode,
+  HorizontalRuleNode,
+} from '@lexical/react/LexicalHorizontalRuleNode';
+import {LexicalNode} from 'lexical';
+
+import {ElementTransformer} from '../MarkdownTransformers';
+
+export const HR: ElementTransformer = {
+  dependencies: [HorizontalRuleNode],
+  export: (node: LexicalNode) => {
+    return $isHorizontalRuleNode(node) ? '***' : null;
+  },
+  regExp: /^(---|\*\*\*|___)\s?$/,
+  replace: (parentNode, _1, _2, isImport) => {
+    const line = $createHorizontalRuleNode();
+
+    // TODO: Get rid of isImport flag
+    if (isImport || parentNode.getNextSibling() != null) {
+      parentNode.replace(line);
+    } else {
+      parentNode.insertBefore(line);
+    }
+
+    line.selectNext();
+  },
+  type: 'element',
+};

package/src/transformer/index.ts

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {
+  ElementTransformer,
+  MultilineElementTransformer,
+  TextFormatTransformer,
+  TextMatchTransformer,
+  Transformer,
+} from '../MarkdownTransformers';
+
+import {
+  BOLD_ITALIC_STAR,
+  BOLD_ITALIC_UNDERSCORE,
+  BOLD_STAR,
+  BOLD_UNDERSCORE,
+  CHECK_LIST,
+  CODE,
+  // HEADING,
+  HIGHLIGHT,
+  INLINE_CODE,
+  ITALIC_STAR,
+  ITALIC_UNDERSCORE,
+  LINK,
+  ORDERED_LIST,
+  QUOTE,
+  STRIKETHROUGH,
+  UNORDERED_LIST,
+} from '../MarkdownTransformers';
+import {HR} from './hr';
+import {InstanceHeadingTransformer, InstanceTransformer} from './instance';
+import {TABLE} from './table';
+
+export const ELEMENT_TRANSFORMERS: Array<ElementTransformer> = [
+  // HEADING,
+  QUOTE,
+  UNORDERED_LIST,
+  ORDERED_LIST,
+];
+
+export const MULTILINE_ELEMENT_TRANSFORMERS: Array<MultilineElementTransformer> =
+  [CODE];
+
+// Order of text format transformers matters:
+//
+// - code should go first as it prevents any transformations inside
+// - then longer tags match (e.g. ** or __ should go before * or _)
+export const TEXT_FORMAT_TRANSFORMERS: Array<TextFormatTransformer> = [
+  INLINE_CODE,
+  BOLD_ITALIC_STAR,
+  BOLD_ITALIC_UNDERSCORE,
+  BOLD_STAR,
+  BOLD_UNDERSCORE,
+  HIGHLIGHT,
+  ITALIC_STAR,
+  ITALIC_UNDERSCORE,
+  STRIKETHROUGH,
+];
+
+export const TEXT_MATCH_TRANSFORMERS: Array<TextMatchTransformer> = [LINK];
+
+export const TRANSFORMERS: Array<Transformer> = [
+  CHECK_LIST,
+  ...ELEMENT_TRANSFORMERS,
+  ...MULTILINE_ELEMENT_TRANSFORMERS,
+  ...TEXT_FORMAT_TRANSFORMERS,
+  ...TEXT_MATCH_TRANSFORMERS,
+];
+
+class TFR {
+  private _value = new Set([...TRANSFORMERS]);
+
+  get value() {
+    return Array.from(this._value);
+  }
+
+  register(tfr: Transformer) {
+    this._value.add(tfr);
+  }
+}
+const TransFormerGather = new TFR();
+
+TransFormerGather.register(InstanceTransformer);
+TransFormerGather.register(InstanceHeadingTransformer);
+TransFormerGather.register(HR);
+TransFormerGather.register(TABLE);
+
+function getInstanceTransformers() {
+  return TransFormerGather.value;
+}
+
+export {getInstanceTransformers, TransFormerGather};