From e30eff9ffe0cbcea846b218de646d4e31ab981c9 Mon Sep 17 00:00:00 2001
From: Gorbachev Egor <7gorbachevm@gmail.com>
Date: Tue, 9 Jan 2024 18:31:48 +0700
Subject: [PATCH] wysiwyg [wip]

---
 package-lock.json   |  9 ++++++
 package.json        |  1 +
 src/screens/app.tsx | 70 +++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 98c0b3a5..5e00b3f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "react-dom": "^18.2.0",
         "react-hotkeys-hook": "^4.4.1",
         "react-lines-ellipsis": "^0.15.3",
+        "react-simple-wysiwyg": "^3.0.2",
         "short-unique-id": "^5.0.3",
         "supabase": "^1.110.1",
         "zod": "^3.22.3"
@@ -4424,6 +4425,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-simple-wysiwyg": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-simple-wysiwyg/-/react-simple-wysiwyg-3.0.2.tgz",
+      "integrity": "sha512-qBPP/b8CfLJgGooqQE2guFxiNxm2uBfMNtZUilCWPcjAWw9XMO6218JZw9kwK81iNO2J0PCWzHf73e6T6EGAvw==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/read-cmd-shim": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-4.0.0.tgz",
diff --git a/package.json b/package.json
index 441d1df4..91b2ea39 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.4.1",
     "react-lines-ellipsis": "^0.15.3",
+    "react-simple-wysiwyg": "^3.0.2",
     "short-unique-id": "^5.0.3",
     "supabase": "^1.110.1",
     "zod": "^3.22.3"
diff --git a/src/screens/app.tsx b/src/screens/app.tsx
index ff10722a..78f56792 100644
--- a/src/screens/app.tsx
+++ b/src/screens/app.tsx
@@ -7,7 +7,7 @@ import { DeckFormScreen } from "./deck-form/deck-form-screen.tsx";
 import { DeckFormStoreProvider } from "./deck-form/store/deck-form-store-context.tsx";
 import { QuickAddCardForm } from "./deck-form/quick-add-card-form.tsx";
 import { VersionWarning } from "./shared/version-warning.tsx";
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { UserSettingsStoreProvider } from "./user-settings/store/user-settings-store-context.tsx";
 import { UserSettingsMain } from "./user-settings/user-settings-main.tsx";
 import { deckListStore } from "../store/deck-list-store.ts";
@@ -25,8 +25,74 @@ import { ShareDeckScreen } from "./share-deck/share-deck-screen.tsx";
 import { ShareDeckStoreProvider } from "./share-deck/store/share-deck-store-context.tsx";
 import { FolderFormStoreProvider } from "./folder-form/store/folder-form-store-context.tsx";
 import { FolderScreen } from "./folder-review/folder-screen.tsx";
+import {
+  BtnBold,
+  BtnItalic,
+  createButton,
+  Editor,
+  EditorProvider,
+  Toolbar,
+} from "react-simple-wysiwyg";
+
+const BtnAlignCenter = createButton("Decrease size", "-", "decreaseFontSize");
+
+export function App() {
+  const [value, setValue] = useState("simple text");
+  const [link, setLink] = useState("");
+  const [isOpened, setIsOpened] = useState(false);
+
+  // @ts-ignore
+  function onChange(e) {
+    setValue(e.target.value);
+  }
+
+  const BtnLink2 = useMemo(
+    () =>
+      createButton("Link", "🔗", ({ $selection }) => {
+        if ($selection?.nodeName === "A") {
+          document.execCommand("unlink");
+        } else {
+          setIsOpened(true);
+        }
+      }),
+    [],
+  );
+
+  return (
+    <EditorProvider>
+      <Editor value={value} onChange={onChange}>
+        <Toolbar>
+          <BtnBold />
+          <BtnItalic />
+          <BtnLink2 />
+          <BtnAlignCenter />
+        </Toolbar>
+      </Editor>
+      {JSON.stringify(value, null, 2)}
+      {isOpened && (
+        <div>
+          <input
+            value={link}
+            onChange={(e: any) => {
+              setLink(e.target.value);
+            }}
+          />
+          <button
+            onClick={() => {
+              console.log(link);
+              document.execCommand("createLink", false, link);
+              setIsOpened(false);
+            }}
+          >
+            OK
+          </button>
+        </div>
+      )}
+    </EditorProvider>
+  );
+}
 
-export const App = observer(() => {
+export const App2 = observer(() => {
   useRestoreFullScreenExpand();
 
   if (deckListStore.isFullScreenLoaderVisible) {