@peers-app/peers-ui 0.0.14

package/src/components/markdown-editor/markdown-plugin.tsx

@@ -0,0 +1,224 @@
+import { $createListItemNode, $createListNode, $isListItemNode, $isListNode, ListItemNode, ListNode, ListType } from '@lexical/list';
+import { $convertFromMarkdownString, $convertToMarkdownString, ElementTransformer, TextMatchTransformer, TRANSFORMERS } from "@lexical/markdown";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { formatMention, IMentionData, mentionRegex, Observable } from "@peers-app/peers-sdk";
+import { $createTextNode, $isParagraphNode, ParagraphNode } from 'lexical';
+import { useEffect } from 'react';
+import { $createMentionNode, $isMentionNode, MentionNode } from './mention-node';
+
+// Amount of spaces that define indentation level
+const LIST_INDENT_SIZE = 4;
+
+function getIndent(whitespaces: string): number {
+  const tabs = whitespaces.match(/\t/g);
+  const spaces = whitespaces.match(/ /g);
+  let indent = 0;
+  if (tabs) {
+    indent += tabs.length;
+  }
+  if (spaces) {
+    indent += Math.floor(spaces.length / LIST_INDENT_SIZE);
+  }
+  return indent;
+}
+
+const listReplace = (listType: ListType): ElementTransformer['replace'] => {
+  return (parentNode, children, match) => {
+    const previousNode = parentNode.getPreviousSibling();
+    const nextNode = parentNode.getNextSibling();
+    const listItem = $createListItemNode(
+      listType === 'check' ? match[3] === 'x' : undefined,
+    );
+    if ($isListNode(nextNode) && nextNode.getListType() === listType) {
+      const firstChild = nextNode.getFirstChild();
+      if (firstChild !== null) {
+        firstChild.insertBefore(listItem);
+      } else {
+        // should never happen, but let's handle gracefully, just in case.
+        nextNode.append(listItem);
+      }
+      parentNode.remove();
+    } else if (
+      $isListNode(previousNode) &&
+      previousNode.getListType() === listType
+    ) {
+      previousNode.append(listItem);
+      parentNode.remove();
+    } else {
+      const list = $createListNode(
+        listType,
+        listType === 'number' ? Number(match[2]) : undefined,
+      );
+      list.append(listItem);
+      parentNode.replace(list);
+    }
+    listItem.append(...children);
+    listItem.select(0, 0);
+    const indent = getIndent(match[1]);
+    if (indent) {
+      listItem.setIndent(indent);
+    }
+  };
+};
+
+const listExport = (
+  listNode: ListNode,
+  exportChildren: (node: ListItemNode) => string,
+  depth: number,
+): string => {
+  const output = [];
+  const children = listNode.getChildren();
+  let index = 0;
+  for (const listItemNode of children) {
+    if ($isListItemNode(listItemNode)) {
+      if (listItemNode.getChildrenSize() === 1) {
+        const firstChild = listItemNode.getFirstChild();
+        if ($isListNode(firstChild)) {
+          output.push(listExport(firstChild, exportChildren, depth + 1));
+          continue;
+        }
+      }
+      const indent = ' '.repeat(depth * LIST_INDENT_SIZE);
+      const listType = listNode.getListType();
+      const prefix =
+        listType === 'number'
+          ? `${listNode.getStart() + index}. `
+          : listType === 'check'
+            ? `- [${listItemNode.getChecked() ? 'x' : ' '}] `
+            : '- ';
+      output.push(indent + prefix + exportChildren(listItemNode));
+      index++;
+    }
+  }
+
+  return output.join('\n');
+};
+
+const CHECK_LIST_TRANSFORMER: ElementTransformer = {
+  dependencies: [ListNode, ListItemNode],
+  export: (node, exportChildren) => {
+    return $isListNode(node) ? listExport(node, exportChildren, 0) : null;
+  },
+  regExp: /^(\s*)(?:-\s)?\s?(\[(\s|x)?\])\s/i,
+  replace: listReplace('check'),
+  type: 'element',
+};
+
+const MENTION_TRANSFORMER: TextMatchTransformer = {
+  type: 'text-match',
+  trigger: '<',
+  dependencies: [MentionNode],
+  importRegExp: mentionRegex(),
+  regExp: mentionRegex(),
+  export: (node) => {
+    if ($isMentionNode(node)) {
+      return formatMention(node.data);
+    }
+    return null;
+  },
+  replace: (textNode, match) => {
+    const kind = match[2];
+    const name = match[3].replace(/_/g, ' ');
+    const id = match[4];
+    const data: IMentionData = {
+      kind: kind as any,
+      name,
+      id,
+      clickable: false,
+    };
+    const node = $createMentionNode(data);
+    textNode.replace(node);
+  },
+};
+
+export const PRESERVE_NEWLINES: ElementTransformer = {
+  type: 'element',
+  dependencies: [ParagraphNode],
+  export: (node) => {
+    if ($isParagraphNode(node)) {
+      const content = node.getTextContent();
+      if (!content.trim()) {
+        return '\n \n';
+      }
+    }
+    return null;
+  },
+  regExp: /^ $/, // a line with only a space
+  replace: (textNode, nodes, _, isImport) => {
+    if (isImport && nodes.length === 1) {
+      textNode.append($createTextNode(''));
+    }
+  },
+};
+
+export const customMarkdownTransformers = [
+  PRESERVE_NEWLINES,
+  MENTION_TRANSFORMER,
+  CHECK_LIST_TRANSFORMER, // This needs to be first or checklists will be treated as unordered lists
+  ...TRANSFORMERS.filter(transformer => {
+    const t = transformer as any;
+    // disable headings for this markdown since these are inline messages
+    if (t.dependencies?.[0]?.name === 'HeadingNode') {
+      return false;
+    }
+    return true;
+  }),
+];
+
+interface IProps {
+  markdownObs: Observable<string>;
+}
+
+export function MarkdownPlugin(props: IProps) {
+  const [editor] = useLexicalComposerContext();
+  const { markdownObs } = props;
+
+  useEffect(() => {
+
+    let markdown = '';
+
+    function setMarkdown() {
+      const newMarkdown = markdownObs() || '';
+      if (newMarkdown === markdown) {
+        return;
+      }
+      markdown = newMarkdown;
+      editor.update(() => {
+        const shouldPreserveNewLines = false;
+        const shouldMergeAdjacentLines = false;
+        $convertFromMarkdownString(markdown, customMarkdownTransformers, undefined, shouldPreserveNewLines, shouldMergeAdjacentLines);
+      });
+    }
+
+    setMarkdown();
+
+    const sub = markdownObs.subscribe(() => {
+      setMarkdown();
+    });
+
+    const sub2Dispose = editor.registerUpdateListener(({ editorState }) => {
+      editor.update(() => {        
+        const shouldPreserveNewLines = false;
+        let newMarkdown = $convertToMarkdownString(customMarkdownTransformers, undefined, shouldPreserveNewLines);
+        newMarkdown = newMarkdown.replace(/\n\n\n \n\n\n/gm, '\n\n \n\n');
+        if (newMarkdown === "\n \n") {
+          newMarkdown = '';
+        }
+        if (newMarkdown !== markdown) {
+          markdown = newMarkdown;
+          markdownObs(markdown);
+        }
+      });
+
+    });
+
+    return () => {
+      sub.dispose();
+      sub2Dispose();
+    }
+  }, [editor]);
+
+  return null;
+}
+
+

