@eventuras/scribo 0.8.3 → 0.10.7

package/src/plugins/FloatingLinkEditorPlugin.tsx

@@ -7,43 +7,38 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type {JSX} from 'react';
+import type { JSX } from 'react';
 
 import './FloatingLinkEditorPlugin.css';
 
-import {
-  $createLinkNode,
-  $isAutoLinkNode,
-  $isLinkNode,
-  TOGGLE_LINK_COMMAND,
-} from '@lexical/link';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$findMatchingParent, mergeRegister} from '@lexical/utils';
+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,
   $isNodeSelection,
   $isRangeSelection,
-  BaseSelection,
+  type BaseSelection,
   CLICK_COMMAND,
   COMMAND_PRIORITY_CRITICAL,
   COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_LOW,
   getDOMSelection,
   KEY_ESCAPE_COMMAND,
-  LexicalEditor,
+  type 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 type * as React from 'react';
+import { type Dispatch, useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 
-import {getSelectedNode} from '../utils/getSelectedNode';
-import {setFloatingElemPositionForLinkEditor} from '../utils/setFloatingElemPositionForLinkEditor';
-import {sanitizeUrl} from '../utils/url';
+import { getSelectedNode } from '../utils/getSelectedNode';
+import { setFloatingElemPositionForLinkEditor } from '../utils/setFloatingElemPositionForLinkEditor';
+import { sanitizeUrl } from '../utils/url';
 
 function preventDefault(
-  event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>,
+  event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>
 ): void {
   event.preventDefault();
 }
@@ -55,21 +50,19 @@ function FloatingLinkEditor({
   anchorElem,
   isLinkEditMode,
   setIsLinkEditMode,
-}: {
+}: Readonly<{
   editor: LexicalEditor;
   isLink: boolean;
   setIsLink: Dispatch<boolean>;
   anchorElem: HTMLElement;
   isLinkEditMode: boolean;
   setIsLinkEditMode: Dispatch<boolean>;
-}): JSX.Element {
+}>): 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 [lastSelection, setLastSelection] = useState<BaseSelection | null>(null);
 
   const $updateLinkEditor = useCallback(() => {
     const selection = $getSelection();
@@ -126,12 +119,8 @@ function FloatingLinkEditor({
             domRect = element.getBoundingClientRect();
           }
         }
-      } else if (
-        nativeSelection !== null &&
-        rootElement.contains(nativeSelection.anchorNode)
-      ) {
-        domRect =
-          nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
+      } else if (nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
+        domRect = nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
       }
 
       if (domRect) {
@@ -139,7 +128,7 @@ function FloatingLinkEditor({
         setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem);
       }
       setLastSelection(selection);
-    } else if (!activeElement || activeElement.className !== 'link-input') {
+    } else if (activeElement?.className !== 'link-input') {
       if (rootElement !== null) {
         setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
       }
@@ -177,7 +166,7 @@ function FloatingLinkEditor({
 
   useEffect(() => {
     return mergeRegister(
-      editor.registerUpdateListener(({editorState}) => {
+      editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
           $updateLinkEditor();
         });
@@ -189,7 +178,7 @@ function FloatingLinkEditor({
           $updateLinkEditor();
           return true;
         },
-        COMMAND_PRIORITY_LOW,
+        COMMAND_PRIORITY_LOW
       ),
       editor.registerCommand(
         KEY_ESCAPE_COMMAND,
@@ -200,8 +189,8 @@ function FloatingLinkEditor({
           }
           return false;
         },
-        COMMAND_PRIORITY_HIGH,
-      ),
+        COMMAND_PRIORITY_HIGH
+      )
     );
   }, [editor, $updateLinkEditor, setIsLink, isLink]);
 
@@ -234,9 +223,7 @@ function FloatingLinkEditor({
     };
   }, [editorRef, setIsLink, setIsLinkEditMode, isLink]);
 
-  const monitorInputInteraction = (
-    event: React.KeyboardEvent<HTMLInputElement>,
-  ) => {
+  const monitorInputInteraction = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
       handleLinkSubmission(event);
     } else if (event.key === 'Escape') {
@@ -246,18 +233,13 @@ function FloatingLinkEditor({
   };
 
   const handleLinkSubmission = (
-    event:
-      | React.KeyboardEvent<HTMLInputElement>
-      | React.MouseEvent<HTMLElement>,
+    event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>
   ) => {
     event.preventDefault();
     if (lastSelection !== null) {
       if (linkUrl !== '') {
         editor.update(() => {
-          editor.dispatchCommand(
-            TOGGLE_LINK_COMMAND,
-            sanitizeUrl(editedLinkUrl),
-          );
+          editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
           const selection = $getSelection();
           if ($isRangeSelection(selection)) {
             const parent = getSelectedNode(selection).getParent();
@@ -279,7 +261,7 @@ function FloatingLinkEditor({
 
   return (
     <div ref={editorRef} className="link-editor">
-      {!isLink ? null : isLinkEditMode ? (
+      {isLink && isLinkEditMode && (
         <>
           <input
             ref={inputRef}
@@ -312,12 +294,10 @@ function FloatingLinkEditor({
             />
           </div>
         </>
-      ) : (
+      )}
+      {isLink && !isLinkEditMode && (
         <div className="link-view">
-          <a
-            href={sanitizeUrl(linkUrl)}
-            target="_blank"
-            rel="noopener noreferrer">
+          <a href={sanitizeUrl(linkUrl)} target="_blank" rel="noopener noreferrer">
             {linkUrl}
           </a>
           <div
@@ -350,7 +330,7 @@ function useFloatingLinkEditorToolbar(
   editor: LexicalEditor,
   anchorElem: HTMLElement,
   isLinkEditMode: boolean,
-  setIsLinkEditMode: Dispatch<boolean>,
+  setIsLinkEditMode: Dispatch<boolean>
 ): JSX.Element | null {
   const [activeEditor, setActiveEditor] = useState(editor);
   const [isLink, setIsLink] = useState(false);
@@ -361,10 +341,7 @@ function useFloatingLinkEditorToolbar(
       if ($isRangeSelection(selection)) {
         const focusNode = getSelectedNode(selection);
         const focusLinkNode = $findMatchingParent(focusNode, $isLinkNode);
-        const focusAutoLinkNode = $findMatchingParent(
-          focusNode,
-          $isAutoLinkNode,
-        );
+        const focusAutoLinkNode = $findMatchingParent(focusNode, $isAutoLinkNode);
         if (!(focusLinkNode || focusAutoLinkNode)) {
           setIsLink(false);
           return;
@@ -380,8 +357,7 @@ function useFloatingLinkEditorToolbar(
               (linkNode && !linkNode.is(focusLinkNode)) ||
               (focusAutoLinkNode && !focusAutoLinkNode.is(autoLinkNode)) ||
               (autoLinkNode &&
-                (!autoLinkNode.is(focusAutoLinkNode) ||
-                  autoLinkNode.getIsUnlinked()))
+                (!autoLinkNode.is(focusAutoLinkNode) || autoLinkNode.getIsUnlinked()))
             );
           });
         if (!badNode) {
@@ -405,7 +381,7 @@ function useFloatingLinkEditorToolbar(
       }
     }
     return mergeRegister(
-      editor.registerUpdateListener(({editorState}) => {
+      editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
           $updateToolbar();
         });
@@ -417,7 +393,7 @@ function useFloatingLinkEditorToolbar(
           setActiveEditor(newEditor);
           return false;
         },
-        COMMAND_PRIORITY_CRITICAL,
+        COMMAND_PRIORITY_CRITICAL
       ),
       editor.registerCommand(
         CLICK_COMMAND,
@@ -433,8 +409,8 @@ function useFloatingLinkEditorToolbar(
           }
           return false;
         },
-        COMMAND_PRIORITY_LOW,
-      ),
+        COMMAND_PRIORITY_LOW
+      )
     );
   }, [editor]);
 
@@ -447,7 +423,7 @@ function useFloatingLinkEditorToolbar(
       isLinkEditMode={isLinkEditMode}
       setIsLinkEditMode={setIsLinkEditMode}
     />,
-    anchorElem,
+    anchorElem
   );
 }
 
@@ -461,20 +437,20 @@ export default function FloatingLinkEditorPlugin({
   setIsLinkEditMode: Dispatch<boolean>;
 }): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
-  
+
   // Use document.body as default, but only in browser environment
   const defaultAnchorElem = typeof document !== 'undefined' ? document.body : null;
   const effectiveAnchorElem = anchorElem ?? defaultAnchorElem;
-  
+
   // Don't render if we don't have a valid anchor element
   if (!effectiveAnchorElem) {
     return null;
   }
-  
+
   return useFloatingLinkEditorToolbar(
     editor,
     effectiveAnchorElem,
     isLinkEditMode,
-    setIsLinkEditMode,
+    setIsLinkEditMode
   );
 }

package/src/plugins/HistoryPlugin.tsx

@@ -7,9 +7,8 @@
  *
  */
 
-import type {EditorState, LexicalEditor, LexicalNode, NodeKey} from 'lexical';
-
-import {mergeRegister} from '@lexical/utils';
+import { mergeRegister } from '@lexical/utils';
+import type { EditorState, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
 import {
   $isRangeSelection,
   $isRootNode,
@@ -50,7 +49,7 @@ type IntentionallyMarkedAsDirtyElement = boolean;
 function getDirtyNodes(
   editorState: EditorState,
   dirtyLeaves: Set<NodeKey>,
-  dirtyElements: Map<NodeKey, IntentionallyMarkedAsDirtyElement>,
+  dirtyElements: Map<NodeKey, IntentionallyMarkedAsDirtyElement>
 ): Array<LexicalNode> {
   const nodeMap = editorState._nodeMap;
   const nodes = [];
@@ -83,7 +82,7 @@ function getChangeType(
   nextEditorState: EditorState,
   dirtyLeavesSet: Set<NodeKey>,
   dirtyElementsSet: Map<NodeKey, IntentionallyMarkedAsDirtyElement>,
-  isComposing: boolean,
+  isComposing: boolean
 ): ChangeType {
   if (
     prevEditorState === null ||
@@ -108,11 +107,7 @@ function getChangeType(
     return OTHER;
   }
 
-  const dirtyNodes = getDirtyNodes(
-    nextEditorState,
-    dirtyLeavesSet,
-    dirtyElementsSet,
-  );
+  const dirtyNodes = getDirtyNodes(nextEditorState, dirtyLeavesSet, dirtyElementsSet);
 
   if (dirtyNodes.length === 0) {
     return OTHER;
@@ -191,7 +186,7 @@ function getChangeType(
 function isTextNodeUnchanged(
   key: NodeKey,
   prevEditorState: EditorState,
-  nextEditorState: EditorState,
+  nextEditorState: EditorState
 ): boolean {
   const prevNode = prevEditorState._nodeMap.get(key);
   const nextNode = nextEditorState._nodeMap.get(key);
@@ -224,14 +219,14 @@ function isTextNodeUnchanged(
 
 function createMergeActionGetter(
   editor: LexicalEditor,
-  delay: number,
+  delay: number
 ): (
   prevEditorState: null | EditorState,
   nextEditorState: EditorState,
   currentHistoryEntry: null | HistoryStateEntry,
   dirtyLeaves: Set<NodeKey>,
   dirtyElements: Map<NodeKey, IntentionallyMarkedAsDirtyElement>,
-  tags: Set<string>,
+  tags: Set<string>
 ) => MergeAction {
   let prevChangeTime = Date.now();
   let prevChangeType = OTHER;
@@ -242,7 +237,7 @@ function createMergeActionGetter(
     currentHistoryEntry,
     dirtyLeaves,
     dirtyElements,
-    tags,
+    tags
   ) => {
     const changeTime = Date.now();
 
@@ -259,15 +254,13 @@ function createMergeActionGetter(
       nextEditorState,
       dirtyLeaves,
       dirtyElements,
-      editor.isComposing(),
+      editor.isComposing()
     );
 
     const mergeAction = (() => {
-      const isSameEditor =
-        currentHistoryEntry === null || currentHistoryEntry.editor === editor;
+      const isSameEditor = currentHistoryEntry === null || currentHistoryEntry.editor === editor;
       const shouldPushHistory = tags.has('history-push');
-      const shouldMergeHistory =
-        !shouldPushHistory && isSameEditor && tags.has('history-merge');
+      const shouldMergeHistory = !shouldPushHistory && isSameEditor && tags.has('history-merge');
 
       if (shouldMergeHistory) {
         return HISTORY_MERGE;
@@ -302,10 +295,7 @@ function createMergeActionGetter(
       // due to some node transform reverting the change.
       if (dirtyLeaves.size === 1) {
         const dirtyLeafKey = Array.from(dirtyLeaves)[0];
-        if (
-          dirtyLeafKey &&
-          isTextNodeUnchanged(dirtyLeafKey, prevEditorState, nextEditorState)
-        ) {
+        if (dirtyLeafKey && isTextNodeUnchanged(dirtyLeafKey, prevEditorState, nextEditorState)) {
           return HISTORY_MERGE;
         }
       }
@@ -394,7 +384,7 @@ function clearHistory(historyState: HistoryState) {
 export function registerHistory(
   editor: LexicalEditor,
   historyState: HistoryState,
-  delay: number,
+  delay: number
 ): () => void {
   const getMergeAction = createMergeActionGetter(editor, delay);
 
@@ -426,7 +416,7 @@ export function registerHistory(
       current,
       dirtyLeaves,
       dirtyElements,
-      tags,
+      tags
     );
 
     if (mergeAction === HISTORY_PUSH) {
@@ -459,7 +449,7 @@ export function registerHistory(
         undo(editor, historyState);
         return true;
       },
-      COMMAND_PRIORITY_EDITOR,
+      COMMAND_PRIORITY_EDITOR
     ),
     editor.registerCommand(
       REDO_COMMAND,
@@ -467,7 +457,7 @@ export function registerHistory(
         redo(editor, historyState);
         return true;
       },
-      COMMAND_PRIORITY_EDITOR,
+      COMMAND_PRIORITY_EDITOR
     ),
     editor.registerCommand(
       CLEAR_EDITOR_COMMAND,
@@ -475,7 +465,7 @@ export function registerHistory(
         clearHistory(historyState);
         return false;
       },
-      COMMAND_PRIORITY_EDITOR,
+      COMMAND_PRIORITY_EDITOR
     ),
     editor.registerCommand(
       CLEAR_HISTORY_COMMAND,
@@ -485,9 +475,9 @@ export function registerHistory(
         editor.dispatchCommand(CAN_UNDO_COMMAND, false);
         return true;
       },
-      COMMAND_PRIORITY_EDITOR,
+      COMMAND_PRIORITY_EDITOR
     ),
-    editor.registerUpdateListener(applyChange),
+    editor.registerUpdateListener(applyChange)
   );
 
   const unregisterUpdateListener = editor.registerUpdateListener(applyChange);

package/src/plugins/LinkPlugin.tsx

@@ -7,10 +7,9 @@
  */
 
 import { LinkPlugin as LexicalLinkPlugin } from '@lexical/react/LexicalLinkPlugin';
-import type {JSX} from 'react';
-import * as React from 'react';
+import type { JSX } from 'react';
 
-import {validateUrl} from '../utils/url';
+import { validateUrl } from '../utils/url';
 
 export default function LinkPlugin(): JSX.Element {
   return <LexicalLinkPlugin validateUrl={validateUrl} />;