5htp-core 0.4.8 → 0.4.9

package/src/client/components/inputv3/Rte/plugins/TypingPerfPlugin/index.ts

@@ -0,0 +1,117 @@
+/**
+ * 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 {useEffect} from 'react';
+
+import useReport from '../../hooks/useReport';
+
+const validInputTypes = new Set([
+  'insertText',
+  'insertCompositionText',
+  'insertFromComposition',
+  'insertLineBreak',
+  'insertParagraph',
+  'deleteCompositionText',
+  'deleteContentBackward',
+  'deleteByComposition',
+  'deleteContent',
+  'deleteContentForward',
+  'deleteWordBackward',
+  'deleteWordForward',
+  'deleteHardLineBackward',
+  'deleteSoftLineBackward',
+  'deleteHardLineForward',
+  'deleteSoftLineForward',
+]);
+
+export default function TypingPerfPlugin(): JSX.Element | null {
+  const report = useReport();
+  useEffect(() => {
+    let start = 0;
+    let timerId: ReturnType<typeof setTimeout> | null;
+    let keyPressTimerId: ReturnType<typeof setTimeout> | null;
+    let log: Array<DOMHighResTimeStamp> = [];
+    let invalidatingEvent = false;
+
+    const measureEventEnd = function logKeyPress() {
+      if (keyPressTimerId != null) {
+        if (invalidatingEvent) {
+          invalidatingEvent = false;
+        } else {
+          log.push(performance.now() - start);
+        }
+
+        clearTimeout(keyPressTimerId);
+        keyPressTimerId = null;
+      }
+    };
+
+    const measureEventStart = function measureEvent() {
+      if (timerId != null) {
+        clearTimeout(timerId);
+        timerId = null;
+      }
+
+      // We use a setTimeout(0) instead of requestAnimationFrame, due to
+      // inconsistencies between the sequencing of rAF in different browsers.
+      keyPressTimerId = setTimeout(measureEventEnd, 0);
+      // Schedule a timer to report the results.
+      timerId = setTimeout(() => {
+        const total = log.reduce((a, b) => a + b, 0);
+        const reportedText =
+          'Typing Perf: ' + Math.round((total / log.length) * 100) / 100 + 'ms';
+        report(reportedText);
+        log = [];
+      }, 2000);
+      // Make the time after we do the previous logic, so we don't measure the overhead
+      // for it all.
+      start = performance.now();
+    };
+
+    const beforeInputHandler = function beforeInputHandler(event: InputEvent) {
+      if (!validInputTypes.has(event.inputType) || invalidatingEvent) {
+        invalidatingEvent = false;
+        return;
+      }
+
+      measureEventStart();
+    };
+
+    const keyDownHandler = function keyDownHandler(event: KeyboardEvent) {
+      const key = event.key;
+
+      if (key === 'Backspace' || key === 'Enter') {
+        measureEventStart();
+      }
+    };
+
+    const pasteHandler = function pasteHandler() {
+      invalidatingEvent = true;
+    };
+
+    const cutHandler = function cutHandler() {
+      invalidatingEvent = true;
+    };
+
+    window.addEventListener('keydown', keyDownHandler, true);
+    window.addEventListener('selectionchange', measureEventEnd, true);
+    window.addEventListener('beforeinput', beforeInputHandler, true);
+    window.addEventListener('paste', pasteHandler, true);
+    window.addEventListener('cut', cutHandler, true);
+
+    return () => {
+      window.removeEventListener('keydown', keyDownHandler, true);
+      window.removeEventListener('selectionchange', measureEventEnd, true);
+      window.removeEventListener('beforeinput', beforeInputHandler, true);
+      window.removeEventListener('paste', pasteHandler, true);
+      window.removeEventListener('cut', cutHandler, true);
+    };
+  }, [report]);
+
+  return null;
+}

package/src/client/components/inputv3/Rte/plugins/YouTubePlugin/index.ts

@@ -0,0 +1,41 @@
+/**
+ * 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 {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$insertNodeToNearestRoot} from '@lexical/utils';
+import {COMMAND_PRIORITY_EDITOR, createCommand, LexicalCommand} from 'lexical';
+import {useEffect} from 'react';
+
+import {$createYouTubeNode, YouTubeNode} from '../../nodes/YouTubeNode';
+
+export const INSERT_YOUTUBE_COMMAND: LexicalCommand<string> = createCommand(
+  'INSERT_YOUTUBE_COMMAND',
+);
+
+export default function YouTubePlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor.hasNodes([YouTubeNode])) {
+      throw new Error('YouTubePlugin: YouTubeNode not registered on editor');
+    }
+
+    return editor.registerCommand<string>(
+      INSERT_YOUTUBE_COMMAND,
+      (payload) => {
+        const youTubeNode = $createYouTubeNode(payload);
+        $insertNodeToNearestRoot(youTubeNode);
+
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR,
+    );
+  }, [editor]);
+
+  return null;
+}

package/src/client/components/inputv3/Rte/shared/canUseDOM.ts

@@ -0,0 +1,4 @@
+export const CAN_USE_DOM: boolean =
+    typeof window !== 'undefined' &&
+    typeof window.document !== 'undefined' &&
+    typeof window.document.createElement !== 'undefined';

package/src/client/components/inputv3/Rte/shared/caretFromPoint.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 default function caretFromPoint(
+  x: number,
+  y: number,
+): null | {
+  offset: number;
+  node: Node;
+} {
+  if (typeof document.caretRangeFromPoint !== 'undefined') {
+    const range = document.caretRangeFromPoint(x, y);
+    if (range === null) {
+      return null;
+    }
+    return {
+      node: range.startContainer,
+      offset: range.startOffset,
+    };
+    // @ts-ignore
+  } else if (document.caretPositionFromPoint !== 'undefined') {
+    // @ts-ignore FF - no types
+    const range = document.caretPositionFromPoint(x, y);
+    if (range === null) {
+      return null;
+    }
+    return {
+      node: range.offsetNode,
+      offset: range.offset,
+    };
+  } else {
+    // Gracefully handle IE
+    return null;
+  }
+}

package/src/client/components/inputv3/Rte/shared/environment.ts

@@ -0,0 +1,56 @@
+/**
+ * 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 { 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;

package/src/client/components/inputv3/Rte/shared/invariant.ts

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ *
+ */
+
+// invariant(condition, message) will refine types based on "condition", and
+// if "condition" is false will throw an error. This function is special-cased
+// in flow itself, so we can't name it anything else.
+export default function invariant(
+  cond?: boolean,
+  message?: string,
+  ...args: string[]
+): asserts cond {
+  if (cond) {
+    return;
+  }
+
+  throw new Error(
+    'Internal Lexical error: invariant() is meant to be replaced at compile ' +
+      'time. There is no runtime version. Error: ' +
+      message,
+  );
+}

