[WIP] Change Unsplash selector to use Lib

no issue
TryGhost · Mar 12, 2024 · ccc3a33 · ccc3a33
1 parent 5c6267f
commit ccc3a33
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 187 deletions.
diff --git a/packages/kg-unsplash-selector/src/UnsplashSearchModal.tsx b/packages/kg-unsplash-selector/src/UnsplashSearchModal.tsx
@@ -15,7 +15,7 @@ interface UnsplashModalProps {
     unsplashProviderConfig: DefaultHeaderTypes | null;
   }
 
-const UnsplashSearchModal : React.FC<UnsplashModalProps> = ({onClose, onImageInsert, unsplashProviderConfig}) => {
+export const UnsplashSearchModal : React.FC<UnsplashModalProps> = ({onClose, onImageInsert, unsplashProviderConfig}) => {
     const unsplashProvider = useMemo(() => {
         if (!unsplashProviderConfig) {
             return new InMemoryUnsplashProvider();
@@ -191,5 +191,3 @@ const UnsplashSearchModal : React.FC<UnsplashModalProps> = ({onClose, onImageIns
         </UnsplashSelector>
     );
 };
-
-export default UnsplashSearchModal;
diff --git a/packages/kg-unsplash-selector/src/index.ts b/packages/kg-unsplash-selector/src/index.ts
@@ -1,4 +1,4 @@
-export {default as UnsplashSearchModal} from './UnsplashSearchModal';
+export {UnsplashSearchModal} from './UnsplashSearchModal';
 export type {DefaultHeaderTypes, Photo as PhotoType} from './UnsplashTypes';
 export {UnsplashProvider} from './api/UnsplashProvider';
-import './styles/index.css';
+import './styles/index.css';
diff --git a/packages/koenig-lexical/demo/DemoApp.jsx b/packages/koenig-lexical/demo/DemoApp.jsx
@@ -31,7 +31,7 @@ const WEBSOCKET_ENDPOINT = params.get('multiplayerEndpoint') || 'ws://localhost:
 const WEBSOCKET_ID = params.get('multiplayerId') || '0';
 
 const cardConfig = {
-    unsplash: {defaultHeaders: defaultUnsplashHeaders},
+    unsplash: defaultUnsplashHeaders,
     fetchEmbed: fetchEmbed,
     tenor: tenorConfig,
     fetchAutocompleteLinks: () => Promise.resolve([

diff --git a/packages/koenig-lexical/package.json b/packages/koenig-lexical/package.json
@@ -81,6 +81,7 @@
     "@tryghost/kg-default-transforms": "^1.0.10",
     "@tryghost/kg-markdown-html-renderer": "^7.0.2",
     "@tryghost/kg-simplemde": "^3.0.1",
+    "@tryghost/kg-unsplash-selector": "0.1.8",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "@uiw/react-codemirror": "^4.19.6",

diff --git a/packages/koenig-lexical/src/components/ui/UnsplashModal.jsx b/packages/koenig-lexical/src/components/ui/UnsplashModal.jsx
diff --git a/packages/koenig-lexical/src/components/ui/UnsplashPlugin.jsx b/packages/koenig-lexical/src/components/ui/UnsplashPlugin.jsx
@@ -1,6 +1,6 @@
 import KoenigComposerContext from '../../context/KoenigComposerContext.jsx';
 import React from 'react';
-import UnsplashModal from './UnsplashModal.jsx';
+import UnsplashModal from './file-selectors/UnsplashModal.jsx';
 import generateEditorState from '../../utils/generateEditorState';
 import {$createNodeSelection, $getNodeByKey, $setSelection} from 'lexical';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
@@ -11,7 +11,6 @@ const UnsplashPlugin = ({nodeKey, isModalOpen = true}) => {
     const [isOpen, setIsOpen] = React.useState(isModalOpen);
 
     const onClose = () => {
-        // remove the image node from the editor
         if (nodeKey) {
             editor.update(() => {
                 const node = $getNodeByKey(nodeKey);

diff --git a/packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownEditor.jsx b/packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownEditor.jsx
@@ -2,7 +2,7 @@ import MarkdownHelpDialog from './MarkdownHelpDialog';
 import MarkdownImageUploader from './MarkdownImageUploader';
 import React, {useLayoutEffect, useRef, useState} from 'react';
 import SimpleMDE from '@tryghost/kg-simplemde';
-import UnsplashModal from '../../UnsplashModal';
+import UnsplashModal from '../../file-selectors/UnsplashModal';
 
 import ctrlOrCmd from '../../../../utils/ctrlOrCmd';
 import useMarkdownImageUploader from './useMarkdownImageUploader';

diff --git a/packages/koenig-lexical/src/components/ui/file-selectors/UnsplashModal.jsx b/packages/koenig-lexical/src/components/ui/file-selectors/UnsplashModal.jsx
@@ -0,0 +1,16 @@
+import Portal from '../Portal';
+import {UnsplashSearchModal} from '@tryghost/kg-unsplash-selector'; 
+
+const UnsplashModal = ({unsplashConf, onImageInsert, onClose}) => {
+    return (
+        <Portal>
+            <UnsplashSearchModal
+                unsplashProviderConfig={unsplashConf}
+                onClose={onClose}
+                onImageInsert={onImageInsert}
+            />
+        </Portal>
+    );
+};
+
+export default UnsplashModal;
diff --git a/packages/koenig-lexical/vite.config.demo.js b/packages/koenig-lexical/vite.config.demo.js
@@ -26,7 +26,8 @@ export default (function viteDemoConfig() {
                 '@tryghost/kg-clean-basic-html',
                 '@tryghost/kg-default-transforms',
                 '@tryghost/kg-markdown-html-renderer',
-                '@tryghost/kg-simplemde'
+                '@tryghost/kg-simplemde',
+                '@tryghost/kg-unsplash-selector'
             ]
         },
         build: {