@ozdao/prometheus-framework 0.2.155 → 0.2.157

package/src/modules/community/components/pages/BlogPost.vue

@@ -20,49 +20,39 @@
 
 
     <TransitionGroup tag="ul" name="fade" class="container">
-      <CardBlogpost 
-          v-if="!isLoading && blogpost"
-          @click="$router.push({name: 'Blogpost', params: {url: blogpost.url}})" 
-          :blogpost="blogpost" 
-          :user="auth.state.user._id"
-          :type="'blogpostPage'"
-          class="mn-b-medium"
-        >
-        <section>
-					<component
-						v-if="blogpost && blogpost.content"
-						v-for="(block, index) in blogpost.content"
-						:is="ComponentMap[block.type]"
-						:key="index"
-						:index="index"
-						:component="block"
-						:prop="block"
-						:class="block.class"
-						content="content"
-						v-bind="getBlockProps(block)"
-						class="mn-b-regular"
-					/>
-				</section>
+    	<CardBlogpost 
+        v-if="!isLoading && blogpost"
+        @click="$router.push({name: 'Blogpost', params: {url: blogpost.url}})" 
+        :blogpost="blogpost" 
+        :user="auth.state.user._id"
+        :type="'blogpostPage'"
+        :hideTitle="true"
+        class="mn-b-medium"
+      >
+	      <Viewer
+	        v-if="blogpost && blogpost.content"
+	        :content="blogpost.content"
+	      />
 
 				<a v-if="blogpost.source" :href="blogpost.source" target="_blank" class="mn-b-semi d-block w-max radius-big pd-thin bg-black t-white">
 					Check Source 🔗
 				</a>
-				
-      </CardBlogpost>
-
-     	<h3 class="mn-b-small">Recommended Communities</h3>
-			<Publics 
-				class="mn-b-small"
-			/>
-
-      <Comments 
-        v-if="!isLoading && blogpost" 
-        :type="'blogpost'" 
-        :target="blogpost._id" 
-        :owner="auth.state.user._id"
-      />
-        
-    </TransitionGroup>  
+			
+    </CardBlogpost>
+
+   	<h3 class="mn-b-small">Recommended Communities</h3>
+		<Publics 
+			class="mn-b-small"
+		/>
+
+    <Comments 
+      v-if="!isLoading && blogpost" 
+      :type="'blogpost'" 
+      :target="blogpost._id" 
+      :owner="auth.state.user._id"
+    />
+      
+  </TransitionGroup>  
   
   </section>
 </template>
@@ -78,9 +68,7 @@
 	import Publics  		from '@pf/src/modules/organizations/components/sections/Publics.vue'
 	import Comments from '@pf/src/modules/community/components/sections/Comments.vue';
 
-	import Image  from '@pf/src/modules/constructor/components/elements/Image.vue';
-	import VideoPlayer  from '@pf/src/modules/constructor/components/elements/VideoPlayer.vue';
-	import Embed  from '@pf/src/modules/constructor/components/elements/Embed.vue';
+	import Viewer from '@pf/src/modules/constructor/components/sections/Viewer.vue';
 
 	import * as blog from '@pf/src/modules/community/store/blogposts.js';
 	import * as auth from '@pf/src/modules/auth/store/auth';
@@ -101,31 +89,6 @@
 		blogpost.value = data[0];
 		isLoading.value = false;
 	});
-
-	const ComponentMap = {
-	  'Textarea': 'p',
-	  'H2': 'h2',
-	  'Bullets': 'p',
-	  'Caption': 'p',
-	  'ImageUpload': Image,
-	  'Video': VideoPlayer,
-	  'Link': 'a',
-	  'Embed': Embed
-	};
-
-	function getBlockProps(block) {
-		if (block.type === 'Textarea') {
-			return { innerHTML: block.content, class: "p-big"  };
-		} else if (block.type === 'H2') {
-			return { innerHTML: block.content, class: "h3" };
-		} else if (block.type === 'Caption') {
-			return { innerHTML: block.content };
-		} else if (block.type === 'ImageUpload') {
-			return { src: block.content };
-		}
-		return {};
-	}
-
 </script>
 
 <style lang="scss">

