@blocklet/editor 2.2.47 → 2.3.1

package/lib/ext/PostLinkEmbedPlugin/PostLinkNode.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, SerializedLexicalNode, Spread } from 'lexical';
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
 export interface PostInfo {
     id: string;
@@ -21,7 +21,7 @@ export declare class PostLinkNode extends DecoratorNode<JSX.Element> {
     static importJSON(serializedNode: SerializedPostLinkNode): PostLinkNode;
     exportDOM(): DOMExportOutput;
     static importDOM(): DOMConversionMap | null;
-    constructor(postInfo: PostInfo);
+    constructor(postInfo: PostInfo, key?: NodeKey);
     exportJSON(): SerializedPostLinkNode;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;

package/lib/ext/PostLinkEmbedPlugin/PostLinkNode.js

@@ -77,7 +77,7 @@ export class PostLinkNode extends DecoratorNode {
         return 'post-link';
     }
     static clone(node) {
-        return new PostLinkNode({ ...node.__postInfo });
+        return new PostLinkNode({ ...node.__postInfo }, node.__key);
     }
     static importJSON(serializedNode) {
         const { postInfo } = serializedNode;
@@ -100,8 +100,8 @@ export class PostLinkNode extends DecoratorNode {
             }),
         };
     }
-    constructor(postInfo) {
-        super();
+    constructor(postInfo, key) {
+        super(key);
         this.__postInfo = postInfo;
     }
     exportJSON() {

package/lib/main/editor.js

@@ -12,7 +12,7 @@ import { CharacterLimitPlugin } from '@lexical/react/LexicalCharacterLimitPlugin
 import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
@@ -27,7 +27,6 @@ import { Box, styled, alpha } from '@mui/material';
 import { useSettings } from './context/SettingsContext';
 import { useSharedHistoryContext } from './context/SharedHistoryContext';
 import useHasNodes from './hooks/useHasNodes';
-import AutocompletePlugin from './plugins/AutocompletePlugin';
 import AutoEmbedPlugin from './plugins/AutoEmbedPlugin';
 import AutoLinkPlugin from './plugins/AutoLinkPlugin';
 import ClickableLinkPlugin from './plugins/ClickableLinkPlugin';
@@ -49,7 +48,6 @@ import ListMaxIndentLevelPlugin from './plugins/ListMaxIndentLevelPlugin';
 import MarkdownShortcutPlugin from './plugins/MarkdownShortcutPlugin';
 import { MaxLengthPlugin } from './plugins/MaxLengthPlugin';
 import MentionsPlugin from './plugins/MentionsPlugin';
-import SpeechToTextPlugin from './plugins/SpeechToTextPlugin';
 import TabFocusPlugin from './plugins/TabFocusPlugin';
 import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
 import TableCellResizer from './plugins/TableCellResizer';
@@ -66,8 +64,6 @@ import BookmarkPlugin from '../ext/BookmarkPlugin';
 import Placeholder from './ui/Placeholder';
 import { useEditorConfig } from '../config';
 import AidePlugin from '../ext/AIPlugin';
-import SelectBlockPlugin from '../ext/SelectBlockPlugin';
-import RemoveListPlugin from '../ext/RemoveListPlugin';
 import MarkdownHeadTextPlugin from '../ext/HeadTextPlugin';
 import { AiImagePlugin } from '../ext/AiImage';
 import { EditorRefPlugin } from '../ext/LexicalEditorRefPlugin';
@@ -100,7 +96,7 @@ export default function Editor({ children, prepend, placeholder, onChange, autoF
     useTranslationListener();
     const hasNodes = useHasNodes();
     const { historyState } = useSharedHistoryContext();
-    const { settings: { isAutocomplete, isMaxLength, isCharLimit, isCharLimitUtf8, isRichText, showTableOfContents }, } = useSettings();
+    const { settings: { isMaxLength, isCharLimit, isCharLimitUtf8, isRichText, showTableOfContents }, } = useSettings();
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const onRef = (_floatingAnchorElem) => {
         if (_floatingAnchorElem !== null) {
@@ -115,7 +111,7 @@ export default function Editor({ children, prepend, placeholder, onChange, autoF
     if (minimalMode) {
         return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(PasteSlackImagePlugin, {}), _jsx(EditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
     }
-    return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), _jsx(SpeechToTextPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(PasteSlackImagePlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(EditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), isAutocomplete && hasNodes('autocomplete') && _jsx(AutocompletePlugin, {}), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
+    return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(PasteSlackImagePlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(EditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true, hasHorizontalScroll: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
 }
 const EditorContent = styled(Box) `
   position: relative;

package/lib/main/index.css

@@ -738,35 +738,33 @@ button.action-button:disabled {
 
 .table-cell-action-button-container {
   position: absolute;
-  top: 4px;
-  left: 4px;
+  z-index: 3;
+  top: 0;
+  left: 0;
   will-change: transform;
 }
+.table-cell-action-button-container.table-cell-action-button-container--active {
+  pointer-events: auto;
+  opacity: 1;
+}
+.table-cell-action-button-container.table-cell-action-button-container--inactive {
+  pointer-events: none;
+  opacity: 0;
+}
 
 .table-cell-action-button {
-  background-color: none;
-  display: flex !important;
+  display: flex;
   justify-content: center;
   align-items: center;
   border: 0;
-  position: relative;
+  position: absolute;
+  top: 10px;
+  right: 10px;
   border-radius: 15px;
   color: #222;
   display: inline-block;
   cursor: pointer;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  opacity: 0.75 !important;
-  transition: all 0.2s;
-  &:hover {
-    opacity: 1 !important;
-    background: #222;
-    color: #eee;
-  }
-  .iconify {
-    font-size: 16px;
-  }
+  opacity: 0.75;
 }
 
 @keyframes mic-pulsate-color {

package/lib/main/markdown-editor/editor.js

@@ -5,7 +5,7 @@ import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
 import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';

package/lib/main/markdown-editor/transformers.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS, } from '@lexical/markdown';
+import { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, ELEMENT_TRANSFORMERS, MULTILINE_ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS, } from '@lexical/markdown';
 import { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode, } from '@lexical/react/LexicalHorizontalRuleNode';
 import { $createTableCellNode, $createTableNode, $createTableRowNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableCellHeaderStates, TableCellNode, TableNode, TableRowNode, } from '@lexical/table';
 import { $isParagraphNode, $isTextNode } from 'lexical';
@@ -71,7 +71,7 @@ export const TABLE = {
             for (const cell of row.getChildren()) {
                 // It's TableCellNode so it's just to make flow happy
                 if ($isTableCellNode(cell)) {
-                    rowOutput.push($convertToMarkdownString(TRANSFORMERS, cell).replace(/\n/g, '\\n'));
+                    rowOutput.push($convertToMarkdownString(TRANSFORMERS, cell).replace(/\n/g, '\\n').trim());
                     if (cell.__headerState === TableCellHeaderStates.ROW) {
                         isHeaderRow = true;
                     }
@@ -102,7 +102,7 @@ export const TABLE = {
                 if (!$isTableCellNode(cell)) {
                     return;
                 }
-                cell.toggleHeaderStyle(TableCellHeaderStates.ROW);
+                cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
             });
             // Remove line
             parentNode.remove();
@@ -141,7 +141,7 @@ export const TABLE = {
             const tableRow = $createTableRowNode();
             table.append(tableRow);
             for (let i = 0; i < maxCells; i++) {
-                tableRow.append(i < cells.length ? cells[i] : createTableCell(''));
+                tableRow.append(i < cells.length ? cells[i] : $createTableCell(''));
             }
         }
         const previousSibling = parentNode.getPreviousSibling();
@@ -160,7 +160,7 @@ function getTableColumnsSize(table) {
     const row = table.getFirstChild();
     return $isTableRowNode(row) ? row.getChildrenSize() : 0;
 }
-const createTableCell = (textContent) => {
+const $createTableCell = (textContent) => {
     textContent = textContent.replace(/\\n/g, '\n');
     const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
     $convertFromMarkdownString(textContent, TRANSFORMERS, cell);
@@ -171,7 +171,7 @@ const mapToTableCells = (textContent) => {
     if (!match || !match[1]) {
         return null;
     }
-    return match[1].split('|').map((text) => createTableCell(text));
+    return match[1].split('|').map((text) => $createTableCell(text));
 };
 export const TRANSFORMERS = [
     TABLE,
@@ -179,6 +179,7 @@ export const TRANSFORMERS = [
     IMAGE,
     CHECK_LIST,
     ...ELEMENT_TRANSFORMERS,
+    ...MULTILINE_ELEMENT_TRANSFORMERS,
     ...TEXT_FORMAT_TRANSFORMERS,
     ...TEXT_MATCH_TRANSFORMERS,
 ];

package/lib/main/nodes/EmojiNode.d.ts

@@ -9,7 +9,6 @@ import type { EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread } f
 import { TextNode } from 'lexical';
 export type SerializedEmojiNode = Spread<{
     className: string;
-    type: 'emoji';
 }, SerializedTextNode>;
 export declare class EmojiNode extends TextNode {
     __className: string;
@@ -17,7 +16,7 @@ export declare class EmojiNode extends TextNode {
     static clone(node: EmojiNode): EmojiNode;
     constructor(className: string, text: string, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;
-    updateDOM(prevNode: TextNode, dom: HTMLElement, config: EditorConfig): boolean;
+    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
     static importJSON(serializedNode: SerializedEmojiNode): EmojiNode;
     exportJSON(): SerializedEmojiNode;
     getClassName(): string;

package/lib/main/nodes/EmojiNode.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { TextNode } from 'lexical';
+import { $applyNodeReplacement, TextNode } from 'lexical';
 export class EmojiNode extends TextNode {
     __className;
     static getType() {
@@ -35,18 +35,12 @@ export class EmojiNode extends TextNode {
         return false;
     }
     static importJSON(serializedNode) {
-        const node = $createEmojiNode(serializedNode.className, serializedNode.text);
-        node.setFormat(serializedNode.format);
-        node.setDetail(serializedNode.detail);
-        node.setMode(serializedNode.mode);
-        node.setStyle(serializedNode.style);
-        return node;
+        return $createEmojiNode(serializedNode.className, serializedNode.text).updateFromJSON(serializedNode);
     }
     exportJSON() {
         return {
             ...super.exportJSON(),
             className: this.getClassName(),
-            type: 'emoji',
         };
     }
     getClassName() {
@@ -58,5 +52,6 @@ export function $isEmojiNode(node) {
     return node instanceof EmojiNode;
 }
 export function $createEmojiNode(className, emojiText) {
-    return new EmojiNode(className, emojiText).setMode('token');
+    const node = new EmojiNode(className, emojiText).setMode('token');
+    return $applyNodeReplacement(node);
 }

package/lib/main/nodes/EquationNode.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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.
+ *
+ */
 import { DecoratorNode } from 'lexical';
-import { lazyRetry as lazy } from '@arcblock/ux/lib/Util';
-import { Suspense } from 'react';
-const EquationComponent = lazy(
-// @ts-ignore
-() => import('./EquationComponent'));
 export class EquationNode extends DecoratorNode {
     __equation;
     __inline;
@@ -46,7 +47,13 @@ export class EquationNode extends DecoratorNode {
         writable.__equation = equation;
     }
     decorate() {
-        return (_jsx(Suspense, { fallback: null, children: _jsx(EquationComponent, { equation: this.__equation, inline: this.__inline, nodeKey: this.__key }) }));
+        console.warn('dummy equation node');
+        return null;
+        // return (
+        //   <Suspense fallback={null}>
+        //     <EquationComponent equation={this.__equation} inline={this.__inline} nodeKey={this.__key} />
+        //   </Suspense>
+        // );
     }
 }
 export function $createEquationNode(equation = '', inline = false) {

package/lib/main/nodes/ImageComponent.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import styled from '@emotion/styled';
 import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
@@ -135,7 +135,7 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
             return false;
         }, COMMAND_PRIORITY_LOW), editor.registerCommand(CLICK_COMMAND, (payload) => {
             const event = payload;
-            if (isResizing) {
+            if (isResizing || !editor.isEditable()) {
                 return true;
             }
             if (event.target === imageRef.current) {

package/lib/main/nodes/PlaygroundNodes.js

@@ -17,7 +17,6 @@ import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
 import { CollapsibleContainerNode } from '../plugins/CollapsiblePlugin/CollapsibleContainerNode';
 import { CollapsibleContentNode } from '../plugins/CollapsiblePlugin/CollapsibleContentNode';
 import { CollapsibleTitleNode } from '../plugins/CollapsiblePlugin/CollapsibleTitleNode';
-import { AutocompleteNode } from './AutocompleteNode';
 import { EmojiNode } from './EmojiNode';
 import { EquationNode } from './EquationNode';
 import { ExcalidrawNode } from './ExcalidrawNode';
@@ -61,7 +60,6 @@ const PlaygroundNodes = [
     EmojiNode,
     ExcalidrawNode,
     EquationNode,
-    AutocompleteNode,
     KeywordNode,
     HorizontalRuleNode,
     TweetNode,

package/lib/main/nodes/StickyComponent.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  */
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';

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

@@ -1,15 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * 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.
- *
- */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './index.css';
 import { $isCodeNode, CodeNode, getLanguageFriendlyName } from '@lexical/code';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $getNearestNodeFromDOMNode } from 'lexical';
+import { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical';
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { CopyButton } from './components/CopyButton';
@@ -70,30 +63,33 @@ function CodeActionMenuContainer({ anchorElem }) {
             document.removeEventListener('mousemove', debouncedOnMouseMove);
         };
     }, [shouldListenMouseMove, debouncedOnMouseMove]);
-    editor.registerMutationListener(CodeNode, (mutations) => {
-        editor.getEditorState().read(() => {
-            for (const [key, type] of mutations) {
-                switch (type) {
-                    case 'created':
-                        codeSetRef.current.add(key);
-                        setShouldListenMouseMove(codeSetRef.current.size > 0);
-                        break;
-                    case 'destroyed':
-                        codeSetRef.current.delete(key);
-                        setShouldListenMouseMove(codeSetRef.current.size > 0);
-                        break;
-                    default:
-                        break;
+    useEffect(() => {
+        return editor.registerMutationListener(CodeNode, (mutations) => {
+            editor.getEditorState().read(() => {
+                for (const [key, type] of mutations) {
+                    switch (type) {
+                        case 'created':
+                            codeSetRef.current.add(key);
+                            break;
+                        case 'destroyed':
+                            codeSetRef.current.delete(key);
+                            break;
+                        default:
+                            break;
+                    }
                 }
-            }
-        });
-    });
+            });
+            setShouldListenMouseMove(codeSetRef.current.size > 0);
+        }, { skipInitialization: false });
+    }, [editor]);
     const codeFriendlyName = getLanguageFriendlyName(lang);
-    return isShown ? (_jsxs("div", { className: "code-action-menu-container", style: { ...position }, children: [_jsx("div", { className: "code-highlight-language", children: codeFriendlyName }), _jsx(CopyButton, { editor: editor, getCodeDOMNode: (...rest) => getCodeDOMNode(...rest) })] })) : (_jsx("span", {}));
+    return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    _jsx(_Fragment, { children: isShown ? (_jsxs("div", { className: "code-action-menu-container", style: { ...position }, children: [_jsx("div", { className: "code-highlight-language", children: codeFriendlyName }), _jsx(CopyButton, { editor: editor, getCodeDOMNode: getCodeDOMNode })] })) : null }));
 }
 function getMouseInfo(event) {
     const { target } = event;
-    if (target && target instanceof HTMLElement) {
+    if (isHTMLElement(target)) {
         const codeDOMNode = target.closest('code.PlaygroundEditorTheme__code');
         const isOutside = !(codeDOMNode || target.closest('div.code-action-menu-container'));
         return { codeDOMNode, isOutside };

package/lib/main/plugins/MarkdownTransformers/index.d.ts

@@ -5,11 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { ElementTransformer, TextMatchTransformer, Transformer } from '@lexical/markdown';
+import { ElementTransformer, TextMatchTransformer, Transformer } from '@lexical/markdown';
 export declare const HR: ElementTransformer;
 export declare const IMAGE: TextMatchTransformer;
-export declare const EQUATION: TextMatchTransformer;
-export declare const TWEET: ElementTransformer;
 export declare const TABLE: ElementTransformer;
-export declare const BOOKMARK: TextMatchTransformer;
 export declare const PLAYGROUND_TRANSFORMERS: Array<Transformer>;

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

@@ -5,14 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { CHECK_LIST, ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS } from '@lexical/markdown';
+import { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, ELEMENT_TRANSFORMERS, MULTILINE_ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS, } from '@lexical/markdown';
 import { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode, } from '@lexical/react/LexicalHorizontalRuleNode';
-import { $createTableCellNode, $createTableNode, $createTableRowNode, $isTableNode, $isTableRowNode, TableCellHeaderStates, TableCellNode, TableNode, TableRowNode, } from '@lexical/table';
-import { $createParagraphNode, $createTextNode, $isElementNode, $isParagraphNode, $isTextNode } from 'lexical';
-import { $createEquationNode, $isEquationNode, EquationNode } from '../../nodes/EquationNode';
+import { $createTableCellNode, $createTableNode, $createTableRowNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableCellHeaderStates, TableCellNode, TableNode, TableRowNode, } from '@lexical/table';
+import { $isParagraphNode, $isTextNode } from 'lexical';
 import { $createImageNode, $isImageNode, ImageNode } from '../../nodes/ImageNode';
-import { $createTweetNode, $isTweetNode, TweetNode } from '../../nodes/TweetNode';
-import { $createBookmarkNode, $isBookmarkNode, BookmarkNode } from '../../../ext/BookmarkPlugin/BookmarkNode';
 export const HR = {
     dependencies: [HorizontalRuleNode],
     export: (node) => {
@@ -34,7 +31,7 @@ export const HR = {
 };
 export const IMAGE = {
     dependencies: [ImageNode],
-    export: (node, exportChildren, exportFormat) => {
+    export: (node) => {
         if (!$isImageNode(node)) {
             return null;
         }
@@ -54,66 +51,63 @@ export const IMAGE = {
     trigger: ')',
     type: 'text-match',
 };
-export const EQUATION = {
-    dependencies: [EquationNode],
-    export: (node, exportChildren, exportFormat) => {
-        if (!$isEquationNode(node)) {
-            return null;
-        }
-        return `$${node.getEquation()}$`;
-    },
-    importRegExp: /\$([^$].+?)\$/,
-    regExp: /\$([^$].+?)\$$/,
-    replace: (textNode, match) => {
-        const [, equation] = match;
-        const equationNode = $createEquationNode(equation, true);
-        textNode.replace(equationNode);
-    },
-    trigger: '$',
-    type: 'text-match',
-};
-export const TWEET = {
-    dependencies: [TweetNode],
-    export: (node) => {
-        if (!$isTweetNode(node)) {
-            return null;
-        }
-        return `<tweet id="${node.getId()}" />`;
-    },
-    regExp: /<tweet id="([^"]+?)"\s?\/>\s?$/,
-    replace: (textNode, _1, match) => {
-        const [, id] = match;
-        const tweetNode = $createTweetNode(id);
-        textNode.replace(tweetNode);
-    },
-    type: 'element',
-};
 // Very primitive table setup
 const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/;
+const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
 export const TABLE = {
-    // TODO: refactor transformer for new TableNode
     dependencies: [TableNode, TableRowNode, TableCellNode],
-    export: (node, exportChildren) => {
+    export: (node) => {
         if (!$isTableNode(node)) {
             return null;
         }
         const output = [];
         for (const row of node.getChildren()) {
             const rowOutput = [];
-            if ($isTableRowNode(row)) {
-                for (const cell of row.getChildren()) {
-                    // It's TableCellNode (hence ElementNode) so it's just to make flow happy
-                    if ($isElementNode(cell)) {
-                        rowOutput.push(exportChildren(cell));
+            if (!$isTableRowNode(row)) {
+                // eslint-disable-next-line no-continue
+                continue;
+            }
+            let isHeaderRow = false;
+            for (const cell of row.getChildren()) {
+                // It's TableCellNode so it's just to make flow happy
+                if ($isTableCellNode(cell)) {
+                    rowOutput.push($convertToMarkdownString(PLAYGROUND_TRANSFORMERS, cell).replace(/\n/g, '\\n').trim());
+                    if (cell.__headerState === TableCellHeaderStates.ROW) {
+                        isHeaderRow = true;
                     }
                 }
             }
             output.push(`| ${rowOutput.join(' | ')} |`);
+            if (isHeaderRow) {
+                output.push(`| ${rowOutput.map((_) => '---').join(' | ')} |`);
+            }
         }
         return output.join('\n');
     },
     regExp: TABLE_ROW_REG_EXP,
     replace: (parentNode, _1, match) => {
+        // Header row
+        if (TABLE_ROW_DIVIDER_REG_EXP.test(match[0])) {
+            const table = parentNode.getPreviousSibling();
+            if (!table || !$isTableNode(table)) {
+                return;
+            }
+            const rows = table.getChildren();
+            const lastRow = rows[rows.length - 1];
+            if (!lastRow || !$isTableRowNode(lastRow)) {
+                return;
+            }
+            // Add header state to row cells
+            lastRow.getChildren().forEach((cell) => {
+                if (!$isTableCellNode(cell)) {
+                    return;
+                }
+                cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+            });
+            // Remove line
+            parentNode.remove();
+            return;
+        }
         const matchCells = mapToTableCells(match[0]);
         if (matchCells == null) {
             return;
@@ -147,7 +141,7 @@ export const TABLE = {
             const tableRow = $createTableRowNode();
             table.append(tableRow);
             for (let i = 0; i < maxCells; i++) {
-                tableRow.append(i < cells.length ? cells[i] : createTableCell(null));
+                tableRow.append(i < cells.length ? cells[i] : $createTableCell(''));
             }
         }
         const previousSibling = parentNode.getPreviousSibling();
@@ -166,51 +160,26 @@ function getTableColumnsSize(table) {
     const row = table.getFirstChild();
     return $isTableRowNode(row) ? row.getChildrenSize() : 0;
 }
-const createTableCell = (textContent) => {
+const $createTableCell = (textContent) => {
+    textContent = textContent.replace(/\\n/g, '\n');
     const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
-    const paragraph = $createParagraphNode();
-    if (textContent != null) {
-        paragraph.append($createTextNode(textContent.trim()));
-    }
-    cell.append(paragraph);
+    $convertFromMarkdownString(textContent, PLAYGROUND_TRANSFORMERS, cell);
     return cell;
 };
 const mapToTableCells = (textContent) => {
-    // TODO:
-    // For now plain text, single node. Can be expanded to more complex content
-    // including formatted text
     const match = textContent.match(TABLE_ROW_REG_EXP);
     if (!match || !match[1]) {
         return null;
     }
-    return match[1].split('|').map((text) => createTableCell(text));
-};
-export const BOOKMARK = {
-    dependencies: [BookmarkNode],
-    export: (node, exportChildren, exportFormat) => {
-        if (!$isBookmarkNode(node)) {
-            return null;
-        }
-        return `[[]](${node.getId()})`;
-    },
-    importRegExp: /(?:\[\[([^[]+)\])(?:\((?:([^()\s]+)(?:\s"((?:[^"]*\\")*[^"]*)"\s*)?)\))/,
-    regExp: /(?:\[\[([^[]+)\])(?:\((?:([^()\s]+)(?:\s"((?:[^"]*\\")*[^"]*)"\s*)?)\))$/,
-    replace: (textNode, match) => {
-        const [, , linkUrl] = match;
-        const bookmarkNode = $createBookmarkNode(linkUrl);
-        textNode.replace(bookmarkNode);
-    },
-    trigger: ')',
-    type: 'text-match',
+    return match[1].split('|').map((text) => $createTableCell(text));
 };
 export const PLAYGROUND_TRANSFORMERS = [
-    BOOKMARK,
     TABLE,
     HR,
     IMAGE,
-    TWEET,
     CHECK_LIST,
     ...ELEMENT_TRANSFORMERS,
+    ...MULTILINE_ELEMENT_TRANSFORMERS,
     ...TEXT_FORMAT_TRANSFORMERS,
     ...TEXT_MATCH_TRANSFORMERS,
 ];