fix lexical plugins + add notebook2 store + rm vscode (#410)

* bump: lexical version

* bump: lexical version

* temp: disable plugins

* rm: vscode

* fix: restore toolbar

* Automatic application of license header

* lint

* export

* notebook2: store

* fix: build

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: echarles

.eslintrc.js

@@ -4,6 +4,12 @@
  * MIT License
  */
 
+import { fileURLToPath } from 'node:url'
+import { dirname } from 'node:path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',

eslint.config.js

@@ -10,8 +10,17 @@ const reactPlugin = require('eslint-plugin-react');
 const reactHooksPlugin = require('eslint-plugin-react-hooks');
 const prettierPlugin = require('eslint-plugin-prettier');
 const prettierConfig = require('eslint-config-prettier');
+const path = require('path');
 
 module.exports = tseslint.config(
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: path.resolve(__dirname),
+        projectService: true,
+      },
+    },
+  },
   js.configs.recommended,
   ...tseslint.configs.recommended,
   {

packages/lexical/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/jupyter-lexical",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Jupyter UI for Lexical",
   "license": "MIT",
   "main": "lib/index.js",

packages/lexical/src/appSettings.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+/**
+ * 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.
+ *
+ */
+
+const hostName = window.location.hostname;
+export const isDevPlayground: boolean =
+  hostName !== 'playground.lexical.dev' &&
+  hostName !== 'lexical-playground.vercel.app';
+
+export const DEFAULT_SETTINGS = {
+  disableBeforeInput: false,
+  emptyEditor: isDevPlayground,
+  hasLinkAttributes: false,
+  isAutocomplete: false,
+  isCharLimit: false,
+  isCharLimitUtf8: false,
+  isCodeHighlighted: true,
+  isCodeShiki: false,
+  isCollab: false,
+  isMaxLength: false,
+  isRichText: true,
+  listStrictIndent: false,
+  measureTypingPerf: false,
+  selectionAlwaysOnDisplay: false,
+  shouldAllowHighlightingWithBrackets: false,
+  shouldPreserveNewLinesInMarkdown: false,
+  shouldUseLexicalContextMenu: false,
+  showNestedEditorTreeView: false,
+  showTableOfContents: false,
+  showTreeView: true,
+  tableCellBackgroundColor: true,
+  tableCellMerge: true,
+  tableHorizontalScroll: true,
+} as const;
+
+// These are mutated in setupEnv
+export const INITIAL_SETTINGS: Record<SettingName, boolean> = {
+  ...DEFAULT_SETTINGS,
+};
+
+export type SettingName = keyof typeof DEFAULT_SETTINGS;
+
+export type Settings = typeof INITIAL_SETTINGS;

packages/lexical/src/components/DropDown.tsx

@@ -4,6 +4,18 @@
  * MIT License
  */
 
+/**
+ * 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 { JSX } from 'react';
+
+import { isDOMNode } from 'lexical';
+import * as React from 'react';
 import {
   ReactNode,
   useCallback,
@@ -12,15 +24,16 @@ import {
   useRef,
   useState,
 } from 'react';
-import * as React from 'react';
 import { createPortal } from 'react-dom';
 
 type DropDownContextType = {
-  registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;
+  registerItem: (ref: React.RefObject<null | HTMLButtonElement>) => void;
 };
 
 const DropDownContext = React.createContext<DropDownContextType | null>(null);
 
+const dropDownPadding = 4;
+
 export function DropDownItem({
   children,
   className,
@@ -32,7 +45,7 @@ export function DropDownItem({
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   title?: string;
 }) {
-  const ref = useRef<HTMLButtonElement>(null);
+  const ref = useRef<null | HTMLButtonElement>(null);
 
   const dropDownContext = React.useContext(DropDownContext);
 
@@ -49,13 +62,18 @@ export function DropDownItem({
   }, [ref, registerItem]);
 
   return (
-    <button className={className} onClick={onClick} ref={ref} title={title}>
+    <button
+      className={className}
+      onClick={onClick}
+      ref={ref}
+      title={title}
+      type="button">
       {children}
     </button>
   );
 }
 
-function DropDownItems({
+export function DropDownItems({
   children,
   dropDownRef,
   onClose,
@@ -64,51 +82,66 @@ function DropDownItems({
   dropDownRef: React.Ref<HTMLDivElement>;
   onClose: () => void;
 }) {
-  const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();
+  const [items, setItems] =
+    useState<React.RefObject<null | HTMLButtonElement>[]>();
   const [highlightedItem, setHighlightedItem] =
-    useState<React.RefObject<HTMLButtonElement>>();
+    useState<React.RefObject<null | HTMLButtonElement>>();
+
   const registerItem = useCallback(
-    (itemRef: React.RefObject<HTMLButtonElement>) => {
-      setItems(prev => (prev ? [...prev, itemRef] : [itemRef]));
+    (itemRef: React.RefObject<null | HTMLButtonElement>) => {
+      setItems((prev) => (prev ? [...prev, itemRef] : [itemRef]));
     },
     [setItems],
   );
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (!items) return;
+    if (!items) {
+      return;
+    }
+
     const key = event.key;
+
     if (['Escape', 'ArrowUp', 'ArrowDown', 'Tab'].includes(key)) {
       event.preventDefault();
     }
 
     if (key === 'Escape' || key === 'Tab') {
       onClose();
     } else if (key === 'ArrowUp') {
-      setHighlightedItem(prev => {
-        if (!prev) return items[0];
+      setHighlightedItem((prev) => {
+        if (!prev) {
+          return items[0];
+        }
         const index = items.indexOf(prev) - 1;
         return items[index === -1 ? items.length - 1 : index];
       });
     } else if (key === 'ArrowDown') {
-      setHighlightedItem(prev => {
-        if (!prev) return items[0];
+      setHighlightedItem((prev) => {
+        if (!prev) {
+          return items[0];
+        }
         return items[items.indexOf(prev) + 1];
       });
     }
   };
+
   const contextValue = useMemo(
     () => ({
       registerItem,
     }),
     [registerItem],
   );
+
   useEffect(() => {
     if (items && !highlightedItem) {
       setHighlightedItem(items[0]);
     }
+
     if (highlightedItem && highlightedItem.current) {
       highlightedItem.current.focus();
     }
   }, [items, highlightedItem]);
+
   return (
     <DropDownContext.Provider value={contextValue}>
       <div className="dropdown" ref={dropDownRef} onKeyDown={handleKeyDown}>
@@ -118,21 +151,23 @@ function DropDownItems({
   );
 }
 
-export const DropDown = ({
+export function DropDown({
+  disabled = false,
   buttonLabel,
   buttonAriaLabel,
   buttonClassName,
   buttonIconClassName,
   children,
   stopCloseOnClickSelf,
 }: {
+  disabled?: boolean;
   buttonAriaLabel?: string;
   buttonClassName: string;
   buttonIconClassName?: string;
   buttonLabel?: string;
   children: ReactNode;
   stopCloseOnClickSelf?: boolean;
-}): JSX.Element => {
+}): JSX.Element {
   const dropDownRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [showDropDown, setShowDropDown] = useState(false);
@@ -149,8 +184,8 @@ export const DropDown = ({
     const dropDown = dropDownRef.current;
 
     if (showDropDown && button !== null && dropDown !== null) {
-      const { top, left } = button.getBoundingClientRect();
-      dropDown.style.top = `${top + 40}px`;
+      const {top, left} = button.getBoundingClientRect();
+      dropDown.style.top = `${top + button.offsetHeight + dropDownPadding}px`;
       dropDown.style.left = `${Math.min(
         left,
         window.innerWidth - dropDown.offsetWidth - 20,
@@ -164,14 +199,15 @@ export const DropDown = ({
     if (button !== null && showDropDown) {
       const handle = (event: MouseEvent) => {
         const target = event.target;
+        if (!isDOMNode(target)) {
+          return;
+        }
         if (stopCloseOnClickSelf) {
-          if (
-            dropDownRef.current &&
-            dropDownRef.current.contains(target as Node)
-          )
+          if (dropDownRef.current && dropDownRef.current.contains(target)) {
             return;
+          }
         }
-        if (!button.contains(target as Node)) {
+        if (!button.contains(target)) {
           setShowDropDown(false);
         }
       };
@@ -183,14 +219,37 @@ export const DropDown = ({
     }
   }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);
 
+  useEffect(() => {
+    const handleButtonPositionUpdate = () => {
+      if (showDropDown) {
+        const button = buttonRef.current;
+        const dropDown = dropDownRef.current;
+        if (button !== null && dropDown !== null) {
+          const {top} = button.getBoundingClientRect();
+          const newPosition = top + button.offsetHeight + dropDownPadding;
+          if (newPosition !== dropDown.getBoundingClientRect().top) {
+            dropDown.style.top = `${newPosition}px`;
+          }
+        }
+      }
+    };
+
+    document.addEventListener('scroll', handleButtonPositionUpdate);
+
+    return () => {
+      document.removeEventListener('scroll', handleButtonPositionUpdate);
+    };
+  }, [buttonRef, dropDownRef, showDropDown]);
+
   return (
     <>
       <button
+        type="button"
+        disabled={disabled}
         aria-label={buttonAriaLabel || buttonLabel}
         className={buttonClassName}
         onClick={() => setShowDropDown(!showDropDown)}
-        ref={buttonRef}
-      >
+        ref={buttonRef}>
         {buttonIconClassName && <span className={buttonIconClassName} />}
         {buttonLabel && (
           <span className="text dropdown-button-text">{buttonLabel}</span>
@@ -207,6 +266,6 @@ export const DropDown = ({
         )}
     </>
   );
-};
+}
 
 export default DropDown;