@hubstr/kit 0.1.0

package/editor/src/plugins/markdown/utils/detectLanguage.ts

@@ -0,0 +1,310 @@
+/**
+ * Language detection utility for code snippets
+ * Uses pattern matching and heuristics to identify programming languages
+ */
+
+interface LanguagePattern {
+  /**
+   * Patterns that indicate this is NOT the language
+   */
+  exclude?: RegExp[];
+  /**
+   * Optional patterns that increase confidence
+   */
+  optional?: RegExp[];
+  /**
+   * Required patterns that must be present
+   */
+  required?: RegExp[];
+  /**
+   * Weight/confidence score (higher = more confident)
+   */
+  weight?: number;
+}
+
+interface LanguageDetectionResult {
+  confidence: number;
+  language: string;
+}
+
+const LANGUAGE_PATTERNS: Record<string, LanguagePattern> = {
+  // Shell/Config
+  bash: {
+    optional: [/\|\||&&/, /echo\s+/, /if\s+\[/],
+    required: [/^#!\/bin\/(ba)?sh/, /\${?\w+}?/],
+    weight: 7,
+  },
+
+  csharp: {
+    optional: [/\[.*]/, /async\s+Task/, /var\s+\w+\s*=/],
+    required: [/(public|private|protected)\s+(class|interface|namespace)/, /using\s+\w+/],
+    weight: 8,
+  },
+
+  css: {
+    optional: [/@media|@import|@keyframes/, /!important/],
+    required: [/[#.]?[\w-]+\s*{/, /:\s*[\w#%-]+;/],
+    weight: 8,
+  },
+
+  dockerfile: {
+    required: [/^FROM\s+/, /^(RUN|CMD|COPY|ADD|WORKDIR|ENV|EXPOSE)\s+/m],
+    weight: 10,
+  },
+
+  go: {
+    optional: [/import\s+\(/, /:=/, /defer|goroutine/],
+    required: [/package\s+\w+/, /func\s+\w+/],
+    weight: 8,
+  },
+
+  graphql: {
+    optional: [/fragment\s+/, /on\s+\w+/],
+    required: [/(query|mutation|subscription)\s+/, /{[\S\s]*}/],
+    weight: 8,
+  },
+
+  // Web languages
+  html: {
+    optional: [/<\/\w+>/, /class=|id=/],
+    required: [/<(html|head|body|div|span|p|a|img|script|style|link|meta)/i],
+    weight: 9,
+  },
+
+  ini: {
+    exclude: [/^\s*</, /{.*}/],
+    required: [/^\[.*]$/m, /\w+\s*=\s*/],
+    weight: 6,
+  },
+
+  java: {
+    optional: [/@Override|@Autowired/, /extends|implements/, /System\.out/],
+    required: [
+      /(public|private|protected)\s+(class|interface|static)/,
+      /\w+\s+\w+\s*\([^)]*\)\s*{/,
+    ],
+    weight: 8,
+  },
+
+  // JavaScript family
+  javascript: {
+    exclude: [/^\s*</, /interface\s+\w+/, /:\s*\w+\s*[;=]/],
+    optional: [/=>\s*{/, /console\.(log|error|warn)/, /\.then\(/, /require\(/],
+    required: [/(function|const|let|var|class|import|export|async|await)\s/],
+    weight: 7,
+  },
+
+  // Data formats
+  json: {
+    optional: [/"[^"]*"\s*:/, /:\s*["'[{]/],
+    required: [/^\s*[[{]/, /[\]}]\s*$/],
+    weight: 10,
+  },
+
+  jsx: {
+    exclude: [/^\s*<!DOCTYPE/, /^\s*<html/],
+    optional: [/className=/, /{.*}/, /import.*from/],
+    required: [/<\w+[^>]*>/, /(const|function|class)\s+\w+/],
+    weight: 8,
+  },
+
+  makefile: {
+    optional: [/\$\(.*\)/, /\.PHONY/],
+    required: [/^[\w-]+:\s*/, /^\t/m],
+    weight: 7,
+  },
+
+  // Other common languages
+  markdown: {
+    optional: [/```/, /\*\*.*\*\*/, /^\s*[*+-]\s+/m],
+    required: [/^#{1,6}\s+/, /\[.*]\(.*\)/],
+    weight: 6,
+  },
+
+  php: {
+    optional: [/function\s+\w+/, /class\s+\w+/, /echo|print/],
+    required: [/<\?php/, /\$\w+/],
+    weight: 10,
+  },
+
+  powershell: {
+    optional: [/\|\s*Where/, /\|\s*Select/, /param\(/],
+    required: [/\$\w+/, /(Get|Set|New|Remove)-\w+/],
+    weight: 8,
+  },
+
+  // Backend languages
+  python: {
+    optional: [/if __name__|print\(/, /self\.|lambda/, /@\w+\s*$/m],
+    required: [/(def|class|import|from)\s+\w+/, /:\s*$/m],
+    weight: 8,
+  },
+
+  ruby: {
+    optional: [/do\s*\|.*\|/, /puts|require/, /:\w+\s*=>/],
+    required: [/(def|class|module|end)\s/, /@\w+/],
+    weight: 7,
+  },
+
+  rust: {
+    optional: [/::\w+/, /&mut|&str/, /#\[derive\(/],
+    required: [/(fn|struct|impl|trait|use)\s+/, /let\s+(mut\s+)?\w+/],
+    weight: 8,
+  },
+
+  scss: {
+    optional: [/@mixin|@include|@extend/, /#{.*}/],
+    required: [/\$[\w-]+\s*:/, /[&@]\w+/],
+    weight: 8,
+  },
+
+  // Database
+  sql: {
+    optional: [/from|where|join|group by|order by/i, /\*/],
+    required: [/(select|insert|update|delete|create|alter|drop)\s+/i],
+    weight: 9,
+  },
+
+  // Config formats
+  toml: {
+    optional: [/\[\[.*]]/, /"""[\S\s]*"""/],
+    required: [/^\[.*]$/m, /\w+\s*=\s*[\w"']/],
+    weight: 8,
+  },
+
+  tsx: {
+    optional: [/:\s*React\./, /:\s*FC</, /useState|useEffect/],
+    required: [/<\w+[^>]*>/, /interface|type\s+\w+/],
+    weight: 9,
+  },
+
+  typescript: {
+    optional: [/<\w+>/, /as\s+\w+/, /implements|extends/],
+    required: [/(interface|type|enum)\s+\w+/, /:\s*\w+(\[]|<.+>)?\s*[);=]/],
+    weight: 8,
+  },
+
+  xml: {
+    optional: [/<\/\w+>/, /xmlns/],
+    required: [/<\?xml|<\w+[^>]*>/],
+    weight: 9,
+  },
+
+  yaml: {
+    exclude: [/^\s*[[\]{]/],
+    required: [/^[\s-]*\w+:\s*/, /^[\s-]*-\s+/m],
+    weight: 8,
+  },
+};
+
+/**
+ * Detect the programming language of a code snippet
+ * @param code - The code snippet to analyze
+ * @returns Language detection result with confidence score
+ */
+export function detectLanguage(code: string): LanguageDetectionResult | null {
+  if (!code || code.trim().length === 0) {
+    return null;
+  }
+
+  const trimmed = code.trim();
+  const scores: Record<string, number> = {};
+
+  // Test each language pattern
+  for (const [language, pattern] of Object.entries(LANGUAGE_PATTERNS)) {
+    let score = 0;
+    const baseWeight = pattern.weight || 5;
+
+    // Check exclude patterns first
+    if (pattern.exclude) {
+      const hasExclude = pattern.exclude.some((regex) => regex.test(trimmed));
+      if (hasExclude) {
+        continue; // Skip this language
+      }
+    }
+
+    // Check required patterns
+    if (pattern.required) {
+      const allRequired = pattern.required.every((regex) => regex.test(trimmed));
+      if (!allRequired) {
+        continue; // All required patterns must match
+      }
+      score += baseWeight * 2; // Strong indicator
+    }
+
+    // Check optional patterns
+    if (pattern.optional) {
+      const matchedOptional = pattern.optional.filter((regex) => regex.test(trimmed)).length;
+      score += matchedOptional * baseWeight;
+    }
+
+    if (score > 0) {
+      scores[language] = score;
+    }
+  }
+
+  // Find language with highest score
+  const entries = Object.entries(scores);
+  if (entries.length === 0) {
+    return null;
+  }
+
+  entries.sort((a, b) => b[1] - a[1]);
+  const [topLanguage, topScore] = entries[0];
+
+  // Calculate confidence (0-100)
+  const maxPossibleScore = (LANGUAGE_PATTERNS[topLanguage].weight || 5) * 5;
+  const confidence = Math.min(100, Math.round((topScore / maxPossibleScore) * 100));
+
+  // Only return if confidence is high enough
+  if (confidence < 30) {
+    return null;
+  }
+
+  return {
+    confidence,
+    language: topLanguage,
+  };
+}
+
+/**
+ * Simple detection for common formats with high confidence
+ * Falls back to detectLanguage for more complex detection
+ */
+export function detectCodeLanguage(code: string): string | null {
+  const trimmed = code.trim();
+
+  // Fast path for JSON
+  if (
+    (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+    (trimmed.startsWith('[') && trimmed.endsWith(']'))
+  ) {
+    try {
+      JSON.parse(trimmed);
+      return 'json';
+    } catch {
+      // Not valid JSON
+    }
+  }
+
+  // Fast path for common patterns
+  if (/^\s*(select|insert|update|delete|create|alter|drop)\s+/i.test(code)) {
+    return 'sql';
+  }
+
+  if (/^<\?xml/i.test(code)) {
+    return 'xml';
+  }
+
+  if (/^FROM\s+|^RUN\s+|^CMD\s+/m.test(code)) {
+    return 'dockerfile';
+  }
+
+  if (/<\?php/.test(code)) {
+    return 'php';
+  }
+
+  // Use pattern matching for complex detection
+  const result = detectLanguage(code);
+  return result && result.confidence > 50 ? result.language : null;
+}

package/editor/src/plugins/markdown/utils/index.ts

@@ -0,0 +1,243 @@
+import {
+  $caretFromPoint,
+  $getCaretRange,
+  $getChildCaret,
+  $getRoot,
+  $isElementNode,
+  $isRangeSelection,
+  $isTextNode,
+  $isTextPointCaret,
+  $parseSerializedNode,
+  BaseSelection,
+  LexicalEditor,
+  LexicalNode,
+  SELECTION_INSERT_CLIPBOARD_NODES_COMMAND,
+  TextNode,
+} from 'lexical';
+
+import { IRootNode } from '@/editor-kernel/inode';
+
+/**
+ * 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');
+}
+
+export function isEqualSubString(
+  stringA: string,
+  aStart: number,
+  stringB: string,
+  bStart: number,
+  length: number,
+): boolean {
+  for (let i = 0; i < length; i++) {
+    if (stringA[aStart + i] !== stringB[bStart + i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+// eslint-disable-next-line unicorn/better-regex
+export const PUNCTUATION_OR_SPACE = /[!-/:-@[-`{-~\s]/;
+
+export function getOpenTagStartIndex(string: string, maxIndex: number, tag: string): number {
+  const tagLength = tag.length;
+
+  for (let i = maxIndex; i >= tagLength; i--) {
+    const startIndex = i - tagLength;
+
+    if (
+      isEqualSubString(string, startIndex, tag, 0, tagLength) && // Space after opening tag cancels transformation
+      string[startIndex + tagLength] !== ' '
+    ) {
+      return startIndex;
+    }
+  }
+
+  return -1;
+}
+
+export function indexBy<T>(
+  list: Array<T>,
+  callback: (arg0: T) => string | undefined,
+): Readonly<Record<string, Array<T>>> {
+  const index: Record<string, Array<T>> = {};
+
+  for (const item of list) {
+    const key = callback(item);
+
+    if (!key) {
+      continue;
+    }
+
+    if (index[key]) {
+      index[key].push(item);
+    } else {
+      index[key] = [item];
+    }
+  }
+
+  return index;
+}
+
+let Punctuation = /[!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~\u00A1\u2010-\u2027-]/;
+try {
+  Punctuation = new RegExp('[\\p{Pc}|\\p{Pd}|\\p{Pe}|\\p{Pf}|\\p{Pi}|\\p{Po}|\\p{Ps}]', 'u');
+} catch {}
+
+/**
+ * Checks if a character is a punctuation character.
+ * @param char The character to check.
+ * @returns True if the character is a punctuation character, false otherwise.
+ */
+export function isPunctuationChar(char: string): boolean {
+  return Punctuation.test(char);
+}
+
+function $updateSelectionOnInsert(selection: BaseSelection): void {
+  if ($isRangeSelection(selection) && selection.isCollapsed()) {
+    const anchor = selection.anchor;
+    let nodeToInspect: LexicalNode | null = null;
+
+    const anchorCaret = $caretFromPoint(anchor, 'previous');
+    if (anchorCaret) {
+      if ($isTextPointCaret(anchorCaret)) {
+        nodeToInspect = anchorCaret.origin;
+      } else {
+        const range = $getCaretRange(anchorCaret, $getChildCaret($getRoot(), 'next').getFlipped());
+        for (const caret of range) {
+          if ($isTextNode(caret.origin)) {
+            nodeToInspect = caret.origin;
+            break;
+          } else if ($isElementNode(caret.origin) && !caret.origin.isInline()) {
+            break;
+          }
+        }
+      }
+    }
+
+    if (nodeToInspect && $isTextNode(nodeToInspect)) {
+      const newFormat = nodeToInspect.getFormat();
+      const newStyle = nodeToInspect.getStyle();
+
+      if (selection.format !== newFormat || selection.style !== newStyle) {
+        selection.format = newFormat;
+        selection.style = newStyle;
+        selection.dirty = true;
+      }
+    }
+  }
+}
+
+/**
+ * Inserts Lexical nodes into the editor using different strategies depending on
+ * some simple selection-based heuristics. If you're looking for a generic way to
+ * to insert nodes into the editor at a specific selection point, you probably want
+ * {@link lexical.$insertNodes}
+ *
+ * @param editor LexicalEditor instance to insert the nodes into.
+ * @param nodes The nodes to insert.
+ * @param selection The selection to insert the nodes into.
+ */
+export function $insertGeneratedNodes(
+  editor: LexicalEditor,
+  nodes: Array<LexicalNode>,
+  selection: BaseSelection,
+): void {
+  if (
+    !editor.dispatchCommand(SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, {
+      nodes,
+      selection,
+    })
+  ) {
+    selection.insertNodes(nodes);
+    $updateSelectionOnInsert(selection);
+  }
+  return;
+}
+
+export interface BaseSerializedNode {
+  children?: Array<BaseSerializedNode>;
+  type: string;
+  version: number;
+}
+
+/**
+ * Creates an object containing all the styles and their values provided in the CSS string.
+ * @param css - The CSS string of styles and their values.
+ * @returns The styleObject containing all the styles and their values.
+ */
+export function getStyleObjectFromRawCSS(css: string): Record<string, string> {
+  const styleObject: Record<string, string> = {};
+  if (!css) {
+    return styleObject;
+  }
+  const styles = css.split(';');
+
+  for (const style of styles) {
+    if (style !== '') {
+      const [key, value] = style.split(/:([^]+)/); // split on first colon
+      if (key && value) {
+        styleObject[key.trim()] = value.trim();
+      }
+    }
+  }
+
+  return styleObject;
+}
+
+/**
+ * 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 CSS_TO_STYLES: Map<string, Record<string, string>> = new Map();
+
+/**
+ * Gets the TextNode's style object and adds the styles to the CSS.
+ * @param node - The TextNode to add styles to.
+ */
+export function $addNodeStyle(node: TextNode): void {
+  const CSSText = node.getStyle();
+  const styles = getStyleObjectFromRawCSS(CSSText);
+  CSS_TO_STYLES.set(CSSText, styles);
+}
+
+/**
+ * This method takes an array of objects conforming to the BaseSerializedNode interface and returns
+ * an Array containing instances of the corresponding LexicalNode classes registered on the editor.
+ * Normally, you'd get an Array of BaseSerialized nodes from {@link $generateJSONFromSelectedNodes}
+ *
+ * @param serializedNodes an Array of objects conforming to the BaseSerializedNode interface.
+ * @returns an Array of Lexical Node objects.
+ */
+export function $generateNodesFromSerializedNodes(
+  serializedNodes: Array<BaseSerializedNode>,
+): Array<LexicalNode> {
+  const nodes = [];
+  for (const serializedNode of serializedNodes) {
+    const node = $parseSerializedNode(serializedNode);
+    if ($isTextNode(node)) {
+      $addNodeStyle(node);
+    }
+    nodes.push(node);
+  }
+  return nodes;
+}
+
+export function insertIRootNode(
+  editor: LexicalEditor,
+  root: IRootNode,
+  selection: BaseSelection,
+): void {
+  const nodes = $generateNodesFromSerializedNodes(root.children);
+  $insertGeneratedNodes(editor, nodes, selection!);
+}

package/editor/src/plugins/markdown/utils/logger.ts

@@ -0,0 +1,3 @@
+import { createDebugLogger } from '@/utils/debug';
+
+export const logger = createDebugLogger('plugin', 'markdown');

package/editor/src/plugins/markdown/utils/url-validator.ts

@@ -0,0 +1,6 @@
+/**
+ * URL validation utilities for detecting and validating URLs in pasted content
+ */
+
+// Re-export shared URL utilities from common utils
+export { isPureUrl, isValidUrl } from '@/utils/url';

package/editor/src/plugins/math/__tests__/litexml.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import Editor, { resetRandomKey } from '@/editor-kernel';
+import { CommonPlugin } from '@/plugins/common';
+import { LitexmlPlugin } from '@/plugins/litexml';
+import { MarkdownPlugin } from '@/plugins/markdown';
+import { IEditor } from '@/types';
+
+import { MathPlugin } from '../plugin';
+
+describe('math litexml', () => {
+  let editor: IEditor;
+
+  beforeEach(() => {
+    resetRandomKey();
+    editor = Editor.createEditor();
+    editor.registerPlugins([LitexmlPlugin, MarkdownPlugin, CommonPlugin, MathPlugin]);
+    editor.initNodeEditor();
+  });
+
+  it('reader should work', () => {
+    editor.setDocument(
+      'litexml',
+      '<?xml version="1.0" encoding="UTF-8"?><root><p id="1"><math id="2" code="$E=mc^2$"></math></p></root>',
+    );
+    const markdown = editor.getDocument('markdown') as unknown as string;
+    expect(markdown).toBe('$$E=mc^2$$\n');
+  });
+
+  it('writer should work', async () => {
+    editor.setDocument('markdown', '$$E=mc^2$$');
+    const xml = editor.getDocument('litexml') as unknown as string;
+    expect(xml.replace(/>\n\s*?</g, '><')).toBe(
+      `<?xml version="1.0" encoding="UTF-8"?><root><p id="ll63"><math id="lqqe" code="$E=mc^2$"></math></p></root>`,
+    );
+  });
+});

package/editor/src/plugins/math/__tests__/math.test.ts

@@ -0,0 +1,111 @@
+import { CommonPlugin, Kernel } from '@hubstr/kit/editor';
+import { describe, expect, it } from 'vitest';
+
+import { MarkdownPlugin } from '@/plugins/markdown/plugin';
+
+import { MathPlugin } from '../plugin';
+
+describe('Math plugin', () => {
+  it('should math markdown writer work', () => {
+    const editor = new Kernel();
+    editor.registerPlugins([MarkdownPlugin, CommonPlugin, MathPlugin]);
+
+    editor.setRootElement(document.createElement('div'));
+    editor.setDocument('json', {
+      root: {
+        children: [
+          {
+            children: [
+              {
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+                text: 'This is a math test: ',
+                type: 'text',
+                version: 1,
+              },
+              {
+                type: 'math',
+                version: 1,
+                code: 'E=mc^2',
+              },
+              {
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+                text: '\uFEFF',
+                type: 'cursor',
+                version: 1,
+              },
+            ],
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            type: 'paragraph',
+            version: 1,
+            textStyle: '--shiki-dark:var(--color-text);--shiki-light:var(--color-text)',
+            textFormat: 0,
+          },
+        ],
+        direction: 'ltr',
+        format: '',
+        indent: 0,
+        type: 'root',
+        version: 1,
+        textStyle: '--shiki-dark:var(--color-text);--shiki-light:var(--color-text)',
+      },
+    });
+
+    const markdown = editor.getDocument('markdown');
+    expect(markdown).toBe('This is a math test: $E=mc^2$\n');
+  });
+
+  it('should math block markdown writer work', () => {
+    const editor = new Kernel();
+    editor.registerPlugins([MarkdownPlugin, CommonPlugin, MathPlugin]);
+
+    editor.setRootElement(document.createElement('div'));
+    editor.setDocument('json', {
+      root: {
+        children: [
+          {
+            children: [
+              {
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+                text: 'this is block',
+                type: 'text',
+                version: 1,
+              },
+            ],
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            type: 'paragraph',
+            version: 1,
+            textFormat: 0,
+            textStyle: '',
+          },
+          {
+            type: 'mathBlock',
+            version: 1,
+            code: 'E=mc^2',
+          },
+        ],
+        direction: 'ltr',
+        format: '',
+        indent: 0,
+        type: 'root',
+        version: 1,
+        textStyle: '--shiki-dark:var(--color-info);--shiki-light:var(--color-info)',
+      },
+    });
+
+    const markdown = editor.getDocument('markdown');
+    expect(markdown).toBe('this is block\n\n$$\nE=mc^2\n$$\n');
+  });
+});