[WIP][lexical-playground] Feature: Add zoom functionality to editor

packages/lexical-playground/src/context/ToolbarContext.tsx

@@ -73,6 +73,8 @@ const INITIAL_TOOLBAR_STATE = {
   isUppercase: false,
   isCapitalize: false,
   rootType: 'root' as keyof typeof rootTypeToRootName,
+  // Zoom level in percentage
+  zoomLevel: 100 as number,
 };
 
 type ToolbarState = typeof INITIAL_TOOLBAR_STATE;

packages/lexical-playground/src/index.css

@@ -1817,3 +1817,28 @@ button.item.dropdown-item-active i {
   white-space: nowrap;
   display: inline-block;
 }
+
+.toolbar .toolbar-item.zoom-menu .icon {
+  display: none;
+}
+
+.zoom-menu {
+  min-width: 45px;
+}
+
+.zoom-menu .text {
+  min-width: 35px;
+}
+
+/* Show zoom level in mobile */
+@media (max-width: 480px) {
+  .zoom-menu {
+    display: flex;
+    align-items: center;
+  }
+
+  .zoom-menu .text {
+    display: inline-block !important;
+    width: auto !important;
+  }
+}

packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx

@@ -94,6 +94,7 @@ import {
   formatParagraph,
   formatQuote,
 } from './utils';
+import Zoom from './zoom';
 
 const rootTypeToRootName = {
   root: 'Root',
@@ -364,7 +365,7 @@ function ElementFormatDropdown({
   return (
     <DropDown
       disabled={disabled}
-      buttonLabel={formatOption.name}
+      buttonLabel=""
       buttonIconClassName={`icon ${
         isRTL ? formatOption.iconRTL : formatOption.icon
       }`}
@@ -1017,6 +1018,13 @@ export default function ToolbarPlugin({
               <span className="shortcut">{SHORTCUTS.CLEAR_FORMATTING}</span>
             </DropDownItem>
           </DropDown>
+          <Divider />
+          <ElementFormatDropdown
+            disabled={!isEditable}
+            value={toolbarState.elementFormat}
+            editor={activeEditor}
+            isRTL={toolbarState.isRTL}
+          />
           {canViewerSeeInsertDropdown && (
             <>
               <Divider />
@@ -1188,13 +1196,9 @@ export default function ToolbarPlugin({
           )}
         </>
       )}
+
       <Divider />
-      <ElementFormatDropdown
-        disabled={!isEditable}
-        value={toolbarState.elementFormat}
-        editor={activeEditor}
-        isRTL={toolbarState.isRTL}
-      />
+      <Zoom editor={editor} disabled={!isEditable} />
 
       {modal}
     </div>

packages/lexical-playground/src/plugins/ToolbarPlugin/zoom.tsx

@@ -0,0 +1,63 @@
+/**
+ * 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 type {LexicalEditor} from 'lexical';
+
+import * as React from 'react';
+import {useCallback} from 'react';
+
+import {useToolbarState} from '../../context/ToolbarContext';
+import DropDown, {DropDownItem} from '../../ui/DropDown';
+
+const ZOOM_LEVELS = [50, 75, 90, 100, 125, 150, 200] as const;
+type ZoomLevel = (typeof ZOOM_LEVELS)[number];
+
+type StyleWithZoom = CSSStyleDeclaration & {
+  zoom: string;
+};
+
+export default function Zoom({
+  editor,
+  disabled = false,
+}: {
+  editor: LexicalEditor;
+  disabled?: boolean;
+}): JSX.Element {
+  const {toolbarState, updateToolbarState} = useToolbarState();
+  const {zoomLevel} = toolbarState;
+
+  const handleZoomChange = useCallback(
+    (newZoom: ZoomLevel) => {
+      const editorElement = editor.getRootElement()?.parentElement;
+      if (editorElement) {
+        const style = editorElement.style as StyleWithZoom;
+        style.zoom = `${newZoom}%`;
+        updateToolbarState('zoomLevel', newZoom);
+      }
+    },
+    [editor, updateToolbarState],
+  );
+
+  return (
+    <DropDown
+      disabled={disabled}
+      buttonClassName="toolbar-item zoom-menu"
+      buttonLabel={`${zoomLevel}%`}
+      buttonIconClassName="icon"
+      buttonAriaLabel="Formatting options for zoom level">
+      {ZOOM_LEVELS.map((level) => (
+        <DropDownItem
+          key={level}
+          className={'item ' + (level === zoomLevel ? 'active' : '')}
+          onClick={() => handleZoomChange(level)}>
+          <span className="text">{level}%</span>
+        </DropDownItem>
+      ))}
+    </DropDown>
+  );
+}