onchain-lexical-context 0.0.1

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "onchain-lexical-context",
+  "license": "MIT",
+  "version": "0.0.1",
+  "dependencies": {
+    "@lexical/react": "^0.30.0",
+    "@lexical/yjs": "^0.30.0",
+    "lexical": "0.30.0",
+    "onchain-lexical-ui": "^0.0.1",
+    "onchain-utility": "^0.0.1",
+    "y-websocket": "^1.5.4"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./src/index.ts",
+        "default": "./dist/OnchainLexicalContext.mjs"
+      },
+      "require": {
+        "types": "./src/index.ts",
+        "default": "./dist/OnchainLexicalContext.js"
+      }
+    },
+    "./collaboration": {
+      "import": {
+        "types": "./src/Collaboration.ts",
+        "default": "./dist/Collaboration.mjs"
+      },
+      "require": {
+        "types": "./src/Collaboration.ts",
+        "default": "./dist/Toolbar.js"
+      }
+    },
+    "./flashMessage": {
+      "import": {
+        "types": "./src/FlashMessage.tsx",
+        "default": "./dist/FlashMessage.mjs"
+      },
+      "require": {
+        "types": "./src/FlashMessage.tsx",
+        "default": "./dist/FlashMessage.js"
+      }
+    },
+    "./instanceConfig": {
+      "import": {
+        "types": "./src/InstanceConfig.tsx",
+        "default": "./dist/InstanceConfig.mjs"
+      },
+      "require": {
+        "types": "./src/InstanceConfig.tsx",
+        "default": "./dist/InstanceConfig.js"
+      }
+    },
+    "./settings": {
+      "import": {
+        "types": "./src/Settings.tsx",
+        "default": "./dist/Settings.mjs"
+      },
+      "require": {
+        "types": "./src/Settings.tsx",
+        "default": "./dist/Settings.js"
+      }
+    },
+    "./sharedHistory": {
+      "import": {
+        "types": "./src/SharedHistory.tsx",
+        "default": "./dist/SharedHistory.mjs"
+      },
+      "require": {
+        "types": "./src/SharedHistory.tsx",
+        "default": "./dist/SharedHistory.js"
+      }
+    },
+    "./toolBar": {
+      "import": {
+        "types": "./src/Toolbar.tsx",
+        "default": "./dist/Toolbar.mjs"
+      },
+      "require": {
+        "types": "./src/Toolbar.tsx",
+        "default": "./dist/Toolbar.js"
+      }
+    }
+  }
+}

package/src/Collaboration.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 {Provider} from '@lexical/yjs';
+import {WebsocketProvider} from 'y-websocket';
+import {Doc} from 'yjs';
+
+const url = new URL(window.location.href);
+const params = new URLSearchParams(url.search);
+const WEBSOCKET_ENDPOINT =
+  params.get('collabEndpoint') || 'ws://localhost:1234';
+const WEBSOCKET_SLUG = 'playground';
+const WEBSOCKET_ID = params.get('collabId') || '0';
+
+// parent dom -> child doc
+export function createWebsocketProvider(
+  id: string,
+  yjsDocMap: Map<string, Doc>,
+): Provider {
+  let doc = yjsDocMap.get(id);
+
+  if (doc === undefined) {
+    doc = new Doc();
+    yjsDocMap.set(id, doc);
+  } else {
+    doc.load();
+  }
+
+  // @ts-expect-error
+  return new WebsocketProvider(
+    WEBSOCKET_ENDPOINT,
+    WEBSOCKET_SLUG + '/' + WEBSOCKET_ID + '/' + id,
+    doc,
+    {
+      connect: false,
+    },
+  );
+}

package/src/FlashMessage.tsx

