5htp-core 0.4.8-3 → 0.4.9-1

package/src/client/components/inputv3/Rte/appSettings.ts

@@ -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.
+ *
+ */
+
+export const DEFAULT_SETTINGS = {
+  disableBeforeInput: false,
+  emptyEditor: false,
+  hasLinkAttributes: false,
+  isAutocomplete: false,
+  isCharLimit: false,
+  isCharLimitUtf8: false,
+  isCollab: false,
+  isMaxLength: false,
+  isRichText: true,
+  measureTypingPerf: false,
+  shouldPreserveNewLinesInMarkdown: false,
+  shouldUseLexicalContextMenu: false,
+  showNestedEditorTreeView: false,
+  showTableOfContents: false,
+  showTreeView: true,
+  tableCellBackgroundColor: true,
+  tableCellMerge: 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/client/components/inputv3/Rte/context/FlashMessageContext.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+import FlashMessage from '../ui/FlashMessage';
+
+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/client/components/inputv3/Rte/context/SettingsContext.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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 * 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>;
+};
+
+const Context: React.Context<SettingsContextShape> = createContext({
+  setOption: (name: SettingName, value: boolean) => {
+    return;
+  },
+  settings: INITIAL_SETTINGS,
+});
+
+export const SettingsContext = ({
+  children,
+}: {
+  children: ReactNode;
+}): 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 {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 !== DEFAULT_SETTINGS[param]) {
+    params.set(param, String(value));
+  } else {
+    params.delete(param);
+  }
+  url.search = params.toString();
+  window.history.pushState(null, '', url.toString());
+}