package/src/modules/community/components/sections/Comments.vue

@@ -3,7 +3,7 @@
     <div>
       <h3 class="mn-b-small">{{ comments.length }} comments</h3>
 
-      <div @click="$router.push({name: 'Sign In'})" class="cursor-pointer mn-b-small section bg-black t-white flex-center flex radius-big" v-if="!owner">
+      <div @click="$router.push({name: 'Sign In'})" class="pd-big cursor-pointer mn-b-small section bg-black t-white flex-center flex radius-big" v-if="!owner">
         <p class="t-semi uppercase">Please log in to leave a comment.</p>
       </div>
 

package/src/modules/community/router/blogposts.js

@@ -9,7 +9,11 @@ const community = [
         en: 'Community',
         ru: 'Коммьюнити'
       },
+      breadcrumbs: {
+        hidden: true
+      },
       title_hide: true
+
     },
     children: [{
       path: ':category?',

package/src/modules/constructor/components/elements/Textarea.vue

@@ -1,99 +1,217 @@
 <template>
   <div>
-    <textarea 
-      v-model="prop[content]" 
-      :placeholder="placeholder ? placeholder : ''"
-      @input="handleInput" 
-      @focus="emit('focus', textarea)"
-      @keyup="handleKeyUp"
-      ref="textarea" 
-      tabindex="-1"
-      class="text-area mn-b-thin"
+    <div 
+      v-once
+      ref="editableDiv"
+      :contenteditable="true"
+      @input="handleInput"
+      @keydown="handleKeyDown"
+      @mouseup="checkTextSelection"
+      tabindex="0"
+      v-html="props.prop[props.content]"
+      class="editable-div mn-b-thin"
       :class="{
-        't-main t-semi': prop.type === 'Link'
-      }"  
-    >  
-      
-    </textarea>
+        't-main t-semi': prop.type === 'Link',
+        'h3': prop.type === 'H2'
+      }"
+    />
+    <div v-if="isTextSelected" class="formatting-bar">
+      <button @click="applyFormat('bold')">B</button>
+      <button @click="applyFormat('italic')">I</button>
+      <button @click="createLink">Link</button>
+    </div>
   </div>
 </template>
 
