@collabchron/notiq 0.2.0

package/src/components/editor/utils/ai.ts

@@ -0,0 +1,291 @@
+import { $createCodeNode } from "@lexical/code";
+import {
+  $createParagraphNode,
+  $createRangeSelection,
+  $createTextNode,
+  $getRoot,
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+  createEditor,
+  ElementNode,
+  LexicalEditor,
+  LexicalNode,
+  TextNode,
+} from "lexical";
+import {
+  $createHeadingNode,} from '@lexical/rich-text';
+import { $createStepperNode, StepsType } from "../nodes/Stepper";
+
+function getWordsBeforeSelection(
+  editor: LexicalEditor,
+  numWords: number
+): string {
+  let wordsBeforeSelection = "";
+
+  editor.update(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) {
+      console.warn("No valid text selection found.");
+      return;
+    }
+
+    const anchor = selection.anchor;
+    const firstTextNode = findFirstTextNode($getRoot());
+
+    if (!firstTextNode) {
+      console.warn("No text nodes found in the document.");
+      return;
+    }
+
+    // Create a range from the first text node start to the selection anchor
+    const range = $createRangeSelection();
+    range.anchor.set(firstTextNode.__key, 0, 'text');
+    range.focus.set(anchor.key, anchor.offset, anchor.type);
+
+    const textContent = range.getTextContent();
+    const words = textContent.split(/\s+/).filter(word => word.length > 0);
+
+    const startIndex = Math.max(0, words.length - numWords);
+    wordsBeforeSelection = words.slice(startIndex, words.length).join(" ");
+  });
+
+  return wordsBeforeSelection;
+}
+
+// Helper function to find the first text node in document order
+function findFirstTextNode(node: LexicalNode): TextNode | null {
+  if ($isTextNode(node)) {
+    return node;
+  }
+
+  const children = (node as ElementNode).getChildren();
+  for (const child of children) {
+    const result = findFirstTextNode(child);
+    if (result) {
+      return result;
+    }
+  }
+
+  return null;
+}
+
+
+function isJSON(text: string): boolean {
+  try {
+    JSON.parse(text);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+function createEditorWithText(text: string): LexicalEditor {
+  const editor = createEditor();
+  const editorState = editor.parseEditorState(
+    JSON.stringify({
+      root: {
+        children: [
+          {
+            children: [
+              {
+                detail: 0,
+                format: 0,
+                mode: "normal",
+                style: "",
+                text: text,
+                type: "text",
+                version: 1,
+              },
+            ],
+            direction: null,
+            format: "",
+            indent: 0,
+            type: "paragraph",
+            version: 1,
+            textFormat: 0,
+            textStyle: "",
+          },
+        ],
+        direction: null,
+        format: "",
+        indent: 0,
+        type: "root",
+        version: 1,
+      },
+    })
+  );
+  editor.setEditorState(editorState);
+  return editor;
+}
+
+function GenerateSteps(json:string, editor: LexicalEditor){
+  const stepsData = JSON.parse(json);
+  const steps: StepsType = stepsData.map((step: { id: number; title: string; content: string }) => {
+    return {
+      id: step.id,
+      title: step.title,
+      content: createEditorWithText(step.content),
+    };
+  });    
+  editor.update(()=>{
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const stepperNode = $createStepperNode(steps);
+      selection.insertNodes([stepperNode]);
+    }
+    return
+  })
+}
+
+// getMore = number of words to get if the selection was less than 30 len.
+const getSelectedText = (editor: LexicalEditor,getMore?:number) => {
+  let selectedText = "";
+  let context = getMore?getWordsBeforeSelection(editor, getMore):null
+  editor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const selectionText = selection.getTextContent();      
+      if (selectionText.length > 30) {
+        selectedText = selectionText; 
+      } else {
+        selectedText = context+selectionText ;
+      }
+    }
+  });
+
+  return selectedText;
+};
+
+
+function applyStyles(AIString: string) {
+  // Regex now matches:
+  // 1. Code blocks delimited by triple backticks (```...```)
+  // 2. Bold text delimited by ** (e.g., **bold**)
+  // 3. Inline code delimited by a single backtick (e.g., `some code`)
+  // 4. Headers starting with ### (e.g., ### Header)
+  const pattern = /(```[\s\S]*?```)|(\*\*[\s\S]+?\*\*)|(`[\s\S]+?`)|(###\s+[\s\S]+?(?=\n|$))/g;
+  let lastIndex = 0;
+  const nodes = [];
+
+  // Process all matches of code, bold, or inline code segments.
+  AIString.replace(
+    pattern,
+    (match, codeBlockMatch, boldMatch, codeMatch,headerMatch, offset) => {
+      // Append any plain text before the matched segment.
+      if (offset > lastIndex) {
+        const plainText = AIString.slice(lastIndex, offset);
+        nodes.push($createTextNode(plainText));
+      }
+      if (codeBlockMatch) {
+        // TODO: extract the code lang and apply it to the code block.
+
+        const content = codeBlockMatch.slice(3, -3);
+        const codeNode = $createCodeNode();
+        codeNode.append($createTextNode(content));
+        nodes.push(codeNode);
+      } else if (boldMatch) {
+        // Found bold text. Remove the leading and trailing "**".
+        const content = boldMatch.slice(2, -2);
+        const boldTextNode = $createTextNode(content);
+        boldTextNode.setFormat("bold");
+        nodes.push(boldTextNode);
+      } else if (codeMatch) {
+        const content = codeMatch.slice(1, -1);
+        const codeTextNode = $createTextNode(content);
+        codeTextNode.setFormat("code");
+        nodes.push(codeTextNode);
+      }else if(headerMatch){
+         const content = headerMatch.slice(4).trim(); 
+         const headerNode = $createHeadingNode("h3"); 
+         headerNode.append($createTextNode(content));
+         nodes.push(headerNode);
+      }
+      lastIndex = offset + match.length;
+      return match;
+    }
+  );
+
+  // Append any remaining plain text after the last match.
+  if (lastIndex < AIString.length) {
+    nodes.push($createTextNode(AIString.slice(lastIndex)));
+  }
+
+  return nodes;
+}
+
+
+function insertText(text: string, editor: LexicalEditor) {
+  if(isJSON(text) || text.startsWith("json")){
+    GenerateSteps(text,editor)
+    return
+  }
+  editor.update(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection))
+      return console.log("No valid text selection found.");
+
+    const nodesInSelection = selection.getNodes();
+    if (nodesInSelection.length > 0) {
+      let insertionPoint = nodesInSelection[nodesInSelection.length - 1];
+      const formattedNodes = applyStyles(text);
+
+      formattedNodes.forEach((node: any) => {
+        insertionPoint.insertAfter(node);
+        insertionPoint = node;
+      });
+    }
+  });
+}
+
+function replaceSelectedText(text: string, editor: LexicalEditor) {
+  
+  if(isJSON(text) || text.startsWith("json")){
+    GenerateSteps(text,editor)
+    return
+  }
+
+  
+  editor.update(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) {
+      console.warn("No valid text selection found.");
+      return;
+    }
+    selection.removeText();
+    const formattedNodes = applyStyles(text);
+    selection.insertNodes(formattedNodes);
+  });
+}
+
+
+function insertTextUnderSelected(text: string, editor: LexicalEditor) {
+  if(isJSON(text) || text.startsWith("json")){
+    GenerateSteps(text,editor)
+    return
+  }
+  editor.update(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return;
+
+    const nodes = selection.getNodes();
+    if (nodes.length > 0) {
+      const lastNode = nodes[nodes.length - 1];
+
+      const newParagraph = $createParagraphNode();
+
+      const formattedNodes = applyStyles(text);
+
+      newParagraph.append(...formattedNodes);
+
+      lastNode.insertAfter(newParagraph);
+    }
+  });
+}
+
+export {
+  replaceSelectedText,
+  insertTextUnderSelected,
+  getSelectedText,
+  insertText,
+  getWordsBeforeSelection,
+};

