@zipify/wysiwyg 3.4.1-dev → 3.5.0-ai-prototype

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

@@ -0,0 +1,185 @@
+<template>
+    <div class="zw-position--relative" ref="wrapperRef">
+        <Button icon skin="toolbar" :active="isActive" @click="toggler.open" v-tooltip="'Generate text'">
+            <Icon name="sparkles" size="28px" />
+        </Button>
+
+        <Modal class="zw-suggestion-modal" :toggler="toggler" ref="modalRef" focus-first-control>
+
+            <AiControlHeader />
+            <form class="zw-link-modal__body" @submit.prevent="generateText">
+
+                <AiSuggestionItem
+                    v-if="isLoading"
+                    :suggestion="{ content: 'Working on it...', state: 'loading' }"
+                />
+
+                <AiSuggestionItem
+                    v-else-if="lastSuggestions"
+                    :suggestion="lastSuggestions"
+                />
+
+                <label class="zw-field__label">
+                    {{ textAreaLabel }}
+                </label>
+
+                <div class="zw-position--relative">
+                    <TextArea
+                        class="zw-margin-bottom--sm"
+                        v-model="prompt"
+                    />
+                    <Button type="submit" class="zw-ai-component__send-button">
+                        <Icon auto-color class="zw-ai-component__icon" name="send" size="32px" />
+                    </Button>
+                </div>
+
+                <Button :disabled="!lastSuggestions" type="button" skin="primary" @click="applyText">
+                    Apply
+                </Button>
+            </form>
+
+
+        </Modal>
+    </div>
+</template>
+
+<script>
+import { computed, ref, inject, unref } from 'vue';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { tooltip } from '../../../../directives';
+import { Button, Icon, Modal, TextArea, useModalToggler } from '../../../base';
+import AiControlHeader from './AiControlHeader';
+import AiSuggestionItem from './AiSuggestionItem';
+
+export default {
+    name: 'AiControl',
+
+    components: {
+        Modal,
+        Icon,
+        Button,
+        TextArea,
+        AiControlHeader,
+        AiSuggestionItem
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const wrapperRef = ref(null);
+        const modalRef = ref(null);
+
+        const prompt = ref('');
+        const suggestions = ref([]);
+        const isLoading = ref(false);
+
+        const textAreaLabel = computed(() => {
+            return suggestions.value.length ? 'Tell AI what to do next…' : 'Write you request';
+        });
+
+        const lastSuggestions = computed(() => suggestions.value[suggestions.value.length - 1]);
+
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const onBeforeOpened = () => {};
+
+        const toggler = useModalToggler({
+            onBeforeOpened: () => onBeforeOpened(),
+            wrapperRef,
+            modalRef
+        });
+
+        const onAction = async (action) => {
+            isLoading.value = true;
+
+            const lastSuggestions = suggestions.value[suggestions.value.length - 1];
+
+            const context = lastSuggestions ? lastSuggestions.content : '';
+
+            const result = await editor.commands.generateText({ prompt: action, context });
+
+            isLoading.value = false;
+            suggestions.value.push(result);
+        };
+
+        const generateText = async () => {
+            if(isLoading.value) return;
+
+            isLoading.value = true;
+
+            const lastSuggestions = suggestions.value[suggestions.value.length - 1];
+
+            const context = lastSuggestions ? lastSuggestions.content : '';
+
+            const result = await editor.commands.generateText({ prompt: prompt.value, context });
+
+            isLoading.value = false;
+            prompt.value = '';
+            suggestions.value.push(result);
+        };
+
+        const applyText = () => {
+            editor.commands.setContent(lastSuggestions.value.content);
+            toggler.close();
+            suggestions.value = [];
+            prompt.value = '';
+        };
+
+        const isActive = computed(() => unref(toggler.isOpened));
+
+        return {
+            wrapperRef,
+            modalRef,
+            toggler,
+            isActive,
+            prompt,
+            generateText,
+            lastSuggestions,
+            textAreaLabel,
+            isLoading,
+            onAction,
+            applyText
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-suggestion-modal {
+    width: 500px;
+}
+
+.zw-link-modal__body {
+    padding: var(--zw-offset-sm);
+}
+
+.zw-generated-text__suggestion {
+    font-size: 14px;
+    color: #908E8E;
+}
+
+.zw-ai-component__send-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 16px;
+}
+
+.zw-ai-component__icon {
+    color: #CDD1DC;
+}
+
+.zw-ai-component__send-button:hover .zw-ai-component__icon {
+    color: #878DA2;
+    transition: color 0.1s ease-in-out;
+}
+
+.zw-field__label {
+    display: inline-block;
+    font-size: var(--zw-font-size-xxs);
+    padding-bottom: var(--zw-offset-xxs);
+    line-height: var(--zw-line-height-xxs);
+}
+</style>

package/lib/components/toolbar/controls/aiComponent/AiControlHeader.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="zw-link-modal-header">
+        <span class="zw-link-modal-header__title">Generate text</span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'AiControlHeader'
+};
+</script>
+
+<style scoped>
+.zw-link-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--zw-offset-sm);
+    border-bottom: 2px solid rgb(var(--zw-color-n5));
+}
+
+.zw-link-modal-header__title {
+    text-transform: uppercase;
+    font-weight: var(--zw-font-weight-semibold);
+    font-size: var(--zw-font-size-xxs);
+    color: rgb(var(--zw-color-white));
+}
+</style>

