feat: integrate rich text editor and markdown support in WriteEditor

- Added support for switching between Markdown and Rich Text editing modes in the WriteEditor component.
- Introduced new components: RichWriteEditor and MarkdownWriteEditor, to handle respective content formats.
- Updated the editor's props to include contentFormat and content for better state management.
- Enhanced the UI to accommodate the new editor functionalities, improving user experience for content creation.

This update significantly expands the editing capabilities within the application, allowing users to choose their preferred content format.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

index.html

@@ -7,6 +7,27 @@
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
     />
+    <script>
+      // Minimal Prism mock for @lexical/code (must be set before modules load)
+      window.Prism = {
+        highlight: function(text) { return text; },
+        languages: {
+          extend: function() { return {}; },
+          insertBefore: function() { return {}; },
+          diff: {}
+        },
+        tokenize: function(text) { return [text]; },
+        hooks: {
+          add: function() {},
+          run: function() {}
+        },
+        Token: function(type, content, alias) {
+          this.type = type;
+          this.content = content;
+          this.alias = alias;
+        }
+      };
+    </script>
     <script type="module">
       import favicon from './favicon.png'
 

package.json

@@ -41,6 +41,11 @@
     "@codemirror/view": "6.39.11",
     "@ddietr/codemirror-themes": "1.5.2",
     "@emoji-mart/data": "1.2.1",
+    "@haklex/rich-diff": "0.0.10",
+    "@haklex/rich-editor": "0.0.10",
+    "@haklex/rich-editor-ui": "0.0.10",
+    "@haklex/rich-kit-shiro": "0.0.10",
+    "@lexical/markdown": "0.40.0",
     "@lezer/highlight": "1.2.3",
     "@mx-space/api-client": "1.21.2",
     "@pierre/diffs": "1.0.8",
@@ -70,6 +75,7 @@
     "js-yaml": "4.1.1",
     "json5": "2.2.3",
     "katex": "0.16.28",
+    "lexical": "0.40.0",
     "lit": "3.3.2",
     "lodash.transform": "4.6.0",
     "lucide-vue-next": "0.563.0",
@@ -85,6 +91,8 @@
     "pinia": "3.0.4",
     "qier-progress": "1.0.4",
     "qs": "6.14.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "shiki": "3.21.0",
     "socket.io-client": "4.8.3",
     "sortablejs": "1.15.6",
@@ -128,4 +136,4 @@
     "vite-tsconfig-paths": "6.0.5"
   },
   "packageManager": "pnpm@10.28.2"
-}
+}

patches/@lexical__code@0.40.0.patch

@@ -0,0 +1,64 @@
+diff --git a/LexicalCode.dev.mjs b/LexicalCode.dev.mjs
+index 345e192ff3d7e5caa0478b6a8fc564960f298c28..0aaffa5c86a20ba68c9c9d7b5ee515869eb44d18 100644
+--- a/LexicalCode.dev.mjs
++++ b/LexicalCode.dev.mjs
+@@ -8,22 +8,23 @@
+ 
+ import { isHTMLElement, addClassNamesToElement, removeClassNamesFromElement, $getAdjacentCaret, mergeRegister } from '@lexical/utils';
+ import { ElementNode, $createParagraphNode, $isTextNode, $isTabNode, $createTabNode, $createLineBreakNode, $create, TextNode, $applyNodeReplacement, $getSiblingCaret, getTextDirection, $isElementNode, $isLineBreakNode, defineExtension, $createTextNode, $getNodeByKey, $getSelection, $isRangeSelection, $createPoint, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, INSERT_TAB_COMMAND, $setSelectionFromCaretRange, $getCaretRangeInDirection, $getCaretRange, $getTextPointCaret, $normalizeCaret, KEY_ARROW_UP_COMMAND, MOVE_TO_START, KEY_TAB_COMMAND, COMMAND_PRIORITY_LOW, $insertNodes, KEY_ARROW_DOWN_COMMAND, MOVE_TO_END } from 'lexical';
+-import 'prismjs';
+-import 'prismjs/components/prism-clike.js';
+-import 'prismjs/components/prism-javascript.js';
+-import 'prismjs/components/prism-markup.js';
+-import 'prismjs/components/prism-markdown.js';
+-import 'prismjs/components/prism-c.js';
+-import 'prismjs/components/prism-css.js';
+-import 'prismjs/components/prism-objectivec.js';
+-import 'prismjs/components/prism-sql.js';
+-import 'prismjs/components/prism-powershell.js';
+-import 'prismjs/components/prism-python.js';
+-import 'prismjs/components/prism-rust.js';
+-import 'prismjs/components/prism-swift.js';
+-import 'prismjs/components/prism-typescript.js';
+-import 'prismjs/components/prism-java.js';
+-import 'prismjs/components/prism-cpp.js';
++// Patched: Removed prismjs imports - relying on global window.Prism
++// import 'prismjs';
++// import 'prismjs/components/prism-clike.js';
++// import 'prismjs/components/prism-javascript.js';
++// import 'prismjs/components/prism-markup.js';
++// import 'prismjs/components/prism-markdown.js';
++// import 'prismjs/components/prism-c.js';
++// import 'prismjs/components/prism-css.js';
++// import 'prismjs/components/prism-objectivec.js';
++// import 'prismjs/components/prism-sql.js';
++// import 'prismjs/components/prism-powershell.js';
++// import 'prismjs/components/prism-python.js';
++// import 'prismjs/components/prism-rust.js';
++// import 'prismjs/components/prism-swift.js';
++// import 'prismjs/components/prism-typescript.js';
++// import 'prismjs/components/prism-java.js';
++// import 'prismjs/components/prism-cpp.js';
+ 
+ /**
+  * Copyright (c) Meta Platforms, Inc. and affiliates.
+@@ -681,6 +682,9 @@ const CodeExtension = defineExtension({
+   nodes: () => [CodeNode, CodeHighlightNode]
+ });
+ 
++// Patched: Get Prism from global before using it
++const Prism = globalThis.Prism || window.Prism;
++
+ (function (Prism) {
+ 
+ 	Prism.languages.diff = {
+@@ -754,7 +758,8 @@ const CodeExtension = defineExtension({
+  *
+  */
+ 
+-const Prism$1 = globalThis.Prism || window.Prism;
++// Patched: Reuse Prism from above instead of redefining
++const Prism$1 = Prism;
+ const CODE_LANGUAGE_FRIENDLY_NAME_MAP = {
+   c: 'C',
+   clike: 'C-like',