@@ -0,0 +1,69 @@
+/**
+ * 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 FlashMessage from 'onchain-lexical-ui/FlashMessage';
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+export type ShowFlashMessage = (
+  message?: React.ReactNode,
+  duration?: number,
+) => void;
+
+interface FlashMessageProps {
+  message?: React.ReactNode;
+  duration?: number;
+}
+
+const Context = createContext<ShowFlashMessage | undefined>(undefined);
+const INITIAL_STATE: FlashMessageProps = {};
+const DEFAULT_DURATION = 1000;
+
+export const FlashMessageContext = ({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element => {
+  const [props, setProps] = useState(INITIAL_STATE);
+  const showFlashMessage = useCallback<ShowFlashMessage>(
+    (message, duration) =>
+      setProps(message ? {duration, message} : INITIAL_STATE),
+    [],
+  );
+  useEffect(() => {
+    if (props.message) {
+      const timeoutId = setTimeout(
+        () => setProps(INITIAL_STATE),
+        props.duration ?? DEFAULT_DURATION,
+      );
+      return () => clearTimeout(timeoutId);
+    }
+  }, [props]);
+  return (
+    <Context.Provider value={showFlashMessage}>
+      {children}
+      {props.message && <FlashMessage>{props.message}</FlashMessage>}
+    </Context.Provider>
+  );
+};
+
+export const useFlashMessageContext = (): ShowFlashMessage => {
+  const ctx = useContext(Context);
+  if (!ctx) {
+    throw new Error('Missing FlashMessageContext');
+  }
+  return ctx;
+};

package/src/InstanceConfig.tsx

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ *
+ */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type {BuiltInInstanceConfig, InstanceConfig} from './types';
+import type {JSX} from 'react';
+
+import * as React from 'react';
+import {createContext, ReactNode, useContext, useMemo} from 'react';
+
+type InstanceConfigContext = InstanceConfig & BuiltInInstanceConfig;
+
+const Context: React.Context<InstanceConfigContext> = createContext({} as any);
+
+export const InstanceConfigContext = ({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: InstanceConfig;
+}): JSX.Element => {
+  const [selectedInstance, setSelectedInstance] = React.useState<
+    BuiltInInstanceConfig['selectedInstance']
+  >([]);
+  const contextValue = useMemo(() => {
+    return {...value, selectedInstance, setSelectedInstance};
+  }, [value, selectedInstance]);
+
+  return <Context.Provider value={contextValue}>{children}</Context.Provider>;
+};
+
+export const useInstanceConfig = (): InstanceConfigContext => {
+  return useContext(Context);
+};

package/src/Settings.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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 type {ExtraSettings} from './types';
+import type {JSX} from 'react';
+
+import * as React from 'react';
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+import {DEFAULT_SETTINGS, INITIAL_SETTINGS} from './appSettings';
+
+type SettingsContextShape = {
+  setOption: (name: SettingName, value: boolean) => void;
+  settings: Record<SettingName, boolean>;
+  extra: ExtraSettings;
+};
+
+const Context: React.Context<SettingsContextShape> = createContext({
+  extra: {},
+  setOption: (name: SettingName, value: boolean) => {
+    return;
+  },
+  settings: INITIAL_SETTINGS,
+});
+
+export const SettingsContext = ({
+  children,
+  extra,
+}: {
+  children: ReactNode;
+  extra: ExtraSettings;
+}): JSX.Element => {
+  const [settings, setSettings] = useState(INITIAL_SETTINGS);
+
+  const setOption = useCallback((setting: SettingName, value: boolean) => {
+    setSettings((options) => ({
+      ...options,
+      [setting]: value,
+    }));
+    setURLParam(setting, value);
+  }, []);
+
+  const contextValue = useMemo(() => {
+    return {extra, setOption, settings};
+  }, [setOption, settings, extra]);
+
+  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 !== DEFAULT_SETTINGS[param]) {
+    params.set(param, String(value));
+  } else {
+    params.delete(param);
+  }
+  url.search = params.toString();
+  window.history.pushState(null, '', url.toString());
+}

package/src/SharedHistory.tsx

