@blocklet/editor 2.0.140 → 2.0.141

package/lib/main/plugins/CollapsiblePlugin/Collapsible.css

@@ -23,6 +23,10 @@
   outline: none;
 }
 
+.Collapsible__title > p {
+  margin: 0;
+}
+
 .Collapsible__title::marker,
 .Collapsible__title::-webkit-details-marker {
   display: none;
@@ -41,7 +45,7 @@
   transform: translateY(-50%);
 }
 
-.Collapsible__container[open] .Collapsible__title:before {
+.Collapsible__container[open] > .Collapsible__title:before {
   border-color: transparent;
   border-width: 6px 4px 0 4px;
   border-top-color: #000;

package/lib/main/plugins/CollapsiblePlugin/CollapsibleContainerNode.d.ts

@@ -9,7 +9,7 @@ import { DOMConversionMap, DOMConversionOutput, DOMExportOutput, EditorConfig, E
 type SerializedCollapsibleContainerNode = Spread<{
     open: boolean;
 }, SerializedElementNode>;
-export declare function convertDetailsElement(domNode: HTMLDetailsElement): DOMConversionOutput | null;
+export declare function $convertDetailsElement(domNode: HTMLDetailsElement): DOMConversionOutput | null;
 export declare class CollapsibleContainerNode extends ElementNode {
     __open: boolean;
     constructor(open: boolean, key?: NodeKey);

package/lib/main/plugins/CollapsiblePlugin/CollapsibleContainerNode.js

@@ -5,8 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ElementNode, } from 'lexical';
-export function convertDetailsElement(domNode) {
+import { ElementNode, isHTMLElement, } from 'lexical';
+import { IS_CHROME } from '../../../shared/environment';
+import invariant from '../../../shared/invariant';
+import { setDomHiddenUntilFound } from './CollapsibleUtils';
+export function $convertDetailsElement(domNode) {
     const isOpen = domNode.open !== undefined ? domNode.open : true;
     const node = $createCollapsibleContainerNode(isOpen);
     return {
@@ -26,21 +29,47 @@ export class CollapsibleContainerNode extends ElementNode {
         return new CollapsibleContainerNode(node.__open, node.__key);
     }
     createDOM(config, editor) {
-        const dom = document.createElement('details');
-        dom.classList.add('Collapsible__container');
-        dom.open = this.__open;
-        // 注意: 此处把监听事件从官方使用的 'toggle' 换成了 'click', ‘toggle’ 不触发 ?!
-        dom.addEventListener('click', (e) => {
-            const element = e.target;
-            if (element.tagName === 'SUMMARY' || element.parentElement?.tagName === 'SUMMARY') {
-                editor.update(() => this.toggleOpen());
+        // details is not well supported in Chrome #5582
+        let dom;
+        if (IS_CHROME) {
+            dom = document.createElement('div');
+            if (this.__open) {
+                dom.setAttribute('open', '');
             }
-        });
+        }
+        else {
+            const detailsDom = document.createElement('details');
+            detailsDom.open = this.__open;
+            detailsDom.addEventListener('toggle', () => {
+                const open = editor.getEditorState().read(() => this.getOpen());
+                if (open !== detailsDom.open) {
+                    editor.update(() => this.toggleOpen());
+                }
+            });
+            dom = detailsDom;
+        }
+        dom.classList.add('Collapsible__container');
         return dom;
     }
     updateDOM(prevNode, dom) {
-        if (prevNode.__open !== this.__open) {
-            dom.open = this.__open;
+        const currentOpen = this.__open;
+        if (prevNode.__open !== currentOpen) {
+            // details is not well supported in Chrome #5582
+            if (IS_CHROME) {
+                const contentDom = dom.children[1];
+                invariant(isHTMLElement(contentDom), 'Expected contentDom to be an HTMLElement');
+                if (currentOpen) {
+                    dom.setAttribute('open', '');
+                    contentDom.hidden = false;
+                }
+                else {
+                    dom.removeAttribute('open');
+                    setDomHiddenUntilFound(contentDom);
+                }
+            }
+            else {
+                dom.open = this.__open;
+            }
         }
         return false;
     }
@@ -48,7 +77,7 @@ export class CollapsibleContainerNode extends ElementNode {
         return {
             details: (domNode) => {
                 return {
-                    conversion: convertDetailsElement,
+                    conversion: $convertDetailsElement,
                     priority: 1,
                 };
             },
@@ -60,6 +89,7 @@ export class CollapsibleContainerNode extends ElementNode {
     }
     exportDOM() {
         const element = document.createElement('details');
+        element.classList.add('Collapsible__container');
         element.setAttribute('open', this.__open.toString());
         return { element };
     }

package/lib/main/plugins/CollapsiblePlugin/CollapsibleContentNode.d.ts

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { DOMConversionMap, DOMConversionOutput, DOMExportOutput, EditorConfig, ElementNode, LexicalNode, SerializedElementNode } from 'lexical';
+import { DOMConversionMap, DOMConversionOutput, DOMExportOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, SerializedElementNode } from 'lexical';
 type SerializedCollapsibleContentNode = SerializedElementNode;
-export declare function convertCollapsibleContentElement(domNode: HTMLElement): DOMConversionOutput | null;
+export declare function $convertCollapsibleContentElement(domNode: HTMLElement): DOMConversionOutput | null;
 export declare class CollapsibleContentNode extends ElementNode {
     static getType(): string;
     static clone(node: CollapsibleContentNode): CollapsibleContentNode;
-    createDOM(config: EditorConfig): HTMLElement;
+    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
     updateDOM(prevNode: CollapsibleContentNode, dom: HTMLElement): boolean;
     static importDOM(): DOMConversionMap | null;
     exportDOM(): DOMExportOutput;

package/lib/main/plugins/CollapsiblePlugin/CollapsibleContentNode.js

@@ -6,7 +6,11 @@
  *
  */
 import { ElementNode, } from 'lexical';
-export function convertCollapsibleContentElement(domNode) {
+import { IS_CHROME } from '../../../shared/environment';
+import invariant from '../../../shared/invariant';
+import { $isCollapsibleContainerNode } from './CollapsibleContainerNode';
+import { domOnBeforeMatch, setDomHiddenUntilFound } from './CollapsibleUtils';
+export function $convertCollapsibleContentElement(domNode) {
     const node = $createCollapsibleContentNode();
     return {
         node,
@@ -19,9 +23,27 @@ export class CollapsibleContentNode extends ElementNode {
     static clone(node) {
         return new CollapsibleContentNode(node.__key);
     }
-    createDOM(config) {
+    createDOM(config, editor) {
         const dom = document.createElement('div');
         dom.classList.add('Collapsible__content');
+        if (IS_CHROME) {
+            editor.getEditorState().read(() => {
+                const containerNode = this.getParentOrThrow();
+                invariant($isCollapsibleContainerNode(containerNode), 'Expected parent node to be a CollapsibleContainerNode');
+                if (!containerNode.__open) {
+                    setDomHiddenUntilFound(dom);
+                }
+            });
+            domOnBeforeMatch(dom, () => {
+                editor.update(() => {
+                    const containerNode = this.getParentOrThrow().getLatest();
+                    invariant($isCollapsibleContainerNode(containerNode), 'Expected parent node to be a CollapsibleContainerNode');
+                    if (!containerNode.__open) {
+                        containerNode.toggleOpen();
+                    }
+                });
+            });
+        }
         return dom;
     }
     updateDOM(prevNode, dom) {
@@ -34,7 +56,7 @@ export class CollapsibleContentNode extends ElementNode {
                     return null;
                 }
                 return {
-                    conversion: convertCollapsibleContentElement,
+                    conversion: $convertCollapsibleContentElement,
                     priority: 2,
                 };
             },
@@ -42,6 +64,7 @@ export class CollapsibleContentNode extends ElementNode {
     }
     exportDOM() {
         const element = document.createElement('div');
+        element.classList.add('Collapsible__content');
         element.setAttribute('data-lexical-collapsible-content', 'true');
         return { element };
     }

package/lib/main/plugins/CollapsiblePlugin/CollapsibleTitleNode.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { DOMConversionMap, DOMConversionOutput, DOMExportOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, RangeSelection, SerializedElementNode } from 'lexical';
+import { DOMConversionMap, DOMConversionOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, RangeSelection, SerializedElementNode } from 'lexical';
 type SerializedCollapsibleTitleNode = SerializedElementNode;
-export declare function convertSummaryElement(domNode: HTMLElement): DOMConversionOutput | null;
+export declare function $convertSummaryElement(domNode: HTMLElement): DOMConversionOutput | null;
 export declare class CollapsibleTitleNode extends ElementNode {
     static getType(): string;
     static clone(node: CollapsibleTitleNode): CollapsibleTitleNode;
@@ -15,7 +15,6 @@ export declare class CollapsibleTitleNode extends ElementNode {
     updateDOM(prevNode: CollapsibleTitleNode, dom: HTMLElement): boolean;
     static importDOM(): DOMConversionMap | null;
     static importJSON(serializedNode: SerializedCollapsibleTitleNode): CollapsibleTitleNode;
-    exportDOM(): DOMExportOutput;
     exportJSON(): SerializedCollapsibleTitleNode;
     collapseAtStart(_selection: RangeSelection): boolean;
     insertNewAfter(_: RangeSelection, restoreSelection?: boolean): ElementNode;

package/lib/main/plugins/CollapsiblePlugin/CollapsibleTitleNode.js

@@ -6,9 +6,11 @@
  *
  */
 import { $createParagraphNode, $isElementNode, ElementNode, } from 'lexical';
+import { IS_CHROME } from '../../../shared/environment';
+import invariant from '../../../shared/invariant';
 import { $isCollapsibleContainerNode } from './CollapsibleContainerNode';
 import { $isCollapsibleContentNode } from './CollapsibleContentNode';
-export function convertSummaryElement(domNode) {
+export function $convertSummaryElement(domNode) {
     const node = $createCollapsibleTitleNode();
     return {
         node,
@@ -24,6 +26,15 @@ export class CollapsibleTitleNode extends ElementNode {
     createDOM(config, editor) {
         const dom = document.createElement('summary');
         dom.classList.add('Collapsible__title');
+        if (IS_CHROME) {
+            dom.addEventListener('click', () => {
+                editor.update(() => {
+                    const collapsibleContainer = this.getLatest().getParentOrThrow();
+                    invariant($isCollapsibleContainerNode(collapsibleContainer), 'Expected parent node to be a CollapsibleContainerNode');
+                    collapsibleContainer.toggleOpen();
+                });
+            });
+        }
         return dom;
     }
     updateDOM(prevNode, dom) {
@@ -33,7 +44,7 @@ export class CollapsibleTitleNode extends ElementNode {
         return {
             summary: (domNode) => {
                 return {
-                    conversion: convertSummaryElement,
+                    conversion: $convertSummaryElement,
                     priority: 1,
                 };
             },
@@ -42,10 +53,6 @@ export class CollapsibleTitleNode extends ElementNode {
     static importJSON(serializedNode) {
         return $createCollapsibleTitleNode();
     }
-    exportDOM() {
-        const element = document.createElement('summary');
-        return { element };
-    }
     exportJSON() {
         return {
             ...super.exportJSON(),

package/lib/main/plugins/CollapsiblePlugin/CollapsibleUtils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function setDomHiddenUntilFound(dom: HTMLElement): void;
+export declare function domOnBeforeMatch(dom: HTMLElement, callback: () => void): void;

package/lib/main/plugins/CollapsiblePlugin/CollapsibleUtils.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export function setDomHiddenUntilFound(dom) {
+    // @ts-expect-error
+    dom.hidden = 'until-found';
+}
+export function domOnBeforeMatch(dom, callback) {
+    // @ts-expect-error
+    dom.onbeforematch = callback;
+}

package/lib/main/plugins/CollapsiblePlugin/index.js

@@ -8,7 +8,7 @@
 import './Collapsible.css';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $findMatchingParent, $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils';
-import { $createParagraphNode, $getPreviousSelection, $getSelection, $isElementNode, $isRangeSelection, $setSelection, COMMAND_PRIORITY_LOW, createCommand, DELETE_CHARACTER_COMMAND, INSERT_PARAGRAPH_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, } from 'lexical';
+import { $createParagraphNode, $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, createCommand, DELETE_CHARACTER_COMMAND, INSERT_PARAGRAPH_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, } from 'lexical';
 import { useEffect } from 'react';
 import { $createCollapsibleContainerNode, $isCollapsibleContainerNode, CollapsibleContainerNode, } from './CollapsibleContainerNode';
 import { $createCollapsibleContentNode, $isCollapsibleContentNode, CollapsibleContentNode, } from './CollapsibleContentNode';
@@ -21,7 +21,7 @@ export default function CollapsiblePlugin() {
         if (!editor.hasNodes([CollapsibleContainerNode, CollapsibleTitleNode, CollapsibleContentNode])) {
             throw new Error('CollapsiblePlugin: CollapsibleContainerNode, CollapsibleTitleNode, or CollapsibleContentNode not registered on editor');
         }
-        const onEscapeUp = () => {
+        const $onEscapeUp = () => {
             const selection = $getSelection();
             if ($isRangeSelection(selection) && selection.isCollapsed() && selection.anchor.offset === 0) {
                 const container = $findMatchingParent(selection.anchor.getNode(), $isCollapsibleContainerNode);
@@ -36,17 +36,21 @@ export default function CollapsiblePlugin() {
             }
             return false;
         };
-        const onEscapeDown = () => {
+        const $onEscapeDown = () => {
             const selection = $getSelection();
             if ($isRangeSelection(selection) && selection.isCollapsed()) {
                 const container = $findMatchingParent(selection.anchor.getNode(), $isCollapsibleContainerNode);
                 if ($isCollapsibleContainerNode(container)) {
                     const parent = container.getParent();
                     if (parent !== null && parent.getLastChild() === container) {
-                        const lastDescendant = container.getLastDescendant();
-                        if (lastDescendant !== null &&
-                            selection.anchor.key === lastDescendant.getKey() &&
-                            selection.anchor.offset === lastDescendant.getTextContentSize()) {
+                        const titleParagraph = container.getFirstDescendant();
+                        const contentParagraph = container.getLastDescendant();
+                        if ((contentParagraph !== null &&
+                            selection.anchor.key === contentParagraph.getKey() &&
+                            selection.anchor.offset === contentParagraph.getTextContentSize()) ||
+                            (titleParagraph !== null &&
+                                selection.anchor.key === titleParagraph.getKey() &&
+                                selection.anchor.offset === titleParagraph.getTextContentSize())) {
                             container.insertAfter($createParagraphNode());
                         }
                     }
@@ -106,27 +110,25 @@ export default function CollapsiblePlugin() {
         // below it to allow adding more content. It's similar what $insertBlockNode
         // (mainly for decorators), except it'll always be possible to continue adding
         // new content even if trailing paragraph is accidentally deleted
-        editor.registerCommand(KEY_ARROW_DOWN_COMMAND, onEscapeDown, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, onEscapeDown, COMMAND_PRIORITY_LOW), 
+        editor.registerCommand(KEY_ARROW_DOWN_COMMAND, $onEscapeDown, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, $onEscapeDown, COMMAND_PRIORITY_LOW), 
         // When collapsible is the first child pressing up/left arrow will insert paragraph
         // above it to allow adding more content. It's similar what $insertBlockNode
         // (mainly for decorators), except it'll always be possible to continue adding
         // new content even if leading paragraph is accidentally deleted
-        editor.registerCommand(KEY_ARROW_UP_COMMAND, onEscapeUp, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_LEFT_COMMAND, onEscapeUp, COMMAND_PRIORITY_LOW), 
-        // Handling CMD+Enter to toggle collapsible element collapsed state
+        editor.registerCommand(KEY_ARROW_UP_COMMAND, $onEscapeUp, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_LEFT_COMMAND, $onEscapeUp, COMMAND_PRIORITY_LOW), 
+        // Enter goes from Title to Content rather than a new line inside Title
         editor.registerCommand(INSERT_PARAGRAPH_COMMAND, () => {
-            // @ts-ignore
-            const windowEvent = editor._window?.event;
-            if (windowEvent && (windowEvent.ctrlKey || windowEvent.metaKey) && windowEvent.key === 'Enter') {
-                const selection = $getPreviousSelection();
-                if ($isRangeSelection(selection) && selection.isCollapsed()) {
-                    const parent = $findMatchingParent(selection.anchor.getNode(), (node) => $isElementNode(node) && !node.isInline());
-                    if ($isCollapsibleTitleNode(parent)) {
-                        const container = parent.getParent();
-                        if ($isCollapsibleContainerNode(container)) {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const titleNode = $findMatchingParent(selection.anchor.getNode(), (node) => $isCollapsibleTitleNode(node));
+                if ($isCollapsibleTitleNode(titleNode)) {
+                    const container = titleNode.getParent();
+                    if (container && $isCollapsibleContainerNode(container)) {
+                        if (!container.getOpen()) {
                             container.toggleOpen();
-                            $setSelection(selection.clone());
-                            return true;
                         }
+                        titleNode.getNextSibling()?.selectEnd();
+                        return true;
                     }
                 }
             }
@@ -134,8 +136,9 @@ export default function CollapsiblePlugin() {
         }, COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_COLLAPSIBLE_COMMAND, () => {
             editor.update(() => {
                 const title = $createCollapsibleTitleNode();
-                $insertNodeToNearestRoot($createCollapsibleContainerNode(true).append(title, $createCollapsibleContentNode().append($createParagraphNode())));
-                title.select();
+                const paragraph = $createParagraphNode();
+                $insertNodeToNearestRoot($createCollapsibleContainerNode(true).append(title.append(paragraph), $createCollapsibleContentNode().append($createParagraphNode())));
+                paragraph.select();
             });
             return true;
         }, COMMAND_PRIORITY_LOW));

package/lib/shared/environment.d.ts

@@ -18,3 +18,7 @@ export declare const IS_FIREFOX: boolean;
 export declare const CAN_USE_BEFORE_INPUT: boolean;
 export declare const IS_SAFARI: boolean;
 export declare const IS_IOS: boolean;
+export declare const IS_ANDROID: boolean;
+export declare const IS_CHROME: boolean;
+export declare const IS_ANDROID_CHROME: boolean;
+export declare const IS_APPLE_WEBKIT: boolean;

package/lib/shared/environment.js

@@ -12,7 +12,10 @@ export const IS_FIREFOX = CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test
 export const CAN_USE_BEFORE_INPUT = CAN_USE_DOM && 'InputEvent' in window && !documentMode ? 'getTargetRanges' in new window.InputEvent('input') : false;
 export const IS_SAFARI = CAN_USE_DOM && /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
 export const IS_IOS = CAN_USE_DOM && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+export const IS_ANDROID = CAN_USE_DOM && /Android/.test(navigator.userAgent);
 // Keep these in case we need to use them in the future.
 // export const IS_WINDOWS: boolean = CAN_USE_DOM && /Win/.test(navigator.platform);
-// export const IS_CHROME: boolean = CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent);
+export const IS_CHROME = CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent);
 // export const canUseTextInputEvent: boolean = CAN_USE_DOM && 'TextEvent' in window && !documentMode;
+export const IS_ANDROID_CHROME = CAN_USE_DOM && IS_ANDROID && IS_CHROME;
+export const IS_APPLE_WEBKIT = CAN_USE_DOM && /AppleWebKit\/[\d.]+/.test(navigator.userAgent) && !IS_CHROME;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.0.140",
+  "version": "2.0.141",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -40,7 +40,7 @@
     "@arcblock/ux": "^2.10.23",
     "@blocklet/embed": "^0.2.0",
     "@blocklet/pages-kit": "^0.2.399",
-    "@blocklet/pdf": "2.0.140",
+    "@blocklet/pdf": "2.0.141",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -113,5 +113,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "c3ae07eda1d3249e410e3d59fe0cf3391f31180b"
+  "gitHead": "8382764c9955da8355361e8f3dfe80064ef6531f"
 }