@mythpe/quasar-ui-qui 0.2.24 → 0.2.26

package/src/components/form/MCkeditor.vue

@@ -11,73 +11,27 @@
   setup
 >
 
+import { computed, onMounted, reactive, ref, toValue, useTemplateRef } from 'vue'
+import { Ckeditor, useCKEditorCloud } from '@ckeditor/ckeditor5-vue'
+import { useBindInput, useMyth } from '../../composable'
 import { useField } from 'vee-validate'
 import type { MCkeditorProps as Props } from '../../types'
-import { computed, reactive, toValue, useTemplateRef } from 'vue'
-import { useBindInput, useMyth } from '../../composable'
-
-import type { EditorConfig } from 'ckeditor5'
-import {
-  Alignment,
-  Autoformat,
-  Base64UploadAdapter,
-  BlockQuote,
-  Bold,
-  CKFinder,
-  CKFinderUploadAdapter,
-  ClassicEditor,
-  CloudServices,
-  Code,
-  CodeBlock,
-  Essentials,
-  FontBackgroundColor,
-  FontColor,
-  FontFamily,
-  FontSize,
-  Heading,
-  Image,
-  ImageCaption,
-  ImageResize,
-  ImageStyle,
-  ImageToolbar,
-  ImageUpload,
-  Indent,
-  IndentBlock,
-  Italic,
-  Link,
-  List,
-  MediaEmbed,
-  Mention,
-  Paragraph,
-  PasteFromOffice,
-  PictureEditing,
-  RemoveFormat,
-  SourceEditing,
-  Strikethrough,
-  Subscript,
-  Superscript,
-  Table,
-  TableColumnResize,
-  TableToolbar,
-  TextTransformation,
-  TodoList,
-  Underline
-} from 'ckeditor5'
-import { Ckeditor } from '@ckeditor/ckeditor5-vue'
+import type { EditorConfig } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import arTranslations from 'ckeditor5/translations/ar.js'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import enTranslations from 'ckeditor5/translations/en.js'
+import { useQuasar } from 'quasar'
 
 type P = {
   name: Props['name'];
-  lang: Props['lang'];
+  lang?: Props['lang'];
   config?: Props['config'];
   tagName?: Props['tagName'];
   disabled?: Props['disabled'];
-  disableTwoWayDataBinding?: Props['disableTwoWayDataBinding'];
+  html?: Props['html'];
 
   auto?: Props['auto'];
   col?: Props['col'];
@@ -97,11 +51,11 @@ type P = {
 }
 const props = withDefaults(defineProps<P>(), {
   name: '',
-  lang: 'ar',
+  lang: undefined,
   config: undefined,
   tagName: 'div',
   disabled: !1,
-  disableTwoWayDataBinding: !1,
+  html: !1,
 
   auto: undefined,
   col: undefined,
@@ -120,7 +74,7 @@ const props = withDefaults(defineProps<P>(), {
   fieldOptions: undefined
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
-const { __, props: pluginOptions } = useMyth()
+const { __, props: pluginOptions, ckeditorKey } = useMyth()
 const helper = useBindInput<any>(() => props, 'ckeditor')
 const { getLabel, inputRules } = helper
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
@@ -131,21 +85,209 @@ const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   ...toValue<any>(props.fieldOptions)
 })
 const { value, errorMessage, handleChange } = inputScope
+const cloud = useCKEditorCloud(() => ({
+  version: '45.1.0',
+  translations: ['en', 'ar']
+}))
+const isLayoutReady = ref(!1)
+const editor = computed(() => {
+  if (!cloud.data.value) {
+    return null
+  }
 
-const isRtl = computed(() => props.lang === 'ar')
+  return cloud.data.value.CKEditor.ClassicEditor
+})
+const $q = useQuasar()
 const getConfig = computed<any>(() => {
-  const inpConfig: EditorConfig = {
+  if (!cloud.data.value) {
+    return null
+  }
+  if (!isLayoutReady.value) {
+    return null
+  }
+
+  const {
+    Alignment,
+    Autoformat,
+    AutoImage,
+    AutoLink,
+    Autosave,
+    BalloonToolbar,
+    Base64UploadAdapter,
+    BlockQuote,
+    BlockToolbar,
+    Bold,
+    Bookmark,
+    CloudServices,
+    Code,
+    CodeBlock,
+    Emoji,
+    Essentials,
+    FindAndReplace,
+    FontBackgroundColor,
+    FontColor,
+    FontFamily,
+    FontSize,
+    FullPage,
+    Fullscreen,
+    GeneralHtmlSupport,
+    Heading,
+    Highlight,
+    HorizontalLine,
+    HtmlComment,
+    HtmlEmbed,
+    ImageBlock,
+    ImageCaption,
+    ImageEditing,
+    ImageInline,
+    ImageInsert,
+    ImageInsertViaUrl,
+    ImageResize,
+    ImageStyle,
+    ImageTextAlternative,
+    ImageToolbar,
+    ImageUpload,
+    ImageUtils,
+    Indent,
+    IndentBlock,
+    Italic,
+    Link,
+    LinkImage,
+    List,
+    ListProperties,
+    Markdown,
+    MediaEmbed,
+    Mention,
+    PageBreak,
+    Paragraph,
+    PasteFromMarkdownExperimental,
+    PasteFromOffice,
+    PlainTableOutput,
+    RemoveFormat,
+    ShowBlocks,
+    SourceEditing,
+    SpecialCharacters,
+    SpecialCharactersArrows,
+    SpecialCharactersCurrency,
+    SpecialCharactersEssentials,
+    SpecialCharactersLatin,
+    SpecialCharactersMathematical,
+    SpecialCharactersText,
+    Strikethrough,
+    Style,
+    Subscript,
+    Superscript,
+    Table,
+    TableCaption,
+    TableCellProperties,
+    TableColumnResize,
+    TableLayout,
+    TableProperties,
+    TableToolbar,
+    TextPartLanguage,
+    TextTransformation,
+    TodoList,
+    Underline
+  } = cloud.data.value.CKEditor
+  const plugins: any = [
+    Alignment,
+    Autoformat,
+    AutoImage,
+    AutoLink,
+    Autosave,
+    BalloonToolbar,
+    Base64UploadAdapter,
+    BlockQuote,
+    BlockToolbar,
+    Bold,
+    Bookmark,
+    Code,
+    CodeBlock,
+    Emoji,
+    Essentials,
+    FindAndReplace,
+    FontBackgroundColor,
+    FontColor,
+    FontFamily,
+    FontSize,
+    FullPage,
+    Fullscreen,
+    GeneralHtmlSupport,
+    Heading,
+    Highlight,
+    HorizontalLine,
+    HtmlComment,
+    HtmlEmbed,
+    ImageBlock,
+    ImageCaption,
+    ImageEditing,
+    ImageInline,
+    ImageInsert,
+    ImageInsertViaUrl,
+    ImageResize,
+    ImageStyle,
+    ImageTextAlternative,
+    ImageToolbar,
+    ImageUpload,
+    ImageUtils,
+    Indent,
+    IndentBlock,
+    Italic,
+    Link,
+    LinkImage,
+    List,
+    ListProperties,
+    MediaEmbed,
+    Mention,
+    PageBreak,
+    Paragraph,
+    PasteFromMarkdownExperimental,
+    PasteFromOffice,
+    PlainTableOutput,
+    RemoveFormat,
+    ShowBlocks,
+    SourceEditing,
+    SpecialCharacters,
+    SpecialCharactersArrows,
+    SpecialCharactersCurrency,
+    SpecialCharactersEssentials,
+    SpecialCharactersLatin,
+    SpecialCharactersMathematical,
+    SpecialCharactersText,
+    Strikethrough,
+    Style,
+    Subscript,
+    Superscript,
+    Table,
+    TableCaption,
+    TableCellProperties,
+    TableColumnResize,
+    TableLayout,
+    TableProperties,
+    TableToolbar,
+    TextPartLanguage,
+    TextTransformation,
+    TodoList,
+    Underline
+  ]
+  if (!props.html) {
+    plugins.push(CloudServices)
+    plugins.push(Markdown)
+  }
+  const def = {
+    licenseKey: ckeditorKey.value,
+    initialData: value.value || undefined,
     language: {
-      ui: props.lang as string,
-      content: props.lang as string,
+      ui: $q.lang.isoName,
+      content: props.lang || $q.lang.isoName,
       textPartLanguage: [
         {
-          title: __('labels.ar'),
+          title: __('ar'),
           languageCode: 'ar',
           textDirection: 'rtl'
         },
         {
-          title: __('labels.en'),
+          title: __('en'),
           languageCode: 'en',
           textDirection: 'ltr'
         }
@@ -155,75 +297,107 @@ const getConfig = computed<any>(() => {
       arTranslations,
       enTranslations
     ],
-    plugins: [
-      Autoformat,
-      BlockQuote,
-      Bold,
-      CKFinder,
-      CKFinderUploadAdapter,
-      CloudServices,
-      Essentials,
-      Heading,
-      Image,
-      ImageCaption,
-      ImageResize,
-      ImageStyle,
-      ImageToolbar,
-      ImageUpload,
-      Base64UploadAdapter,
-      Indent,
-      IndentBlock,
-      Italic,
-      Link,
-      List,
-      MediaEmbed,
-      Mention,
-      Paragraph,
-      PasteFromOffice,
-      PictureEditing,
-      Table,
-      TableColumnResize,
-      TableToolbar,
-      TextTransformation,
-      Underline,
-      FontSize,
-      FontFamily,
-      FontColor,
-      FontBackgroundColor,
-      RemoveFormat,
-      Strikethrough,
-      Subscript,
-      Code,
-      CodeBlock,
-      Alignment,
-      Superscript,
-      TodoList,
-      SourceEditing
+    placeholder: getLabel.value || undefined,
+    balloonToolbar: [
+      'bold', 'italic', '|', 'link', 'insertImage', '|', 'bulletedList', 'numberedList',
+      '|',
+      'fontSize',
+      'fontFamily',
+      'fontColor',
+      'fontBackgroundColor',
+      '|',
+      'textPartLanguage'
     ],
+    fontFamily: {
+      supportAllValues: true
+    },
+    fontSize: {
+      options: [10, 12, 14, 'default', 18, 20, 22],
+      supportAllValues: true
+    },
     toolbar: {
       items: [
         'undo',
         'redo',
         '|',
-        'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'code',
-        '|',
-        'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
+        'sourceEditing',
+        'showBlocks',
+        'findAndReplace',
+        'textPartLanguage',
+        'fullscreen',
         '|',
-        'alignment',
-        'insertTable',
         'heading',
+        'style',
         '|',
-        'link', 'uploadImage', 'blockQuote', 'codeBlock',
-        '|',
-        'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent',
+        'fontSize',
+        'fontFamily',
+        'fontColor',
+        'fontBackgroundColor',
         '|',
-        // 'ckbox',
+        'bold',
+        'italic',
+        'underline',
+        'strikethrough',
+        'subscript',
+        'superscript',
+        'code',
         'removeFormat',
+        '|',
+        'emoji',
+        'specialCharacters',
+        'horizontalLine',
+        'pageBreak',
+        'link',
+        'bookmark',
+        'insertImage',
+        'insertImageViaUrl',
         'mediaEmbed',
+        'insertTable',
+        'insertTableLayout',
+        'highlight',
+        'blockQuote',
+        'codeBlock',
+        'htmlEmbed',
         '|',
-        'sourceEditing'
+        'alignment',
+        '|',
+        'bulletedList',
+        'numberedList',
+        'todoList',
+        'outdent',
+        'indent'
       ],
-      shouldNotGroupWhenFull: true
+      shouldNotGroupWhenFull: false
+    },
+    blockToolbar: [
+      'fontSize',
+      'fontColor',
+      'fontBackgroundColor',
+      '|',
+      'bold',
+      'italic',
+      '|',
+      'link',
+      'insertImage',
+      'insertTable',
+      'insertTableLayout',
+      '|',
+      'bulletedList',
+      'numberedList',
+      'outdent',
+      'indent'
+    ],
+    fullscreen: {
+      onEnterCallback: container =>
+        container.classList.add(
+          'editor-container',
+          'editor-container_classic-editor',
+          'editor-container_include-style',
+          'editor-container_include-block-toolbar',
+          'editor-container_include-word-count',
+          'editor-container_include-fullscreen',
+          'main-container'
+        )
     },
     heading: {
       options: [
@@ -255,30 +429,35 @@ const getConfig = computed<any>(() => {
           view: 'h4',
           title: 'Heading 4',
           class: 'ck-heading_heading4'
-        }
-      ]
-    },
-    image: {
-      resizeOptions: [
-        {
-          name: 'resizeImage:original',
-          label: 'Default image width',
-          value: null
         },
         {
-          name: 'resizeImage:50',
-          label: '50% page width',
-          value: '50'
+          model: 'heading5',
+          view: 'h5',
+          title: 'Heading 5',
+          class: 'ck-heading_heading5'
         },
         {
-          name: 'resizeImage:75',
-          label: '75% page width',
-          value: '75'
+          model: 'heading6',
+          view: 'h6',
+          title: 'Heading 6',
+          class: 'ck-heading_heading6'
         }
-      ],
+      ]
+    },
+    htmlSupport: {
+      allow: [
+        {
+          name: /^.*$/,
+          styles: true,
+          attributes: true,
+          classes: true
+        }
+      ]
+    },
+    image: {
       toolbar: [
-        'imageTextAlternative',
         'toggleImageCaption',
+        'imageTextAlternative',
         '|',
         'imageStyle:inline',
         'imageStyle:wrapText',
@@ -287,24 +466,132 @@ const getConfig = computed<any>(() => {
         'resizeImage'
       ]
     },
-    menuBar: {
-      isVisible: !1
-    },
     link: {
       addTargetToExternalLinks: true,
-      defaultProtocol: 'https://'
+      defaultProtocol: 'https://',
+      decorators: {
+        toggleDownloadable: {
+          mode: 'manual',
+          label: 'Downloadable',
+          attributes: {
+            download: 'file'
+          }
+        }
+      }
+    },
+    list: {
+      properties: {
+        styles: true,
+        startIndex: true,
+        reversed: true
+      }
+    },
+    menuBar: {
+      isVisible: true
+    },
+    style: {
+      definitions: [
+        {
+          name: 'Article category',
+          element: 'h3',
+          classes: ['category']
+        },
+        {
+          name: 'Title',
+          element: 'h2',
+          classes: ['document-title']
+        },
+        {
+          name: 'Subtitle',
+          element: 'h3',
+          classes: ['document-subtitle']
+        },
+        {
+          name: 'Info box',
+          element: 'p',
+          classes: ['info-box']
+        },
+        {
+          name: 'CTA Link Primary',
+          element: 'a',
+          classes: ['button', 'button--green']
+        },
+        {
+          name: 'CTA Link Secondary',
+          element: 'a',
+          classes: ['button', 'button--black']
+        },
+        {
+          name: 'Marker',
+          element: 'span',
+          classes: ['marker']
+        },
+        {
+          name: 'Spoiler',
+          element: 'span',
+          classes: ['spoiler']
+        }
+      ]
     },
     table: {
-      contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
-    }
-  }
+      contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
+    },
+    mention: {
+      feeds: [
+        {
+          marker: '@',
+          feed: [
+            /* See: https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html */
+            '@myth', '@mythpe', '@ahmed', '@myth70', '@mythnooty', '@4myth'
+          ],
+          minimumCharacters: 1
+        }
+      ]
+    },
+    plugins
+  } as EditorConfig
+
   if (props.config) {
-    return props.config(inpConfig as EditorConfig)
+    return props.config(def) as EditorConfig
   }
-  return inpConfig
+  return def as EditorConfig
 })
+
+onMounted(() => {
+  isLayoutReady.value = true
+})
+
+/* type Emits = {
+  (e: 'ready', editor: EventInfo): void;
+  (e: 'destroy', editor: EventInfo): void;
+  (e: 'focus', event: { editor: EventInfo, event: DomEventData<FocusEvent> }): void;
+  (e: 'blur', event: { editor: EventInfo, event: DomEventData<FocusEvent> }): void;
+  (e: 'input', event: { editor: EventInfo, batch: Batch }): void;
+}
+const emit = defineEmits<Emits>()
+const onReady = (editor: EventInfo) => {
+  emit('ready', editor)
+}
+const onEditorFocus = (event: DomEventData<FocusEvent>, editor: EventInfo) => {
+  emit('focus', { editor, event })
+}
+const onEditorBlur = (event: DomEventData<FocusEvent>, editor: EventInfo) => {
+  emit('blur', { editor, event })
+}
+const onEditorInput = (editor: EventInfo, batch: Batch) => {
+  emit('input', { editor, batch })
+}
+const onEditorDestroy = (editor: EventInfo) => {
+  emit('destroy', editor)
+} */
+
 const listeners = {
   'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
+  // ready: onReady,
+  // focus: onEditorFocus,
+  // blur: onEditorBlur,
+  // input: onEditorInput,
+  // destroy: onEditorDestroy
 }
 const input = useTemplateRef<any>('input')
 const scopes = reactive(inputScope)
@@ -316,6 +603,31 @@ defineOptions({
 </script>
 
 <template>
+  <!--<div class="main-container">-->
+  <!--  <div-->
+  <!--    ref="editorContainerElement"-->
+  <!--    class="editor-container editor-container_classic-editor editor-container_include-style editor-container_include-block-toolbar editor-container_include-word-count editor-container_include-fullscreen"-->
+  <!--  >-->
+  <!--    <div class="editor-container__editor">-->
+  <!--      <div ref="editorElement">-->
+  <!--        <ckeditor-->
+  <!--          v-if="editor && getConfig"-->
+  <!--          :config="getConfig"-->
+  <!--          :disabled="disabled"-->
+  <!--          :editor="editor"-->
+  <!--          :model-value="value || ''"-->
+  <!--          :tag-name="tagName"-->
+  <!--          v-on="listeners"-->
+  <!--        />-->
+  <!--      </div>-->
+  <!--    </div>-->
+  <!--    <div-->
+  <!--      ref="editorWordCountElement"-->
+  <!--      class="editor_container__word-count"-->
+  <!--    />-->
+  <!--  </div>-->
+  <!--</div>-->
+
   <MCol
     :auto="auto"
     :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
@@ -375,24 +687,42 @@ defineOptions({
     </MTransition>
     <div
       v-if="viewMode"
-      v-html="value"
-    />
+      style="max-width: 100%;"
+    >
+      <div v-html="value" />
+    </div>
     <div
       v-else
-      :dir="isRtl ? 'rtl' : 'ltr'"
-      :style="`direction: ${isRtl ? 'rtl' : 'ltr'}`"
     >
       <ckeditor
-        ref="input"
+        v-if="editor && getConfig"
         :config="getConfig"
-        :disable-two-way-data-binding="disableTwoWayDataBinding"
         :disabled="disabled"
-        :editor="ClassicEditor"
+        :editor="editor"
         :model-value="value || ''"
         :tag-name="tagName"
         v-bind="{...$attrs,...pluginOptions.ckeditor}"
         v-on="listeners"
       />
+      <div v-else>
+        <div class="q-mb-sm row q-gutter-xs">
+          <q-skeleton
+            v-for="bb in 3"
+            :key="`ck-sk-${bb}`"
+            square
+            type="QBtn"
+          />
+          <q-skeleton
+            class="col"
+            square
+          />
+        </div>
+        <q-skeleton
+          height="250px"
+          square
+          type="QSlider"
+        />
+      </div>
       <slot v-bind="scopes" />
     </div>
     <slot
@@ -401,3 +731,129 @@ defineOptions({
     />
   </MCol>
 </template>
+
+<!--<style>-->
+<!--@import url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');-->
+<!--@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');-->
+
+<!--@media print {-->
+<!--  body {-->
+<!--    margin: 0 !important;-->
+<!--  }-->
+<!--}-->
+
+<!--.main-container {-->
+<!--  font-family: 'Lato';-->
+<!--  width: fit-content;-->
+<!--  margin-left: auto;-->
+<!--  margin-right: auto;-->
+<!--}-->
+
+<!--.ck-content {-->
+<!--  font-family: 'Lato';-->
+<!--  line-height: 1.6;-->
+<!--  word-break: break-word;-->
+<!--}-->
+
+<!--.editor-container_classic-editor .editor-container__editor {-->
+<!--  min-width: 795px;-->
+<!--  max-width: 795px;-->
+<!--}-->
+
+<!--.editor-container_include-block-toolbar {-->
+<!--  margin-left: 42px;-->
+<!--}-->
+
+<!--.ck-content h3.category {-->
+<!--  font-family: 'Oswald';-->
+<!--  font-size: 20px;-->
+<!--  font-weight: bold;-->
+<!--  color: #555;-->
+<!--  letter-spacing: 10px;-->
+<!--  margin: 0;-->
+<!--  padding: 0;-->
+<!--}-->
+
+<!--.ck-content h2.document-title {-->
+<!--  font-family: 'Oswald';-->
+<!--  font-size: 50px;-->
+<!--  font-weight: bold;-->
+<!--  margin: 0;-->
+<!--  padding: 0;-->
+<!--  border: 0;-->
+<!--}-->
+
+<!--.ck-content h3.document-subtitle {-->
+<!--  font-family: 'Oswald';-->
+<!--  font-size: 20px;-->
+<!--  color: #555;-->
+<!--  margin: 0 0 1em;-->
+<!--  font-weight: bold;-->
+<!--  padding: 0;-->
+<!--}-->
+
+<!--.ck-content p.info-box {-->
+<!--  &#45;&#45;background-size: 30px;-->
+<!--  &#45;&#45;background-color: #e91e63;-->
+<!--  padding: 1.2em 2em;-->
+<!--  border: 1px solid var(&#45;&#45;background-color);-->
+<!--  background: linear-gradient(135deg, var(&#45;&#45;background-color) 0%, var(&#45;&#45;background-color) var(&#45;&#45;background-size), transparent var(&#45;&#45;background-size)),-->
+<!--  linear-gradient(-->
+<!--    135deg,-->
+<!--    transparent calc(100% - var(&#45;&#45;background-size)),-->
+<!--    var(&#45;&#45;background-color) calc(100% - var(&#45;&#45;background-size)),-->
+<!--    var(&#45;&#45;background-color)-->
+<!--  );-->
+<!--  border-radius: 10px;-->
+<!--  margin: 1.5em 2em;-->
+<!--  box-shadow: 5px 5px 0 #ffe6ef;-->
+<!--}-->
+
+<!--.ck-content span.marker {-->
+<!--  background: yellow;-->
+<!--}-->
+
+<!--.ck-content span.spoiler {-->
+<!--  background: #000;-->
+<!--  color: #000;-->
+<!--}-->
+
+<!--.ck-content span.spoiler:hover {-->
+<!--  background: #000;-->
+<!--  color: #fff;-->
+<!--}-->
+
+<!--.ck-content .button {-->
+<!--  display: inline-block;-->
+<!--  width: 260px;-->
+<!--  border-radius: 8px;-->
+<!--  margin: 0 auto;-->
+<!--  padding: 12px;-->
+<!--  color: #ffffff;-->
+<!--  font-size: 24px;-->
+<!--  font-weight: 700;-->
+<!--  text-align: center;-->
+<!--  text-decoration: none;-->
+<!--}-->
+
+<!--.ck-content .button&#45;&#45;green {-->
+<!--  background-color: #406b1e;-->
+<!--}-->
+
+<!--.ck-content .button&#45;&#45;black {-->
+<!--  background-color: #141517;-->
+<!--}-->
+
+<!--.editor-container_include-word-count.editor-container_classic-editor .editor_container__word-count {-->
+<!--  border: 1px solid var(&#45;&#45;ck-color-base-border);-->
+<!--  border-radius: var(&#45;&#45;ck-border-radius);-->
+<!--  border-top-left-radius: 0;-->
+<!--  border-top-right-radius: 0;-->
+<!--  border-top: none;-->
+<!--}-->
+
+<!--.editor-container_include-word-count.editor-container_classic-editor .editor-container__editor .ck-editor .ck-editor__editable {-->
+<!--  border-radius: 0;-->
+<!--}-->
+
+<!--</style>-->