lexical editor changes

packages/gamut/src/LexicalEditor/themes/PlaygroundEditorTheme.ts

@@ -0,0 +1,121 @@
+/**
+ * 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 {EditorThemeClasses} from 'lexical';
+
+import './PlaygroundEditorTheme.scss';
+
+const theme: EditorThemeClasses = {
+  autocomplete: 'PlaygroundEditorTheme__autocomplete',
+  blockCursor: 'PlaygroundEditorTheme__blockCursor',
+  characterLimit: 'PlaygroundEditorTheme__characterLimit',
+  code: 'PlaygroundEditorTheme__code',
+  codeHighlight: {
+    atrule: 'PlaygroundEditorTheme__tokenAttr',
+    attr: 'PlaygroundEditorTheme__tokenAttr',
+    boolean: 'PlaygroundEditorTheme__tokenProperty',
+    builtin: 'PlaygroundEditorTheme__tokenSelector',
+    cdata: 'PlaygroundEditorTheme__tokenComment',
+    char: 'PlaygroundEditorTheme__tokenSelector',
+    class: 'PlaygroundEditorTheme__tokenFunction',
+    'class-name': 'PlaygroundEditorTheme__tokenFunction',
+    comment: 'PlaygroundEditorTheme__tokenComment',
+    constant: 'PlaygroundEditorTheme__tokenProperty',
+    deleted: 'PlaygroundEditorTheme__tokenProperty',
+    doctype: 'PlaygroundEditorTheme__tokenComment',
+    entity: 'PlaygroundEditorTheme__tokenOperator',
+    function: 'PlaygroundEditorTheme__tokenFunction',
+    important: 'PlaygroundEditorTheme__tokenVariable',
+    inserted: 'PlaygroundEditorTheme__tokenSelector',
+    keyword: 'PlaygroundEditorTheme__tokenAttr',
+    namespace: 'PlaygroundEditorTheme__tokenVariable',
+    number: 'PlaygroundEditorTheme__tokenProperty',
+    operator: 'PlaygroundEditorTheme__tokenOperator',
+    prolog: 'PlaygroundEditorTheme__tokenComment',
+    property: 'PlaygroundEditorTheme__tokenProperty',
+    punctuation: 'PlaygroundEditorTheme__tokenPunctuation',
+    regex: 'PlaygroundEditorTheme__tokenVariable',
+    selector: 'PlaygroundEditorTheme__tokenSelector',
+    string: 'PlaygroundEditorTheme__tokenSelector',
+    symbol: 'PlaygroundEditorTheme__tokenProperty',
+    tag: 'PlaygroundEditorTheme__tokenProperty',
+    url: 'PlaygroundEditorTheme__tokenOperator',
+    variable: 'PlaygroundEditorTheme__tokenVariable',
+  },
+  embedBlock: {
+    base: 'PlaygroundEditorTheme__embedBlock',
+    focus: 'PlaygroundEditorTheme__embedBlockFocus',
+  },
+  hashtag: 'PlaygroundEditorTheme__hashtag',
+  heading: {
+    h1: 'PlaygroundEditorTheme__h1',
+    h2: 'PlaygroundEditorTheme__h2',
+    h3: 'PlaygroundEditorTheme__h3',
+    h4: 'PlaygroundEditorTheme__h4',
+    h5: 'PlaygroundEditorTheme__h5',
+    h6: 'PlaygroundEditorTheme__h6',
+  },
+  hr: 'PlaygroundEditorTheme__hr',
+  image: 'editor-image',
+  indent: 'PlaygroundEditorTheme__indent',
+  inlineImage: 'inline-editor-image',
+  layoutContainer: 'PlaygroundEditorTheme__layoutContainer',
+  layoutItem: 'PlaygroundEditorTheme__layoutItem',
+  link: 'PlaygroundEditorTheme__link',
+  list: {
+    checklist: 'PlaygroundEditorTheme__checklist',
+    listitem: 'PlaygroundEditorTheme__listItem',
+    listitemChecked: 'PlaygroundEditorTheme__listItemChecked',
+    listitemUnchecked: 'PlaygroundEditorTheme__listItemUnchecked',
+    nested: {
+      listitem: 'PlaygroundEditorTheme__nestedListItem',
+    },
+    olDepth: [
+      'PlaygroundEditorTheme__ol1',
+      'PlaygroundEditorTheme__ol2',
+      'PlaygroundEditorTheme__ol3',
+      'PlaygroundEditorTheme__ol4',
+      'PlaygroundEditorTheme__ol5',
+    ],
+    ul: 'PlaygroundEditorTheme__ul',
+  },
+  ltr: 'PlaygroundEditorTheme__ltr',
+  mark: 'PlaygroundEditorTheme__mark',
+  markOverlap: 'PlaygroundEditorTheme__markOverlap',
+  paragraph: 'PlaygroundEditorTheme__paragraph',
+  quote: 'PlaygroundEditorTheme__quote',
+  rtl: 'PlaygroundEditorTheme__rtl',
+  table: 'PlaygroundEditorTheme__table',
+  tableAddColumns: 'PlaygroundEditorTheme__tableAddColumns',
+  tableAddRows: 'PlaygroundEditorTheme__tableAddRows',
+  tableCell: 'PlaygroundEditorTheme__tableCell',
+  tableCellActionButton: 'PlaygroundEditorTheme__tableCellActionButton',
+  tableCellActionButtonContainer:
+    'PlaygroundEditorTheme__tableCellActionButtonContainer',
+  tableCellEditing: 'PlaygroundEditorTheme__tableCellEditing',
+  tableCellHeader: 'PlaygroundEditorTheme__tableCellHeader',
+  tableCellPrimarySelected: 'PlaygroundEditorTheme__tableCellPrimarySelected',
+  tableCellResizer: 'PlaygroundEditorTheme__tableCellResizer',
+  tableCellSelected: 'PlaygroundEditorTheme__tableCellSelected',
+  tableCellSortedIndicator: 'PlaygroundEditorTheme__tableCellSortedIndicator',
+  tableResizeRuler: 'PlaygroundEditorTheme__tableCellResizeRuler',
+  tableSelected: 'PlaygroundEditorTheme__tableSelected',
+  tableSelection: 'PlaygroundEditorTheme__tableSelection',
+  text: {
+    bold: 'PlaygroundEditorTheme__textBold',
+    code: 'PlaygroundEditorTheme__textCode',
+    italic: 'PlaygroundEditorTheme__textItalic',
+    strikethrough: 'PlaygroundEditorTheme__textStrikethrough',
+    subscript: 'PlaygroundEditorTheme__textSubscript',
+    superscript: 'PlaygroundEditorTheme__textSuperscript',
+    underline: 'PlaygroundEditorTheme__textUnderline',
+    underlineStrikethrough: 'PlaygroundEditorTheme__textUnderlineStrikethrough',
+  },
+};
+
+export default theme;

packages/gamut/src/LexicalEditor/themes/StickyEditorTheme.scss

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.StickyEditorTheme__paragraph {
+  margin: 0;
+  position: 'relative';
+}

packages/gamut/src/LexicalEditor/themes/StickyEditorTheme.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 {EditorThemeClasses} from 'lexical';
+
+import './StickyEditorTheme.scss';
+
+import baseTheme from './PlaygroundEditorTheme';
+
+const theme: EditorThemeClasses = {
+  ...baseTheme,
+  paragraph: 'StickyEditorTheme__paragraph',
+};
+
+export default theme;

packages/gamut/src/LexicalEditor/ui/Button.scss

@@ -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: 5px;
+  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;
+}

packages/gamut/src/LexicalEditor/ui/Button.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 './Button.scss';
+
+import * as React from 'react';
+import {ReactNode} from 'react';
+
+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(
+        'Button__root',
+        disabled && 'Button__disabled',
+        small && 'Button__small',
+        className,
+      )}
+      onClick={onClick}
+      title={title}
+      aria-label={title}
+      {...(dataTestId && {'data-test-id': dataTestId})}>
+      {children}
+    </button>
+  );
+}

packages/gamut/src/LexicalEditor/ui/ColorPicker.scss

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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;
+}
+
+.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: 4px;
+  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;
+}