@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -1,33 +1,30 @@
-import React from 'react';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { mergeRegister } from '@lexical/utils';
+import {
+  INSERT_CHECK_LIST_COMMAND,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+} from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { mergeRegister } from "@lexical/utils";
 import {
   $getSelection,
   $isRangeSelection,
   CAN_REDO_COMMAND,
   CAN_UNDO_COMMAND,
   FORMAT_TEXT_COMMAND,
-  REDO_COMMAND,
   SELECTION_CHANGE_COMMAND,
-  UNDO_COMMAND,
-} from 'lexical';
-import {
-  INSERT_UNORDERED_LIST_COMMAND,
-  INSERT_ORDERED_LIST_COMMAND,
-  REMOVE_LIST_COMMAND,
-  INSERT_CHECK_LIST_COMMAND,
-} from '@lexical/list';
-import { useCallback, useEffect, useRef, useState } from 'react';
+} from "lexical";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 const LowPriority = 1;
 
 function Divider() {
-  return <span className='tool-bar-divider'></span>;
+  return <span className="tool-bar-divider"></span>;
 }
 
 export interface IToolbarControl {
   iconClass: string;
-  onClick: () => any;
+  onClick: () => void;
   title?: string;
 }
 
@@ -38,11 +35,11 @@ export interface IToolbarProps {
 export function ToolbarPlugin(props: IToolbarProps) {
   const [editor] = useLexicalComposerContext();
   const toolbarRef = useRef(null);
-  const [canUndo, setCanUndo] = useState(false);
-  const [canRedo, setCanRedo] = useState(false);
+  const [_canUndo, setCanUndo] = useState(false);
+  const [_canRedo, setCanRedo] = useState(false);
   const [isBold, setIsBold] = useState(false);
   const [isItalic, setIsItalic] = useState(false);
-  const [isUnderline, setIsUnderline] = useState(false);
+  const [_isUnderline, setIsUnderline] = useState(false);
   const [isStrikethrough, setIsStrikethrough] = useState(false);
   // New state for list types
   const [isUnorderedList, setIsUnorderedList] = useState(false);
@@ -53,20 +50,24 @@ export function ToolbarPlugin(props: IToolbarProps) {
     const selection = $getSelection();
     if ($isRangeSelection(selection)) {
       // Update text format
-      setIsBold(selection.hasFormat('bold'));
-      setIsItalic(selection.hasFormat('italic'));
-      setIsUnderline(selection.hasFormat('underline'));
-      setIsStrikethrough(selection.hasFormat('strikethrough'));
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+      setIsUnderline(selection.hasFormat("underline"));
+      setIsStrikethrough(selection.hasFormat("strikethrough"));
 
       // Update list format
       const anchorNode = selection.anchor.getNode();
-      const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+      const element =
+        anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
       const elementKey = element.getKey();
       const elementDOM = editor.getElementByKey(elementKey);
       if (elementDOM !== null) {
-        setIsUnorderedList(elementDOM.tagName === 'UL');
-        setIsOrderedList(elementDOM.tagName === 'OL');
-        setIsCheckList(elementDOM.tagName === 'UL' && elementDOM.classList.contains('PlaygroundEditorTheme__checklist'));
+        setIsUnorderedList(elementDOM.tagName === "UL");
+        setIsOrderedList(elementDOM.tagName === "OL");
+        setIsCheckList(
+          elementDOM.tagName === "UL" &&
+            elementDOM.classList.contains("PlaygroundEditorTheme__checklist"),
+        );
       }
     }
   }, [editor]);
@@ -152,20 +153,22 @@ export function ToolbarPlugin(props: IToolbarProps) {
       <Divider /> */}
       <button
         onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
         }}
         tabIndex={-1}
-        className={'toolbar-item spaced ' + (isBold ? 'active' : '')}
-        aria-label="Format Bold">
+        className={`toolbar-item spaced ${isBold ? "active" : ""}`}
+        aria-label="Format Bold"
+      >
         <i className="bi bi-type-bold" />
       </button>
       <button
         tabIndex={-1}
         onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
         }}