package/src/components/editor/utils/canUseDOM.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 CAN_USE_DOM: boolean =
+  typeof window !== 'undefined' &&
+  typeof window.document !== 'undefined' &&
+  typeof window.document.createElement !== 'undefined';

package/src/components/editor/utils/editorFormatting.ts

@@ -0,0 +1,282 @@
+
+import { DEFAULT_FONT_SIZE, MAX_ALLOWED_FONT_SIZE, MIN_ALLOWED_FONT_SIZE } from '@/components/providers/ToolbarContext';
+import {$createCodeNode} from '@lexical/code';
+import {
+  INSERT_CHECK_LIST_COMMAND,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+} from '@lexical/list';
+import {$isDecoratorBlockNode} from '@lexical/react/LexicalDecoratorBlockNode';
+import {
+  $createHeadingNode,
+  $createQuoteNode,
+  $isHeadingNode,
+  $isQuoteNode,
+  HeadingTagType,
+} from '@lexical/rich-text';
+import {$patchStyleText, $setBlocksType} from '@lexical/selection';
+import { $isTableSelection} from '@lexical/table';
+import {$getNearestBlockElementAncestorOrThrow} from '@lexical/utils';
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+  LexicalEditor,
+} from 'lexical';
+
+
+// eslint-disable-next-line no-shadow
+export enum UpdateFontSizeType {
+  increment = 1,
+  decrement,
+}
+
+/**
+ * Calculates the new font size based on the update type.
+ * @param currentFontSize - The current font size
+ * @param updateType - The type of change, either increment or decrement
+ * @returns the next font size
+ */
+export const calculateNextFontSize = (
+  currentFontSize: number,
+  updateType: UpdateFontSizeType | null,
+) => {
+  if (!updateType) {
+    return currentFontSize;
+  }
+
+  let updatedFontSize: number = currentFontSize;
+  switch (updateType) {
+    case UpdateFontSizeType.decrement:
+      switch (true) {
+        case currentFontSize > MAX_ALLOWED_FONT_SIZE:
+          updatedFontSize = MAX_ALLOWED_FONT_SIZE;
+          break;
+        case currentFontSize >= 48:
+          updatedFontSize -= 12;
+          break;
+        case currentFontSize >= 24:
+          updatedFontSize -= 4;
+          break;
+        case currentFontSize >= 14:
+          updatedFontSize -= 2;
+          break;
+        case currentFontSize >= 9:
+          updatedFontSize -= 1;
+          break;
+        default:
+          updatedFontSize = MIN_ALLOWED_FONT_SIZE;
+          break;
+      }
+      break;
+
+    case UpdateFontSizeType.increment:
+      switch (true) {
+        case currentFontSize < MIN_ALLOWED_FONT_SIZE:
+          updatedFontSize = MIN_ALLOWED_FONT_SIZE;
+          break;
+        case currentFontSize < 12:
+          updatedFontSize += 1;
+          break;
+        case currentFontSize < 20:
+          updatedFontSize += 2;
+          break;
+        case currentFontSize < 36:
+          updatedFontSize += 4;
+          break;
+        case currentFontSize <= 60:
+          updatedFontSize += 12;
+          break;
+        default:
+          updatedFontSize = MAX_ALLOWED_FONT_SIZE;
+          break;
+      }
+      break;
+
+    default:
+      break;
+  }
+  return updatedFontSize;
+};
+
+/**
+ * Patches the selection with the updated font size.
+ */
+export const updateFontSizeInSelection = (
+  editor: LexicalEditor,
+  newFontSize: string | null,
+  updateType: UpdateFontSizeType | null,
+) => {
+  const getNextFontSize = (prevFontSize: string | null): string => {
+    if (!prevFontSize) {
+      prevFontSize = `${DEFAULT_FONT_SIZE}px`;
+    }
+    prevFontSize = prevFontSize.slice(0, -2);
+    const nextFontSize = calculateNextFontSize(
+      Number(prevFontSize),
+      updateType,
+    );
+    return `${nextFontSize}px`;
+  };
+
+  editor.update(() => {
+    if (editor.isEditable()) {
+      const selection = $getSelection();
+      if (selection !== null) {
+        $patchStyleText(selection, {
+          'font-size': newFontSize || getNextFontSize,
+        });
+      }
+    }
+  });
+};
+
+export const updateFontSize = (
+  editor: LexicalEditor,
+  updateType: UpdateFontSizeType,
+  inputValue: string,
+) => {
+  if (inputValue !== '') {
+    const nextFontSize = calculateNextFontSize(Number(inputValue), updateType);
+    updateFontSizeInSelection(editor, String(nextFontSize) + 'px', null);
+  } else {
+    updateFontSizeInSelection(editor, null, updateType);
+  }
+};
+
+export const formatParagraph = (editor: LexicalEditor) => {
+  editor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      $setBlocksType(selection, () => $createParagraphNode());
+    }
+  });
+};
+
+export const formatHeading = (
+  editor: LexicalEditor,
+  blockType: string,
+  headingSize: HeadingTagType,
+) => {
+  if (blockType !== headingSize) {
+    editor.update(() => {
+      const selection = $getSelection();
+      $setBlocksType(selection, () => $createHeadingNode(headingSize));
+    });
+  }
+};
+
+export const formatBulletList = (editor: LexicalEditor, blockType: string) => {
+  if (blockType !== 'bullet') {
+    editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+  } else {
+    formatParagraph(editor);
+  }
+};
+
+export const formatCheckList = (editor: LexicalEditor, blockType: string) => {
+  if (blockType !== 'check') {
+    editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
+  } else {
+    formatParagraph(editor);
+  }
+};
+
+export const formatNumberedList = (
+  editor: LexicalEditor,
+  blockType: string,
+) => {
+  if (blockType !== 'number') {
+    editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+  } else {
+    formatParagraph(editor);
+  }
+};
+
+export const formatQuote = (editor: LexicalEditor, blockType: string) => {
+  if (blockType !== 'quote') {
+    editor.update(() => {
+      const selection = $getSelection();
+      $setBlocksType(selection, () => $createQuoteNode());
+    });
+  }
+};
+
+export const formatCode = (editor: LexicalEditor, blockType: string) => {
+  if (blockType !== 'code') {
+    editor.update(() => {
+      let selection = $getSelection();
+
+      if (selection !== null) {
+        if (selection.isCollapsed()) {
+          $setBlocksType(selection, () => $createCodeNode());
+        } else {
+          const textContent = selection.getTextContent();
+          const codeNode = $createCodeNode();
+          selection.insertNodes([codeNode]);
+          selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            selection.insertRawText(textContent);
+          }
+        }
+      }
+    });
+  }
+};
+
+export const clearFormatting = (editor: LexicalEditor) => {
+  editor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+      const anchor = selection.anchor;
+      const focus = selection.focus;
+      const nodes = selection.getNodes();
+      const extractedNodes = selection.extract();
+
+      if (anchor.key === focus.key && anchor.offset === focus.offset) {
+        return;
+      }
+
+      nodes.forEach((node, idx) => {
+        // We split the first and last node by the selection
+        // So that we don't format unselected text inside those nodes
+        if ($isTextNode(node)) {
+          // Use a separate variable to ensure TS does not lose the refinement
+          let textNode = node;
+          if (idx === 0 && anchor.offset !== 0) {
+            textNode = textNode.splitText(anchor.offset)[1] || textNode;
+          }
+          if (idx === nodes.length - 1) {
+            textNode = textNode.splitText(focus.offset)[0] || textNode;
+          }
+          /**
+           * If the selected text has one format applied
+           * selecting a portion of the text, could
+           * clear the format to the wrong portion of the text.
+           *
+           * The cleared text is based on the length of the selected text.
+           */
+          // We need this in case the selected text only has one format
+          const extractedTextNode = extractedNodes[0];
+          if (nodes.length === 1 && $isTextNode(extractedTextNode)) {
+            textNode = extractedTextNode;
+          }
+
+          if (textNode.__style !== '') {
+            textNode.setStyle('');
+          }
+          if (textNode.__format !== 0) {
+            textNode.setFormat(0);
+            $getNearestBlockElementAncestorOrThrow(textNode).setFormat('');
+          }
+          node = textNode;
+        } else if ($isHeadingNode(node) || $isQuoteNode(node)) {
+          node.replace($createParagraphNode(), true);
+        } else if ($isDecoratorBlockNode(node)) {
+          node.setFormat('');
+        }
+      });
+    }
+  });
+};

