@zipify/wysiwyg 3.4.2 → 3.5.0-1

package/example/AiComponent.vue

@@ -0,0 +1,27 @@
+<template>
+    <Modal :toggler="toggler" focus-first-control>
+        Modal content
+    </Modal>
+</template>
+
+<script>
+import { Modal } from '../lib/components/base';
+
+export default {
+    name: 'AiComponent',
+
+    components: {
+        Modal
+    },
+    props: {
+        editor: {
+            type: Object,
+            required: true
+        },
+        toggler: {
+            type: Object,
+            required: true
+        }
+    }
+};
+</script>

package/example/ExampleApp.vue

@@ -42,6 +42,7 @@
             :page-blocks="pageBlocks"
             :active="isActive"
             :readonly="isReadonly"
+            :ai-component="aiComponent"
             @update-favorite-colors="updateFavoriteColors"
         />
         <pre class="zw-content-structure" v-html="structurePreview" />
@@ -54,6 +55,7 @@ import { Wysiwyg } from '../lib/entryLib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';
 import { PAGE_BLOCKS } from './pageBlocks';
+import AiComponent from './AiComponent';
 
 function getInitialContent() {
     const data = sessionStorage.getItem('wswg-data');
@@ -75,6 +77,7 @@ export default {
     },
 
     setup() {
+        const aiComponent = ref(AiComponent);
         const wswgRef = ref(null);
         const content = ref(getInitialContent());
         const presets = ref(PRESETS);
@@ -135,7 +138,8 @@ export default {
             presets,
             isActive,
             pageBlocks,
-            isReadonly
+            isReadonly,
+            aiComponent
         };
     }
 };

package/lib/Wysiwyg.vue

@@ -4,6 +4,7 @@
             :toolbar="toolbar"
             :device="device"
             :popup-mode="popupMode"
+            :ai-component="aiComponent"
             ref="toolbarRef"
         />
 
@@ -132,6 +133,12 @@ export default {
         window: {
             required: false,
             default: () => window
+        },
+
+        aiComponent: {
+            type: Object,
+            required: false,
+            default: null
         }
     },
 

package/lib/assets/icons/sparkles.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 20 20">
+  <path fill="#FFBA00" d="m13.8 4-.7 1.5-1.5.7 1.5.7.7 1.5.7-1.5 1.5-.7-1.5-.7m-6.1.1L7 8.6 4 10l3 1.4 1.4 3 1.3-3 3-1.4-3-1.4m4.1 3-.7 1.5-1.5.7 1.5.7.7 1.5.7-1.5 1.5-.7-1.5-.7"/>
+</svg>

package/lib/components/toolbar/Toolbar.vue

@@ -2,7 +2,7 @@
     <keep-alive>
         <transition name="zw-toolbar-" duration="150">
             <div class="zw-toolbar" :style="toolbarStyles" ref="toolbarRef" v-if="isVisible">
-                <component :is="layoutComponent" />
+                <component :is="layoutComponent" :ai-component="aiComponent" />
             </div>
         </transition>
     </keep-alive>
@@ -30,6 +30,12 @@ export default {
         popupMode: {
             type: Boolean,
             required: true
+        },
+
+        aiComponent: {
+            type: Object,
+            required: false,
+            default: null
         }
     },
 

package/lib/components/toolbar/controls/AiControl.vue

@@ -0,0 +1,75 @@
+<template>
+    <div ref="wrapperRef">
+        <Button icon skin="toolbar" :active="isActive" @click="toggler.open" v-tooltip.lg="'Zipify AI is in Beta. Please check your text for inaccuracies'">
+            <Icon name="sparkles" size="28px" />
+            <span class="zw-ai-control__caption">AI</span>
+        </Button>
+
+        <component
+            :is="aiComponent"
+            :ref="modalRef"
+            :editor="editor"
+            :toggler="toggler"
+        />
+    </div>
+</template>
+
+<script>
+import { inject, ref, unref, computed } from 'vue';
+import { Button, Icon, useModalToggler } from '../../base';
+import { InjectionTokens } from '../../../injectionTokens';
+import { tooltip } from '../../../directives';
+
+export default {
+    name: 'AiControl',
+
+    components: {
+        Button,
+        Icon
+    },
+
+    directives: {
+        tooltip
+    },
+
+    props: {
+        aiComponent: {
+            type: Object,
+            required: true
+        }
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+        const wrapperRef = ref(null);
+        const modalRef = ref(null);
+
+        const onBeforeOpened = () => {};
+
+        const toggler = useModalToggler({
+            onBeforeOpened: () => onBeforeOpened(),
+            wrapperRef,
+            modalRef
+        });
+
+        const isActive = computed(() => unref(toggler.isOpened));
+
+        return {
+            editor,
+            wrapperRef,
+            modalRef,
+            toggler,
+            isActive
+        };
+    }
+};
+</script>
+
+
+<style scoped>
+.zw-ai-control__caption {
+    padding-left: var(--zw-offset-xxs);
+    padding-right: var(--zw-offset-xs);
+}
+</style>
+

package/lib/components/toolbar/controls/index.js

@@ -14,3 +14,4 @@ export { default as LineHeightControl } from './LineHeightControl';
 export { default as ListControl } from './ListControl';
 export { default as RemoveFormatControl } from './RemoveFormatControl';
 export { LinkControl } from './link';
+export { default as AiControl } from './AiControl';

package/lib/components/toolbar/layouts/ToolbarDesktop.vue

@@ -1,6 +1,12 @@
 <template>
     <div>
         <ToolbarRow>
+            <template v-if="aiComponent">
+                <AiControl
+                    :ai-component="aiComponent"
+                />
+                <ToolbarDivider vertical />
+            </template>
             <StylePresetControl />
             <ToolbarDivider vertical />
             <FontFamilyControl />
@@ -64,7 +70,8 @@ import {
     UnderlineControl,
     ListControl,
     RemoveFormatControl,
-    LinkControl
+    LinkControl,
+    AiControl
 } from '../controls';
 
 export default {
@@ -89,7 +96,16 @@ export default {
         LineHeightControl,
         ListControl,
         RemoveFormatControl,
-        LinkControl
+        LinkControl,
+        AiControl
+    },
+
+    props: {
+        aiComponent: {
+            type: Object,
+            required: false,
+            default: null
+        }
     }
 };
 </script>

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "3.4.2",
+  "version": "3.5.0-1",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
+  "exports": {
+    ".": "./dist/wysiwyg.mjs",
+    "./dist/*": "./dist/*",
+    "./components": "./lib/components/base/index.js"
+  },
   "bin": {
     "zipify-wysiwyg": "bin/cli"
   },