diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts index 9928ad8bf..5568b8963 100644 --- a/resources/js/wysiwyg/index.ts +++ b/resources/js/wysiwyg/index.ts @@ -20,6 +20,7 @@ import {modals} from "./ui/defaults/modals"; import {CodeBlockDecorator} from "./ui/decorators/code-block"; import {DiagramDecorator} from "./ui/decorators/diagram"; import {registerMouseHandling} from "./services/mouse-handling"; +import {registerSelectionHandling} from "./services/selection-handling"; const theme = { text: { @@ -53,6 +54,7 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st registerShortcuts(context), registerKeyboardHandling(context), registerMouseHandling(context), + registerSelectionHandling(context), registerTableResizer(editor, context.scrollDOM), registerTableSelectionHandler(editor), registerTaskListHandler(editor, context.editorDOM), diff --git a/resources/js/wysiwyg/services/selection-handling.ts b/resources/js/wysiwyg/services/selection-handling.ts new file mode 100644 index 000000000..e3ea965f2 --- /dev/null +++ b/resources/js/wysiwyg/services/selection-handling.ts @@ -0,0 +1,49 @@ +import {EditorUiContext} from "../ui/framework/core"; +import { + $getSelection, + COMMAND_PRIORITY_LOW, + SELECTION_CHANGE_COMMAND +} from "lexical"; +import {$isDetailsNode} from "@lexical/rich-text/LexicalDetailsNode"; + + +const trackedDomNodes = new Set(); + +/** + * Set a selection indicator on nodes which require it. + * @param context + */ +function setSelectionIndicator(context: EditorUiContext): boolean { + + for (const domNode of trackedDomNodes) { + domNode.classList.remove('selected'); + trackedDomNodes.delete(domNode); + } + + const selection = $getSelection(); + const nodes = selection?.getNodes() || []; + + if (nodes.length === 1) { + if ($isDetailsNode(nodes[0])) { + const domEl = context.editor.getElementByKey(nodes[0].getKey()); + if (domEl) { + domEl.classList.add('selected'); + trackedDomNodes.add(domEl); + } + } + } + + return false; +} + +export function registerSelectionHandling(context: EditorUiContext): () => void { + const unregisterSelectionChange = context.editor.registerCommand(SELECTION_CHANGE_COMMAND, (): boolean => { + setSelectionIndicator(context); + return false; + }, COMMAND_PRIORITY_LOW); + + + return () => { + unregisterSelectionChange(); + }; +} \ No newline at end of file diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss index 966c11d3a..cd4bb5d2e 100644 --- a/resources/sass/_editor.scss +++ b/resources/sass/_editor.scss @@ -447,6 +447,10 @@ body.editor-is-fullscreen { .editor-content-area details summary { caret-color: transparent; } +.editor-content-area details.selected { + outline: 1px dashed var(--editor-color-primary); + outline-offset: 1px; +} .editor-table-marker { position: fixed;