feat: support codemirror for comment and fix emoji insert pos and support upload image from clipboard

[Innei]

Signed-off-by: Innei tukon479@gmail.com### WHAT

🤖 Generated by Copilot at f289568

This pull request enhances and refactors the CodeMirror editor component and its related components, hooks, and functions. It improves the performance, usability, and customization of the editor, and extracts some helper functions and types to a separate file. It also updates the imports and exports of the editor module and its dependencies.

🤖 Generated by Copilot at f289568

We are the coders of the night
We refactor and enhance with might
We use CodeMirror to write
We drop the files and insert the smile

WHY

1. Support codemirror for comment box
2. Fix insert emoji always at end of line.
3. Support upload image from clipboard.

HOW

🤖 Generated by Copilot at f289568

• Add cmStyle prop to CodeMirrorEditor component to allow passing a custom style object to the editor (link,link,link,link,link)
• Add LoadingComponent prop to CodeMirrorEditor component to allow passing a custom component to render while the editor is loading (link,link,link)
• Add value, maxLength, placeholder, and className props to CodeMirrorEditor component to customize and control the editor value, length, text, and layout (link,link,link,link)
• Replace Input component with CodeMirrorEditor component in CommentInput component to use the editor as the input field for the comment (link)
• Add onCreateEditor and handleDropFile props to CodeMirrorEditor component to handle the creation and access of the editor view instance and the file drops on the editor (link,link)
• Move CommentInput component from src/components/common to src/app/dashboard/[subdomain]/editor and update the imports accordingly (link,link)
• Update the onEmojiSelect prop of the EmojiPicker component to use the editor view instance to insert the emoji into the editor (link)
• Move wrapExecute function and IWrapExecute type from src/editor/index.tsx to src/editor/helper.ts and re-export them from the src/editor module (link,link,link,link)
• Update the imports of the editorUpload function in src/editor/Multimedia.tsx to reflect the changes in the src/editor module (link)
• Remove unused variables and imports from LazyCodeMirrorEditor and useCodemirrorTheme components (link,link,link,link)
• Remove commented out onUpdate prop from CodeMirrorEditor component (link)

CLAIM REWARDS

For first-time contributors, please leave your xLog address and Discord ID below to claim your rewards.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
xlog	❌ Failed (Inspect)			May 18, 2023 3:40am

[Innei]

Demo:

CleanShot.2023-05-18.at.11.34.47.mp4

[github-actions]

📦 Next.js Bundle Analysis for xlog

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
global	89.91 KB (-2 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[DIYgod]

This is very useful, thanks so much!