chore: add floating link editor

Author: stevenle

packages/root-cms/ui/components/RichTextEditor/LexicalEditor.tsx

@@ -6,6 +6,7 @@ import {InitialConfigType, LexicalComposer} from '@lexical/react/LexicalComposer
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
+import {LinkPlugin} from '@lexical/react/LexicalLinkPlugin';
 import {ListPlugin} from '@lexical/react/LexicalListPlugin';
 import {HeadingNode} from '@lexical/rich-text';
 import {joinClassNames} from '../../utils/classes.js';
@@ -22,6 +23,7 @@ import {LexicalTheme} from './LexicalTheme.js';
 import {FloatingToolbarPlugin} from './plugins/FloatingToolbarPlugin.js';
 import {OnChangePlugin} from './plugins/OnChangePlugin.js';
 import {RichTextData} from '../../../shared/richtext.js';
+import {FloatingLinkEditorPlugin} from './plugins/FloatingLinkEditorPlugin.js';
 
 const INITIAL_CONFIG: InitialConfigType = {
   namespace: 'RootCMS',
@@ -91,6 +93,7 @@ function Editor(props: EditorProps) {
 
   return (
     <>
+      <OnChangePlugin value={props.value} onChange={props.onChange} />
       <ToolbarPlugin
         editor={editor}
         activeEditor={activeEditor}
@@ -115,14 +118,23 @@ function Editor(props: EditorProps) {
         }
         ErrorBoundary={LexicalErrorBoundary}
       />
+      <LinkPlugin />
       <ListPlugin />
       <TabIndentationPlugin maxIndent={7} />
       <MarkdownTransformPlugin />
-      <FloatingToolbarPlugin
-        anchorElem={floatingAnchorElem!}
-        setIsLinkEditMode={setIsLinkEditMode}
-      />
-      <OnChangePlugin value={props.value} onChange={props.onChange} />
+      {floatingAnchorElem && (
+        <>
+          <FloatingToolbarPlugin
+            anchorElem={floatingAnchorElem}
+            setIsLinkEditMode={setIsLinkEditMode}
+          />
+          <FloatingLinkEditorPlugin
+            anchorElem={floatingAnchorElem}
+            isLinkEditMode={isLinkEditMode}
+            setIsLinkEditMode={setIsLinkEditMode}
+          />
+        </>
+      )}
     </>
   );
 }

packages/root-cms/ui/components/RichTextEditor/LexicalTheme.css

@@ -149,6 +149,7 @@
 }
 .LexicalTheme__link:hover {
   text-decoration: underline;
+  text-underline-offset: 2px;
   cursor: pointer;
 }
 .LexicalTheme__blockCursor {

packages/root-cms/ui/components/RichTextEditor/plugins/FloatingLinkEditorPlugin.css

@@ -0,0 +1,85 @@
+.LexicalEditor__linkEditor {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  max-width: 400px;
+  width: 100%;
+  opacity: 0;
+  background-color: #fff;
+  padding: 8px;
+  border: 1px solid rgb(233, 236, 239);
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px, rgba(0, 0, 0, 0.05) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
+  border-radius: 8px;
+  transition: opacity 0.5s;
+  will-change: transform;
+}
+
+.LexicalEditor__link__input,
+.LexicalEditor__link__preview {
+  flex: 1;
+  display: block;
+  border: 1px solid #dedede;
+  position: relative;
+  padding: 4px 8px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  font-family: var(--font-family-default);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.LexicalEditor__link__input:focus {
+  outline: none;
+  border-color: #339af0;
+}
+
+.LexicalEditor__link__preview {
+  overflow: auto;
+  padding-right: 20px;
+}
+
+.LexicalEditor__link__preview a {
+  color: #216fdb;
+  text-underline-offset: 2px;
+}
+
+.LexicalEditor__link__preview svg {
+  position: absolute;
+  right: 8px;
+  top: calc(50% - 8px);
+}
+
+.LexicalEditor__link__controls {
+  display: flex;
+  gap: 4px;
+}
+
+.LexicalEditor__link-editor .button {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.LexicalEditor__link-editor .button.hovered {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: #eee;
+}
+
+.LexicalEditor__link-editor .button i {
+  background-size: contain;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  vertical-align: -0.25em;
+}