Lexical: Added better selection display for collapisble blocks

Author: ssddanbrown

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),

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<HTMLElement>();
+
+/**
+ * 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();
+    };
+}

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;