CODEWITHSUNDEEP
javascriptreactjsreact-hookslexicaljs
Teriyaki229
Teriyaki229

Reputation: 21

Unable to Apply Styling to Lexical Editor Component in React

I'm working on a React project and using a Lexical Editor component from Facebook. I'm trying to customize its appearance by creating a separate CSS file. However, my styling changes don't seem to have any effect.

Editor.jsx:

import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import lexicalEditorTheme from "./EditorTheme";
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
import styles from './EditorTheme.module.css'

function Editor() {
  const initialConfig = {
    namespace: "MyEditor",
    theme: lexicalEditorTheme,
    onError,
  };

  return (
    <LexicalComposer initialConfig={initialConfig}>
      <div className={styles.editorContainer}>
        <div>
          <PlainTextPlugin
            contentEditable={<ContentEditable />}
            placeholder={<div>Type something here...</div>}
            ErrorBoundary={LexicalErrorBoundary}
          />
        </div>
        <HistoryPlugin />
        <MyCustomAutoFocusPlugin />
      </div>
    </LexicalComposer>
  );
}

export default Editor;

EditorTheme.jsx:

const lexicalEditorTheme = {
    ltr: "ltr",
    rtl: "rtl",
    placeholder: "editor-placeholder",
    paragraph: "editor-paragraph",
    quote: "editor-quote",
    heading: {
      h1: "editor-heading-h1",
      h2: "editor-heading-h2",
      h3: "editor-heading-h3",
      h4: "editor-heading-h4",
      h5: "editor-heading-h5",
    },
    list: {
      nested: {
        listitem: "editor-nested-listitem",
      },
      ol: "editor-list-ol",
      ul: "editor-list-ul",
      listitem: "editor-listitem",
    },
    image: "editor-image",
    link: "editor-link",
    text: {
      bold: "editor-text-bold",
      italic: "editor-text-italic",
      overflowed: "editor-text-overflowed",
      hashtag: "editor-text-hashtag",
      underline: "editor-text-underline",
      strikethrough: "editor-text-strikethrough",
      underlineStrikethrough: "editor-text-underlineStrikethrough",
      code: "editor-text-code",
    },
    code: "editor-code",
    codeHighlight: {
      atrule: "editor-tokenAttr",
      attr: "editor-tokenAttr",
      boolean: "editor-tokenProperty",
      builtin: "editor-tokenSelector",
      cdata: "editor-tokenComment",
      char: "editor-tokenSelector",
      class: "editor-tokenFunction",
      "class-name": "editor-tokenFunction",
      comment: "editor-tokenComment",
      constant: "editor-tokenProperty",
      deleted: "editor-tokenProperty",
      doctype: "editor-tokenComment",
      entity: "editor-tokenOperator",
      function: "editor-tokenFunction",
      important: "editor-tokenVariable",
      inserted: "editor-tokenSelector",
      keyword: "editor-tokenAttr",
      namespace: "editor-tokenVariable",
      number: "editor-tokenProperty",
      operator: "editor-tokenOperator",
      prolog: "editor-tokenComment",
      property: "editor-tokenProperty",
      punctuation: "editor-tokenPunctuation",
      regex: "editor-tokenVariable",
      selector: "editor-tokenSelector",
      string: "editor-tokenSelector",
      symbol: "editor-tokenProperty",
      tag: "editor-tokenProperty",
      url: "editor-tokenOperator",
      variable: "editor-tokenVariable",
    },
  };
  export default lexicalEditorTheme;

CSS rules:

.ltr {
  text-align: left;
}

.rtl {
  text-align: right;
}

.editor-placeholder {
  color: dimgray;
  overflow: hidden;
  position: absolute;
  top: 15px;
  left: 15px;
  user-select: none;
  pointer-events: none;
}

.editor-paragraph {
  margin: 0 0 15px 0;
  position: relative;
}

Expected Outcome:

I want to style the Lexical Composer component with custom CSS. The custom CSS classes are not having the intended effect on the component.

Attempts to Solve:

I've configured the theme in the EditorTheme.jsx file. I've created CSS classes for styling in a separate CSS file (not using CSS Modules that is for the parent div container i tried but it worked fine that way). I've tried putting the CSS rules in the index.css file since that file was getting read but to no avail. I've ensured that the component is using the configured theme. I've followed the example at codesandbox

Upvotes: 2

Views: 1708

Answers (1)

Aayush Rawat
Aayush Rawat

Reputation: 109

For me importing my styles.css (Styles for the particular component) inside the Theme.ts worked.

One thing I noticed, If you are importing your component directly inside your main.tsx, and using the root styles.css , then the styles are getting applied, but if you have a child component that is deeply nested, then it is not working.

Here is my snippet. Hope it helps.

import "./styles.css";

export default {
code: "editor-code",
heading: { h1: "content-heading-h1", h2: "content-heading-h2", h3: "content-heading-h3", h4: "content-heading-h4",
}, };

Upvotes: 1

Related Questions