feat(lexical): add lexical to admin

.github/workflows/test_endpoints.yaml

@@ -1,4 +1,4 @@
-on: push
+on: 
 name: test endpoints
 jobs:
   test:

app/.babelrc

@@ -1,4 +1,4 @@
 {
-    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "presets": ["@babel/preset-env", ["@babel/preset-react", {"runtime": "automatic"}]],
     "plugins": ["@babel/plugin-proposal-class-properties"]
 }

app/assets/javascripts/lexical/Editor.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { $createParagraphNode, $getRoot } from "lexical";
+import { editorConfig } from "./config";
+import { Toolbar } from "./Toolbar";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import {
+  $convertFromMarkdownString,
+  $convertToMarkdownString,
+} from "@lexical/markdown";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import TRANSFORMERS from "./transformers";
+
+import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
+import ListMaxIndentPlugin from "./plugins/ListMaxIndentPlugin";
+import TabIndentationPlugin from "./plugins/TabIndentationPlugin";
+import HorizontalRulePlugin from "./plugins/HorizontalRulePlugin";
+
+export const Editor = ({
+  content,
+  onChange,
+  ariaLabel,
+  ariaDescribedBy,
+  lang,
+}: {
+  content: string;
+  onChange: (value: string) => void;
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+  lang?: string;
+}) => {
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState<
+    HTMLDivElement | undefined
+  >(undefined);
+
+  const editorId = "editor-" + Math.random().toString(36).substr(2, 9);
+
+  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
+    if (_floatingAnchorElem !== null) {
+      setFloatingAnchorElem(_floatingAnchorElem);
+    }
+  };
+
+  if (typeof content !== "string") {
+    content = "";
+  }
+  return (
+    <div className="rich-text-wrapper">
+      <LexicalComposer
+        initialConfig={{
+          ...editorConfig,
+          editorState: () => {
+            if (!content) {
+              const root = $getRoot();
+              const paragraphNode = $createParagraphNode();
+              root.append(paragraphNode);
+              return;
+            }
+            $convertFromMarkdownString(content, TRANSFORMERS);
+          },
+        }}
+      >
+        <Toolbar editorId={editorId} />
+        <RichTextPlugin
+          contentEditable={
+            <div
+              className="editor relative"
+              ref={onRef}
+              {...(lang && { lang: lang })}
+            >
+              <ContentEditable
+                className="editor-input focus:outline-blue-focus"
+                id={editorId}
+                ariaLabel="Content editor: edit or create your content here. To apply formatting,
+                select the desired text and press shift+tab to return to the toolbar and select
+                an option.  You can also use markdown formatting directly in the editor."
+                ariaDescribedBy={ariaDescribedBy && ariaDescribedBy}
+              />
+            </div>
+          }
+          placeholder={null}
+          ErrorBoundary={LexicalErrorBoundary}
+        />
+        <HistoryPlugin />
+        <OnChangePlugin
+          onChange={(editorState) => {
+            editorState.read(() => {
+              // Read the contents of the EditorState here.
+              const markdown = $convertToMarkdownString(TRANSFORMERS);
+
+              // Add two spaces to previous line for linebreaks (this is not handled properly by $convertToMarkdownString)
+              const lines = markdown.split("\n");
+              lines.forEach((currentLine, i) => {
+                if (i > 0) {
+                  const previousLine = lines[i - 1];
+                  if (previousLine !== "" && currentLine !== "") {
+                    lines[i - 1] = previousLine.trim() + "  ";
+                  }
+                }
+              });
+              onChange(lines.join("\n"));
+            });
+          }}
+        />
+        <LinkPlugin />
+        <FloatingLinkEditorPlugin anchorElem={floatingAnchorElem} />
+        <ListPlugin />
+        <ListMaxIndentPlugin maxDepth={5} />
+        {/* <TabIndentationPlugin /> */}
+        <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+        <HorizontalRulePlugin />
+      </LexicalComposer>
+    </div>
+  );
+};
+
+Editor.propTypes = {
+  id: PropTypes.string,
+  content: PropTypes.string,
+  onChange: PropTypes.func,
+};

app/assets/javascripts/lexical/RichTextEditor.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from "react";
+import { Editor } from "./Editor";
+import { $convertToMarkdownString } from "@lexical/markdown";
+import TRANSFORMERS from "./transformers";
+
+type Language = "en" | "fr";
+
+export const RichTextEditor = ({
+  path,
+  content,
+  id,
+  ariaLabel,
+  ariaDescribedBy,
+}: {
+  path: string;
+  content: string;
+  lang: Language;
+  id: string;
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+}) => {
+  var textInput = React.createRef();
+  const [value, setValue] = useState(content);
+  const [text, setText] = useState("");
+
+  useEffect(() => {
+    setValue(content);
+  }, [content]);
+
+  const updateValue = () => {
+    setText($convertToMarkdownString(TRANSFORMERS));
+  };
+
+  return (
+    <div className="w-full bg-white">
+      <Editor
+        content={value}
+        onChange={updateValue}
+        ariaLabel={""}
+        ariaDescribedBy={""}
+      />
+      <input id={id} name={id} value={text} type="hidden" />
+    </div>
+  );
+};

app/assets/javascripts/lexical/ToolTip.tsx

@@ -0,0 +1,29 @@
+import React, { useId, Children } from "react";
+
+export const ToolTip = ({
+  children,
+  text,
+}: {
+  children: React.ReactElement;
+  text: string;
+}) => {
+  const id = `tooltip-${useId()}`;
+
+  return (
+    <span className="relative">
+      {Children.map(children, (child) => {
+        return React.cloneElement(child, {
+          ...child.props,
+          className: child.props.className + " peer",
+          "aria-labelledby": id,
+        });
+      })}
+      <span
+        id={id}
+        className={`invisible whitespace-nowrap peer-hover:visible peer-focus:visible bg-gray-800 text-white rounded absolute p-1 text-sm -top-10 w-36 text-center -left-14 after:content-[''] after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-gray-700`}
+      >
+        {text}
+      </span>
+    </span>
+  );
+};