@@ -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.
+ *
+ */
+
+import type {HistoryState} from '@lexical/react/LexicalHistoryPlugin';
+import type {JSX} from 'react';
+
+import {createEmptyHistoryState} from '@lexical/react/LexicalHistoryPlugin';
+import * as React from 'react';
+import {createContext, ReactNode, useContext, useMemo} from 'react';
+
+type ContextShape = {
+  historyState?: HistoryState;
+};
+
+const Context: React.Context<ContextShape> = createContext({});
+
+export const SharedHistoryContext = ({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element => {
+  const historyContext = useMemo(
+    () => ({historyState: createEmptyHistoryState()}),
+    [],
+  );
+  return <Context.Provider value={historyContext}>{children}</Context.Provider>;
+};
+
+export const useSharedHistoryContext = (): ContextShape => {
+  return useContext(Context);
+};

package/src/Toolbar.tsx

@@ -0,0 +1,136 @@
+/**
+ * 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 {ElementFormatType} from 'lexical';
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+export const MIN_ALLOWED_FONT_SIZE = 8;
+export const MAX_ALLOWED_FONT_SIZE = 72;
+export const DEFAULT_FONT_SIZE = 15;
+
+const rootTypeToRootName = {
+  root: 'Root',
+  table: 'Table',
+};
+
+export const blockTypeToBlockName = {
+  Paragraph: '正文',
+  Quote: '引用',
+  bullet: '列表',
+  check: '待办列表',
+  code: '代码块',
+  h1: '标题 1',
+  h2: '标题 2',
+  h3: '标题 3',
+  h4: '标题 4',
+  h5: '标题 5',
+  h6: '标题 6',
+  number: '列表',
+  paragraph: '正文',
+  quote: '引用',
+};
+
+//disable eslint sorting rule for quick reference to toolbar state
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+const INITIAL_TOOLBAR_STATE = {
+  bgColor: '#fff',
+  blockType: 'Paragraph' as keyof typeof blockTypeToBlockName,
+  canRedo: false,
+  canUndo: false,
+  codeLanguage: '',
+  elementFormat: 'left' as ElementFormatType,
+  fontColor: '#000',
+  fontFamily: 'Arial',
+  // Current font size in px
+  fontSize: `${DEFAULT_FONT_SIZE}px`,
+  // Font size input value - for controlled input
+  fontSizeInputValue: `${DEFAULT_FONT_SIZE}`,
+  isBold: false,
+  isCode: false,
+  isHighlight: false,
+  isImageCaption: false,
+  isItalic: false,
+  isLink: false,
+  isRTL: false,
+  isStrikethrough: false,
+  isSubscript: false,
+  isSuperscript: false,
+  isUnderline: false,
+  isLowercase: false,
+  isUppercase: false,
+  isCapitalize: false,
+  rootType: 'root' as keyof typeof rootTypeToRootName,
+};
+
+type ToolbarState = typeof INITIAL_TOOLBAR_STATE;
+
+// Utility type to get keys and infer value types
+type ToolbarStateKey = keyof ToolbarState;
+type ToolbarStateValue<Key extends ToolbarStateKey> = ToolbarState[Key];
+
+type ContextShape = {
+  toolbarState: ToolbarState;
+  updateToolbarState<Key extends ToolbarStateKey>(
+    key: Key,
+    value: ToolbarStateValue<Key>,
+  ): void;
+};
+
+const Context = createContext<ContextShape | undefined>(undefined);
+
+export const ToolbarContext = ({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element => {
+  const [toolbarState, setToolbarState] = useState(INITIAL_TOOLBAR_STATE);
+  const selectionFontSize = toolbarState.fontSize;
+
+  const updateToolbarState = useCallback(
+    <Key extends ToolbarStateKey>(key: Key, value: ToolbarStateValue<Key>) => {
+      setToolbarState((prev) => ({
+        ...prev,
+        [key]: value,
+      }));
+    },
+    [],
+  );
+
+  useEffect(() => {
+    updateToolbarState('fontSizeInputValue', selectionFontSize.slice(0, -2));
+  }, [selectionFontSize, updateToolbarState]);
+
+  const contextValue = useMemo(() => {
+    return {
+      toolbarState,
+      updateToolbarState,
+    };
+  }, [toolbarState, updateToolbarState]);
+
+  return <Context.Provider value={contextValue}>{children}</Context.Provider>;
+};
+
+export const useToolbarState = () => {
+  const context = useContext(Context);
+
+  if (context === undefined) {
+    throw new Error('useToolbarState must be used within a ToolbarProvider');
+  }
+
+  return context;
+};

package/src/Upload.ts

@@ -0,0 +1,105 @@
+/**
+ * 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 {InternalSerializedNode} from 'lexical';
+
+import {base64ToMimeType, getBase64Regular} from 'onchain-utility/base64';
+import {asyncDfs} from 'onchain-utility/traversal';
+
+import {InstanceConfig} from './types';
+
+type Base64Src = string;
+type NodeKey = string;
+
+const uploadMap = new Map<
+  Base64Src,
+  {
+    upload(): Promise<string[]>;
+    result: Promise<string[]>;
+  }
+>();
+const base64SrcMap = new Map<NodeKey, Base64Src>();
+
+export function deleteUpload(nodeKey: string) {
+  return base64SrcMap.delete(nodeKey);
+}
+
+export function getUpload(nodeKey: string) {
+  const base64Src = base64SrcMap.get(nodeKey);
+  if (base64Src) {
+    return uploadMap.get(base64Src);
+  } else {
+    return undefined;
+  }
+}
+
+export function hasUpload(nodeKey: string) {
+  const base64Src = base64SrcMap.get(nodeKey);
+  if (base64Src) {
+    return uploadMap.has(base64Src);
+  } else {
+    return false;
+  }
+}
+
+export function upload({
+  nodeKey,
+  src,
+  hasError,
+  uploadFiles,
+}: {
+  nodeKey: string;
+  src: string;
+  hasError?: boolean;
+  uploadFiles: InstanceConfig['uploadFiles'];
+}) {
+  const {type, suffix} = base64ToMimeType(src);
+  if (!hasError && type && suffix) {
+    const _upload = () => {
+      const result = uploadFiles([{suffix, text: src, type}]);
+      base64SrcMap.set(nodeKey, src);
+      uploadMap.set(src, {
+        result,
+        upload: _upload,
+      });
+      return result;
+    };
+    if (!uploadMap.has(src)) {
+      _upload();
+    } else {
+      base64SrcMap.set(nodeKey, src);
+    }
+  }
+}
+
+export async function markdownBase64StringToUpLoadUrl(markdown: string) {
+  const base64Regular = getBase64Regular();
+  const base64List = Array.from(markdown.match(base64Regular) || []);
+  for (const base64 of base64List) {
+    if (uploadMap.has(base64)) {
+      markdown = markdown.replace(
+        base64,
+        (await uploadMap.get(base64)!.result)[0],
+      );
+    }
+  }
+  return markdown;
+}
+
+export async function jsonBase64StringToUpLoadUrl(
+  node: InternalSerializedNode,
+) {
+  await asyncDfs([node], async (node) => {
+    const src = node.src;
+    if (src && uploadMap.has(src)) {
+      node.src = (await uploadMap.get(src)!.result)[0];
+    }
+    return node.children || [];
+  });
+  return node;
+}

package/src/appSettings.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 const DEFAULT_SETTINGS = {
+  disableBeforeInput: false,
+  emptyEditor: VITE_IS_DEVELOPMENT,
+  hasLinkAttributes: false,
+  isAutocomplete: false,
+  isCharLimit: false,
+  isCharLimitUtf8: false,
+  isCollab: false,
+  isMaxLength: false,
+  isRichText: true,
+  listStrictIndent: false,
+  measureTypingPerf: false,
+  selectionAlwaysOnDisplay: false,
+  shouldAllowHighlightingWithBrackets: false,
+  shouldPreserveNewLinesInMarkdown: false,
+  shouldUseLexicalContextMenu: false,
+  showNestedEditorTreeView: false,
+  showTableOfContents: false,
+  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;

package/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 * from './appSettings';
+export type * from './types';
+export * from './Upload';

package/src/types.d.ts

@@ -0,0 +1,21 @@
+export interface ExtraSettings {
+  iconScriptUrl?: string;
+  isShowActions?: boolean;
+  showTreeView?: boolean;
+}
+
+export interface BuiltInInstanceConfig {
+  selectedInstance: {
+    number: string;
+    nodeKey: string;
+  }[];
+  setSelectedInstance(params: InstanceConfig['selectedInstance']): void;
+}
+export interface InstanceConfig {
+  preview?: boolean;
+  getInstanceIcon: (objectApicode: string) => string;
+  uploadFiles(
+    params: {type: string; text: string; suffix: string}[],
+  ): Promise<string[]>;
+  generateNumber(nodeKey?: string): Promise<string>;
+}