package/src/client/components/inputv3/Rte/context/SharedAutocompleteContext.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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 * as React from 'react';
+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/client/components/inputv3/Rte/context/SharedHistoryContext.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 {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/client/components/inputv3/Rte/currentEditor.ts

@@ -1,6 +1,7 @@
 import { createEditor, LexicalEditor } from 'lexical';
 import { $generateHtmlFromNodes } from '@lexical/html';
 import editorNodes from '@common/data/rte/nodes';
+import ExampleTheme from '@client/components/inputv3/Rte/themes/PlaygroundEditorTheme';
 
 class RichEditorUtils {
 
@@ -16,7 +17,8 @@ class RichEditorUtils {
         if (!this.virtualEditor) {
             // Create a headless Lexical editor instance
             this.virtualEditor = createEditor({
-                nodes: editorNodes
+                nodes: editorNodes,
+                theme: ExampleTheme,
             });
         }
 

package/src/client/components/inputv3/Rte/hooks/useFlashMessage.tsx

@@ -0,0 +1,16 @@
+/**
+ * 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 ShowFlashMessage,
+  useFlashMessageContext,
+} from '../context/FlashMessageContext';
+
+export default function useFlashMessage(): ShowFlashMessage {
+  return useFlashMessageContext();
+}

package/src/client/components/inputv3/Rte/hooks/useReport.ts

@@ -0,0 +1,67 @@
+/**
+ * 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 {useCallback, useEffect, useRef} from 'react';
+
+const getElement = (): HTMLElement => {
+  let element = document.getElementById('report-container');
+
+  if (element === null) {
+    element = document.createElement('div');
+    element.id = 'report-container';
+    element.style.position = 'fixed';
+    element.style.top = '50%';
+    element.style.left = '50%';
+    element.style.fontSize = '32px';
+    element.style.transform = 'translate(-50%, -50px)';
+    element.style.padding = '20px';
+    element.style.background = 'rgba(240, 240, 240, 0.4)';
+    element.style.borderRadius = '20px';
+
+    if (document.body) {
+      document.body.appendChild(element);
+    }
+  }
+
+  return element;
+};
+
+export default function useReport(): (
+  arg0: string,
+) => ReturnType<typeof setTimeout> {
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cleanup = useCallback(() => {
+    if (timer.current !== null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+
+    if (document.body) {
+      document.body.removeChild(getElement());
+    }
+  }, []);
+
+  useEffect(() => {
+    return cleanup;
+  }, [cleanup]);
+
+  return useCallback(
+    (content) => {
+      // eslint-disable-next-line no-console
+      console.log(content);
+      const element = getElement();
+      if (timer.current !== null) {
+        clearTimeout(timer.current);
+      }
+      element.innerHTML = content;
+      timer.current = setTimeout(cleanup, 1000);
+      return timer.current;
+    },
+    [cleanup],
+  );
+}

package/src/client/components/inputv3/Rte/images/emoji/LICENSE.md

@@ -0,0 +1,5 @@
+OpenMoji
+https://openmoji.org
+
+Licensed under Attribution-ShareAlike 4.0 International
+https://creativecommons.org/licenses/by-sa/4.0/

package/src/client/components/inputv3/Rte/images/icons/draggable-block-menu.svg

@@ -0,0 +1 @@
+<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/client/components/inputv3/Rte/images/icons/prettier-error.svg

@@ -0,0 +1 @@
+<svg style="color:red" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.571 23.429A.571.571 0 0 1 8 24H2.286a.571.571 0 0 1 0-1.143H8c.316 0 .571.256.571.572zM8 20.57H6.857a.571.571 0 0 0 0 1.143H8a.571.571 0 0 0 0-1.143zm-5.714 1.143H4.57a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zM8 18.286H2.286a.571.571 0 0 0 0 1.143H8a.571.571 0 0 0 0-1.143zM16 16H5.714a.571.571 0 0 0 0 1.143H16A.571.571 0 0 0 16 16zM2.286 17.143h1.143a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm17.143-3.429H16a.571.571 0 0 0 0 1.143h3.429a.571.571 0 0 0 0-1.143zM9.143 14.857h4.571a.571.571 0 0 0 0-1.143H9.143a.571.571 0 0 0 0 1.143zm-6.857 0h4.571a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zM20.57 11.43h-9.14a.571.571 0 0 0 0 1.142h9.142a.571.571 0 0 0 0-1.142zM9.714 12a.571.571 0 0 0-.571-.571H5.714a.571.571 0 0 0 0 1.142h3.429A.571.571 0 0 0 9.714 12zm-7.428.571h1.143a.571.571 0 0 0 0-1.142H2.286a.571.571 0 0 0 0 1.142zm19.428-3.428H16a.571.571 0 0 0 0 1.143h5.714a.571.571 0 0 0 0-1.143zM2.286 10.286H8a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm13.143-2.857A.57.57 0 0 0 16 8h5.714a.571.571 0 0 0 0-1.143H16a.571.571 0 0 0-.571.572zm-8.572-.572a.571.571 0 0 0 0 1.143H8a.571.571 0 0 0 0-1.143H6.857zM2.286 8H4.57a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm16.571-2.857c0 .315.256.571.572.571h1.142a.571.571 0 0 0 0-1.143H19.43a.571.571 0 0 0-.572.572zm-1.143 0a.571.571 0 0 0-.571-.572H12.57a.571.571 0 0 0 0 1.143h4.572a.571.571 0 0 0 .571-.571zm-15.428.571h8a.571.571 0 0 0 0-1.143h-8a.571.571 0 0 0 0 1.143zm5.143-2.857c0 .316.255.572.571.572h11.429a.571.571 0 0 0 0-1.143H8a.571.571 0 0 0-.571.571zm-5.143.572h3.428a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm0-2.286H16A.571.571 0 0 0 16 0H2.286a.571.571 0 0 0 0 1.143z" fill="red"/></svg>

package/src/client/components/inputv3/Rte/images/icons/prettier.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.571 23.429A.571.571 0 0 1 8 24H2.286a.571.571 0 0 1 0-1.143H8c.316 0 .571.256.571.572zM8 20.57H6.857a.571.571 0 0 0 0 1.143H8a.571.571 0 0 0 0-1.143zm-5.714 1.143H4.57a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zM8 18.286H2.286a.571.571 0 0 0 0 1.143H8a.571.571 0 0 0 0-1.143zM16 16H5.714a.571.571 0 0 0 0 1.143H16A.571.571 0 0 0 16 16zM2.286 17.143h1.143a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm17.143-3.429H16a.571.571 0 0 0 0 1.143h3.429a.571.571 0 0 0 0-1.143zM9.143 14.857h4.571a.571.571 0 0 0 0-1.143H9.143a.571.571 0 0 0 0 1.143zm-6.857 0h4.571a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zM20.57 11.43h-9.14a.571.571 0 0 0 0 1.142h9.142a.571.571 0 0 0 0-1.142zM9.714 12a.571.571 0 0 0-.571-.571H5.714a.571.571 0 0 0 0 1.142h3.429A.571.571 0 0 0 9.714 12zm-7.428.571h1.143a.571.571 0 0 0 0-1.142H2.286a.571.571 0 0 0 0 1.142zm19.428-3.428H16a.571.571 0 0 0 0 1.143h5.714a.571.571 0 0 0 0-1.143zM2.286 10.286H8a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm13.143-2.857A.57.57 0 0 0 16 8h5.714a.571.571 0 0 0 0-1.143H16a.571.571 0 0 0-.571.572zm-8.572-.572a.571.571 0 0 0 0 1.143H8a.571.571 0 0 0 0-1.143H6.857zM2.286 8H4.57a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm16.571-2.857c0 .315.256.571.572.571h1.142a.571.571 0 0 0 0-1.143H19.43a.571.571 0 0 0-.572.572zm-1.143 0a.571.571 0 0 0-.571-.572H12.57a.571.571 0 0 0 0 1.143h4.572a.571.571 0 0 0 .571-.571zm-15.428.571h8a.571.571 0 0 0 0-1.143h-8a.571.571 0 0 0 0 1.143zm5.143-2.857c0 .316.255.572.571.572h11.429a.571.571 0 0 0 0-1.143H8a.571.571 0 0 0-.571.571zm-5.143.572h3.428a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm0-2.286H16A.571.571 0 0 0 16 0H2.286a.571.571 0 0 0 0 1.143z"/></svg>

package/src/client/components/inputv3/Rte/images/image/LICENSE.md

@@ -0,0 +1,5 @@
+yellow-flower.jpg by Andrew Haimerl
+https://unsplash.com/photos/oxQHb8Yqt14
+
+Licensed under Unsplash License
+https://unsplash.com/license

package/src/client/components/inputv3/Rte/images/image-broken.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22 3H2v18h20v-2h-2v-2h2v-2h-2v-2h2v-2h-2V9h2V7h-2V5h2V3zm-2 4v2h-2v2h2v2h-2v2h2v2h-2v2H4V5h14v2h2zm-6 2h-2v2h-2v2H8v2H6v2h2v-2h2v-2h2v-2h2v2h2v-2h-2V9zM6 7h2v2H6V7z" fill="#000000"/>
+</svg>

package/src/client/components/inputv3/Rte/images/logo.svg

@@ -0,0 +1 @@
+<svg width="597" height="131" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M189.512 115.984h-40.32v-13.776h11.256V14.176H148.52V.4h29.736v101.808h11.256v13.776ZM265.334 92.968c-.672 6.608-3.92 12.376-9.744 17.304-5.824 4.928-13.832 7.392-24.024 7.392-10.976 0-19.992-3.192-27.048-9.576-7.056-6.496-10.584-16.016-10.584-28.56 0-11.536 3.192-21.168 9.576-28.896 6.496-7.728 15.512-11.592 27.048-11.592 10.416 0 18.648 3.136 24.696 9.408 6.16 6.16 9.296 14 9.408 23.52 0 3.136-.336 6.496-1.008 10.08H212.75c1.008 14.112 7.728 21.168 20.16 21.168 5.824 0 9.968-1.4 12.432-4.2 2.576-2.8 4.256-5.768 5.04-8.904l14.952 2.856ZM246.182 70.96c.448-4.48-.616-8.68-3.192-12.6-2.464-4.032-6.664-6.048-12.6-6.048-5.376 0-9.464 1.792-12.264 5.376-2.8 3.584-4.536 8.008-5.208 13.272h33.264ZM352.448 115.984h-36.12v-13.776h7.224l-13.608-15.456-13.44 15.456h6.384v13.776H269.12v-13.776h10.416l21.84-23.52-23.184-24.36h-8.568V40.552h36.792v13.776h-7.056l12.6 15.12 13.44-15.12h-6.552V40.552H350.6v13.776h-7.896l-21.672 22.68 23.352 25.2h8.064v13.776ZM397.526 115.984h-40.32v-13.776h11.256V54.496h-11.928V40.552h29.736v61.656h11.256v13.776ZM472.117 88.936c-.784 6.72-3.752 13.216-8.904 19.488-5.152 6.16-13.44 9.24-24.864 9.24-10.752 0-19.544-3.248-26.376-9.744-6.72-6.496-10.08-15.96-10.08-28.392 0-12.208 3.472-22.008 10.416-29.4 7.056-7.392 16.24-11.088 27.552-11.088 4.48 0 8.96.56 13.44 1.68 4.48 1.12 8.904 2.968 13.272 5.544l3.024 21.168-14.448 1.512-2.52-12.432a29.58 29.58 0 0 0-13.104-3.024c-12.544 0-18.816 8.4-18.816 25.2 0 16.352 6.44 24.528 19.32 24.528 9.408 0 15.064-5.712 16.968-17.136l15.12 2.856ZM484.683 46.096c5.6-2.688 10.584-4.536 14.952-5.544s9.408-1.512 15.12-1.512c8.4 0 15.288 2.128 20.664 6.384 5.488 4.256 8.232 10.64 8.232 19.152v33.936c0 4.48 1.848 6.72 5.544 6.72 1.008 0 2.296-.224 3.864-.672l.168 9.912c-3.696 2.128-7.728 3.192-12.096 3.192-9.52 0-14.672-4.984-15.456-14.952v-.336c-2.24 3.92-5.432 7.448-9.576 10.584-4.032 3.136-9.072 4.704-15.12 4.704-5.264 0-10.472-1.568-15.624-4.704-5.04-3.248-7.56-8.848-7.56-16.8 0-9.296 3.696-15.4 11.088-18.312 7.392-3.024 15.4-4.536 24.024-4.536 2.128 0 4.312.056 6.552.168 2.24.112 4.312.28 6.216.504v-4.2c0-4.48-.784-8.512-2.352-12.096-1.568-3.584-5.488-5.376-11.76-5.376-2.352 0-4.592.168-6.72.504-2.016.336-3.976 1.008-5.88 2.016l-3.024 11.592-14.448-1.512 3.192-18.816Zm40.992 39.984v-2.688a917.892 917.892 0 0 0-5.88-.672 56.265 56.265 0 0 0-6.216-.336c-4.48 0-8.512.784-12.096 2.352-3.472 1.568-5.208 4.704-5.208 9.408 0 6.832 3.64 10.248 10.92 10.248 4.256 0 8.288-1.512 12.096-4.536 3.808-3.136 5.936-7.728 6.384-13.776ZM596.079 115.984h-40.32v-13.776h11.256V14.176h-11.928V.4h29.736v101.808h11.256v13.776Z" fill="#050505"/><path fill="#76B6FF" d="M367 2h19v20h-19zM20 54h22v10H20V54Z"/><path d="M47 54h22v10H47V54Z" fill="#050505"/><path d="M74 54h9v10h-9V54ZM20 70h36v10H20V70ZM61 70h22v10H61V70Z" fill="#76B6FF"/><path d="M20 86h22v10H20V86Z" fill="#050505"/><path d="M47 86h22v10H47V86Z" fill="#76B6FF"/><path d="M74 86h9v10h-9V86Z" fill="#050505"/><path d="M0 34h83v10H10v62h73v10H0V34ZM118 34h-15v10h5v62h-5v10h15V34Z" fill="#050505"/><path d="M78 29V19h31v10H98v92h11v10H78v-10h10V29H78Z" fill="#050505"/></svg>

package/src/client/components/inputv3/Rte/index.tsx

@@ -5,29 +5,16 @@
 // Npm
 import React from 'react';
 
-import { EditorState, createEditor } from 'lexical';
-import { $generateHtmlFromNodes } from '@lexical/html';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+// Lexical
 import RichEditorUtils from './currentEditor';
 
 // Core libs
 import { useInput, InputBaseProps, InputWrapper } from '../base';
-import editorNodes from '@common/data/rte/nodes';
 
 // Special componets
-import ExampleTheme from './ExampleTheme';
-import ToolbarPlugin from './ToolbarPlugin';
+import type TEditor from './Editor';
 import './style.less';
 
-const EMPTY_STATE = '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
-
 /*----------------------------------
 - TYPES
 ----------------------------------*/
@@ -36,21 +23,6 @@ export type Props = {
     preview?: boolean,
 } 
 
-const ValueControlPlugin = ({ props, value }) => {
-
-    const [editor] = useLexicalComposerContext();
-
-    React.useEffect(() => {
-        if (props.value && props.value !== value) {
-
-            const initialEditorState = editor.parseEditorState(props.value)
-            editor.setEditorState(initialEditorState);
-        }
-    }, [props.value]);
-
-    return null;
-}
-
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
@@ -69,14 +41,10 @@ export default (props: Props & InputBaseProps<string>) => {
     - INIT
     ----------------------------------*/
 
+    const [Editor, setEditor] = React.useState<{ default: typeof TEditor }>(null);
     const [isPreview, setIsPreview] = React.useState(preview);
-
-    const [html, setHTML] = React.useState();
-
-    const [{ value }, setValue] = useInput(props, EMPTY_STATE, true);
-
-    // Trigger onchange oly when finished typing
-    const refCommit = React.useRef<NodeJS.Timeout | null>(null);
+    const [html, setHTML] = React.useState(null);
+    const [{ value }, setValue] = useInput(props, undefined, true);
 
     className += ' input rte';
 
@@ -84,11 +52,10 @@ export default (props: Props & InputBaseProps<string>) => {
     - ACTIONS
     ----------------------------------*/
 
-    React.useEffect(async () => {
-
-        if (isPreview)
-            renderPreview(value);
-        
+    React.useEffect(() => {
+        if (isPreview) {
+            renderPreview(value).then(setHTML);
+        }
     }, [value, isPreview]);
 
     // When isPreview changes, close the active editor
@@ -105,35 +72,28 @@ export default (props: Props & InputBaseProps<string>) => {
                 close: () => setIsPreview(true)
             }
 
+            // Load editor component if not alreayd done
+            // We lazy load since it's heavy and needs to be loade donly on client side
+            if (!Editor) {
+                import('./Editor').then(setEditor);
+            }
+
         }
     }, [isPreview]);
 
-    const renderPreview = async (value: {}) => {
+    const renderPreview = async (value: {} | undefined) => {
+
+        if (!value)
+            return '';
 
         if (typeof document === 'undefined')
             throw new Error("HTML preview disabled in server side.");
 
         const html = await RichEditorUtils.jsonToHtml(value);
 
-        setHTML(html);
+        return html;
     }
 
-    const onChange = (editorState: EditorState) => {
-        editorState.read(() => {
-
-            if (refCommit.current !== null)
-                clearTimeout(refCommit.current);
-    
-            refCommit.current = setTimeout(() => {
-
-                const stateJson = JSON.stringify(editorState.toJSON());
-
-                setValue(stateJson);
-
-            }, 100);
-        });
-    };
-
     /*----------------------------------
     - RENDER
     ----------------------------------*/
@@ -143,47 +103,18 @@ export default (props: Props & InputBaseProps<string>) => {
 
                 {isPreview ? (
 
-                    !html ? (
-                        <div class="col al-center h-4">
+                    html === null ? (
+                        <div class="col al-center h-2">
                             <i src="spin" />
                         </div>
                     ) : (
-                        <div class="h-4 scrollable col clickable" 
+                        <div class="preview reading h-1-4 scrollable col clickable" 
                             onClick={() => setIsPreview(false)}
                             dangerouslySetInnerHTML={{ __html: html }} />
                     )
 
-                ) : typeof window !== 'undefined' && (
-                    <LexicalComposer initialConfig={{
-                        editorState: value || EMPTY_STATE,
-                        nodes: editorNodes,
-                        // Handling of errors during update
-                        onError(error: Error) { throw error; },
-                        // The editor theme
-                        theme: ExampleTheme,
-                    }}>
-                        <div className="editor-container">
-                            <ToolbarPlugin />
-                            <div className="editor-inner">
-                                <RichTextPlugin
-                                    contentEditable={
-                                        <ContentEditable
-                                            className="editor-input"
-                                            aria-placeholder={"Type text here ..."}
-                                            placeholder={
-                                                <div className="editor-placeholder">Type text here ...</div>
-                                            }
-                                        />
-                                    }
-                                    ErrorBoundary={LexicalErrorBoundary}
-                                />
-                                <HistoryPlugin />
-                                <AutoFocusPlugin />
-                                <OnChangePlugin onChange={onChange} />
-                                <ValueControlPlugin props={props} value={value} />
-                            </div>
-                        </div>
-                    </LexicalComposer>   
+                ) : Editor !== null && (
+                    <Editor.default value={value} setValue={setValue} props={props} />
                 )}
 
                 {/* <Tag {...fieldProps}