feat(editor): custom background filters

README.md

@@ -52,6 +52,19 @@ There are no word processors on the market that are not inextricable from the co
 
 <br>
 
+# A Different Way
+
+
+With **betterwrite.io**, transform your editor's appearance in a way that showcases your creativity even more. The editor offers a number of customization tools, allowing the user greater flexibility and contentment with the tool.
+
+- Modify the editor's size and font
+
+- Choose a background image (.gif supported)
+
+- Transparency items for better use of the image.
+
+<img src="./.github/customtheme.png" />
+
 # Entity Model
 
 Better Write works with the Entity Model, where each item in the editor is unique and independent of other content. This model allows the creation of resources that do not necessarily function as texts, such as Lists, Checkboxes, Images and Drawings. The generators do not need to extract data from the editor because with the Entity Model we can standardize the project data, allowing the extensions (.PDF, .DOCX, .HTML, .TXT) to work independently and a new external extensions support.

packages/better-write-app/src/components/page/editor/entity/default/customize/EditorEntityDefaultCustomize.vue

@@ -2,7 +2,7 @@
   <Modal @close="onClose">
     <div
       ref="custom"
-      class="fixed px-2 md:px-10 w-full h-screen overflow-y-auto text-theme-editor-extras-finder-text hover:text-theme-editor-extras-finder-text-hover active:text-theme-editor-extras-finder-text-active bg-theme-editor-extras-finder-background hover:bg-theme-editor-extras-finder-background-hover active:bg-theme-editor-extras-finder-background-active p-2 rounded shadow-2xl"
+      class="fixed font-raleway px-2 md:px-10 w-full h-screen overflow-y-auto text-theme-editor-extras-finder-text hover:text-theme-editor-extras-finder-text-hover active:text-theme-editor-extras-finder-text-active bg-theme-editor-extras-finder-background hover:bg-theme-editor-extras-finder-background-hover active:bg-theme-editor-extras-finder-background-active p-2 rounded shadow-2xl"
     >
       <div class="flex py-3 items-center justify-between w-full">
         <div class="flex">

packages/better-write-app/src/components/page/editor/entity/default/options/EditorEntityDefaultOptions.vue

@@ -13,7 +13,7 @@
         duration: 200,
       },
     }"
-    class="flex flex-col fixed bg-theme-editor-entity-popover-background wb-text shadow-lg z-max rounded"
+    class="flex font-raleway flex-col fixed bg-theme-editor-entity-popover-background wb-text shadow-lg z-max rounded"
     @contextmenu.prevent.stop="() => {}"
   >
     <EditorEntityDefaultOptionsItem @action="onDeleteEntity">

packages/better-write-app/src/components/page/editor/main/EditorBase.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="main"
-    class="flex flex-col overflow-hidden bg-theme-editor-background hover:bg-theme-editor-background-hover active:bg-theme-editor-background-active"
+    class="flex flex-col overflow-hidden z-20 bg-theme-editor-background hover:bg-theme-editor-background-hover active:bg-theme-editor-background-active"
     :class="[
       EDITOR.configuration.draggable ? 'fixed' : 'inline-block',
       EDITOR.configuration.bars

packages/better-write-app/src/components/page/editor/project/corrector/EditorProjectCorrector.vue

@@ -3,7 +3,7 @@
     <div
       ref="corrector"
       :style="style"
-      class="fixed flex flex-col w-3/4 md:w-1/2 h-3/4 bg-theme-background-1 wb-text rounded shadow-2xl p-5 overflow-y-auto wb-scroll"
+      class="fixed !font-raleway flex flex-col w-3/4 md:w-1/2 h-3/4 bg-theme-background-1 wb-text rounded shadow-2xl p-5 overflow-y-auto wb-scroll"
     >
       <EditorAbsoluteHeader class="pl-5" :title="'Corretor'" @close="onClose" />
       <div class="flex flex-wrap flex-1 flex-col lg:flex-row mt-5">

packages/better-write-app/src/components/page/editor/project/corrector/EditorProjectCorrectorRow.vue

@@ -3,7 +3,7 @@
     class="flex justify-between wb-text items-center w-auto transition-all hover:bg-black-opacity mb-4 cursor-pointer"
     @click="emit('click')"
   >
-    <p class="text-base font-poppins pointer-events-none">{{ props.title }}</p>
+    <p class="text-base pointer-events-none font-bold">{{ props.title }}</p>
     <slot />
   </div>
 </template>

packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerStyles.vue

@@ -126,6 +126,42 @@
             @exclude="onDeleteCoverImage"
           />
         </div>
+        <div v-if="EDITOR.styles.base.backgroundData" class="wb-preferences">
+          <p class="text-sm">
+            {{
+              t('editor.preferences.configuration.editor.background.imageBlur')
+            }}
+          </p>
+          <InputBoolean v-model="EDITOR.styles.base.backgroundBlur" />
+        </div>
+        <div v-if="EDITOR.styles.base.backgroundData" class="wb-preferences">
+          <p class="text-sm">
+            {{
+              t(
+                'editor.preferences.configuration.editor.background.imageGrayscale'
+              )
+            }}
+          </p>
+          <InputBoolean v-model="EDITOR.styles.base.backgroundGrayscale" />
+        </div>
+        <div v-if="EDITOR.styles.base.backgroundData" class="wb-preferences">
+          <p class="text-sm">
+            {{
+              t(
+                'editor.preferences.configuration.editor.background.imageSaturate'
+              )
+            }}
+          </p>
+          <InputBoolean v-model="EDITOR.styles.base.backgroundSaturate" />
+        </div>
+        <div v-if="EDITOR.styles.base.backgroundData" class="wb-preferences">
+          <p class="text-sm">
+            {{
+              t('editor.preferences.configuration.editor.background.imageSepia')
+            }}
+          </p>
+          <InputBoolean v-model="EDITOR.styles.base.backgroundSepia" />
+        </div>
       </div>
     </div>
   </EditorProjectPreferencesContainerSlot>

