wip: upgrade to the released version

podkrepi-bg · Aug 18, 2023 · 6cefd21 · 6cefd21
1 parent a625604
commit 6cefd21
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@emotion/react": "^11.8.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.8.1",
-    "@mdxeditor/editor": "0.10.0-alpha.2",
+    "@mdxeditor/editor": "latest",
     "@mui/icons-material": "^5.11.11",
     "@mui/lab": "^5.0.0-alpha.69",
     "@mui/material": "^5.10.14",

diff --git a/src/components/client/campaigns/CampaignDetails.tsx b/src/components/client/campaigns/CampaignDetails.tsx
@@ -26,6 +26,7 @@ import { routes } from 'common/routes'
 import { useCanEditCampaign } from 'common/hooks/campaigns'
 import { moneyPublic } from 'common/util/money'
 import ReceiptLongIcon from '@mui/icons-material/ReceiptLong'
+import { QuillStypeWrapper } from 'components/common/QuillStyleWrapper'
 
 const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
 const CampaignNewsSection = dynamic(() => import('./CampaignNewsSection'), { ssr: false })

diff --git a/src/components/common/QuillStyleWrapper.tsx b/src/components/common/QuillStyleWrapper.tsx
@@ -15,6 +15,10 @@ export const QuillStypeWrapper = styled(Grid)(({ theme }) => ({
   ['.ql-editor, .ql-video']: {
     maxWidth: '100%',
   },
+  ['.ql-video']: {
+    maxWidth: '100%',
+    marginInline: 'auto',
+  },
 
   ['.ql-editor, blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6, .ql-editor ol, .ql-editor p, .ql-editor pre, .ql-editor ul']:
     {

diff --git a/src/components/common/form/MDXEditor.tsx b/src/components/common/form/MDXEditor.tsx
@@ -1,3 +1,4 @@
+import { markdownShortcutPlugin } from '@mdxeditor/editor'
 import { MDXEditor } from '@mdxeditor/editor/MDXEditor'
 import { diffSourcePlugin } from '@mdxeditor/editor/plugins/diff-source'
 import {
@@ -46,7 +47,13 @@ export const YoutubeDirectiveDescriptor: DirectiveDescriptor = {
   hasChildren: false,
   Editor: ({ mdastNode, lexicalNode, parentEditor }) => {
     return (
-      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start' }}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          justifyContent: 'center',
+        }}>
         <iframe
           width="560"
           height="315"
@@ -117,10 +124,14 @@ const EditorWrapper = styled(Box)(() => ({
   maxWidth: '100%',
   // below is quill's default style
   ['& .mdxeditor-content-editable']: {
-    ['& li']: {
+    ['& ul & li']: {
       marginLeft: '2rem',
       listStyleType: 'disc',
     },
+    ['& ol & li']: {
+      marginLeft: '2rem',
+      listStyleType: 'decimal',
+    },
     ['& blockquote']: {
       borderLeft: `4px solid #ccc`,
       paddingLeft: '16px',
@@ -171,19 +182,9 @@ export const ModernEditor: React.FC<ModernEditorProps> = ({ html, onChange }) =>
           headingsPlugin(),
           diffSourcePlugin({ diffMarkdown: markdown }),
           linkDialogPlugin(),
-          imagePlugin({
-            imageUploadHandler: async (_file) => {
-              // TODO: upload image
-              // const result = await uploadImage({
-              //   files: [file],
-              //   campaignId: '1',
-              //   roles: [{ file: '1', role: CampaignFileRole.gallery }],
-              // })
-              // console.log(result)
-              return 'https://picsum.photos/200'
-            },
-          }),
+          imagePlugin(),
           quotePlugin(),
+          markdownShortcutPlugin(),
           directivesPlugin({ directiveDescriptors: [YoutubeDirectiveDescriptor] }),
         ]}
       />

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -61,3 +61,8 @@ ul {
     flex-shrink: 1;
   }
 }
+
+// center the videos in campaign pages
+.ql-bubble .ql-video {
+  margin-inline: auto;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1585,9 +1585,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdxeditor/editor@npm:0.10.0-alpha.2":
-  version: 0.10.0-alpha.2
-  resolution: "@mdxeditor/editor@npm:0.10.0-alpha.2"
+"@mdxeditor/editor@npm:latest":
+  version: 0.14.0
+  resolution: "@mdxeditor/editor@npm:0.14.0"
   dependencies:
     "@codemirror/lang-markdown": ^6.1.1
     "@codemirror/state": ^6.2.1
@@ -1636,7 +1636,7 @@ __metadata:
   peerDependencies:
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: d2c11eafaa6235e845150b23e017003c294acbc89377a5ab64faa8ffdc2cd5b36e558c6c7178e9fb58f21e4b282bc219316c80a2426a4d194297c7fd094f8f91
+  checksum: 9047e966a1378d69e2e677febf0680b62700a8cdf475e9fa26d6b01fe66ad696edc8b8ce4859e3ca6ad210df66fae65131989da46c7dac790e8b9af710e31c0c
   languageName: node
   linkType: hard
 
@@ -11257,7 +11257,7 @@ __metadata:
     "@emotion/react": ^11.8.1
     "@emotion/server": ^11.4.0
     "@emotion/styled": ^11.8.1
-    "@mdxeditor/editor": 0.10.0-alpha.2
+    "@mdxeditor/editor": latest
     "@mui/icons-material": ^5.11.11
     "@mui/lab": ^5.0.0-alpha.69
     "@mui/material": ^5.10.14