rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: new line placeholder classname [skip e2e]

Browse Source
This commit is contained in:
Aman Harwara
2023-10-31 15:50:15 +05:30
parent 572c9b7dfa
commit e42e2d6130
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
View File

@@ -28,7 +28,7 @@ import TableActionMenuPlugin from './Plugins/TableCellActionMenuPlugin'
import ToolbarPlugin from './Plugins/ToolbarPlugin/ToolbarPlugin' import ToolbarPlugin from './Plugins/ToolbarPlugin/ToolbarPlugin'
import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery' import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
import { CheckListPlugin } from './Plugins/List/CheckListPlugin' import { CheckListPlugin } from './Plugins/List/CheckListPlugin'
import { LinePlaceholderPlugin } from './Plugins/LinePlaceholderPlugin' import { EmptyLinePlaceholderPlugin } from './Plugins/EmptyLinePlaceholderPlugin'
type BlocksEditorProps = { type BlocksEditorProps = {
onChange?: (value: string, preview: string) => void onChange?: (value: string, preview: string) => void
@@ -114,7 +114,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
<CollapsiblePlugin /> <CollapsiblePlugin />
<TabIndentationPlugin /> <TabIndentationPlugin />
<RemoveBrokenTablesPlugin /> <RemoveBrokenTablesPlugin />
<LinePlaceholderPlugin /> <EmptyLinePlaceholderPlugin />
{!readonly && floatingAnchorElem && ( {!readonly && floatingAnchorElem && (
<> <>
<DraggableBlockPlugin anchorElem={floatingAnchorElem} /> <DraggableBlockPlugin anchorElem={floatingAnchorElem} />

9
packages/web/src/javascripts/Components/SuperEditor/Plugins/LinePlaceholderPlugin.tsx → packages/web/src/javascripts/Components/SuperEditor/Plugins/EmptyLinePlaceholderPlugin.tsx
View File

@@ -11,7 +11,7 @@ import { useCallback, useEffect, useRef } from 'react'
import { getSelectedNode } from '../Lexical/Utils/getSelectedNode' import { getSelectedNode } from '../Lexical/Utils/getSelectedNode'
import { mergeRegister } from '@lexical/utils' import { mergeRegister } from '@lexical/utils'
export const LinePlaceholderPlugin = () => { export const EmptyLinePlaceholderPlugin = () => {
const [editor] = useLexicalComposerContext() const [editor] = useLexicalComposerContext()
const placeholderElementRef = useRef<HTMLDivElement>(null) const placeholderElementRef = useRef<HTMLDivElement>(null)
@@ -82,8 +82,11 @@ export const LinePlaceholderPlugin = () => {
}, [cursorUpdate, editor]) }, [cursorUpdate, editor])
return ( return (
<div className="pointer-events-none fixed text-passive-1 opacity-0" ref={placeholderElementRef}> <div
Type <span className="rounded border border-border bg-passive-4-opacity-variant px-[3px] py-0.5">/</span> for className="super-empty-line-placeholder pointer-events-none fixed text-passive-1 opacity-0"
ref={placeholderElementRef}
>
Type <span className="rounded border border-border bg-passive-4-opacity-variant px-1 py-0.5">/</span> for
commands... commands...
</div> </div>
) )