5htp-core 0.4.8 → 0.4.9

package/src/client/components/inputv3/Rte/plugins/PageBreakPlugin/index.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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, mergeRegister} from '@lexical/utils';
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  LexicalCommand,
+} from 'lexical';
+import {useEffect} from 'react';
+
+import {$createPageBreakNode, PageBreakNode} from '../../nodes/PageBreakNode';
+
+export const INSERT_PAGE_BREAK: LexicalCommand<undefined> = createCommand();
+
+export default function PageBreakPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor.hasNodes([PageBreakNode])) {
+      throw new Error(
+        'PageBreakPlugin: PageBreakNode is not registered on editor',
+      );
+    }
+
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_PAGE_BREAK,
+        () => {
+          const selection = $getSelection();
+
+          if (!$isRangeSelection(selection)) {
+            return false;
+          }
+
+          const focusNode = selection.focus.getNode();
+          if (focusNode !== null) {
+            const pgBreak = $createPageBreakNode();
+            $insertNodeToNearestRoot(pgBreak);
+          }
+
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    );
+  }, [editor]);
+
+  return null;
+}

package/src/client/components/inputv3/Rte/plugins/PasteLogPlugin/index.tsx

@@ -0,0 +1,54 @@
+/**
+ * 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 {COMMAND_PRIORITY_NORMAL, PASTE_COMMAND} from 'lexical';
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+
+export default function PasteLogPlugin(): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const [isActive, setIsActive] = useState(false);
+  const [lastClipboardData, setLastClipboardData] = useState<string | null>(
+    null,
+  );
+  useEffect(() => {
+    if (isActive) {
+      return editor.registerCommand(
+        PASTE_COMMAND,
+        (e: ClipboardEvent) => {
+          const {clipboardData} = e;
+          const allData: string[] = [];
+          if (clipboardData && clipboardData.types) {
+            clipboardData.types.forEach((type) => {
+              allData.push(type.toUpperCase(), clipboardData.getData(type));
+            });
+          }
+          setLastClipboardData(allData.join('\n\n'));
+          return false;
+        },
+        COMMAND_PRIORITY_NORMAL,
+      );
+    }
+  }, [editor, isActive]);
+  return (
+    <>
+      <button
+        id="paste-log-button"
+        className={`editor-dev-button ${isActive ? 'active' : ''}`}
+        onClick={() => {
+          setIsActive(!isActive);
+        }}
+        title={isActive ? 'Disable paste log' : 'Enable paste log'}
+      />
+      {isActive && lastClipboardData !== null ? (
+        <pre>{lastClipboardData}</pre>
+      ) : null}
+    </>
+  );
+}

package/src/client/components/inputv3/Rte/plugins/PollPlugin/index.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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.
+ *
+ */
+// Core
+import Button from '@client/components/button';
+import Input from '@client/components/inputv3';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodeInElement } from '@lexical/utils';
+import {
+    $createParagraphNode,
+    $insertNodes,
+    $isRootOrShadowRoot,
+    COMMAND_PRIORITY_EDITOR,
+    createCommand,
+    LexicalCommand,
+    LexicalEditor,
+} from 'lexical';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+
+import {
+    $createPollNode,
+    createPollOption,
+    PollNode,
+} from '../../nodes/PollNode';
+
+export const INSERT_POLL_COMMAND: LexicalCommand<string> = createCommand(
+    'INSERT_POLL_COMMAND',
+);
+
+export function InsertPollDialog({
+    editor,
+    close,
+}: {
+    editor: LexicalEditor;
+    close: () => void;
+}): React.JSX.Element {
+    const [question, setQuestion] = useState('');
+
+    const onClick = () => {
+        editor.dispatchCommand(INSERT_POLL_COMMAND, question);
+        close();
+    };
+
+    return (
+        <>
+            <Input title="Question" onChange={setQuestion} value={question} />
+          
+            <Button type="primary" disabled={question.trim() === ''} onClick={onClick}>
+                Confirm
+            </Button>
+        </>
+    );
+}
+
+export default function PollPlugin(): React.JSX.Element | null {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([PollNode])) {
+            throw new Error('PollPlugin: PollNode not registered on editor');
+        }
+
+        return editor.registerCommand<string>(
+            INSERT_POLL_COMMAND,
+            (payload) => {
+                const pollNode = $createPollNode(payload, [
+                    createPollOption(),
+                    createPollOption(),
+                ]);
+                $insertNodes([pollNode]);
+                if ($isRootOrShadowRoot(pollNode.getParentOrThrow())) {
+                    $wrapNodeInElement(pollNode, $createParagraphNode).selectEnd();
+                }
+
+                return true;
+            },
+            COMMAND_PRIORITY_EDITOR,
+        );
+    }, [editor]);
+    return null;
+}

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

