onchain-lexical-ui 0.0.1

package/README.md

@@ -0,0 +1,5 @@
+# `@lexical/file`
+
+[![See API Documentation](https://lexical.dev/img/see-api-documentation.svg)](https://lexical.dev/docs/api/modules/lexical_file)
+
+This package contains the functionality for the file import/export feature of Lexical.

package/package.json

@@ -0,0 +1,221 @@
+{
+  "name": "onchain-lexical-ui",
+  "license": "MIT",
+  "version": "0.0.1",
+  "sideEffects": false,
+  "dependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "@excalidraw/excalidraw": "^0.18.0",
+    "@lexical/react": "^0.30.0",
+    "@lexical/utils": "^0.30.0",
+    "katex": "^0.16.22",
+    "lexical": "0.30.0",
+    "onchain-lexical-context": "^0.0.1",
+    "react-draggable": "^4.5.0"
+  },
+  "browser": {
+    "crypto": false
+  },
+  "exports": {
+    "./EditorShellStyles": {
+      "import": {
+        "types": "./src/EditorShellStyles.tsx",
+        "default": "./dist/EditorShellStyles.mjs"
+      },
+      "require": {
+        "types": "./src/EditorShellStyles.tsx",
+        "default": "./dist/EditorShellStyles.js"
+      }
+    },
+    "./Icon": {
+      "import": {
+        "types": "./src/Icon/index.tsx",
+        "default": "./dist/Icon.mjs"
+      },
+      "require": {
+        "types": "./src/Icon.tsx",
+        "default": "./dist/Icon.js"
+      }
+    },
+    "./Button": {
+      "import": {
+        "types": "./src/Button.tsx",
+        "default": "./dist/Button.mjs"
+      },
+      "require": {
+        "types": "./src/Button.tsx",
+        "default": "./dist/Button.js"
+      }
+    },
+    "./ColorPicker": {
+      "import": {
+        "types": "./src/ColorPicker.tsx",
+        "default": "./dist/ColorPicker.mjs"
+      },
+      "require": {
+        "types": "./src/ColorPicker.tsx",
+        "default": "./dist/ColorPicker.js"
+      }
+    },
+    "./ContentEditable": {
+      "import": {
+        "types": "./src/ContentEditable.tsx",
+        "default": "./dist/ContentEditable.mjs"
+      },
+      "require": {
+        "types": "./src/ContentEditable.tsx",
+        "default": "./dist/ContentEditable.js"
+      }
+    },
+    "./Dialog": {
+      "import": {
+        "types": "./src/Dialog.tsx",
+        "default": "./dist/Dialog.mjs"
+      },
+      "require": {
+        "types": "./src/Dialog.tsx",
+        "default": "./dist/Dialog.js"
+      }
+    },
+    "./DropDown": {
+      "import": {
+        "types": "./src/DropDown.tsx",
+        "default": "./dist/DropDown.mjs"
+      },
+      "require": {
+        "types": "./src/DropDown.tsx",
+        "default": "./dist/DropDown.js"
+      }
+    },
+    "./DropdownColorPicker": {
+      "import": {
+        "types": "./src/DropdownColorPicker.tsx",
+        "default": "./dist/DropdownColorPicker.mjs"
+      },
+      "require": {
+        "types": "./src/DropdownColorPicker.tsx",
+        "default": "./dist/DropdownColorPicker.js"
+      }
+    },
+    "./EquationEditor": {
+      "import": {
+        "types": "./src/EquationEditor.tsx",
+        "default": "./dist/EquationEditor.mjs"
+      },
+      "require": {
+        "types": "./src/EquationEditor.tsx",
+        "default": "./dist/EquationEditor.js"
+      }
+    },
+    "./ExcalidrawModal": {
+      "import": {
+        "types": "./src/ExcalidrawModal.tsx",
+        "default": "./dist/ExcalidrawModal.mjs"
+      },
+      "require": {
+        "types": "./src/ExcalidrawModal.tsx",
+        "default": "./dist/ExcalidrawModal.js"
+      }
+    },
+    "./FileInput": {
+      "import": {
+        "types": "./src/FileInput.tsx",
+        "default": "./dist/FileInput.mjs"
+      },
+      "require": {
+        "types": "./src/FileInput.tsx",
+        "default": "./dist/FileInput.js"
+      }
+    },
+    "./FlashMessage": {
+      "import": {
+        "types": "./src/FlashMessage.tsx",
+        "default": "./dist/FlashMessage.mjs"
+      },
+      "require": {
+        "types": "./src/FlashMessage.tsx",
+        "default": "./dist/FlashMessage.js"
+      }
+    },
+    "./ImageResizer": {
+      "import": {
+        "types": "./src/ImageResizer.tsx",
+        "default": "./dist/ImageResizer.mjs"
+      },
+      "require": {
+        "types": "./src/ImageResizer.tsx",
+        "default": "./dist/ImageResizer.js"
+      }
+    },
+    "./KatexEquationAlterer": {
+      "import": {
+        "types": "./src/KatexEquationAlterer.tsx",
+        "default": "./dist/KatexEquationAlterer.mjs"
+      },
+      "require": {
+        "types": "./src/KatexEquationAlterer.tsx",
+        "default": "./dist/KatexEquationAlterer.js"
+      }
+    },
+    "./KatexRenderer": {
+      "import": {
+        "types": "./src/KatexRenderer.tsx",
+        "default": "./dist/KatexRenderer.mjs"
+      },
+      "require": {
+        "types": "./src/KatexRenderer.tsx",
+        "default": "./dist/KatexRenderer.js"
+      }
+    },
+    "./Modal": {
+      "import": {
+        "types": "./src/Modal.tsx",
+        "default": "./dist/Modal.mjs"
+      },
+      "require": {
+        "types": "./src/Modal.tsx",
+        "default": "./dist/Modal.js"
+      }
+    },
+    "./Select": {
+      "import": {
+        "types": "./src/Select.tsx",
+        "default": "./dist/Select.mjs"
+      },
+      "require": {
+        "types": "./src/Select.tsx",
+        "default": "./dist/Select.js"
+      }
+    },
+    "./Skeleton": {
+      "import": {
+        "types": "./src/Skeleton.tsx",
+        "default": "./dist/Skeleton.mjs"
+      },
+      "require": {
+        "types": "./src/Skeleton.tsx",
+        "default": "./dist/Skeleton.js"
+      }
+    },
+    "./Switch": {
+      "import": {
+        "types": "./src/Switch.tsx",
+        "default": "./dist/Switch.mjs"
+      },
+      "require": {
+        "types": "./src/Switch.tsx",
+        "default": "./dist/Switch.js"
+      }
+    },
+    "./TextInput": {
+      "import": {
+        "types": "./src/TextInput.tsx",
+        "default": "./dist/TextInput.mjs"
+      },
+      "require": {
+        "types": "./src/TextInput.tsx",
+        "default": "./dist/TextInput.js"
+      }
+    }
+  }
+}

package/src/Button.module.less

@@ -0,0 +1,36 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.Button__root {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  border: 0px;
+  background-color: #eee;
+  border-radius: 2px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.Button__root:hover {
+  background-color: #ddd;
+}
+.Button__small {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 13px;
+}
+.Button__disabled {
+  cursor: not-allowed;
+}
+.Button__disabled:hover {
+  background-color: #eee;
+}

package/src/Button.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 * as React from 'react';
+import {ReactNode} from 'react';
+
+import Styles from './Button.module.less';
+import joinClasses from './utils/joinClasses';
+
+export default function Button({
+  'data-test-id': dataTestId,
+  children,
+  className,
+  onClick,
+  disabled,
+  small,
+  title,
+}: {
+  'data-test-id'?: string;
+  children: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  onClick: () => void;
+  small?: boolean;
+  title?: string;
+}): JSX.Element {
+  return (
+    <button
+      disabled={disabled}
+      className={joinClasses(
+        Styles.Button__root,
+        disabled && Styles.Button__disabled,
+        small && Styles.Button__small,
+        className,
+      )}
+      onClick={onClick}
+      title={title}
+      aria-label={title}
+      {...(dataTestId && {'data-test-id': dataTestId})}>
+      {children}
+    </button>
+  );
+}

package/src/ColorPicker.module.less

@@ -0,0 +1,89 @@
+/**
+ * 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.
+ *
+ */
+
+.color-picker-wrapper {
+  padding: 20px;
+  :global {
+    .color-picker-basic-color {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin: 0;
+      padding: 0;
+    }
+
+    .color-picker-basic-color button {
+      border: 1px solid #ccc;
+      border-radius: 2px;
+      height: 16px;
+      width: 16px;
+      cursor: pointer;
+      list-style-type: none;
+    }
+
+    .color-picker-basic-color button.active {
+      box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
+    }
+
+    .color-picker-saturation {
+      width: 100%;
+      position: relative;
+      margin-top: 15px;
+      height: 150px;
+      background-image: linear-gradient(transparent, black),
+        linear-gradient(to right, white, transparent);
+      user-select: none;
+    }
+    .color-picker-saturation_cursor {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border: 2px solid #ffffff;
+      border-radius: 50%;
+      box-shadow: 0 0 15px #00000026;
+      box-sizing: border-box;
+      transform: translate(-10px, -10px);
+    }
+    .color-picker-hue {
+      width: 100%;
+      position: relative;
+      margin-top: 15px;
+      height: 12px;
+      background-image: linear-gradient(
+        to right,
+        rgb(255, 0, 0),
+        rgb(255, 255, 0),
+        rgb(0, 255, 0),
+        rgb(0, 255, 255),
+        rgb(0, 0, 255),
+        rgb(255, 0, 255),
+        rgb(255, 0, 0)
+      );
+      user-select: none;
+      border-radius: 12px;
+    }
+
+    .color-picker-hue_cursor {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border: 2px solid #ffffff;
+      border-radius: 50%;
+      box-shadow: #0003 0 0 0 0.5px;
+      box-sizing: border-box;
+      transform: translate(-10px, -4px);
+    }
+
+    .color-picker-color {
+      border: 1px solid #ccc;
+      margin-top: 15px;
+      width: 100%;
+      height: 20px;
+    }
+  }
+}