5htp-core 0.4.8 → 0.4.9

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

@@ -0,0 +1,82 @@
+/**
+ * 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 'katex/dist/katex.css';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodeInElement } from '@lexical/utils';
+import {
+    $createParagraphNode,
+    $insertNodes,
+    $isRootOrShadowRoot,
+    COMMAND_PRIORITY_EDITOR,
+    createCommand,
+    LexicalCommand,
+    LexicalEditor,
+} from 'lexical';
+import { useCallback, useEffect } from 'react';
+import * as React from 'react';
+
+import { $createEquationNode, EquationNode } from '../../nodes/EquationNode';
+import KatexEquationAlterer from '../../ui/KatexEquationAlterer';
+
+type CommandPayload = {
+    equation: string;
+    inline: boolean;
+};
+
+export const INSERT_EQUATION_COMMAND: LexicalCommand<CommandPayload> =
+    createCommand('INSERT_EQUATION_COMMAND');
+
+export function InsertEquationDialog({
+    editor,
+    close,
+}: {
+    editor: LexicalEditor;
+    close: () => void;
+}): JSX.Element {
+    const onEquationConfirm = useCallback(
+        (equation: string, inline: boolean) => {
+            editor.dispatchCommand(INSERT_EQUATION_COMMAND, { equation, inline });
+            close();
+        },
+        [editor, close],
+    );
+
+    return <KatexEquationAlterer onConfirm={onEquationConfirm} />;
+}
+
+export default function EquationsPlugin(): JSX.Element | null {
+    const [editor] = useLexicalComposerContext();
+
+    useEffect(() => {
+        if (!editor.hasNodes([EquationNode])) {
+            throw new Error(
+                'EquationsPlugins: EquationsNode not registered on editor',
+            );
+        }
+
+        return editor.registerCommand<CommandPayload>(
+            INSERT_EQUATION_COMMAND,
+            (payload) => {
+                const { equation, inline } = payload;
+                const equationNode = $createEquationNode(equation, inline);
+
+                $insertNodes([equationNode]);
+                if ($isRootOrShadowRoot(equationNode.getParentOrThrow())) {
+                    $wrapNodeInElement(equationNode, $createParagraphNode).selectEnd();
+                }
+
+                return true;
+            },
+            COMMAND_PRIORITY_EDITOR,
+        );
+    }, [editor]);
+
+    return null;
+}

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

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

package/src/client/components/inputv3/Rte/plugins/FloatingLinkEditorPlugin/index.css

@@ -0,0 +1,41 @@
+.link-editor {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  max-width: 400px;
+  width: 100%;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 0 0 8px 8px;
+  transition: opacity 0.5s;
+  will-change: transform;
+}
+
+.link-editor .button {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.link-editor .button.hovered {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: #eee;
+}
+
+.link-editor .button i,
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  vertical-align: -0.25em;
+}

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

@@ -0,0 +1,393 @@
+/**
+ * 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 './index.css';
+
+import {
+  $createLinkNode,
+  $isAutoLinkNode,
+  $isLinkNode,
+  TOGGLE_LINK_COMMAND,
+} from '@lexical/link';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$findMatchingParent, mergeRegister} from '@lexical/utils';
+import {
+  $getSelection,
+  $isLineBreakNode,
+  $isRangeSelection,
+  BaseSelection,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_CRITICAL,
+  COMMAND_PRIORITY_HIGH,
+  COMMAND_PRIORITY_LOW,
+  KEY_ESCAPE_COMMAND,
+  LexicalEditor,
+  SELECTION_CHANGE_COMMAND,
+} from 'lexical';
+import {Dispatch, useCallback, useEffect, useRef, useState} from 'react';
+import * as React from 'react';
+import {createPortal} from 'react-dom';
+
+import {getSelectedNode} from '../../utils/getSelectedNode';
+import {setFloatingElemPositionForLinkEditor} from '../../utils/setFloatingElemPositionForLinkEditor';
+import {sanitizeUrl} from '../../utils/url';
+
+function FloatingLinkEditor({
+  editor,
+  isLink,
+  setIsLink,
+  anchorElem,
+  isLinkEditMode,
+  setIsLinkEditMode,
+}: {
+  editor: LexicalEditor;
+  isLink: boolean;
+  setIsLink: Dispatch<boolean>;
+  anchorElem: HTMLElement;
+  isLinkEditMode: boolean;
+  setIsLinkEditMode: Dispatch<boolean>;
+}): JSX.Element {
+  const editorRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [linkUrl, setLinkUrl] = useState('');
+  const [editedLinkUrl, setEditedLinkUrl] = useState('https://');
+  const [lastSelection, setLastSelection] = useState<BaseSelection | null>(
+    null,
+  );
+
+  const $updateLinkEditor = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const linkParent = $findMatchingParent(node, $isLinkNode);
+
+      if (linkParent) {
+        setLinkUrl(linkParent.getURL());
+      } else if ($isLinkNode(node)) {
+        setLinkUrl(node.getURL());
+      } else {
+        setLinkUrl('');
+      }
+      if (isLinkEditMode) {
+        setEditedLinkUrl(linkUrl);
+      }
+    }
+    const editorElem = editorRef.current;
+    const nativeSelection = window.getSelection();
+    const activeElement = document.activeElement;
+
+    if (editorElem === null) {
+      return;
+    }
+
+    const rootElement = editor.getRootElement();
+
+    if (
+      selection !== null &&
+      nativeSelection !== null &&
+      rootElement !== null &&
+      rootElement.contains(nativeSelection.anchorNode) &&
+      editor.isEditable()
+    ) {
+      const domRect: DOMRect | undefined =
+        nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
+      if (domRect) {
+        domRect.y += 40;
+        setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem);
+      }
+      setLastSelection(selection);
+    } else if (!activeElement || activeElement.className !== 'link-input') {
+      if (rootElement !== null) {
+        setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
+      }
+      setLastSelection(null);
+      setIsLinkEditMode(false);
+      setLinkUrl('');
+    }
+
+    return true;
+  }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
+
+  useEffect(() => {
+    const scrollerElem = anchorElem.parentElement;
+
+    const update = () => {
+      editor.getEditorState().read(() => {
+        $updateLinkEditor();
+      });
+    };
+
+    window.addEventListener('resize', update);
+
+    if (scrollerElem) {
+      scrollerElem.addEventListener('scroll', update);
+    }
+
+    return () => {
+      window.removeEventListener('resize', update);
+
+      if (scrollerElem) {
+        scrollerElem.removeEventListener('scroll', update);
+      }
+    };
+  }, [anchorElem.parentElement, editor, $updateLinkEditor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({editorState}) => {
+        editorState.read(() => {
+          $updateLinkEditor();
+        });
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          $updateLinkEditor();
+          return true;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        () => {
+          if (isLink) {
+            setIsLink(false);
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+    );
+  }, [editor, $updateLinkEditor, setIsLink, isLink]);
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      $updateLinkEditor();
+    });
+  }, [editor, $updateLinkEditor]);
+
+  useEffect(() => {
+    if (isLinkEditMode && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isLinkEditMode, isLink]);
+
+  const monitorInputInteraction = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleLinkSubmission();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      setIsLinkEditMode(false);
+    }
+  };
+
+  const handleLinkSubmission = () => {
+    if (lastSelection !== null) {
+      if (linkUrl !== '') {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
+        editor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const parent = getSelectedNode(selection).getParent();
+            if ($isAutoLinkNode(parent)) {
+              const linkNode = $createLinkNode(parent.getURL(), {
+                rel: parent.__rel,
+                target: parent.__target,
+                title: parent.__title,
+              });
+              parent.replace(linkNode, true);
+            }
+          }
+        });
+      }
+      setEditedLinkUrl('https://');
+      setIsLinkEditMode(false);
+    }
+  };
+
+  return (
+    <div ref={editorRef} className="link-editor">
+      {!isLink ? null : isLinkEditMode ? (
+        <>
+          <input
+            ref={inputRef}
+            className="link-input"
+            value={editedLinkUrl}
+            onChange={(event) => {
+              setEditedLinkUrl(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              monitorInputInteraction(event);
+            }}
+          />
+          <div>
+            <div
+              className="link-cancel"
+              role="button"
+              tabIndex={0}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                setIsLinkEditMode(false);
+              }}
+            />
+
+            <div
+              className="link-confirm"
+              role="button"
+              tabIndex={0}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={handleLinkSubmission}
+            />
+          </div>
+        </>
+      ) : (
+        <div className="link-view">
+          <a
+            href={sanitizeUrl(linkUrl)}
+            target="_blank"
+            rel="noopener noreferrer">
+            {linkUrl}
+          </a>
+          <div
+            className="link-edit"
+            role="button"
+            tabIndex={0}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => {
+              setEditedLinkUrl(linkUrl);
+              setIsLinkEditMode(true);
+            }}
+          />
+          <div
+            className="link-trash"
+            role="button"
+            tabIndex={0}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => {
+              editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function useFloatingLinkEditorToolbar(
+  editor: LexicalEditor,
+  anchorElem: HTMLElement,
+  isLinkEditMode: boolean,
+  setIsLinkEditMode: Dispatch<boolean>,
+): JSX.Element | null {
+  const [activeEditor, setActiveEditor] = useState(editor);
+  const [isLink, setIsLink] = useState(false);
+
+  useEffect(() => {
+    function $updateToolbar() {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        const focusNode = getSelectedNode(selection);
+        const focusLinkNode = $findMatchingParent(focusNode, $isLinkNode);
+        const focusAutoLinkNode = $findMatchingParent(
+          focusNode,
+          $isAutoLinkNode,
+        );
+        if (!(focusLinkNode || focusAutoLinkNode)) {
+          setIsLink(false);
+          return;
+        }
+        const badNode = selection
+          .getNodes()
+          .filter((node) => !$isLineBreakNode(node))
+          .find((node) => {
+            const linkNode = $findMatchingParent(node, $isLinkNode);
+            const autoLinkNode = $findMatchingParent(node, $isAutoLinkNode);
+            return (
+              (focusLinkNode && !focusLinkNode.is(linkNode)) ||
+              (linkNode && !linkNode.is(focusLinkNode)) ||
+              (focusAutoLinkNode && !focusAutoLinkNode.is(autoLinkNode)) ||
+              (autoLinkNode &&
+                (!autoLinkNode.is(focusAutoLinkNode) ||
+                  autoLinkNode.getIsUnlinked()))
+            );
+          });
+        if (!badNode) {
+          setIsLink(true);
+        } else {
+          setIsLink(false);
+        }
+      }
+    }
+    return mergeRegister(
+      editor.registerUpdateListener(({editorState}) => {
+        editorState.read(() => {
+          $updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, newEditor) => {
+          $updateToolbar();
+          setActiveEditor(newEditor);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL,
+      ),
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (payload) => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const node = getSelectedNode(selection);
+            const linkNode = $findMatchingParent(node, $isLinkNode);
+            if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
+              window.open(linkNode.getURL(), '_blank');
+              return true;
+            }
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+    );
+  }, [editor]);
+
+  return createPortal(
+    <FloatingLinkEditor
+      editor={activeEditor}
+      isLink={isLink}
+      anchorElem={anchorElem}
+      setIsLink={setIsLink}
+      isLinkEditMode={isLinkEditMode}
+      setIsLinkEditMode={setIsLinkEditMode}
+    />,
+    anchorElem,
+  );
+}
+
+export default function FloatingLinkEditorPlugin({
+  anchorElem = document.body,
+  isLinkEditMode,
+  setIsLinkEditMode,
+}: {
+  anchorElem?: HTMLElement;
+  isLinkEditMode: boolean;
+  setIsLinkEditMode: Dispatch<boolean>;
+}): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  return useFloatingLinkEditorToolbar(
+    editor,
+    anchorElem,
+    isLinkEditMode,
+    setIsLinkEditMode,
+  );
+}

package/src/client/components/inputv3/Rte/plugins/FloatingTextFormatToolbarPlugin/index.css

@@ -0,0 +1,141 @@
+/**
+ * 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.
+ *
+ */
+
+.floating-text-format-popup {
+  display: flex;
+  background: #fff;
+  padding: 4px;
+  vertical-align: middle;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  opacity: 0;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  transition: opacity 0.5s;
+  height: 35px;
+  will-change: transform;
+}
+
+.floating-text-format-popup button.popup-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.floating-text-format-popup button.popup-item:disabled {
+  cursor: not-allowed;
+}
+
+.floating-text-format-popup button.popup-item.spaced {
+  margin-right: 2px;
+}
+
+.floating-text-format-popup button.popup-item i.format {
+  background-size: contain;
+  height: 18px;
+  width: 18px;
+  margin-top: 2px;
+  vertical-align: -0.25em;
+  display: flex;
+  opacity: 0.6;
+}
+
+.floating-text-format-popup button.popup-item:disabled i.format {
+  opacity: 0.2;
+}
+
+.floating-text-format-popup button.popup-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.floating-text-format-popup button.popup-item.active i {
+  opacity: 1;
+}
+
+.floating-text-format-popup .popup-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.floating-text-format-popup select.popup-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 70px;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+}
+
+.floating-text-format-popup select.code-language {
+  text-transform: capitalize;
+  width: 130px;
+}
+
+.floating-text-format-popup .popup-item .text {
+  display: flex;
+  line-height: 20px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  width: 70px;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+}
+
+.floating-text-format-popup .popup-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.floating-text-format-popup i.chevron-down {
+  margin-top: 3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.floating-text-format-popup i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.floating-text-format-popup .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+@media (max-width: 1024px) {
+  .floating-text-format-popup button.insert-comment {
+    display: none;
+  }
+}