return Mhl ordum to main branch

.github/workflows/ci.yml

@@ -0,0 +1,17 @@
+name: CI
+
+on:
+  push:
+    branches: [ mhl-ordum ]
+  pull_request:
+    branches: [ mhl-ordum ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - run: yarn
+    - run: yarn build

netlify.toml

@@ -4,18 +4,19 @@
   functions = "netlify/functions"
   publish = ".next"
 
-  ## Uncomment to use this redirect for Single Page Applications like create-react-app.
-  ## Not needed for static site generators.
-  #[[redirects]]
+## Uncomment to use this redirect for Single Page Applications like create-react-app.
+## Not needed for static site generators.
+#[[redirects]]
   #  from = "/*"
   #  to = "/index.html"
   #  status = 200
 
-  ## (optional) Settings for Netlify Dev
-  ## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
-  #[dev]
-  #  command = "yarn start" # Command to start your dev server
-  #  port = 3000 # Port that the dev server will be listening on
+## (optional) Settings for Netlify Dev
+## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
+[dev]
+  command = "yarn start" # Command to start your dev server
+  port = 3000 # Port that the dev server will be listening on
   #  publish = "dist" # Folder with the static content for _redirect file
+  publish = ".next"
 
-  ## more info on configuring this file: https://docs.netlify.com/configure-builds/file-based-configuration/
+## more info on configuring this file: https://docs.netlify.com/configure-builds/file-based-configuration/

package.json

@@ -12,6 +12,9 @@
     "@crustio/type-definitions": "^1.3.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@excalidraw/excalidraw": "^0.14.2",
+    "@lexical/file": "0.12.0",
+    "@lexical/react": "0.12.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.2",
     "@phala/sdk": "^0.5.0",
@@ -38,18 +41,26 @@
     "html-react-parser": "^1.4.8",
     "ipfs-http-client": "^60.0.1",
     "jwt-decode": "^3.1.2",
+    "katex": "^0.15.2",
+    "lexical": "^0.12.0",
+    "lodash-es": "^4.17.21",
+    "moment": "^2.29.4",
     "next": "^13.4.10",
     "postcss": "8.4.24",
+    "prettier": "^3.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-feather": "^2.0.10",
+    "react-html-parser": "^2.0.2",
     "react-icons": "^4.3.1",
     "react-modal": "^3.16.1",
     "sharp": "^0.32.3",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.3",
     "universal-cookie": "^4.0.4",
     "useink": "^1.13.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "y-websocket": "^1.5.0",
+    "yjs": "^13.6.7"
   }
 }

src/Components/ConnectWallet/index.tsx

@@ -1,92 +1,108 @@
-'use client';
+"use client";
 
