Merge pull request #52 from tailor-cms/chore/tweak-extension-installa…

…tion

Improve extension support

apps/frontend/components/editor/ActivityContent/index.vue

@@ -96,6 +96,7 @@ const editorStore = useEditorStore();
 const activityStore = useActivityStore();
 const contentElementStore = useContentElementStore();
 const commentStore = useCommentStore();
+const storageService = useStorageService();
 
 const doTheMagic = ({ type }: { type: string }) => {
   if (!type) throw new Error('Type is required');
@@ -120,6 +121,7 @@ const doTheMagic = ({ type }: { type: string }) => {
 const editorChannel = $eventBus.channel('editor');
 provide('$editorBus', editorChannel);
 provide('$eventBus', $eventBus);
+provide('$storageService', storageService);
 if (runtimeConfig.public.aiUiEnabled) provide('$doTheMagic', doTheMagic);
 
 const isLoading = ref(true);

apps/frontend/components/editor/Sidebar/ElementSidebar/ElementMeta/MetaInputs.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script lang="ts" setup>
+import { getElementId } from '@tailor-cms/utils';
+
 import MetaInput from '@/components/common/MetaInput.vue';
 
 const props = defineProps({

apps/frontend/components/editor/Sidebar/ElementSidebar/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="element-sidebar">
-    <div class="pb-3 text-body-2 font-weight-bold text-primary-lighten-4">
+    <div class="pb-8 text-body-2 font-weight-bold text-primary-lighten-4">
       Additional settings
     </div>
+    <component :is="sidebarName" :element="element" @save="onSave" />
     <ElementMeta :element="element" v-bind="metadata" />
-    <component :is="sidebarName" :element="element" />
   </div>
 </template>
 
@@ -13,17 +13,21 @@ import { getElementId, getSidebarName } from '@tailor-cms/utils';
 
 import ElementMeta from './ElementMeta/index.vue';
 
+const eventBus = inject('$eventBus') as any;
+const storageService = useStorageService();
+
 const props = defineProps({
   element: { type: Object, required: true },
   metadata: { type: Object, default: () => ({}) },
 });
 
-const eventBus = inject('$eventBus') as any;
-
 const elementBus = eventBus.channel(`element:${getElementId(props.element)}`);
 provide('$elementBus', elementBus);
+provide('$storageService', storageService);
 
 const sidebarName = getSidebarName(props.element?.type);
+
+const onSave = (data: any) => elementBus.emit('save', data);
 </script>
 
 <style lang="scss" scoped>

apps/frontend/components/editor/Toolbar/ElementToolbar.vue

@@ -26,13 +26,14 @@ import * as utils from '@tailor-cms/utils';
 
 import DefaultToolbar from './DefaultToolbar.vue';
 
+const { $ceRegistry } = useNuxtApp() as any;
+const elementBus = inject('$elementBus') as any;
+
 const props = defineProps({
   element: { type: Object, required: true },
   embed: { type: Object, default: null },
 });
 
-const { $ceRegistry } = useNuxtApp() as any;
-
 const componentName = computed(() => {
   const { type } = props.element;
   if (utils.isQuestion(props.element.type)) return;
@@ -50,7 +51,7 @@ const config = computed(() => {
 });
 
 const componentExists = computed(() => !!$ceRegistry.get(props.element.type));
-const save = () => null; // store.dispatch('repository/contentElements/save');
+const save = (data: any) => elementBus.emit('save', data);
 </script>
 
 <style lang="scss" scoped>

apps/frontend/components/editor/Toolbar/ElementToolbarContainer.vue

@@ -24,5 +24,8 @@ const props = defineProps({
 });
 
 const elementBus = useContentElementBus(props.element);
+const storageService = useStorageService();
+
 provide('$elementBus', elementBus);
+provide('$storageService', storageService);
 </script>

apps/frontend/composables/useStorageService.ts

@@ -0,0 +1,11 @@
+import { useCurrentRepository } from '@/stores/current-repository';
+
+export const useStorageService = () => {
+  const { $storageService: storage } = useNuxtApp() as any;
+  const repositoryStore = useCurrentRepository();
+
+  return {
+    getUrl: (key: string) => storage.getUrl(repositoryStore.repositoryId, key),
+    upload: (file: any) => storage.upload(repositoryStore.repositoryId, file),
+  };
+};

extensions/content-elements/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@tailor-cms/ce-html-default-edit": "^0.0.5",
     "@tailor-cms/ce-html-default-server": "^0.0.5",
-    "@tailor-cms/ce-image-edit": "^0.0.3",
-    "@tailor-cms/ce-image-server": "^0.0.1"
+    "@tailor-cms/ce-image-edit": "^1.0.0",
+    "@tailor-cms/ce-image-server": "^1.0.0"
   }
 }

packages/core-components-next/src/components/ContentElement.vue

@@ -142,6 +142,7 @@ const focus = () => {
 onMounted(() => {
   elementBus.on('delete', () => emit('delete'));
   elementBus.on('save:meta', (meta) => emit('save:meta', meta));
+  elementBus.on('save', (data) => emit('save', onSave(data)));
 
   const deferSaveFlag = () => setTimeout(() => (isSaving.value = false), 1000);
   elementBus.on('saved', deferSaveFlag);

packages/extension-installer/src/ExtensionRegistry.js

@@ -148,7 +148,8 @@ export class ExtensionRegistry {
 
 // prettier-ignore
 const exportModuleTemplate = _.template(
-`<% _.forEach(entries, function(it, index) { %>import pkg<%- index %> from '<%- it %>';<%}); %>
+`<% _.forEach(entries, function(it, index) { %>import pkg<%- index %> from '<%- it %>';
+<%});%>
 // prettier-ignore
 export const elements = [
   <% entries.forEach(function(it, index) { %>pkg<%- index %>,

schemas/course-schema.js

@@ -92,23 +92,14 @@ export const SCHEMA = {
   // Temporary target both CE_IMAGE and IMAGE, will be removed once the
   // old frontend is removed
   elementMeta: [
-    {
-      type: 'IMAGE',
-      inputs: [
-        {
-          key: 'alt',
-          type: 'TEXTAREA',
-          label: 'Alt text',
-        },
-      ],
-    },
     {
       type: 'CE_IMAGE',
       inputs: [
         {
-          key: 'alt',
+          key: 'captions',
           type: 'TEXTAREA',
-          label: 'Alt text',
+          label: 'Captions',
+          placeholder: 'Enter captions...',
         },
       ],
     },