-        className={'toolbar-item spaced ' + (isItalic ? 'active' : '')}
-        aria-label="Format Italics">
+        className={`toolbar-item spaced ${isItalic ? "active" : ""}`}
+        aria-label="Format Italics"
+      >
         <i className="bi bi-type-italic" />
       </button>
       {/* <button
@@ -179,10 +182,11 @@ export function ToolbarPlugin(props: IToolbarProps) {
       <button
         tabIndex={-1}
         onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
         }}
-        className={'toolbar-item spaced ' + (isStrikethrough ? 'active' : '')}
-        aria-label="Format Strikethrough">
+        className={`toolbar-item spaced ${isStrikethrough ? "active" : ""}`}
+        aria-label="Format Strikethrough"
+      >
         <i className="bi bi-type-strikethrough" />
       </button>
       <Divider />
@@ -222,33 +226,36 @@ export function ToolbarPlugin(props: IToolbarProps) {
       <button
         tabIndex={-1}
         onClick={insertUnorderedList}
-        className={'toolbar-item spaced ' + (isUnorderedList ? 'active' : '')}
-        aria-label="Insert Unordered List">
+        className={`toolbar-item spaced ${isUnorderedList ? "active" : ""}`}
+        aria-label="Insert Unordered List"
+      >
         <i className="bi bi-list-ul" />
       </button>
       <button
         tabIndex={-1}
         onClick={insertOrderedList}
-        className={'toolbar-item spaced ' + (isOrderedList ? 'active' : '')}
-        aria-label="Insert Ordered List">
+        className={`toolbar-item spaced ${isOrderedList ? "active" : ""}`}
+        aria-label="Insert Ordered List"
+      >
         <i className="bi bi-list-ol" />
       </button>
       <button
         tabIndex={-1}
         onClick={insertCheckList}
-        className={'toolbar-item spaced ' + (isCheckList ? 'active' : '')}
-        aria-label="Insert Check List">
+        className={`toolbar-item spaced ${isCheckList ? "active" : ""}`}
+        aria-label="Insert Check List"
+      >
         <i className="bi bi-list-check" />
       </button>
 
       {(props.topRightControls?.length ?? 0) > 0 && (
-        <div className='float-end'>
-          {props.topRightControls?.map((control, i) => (
+        <div className="float-end">
+          {props.topRightControls?.map((control) => (
             <button
-              key={i}
+              key={control.title}
               tabIndex={-1}
               onClick={control.onClick}
-              className={'toolbar-item spaced active'}
+              className={"toolbar-item spaced active"}
               aria-label="Insert Check List"
               title={control.title}
             >
@@ -257,7 +264,6 @@ export function ToolbarPlugin(props: IToolbarProps) {
           ))}
         </div>
       )}
-      
     </div>
   );
-}
+}

package/src/components/markdown-with-mentions.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
 // import { FileListDisplay } from './file-list-display';
-import { IMentionData, mentionRegex, rpcServerCalls } from "@peers-app/peers-sdk";
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { mentionConfigs } from '../mention-configs';
+import { type IMentionData, mentionRegex, rpcServerCalls } from "@peers-app/peers-sdk";
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { mentionConfigs } from "../mention-configs";
 
 // Custom Link Renderer
-const LinkRenderer = (props: { href?: string, children?: any }) => {
+const LinkRenderer = (props: { href?: string; children?: React.ReactNode }) => {
   const { href } = props;
   return (
     <a
       href={href}
       onClick={(e) => {
-        if (href?.startsWith('http')) {
+        if (href?.startsWith("http")) {
           e.preventDefault();
           rpcServerCalls.openLinkInBrowser(href);
         }
@@ -24,13 +24,14 @@ const LinkRenderer = (props: { href?: string, children?: any }) => {
 };
 
 const processTextWithMentions = (text: string) => {
-  const parts: any[] = [];
+  const parts: React.ReactNode[] = [];
   let lastIndex = 0;
-  let match;
+  let match: RegExpExecArray | null;
   let cnt = 0;
 
   const regex = mentionRegex();
-  while ((match = regex.exec(text)) !== null) {
+  match = regex.exec(text);
+  while (match !== null) {
     cnt++;
     if (match.index > lastIndex) {
       parts.push(text.slice(lastIndex, match.index));
@@ -38,28 +39,30 @@ const processTextWithMentions = (text: string) => {
     text = text.slice(match.index + match[0].length);
 
     const kind = match[2];
-    const name = match[3].replace(/_/g, ' ');
+    const name = match[3].replace(/_/g, " ");
     const id = match[4];
     const data: IMentionData = {
       kind,
       name,
-      id,      
+      id,
     };
 
-    const style = { cursor: 'pointer' } as any;
+    const style: React.CSSProperties = { cursor: "pointer" };
     if (name.length < 20) {
-      style.whiteSpace = 'nowrap';
+      style.whiteSpace = "nowrap";
     }
 
-    const mentionConfig = mentionConfigs.find(c => c.kind === kind);
-    const mentionClass = mentionConfig ? mentionConfig.styleClass || 'mention-default-default' : `mention-${kind}`;
+    const mentionConfig = mentionConfigs.find((c) => c.kind === kind);
+    const mentionClass = mentionConfig
+      ? mentionConfig.styleClass || "mention-default-default"
+      : `mention-${kind}`;
     const onClick = mentionConfig?.onClick;
-    const href = !onClick && `#${kind}s/${id}` || undefined;
-    const icon = 
-      (kind === 'user' && '@') ||
-      mentionConfig?.iconClass && <i className={`pe-1 ${mentionConfig.iconClass}`}></i> ||
-      <i className={`pe-1 bi bi-question`}></i>;
-    
+    const href = (!onClick && `#${kind}s/${id}`) || undefined;
+    const icon = (kind === "user" && "@") ||
+      (mentionConfig?.iconClass && <i className={`pe-1 ${mentionConfig.iconClass}`}></i>) || (
+        <i className={`pe-1 bi bi-question`}></i>
+      );
+
     parts.push(
       <a
         key={cnt}
@@ -77,9 +80,10 @@ const processTextWithMentions = (text: string) => {
           </span>
         } */}
         {data.name}