packages/better-write-app/src/pages/Editor.vue

@@ -1,17 +1,22 @@
 <template>
-  <section
+  <div
     :class="[
       !EDITOR.styles.base.backgroundData
         ? 'bg-theme-editor-full-background hover:bg-theme-editor-full-background-hover active:bg-theme-editor-full-background-active'
-        : '',
+        : 'bg-cover',
+      EDITOR.styles.base.backgroundBlur ? 'bg-custom-blur' : '',
+      EDITOR.styles.base.backgroundGrayscale ? 'bg-custom-grayscale' : '',
+      EDITOR.styles.base.backgroundSaturate ? 'bg-custom-saturate' : '',
+      EDITOR.styles.base.backgroundSepia ? 'bg-custom-sepia' : '',
     ]"
     :style="[
       EDITOR.styles.base.backgroundData
         ? { backgroundImage: `url(${EDITOR.styles.base.backgroundData})` }
         : {},
     ]"
-    class="flex flex-col w-full bg-cover"
-  >
+    class="absolute w-full h-screen"
+  />
+  <section class="flex flex-col w-full z-10 bg-transparent">
     <EditorBaseHeader />
     <section class="flex flex-col md:flex-row w-full">
       <EditorAside />

packages/better-write-app/src/store/editor.ts

@@ -18,6 +18,10 @@ export const useEditorStore = defineStore('editor', {
         },
         base: {
           backgroundData: '',
+          backgroundBlur: false,
+          backgroundGrayscale: false,
+          backgroundSaturate: false,
+          backgroundSepia: false,
         },
       },
       configuration: {

packages/better-write-app/src/use/storage/storage.ts

@@ -144,6 +144,10 @@ export const useStorage = () => {
         },
         base: {
           backgroundData: undefined,
+          backgroundBlur: false,
+          backgroundGrayscale: false,
+          backgroundSaturate: false,
+          backgroundSepia: false,
         },
       }
     }

packages/better-write-app/windi.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
     'wb-text': 'text-theme-text-1',
     'wb-background-color': 'bg-theme-background-1',
     'wb-aside-button': 'text-2xs pl-2 transition w-full font-bold text-theme-text-2 rounded-none flex',
-    'wb-input-container': 'flex flex-1 h-auto w-auto items-center justify-between p-5 border rounded-lg border-theme-editor-material-border bg-theme-editor-material-background hover:bg-theme-editor-material-background-hover active:bg-theme-editor-material-background-active text-theme-editor-material-text hover:text-theme-editor-material-text-hover active:text-theme-editor-material-text-active shadow-lg',
+    'wb-input-container': 'flex font-raleway flex-1 h-auto w-auto items-center justify-between p-5 border rounded-lg border-theme-editor-material-border bg-theme-editor-material-background hover:bg-theme-editor-material-background-hover active:bg-theme-editor-material-background-active text-theme-editor-material-text hover:text-theme-editor-material-text-hover active:text-theme-editor-material-text-active shadow-lg',
     'wb-pdf-container': 'flex flex-row gap-5 flex-wrap justify-between items-center my-3 overflow-x-hidden',
     'wb-disabled': 'opacity-50 pointer-events-none',
     'wb-configuration-absolute': 'absolute top-0 left-0 bg-theme-background-1 flex flex-col h-screen w-full z-max px-2 py-5 md:px-20 overflow-y-auto overflow-x-hidden wb-scroll',

packages/better-write-languages/src/en-US/editor.ts

@@ -104,6 +104,10 @@ export default {
         background: {
           title: 'Background',
           image: 'Image',
+          imageBlur: 'Blur',
+          imageGrayscale: 'Grayscale',
+          imageSaturate: 'Saturate',
+          imageSepia: 'Sepia',
         },
         title: 'Editor',
         heading: 'Heading',

packages/better-write-languages/src/pt-BR/editor.ts

@@ -106,6 +106,10 @@ export default {
         background: {
           title: 'Fundo',
           image: 'Imagem',
+          imageBlur: 'Borrão',
+          imageGrayscale: 'Cinza',
+          imageSaturate: 'Saturação',
+          imageSepia: 'Sépia',
         },
         title: 'Editor',
         heading: 'Cabeçalho',

packages/better-write-plugin-theme/css/preset.css

@@ -127,3 +127,35 @@ input[type='number'] {
   overflow-y: auto;
 }
 
+.bg-custom-blur {
+  -webkit-filter: blur(5px);
+  -moz-filter: blur(5px);
+  -o-filter: blur(5px);
+  -ms-filter: blur(5px);
+  filter: blur(5px);
+  transform: scale(1.05); 
+}
+
+.bg-custom-grayscale {
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
+.bg-custom-saturate {
+  -webkit-filter: saturate(2);
+  -moz-filter: saturate(2);
+  -o-filter: saturate(2);
+  -ms-filter: saturate(2);
+  filter: saturate(2);
+}
+
+.bg-custom-sepia {
+  -webkit-filter: sepia(100%);
+  -moz-filter: sepia(100%);
+  -o-filter: sepia(100%);
+  -ms-filter: sepia(100%);
+  filter: sepia(100%);
+}

packages/better-write-types/src/types/editor.ts

@@ -93,6 +93,10 @@ export interface EditorStateStyles {
 
 export interface EditorStateBase {
   backgroundData: string
+  backgroundBlur: boolean
+  backgroundGrayscale: boolean
+  backgroundSaturate: boolean
+  backgroundSepia: boolean
 }
 
 export interface EditorStateHeading {