Lexical: Improved nested details interaction

- Set to open by default on insert. - Updated selection handling not to always fully cascade to lowest editable child on selection, so parents can be reliably selected. - Updated mouse handling to treat details panes like the root element, inserting within-details where relevant.

Author: ssddanbrown

resources/js/wysiwyg/index.ts

@@ -1,4 +1,4 @@
-import {createEditor, LexicalEditor} from 'lexical';
+import {createEditor} from 'lexical';
 import {createEmptyHistoryState, registerHistory} from '@lexical/history';
 import {registerRichText} from '@lexical/rich-text';
 import {mergeRegister} from '@lexical/utils';
@@ -89,6 +89,9 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
  window.debugEditorState = () => {
  return editor.getEditorState().toJSON();
  };
+ context.manager.onSelectionChange((selection) => {
+ console.log(selection, context.editor.getEditorState());
+ });
 
  registerCommonNodeMutationListeners(context);
 

resources/js/wysiwyg/lexical/core/LexicalNode.ts

@@ -383,6 +383,14 @@ export class LexicalNode {
  return isSelected;
  }
 
+ /**
+ * Indicate if this node should be selected directly instead of the default
+ * where the selection would descend to the nearest initial child element.
+ */
+ shouldSelectDirectly(): boolean {
+ return false;
+ }
+
  /**
  * Returns this nodes key.
  */

resources/js/wysiwyg/lexical/core/LexicalSelection.ts

