Merge pull request #90 from inovector/develop

improved design, renamed twitter, fixed editor pasting empy lines, fixed character counts
inovector · Apr 12, 2024 · c55df4c · c55df4c
2 parents 5290496 + ddaafa1
commit c55df4c
Show file tree

Hide file tree

Showing 32 changed files with 604 additions and 1,525 deletions.
diff --git a/config/mixpost.php b/config/mixpost.php
@@ -42,7 +42,8 @@
         'image/jpeg',
         'image/gif',
         'image/png',
-        'video/mp4'
+        'video/mp4',
+        'video/x-m4v'
     ],
 
     /*

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,14 +24,14 @@
     "dependencies": {
         "@inertiajs/vue3": "^1.0.2",
         "@jaames/iro": "^5.5.2",
-        "@tiptap/core": "^2.0.3",
-        "@tiptap/extension-document": "^2.0.0-beta.17",
-        "@tiptap/extension-history": "^2.0.0-beta.26",
-        "@tiptap/extension-link": "^2.0.0-beta.43",
-        "@tiptap/extension-placeholder": "^2.0.0-beta.53",
-        "@tiptap/extension-text": "^2.0.0-beta.17",
-        "@tiptap/extension-typography": "^2.0.0-beta.22",
-        "@tiptap/pm": "^2.0.3",
+        "@tiptap/core": "^2.2.3",
+        "@tiptap/extension-document": "^2.2.3",
+        "@tiptap/extension-history": "^2.2.3",
+        "@tiptap/extension-link": "^2.2.3",
+        "@tiptap/extension-placeholder": "^2.2.3",
+        "@tiptap/extension-text": "^2.2.3",
+        "@tiptap/extension-typography": "^2.2.3",
+        "@tiptap/pm": "^2.2.3",
         "@tiptap/vue-3": "^2.0.0-beta.96",
         "chart.js": "^4.1.2",
         "chartjs-plugin-zoom": "^2.0.0",
@@ -43,6 +43,7 @@
         "mitt": "^3.0.0",
         "nanoid": "^4.0.0",
         "nprogress": "^0.2.0",
+        "twemoji-parser": "^14.0.0",
         "twitter-text": "^3.1.0",
         "vue-flatpickr-component": "^9.0.6",
         "vuedraggable": "^4.1.0"

diff --git a/resources/css/custom.css b/resources/css/custom.css
@@ -23,6 +23,10 @@
         height: calc(theme('height.screen') - 90px);
     }
 
+    .form-field {
+        @apply max-w-xl;
+    }
+
     .link {
         @apply text-blue-500 hover:text-blue-400 transition-colors ease-in-out duration-200;
     }
@@ -38,19 +42,15 @@
     }
 
     .row-py {
-        @apply py-10;
-    }
-
-    .row-py {
-        @apply py-8;
+        @apply py-3 sm:py-6 lg:py-8;
     }
 
     .row-mb {
-        @apply mb-8;
+        @apply mb-3 sm:mb-6 lg:mb-8;
     }
 
     .row-mt {
-        @apply mb-8;
+        @apply mt-3 sm:mt-6 lg:mb-8;
     }
 
     .m-container {

diff --git a/resources/css/proseMirror.css b/resources/css/proseMirror.css
@@ -0,0 +1,11 @@
+.ProseMirror div.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: theme('colors.gray.400');
+    pointer-events: none;
+    height: 0;
+}
+
+.ProseMirror a {
+    color: theme('colors.blue.500');
+}
diff --git a/resources/js/Components/Account/Account.vue b/resources/js/Components/Account/Account.vue
@@ -6,7 +6,7 @@ import ExclamationCircleIcon from "@/Icons/ExclamationCircle.vue";
 
 const props = defineProps({
     imgUrl: {
-        type: String,
+        type: [String, null],
         required: true,
     },
     provider: {
@@ -70,9 +70,9 @@ const iconClasses = computed(() => {
                 <ExclamationCircleIcon :class="iconClasses"/>
             </span>
             <span :class="[iconWrapperClasses, {'grayscale': !active}]"
-                  class="flex items-center justify-center absolute bg-white p-2 rounded-full ">
+                  class="flex items-center justify-center absolute bg-white p-md rounded-full">
                 <span>
-                    <ProviderIcon :provider="props.provider" :class="[iconClasses]"/>
+                    <ProviderIcon :provider="props.provider"/>
                 </span>
             </span>
         </span>

diff --git a/resources/js/Components/Account/AddTwitterAccount.vue b/resources/js/Components/Account/AddTwitterAccount.vue
@@ -8,8 +8,8 @@ import TwitterIcon from "@/Icons/Twitter.vue";
             <TwitterIcon class="text-twitter"/>
         </span>
         <span class="flex flex-col items-start">
-            <span class="font-semibold">Twitter</span>
-            <span>Connect a new Twitter profile</span>
+            <span class="font-semibold">X</span>
+            <span>Connect a new X profile</span>
         </span>
     </Link>
 </template>
diff --git a/resources/js/Components/Calendar/CalendarToolbar.vue b/resources/js/Components/Calendar/CalendarToolbar.vue
@@ -7,7 +7,7 @@ const calendarFilter = inject('calendarFilter');
 </script>
 <template>
     <div class="flex items-center space-x-md">
-        <PostsFilter v-model="calendarFilter"/>
         <CalendarSwitchType/>
+        <PostsFilter v-model="calendarFilter"/>
     </div>
 </template>
diff --git a/resources/js/Components/Layout/HorizontalGroup.vue b/resources/js/Components/Layout/HorizontalGroup.vue
@@ -3,14 +3,26 @@ defineProps({
     flexColMobile: {
         type: Boolean,
         default: true,
-    }
+    },
+    forceFullWidth: {
+        type: Boolean,
+        default: false,
+    },
+    forceFlexStart: {
+        type: Boolean,
+        default: false,
+    },
+    removeFullWidthFromDefaultSlot: {
+        type: Boolean,
+        default: false,
+    },
 })
 </script>
 <template>
     <div>
-        <div class="flex justify-between items-center">
-            <div class="w-full flex sm:flex-row sm:items-center sm:justify-between"
-                 :class="{'flex-col': flexColMobile}">
+        <div :class="{'w-full': forceFullWidth,  'form-field': !forceFullWidth}" class="flex justify-between items-center">
+            <div class="w-full flex sm:flex-row sm:justify-between"
+                 :class="{'flex-col': flexColMobile, 'items-start': forceFlexStart, 'sm:items-center': !forceFlexStart}">
                 <div v-if="$slots.title || $slots.description" class="flex flex-col justify-start w-full sm:mr-xs">
                     <div v-if="$slots.title"
                          class="font-medium">
@@ -22,7 +34,7 @@ defineProps({
                     </div>
                 </div>
 
-                <div v-if="$slots.default" class="w-full flex justify-start mt-xs sm:mt-0">
+                <div v-if="$slots.default" :class="{'w-full': !removeFullWidthFromDefaultSlot}" class="flex justify-start mt-xs sm:mt-0">
                     <slot/>
                 </div>
             </div>

diff --git a/resources/js/Components/Navigation/Tab.vue b/resources/js/Components/Navigation/Tab.vue
@@ -13,6 +13,10 @@ defineProps({
         :aria-selected="active ? 'true' : 'false'"
         :class="{'border-indigo-500 text-indigo-500': active, 'hover:text-indigo-500':  !active}"
         class="flex items-center border-b-2 border-gray-200 pb-2 mr-5 last:mr-0 font-medium transition-colors ease-in-out duration-200">
+         <span v-if="$slots.icon" class="inline-flex" :class="{'mr-xs': $slots.default}">
+            <slot name="icon"/>
+         </span>
+
         <slot/>
     </button>
 </template>
diff --git a/resources/js/Components/Package/Editor.vue b/resources/js/Components/Package/Editor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {ref, onMounted, onUnmounted, useAttrs, computed, watch} from "vue";
+import {ref, onMounted, onUnmounted, useAttrs, watch} from "vue";
 import {useEditor, EditorContent} from '@tiptap/vue-3'
 import useEditorHelper from "@/Composables/useEditor";
 import emitter from "@/Services/emitter";
@@ -9,6 +9,7 @@ import Typography from '@tiptap/extension-typography'
 import StripLinksOnPaste from "@/Extensions/TipTap/StripLinksOnPaste"
 import Hashtag from "@/Extensions/TipTap/Hashtag"
 import UserTag from "@/Extensions/TipTap/UserTag"
+import ClipboardTextParser from "../../Extensions/ProseMirror/ClipboardTextParser";
 
 const attrs = useAttrs();
 
@@ -22,13 +23,12 @@ const props = defineProps({
     },
     placeholder: {
         type: String,
-        default: ''
+        default: 'Start writing your post...'
     }
 });
 
 const emit = defineEmits(['update']);
 
-const el = ref();
 const focused = ref(false);
 
 const {defaultExtensions} = useEditorHelper();
@@ -39,7 +39,7 @@ const editor = useEditor({
     extensions: [...defaultExtensions, ...[
         History,
         Placeholder.configure({
-            placeholder: 'Start writing your post...',
+            placeholder: props.placeholder,
         }),
         Typography.configure({
             openDoubleQuote: false,
@@ -55,6 +55,7 @@ const editor = useEditor({
         attributes: {
             class: 'focus:outline-none min-h-[150px]',
         },
+        clipboardTextParser: ClipboardTextParser,
     },
     onUpdate: () => {
         emit('update', editor.value.getHTML());
@@ -67,10 +68,6 @@ const editor = useEditor({
     }
 });
 
-const bodyText = computed(() => {
-    return editor.value && !editor.value.isEmpty ? editor.value.view.dom.innerText : '';
-});
-
 const isEditor = (id) => {
     return attrs.hasOwnProperty('id') && id === attrs.id;
 }
@@ -110,22 +107,9 @@ watch(() => props.value, (value) => {
 </script>
 <template>
     <div
-        :class="{'border-indigo-200 ring ring-indigo-200 ring-opacity-50': focused}"
+        :class="{'border-primary-200 ring ring-primary-200 ring-opacity-50': focused}"
         class="border border-gray-200 rounded-md p-md pb-xs text-base transition-colors ease-in-out duration-200">
         <editor-content :editor="editor"/>
-        <slot :body-text="bodyText"/>
+        <slot/>
     </div>
 </template>
-<style>
-.ProseMirror p.is-editor-empty:first-child::before {
-    content: attr(data-placeholder);
-    float: left;
-    color: theme('colors.gray.400');
-    pointer-events: none;
-    height: 0;
-}
-
-.ProseMirror a {
-    color: theme('colors.blue.500');
-}
-</style>
diff --git a/resources/js/Components/Post/PostCharacterCount.vue b/resources/js/Components/Post/PostCharacterCount.vue
@@ -1,5 +1,7 @@
 <script setup>
 import {computed, inject, onMounted, watch} from "vue";
+import CountTextCharacters from "../../Util/CountTextCharacters";
+import Mastodon from "../../SocialProviders/Mastodon";
 import Twitter from "twitter-text";
 import {findIndex, minBy, debounce, filter} from "lodash";
 import useEditor from "@/Composables/useEditor";
@@ -19,15 +21,11 @@ const props = defineProps({
     activeVersion: {
         type: Number,
         required: true,
-    },
-    text: { // Text of current version
-        type: String,
-        default: ''
     }
 });
 
 const {accountHasVersion} = usePostVersions();
-const {extractTextFromHtml} = useEditor();
+const {getTextFromHtmlString} = useEditor();
 
 const accountsWithTextLimit = computed(() => {
     return props.selectedAccounts.filter((account) => {
@@ -105,15 +103,23 @@ const getEnabledVersions = () => {
     });
 }
 
-const getTextLength = (provider, text = null) => {
-    const _text = (text ? text : props.text).replace(/[\r\n]+/g, ' ')
+const getPostBody = (version) => {
+    const item = props.versions.find((versionItem) => versionItem.account_id === version);
+
+    return item ? item.content[0].body : '';
+}
 
-    return {
-        'twitter': Twitter.getTweetLength(_text),
-        'facebook_page': _text.length,
-        'facebook_group': _text.length,
-        'mastodon': _text.length,
-    }[provider]
+const getContentLength = (provider, text = null) => {
+    const content = text ? text : getTextFromHtmlString(getPostBody(props.activeVersion));
+
+    switch (provider) {
+        case 'mastodon':
+            return Mastodon.getPostLength(content);
+        case 'twitter':
+            return Twitter.getTweetLength(content);
+        default:
+            return CountTextCharacters.getLength(content);
+    }
 }
 
 const isAccountSelected = (accountId) => {
@@ -152,9 +158,9 @@ const initLimits = () => {
             return;
         }
 
-        const text = extractTextFromHtml(version.content[0].body);
+        const text = getTextFromHtmlString(version.content[0].body);
         const provider = getProvider(version.account_id);
-        const remaining = calc(limit, getTextLength(provider, text));
+        const remaining = calc(limit, getContentLength(provider, text));
 
         pushLimit({
             account_id: version.account_id,
@@ -175,7 +181,7 @@ const limitActiveVersion = computed(() => {
 });
 
 const characterUsedActiveVersion = computed(() => {
-    return getTextLength(providerActiveVersion.value);
+    return getContentLength(providerActiveVersion.value);
 });
 
 const remaining = computed(() => {

diff --git a/resources/js/Components/Post/PostForm.vue b/resources/js/Components/Post/PostForm.vue
@@ -206,8 +206,7 @@ const {insertEmoji, insertContent, focusEditor} = useEditor();
 
                         <PostCharacterCount :selectedAccounts="selectedAccounts"
                                             :activeVersion="activeVersion"
-                                            :versions="form.versions"
-                                            :text="props.bodyText"/>
+                                            :versions="form.versions"/>
                     </div>
                 </template>
             </Editor>

diff --git a/resources/js/Components/ServiceForm/TenorServiceForm.vue b/resources/js/Components/ServiceForm/TenorServiceForm.vue
@@ -8,6 +8,7 @@ import PrimaryButton from "@/Components/Button/PrimaryButton.vue";
 import HorizontalGroup from "@/Components/Layout/HorizontalGroup.vue";
 import Error from "@/Components/Form/Error.vue";
 import ReadDocHelp from "@/Components/Util/ReadDocHelp.vue";
+import TenorIcon from "@/Icons/Tenor.vue";
 
 const props = defineProps({
     form: {
@@ -37,6 +38,7 @@ const save = () => {
     <Panel>
         <template #title>
             <div class="flex items-center">
+                <span class="mr-xs"><TenorIcon/></span>
                 Tenor
             </div>
         </template>

diff --git a/resources/js/Components/Util/Notifications.vue b/resources/js/Components/Util/Notifications.vue
@@ -92,6 +92,7 @@ watch(() => flash.value, () => {
         open('info', flash.value.info);
     }
 }, {
+    immediate: true,
     deep: true
 })
 </script>