package/src/components/markdown-editor/mention-node.ts

@@ -0,0 +1,199 @@
+import {
+  $applyNodeReplacement,
+  type DOMConversionMap,
+  type DOMConversionOutput,
+  type DOMExportOutput,
+  type EditorConfig,
+  type LexicalNode,
+  type NodeKey,
+  type SerializedTextNode,
+  type Spread,
+  TextNode,
+} from 'lexical';
+import { IMentionData } from "@peers-app/peers-sdk";
+import { mainContentPath } from '../../globals';
+import { mentionConfigs } from '../../mention-configs';
+
+export type SerializedMentionNode = Spread<
+  {
+    data: IMentionData;
+  },
+  SerializedTextNode
+>;
+
+function $convertMentionElement(
+  domNode: HTMLElement,
+): DOMConversionOutput | null {
+  const mentionName = domNode.textContent?.substring(1);
+  const dataKind = domNode.getAttribute('data-kind') ?? '';
+  const dataId = domNode.getAttribute('data-id') ?? '';
+  const clickable = domNode.getAttribute('data-clickable');
+  
+  if (mentionName && dataId) {
+    const data: IMentionData = {
+      kind: dataKind as any,
+      name: mentionName,
+      id: dataId,
+      clickable: clickable === 'true' ? true : clickable === 'false' ? false : undefined,
+    };
+    const node = $createMentionNode(data);
+    return {
+      node,
+    };
+  }
+
+  return null;
+}
+
+export class MentionNode extends TextNode {
+
+  static getType(): string {
+    return 'mention';
+  }
+
+  static clone(node: MentionNode): MentionNode {
+    return new MentionNode(node.data, node.__key);
+  }
+  static importJSON(serializedNode: SerializedMentionNode): MentionNode {
+    const node = $createMentionNode(serializedNode.data);
+    // node.setTextContent('@' + serializedNode.text);
+    node.setTextContent(serializedNode.text);
+    node.setFormat(serializedNode.format);
+    node.setDetail(serializedNode.detail);
+    node.setMode(serializedNode.mode);
+    node.setStyle(serializedNode.style);
+    return node;
+  }
+
+  constructor(
+    public readonly data: IMentionData,
+    key?: NodeKey
+  ) {
+    // const prefix = (data.kind === 'assistant' || data.kind === 'user') ? '@' : '$';
+    const prefix = data.kind === 'user' ? '@' : '';
+    super(prefix + data.name, key);
+  }
+
+  exportJSON(): SerializedMentionNode {
+    return {
+      ...super.exportJSON(),
+      type: 'mention',
+      version: 1,
+      data: this.data,
+    };
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config);
+
+    const kind = this.data.kind;
+    const mentionConfig = mentionConfigs.find(c => c.kind === kind);
+
+    if (mentionConfig) {
+      dom.className = mentionConfig.styleClass || 'mention-default-default';
+    } else {
+      dom.className = `mention-${this.data.kind}`;
+    }
+
+    dom.textContent = this.__text;
+    dom.setAttribute('data-kind', this.data.kind);
+    dom.setAttribute('data-id', this.data.id);
+    dom.setAttribute('data-clickable', this.data.clickable === undefined ? '' : String(this.data.clickable));
+
+    // currently ignoring `clickable` attribute
+    // if (this.data.clickable !== false) {...
+    const onClick = mentionConfig?.onClick;
+    dom.style.cursor = 'pointer';
+    dom.addEventListener('click', () => {
+      if (onClick) {
+        onClick(this.data);
+      } else {
+        const id = this.data.id;
+        const href = `#${kind}s/${id}`;
+        mainContentPath(href);
+      }
+    });
+
+    if (mentionConfig && kind !== 'user') {
+      const iconSpan = document.createElement('i');
+      iconSpan.className = 'pe-1 ' + mentionConfig.iconClass;
+      dom.prepend(iconSpan);
+      return dom;
+    }
+
+    // else if (kind === 'task') {
+    //   const ckbx = document.createElement('input');
+    //   ckbx.type = 'checkbox';
+    //   ckbx.className = 'me-1';
+    //   const taskId = this.data.id;
+    //   Tasks().get(taskId).then(task => {
+    //     if (!task) return;
+    //     ckbx.checked = !!task.completeDT;
+    //     ckbx.addEventListener('change', () => {
+    //       task.completeDT = ckbx.checked ? new Date() : undefined;
+    //       Tasks().update(task);
+    //     });
+    //   });
+    //   const sub = Tasks().dataChanged.subscribe(evt => {
+    //     const task = evt.dataObject as ITask;
+    //     if (!task || task.taskId !== taskId) return;
+    //     if (!document.body.contains(ckbx)) {
+    //       sub.unsubscribe();
+    //     } else {
+    //       ckbx.checked = !!task.completeDT;
+    //     }
+    //   });
+    //   dom.prepend(ckbx);
+    // }
+
+    return dom;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('span');
+    element.setAttribute('data-lexical-mention', 'true');
+    element.textContent = this.__text;
+    element.setAttribute('data-kind', this.data.kind);
+    element.setAttribute('data-id', this.data.id);
+    element.setAttribute('data-clickable', this.data.clickable === undefined ? '' : String(this.data.clickable));
+    return { element };
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      span: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-mention')) {
+          return null;
+        }
+        return {
+          conversion: $convertMentionElement,
+          priority: 1,
+        };
+      },
+    };
+  }
+
+  isTextEntity(): true {
+    return true;
+  }
+
+  canInsertTextBefore(): boolean {
+    return false;
+  }
+
+  canInsertTextAfter(): boolean {
+    return false;
+  }
+}
+
+export function $createMentionNode(data: IMentionData): MentionNode {
+  const mentionNode = new MentionNode(data);
+  mentionNode.setMode('segmented').toggleDirectionless();
+  return $applyNodeReplacement(mentionNode);
+}
+
+export function $isMentionNode(
+  node: LexicalNode | null | undefined,
+): node is MentionNode {
+  return node instanceof MentionNode;
+}