@ozdao/prometheus-framework 0.2.156 → 0.2.157

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/globals/components/layouts/Client.vue

@@ -23,6 +23,7 @@
 
 		<transition name="moveFromTop" mode="out-in" appear>
 			<Header 
+				v-if="!MOBILE_APP"
 				ref="header" 
 				class="transition-ease-in-out pos-relative br-b br-solid br-grey-transp-10 pos-t-0" 
 				:theme="headerTheme"
@@ -67,7 +68,7 @@
 	  </Popup>
 
 		<section 
-			v-if="((!FirstUse && MOBILE_APP) || !MOBILE_APP) && show" 
+			v-if="((!FirstUse && MOBILE_APP) || !MOBILE_APP)" 
 			id="screen" 
 			ref="screen"
 			@scroll="handleScroll"
@@ -89,8 +90,15 @@
 				:data="store.globals.state.error"
 				class="z-index-7" 
 			/>
-			
-			<!-- <div class="pos-relative w-100 h-100"> -->
+
+			<!-- <section v-if="!route.meta?.breadcrumbs?.hide" class="pd-thin pd-b-zero">
+				<Breadcrumbs 
+					v-if="!MOBILE_APP"
+					class="bg-light pd-small radius-big"
+				/>
+			</section> -->
+
+			<!-- <Suspense> -->
 				<router-view  v-slot="{ Component, route }">
 					<transition @before-enter="scrollTop" name="scaleIn" mode="out-in" appear>
 		      	<component 
@@ -100,9 +108,8 @@
 		      	/>
 		      </transition>
 				</router-view>
-			<!-- </div> -->
-			
-      <Footer />
+			<!-- </Suspense> -->
+      <!-- <Footer /> -->
 		</section>
 
     <BottomNavigation 
@@ -114,7 +121,7 @@
 
 
 <script setup>
-	import { computed, ref, onMounted, provide, inject, onUnmounted, defineAsyncComponent } from 'vue'
+	import { computed, ref, onMounted, provide, inject, onUnmounted, defineAsyncComponent, onServerPrefetch, onBeforeMount } from 'vue'
 	// Router
 	import { useRoute, useRouter } from 'vue-router'
 	// Store
@@ -124,6 +131,7 @@
 	import Status from '@pf/src/components/Status/Status.vue'
 	import Sidebar from '@pf/src/components/Sidebar/Sidebar.vue'
 	import Popup from '@pf/src/components/Popup/Popup.vue'
+	import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'
 	import LocationSelection from '@pf/src/components/LocationSelection/LocationSelection.vue'
 
 	import Header	from '@pf/src/modules/globals/components/partials/Header.vue'
@@ -227,6 +235,12 @@
 	/////////////////////////////
 	// MOUNTED
 	/////////////////////////////
+	// if (typeof window === 'undefined') {
+	//   show.value = true
+	// } else {
+	// 	show.value = false
+	// }
+
 	onMounted(async () => {
 		await getFirstUse()
 		 

package/src/modules/globals/components/layouts/Empty.vue

@@ -2,9 +2,4 @@
 	<router-view v-slot="{ Component, route }">
 		<component :is="Component" />
 	</router-view>
-</template>
-
-
-<script setup>
-
-</script>
+</template>

package/src/modules/globals/components/pages/404.vue

@@ -2,4 +2,4 @@
   <div class="">
     404 Not Found
   </div>
-</template>
+</template>

package/src/modules/globals/components/sections/SectionPageTitle.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <header class="br-b br-solid br-black-transp-10 pd-medium flex-v-center flex-nowrap flex">
+    <header class="pd-medium flex-v-center flex-nowrap flex">
       <h1 class="mn-r-auto">{{ title }}</h1>
 
       <template  
@@ -31,7 +31,7 @@
       :selected="tabs_current"
       @update:selected="updateTabsCurrent"
       :tabs="tabs"
-      class="w-100 t-nowrap o-scroll h5"
+      class="br-t br-solid br-black-transp-10 w-100 t-nowrap o-scroll h5"
     />
   </div>
 </template>