-      </a>
+      </a>,
     );
     lastIndex = regex.lastIndex;
+    match = regex.exec(text);
   }
 
   if (lastIndex < text.length) {
@@ -133,13 +137,19 @@ const processTextWithMentions = (text: string) => {
 //   );
 // };
 
-const createElementWithMentions = (Element: any) => {
-  // @ts-ignore
-  return ({ node, ...props }) => {
+const createElementWithMentions = (Element: React.ElementType) => {
+  return ({
+    node: _node,
+    ...props
+  }: {
+    node?: unknown;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+  }) => {
     return (
       <Element {...props}>
-        {React.Children.map(props.children, child => {
-          if (typeof child === 'string') {
+        {React.Children.map(props.children, (child) => {
+          if (typeof child === "string") {
             return processTextWithMentions(child);
           }
           return child;
@@ -151,33 +161,33 @@ const createElementWithMentions = (Element: any) => {
 
 export const MarkdownWithMentions: React.FC<{ content: string }> = ({ content }) => {
   const components = {
-    p: createElementWithMentions('p'),
-    h1: createElementWithMentions('h1'),
-    h2: createElementWithMentions('h2'),
-    h3: createElementWithMentions('h3'),
-    h4: createElementWithMentions('h4'),
-    h5: createElementWithMentions('h5'),
-    h6: createElementWithMentions('h6'),
-    li: createElementWithMentions('li'),
+    p: createElementWithMentions("p"),
+    h1: createElementWithMentions("h1"),
+    h2: createElementWithMentions("h2"),
+    h3: createElementWithMentions("h3"),
+    h4: createElementWithMentions("h4"),
+    h5: createElementWithMentions("h5"),
+    h6: createElementWithMentions("h6"),
+    li: createElementWithMentions("li"),
     // a: createElementWithMentions('a'),
     a: LinkRenderer,
-    strong: createElementWithMentions('strong'),
-    em: createElementWithMentions('em'),
-    blockquote: createElementWithMentions('blockquote'),
-    code: createElementWithMentions('code'),
-    td: createElementWithMentions('td'),
-    th: createElementWithMentions('th'),
+    strong: createElementWithMentions("strong"),
+    em: createElementWithMentions("em"),
+    blockquote: createElementWithMentions("blockquote"),
+    code: createElementWithMentions("code"),
+    td: createElementWithMentions("td"),
+    th: createElementWithMentions("th"),
   };
 
   return (
-    <div className='markdown'>
+    <div className="markdown">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
-        // @ts-ignore
+        // @ts-expect-error
         components={components}
       >
         {content}
       </ReactMarkdown>
     </div>
-  )
-};
+  );
+};