-
-import Link from 'next/link';
-import React from 'react'
-import Button from '@mui/material/Button';
-import { useState, useEffect } from 'react';
+import Link from "next/link";
+import React from "react";
+import Button from "@mui/material/Button";
+import { useState, useEffect } from "react";
 import type { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
 import { Signer } from "@polkadot/types/types";
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import { blue } from '@mui/material/colors';
-import { enablePolkadotExtension ,getSigner} from '../../Components//wallet/pjs';
-import { useWalletContext } from '../../Context/WalletStore';
-import { web3Accounts } from '@polkadot/extension-dapp';
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import { blue } from "@mui/material/colors";
+import {
+  enablePolkadotExtension,
+  getSigner,
+} from "../../Components//wallet/pjs";
+import { useWalletContext } from "../../Context/WalletStore";
+import { web3Accounts } from "@polkadot/extension-dapp";
 
 function ConnectWallet() {
-
   //Context
-  const {account,setAccount,signer,setSigner,accounts,setAccounts} = useWalletContext();
+  const { account, setAccount, signer, setSigner, accounts, setAccounts } =
+    useWalletContext();
   //----------------------------------------------
 
   const [isWallet, setIsWallet] = useState<boolean>(false);
-  const [selectedAcc, setSelectedAcc] = useState<InjectedAccountWithMeta| undefined>(undefined);
+  const [selectedAcc, setSelectedAcc] = useState<
+    InjectedAccountWithMeta | undefined
+  >(undefined);
 
-  const getAccounts = async() =>{
+  const getAccounts = async () => {
     // Check if the Wallet is installed
-    const wallet:boolean = await enablePolkadotExtension();
+    const wallet: boolean = await enablePolkadotExtension();
     setIsWallet(wallet);
     // Get Accounts
 
     const availableAccounts = await web3Accounts();
-    
+
     setAccounts(availableAccounts);
-
-  }
-  const getTheSigner = async(account:InjectedAccountWithMeta) =>{
+  };
+  const getTheSigner = async (account: InjectedAccountWithMeta) => {
     // get the signer & update the context state of the signer and Account name
     const signer = await getSigner(account);
-    setSigner(signer)
-  }
-
-  useEffect(()=>{
-    getAccounts()
+    setSigner(signer);
+  };
 
-  },[])
+  useEffect(() => {
+    getAccounts();
+  }, []);
 
   const handleChange = (event: SelectChangeEvent) => {
     //@ts-ignore
     setAccount(event.target.value);
     //@ts-ignore
-    getTheSigner(event.target.value)
+    getTheSigner(event.target.value);
   };
 
   return (
     <div className="flex flex-col items-center justify-around">
-
-        <div className="flex flex-col w-1/3 justify-center align-middle items-center rounded">
-            {
-              isWallet? 
-                (
-                <FormControl sx={{ m: 1, minWidth: 120,width:300,borderColor:'lightblue',border:"1px solid",borderRadius:2}} size="medium">
-                    <InputLabel id="wallet" sx={{color:"white"}}>Choose Account</InputLabel>
-                    <Select
-                    labelId="Choose-Wallet"
-                    id="wallet"
-                    //@ts-ignore
-                    value={account}
-                    label="account"
-                    onChange={handleChange}
-                    >
-                    {accounts?.map((acc,id) =>(
-                        //@ts-ignore
-                        <MenuItem key={id} value={acc}>{acc.meta.name}</MenuItem>
-                    ))}
-
-                    </Select>
-                </FormControl>
-                ) 
-                : (<h1 className="font-sans font-light text-base">Wallet unavailable? Try out <button><Link href="/sign-in">Wallet Connect</Link></button></h1>)
-            }
-
-        </div>
-
-
+      <div className="flex flex-col w-1/3 justify-center align-middle items-center rounded">
+        {isWallet ? (
+          <FormControl
+            sx={{
+              m: 1,
+              minWidth: 120,
+              width: 300,
+              borderColor: "lightblue",
+              border: "1px solid",
+              borderRadius: 2,
+            }}
+            size="medium"
+          >
+            <InputLabel id="wallet" sx={{ color: "white" }}>
+              Choose Account
+            </InputLabel>
+            <Select
+              labelId="Choose-Wallet"
+              id="wallet"
+              //@ts-ignore
+              value={account}
+              label="account"
+              onChange={handleChange}
+              sx={{ color: "white" }}
+            >
+              {accounts?.map((acc, id) => (
+                //@ts-ignore
+                <MenuItem key={id} value={acc}>
+                  {acc.meta.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        ) : (
+          <h1 className="font-sans font-light text-base">
+            Wallet unavailable? Try out{" "}
+            <button>
+              <Link href="/sign-in">Wallet Connect</Link>
+            </button>
+            <p>Or try the <Link href="https://polkadot.js.org/extension/" className="underlie">PJS extenson</Link></p>
+          </h1>
+        )}
+      </div>
     </div>
-  )
+  );
 }
 
-export default ConnectWallet;
+export default ConnectWallet;

src/Components/LexicalTextEditor/Editor.js

@@ -0,0 +1,118 @@
+"use client";
+
+import "./styles.css";
+import dynamic from 'next/dynamic'
+import ExampleTheme from "./themes/ExampleTheme";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+// import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import ContentEditable from './ui/ContentEditable';
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import ToolbarPlugin from "./plugins/ToolbarPlugin";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { TRANSFORMERS } from "@lexical/markdown";
+
+import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
+import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin";
+import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
+import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
+import TableCellResizer from './plugins/TableCellResizer';
+const DynamicImagesPluginHandler = dynamic(() => import("./plugins/ImagesPlugin"), {
+  loading: () => <p>Loading...</p>,
+})
+import ImagesPlugin from "./plugins/ImagesPlugin";;
+import { ImageNode } from "./nodes/ImageNode";
+import TableActionMenuPlugin from "./plugins/TableActionMenuPlugin";
+
+function Placeholder() {
+  return <div className="editor-placeholder">Enter some rich text...</div>;
+}
+
+const editorConfig = {
+  // The editor theme
+  theme: ExampleTheme,
+  // Handling of errors during update
+  onError(error) {
+    throw error;
+  },
+  // Any custom nodes go here
+  nodes: [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    AutoLinkNode,
+    LinkNode,
+    ImageNode
+  ],
+};
+
+export default function Editor() {
+
+  // const cellEditorConfig = {
+  //   namespace: 'Playground',
+  //   // nodes: [...TableCellNodes],
+  //   // @ts-ignore
+  //   onError: (e) => {
+  //     throw e;
+  //   },
+  //   theme: ExampleTheme,
+  // };
+
+  return (
+    <LexicalComposer initialConfig={editorConfig}>
+      <div className="editor-container">
+        <ToolbarPlugin />
+        <div className="editor-inner">
+          <RichTextPlugin
+            contentEditable={<ContentEditable className="editor-input" />}
+            placeholder={<Placeholder />}
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+          <HistoryPlugin />
+          {/* <TreeViewPlugin /> */}
+          <AutoFocusPlugin />
+          <CodeHighlightPlugin />
+          <ListPlugin />
+          <LinkPlugin />
+          <AutoLinkPlugin />
+          <ListMaxIndentLevelPlugin maxDepth={7} />
+          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+          <TablePlugin
+            // hasCellMerge={tableCellMerge}
+            // hasCellBackgroundColor={tableCellBackgroundColor}
+          />
+           <TableCellResizer />
+           {/* <NewTablePlugin cellEditorConfig={cellEditorConfig}>
+              <AutoFocusPlugin />
+              <RichTextPlugin
+                contentEditable={
+                  <ContentEditable className="TableNode__contentEditable" />
+                }
+                placeholder={null}
+                ErrorBoundary={LexicalErrorBoundary}
+              />
+              <HistoryPlugin />
+              <ImagesPlugin captionsEnabled={false} />
+              <LinkPlugin />}
+            </NewTablePlugin> */}
+          <DynamicImagesPluginHandler captionsEnabled={false} />
+        </div>
+      </div>
+    </LexicalComposer>
+  );
+}