package/src/client/components/inputv3/Rte/shared/normalizeClassNames.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 default function normalizeClassNames(
+  ...classNames: Array<typeof undefined | boolean | null | string>
+): Array<string> {
+  const rval = [];
+  for (const className of classNames) {
+    if (className && typeof className === 'string') {
+      for (const [s] of className.matchAll(/\S+/g)) {
+        rval.push(s);
+      }
+    }
+  }
+  return rval;
+}

package/src/client/components/inputv3/Rte/shared/react-test-utils.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 * as React from 'react';
+import * as ReactTestUtils from 'react-dom/test-utils';
+
+/**
+ * React 19 moved act from react-dom/test-utils to react
+ * https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-react-dom-test-utils
+ */
+export const act =
+  'act' in React
+    ? (React.act as typeof ReactTestUtils.act)
+    : ReactTestUtils.act;

package/src/client/components/inputv3/Rte/shared/reactPatches.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 React from 'react';
+
+// Webpack + React 17 fails to compile on the usage of `React.startTransition` or
+// `React["startTransition"]` even if it's behind a feature detection of
+// `"startTransition" in React`. Moving this to a constant avoids the issue :/
+const START_TRANSITION = 'startTransition';
+
+export function startTransition(callback: () => void) {
+  if (START_TRANSITION in React) {
+    React[START_TRANSITION](callback);
+  } else {
+    callback();
+  }
+}