package/src/components/editor/utils/environment.ts

@@ -0,0 +1,50 @@
+
+
+import {CAN_USE_DOM} from './canUseDOM';
+
+declare global {
+  interface Document {
+    documentMode?: unknown;
+  }
+
+  interface Window {
+    MSStream?: unknown;
+  }
+}
+
+const documentMode =
+  CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
+
+export const IS_APPLE: boolean =
+  CAN_USE_DOM && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+
+export const IS_FIREFOX: boolean =
+  CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
+
+export const CAN_USE_BEFORE_INPUT: boolean =
+  CAN_USE_DOM && 'InputEvent' in window && !documentMode
+    ? 'getTargetRanges' in new window.InputEvent('input')
+    : false;
+
+export const IS_SAFARI: boolean =
+  CAN_USE_DOM && /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
+
+export const IS_IOS: boolean =
+  CAN_USE_DOM &&
+  /iPad|iPhone|iPod/.test(navigator.userAgent) &&
+  !window.MSStream;
+
+export const IS_ANDROID: boolean =
+  CAN_USE_DOM && /Android/.test(navigator.userAgent);
+
+// Keep these in case we need to use them in the future.
+// export const IS_WINDOWS: boolean = CAN_USE_DOM && /Win/.test(navigator.platform);
+export const IS_CHROME: boolean =
+  CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent);
+// export const canUseTextInputEvent: boolean = CAN_USE_DOM && 'TextEvent' in window && !documentMode;
+
+export const IS_ANDROID_CHROME: boolean =
+  CAN_USE_DOM && IS_ANDROID && IS_CHROME;
+
+export const IS_APPLE_WEBKIT =
+  CAN_USE_DOM && /AppleWebKit\/[\d.]+/.test(navigator.userAgent) && !IS_CHROME;