diff --git a/apps/client/src/widgets/type_widgets/text/lexical/index.css b/apps/client/src/widgets/type_widgets/text/lexical/index.css new file mode 100644 index 0000000000..c0944c704a --- /dev/null +++ b/apps/client/src/widgets/type_widgets/text/lexical/index.css @@ -0,0 +1,16 @@ +.note-detail-editable-text .lexical-wrapper { + color: var(--main-text-color); + font-family: var(--main-font-family); + font-size: var(--main-font-size); + line-height: 1.5; + word-break: break-word; + position: relative; + + .lexical-placeholder { + opacity: 0.5; + position: absolute; + top: 0; + left: 0; + pointer-events: none; + } +} diff --git a/apps/client/src/widgets/type_widgets/text/lexical/index.tsx b/apps/client/src/widgets/type_widgets/text/lexical/index.tsx index d9a7b8a009..36eb79dc44 100644 --- a/apps/client/src/widgets/type_widgets/text/lexical/index.tsx +++ b/apps/client/src/widgets/type_widgets/text/lexical/index.tsx @@ -1,3 +1,5 @@ +import "./index.css"; + import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin'; import {LexicalComposer} from '@lexical/react/LexicalComposer'; import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext'; @@ -30,17 +32,21 @@ export default function LexicalText(props: TypeWidgetProps) { onError, }; + const placeholder = ( +