@crystallize/design-system 1.4.3 → 1.6.1

package/src/rich-text-editor/themes/CrystallizeRTEditorTheme.ts

@@ -0,0 +1,113 @@
+/**
+ * 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 './CrystallizeRTEditorTheme.css';
+
+const theme: EditorThemeClasses = {
+  blockCursor: 'CrystallizeRTEditorTheme__blockCursor',
+  characterLimit: 'CrystallizeRTEditorTheme__characterLimit',
+  code: 'CrystallizeRTEditorTheme__code',
+  codeHighlight: {
+    atrule: 'CrystallizeRTEditorTheme__tokenAttr',
+    attr: 'CrystallizeRTEditorTheme__tokenAttr',
+    boolean: 'CrystallizeRTEditorTheme__tokenProperty',
+    builtin: 'CrystallizeRTEditorTheme__tokenSelector',
+    cdata: 'CrystallizeRTEditorTheme__tokenComment',
+    char: 'CrystallizeRTEditorTheme__tokenSelector',
+    class: 'CrystallizeRTEditorTheme__tokenFunction',
+    'class-name': 'CrystallizeRTEditorTheme__tokenFunction',
+    comment: 'CrystallizeRTEditorTheme__tokenComment',
+    constant: 'CrystallizeRTEditorTheme__tokenProperty',
+    deleted: 'CrystallizeRTEditorTheme__tokenProperty',
+    doctype: 'CrystallizeRTEditorTheme__tokenComment',
+    entity: 'CrystallizeRTEditorTheme__tokenOperator',
+    function: 'CrystallizeRTEditorTheme__tokenFunction',
+    important: 'CrystallizeRTEditorTheme__tokenVariable',
+    inserted: 'CrystallizeRTEditorTheme__tokenSelector',
+    keyword: 'CrystallizeRTEditorTheme__tokenAttr',
+    namespace: 'CrystallizeRTEditorTheme__tokenVariable',
+    number: 'CrystallizeRTEditorTheme__tokenProperty',
+    operator: 'CrystallizeRTEditorTheme__tokenOperator',
+    prolog: 'CrystallizeRTEditorTheme__tokenComment',
+    property: 'CrystallizeRTEditorTheme__tokenProperty',
+    punctuation: 'CrystallizeRTEditorTheme__tokenPunctuation',
+    regex: 'CrystallizeRTEditorTheme__tokenVariable',
+    selector: 'CrystallizeRTEditorTheme__tokenSelector',
+    string: 'CrystallizeRTEditorTheme__tokenSelector',
+    symbol: 'CrystallizeRTEditorTheme__tokenProperty',
+    tag: 'CrystallizeRTEditorTheme__tokenProperty',
+    url: 'CrystallizeRTEditorTheme__tokenOperator',
+    variable: 'CrystallizeRTEditorTheme__tokenVariable',
+  },
+  embedBlock: {
+    base: 'CrystallizeRTEditorTheme__embedBlock',
+    focus: 'CrystallizeRTEditorTheme__embedBlockFocus',
+  },
+  hashtag: 'CrystallizeRTEditorTheme__hashtag',
+  heading: {
+    h1: 'CrystallizeRTEditorTheme__h1',
+    h2: 'CrystallizeRTEditorTheme__h2',
+    h3: 'CrystallizeRTEditorTheme__h3',
+    h4: 'CrystallizeRTEditorTheme__h4',
+    h5: 'CrystallizeRTEditorTheme__h5',
+    h6: 'CrystallizeRTEditorTheme__h6',
+  },
+  image: 'editor-image',
+  indent: 'CrystallizeRTEditorTheme__indent',
+  link: 'CrystallizeRTEditorTheme__link',
+  list: {
+    listitem: 'CrystallizeRTEditorTheme__listItem',
+    listitemChecked: 'CrystallizeRTEditorTheme__listItemChecked',
+    listitemUnchecked: 'CrystallizeRTEditorTheme__listItemUnchecked',
+    nested: {
+      listitem: 'CrystallizeRTEditorTheme__nestedListItem',
+    },
+    olDepth: [
+      'CrystallizeRTEditorTheme__ol1',
+      'CrystallizeRTEditorTheme__ol2',
+      'CrystallizeRTEditorTheme__ol3',
+      'CrystallizeRTEditorTheme__ol4',
+      'CrystallizeRTEditorTheme__ol5',
+    ],
+    ul: 'CrystallizeRTEditorTheme__ul',
+  },
+  ltr: 'CrystallizeRTEditorTheme__ltr',
+  mark: 'CrystallizeRTEditorTheme__mark',
+  markOverlap: 'CrystallizeRTEditorTheme__markOverlap',
+  paragraph: 'CrystallizeRTEditorTheme__paragraph',
+  quote: 'CrystallizeRTEditorTheme__quote',
+  rtl: 'CrystallizeRTEditorTheme__rtl',
+  table: 'CrystallizeRTEditorTheme__table',
+  tableAddColumns: 'CrystallizeRTEditorTheme__tableAddColumns',
+  tableAddRows: 'CrystallizeRTEditorTheme__tableAddRows',
+  tableCell: 'CrystallizeRTEditorTheme__tableCell',
+  tableCellActionButton: 'CrystallizeRTEditorTheme__tableCellActionButton',
+  tableCellActionButtonContainer: 'CrystallizeRTEditorTheme__tableCellActionButtonContainer',
+  tableCellEditing: 'CrystallizeRTEditorTheme__tableCellEditing',
+  tableCellHeader: 'CrystallizeRTEditorTheme__tableCellHeader',
+  tableCellPrimarySelected: 'CrystallizeRTEditorTheme__tableCellPrimarySelected',
+  tableCellResizer: 'CrystallizeRTEditorTheme__tableCellResizer',
+  tableCellSelected: 'CrystallizeRTEditorTheme__tableCellSelected',
+  tableCellSortedIndicator: 'CrystallizeRTEditorTheme__tableCellSortedIndicator',
+  tableResizeRuler: 'CrystallizeRTEditorTheme__tableCellResizeRuler',
+  tableSelected: 'CrystallizeRTEditorTheme__tableSelected',
+  text: {
+    bold: 'CrystallizeRTEditorTheme__textBold',
+    code: 'CrystallizeRTEditorTheme__textCode',
+    italic: 'CrystallizeRTEditorTheme__textItalic',
+    strikethrough: 'CrystallizeRTEditorTheme__textStrikethrough',
+    subscript: 'CrystallizeRTEditorTheme__textSubscript',
+    superscript: 'CrystallizeRTEditorTheme__textSuperscript',
+    underline: 'CrystallizeRTEditorTheme__textUnderline',
+    underlineStrikethrough: 'CrystallizeRTEditorTheme__textUnderlineStrikethrough',
+  },
+};
+
+export default theme;

package/dist/draggable-block-menu-KKHDNKJA.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" fill="currentColor"><path stroke="currentColor" d="M8.5 10a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm0 7a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm7-10a2 2 0 1 0-2-2 2 2 0 0 0 2 2Zm-7-4a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm7 14a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm0-7a2 2 0 1 0 2 2 2 2 0 0 0-2-2Z"/></svg>

package/src/rich-text-editor/appSettings.ts

@@ -1,28 +0,0 @@
-/**
- * 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.
- *
- */
-
-export type SettingName =
-  | 'disableBeforeInput'
-  | 'measureTypingPerf'
-  | 'isCharLimit'
-  | 'isMaxLength'
-  | 'isCharLimitUtf8'
-  | 'isAutocomplete'
-  | 'showNestedEditorTreeView';
-
-export type Settings = Record<SettingName, boolean>;
-
-export const DEFAULT_SETTINGS: Settings = {
-  disableBeforeInput: false,
-  isAutocomplete: false,
-  isCharLimit: false,
-  isCharLimitUtf8: false,
-  isMaxLength: false,
-  measureTypingPerf: false,
-  showNestedEditorTreeView: false,
-};