package/src/client/components/inputv3/Rte/shared/simpleDiffWithCursor.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 default function simpleDiffWithCursor(
+  a: string,
+  b: string,
+  cursor: number,
+): {index: number; insert: string; remove: number} {
+  const aLength = a.length;
+  const bLength = b.length;
+  let left = 0; // number of same characters counting from left
+  let right = 0; // number of same characters counting from right
+  // Iterate left to the right until we find a changed character
+  // First iteration considers the current cursor position
+  while (
+    left < aLength &&
+    left < bLength &&
+    a[left] === b[left] &&
+    left < cursor
+  ) {
+    left++;
+  }
+  // Iterate right to the left until we find a changed character
+  while (
+    right + left < aLength &&
+    right + left < bLength &&
+    a[aLength - right - 1] === b[bLength - right - 1]
+  ) {
+    right++;
+  }
+  // Try to iterate left further to the right without caring about the current cursor position
+  while (
+    right + left < aLength &&
+    right + left < bLength &&
+    a[left] === b[left]
+  ) {
+    left++;
+  }
+  return {
+    index: left,
+    insert: b.slice(left, bLength - right),
+    remove: aLength - left - right,
+  };
+}

package/src/client/components/inputv3/Rte/shared/useLayoutEffect.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 {useEffect, useLayoutEffect} from 'react';
+import {CAN_USE_DOM} from '../shared/canUseDOM';
+
+// This workaround is no longer necessary in React 19,
+// but we currently support React >=17.x
+// https://github.com/facebook/react/pull/26395
+const useLayoutEffectImpl: typeof useLayoutEffect = CAN_USE_DOM
+  ? useLayoutEffect
+  : useEffect;
+
+export default useLayoutEffectImpl;

package/src/client/components/inputv3/Rte/shared/warnOnlyOnce.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 default function warnOnlyOnce(message: string) {
+  if (!__DEV__) {
+    return;
+  }
+  let run = false;
+  return () => {
+    if (!run) {
+      console.warn(message);
+    }
+    run = true;
+  };
+}

package/src/client/components/inputv3/Rte/style.less

@@ -1,4 +1,34 @@
 .input.rte {
+
+    .preview {
+        position: relative;
+
+        &:before {
+
+            content: 'Click here to edit';
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+
+            background: fade(#FFF, 50%);
+            pointer-events: none;
+            z-index: 1;
+            opacity: 0;
+            transition: all 0.3s linear;
+        }
+
+        &:hover:before {
+           opacity: 1;
+        }
+    }
+
     .other h2 {
         font-size: 18px;
         color: #444;
@@ -236,26 +266,6 @@
         padding-left: 16px;
     }
 
-    .editor-list-ol {
-        padding: 0;
-        margin: 0;
-        margin-left: 16px;
-    }
-
-    .editor-list-ul {
-        padding: 0;
-        margin: 0;
-        margin-left: 16px;
-    }
-
-    .editor-listitem {
-        margin: 8px 32px 8px 32px;
-    }
-
-    .editor-nested-listitem {
-        list-style-type: none;
-    }
-
     pre::-webkit-scrollbar {
         background: transparent;
         width: 10px;
@@ -385,44 +395,4 @@
         line-height: 16px;
         background-size: contain;
     }
-
-    i.undo {
-        background-image: url(icons/arrow-counterclockwise.svg);
-    }
-
-    i.redo {
-        background-image: url(icons/arrow-clockwise.svg);
-    }
-
-    i.bold {
-        background-image: url(icons/type-bold.svg);
-    }
-
-    i.italic {
-        background-image: url(icons/type-italic.svg);
-    }
-
-    i.underline {
-        background-image: url(icons/type-underline.svg);
-    }
-
-    i.strikethrough {
-        background-image: url(icons/type-strikethrough.svg);
-    }
-
-    i.left-align {
-        background-image: url(icons/text-left.svg);
-    }
-
-    i.center-align {
-        background-image: url(icons/text-center.svg);
-    }
-
-    i.right-align {
-        background-image: url(icons/text-right.svg);
-    }
-
-    i.justify-align {
-        background-image: url(icons/justify.svg);
-    }
 }

package/src/client/components/inputv3/Rte/themes/CommentEditorTheme.css

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.CommentEditorTheme__paragraph {
+  margin: 0;
+  position: 'relative';
+}

package/src/client/components/inputv3/Rte/themes/CommentEditorTheme.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 {EditorThemeClasses} from 'lexical';
+
+import './CommentEditorTheme.css';
+
+import baseTheme from './PlaygroundEditorTheme';
+
+const theme: EditorThemeClasses = {
+  ...baseTheme,
+  paragraph: 'CommentEditorTheme__paragraph',
+};
+
+export default theme;