From 5455aa896b9289d96d4d20a36964a3b068752680 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 4 Aug 2023 13:02:52 +0300
Subject: [PATCH] Editor unstyled mode updates

---
 components/lib/editor/BaseEditor.vue | 16 +----------
 components/lib/editor/Editor.vue     | 40 ++++++++++++++--------------
 2 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/components/lib/editor/BaseEditor.vue b/components/lib/editor/BaseEditor.vue
index 10991f8e3..698202e39 100644
--- a/components/lib/editor/BaseEditor.vue
+++ b/components/lib/editor/BaseEditor.vue
@@ -953,24 +953,10 @@ const styles = `
 const classes = {
     root: 'p-editor-container',
     toolbar: 'p-editor-toolbar',
-    formats: 'ql-formats',
-    header: 'ql-header',
-    font: 'ql-font',
-    bold: 'ql-bold',
-    italic: 'ql-italic',
-    underline: 'ql-underline',
-    color: 'ql-color',
-    background: 'ql-background',
-    list: 'ql-list',
-    select: 'ql-align',
-    link: 'ql-link',
-    image: 'ql-image',
-    codeBlock: 'ql-code-block',
-    clean: 'ql-clean',
     content: 'p-editor-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { name: 'editor', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'editor' });
 
 export default {
     name: 'BaseEditor',
diff --git a/components/lib/editor/Editor.vue b/components/lib/editor/Editor.vue
index fba45e3a1..39dbcc749 100755
--- a/components/lib/editor/Editor.vue
+++ b/components/lib/editor/Editor.vue
@@ -2,44 +2,44 @@
     <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="editor">
         <div ref="toolbarElement" :class="cx('toolbar')" v-bind="ptm('toolbar')">
             <slot name="toolbar">
-                <span :class="cx('formats')" v-bind="ptm('formats')">
-                    <select :class="cx('header')" defaultValue="0" v-bind="ptm('header')">
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <select class="ql-header" defaultValue="0" v-bind="ptm('header')">
                         <option value="1" v-bind="ptm('option')">Heading</option>
                         <option value="2" v-bind="ptm('option')">Subheading</option>
                         <option value="0" v-bind="ptm('option')">Normal</option>
                     </select>
-                    <select :class="cx('font')" v-bind="ptm('font')">
+                    <select class="ql-font" v-bind="ptm('font')">
                         <option v-bind="ptm('option')"></option>
                         <option value="serif" v-bind="ptm('option')"></option>
                         <option value="monospace" v-bind="ptm('option')"></option>
                     </select>
                 </span>
-                <span :class="cx('formats')" v-bind="ptm('formats')">
-                    <button :class="cx('bold')" type="button" v-bind="ptm('bold')"></button>
-                    <button :class="cx('italic')" type="button" v-bind="ptm('italic')"></button>
-                    <button :class="cx('underline')" type="button" v-bind="ptm('underline')"></button>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-bold" type="button" v-bind="ptm('bold')"></button>
+                    <button class="ql-italic" type="button" v-bind="ptm('italic')"></button>
+                    <button class="ql-underline" type="button" v-bind="ptm('underline')"></button>
                 </span>
-                <span :key="reRenderColorKey" :class="cx('formats')" v-bind="ptm('formats')">
-                    <select :class="cx('color')" v-bind="ptm('color')"></select>
-                    <select :class="cx('background')" v-bind="ptm('background')"></select>
+                <span :key="reRenderColorKey" class="ql-formats" v-bind="ptm('formats')">
+                    <select class="ql-color" v-bind="ptm('color')"></select>
+                    <select class="ql-background" v-bind="ptm('background')"></select>
                 </span>
-                <span :class="cx('formats')" v-bind="ptm('formats')">
-                    <button :class="cx('list')" value="ordered" type="button" v-bind="ptm('list')"></button>
-                    <button :class="cx('list')" value="bullet" type="button" v-bind="ptm('list')"></button>
-                    <select :class="cx('select')" v-bind="ptm('select')">
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-list" value="ordered" type="button" v-bind="ptm('list')"></button>
+                    <button class="ql-list" value="bullet" type="button" v-bind="ptm('list')"></button>
+                    <select class="ql-align" v-bind="ptm('select')">
                         <option defaultValue v-bind="ptm('option')"></option>
                         <option value="center" v-bind="ptm('option')"></option>
                         <option value="right" v-bind="ptm('option')"></option>
                         <option value="justify" v-bind="ptm('option')"></option>
                     </select>
                 </span>
-                <span :class="cx('formats')" v-bind="ptm('formats')">
-                    <button :class="cx('link')" type="button" v-bind="ptm('link')"></button>
-                    <button :class="cx('image')" type="button" v-bind="ptm('image')"></button>
-                    <button :class="cx('codeBlock')" type="button" v-bind="ptm('codeBlock')"></button>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-link" type="button" v-bind="ptm('link')"></button>
+                    <button class="ql-image" type="button" v-bind="ptm('image')"></button>
+                    <button class="ql-code-block" type="button" v-bind="ptm('codeBlock')"></button>
                 </span>
-                <span :class="cx('formats')" v-bind="ptm('formats')">
-                    <button :class="cx('clean')" type="button" v-bind="ptm('clean')"></button>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-clean" type="button" v-bind="ptm('clean')"></button>
                 </span>
             </slot>
         </div>