@@ -476,12 +476,12 @@ export class RangeSelection implements BaseSelection {
  const startOffset = firstPoint.offset;
  const endOffset = lastPoint.offset;
 
- if ($isElementNode(firstNode)) {
+ if ($isElementNode(firstNode) && !firstNode.shouldSelectDirectly()) {
  const firstNodeDescendant =
  firstNode.getDescendantByIndex<ElementNode>(startOffset);
  firstNode = firstNodeDescendant != null ? firstNodeDescendant : firstNode;
  }
- if ($isElementNode(lastNode)) {
+ if ($isElementNode(lastNode) && !lastNode.shouldSelectDirectly()) {
  let lastNodeDescendant =
  lastNode.getDescendantByIndex<ElementNode>(endOffset);
  // We don't want to over-select, as node selection infers the child before
@@ -499,7 +499,7 @@ export class RangeSelection implements BaseSelection {
  let nodes: Array<LexicalNode>;
 
  if (firstNode.is(lastNode)) {
- if ($isElementNode(firstNode) && firstNode.getChildrenSize() > 0) {
+ if ($isElementNode(firstNode) && firstNode.getChildrenSize() > 0 && !firstNode.shouldSelectDirectly()) {
  nodes = [];
  } else {
  nodes = [firstNode];

resources/js/wysiwyg/lexical/core/nodes/LexicalElementNode.ts

@@ -150,6 +150,20 @@ export class ElementNode extends LexicalNode {
  }
  return node;
  }
+ getFirstSelectableDescendant<T extends LexicalNode>(): null | T {
+ if (this.shouldSelectDirectly()) {
+ return null;
+ }
+ let node = this.getFirstChild<T>();
+ while ($isElementNode(node) && !node.shouldSelectDirectly()) {
+ const child = node.getFirstChild<T>();
+ if (child === null) {
+ break;
+ }
+ node = child;
+ }
+ return node;
+ }
  getLastDescendant<T extends LexicalNode>(): null | T {
  let node = this.getLastChild<T>();
  while ($isElementNode(node)) {
@@ -161,6 +175,20 @@ export class ElementNode extends LexicalNode {
  }
  return node;
  }
+ getLastSelectableDescendant<T extends LexicalNode>(): null | T {
+ if (this.shouldSelectDirectly()) {
+ return null;
+ }
+ let node = this.getLastChild<T>();
+ while ($isElementNode(node) && !node.shouldSelectDirectly()) {
+ const child = node.getLastChild<T>();
+ if (child === null) {
+ break;
+ }
+ node = child;
+ }
+ return node;
+ }
  getDescendantByIndex<T extends LexicalNode>(index: number): null | T {
  const children = this.getChildren<T>();
  const childrenLength = children.length;
@@ -319,11 +347,11 @@ export class ElementNode extends LexicalNode {
  return selection;
  }
  selectStart(): RangeSelection {
- const firstNode = this.getFirstDescendant();
+ const firstNode = this.getFirstSelectableDescendant();
  return firstNode ? firstNode.selectStart() : this.select();
  }
  selectEnd(): RangeSelection {
- const lastNode = this.getLastDescendant();
+ const lastNode = this.getLastSelectableDescendant();
  return lastNode ? lastNode.selectEnd() : this.select();
  }
  clear(): this {

resources/js/wysiwyg/lexical/rich-text/LexicalDetailsNode.ts

@@ -75,6 +75,9 @@ export class DetailsNode extends ElementNode {
 
  if (this.__open) {
  el.setAttribute('open', 'true');
+ el.removeAttribute('contenteditable');
+ } else {
+ el.setAttribute('contenteditable', 'false');
  }
 
  const summary = document.createElement('summary');
@@ -84,7 +87,7 @@ export class DetailsNode extends ElementNode {
  event.preventDefault();
  _editor.update(() => {
  this.select();
- })
+ });
  });
 
  el.append(summary);
@@ -96,6 +99,11 @@ export class DetailsNode extends ElementNode {
 
  if (prevNode.__open !== this.__open) {
  dom.toggleAttribute('open', this.__open);
+ if (this.__open) {
+ dom.removeAttribute('contenteditable');
+ } else {
+ dom.setAttribute('contenteditable', 'false');
+ }
  }
 
  return prevNode.__id !== this.__id
@@ -144,6 +152,7 @@ export class DetailsNode extends ElementNode {
  }
 
  element.removeAttribute('open');
+ element.removeAttribute('contenteditable');
 
  return {element};
  }
@@ -165,6 +174,10 @@ export class DetailsNode extends ElementNode {
  return node;
  }
 
+ shouldSelectDirectly(): boolean {
+ return true;
+ }
+
 }
 
 export function $createDetailsNode() {

resources/js/wysiwyg/services/mouse-handling.ts

@@ -1,31 +1,41 @@
 import {EditorUiContext} from "../ui/framework/core";
 import {
- $createParagraphNode, $getRoot,
- $getSelection,
+ $createParagraphNode, $getNearestNodeFromDOMNode, $getRoot,
  $isDecoratorNode, CLICK_COMMAND,
- COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND,
- KEY_BACKSPACE_COMMAND,
- KEY_DELETE_COMMAND,
- KEY_ENTER_COMMAND, KEY_TAB_COMMAND,
- LexicalEditor,
+ COMMAND_PRIORITY_LOW, ElementNode,
  LexicalNode
 } from "lexical";
 import {$isImageNode} from "@lexical/rich-text/LexicalImageNode";
 import {$isMediaNode} from "@lexical/rich-text/LexicalMediaNode";
-import {getLastSelection} from "../utils/selection";
-import {$getNearestNodeBlockParent, $getParentOfType, $selectOrCreateAdjacent} from "../utils/nodes";
-import {$setInsetForSelection} from "../utils/lists";
-import {$isListItemNode} from "@lexical/list";
-import {$isDetailsNode, DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
 import {$isDiagramNode} from "../utils/diagrams";
 import {$isTableNode} from "@lexical/table";
+import {$isDetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
 
 function isHardToEscapeNode(node: LexicalNode): boolean {
- return $isDecoratorNode(node) || $isImageNode(node) || $isMediaNode(node) || $isDiagramNode(node) || $isTableNode(node);
+ return $isDecoratorNode(node)
+ || $isImageNode(node)
+ || $isMediaNode(node)
+ || $isDiagramNode(node)
+ || $isTableNode(node)
+ || $isDetailsNode(node);
+}
+
+function $getContextNode(event: MouseEvent): ElementNode {
+ if (event.target instanceof HTMLElement) {
+ const nearestDetails = event.target.closest('details');
+ if (nearestDetails) {
+ const detailsNode = $getNearestNodeFromDOMNode(nearestDetails);
+ if ($isDetailsNode(detailsNode)) {
+ return detailsNode;
+ }
+ }
+ }
+ return $getRoot();
 }
 
 function insertBelowLastNode(context: EditorUiContext, event: MouseEvent): boolean {
- const lastNode = $getRoot().getLastChild();
+ const contextNode = $getContextNode(event);
+ const lastNode = contextNode.getLastChild();
  if (!lastNode || !isHardToEscapeNode(lastNode)) {
  return false;
  }
@@ -40,7 +50,7 @@ function insertBelowLastNode(context: EditorUiContext, event: MouseEvent): boole
  if (isClickBelow) {
  context.editor.update(() => {
  const newNode = $createParagraphNode();
- $getRoot().append(newNode);
+ contextNode.append(newNode);
  newNode.select();
  });
  return true;
@@ -49,7 +59,6 @@ function insertBelowLastNode(context: EditorUiContext, event: MouseEvent): boole
  return false;
 }
 
-
 export function registerMouseHandling(context: EditorUiContext): () => void {
  const unregisterClick = context.editor.registerCommand(CLICK_COMMAND, (event): boolean => {
  insertBelowLastNode(context, event);

resources/js/wysiwyg/ui/defaults/buttons/objects.ts

@@ -193,6 +193,8 @@ export const details: EditorButtonDefinition = {
  .filter(n => n !== null) as ElementNode[];
  const uniqueTopLevels = [...new Set(topLevels)];
 
+ detailsNode.setOpen(true);
+
  if (uniqueTopLevels.length > 0) {
  uniqueTopLevels[0].insertAfter(detailsNode);
  } else {

resources/sass/_editor.scss

@@ -437,6 +437,16 @@ body.editor-is-fullscreen {
 .editor-node-resizer.active .editor-node-resizer-ghost {
  display: block;
 }
+.editor-content-area details[contenteditable="false"],
+.editor-content-area summary[contenteditable="false"] {
+ user-select: none;
+}
+.editor-content-area details[contenteditable="false"] > details * {
+ pointer-events: none;
+}
+.editor-content-area details summary {
+ caret-color: transparent;
+}
 
 .editor-table-marker {
  position: fixed;