package/src/rich-text-editor/context/SettingsContext.tsx

@@ -1,71 +0,0 @@
-/**
- * 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 { SettingName } from '../appSettings';
-
-import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
-
-import { DEFAULT_SETTINGS } from '../appSettings';
-
-type SettingsContextShape = {
-  setOption: (name: SettingName, value: boolean) => void;
-  settings: Record<SettingName, boolean>;
-};
-
-const Context: React.Context<SettingsContextShape> = createContext({
-  setOption: (name: SettingName, value: boolean) => {
-    // eslint-disable-next-line no-console
-    console.log({ name, value });
-    return;
-  },
-  settings: DEFAULT_SETTINGS,
-});
-
-export const SettingsContext = ({ children }: { children: ReactNode }): JSX.Element => {
-  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
-
-  const setOption = useCallback((setting: SettingName, value: boolean) => {
-    setSettings(options => ({
-      ...options,
-      [setting as string]: value,
-    }));
-    if (DEFAULT_SETTINGS[setting] === value) {
-      setURLParam(setting, null);
-    } else {
-      setURLParam(setting, value);
-    }
-  }, []);
-
-  const contextValue = useMemo(() => {
-    return { setOption, settings };
-  }, [setOption, settings]);
-
-  return <Context.Provider value={contextValue}>{children}</Context.Provider>;
-};
-
-export const useSettings = (): SettingsContextShape => {
-  return useContext(Context);
-};
-
-function setURLParam(param: SettingName, value: null | boolean) {
-  const url = new URL(window.location.href);
-  const params = new URLSearchParams(url.search);
-  if (value !== null) {
-    if (params.has(param)) {
-      params.set(param, String(value));
-    } else {
-      params.append(param, String(value));
-    }
-  } else {
-    if (params.has(param)) {
-      params.delete(param);
-    }
-  }
-  url.search = params.toString();
-  window.history.pushState(null, '', url.toString());
-}

package/src/rich-text-editor/context/SharedAutocompleteContext.tsx

@@ -1,60 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/**
- * 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 { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react';
-
-type Suggestion = null | string;
-type CallbackFn = (newSuggestion: Suggestion) => void;
-type SubscribeFn = (callbackFn: CallbackFn) => () => void;
-type PublishFn = (newSuggestion: Suggestion) => void;
-type ContextShape = [SubscribeFn, PublishFn];
-type HookShape = [suggestion: Suggestion, setSuggestion: PublishFn];
-
-const Context: React.Context<ContextShape> = createContext([
-  _cb => () => {
-    return;
-  },
-  (_newSuggestion: Suggestion) => {
-    return;
-  },
-]);
-
-export const SharedAutocompleteContext = ({ children }: { children: ReactNode }): JSX.Element => {
-  const context: ContextShape = useMemo(() => {
-    let suggestion: Suggestion | null = null;
-    const listeners: Set<CallbackFn> = new Set();
-    return [
-      (cb: (newSuggestion: Suggestion) => void) => {
-        cb(suggestion);
-        listeners.add(cb);
-        return () => {
-          listeners.delete(cb);
-        };
-      },
-      (newSuggestion: Suggestion) => {
-        suggestion = newSuggestion;
-        for (const listener of listeners) {
-          listener(newSuggestion);
-        }
-      },
-    ];
-  }, []);
-  return <Context.Provider value={context}>{children}</Context.Provider>;
-};
-
-export const useSharedAutocompleteContext = (): HookShape => {
-  const [subscribe, publish]: ContextShape = useContext(Context);
-  const [suggestion, setSuggestion] = useState<Suggestion>(null);
-  useEffect(() => {
-    return subscribe((newSuggestion: Suggestion) => {
-      setSuggestion(newSuggestion);
-    });
-  }, [subscribe]);
-  return [suggestion, publish];
-};

package/src/rich-text-editor/nodes/AutocompleteNode.tsx

@@ -1,96 +0,0 @@
-/**
- * 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 { Spread } from 'lexical';
-
-import { DecoratorNode, EditorConfig, NodeKey, SerializedLexicalNode } from 'lexical';
-import * as React from 'react';
-
-import { useSharedAutocompleteContext } from '../context/SharedAutocompleteContext';
-import { uuid as UUID } from '../plugins/AutocompletePlugin';
-
-declare global {
-  interface Navigator {
-    userAgentData?: {
-      mobile: boolean;
-    };
-  }
-}
-
-export type SerializedAutocompleteNode = Spread<
-  {
-    type: 'autocomplete';
-    version: 1;
-    uuid: string;
-  },
-  SerializedLexicalNode
->;
-
-export class AutocompleteNode extends DecoratorNode<JSX.Element | null> {
-  // TODO add comment
-  __uuid: string;
-
-  static clone(node: AutocompleteNode): AutocompleteNode {
-    return new AutocompleteNode(node.__key);
-  }
-
-  static getType(): 'autocomplete' {
-    return 'autocomplete';
-  }
-
-  static importJSON(serializedNode: SerializedAutocompleteNode): AutocompleteNode {
-    const node = $createAutocompleteNode(serializedNode.uuid);
-    return node;
-  }
-
-  exportJSON(): SerializedAutocompleteNode {
-    return {
-      ...super.exportJSON(),
-      type: 'autocomplete',
-      uuid: this.__uuid,
-      version: 1,
-    };
-  }
-
-  constructor(uuid: string, key?: NodeKey) {
-    super(key);
-    this.__uuid = uuid;
-  }
-
-  updateDOM(prevNode: unknown, dom: HTMLElement, config: EditorConfig): boolean {
-    return false;
-  }
-
-  createDOM(config: EditorConfig): HTMLElement {
-    return document.createElement('span');
-  }
-
-  decorate(): JSX.Element | null {
-    if (this.__uuid !== UUID) {
-      return null;
-    }
-    return <AutocompleteComponent />;
-  }
-}
-
-export function $createAutocompleteNode(uuid: string): AutocompleteNode {
-  return new AutocompleteNode(uuid);
-}
-
-function AutocompleteComponent(): JSX.Element {
-  const [suggestion] = useSharedAutocompleteContext();
-  const userAgentData = window.navigator.userAgentData;
-  const isMobile =
-    userAgentData !== undefined ? userAgentData.mobile : window.innerWidth <= 800 && window.innerHeight <= 600;
-  // TODO Move to theme
-  return (
-    <span style={{ color: '#ccc' }} spellCheck="false">
-      {suggestion} {isMobile ? '(SWIPE \u2B95)' : '(TAB)'}
-    </span>
-  );
-}