-<script setup="props">
-  import { computed, ref, onMounted, watch, nextTick, onUpdated, watchEffect } from 'vue'
-
-  const props = defineProps(['prop','value','content','placeholder','index','setFocus'])
-  const emit = defineEmits(['deleteBlock', 'updateBlock','addBlock','focus'])
-
-  const data = ref(props)
-  const textarea = ref(null)
-
-  let cursorPosition = ref(0);
-
-  function handleInput(event) {
-    let paragraphs = event.target.value.split(/\n+/);
-
-    if (paragraphs.length > 1) {
-      props.prop[props.content] = paragraphs[0];
-
-      nextTick(() => { 
-        resize()
-      })
-
-      let newBlocks = paragraphs.slice(1).map((paragraph) => ({ __name: 'Textarea', content: paragraph }));
-
-      // emit addBlock event with block data and index
-      emit('addBlock', 'Textarea', '', props.index, { blocks: newBlocks, ref: textarea });
-    } else {
-      if (event.target.value.trim() === "" && event.target.value.includes("\n\n")) {
-        // if the entered value is only an empty line, add a new block
-        console.log('We are adding new block:' + props.index + newBlocks + textarea )
-        emit('addBlock', 'Textarea', '', props.index, { blocks: newBlocks, ref: textarea });
+<script setup>
+import { ref, onMounted, nextTick, onUpdated, watchEffect, watch } from 'vue'
+
+import DOMPurify from 'isomorphic-dompurify';
+
+const sanitizeConfig = {
+  ALLOWED_TAGS: ['b', 'i', 'a', 'img'],
+  ALLOWED_ATTR: ['href', 'target', 'src']
+};
+
+const props = defineProps({
+  prop: Object,
+  content: String,
+  placeholder: String,
+  index: Number,
+  setFocus: Boolean
+})
+
+const emit = defineEmits(['deleteBlock', 'updateBlock', 'addBlock', 'focus'])
+
+const editableDiv = ref(null)
+const isTextSelected = ref(false)
+const savedSelection = ref(null)
+
+function handleInput(event) {
+  const sanitizedContent = sanitizeHTML(event.target.innerHTML)
+  emit('updateBlock', props.prop, { content: sanitizedContent })
+}
+
+function handleKeyDown(event) {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    const selection = window.getSelection()
+    const range = selection.getRangeAt(0)
+    const newBlockContent = extractContentAfterCursor(range)
+    
+    // Update current block content
+    const sanitizedContent = sanitizeHTML(editableDiv.value.innerHTML)
+    emit('updateBlock', props.prop, { content: sanitizedContent })
+    
+    // Create new block
+    emit('addBlock', 'Textarea', sanitizeHTML(newBlockContent), props.index)
+  } else if (event.key === 'Backspace' && editableDiv.value.innerHTML.trim() === "") {
+    event.preventDefault()
+    emit('deleteBlock', props.prop, { setCaretToEnd: true })
+  }
+}
+
+function extractContentAfterCursor(range) {
+  const container = range.startContainer
+  const cursorOffset = range.startOffset
+
+  // Если курсор находится в текстовом узле
+  if (container.nodeType === Node.TEXT_NODE) {
+    const textAfterCursor = container.textContent.slice(cursorOffset)
+    container.textContent = container.textContent.slice(0, cursorOffset)
+    return textAfterCursor
+  } 
+  // Если курсор находится между элементами
+  else if (container.nodeType === Node.ELEMENT_NODE) {
+    const tempDiv = document.createElement('div')
+    const childNodes = Array.from(container.childNodes)
+    let foundCursor = false
+    
+    childNodes.forEach((node, index) => {
+      if (index === cursorOffset) {
+        foundCursor = true
+      }
+      if (foundCursor) {
+        tempDiv.appendChild(node.cloneNode(true))
       }
-      resize();
+    })
+    
+    // Удаляем перенесенные узлы из исходного контейнера
+    while (container.childNodes[cursorOffset]) {
+      container.removeChild(container.childNodes[cursorOffset])
     }
+    
+    return tempDiv.innerHTML
   }
-
-  function handleKeyUp(event) {
-    if ((event.keyCode === 8 || event.keyCode === 46) && props.prop[props.content].trim() === "") {
-
-      emit('deleteBlock', props.prop);
+  
+  return ''
+}
+
+function focus(options = {}) {
+  nextTick(() => {
+    editableDiv.value.focus()
+    
+    let shouldSetCaretToEnd = options.setCaretToEnd || props.prop.setCaretToEnd
+
+    if (props.prop.setFocus === true && !shouldSetCaretToEnd) {
+      // Для нового блока ставим курсор в начало
+      const range = document.createRange()
+      range.setStart(editableDiv.value, 0)
+      range.collapse(true)
+      const selection = window.getSelection()
+      selection.removeAllRanges()
+      selection.addRange(range)
+    } else {
+      // Для существующего блока или после удаления ставим курсор в конец
+      setCaretToEnd(editableDiv.value)
     }
-  }
-
 
-  function focus() {
-      nextTick(() => {
-          textarea.value.focus();
-          // if (props.prop[props.content].length > 0) textarea.value.setSelectionRange(0, 0);
-          emit('updateBlock', props.prop, { setFocus: false } );
-      })
+    // Сбрасываем флаги
+    emit('updateBlock', props.prop, { setFocus: false, setCaretToEnd: false })
+  })
+}
+onMounted(() => {
+  if (props.setFocus) {
+    nextTick(() => { 
+      focus() 
+    })
   }
+})
 
-  function resize() {
-    textarea.value.style.height = "1rem";
-    textarea.value.style.height = textarea.value.scrollHeight + "px";
+onUpdated(() => {
+  if (props.setFocus) {
+    nextTick(() => { 
+      focus() 
+    })
   }
-
-  onUpdated(() => {
-     if (props.setFocus) nextTick(() => {  { focus()} })
-    resize()
-  });
-
-  onMounted(() => {
-    if (props.setFocus) nextTick(() => {  { focus()} })
-    resize()
-  });
+})
+
+function sanitizeHTML(html) {
+  const sanitize = DOMPurify.sanitize(html, sanitizeConfig);
+  return sanitize;
+}
+
+
+function setCaretToEnd(element) {
+  const range = document.createRange()
+  const selection = window.getSelection()
+  range.selectNodeContents(element)
+  range.collapse(false)
+  selection.removeAllRanges()
+  selection.addRange(range)
+}
+
+function checkTextSelection() {
+  isTextSelected.value = window.getSelection().toString().length > 0
+}
+
+function applyFormat(format) {
+  document.execCommand(format, false, null)
+}
+
+function createLink() {
+  const url = prompt('Enter the URL:')
+  if (url) {
+    document.execCommand('createLink', false, url)
+  }
+}
 </script>
 
 
 <style lang="scss">
-  .text-area {
-    width: 100%;
-
-    resize: none; // allow vertical resize
-    background-color: transparent;
-    &:focus {
-      border: 0;
+.editable-div {
+  width: 100%;
+  min-height: 1rem;
+  background-color: transparent;
+  outline: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  
+  &:empty::before {
+    content: attr(placeholder);
+    color: #999;
+  }
+  
+  &:focus {
+    border: 0;
+  }
+}
+
+.formatting-bar {
+  display: flex;
+  gap: 5px;
+  margin-top: 5px;
+  
+  button {
+    padding: 2px 5px;
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    cursor: pointer;
+    
+    &:hover {
+      background-color: #e0e0e0;
     }
   }
-</style>
+}
+</style>

package/src/modules/constructor/components/sections/Constructor.vue

@@ -10,7 +10,7 @@
     >
       <div
         v-for="(block, index) in post.content"
-        :key="index"
+        :key="block.id" 
         :data-index="index"
         draggable="true"
         class="draggable-item pos-relative"
@@ -108,9 +108,6 @@
 
 <script setup>
 import Textarea     from '../elements/Textarea.vue';
-import H2           from '../elements/H2.vue';
-import Caption      from '../elements/Caption.vue';
-import Bullets      from '../elements/Bullets.vue';
 import ImageUpload  from '../elements/ImageUpload.vue';
 import Embed        from '../elements/Embed.vue';
 import Audio        from '../elements/Audio.vue';
@@ -119,6 +116,7 @@ import Video        from '../elements/Video.vue';
 import Draggable        from '@pf/src/components/Draggable/Draggable.vue';
 
 import { ref, onMounted, watchEffect, computed } from 'vue';
+import { v4 as uuidv4 } from 'uuid'
 
 const props = defineProps({
   content: {
@@ -136,10 +134,8 @@ const showMenu = ref(false)
 
 const ComponentMap = {
   'Textarea': Textarea,
-  'H2': H2,
+  'H2': Textarea,
   'Link': Textarea,
-  'Bullets': Bullets,
-  'Caption': Caption,
   'ImageUpload': ImageUpload,
   'Embed': Embed,
   'Audio': Audio,
@@ -166,9 +162,9 @@ const handleDragEnd = (startIndex, endIndex) => {
   console.log('Drag ended. Start index:', startIndex, 'End index:', endIndex);
 };
 
-function handleAddBlock(type = 'Textarea', content = '', index, data, classBlock = '', placeholder = '') {
-
+function handleAddBlock(type = 'Textarea', content = '', index, data, classBlock = '', placeholder = '', id = uuidv4()) {
   let blockNew = {
+    id: id,
     type: type,
     style: '',
     class: classBlock,
@@ -178,23 +174,12 @@ function handleAddBlock(type = 'Textarea', content = '', index, data, classBlock
     setFocus: true,
   };
   
-  if (data && data.blocks && Array.isArray(data.blocks)) {
-    let newBlocks = data.blocks.map(block => ({
-      ...blockNew,
-      content: block.content,
-    }));
-
-    let args = [(data.index || index) + 1, 0].concat(newBlocks);
-
-    post.value.content.splice.apply(post.value.content, args);
-
-    const lastBlock = newBlocks[newBlocks.length - 1];
-  } else if (index !== undefined) {
+  if (index !== undefined) {
     post.value.content.splice(index + 1, 0, blockNew);
   } else {
     post.value.content.push(blockNew);
   }
-
+  
   showControls.value = null
   emits('update', post.value.content);
 }
@@ -203,23 +188,25 @@ function handleUpdateBlock(block, update) {
   const index = post.value.content.findIndex(item => item === block);
 
   if (index !== -1) {
-      post.value.content[index] = { ...post.value.content[index], ...update };
+    post.value.content[index] = { ...post.value.content[index], ...update };
   }
-
   emits('update', post.value.content);
 }
 
+function handleDeleteBlock(blockToDelete, options = {}) {
+  const index = post.value.content.findIndex(block => block.id === blockToDelete.id)
 
-function handleDeleteBlock(block) {
-  let index = post.value.content.findIndex(b => b === block);
-  
-  // Не даем удалить первый (нулевой) элемент в конструкторе
   if (index !== -1 && index !== 0) {
-    post.value.content.splice(index, 1);
-    post.value.content[index - 1].setFocus = true
+    post.value.content.splice(index, 1)
+    
+    if (index > 0) {
+      const previousBlock = post.value.content[index - 1]
+      previousBlock.setFocus = true
+      previousBlock.setCaretToEnd = true
+    }
   }
-
-  emits('update', post.value.content);
+  
+  emits('update', post.value.content)
 }
 </script>
 

package/src/modules/constructor/components/sections/Viewer.vue

@@ -0,0 +1,53 @@
+<template>
+  <section>
+    <component
+      v-for="(block, index) in content"
+      :is="ComponentMap[block.type]"
+      :key="index"
+      :index="index"
+      :component="block"
+      :prop="block"
+      :class="block.class"
+      content="content"
+      v-bind="getBlockProps(block, index)"
+      class="mn-b-regular"
+    />
+  </section>  
+</template>
+
+<script setup>
+  import Image  from '@pf/src/modules/constructor/components/elements/Image.vue';
+  import VideoPlayer  from '@pf/src/modules/constructor/components/elements/VideoPlayer.vue';
+  import Embed  from '@pf/src/modules/constructor/components/elements/Embed.vue';
+
+  const props = defineProps([
+    'content'
+  ])
+
+  const ComponentMap = {
+    'Textarea': 'p',
+    'H2': 'h2',
+    'Bullets': 'p',
+    'Caption': 'p',
+    'ImageUpload': Image,
+    'Video': VideoPlayer,
+    'Link': 'a',
+    'Embed': Embed
+  };
+
+  function getBlockProps(block, index) {
+    if (block.type === 'Textarea' && index !== 0) {
+      return { innerHTML: block.content, class: "p-big"  };
+    } else if (block.type === 'Textarea' && index === 0) { 
+       return { innerHTML: block.content, class: "h2" };
+    }
+    else if (block.type === 'H2') {
+      return { innerHTML: block.content, class: "h3" };
+    } else if (block.type === 'Caption') {
+      return { innerHTML: block.content };
+    } else if (block.type === 'ImageUpload') {
+      return { src: block.content };
+    }
+    return {};
+  }
+</script>

package/src/modules/gallery/components/pages/Gallery.vue

@@ -50,7 +50,7 @@
       <div v-for="item in items"  :key="item._id" class="bg-light radius-medium o-hidden flex-column pos-relative flex-wrap">
         <div class="w-100 h-100 h-min-10r pos-relative">
           <img 
-            :src="item.cover" 
+            :src="((FILE_SERVER_URL || '') + item.cover)" 
             class="w-100 h-100 object-fit-cover bg-black " @click="openPreviewPopup(item)" 
           />
         </div>