@@ -0,0 +1,125 @@
+/**
+ * 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 {LexicalCommand, LexicalEditor, RangeSelection} from 'lexical';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  REDO_COMMAND,
+  UNDO_COMMAND,
+} from 'lexical';
+import {useEffect, useRef, useState} from 'react';
+
+import useReport from '../../hooks/useReport';
+
+export const SPEECH_TO_TEXT_COMMAND: LexicalCommand<boolean> = createCommand(
+  'SPEECH_TO_TEXT_COMMAND',
+);
+
+const VOICE_COMMANDS: Readonly<
+  Record<
+    string,
+    (arg0: {editor: LexicalEditor; selection: RangeSelection}) => void
+  >
+> = {
+  '\n': ({selection}) => {
+    selection.insertParagraph();
+  },
+  redo: ({editor}) => {
+    editor.dispatchCommand(REDO_COMMAND, undefined);
+  },
+  undo: ({editor}) => {
+    editor.dispatchCommand(UNDO_COMMAND, undefined);
+  },
+};
+
+export const SUPPORT_SPEECH_RECOGNITION: boolean =
+  'SpeechRecognition' in window || 'webkitSpeechRecognition' in window;
+
+function SpeechToTextPlugin(): null {
+  const [editor] = useLexicalComposerContext();
+  const [isEnabled, setIsEnabled] = useState<boolean>(false);
+  const SpeechRecognition =
+    // @ts-expect-error missing type
+    window.SpeechRecognition || window.webkitSpeechRecognition;
+  const recognition = useRef<typeof SpeechRecognition | null>(null);
+  const report = useReport();
+
+  useEffect(() => {
+    if (isEnabled && recognition.current === null) {
+      recognition.current = new SpeechRecognition();
+      recognition.current.continuous = true;
+      recognition.current.interimResults = true;
+      recognition.current.addEventListener(
+        'result',
+        (event: typeof SpeechRecognition) => {
+          const resultItem = event.results.item(event.resultIndex);
+          const {transcript} = resultItem.item(0);
+          report(transcript);
+
+          if (!resultItem.isFinal) {
+            return;
+          }
+
+          editor.update(() => {
+            const selection = $getSelection();
+
+            if ($isRangeSelection(selection)) {
+              const command = VOICE_COMMANDS[transcript.toLowerCase().trim()];
+
+              if (command) {
+                command({
+                  editor,
+                  selection,
+                });
+              } else if (transcript.match(/\s*\n\s*/)) {
+                selection.insertParagraph();
+              } else {
+                selection.insertText(transcript);
+              }
+            }
+          });
+        },
+      );
+    }
+
+    if (recognition.current) {
+      if (isEnabled) {
+        recognition.current.start();
+      } else {
+        recognition.current.stop();
+      }
+    }
+
+    return () => {
+      if (recognition.current !== null) {
+        recognition.current.stop();
+      }
+    };
+  }, [SpeechRecognition, editor, isEnabled, report]);
+  useEffect(() => {
+    return editor.registerCommand(
+      SPEECH_TO_TEXT_COMMAND,
+      (_isEnabled: boolean) => {
+        setIsEnabled(_isEnabled);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR,
+    );
+  }, [editor]);
+
+  return null;
+}
+
+export default (SUPPORT_SPEECH_RECOGNITION
+  ? SpeechToTextPlugin
+  : () => null) as () => null;

package/src/client/components/inputv3/Rte/plugins/StickyPlugin/index.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 {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useEffect} from 'react';
+
+import {StickyNode} from '../../nodes/StickyNode';
+
+export default function StickyPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!editor.hasNodes([StickyNode])) {
+      throw new Error('StickyPlugin: StickyNode not registered on editor');
+    }
+  }, [editor]);
+  return null;
+}

package/src/client/components/inputv3/Rte/plugins/TabFocusPlugin/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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 {
+  $getSelection,
+  $isRangeSelection,
+  $setSelection,
+  FOCUS_COMMAND,
+} from 'lexical';
+import {useEffect} from 'react';
+
+const COMMAND_PRIORITY_LOW = 1;
+const TAB_TO_FOCUS_INTERVAL = 100;
+
+let lastTabKeyDownTimestamp = 0;
+let hasRegisteredKeyDownListener = false;
+
+function registerKeyTimeStampTracker() {
+  window.addEventListener(
+    'keydown',
+    (event: KeyboardEvent) => {
+      // Tab
+      if (event.key === 'Tab') {
+        lastTabKeyDownTimestamp = event.timeStamp;
+      }
+    },
+    true,
+  );
+}
+
+export default function TabFocusPlugin(): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!hasRegisteredKeyDownListener) {
+      registerKeyTimeStampTracker();
+      hasRegisteredKeyDownListener = true;
+    }
+
+    return editor.registerCommand(
+      FOCUS_COMMAND,
+      (event: FocusEvent) => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          if (
+            lastTabKeyDownTimestamp + TAB_TO_FOCUS_INTERVAL >
+            event.timeStamp
+          ) {
+            $setSelection(selection.clone());
+          }
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW,
+    );
+  }, [editor]);
+
+  return null;
+}