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

chore: show super note placeholder, only on empty notes

Browse Source
This commit is contained in:
Aman Harwara
2023-12-12 14:10:59 +05:30
parent 7ce5bdff91
commit c6d3daec92
2 changed files with 22 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -78,23 +78,29 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
return (
<>
{!isMobile && <ToolbarPlugin />}
<RichTextPlugin
contentEditable={
<div id="blocks-editor" className="editor-scroller h-full min-h-0">
<div className="editor z-0 overflow-hidden" ref={onRef}>
<ContentEditable
id={SuperEditorContentId}
className={classNames('ContentEditable__root overflow-y-auto', className)}
spellCheck={spellcheck}
onScroll={onScroll}
/>
<div className="search-highlight-container pointer-events-none absolute left-0 top-0 h-full w-full" />
<div className="relative min-h-0 flex-grow">
<RichTextPlugin
contentEditable={
<div id="blocks-editor" className="editor-scroller h-full min-h-0">
<div className="editor z-0 overflow-hidden" ref={onRef}>
<ContentEditable
id={SuperEditorContentId}
className={classNames('ContentEditable__root overflow-y-auto', className)}
spellCheck={spellcheck}
onScroll={onScroll}
/>
<div className="search-highlight-container pointer-events-none absolute left-0 top-0 h-full w-full" />
</div>
</div>
</div>
}
placeholder={null}
ErrorBoundary={LexicalErrorBoundary}
/>
}
placeholder={
<div className="pointer-events-none absolute left-4 top-4 text-passive-1">
Type <span className="rounded bg-passive-4-opacity-variant p-0.5">/</span> for commands...
</div>
}
ErrorBoundary={LexicalErrorBoundary}
/>
</div>
{isMobile && <ToolbarPlugin />}
<ListPlugin />
<MarkdownShortcutPlugin transformers={MarkdownTransformers} />

92
packages/web/src/javascripts/Components/SuperEditor/Plugins/EmptyLinePlaceholderPlugin.tsx
View File

@@ -1,92 +0,0 @@
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import {
$getSelection,
$isRangeSelection,
$isParagraphNode,
$isTextNode,
SELECTION_CHANGE_COMMAND,
COMMAND_PRIORITY_LOW,
} from 'lexical'
import { useCallback, useEffect, useRef } from 'react'
import { getSelectedNode } from '../Lexical/Utils/getSelectedNode'
import { mergeRegister } from '@lexical/utils'
export const EmptyLinePlaceholderPlugin = () => {
const [editor] = useLexicalComposerContext()
const placeholderElementRef = useRef<HTMLDivElement>(null)
const cursorUpdate = useCallback((): boolean => {
const selection = $getSelection()
if (selection && $isRangeSelection(selection)) {
if (!placeholderElementRef.current) {
return false
}
const node = getSelectedNode(selection)
if (!node) {
return false
}
const isParagraph = $isParagraphNode(node) || $isTextNode(node)
const text = node.getTextContent()
if (!isParagraph) {
return false
}
const rootElement = editor.getRootElement()
const nodeElement = editor.getElementByKey(node.getKey())
const placeholder = placeholderElementRef.current
if (!nodeElement || !placeholder.parentElement || !rootElement) {
return false
}
const rect = nodeElement.getBoundingClientRect()
const parentRect = placeholder.parentElement.getBoundingClientRect()
const rootRect = rootElement.getBoundingClientRect()
if (!text && editor.isEditable()) {
placeholder.style.top = `${rect.y}px`
placeholder.style.left = `${rect.x - parentRect.x + rootRect.x}px`
placeholder.style.opacity = '0.65'
} else {
placeholder.style.opacity = '0'
}
}
return false
}, [editor])
useEffect(() => {
return mergeRegister(
editor.registerCommand(SELECTION_CHANGE_COMMAND, cursorUpdate, COMMAND_PRIORITY_LOW),
editor.registerEditableListener(cursorUpdate),
)
}, [cursorUpdate, editor])
useEffect(() => {
const scrollerElem = editor.getRootElement()
const update = () => {
editor.getEditorState().read(() => {
cursorUpdate()
})
}
window.addEventListener('resize', update)
if (scrollerElem) {
scrollerElem.addEventListener('scroll', update)
}
return () => {
window.removeEventListener('resize', update)
if (scrollerElem) {
scrollerElem.removeEventListener('scroll', update)
}
}
}, [cursorUpdate, editor])
return (
<div
className="super-empty-line-placeholder pointer-events-none fixed text-passive-1 opacity-0"
ref={placeholderElementRef}
>
Type <span className="rounded bg-passive-4-opacity-variant p-0.5">/</span> for commands...
</div>
)
}