feat: code block select all

packages/editor/package.json

@@ -46,6 +46,7 @@
     "@lexical/code": "0.18.0",
     "@lexical/file": "0.18.0",
     "@lexical/hashtag": "0.18.0",
+    "@lexical/history": "0.18.0",
     "@lexical/link": "0.18.0",
     "@lexical/list": "0.18.0",
     "@lexical/mark": "0.18.0",

packages/editor/src/components/editor-composer/EditorComposer.tsx

@@ -5,7 +5,6 @@ import {
 } from '@lexical/react/LexicalComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
@@ -33,9 +32,11 @@ import type {
   CommandPayload,
   Dispose,
 } from '@/extensions/extensionManager';
-import ReadonlyPlugin from '@/extensions/rich-text/ReadonlyPlugin';
 import Toolbar from '@/extensions/toolbar/Toolbar';
 import { cn } from '@/lib/utils';
+import DraggableBlockPlugin from '@/plugins/DraggableBlockPlugin';
+import LimitedHistoryPlugin from '@/plugins/LimitedHistoryPlugin';
+import ReadonlyPlugin from '@/plugins/ReadonlyPlugin';
 
 import * as styles from './EditorComposer.css';
 
@@ -45,6 +46,7 @@ type EditorComposerProps = React.PropsWithChildren<{
   absolutePath?: string;
   fsPath?: string;
   readonly?: boolean;
+  autofocus?: boolean;
   onChange?: React.ComponentProps<typeof OnChangePlugin>['onChange'];
   onThemeChange?: (theme: Theme) => void;
 }>;
@@ -69,6 +71,7 @@ const EditorComposer = forwardRef<EditorComposerRef, EditorComposerProps>(
       absolutePath = '',
       fsPath = '',
       readonly,
+      autofocus,
       children,
       onChange,
       onThemeChange,
@@ -155,13 +158,14 @@ const EditorComposer = forwardRef<EditorComposerRef, EditorComposerProps>(
                         ErrorBoundary={LexicalErrorBoundary}
                       />
                       {children}
-                      <AutoFocusPlugin />
+                      <LimitedHistoryPlugin />
+                      <DraggableBlockPlugin />
                       <OnChangePlugin
                         ignoreSelectionChange
                         onChange={handleChange}
                       />
-                      <HistoryPlugin />
                       <ReadonlyPlugin readonly={readonly} />
+                      {autofocus && <AutoFocusPlugin />}
                     </div>
                   </ScrollArea>
                 </div>

packages/editor/src/extensions/code/CodePlugin.tsx

@@ -8,6 +8,7 @@ import {
   COMMAND_PRIORITY_LOW,
   SELECT_ALL_COMMAND,
 } from 'lexical';
+import { first, last } from 'lodash-es';
 import { useEffect } from 'react';
 
 import CodeActionMenuPlugin from './CodeActionMenuPlugin';
@@ -58,6 +59,17 @@ const CodePlugin: React.FC = () => {
             const elementDOM = editor.getElementByKey(elementKey);
 
             if (elementDOM !== null && $isCodeNode(element)) {
+              const childrenKeys = element.getChildrenKeys();
+              const firstKey = first(childrenKeys);
+              const lastKey = last(childrenKeys);
+
+              if (
+                firstKey === selection.anchor.key &&
+                selection.focus.key === lastKey
+              ) {
+                return false;
+              }
+
               event.stopPropagation();
               element.select(0, element.getChildrenSize());
               return true;

packages/editor/src/extensions/rich-text/RichTextPlugin.tsx

@@ -1,13 +1,6 @@
 import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
 
-import DraggableBlockPlugin from './DraggableBlockPlugin';
-
-const RichTextPlugin: React.FC = () => (
-  <>
-    <TabIndentationPlugin />
-    <DraggableBlockPlugin />
-  </>
-);
+const RichTextPlugin: React.FC = () => <TabIndentationPlugin />;
 
 RichTextPlugin.displayName = 'extensionRichText.Plugin';
 

packages/editor/src/extensions/toolbar/Toolbar.css.ts

@@ -4,9 +4,9 @@ export const toolbarLayout = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  height: 65,
-  minHeight: 65,
-  maxHeight: 65,
+  height: 57,
+  minHeight: 57,
+  maxHeight: 57,
 });
 
 export const toolbar = style({
@@ -15,7 +15,6 @@ export const toolbar = style({
   height: 40,
   minHeight: 40,
   padding: 8,
-  marginTop: 8,
   display: 'flex',
   alignItems: 'center',
   whiteSpace: 'nowrap',

packages/editor/src/index.dev.tsx

@@ -7,6 +7,6 @@ const container = document.getElementById('root')!;
 const root = ReactDOM.createRoot(container);
 root.render(
   <React.StrictMode>
-    <Editor minHeight="calc(100vh - 65px)" />
+    <Editor minHeight="calc(100vh - 57px)" autofocus />
   </React.StrictMode>
 );

packages/editor/src/plugins/LimitedHistoryPlugin.tsx

@@ -0,0 +1,50 @@
+import {
+  createEmptyHistoryState,
+  type HistoryState,
+  registerHistory,
+} from '@lexical/history';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { useEffect, useMemo } from 'react';
+
+type LimitedHistoryPluginProps = {
+  delay?: number;
+  maxHistory?: number;
+  externalHistoryState?: HistoryState;
+};
+
+const LimitedHistoryPlugin: React.FC<LimitedHistoryPluginProps> = ({
+  delay = 1000,
+  maxHistory = 100,
+  externalHistoryState,
+}) => {
+  const [editor] = useLexicalComposerContext();
+  const historyState = useMemo(
+    () => externalHistoryState ?? createEmptyHistoryState(),
+    [externalHistoryState]
+  );
+
+  useEffect(() => {
+    return mergeRegister(
+      registerHistory(editor, historyState, delay),
+      editor.registerUpdateListener(() => {
+        const redoLength = historyState.redoStack.length;
+        const undoLength = historyState.undoStack.length;
+
+        if (maxHistory < redoLength) {
+          historyState.redoStack.splice(0, redoLength - maxHistory);
+        }
+
+        if (maxHistory < undoLength) {
+          historyState.undoStack.splice(0, undoLength - maxHistory);
+        }
+      })
+    );
+  }, [delay, editor, historyState, maxHistory]);
+
+  return null;
+};
+
+LimitedHistoryPlugin.displayName = 'LimitedHistoryPlugin';
+
+export default LimitedHistoryPlugin;

packages/vscode-extension/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.1.7] - 2024-10-19
+
+### Fixed
+
+- code block select all
+- maximum history size
+
 ## [0.1.6] - 2024-10-18
 
 ### Added

packages/vscode-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "textflow-editor-vscode",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": true,
   "description": "WYSIWYG Editor VSCode Extension",
   "icon": "./assets/textflow.png",

packages/vscode-webview/src/App.tsx

@@ -119,11 +119,12 @@ const App: React.FC = () => {
   return (
     <Editor
       ref={editorRef}
-      minHeight="calc(100vh - 65px)"
+      minHeight="calc(100vh - 57px)"
       initialValue={initialValue}
       absolutePath={absolutePath}
       fsPath={fsPath}
       readonly={readonly}
+      autofocus
       onChange={handleChange}
       onThemeChange={handleThemeChange}
     />