[lexical-playground][lexical] Feature: Ruby annotation node with floating editor

packages/lexical-playground/src/App.tsx

@@ -100,6 +100,7 @@ import PasteLogPlugin from './plugins/PasteLogPlugin';
 import {PollExtension} from './plugins/PollExtension';
 import {PullQuoteExtension} from './plugins/PullQuoteExtension';
 import {ReactReviewExtension} from './plugins/ReviewExtension';
+import {RubyExtension} from './plugins/RubyExtension';
 import {SpecialTextExtension} from './plugins/SpecialTextExtension';
 import {TabFocusExtension} from './plugins/TabFocusExtension';
 import {TerseExportExtension} from './plugins/TerseExportExtension';
@@ -243,6 +244,7 @@ const PlaygroundRichTextExtension = /* @__PURE__ */ defineExtension({
     ReactReviewExtension,
     ReactFindReplaceExtension,
     PullQuoteExtension,
+    RubyExtension,
     /* @__PURE__ */ configExtension(TabIndentationExtension, {maxIndent: 7}),
   ],
   name: '@lexical/playground/RichText',

packages/lexical-playground/src/Editor.tsx

@@ -28,6 +28,7 @@ import {ExcalidrawPlugin} from './plugins/ExcalidrawExtension';
 import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbarPlugin';
 import {MentionsPlugin} from './plugins/MentionsExtension';
+import FloatingRubyEditorPlugin from './plugins/RubyExtension/FloatingRubyEditor';
 import ShortcutsPlugin from './plugins/ShortcutsPlugin';
 import SpeechToTextPlugin from './plugins/SpeechToTextPlugin';
 import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
@@ -71,6 +72,7 @@ export default function Editor(): JSX.Element {
   const [editor] = useLexicalComposerContext();
   const [activeEditor, setActiveEditor] = useState(editor);
   const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);
+  const [isRubyEditMode, setIsRubyEditMode] = useState<boolean>(false);
 
   const onRef = (_floatingAnchorElem: HTMLDivElement) => {
     if (_floatingAnchorElem !== null) {
@@ -99,6 +101,7 @@ export default function Editor(): JSX.Element {
           activeEditor={activeEditor}
           setActiveEditor={setActiveEditor}
           setIsLinkEditMode={setIsLinkEditMode}
+          setIsRubyEditMode={setIsRubyEditMode}
         />
       )}
       {isRichText && (
@@ -139,6 +142,11 @@ export default function Editor(): JSX.Element {
                   isLinkEditMode={isLinkEditMode}
                   setIsLinkEditMode={setIsLinkEditMode}
                 />
+                <FloatingRubyEditorPlugin
+                  anchorElem={floatingAnchorElem}
+                  isRubyEditMode={isRubyEditMode}
+                  setIsRubyEditMode={setIsRubyEditMode}
+                />
                 <TableCellActionMenuPlugin
                   anchorElem={floatingAnchorElem}
                   cellMerge={true}
@@ -153,6 +161,7 @@ export default function Editor(): JSX.Element {
                 <FloatingTextFormatToolbarPlugin
                   anchorElem={floatingAnchorElem}
                   setIsLinkEditMode={setIsLinkEditMode}
+                  isRubyEditMode={isRubyEditMode}
                 />
               </>
             )}