wip lexical

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/compose/editor/index.tsx

@@ -2,29 +2,44 @@ import {
   $convertToMarkdownString,
   TRANSFORMERS,
 } from '@lexical/markdown';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { LexicalComposer, InitialConfigType } from '@lexical/react/LexicalComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { useFeatures } from 'soapbox/hooks';
+
 import nodes from './nodes';
 import FloatingLinkEditorPlugin from './plugins/floating-link-editor-plugin';
 import FloatingTextFormatToolbarPlugin from './plugins/floating-text-format-toolbar-plugin';
 
 // import type { EditorState } from 'lexical';
 
-const initialConfig = {
+const initialConfig: InitialConfigType = {
   namespace: 'ComposeForm',
   onError: console.error,
   nodes,
+  theme: {
+    text: {
+      bold: 'font-bold',
+      code: 'font-mono',
+      italic: 'italic',
+      strikethrough: 'line-through',
+      underline: 'underline',
+      underlineStrikethrough: 'underline-line-through',
+    },
+  },
 };
 
-const ComposeEditor = React.forwardRef<string, any>((_, editorStateRef) => {
+const ComposeEditor = React.forwardRef<string, any>(({ condensed, onFocus }, editorStateRef) => {
+  const features = useFeatures();
+
   const [floatingAnchorElem, setFloatingAnchorElem] =
     useState<HTMLDivElement | null>(null);
 
@@ -36,11 +51,16 @@ const ComposeEditor = React.forwardRef<string, any>((_, editorStateRef) => {
 
   return (
     <LexicalComposer initialConfig={initialConfig}>
-      <div className='relative' data-markup>
+      <div className='lexical relative' data-markup>
         <RichTextPlugin
           contentEditable={
-            <div className='editor' ref={onRef}>
-              <ContentEditable className='outline-none py-2 min-h-[100px]' />
+            <div className='editor' ref={onRef} onFocus={onFocus}>
+              <ContentEditable
+                className={classNames('outline-none py-2 transition-[min-height] motion-reduce:transition-none', {
+                  'min-h-[40px]': condensed,
+                  'min-h-[100px]': !condensed,
+                })}
+              />
             </div>
           }
           placeholder={(
@@ -57,13 +77,13 @@ const ComposeEditor = React.forwardRef<string, any>((_, editorStateRef) => {
         }}
         />
         <HistoryPlugin />
-        <LinkPlugin />
-        {floatingAnchorElem ? (
+        {features.richText && <LinkPlugin />}
+        {features.richText && floatingAnchorElem && (
           <>
             <FloatingTextFormatToolbarPlugin anchorElem={floatingAnchorElem} />
             <FloatingLinkEditorPlugin anchorElem={floatingAnchorElem} />
           </>
-        ) : ''}
+        )}
       </div>
     </LexicalComposer>
   );