package/lib/components/toolbar/controls/aiComponent/AiSuggestionItem.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="zw-ai-component__suggestion">
+        <p v-if="!isLoading" class="zw-ai-component-suggestion__request zw-margin-bottom--sm">
+            {{ suggestion.request }}
+        </p>
+        <p :class="{'zw-margin-bottom--sm': !isLoading }" v-html="suggestion.content" />
+
+        <Button type="button" v-if="!isLoading" @click="sendAction('Rewrite text')" class="zw-ai-component-suggestion__button">
+            ✍ Rewrite text
+        </Button>
+    </div>
+</template>
+
+<script>
+import { inject, computed } from 'vue';
+import { Button } from '../../../base';
+import { InjectionTokens } from '../../../../injectionTokens';
+
+export default {
+    name: 'AiSuggestionItem',
+
+    components: {
+        Button
+    },
+
+    props: {
+        suggestion: {
+            type: Object,
+            required: true
+        }
+    },
+
+    setup(props, { emit }) {
+        const isLoading = computed(() => props.suggestion.state === 'loading');
+
+        const sendAction = (action) => {
+            emit('action', action);
+        };
+
+        return {
+            isLoading,
+            sendAction
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-ai-component__suggestion {
+    font-size: 14px;
+    margin-bottom: 8px;
+    padding: 16px 8px;
+    color: #CDD1DC;
+    border-radius: 2px;
+}
+
+.zw-ai-component-suggestion__request {
+    font-size: 12px;
+    color: #666;
+}
+
+.zw-ai-component-suggestion__button {
+    font-size: 14px;
+    padding: 4px 8px;
+    background-color: #A4A4A4;
+    color: #FFF;
+    border-radius: 2px;
+}
+
+.zw-ai-component-suggestion__button:hover {
+    opacity: 0.8;
+    background-color: #3AAA35;
+}
+</style>

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

@@ -13,4 +13,5 @@ export { default as AlignmentControl } from './AlignmentControl';
 export { default as LineHeightControl } from './LineHeightControl';
 export { default as ListControl } from './ListControl';
 export { default as RemoveFormatControl } from './RemoveFormatControl';
+export { default as AiControl } from './aiComponent/AiControl';
 export { LinkControl } from './link';

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

@@ -1,6 +1,7 @@
 <template>
     <div>
         <ToolbarRow>
+            <AiControl />
             <StylePresetControl />
             <ToolbarDivider vertical />
             <FontFamilyControl />
@@ -64,7 +65,8 @@ import {
     UnderlineControl,
     ListControl,
     RemoveFormatControl,
-    LinkControl
+    LinkControl,
+    AiControl
 } from '../controls';
 
 export default {
@@ -89,7 +91,8 @@ export default {
         LineHeightControl,
         ListControl,
         RemoveFormatControl,
-        LinkControl
+        LinkControl,
+        AiControl
     }
 };
 </script>

package/lib/extensions/AiComponent.js

@@ -0,0 +1,21 @@
+import { toRef } from 'vue';
+import { Extension } from '@tiptap/vue-2';
+import { createCommand } from '../utils';
+
+export const AiComponent = Extension.create({
+    name: 'device_manager',
+
+    addCommands() {
+        return {
+            // _getAiAdapter: createCommand(() => toRef(this.options, 'device'))
+
+            generateText: createCommand(async ({ commands }, { prompt, context }) => {
+                const aiComponent = this.options.aiComponent;
+                const result = await aiComponent.generateText({ prompt, context });
+
+                result.content = result.content.replace(/\n/g, '');
+                return result;
+            })
+        };
+    }
+});

package/lib/extensions/index.js

@@ -1,4 +1,5 @@
 import { reactive, toRef, watch } from 'vue';
+import FloatingMenu from '@tiptap/extension-floating-menu';
 import { StylePresetRenderer } from '../services';
 import { buildCoreExtensions } from './core';
 import { FontFamily } from './FontFamily';
@@ -17,6 +18,7 @@ import { List } from './list';
 import { Link } from './Link';
 import { Superscript } from './Superscript';
 import { Margin } from './Margin';
+import { AiComponent } from './AiComponent';
 
 export function buildExtensions(options) {
     const getPresetById = (id) => options.presetsRef.value.find((preset) => preset.id === id);
@@ -37,6 +39,9 @@ export function buildExtensions(options) {
                 linkPresetId: options.linkPresetId
             })
         }),
+        AiComponent.configure({
+            aiComponent: options.aiComponent
+        }),
         List.configure({
             baseClass: options.baseListClass,
             presetClass: options.basePresetClass + options.defaultPresetId

package/package.json

@@ -1,13 +1,8 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "3.4.1-dev",
+  "version": "3.5.0-ai-prototype",
   "description": "Zipify modification of TipTap text editor",
-  "exports": {
-    ".": {
-      "node": "./dist/wysiwyg.cjs",
-      "default": "./dist/wysiwyg.mjs"
-    }
-  },
+  "main": "dist/wysiwyg.mjs",
   "bin": {
     "zipify-wysiwyg": "bin/cli"
   },
@@ -26,32 +21,31 @@
     "lib:release": "export $(cat ./.env | xargs) && release-it",
     "cli:build": "NODE_ENV=production rollup --config config/build/cli.config.js --bundleConfigAsCjs",
     "cli:dev": "NODE_ENV=development rollup --config config/build/cli.config.js --bundleConfigAsCjs --watch",
-    "node:build": "NODE_ENV=production rollup --config config/build/node.config.js --bundleConfigAsCjs",
     "example:start": "NODE_ENV=development vite serve --config config/build/example.config.js",
     "example:build": "NODE_ENV=production vite build --config config/build/example.config.js",
     "test:unit": "jest .",
     "lint:js": "eslint ./lib",
     "lint:css": "stylelint ./lib/**/*.{css,vue}",
     "optimize-svg": "svgo --config ./config/svgo.js",
-    "gzip": "gzipper compress",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.6",
-    "@tiptap/core": "2.0.0-beta.215",
-    "@tiptap/extension-document": "2.0.0-beta.215",
-    "@tiptap/extension-heading": "2.0.0-beta.215",
-    "@tiptap/extension-history": "2.0.0-beta.215",
-    "@tiptap/extension-link": "2.0.0-beta.215",
-    "@tiptap/extension-list-item": "2.0.0-beta.215",
-    "@tiptap/extension-paragraph": "2.0.0-beta.215",
-    "@tiptap/extension-text": "2.0.0-beta.215",
-    "@tiptap/pm": "^2.0.0-beta.215",
-    "@tiptap/vue-2": "2.0.0-beta.215",
+    "@popperjs/core": "^2.11.7",
+    "@tiptap/core": "^2.0.0",
+    "@tiptap/extension-document": "^2.0.0",
+    "@tiptap/extension-floating-menu": "^2.0.3",
+    "@tiptap/extension-heading": "^2.0.0",
+    "@tiptap/extension-history": "^2.0.0",
+    "@tiptap/extension-link": "^2.0.0",
+    "@tiptap/extension-list-item": "^2.0.0",
+    "@tiptap/extension-paragraph": "^2.0.0",
+    "@tiptap/extension-text": "^2.0.0",
+    "@tiptap/pm": "^2.0.0",
+    "@tiptap/vue-2": "^2.0.0",
     "commander": "^10.0.0",
-    "jsdom": "^21.1.0",
+    "jsdom": "^21.1.1",
     "lodash": "^4.17.21",
-    "simplebar": "^6.2.0"
+    "simplebar": "^6.2.4"
   },
   "peerDependencies": {
     "@zipify/colorpicker": "^2.2",
@@ -66,11 +60,11 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
+    "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
-    "@babel/runtime": "^7.20.13",
+    "@babel/runtime": "^7.21.0",
     "@optimize-lodash/rollup-plugin": "^4.0.3",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.0.1",
@@ -79,25 +73,24 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.0",
     "@vue/test-utils": "^1.3.4",
-    "@vue/vue2-jest": "^29.2.2",
-    "@zipify/colorpicker": "^2.2.2",
-    "@zipify/eslint-config": "^1.1.2",
-    "babel-jest": "^29.4.2",
-    "eslint": "8.33.0",
+    "@vue/vue2-jest": "^29.2.3",
+    "@zipify/colorpicker": "^2.3",
+    "@zipify/eslint-config": "^1.2.0",
+    "babel-jest": "^29.5.0",
+    "eslint": "8.37.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-vue": "^9.9.0",
-    "gzipper": "^7.2.0",
+    "eslint-plugin-vue": "^9.10.0",
     "husky": "^8.0.3",
-    "jest": "^29.4.2",
-    "jest-environment-jsdom": "^29.4.2",
-    "lint-staged": "^13.1.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "lint-staged": "^13.2.0",
     "postcss-html": "^1.5.0",
-    "release-it": "^15.6.0",
-    "rollup": "^3.14.0",
+    "release-it": "^15.9.3",
+    "rollup": "^3.20.2",
     "stylelint": "^14.16.1",
     "svgo": "^3.0.2",
-    "vite": "^4.1.1",
+    "vite": "^4.2.1",
     "vite-plugin-vue2": "^2.0.3",
     "vue": "^2.7.14",
     "vue-template-compiler": "^2.7.14"

package/ci/example/deploy.sh

@@ -1,25 +0,0 @@
-#!/usr/bin/env bash
-
-export AWS_CONFIG_FILE=./ci/example/.aws-credentials
-
-function throw_error() {
-    echo -e "\033[0;31m \n\n$1\n\n";
-    exit;
-}
-
-if ! command -v aws &> /dev/null; then
-  throw_error 'AWS CLI not found. Download from https://aws.amazon.com/cli/'
-fi;
-
-if [ ! -f "$AWS_CONFIG_FILE" ]; then
-  throw_error 'AWS credentials config not found'
-fi;
-
-echo Building... && \
-rm -rf ./example/dist && \
-npm run example:build > /dev/null && \
-npx --yes gzipper compress ./example/dist > /dev/null && \
-echo Uploading... && \
-BRANCH_NAME=$(git branch --show-current) && \
-aws s3 sync --acl public-read --cache-control 'max-age=0,no-cache,no-store,must-revalidate' "./example/dist" "s3://zipify-wysiwyg/$BRANCH_NAME" > /dev/null && \
-echo "on https://zipify-wysiwyg.s3.eu-central-1.amazonaws.com/$BRANCH_NAME/index.html"

package/config/build/node.config.js

@@ -1,38 +0,0 @@
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { getBabelOutputPlugin } from '@rollup/plugin-babel';
-import terser from '@rollup/plugin-terser';
-import commonjs from '@rollup/plugin-commonjs';
-import replace from '@rollup/plugin-replace';
-import json from '@rollup/plugin-json';
-import { resolvePath } from './settings';
-
-export default {
-    input: resolvePath('./lib/entryNode.js'),
-    output: {
-        file: resolvePath('./dist/wysiwyg.cjs'),
-        format: 'cjs',
-        plugins: [
-            getBabelOutputPlugin({
-                presets: [
-                    ['@babel/preset-env', { targets: { node: 18 } }]
-                ]
-            }),
-            terser({ toplevel: true })
-        ]
-    },
-
-    plugins: [
-        replace({
-            preventAssignment: true,
-            values: { 'import.meta.glob': '(() => ({}))' }
-        }),
-        nodeResolve({
-            extensions: ['*', '.js', '.json'],
-            preferBuiltins: true
-        }),
-        commonjs({ ignore: ['canvas'] }),
-        json()
-    ],
-
-    external: ['jsdom']
-};